/* ==========================================================================
   WS Bannière - le bloc de capture d'adresse

   Commun à toutes les bannières. Il porte ses propres classes et ses propres
   variables : aucune bannière n'a besoin de savoir qu'il existe, et il n'a
   besoin d'aucune d'elles.

   Toutes les mesures passent par une variable, écrite par Elementor sur
   `.wsbn-capture`. La feuille ne fait que déclarer les valeurs de départ :
   une bannière posée sans rien régler doit déjà être présentable.
   ========================================================================== */

.wsbn-capture{
  /* Disposition */
  --wsbn-cap-cols:1fr max-content;
  --wsbn-cap-w:540px;
  --wsbn-cap-gap:12px;
  --wsbn-cap-top:28px;
  --wsbn-cap-py:16px;

  /* Le champ */
  --wsbn-cap-champ-fond:#FFFFFF;
  --wsbn-cap-champ-txt:#23261F;
  --wsbn-cap-champ-ph:#A9AEC0;
  --wsbn-cap-champ-bord:#D8D4CC;
  --wsbn-cap-champ-bord-w:1px;
  --wsbn-cap-champ-radius:12px;

  /* Le bouton. Le FOND n'est pas ici : il est écrit par Elementor
     directement sur l'élément, seule façon d'offrir le dégradé et de rendre
     « Aucun fond » réellement atteignable, un groupe Elementor n'écrivant
     rien du tout dans ce cas. */
  --wsbn-cap-btn-txt:#FFFFFF;
  --wsbn-cap-btn-txt-h:#FFFFFF;
  --wsbn-cap-btn-radius:12px;
  --wsbn-cap-btn-px:30px;
  --wsbn-cap-btn-grow:1.02;
  --wsbn-cap-btn-lift:0px;

  /* La mention */
  --wsbn-cap-mention:#6B7288;
  --wsbn-cap-mention-top:12px;

  margin-top:var(--wsbn-cap-top);
  max-width:100%;
}

/* LES SELECTEURS SONT QUALIFIES PAR LEUR CONTENEUR, ET C'EST VOULU.
   Une regle de theme du genre `button` ou `.btn` pese autant qu'une
   classe de composant simple : a poids egal, c'est la derniere chargee
   qui gagne, et celle du theme l'est presque toujours. Mesure faite sur
   un site reel : arrondi demande 999 px, arrondi obtenu 3 px. Ne pas
   "simplifier" ces selecteurs. */

/* UNE GRILLE, PAS UN FLEX.
   Le champ prend ce qui reste, le bouton garde la taille de son libellé, et
   le passage en colonne sur petit écran ne demande qu'une seule valeur. */
.wsbn-capture__form{
  display:grid;
  grid-template-columns:var(--wsbn-cap-cols);
  gap:var(--wsbn-cap-gap);
  width:var(--wsbn-cap-w);
  max-width:100%;
  margin:0;
}

/* SANS CECI, RIEN NE SE PARTAGE LA LIGNE.
   Un élément de grille refuse par défaut de descendre sous la largeur de son
   contenu : le champ pousserait le bouton hors du cadre dès que la colonne
   se resserre. */
.wsbn-capture__form > *{
  min-width:0;
}

/* L'étiquette existe pour les lecteurs d'écran et reste hors de l'image.
   `display:none` l'aurait retirée de l'arbre d'accessibilité, ce qui revient
   à ne pas l'avoir écrite. */
.wsbn-capture__label{
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

.wsbn-capture .wsbn-capture__champ{
  font:inherit;
  padding:var(--wsbn-cap-py) 20px;
  border:var(--wsbn-cap-champ-bord-w) solid var(--wsbn-cap-champ-bord);
  border-radius:var(--wsbn-cap-champ-radius);
  background:var(--wsbn-cap-champ-fond);
  color:var(--wsbn-cap-champ-txt);
  box-sizing:border-box;
  width:100%;
}

.wsbn-capture .wsbn-capture__champ::placeholder{
  color:var(--wsbn-cap-champ-ph);
  opacity:1;
}

/* Le contour de mise au point n'est PAS retiré : il est remplacé par un plus
   lisible. Le retirer sans rien mettre à la place rend la navigation au
   clavier impossible à suivre. */
.wsbn-capture .wsbn-capture__champ:focus-visible{
  outline:2px solid var(--wsbn-cap-champ-txt);
  outline-offset:2px;
}

.wsbn-capture .wsbn-capture__btn{
  font:inherit;
  font-weight:700;
  padding:var(--wsbn-cap-py) var(--wsbn-cap-btn-px);
  border:0;
  border-radius:var(--wsbn-cap-btn-radius);
  color:var(--wsbn-cap-btn-txt);
  cursor:pointer;
  white-space:nowrap;
  box-sizing:border-box;

  /* `scale` et `translate` sont des propriétés individuelles : elles se
     composent, là où deux `transform` se seraient annulées. */
  transition:background-color .25s ease, background-image .25s ease,
             color .25s ease,
             scale .25s cubic-bezier(.2,.8,.2,1),
             translate .25s cubic-bezier(.2,.8,.2,1);
}

.wsbn-capture .wsbn-capture__btn:hover{
  color:var(--wsbn-cap-btn-txt-h);
  scale:var(--wsbn-cap-btn-grow);
  translate:0 calc(-1 * var(--wsbn-cap-btn-lift));
}

.wsbn-capture .wsbn-capture__btn:focus-visible{
  outline:2px solid var(--wsbn-cap-btn-txt);
  outline-offset:3px;
}

.wsbn-capture .wsbn-capture__mention{
  margin:var(--wsbn-cap-mention-top) 0 0;
  color:var(--wsbn-cap-mention);
  font-size:12px;
  line-height:1.45;
  max-width:var(--wsbn-cap-w);
}

@media (prefers-reduced-motion:reduce){
  .wsbn-capture .wsbn-capture__btn{transition:none}
  .wsbn-capture .wsbn-capture__btn:hover{scale:1;translate:0}
}