/*
 * WS Banniere - APHRODITE
 *
 * LA BANNIERE EPUREE. Photo plein cadre, voile teinte, titre en serif, filet,
 * sous-titre, deux boutons. Tout est centre.
 *
 * Source de verite du design : `design-banniere-aphrodite.html`. Pour
 * retoucher une forme ou un dosage, on y cherche la valeur, puis on la
 * reporte ici.
 *
 * CHAQUE `var()` PORTE SON REPLI.
 * Ces variables viennent des `selectors` d'Elementor, donc d'une feuille
 * ENGENDREE. Partout ou elle n'est pas encore la (apercu sans styles, page
 * lue avant la fin du chargement, cache vide), un `var()` nu serait
 * INVALIDE, pas vide : la banniere s'ecraserait en un filet de quelques
 * pixels. Avec un repli, elle tient debout toute seule.
 *
 * AUCUNE REQUETE MEDIA ICI, ET C'EST VOULU.
 * Tout ce qui change d'un ecran a l'autre passe par les controles responsive
 * d'Elementor, qui engendrent leurs propres requetes sur le meme selecteur.
 * Une requete ecrite ici pour la MEME propriete perdrait de toute facon : le
 * CSS d'Elementor sort en 0-2-0 et plus tard dans la page.
 *
 * SPECIFICITE FAIBLE, ET C'EST VOULU.
 * Elementor ecrit `.elementor-element-XXX .classe`, en 0-2-0, et doit
 * toujours gagner. Seule exception assumee : le contour du second bouton,
 * qu'Elementor lui-meme efface (voir plus bas).
 */

.wsbn-aphro{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:var(--aphro-align, center);
  justify-content:center;
  text-align:var(--aphro-texte-align, center);
  min-height:var(--aphro-h, 620px);
  padding:var(--aphro-pad, 60px);
  border-radius:var(--aphro-radius, 0px);
  overflow:hidden;
  isolation:isolate;
  color:var(--aphro-encre, #FFFFFF);
}

.wsbn-aphro *,
.wsbn-aphro *::before,
.wsbn-aphro *::after{ box-sizing:border-box; }

/* --------------------------------------------------------------------------
   LA PHOTO

   Une vraie balise `img` et pas un fond CSS : c'est ce qui permet le
   `srcset`, le `fetchpriority` et le texte de remplacement.
   -------------------------------------------------------------------------- */

.wsbn-aphro__media{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
}

/* `<picture>` est EN LIGNE par defaut, et une hauteur en pourcentage ne se
   resout pas contre une boite en ligne : l'image tomberait a sa hauteur
   naturelle au lieu de remplir le cadre. */
.wsbn-aphro__picture{
  display:block;
  width:100%;
  height:100%;
}

.wsbn-aphro__media img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:var(--aphro-cadrage, 50% 50%);
}

/* --------------------------------------------------------------------------
   LE VOILE, PUIS L'ASSOMBRISSEMENT

   LE VOILE EST UN APLAT, PAS UN DEGRADE, et c'est le choix de cette
   banniere. Le texte est au CENTRE, pas en bas : un degrade montant du bas
   laisserait le titre sur la partie claire de la photo.

   L'ASSOMBRISSEMENT N'EST PAS DECORATIF, IL EST CALCULE. Un voile teinte uni
   ne peut pas garantir la lisibilite. Mesure du 2026-09-24, sur le pire cas,
   une zone BLANCHE de la photo :

     voile #8B5E56 a 0,55  ->  fond percu rgb(191,166,162)  ->  2,28:1
     voile #8B5E56 a 0,80  ->  fond percu rgb(162,126,120)  ->  3,62:1
     voile #8B5E56 a 1,00  ->  la photo a disparu

   Le texte blanc a besoin de 4,5:1 pour le sous-titre et 3:1 pour le grand
   titre. Monter le voile jusqu'a y arriver revient a supprimer la photo.

   Un assombrissement RADIAL centre sur le texte assure le contraste au milieu
   et laisse les bords clairs, donc la photo reste une photo :

     voile 0,55 + assombrissement 0,35  ->  rgb(124,108,105)  ->  4,98:1

   C'est la meme lecon que la table du projet : << du texte blanc sur fond
   clair, c'est un bloc concu pour se poser sur une photo assombrie, employe
   sans photo assombrie >>.
   -------------------------------------------------------------------------- */

.wsbn-aphro__voile{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:var(--aphro-voile, #8B5E56);
  opacity:var(--aphro-voile-op, .55);
}

/* LE VOILE EN DEGRADE LAISSE UNE PARTIE DE LA PHOTO NUE.
   La classe vient du `prefix_class` du mode, posee sur l'enveloppe du
   widget : c'est donc un ANCETRE de la racine, et la regle s'ecrit avec les
   deux, ce qui la met en 0-2-0.

   `background-image` et non `background` : la couleur unie reste declaree en
   dessous, et sert de repli partout ou l'image de fond n'est pas comprise.
   La transparence vise la COULEUR DU VOILE elle-meme, pas du noir : un
   degrade vers `transparent` passe par du gris dans certains navigateurs, ce
   qui salit la teinte au milieu. */
.wsbn-aphro-voile-degrade .wsbn-aphro__voile{
  background-image:linear-gradient(
    var(--aphro-voile-sens, to top),
    var(--aphro-voile, #8B5E56) 0%,
    color-mix(in srgb, var(--aphro-voile, #8B5E56) 45%, transparent) calc(var(--aphro-voile-fin, 72%) * .55),
    transparent var(--aphro-voile-fin, 72%)
  );
}

.wsbn-aphro__ombre{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:radial-gradient(
    ellipse var(--aphro-ombre-l, 70%) var(--aphro-ombre-h, 80%) at center,
    rgba(0,0,0,var(--aphro-ombre-op, .35)) 0%,
    rgba(0,0,0,calc(var(--aphro-ombre-op, .35) * .55)) 45%,
    rgba(0,0,0,0) 78%
  );
}

/* --------------------------------------------------------------------------
   LE CONTENU
   -------------------------------------------------------------------------- */

.wsbn-aphro__corps{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:var(--aphro-align, center);
  max-width:var(--aphro-corps-w, 760px);
  width:100%;
}

/* LA SERIF EST LE SUJET. Tout le reste est a son service : c'est elle qui
   porte le calme et le soin.

   `color:inherit` AVEC LA RACINE DEVANT, et ce n'est pas une precaution en
   l'air : le titre est un `<h1>` par defaut, et les themes ecrivent
   `h1{color:...}`. Une regle DIRECTE, meme en 0-0-1, bat toujours une
   couleur HERITEE, quelle que soit la specificite du parent : l'heritage
   n'entre pas dans le calcul. Sans cette ligne, le titre sortirait a la
   couleur du theme sur une photo assombrie, pendant que le sous-titre et les
   boutons resteraient blancs. C'est exactement ce qui est arrive a Vitrine
   en 1.67, et qu'il a fallu chercher. */
/* --------------------------------------------------------------------------
   LE TITRE VIENT DE CLASSIQUE, LA SERIF VIENT D'ICI

   Depuis la 1.72, le titre est celui du trait partage : il sort en
   `.wsbn-classique__title`, avec ses quatre parties, ses vingt decorations et
   ses effets d'entree.

   La serif reste la signature d'Aphrodite, et elle se pose donc par-dessus.
   `.wsbn-aphro` devant donne 0-2-0, ce qui bat la regle de Classique en
   0-1-0. Et le groupe de typographie d'Elementor, lui, sort en
   `.elementor-element-XXX .wsbn-classique__title`, soit 0-2-0 AUSSI mais
   PLUS TARD dans la page : des qu'on choisit une police dans le panneau,
   c'est elle qui gagne. C'est exactement le comportement voulu, un defaut
   qu'on peut reprendre.

   On ne touche ni a la couleur ni a la taille : elles ont leurs controles
   dans le trait partage et dans `style_title_colors()`.
   -------------------------------------------------------------------------- */

.wsbn-aphro .wsbn-classique__title{
  font-family:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-weight:400;
  letter-spacing:-.01em;
}

/* Le titre est centre comme le reste du bloc : la banniere est une colonne
   centree, et Classique aligne a gauche par defaut. */
.wsbn-aphro .wsbn-classique__title,
.wsbn-aphro .wsbn-classique__cta{
  text-align:var(--aphro-texte-align, center);
}

/* Le filet est un ELEMENT, pas une bordure du titre : il doit avoir sa
   propre largeur, sa couleur et ses marges sans toucher au titre.
   `flex:none` parce que la colonne l'ecraserait a zero : c'est le seul
   enfant sans contenu, donc le seul que le navigateur accepte de reduire. */
.wsbn-aphro__filet{
  display:block;
  width:var(--aphro-filet-l, 120px);
  height:var(--aphro-filet-e, 1px);
  margin-top:var(--aphro-filet-esp, 26px);
  margin-bottom:var(--aphro-filet-esp, 26px);
  background:var(--aphro-filet-c, rgba(255,255,255,.55));
  flex:none;
}

.wsbn-aphro__sous{
  margin:0;
  /* SA PROPRE COULEUR, avec `currentColor` en repli : vide, la ligne reprend
     la couleur du texte courant, donc le comportement d'avant. */
  color:var(--aphro-sous-encre, currentColor);
  font-size:var(--aphro-sous-taille, 19px);
  font-weight:300;
  line-height:1.6;
  letter-spacing:.01em;
  opacity:var(--aphro-sous-op, .92);
  max-width:var(--aphro-sous-w, 520px);
}

/* --------------------------------------------------------------------------
   LES BOUTONS
   -------------------------------------------------------------------------- */

.wsbn-aphro__cta{
  display:flex;
  flex-direction:var(--aphro-btn-dir, row);
  flex-wrap:wrap;
  gap:var(--aphro-btn-gap, 16px);
  justify-content:var(--aphro-align, center);
  align-items:var(--aphro-btn-cross, stretch);
  margin-top:var(--aphro-btn-haut, 34px);
  width:100%;
}

/* LA BORNE DE LARGEUR NE SERT QU'EN PILE.
   Empiles, les boutons prennent la largeur et s'etireraient sur toute la
   banniere sans borne ; cote a cote, la meme borne les ecraserait.

   C'EST LE DICTIONNAIRE DU CONTROLE DE DISPOSITION QUI TRANCHE, pas le CSS.
   On ne peut pas brancher une regle sur la VALEUR d'une variable, et tenter
   de lire l'attribut `style` ne marcherait pas non plus : Elementor ecrit
   ses variables dans une feuille, sur la RACINE, jamais en ligne sur cette
   rangee. Le dictionnaire pose donc `--aphro-btn-max` en meme temps que la
   direction, et les deux ne peuvent pas se contredire. */
.wsbn-aphro__cta--duo{
  max-width:var(--aphro-btn-max, none);
}

/* LA BASE EST COMMUNE AUX DEUX BOUTONS, ET C'EST TOUT LE POINT.
   Deux boutons cote a cote qui n'ont ni la meme hauteur ni la meme graisse,
   ca se voit au premier coup d'oeil. Recopier ces valeurs dans le bloc du
   second ferait une SECONDE VERITE : le jour ou on change la marge ici,
   l'autre resterait en arriere sans rien signaler. */
.wsbn-aphro__btn,
.wsbn-aphro__btn2{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:var(--aphro-btn-w, auto);
  max-width:100%;
  padding:var(--aphro-btn-py, 15px) var(--aphro-btn-px, 34px);
  border-radius:var(--aphro-btn-radius, 999px);
  border:0;
  cursor:pointer;
  font-size:var(--aphro-btn-taille, 14.5px);
  font-weight:400;
  letter-spacing:.02em;
  line-height:1.2;
  text-decoration:none;
  transition:background-color .25s ease, color .25s ease, box-shadow .25s ease;
}

/* Le reset `a{color:inherit}` de beaucoup de themes bat une classe simple
   posee sur un `<a>` : on qualifie par `a.` pour reprendre la main. */
a.wsbn-aphro__btn{
  background:var(--aphro-btn-fond, #D9A6A0);
  color:var(--aphro-btn-encre, #FFFFFF);
  text-decoration:none;
}

a.wsbn-aphro__btn:hover{
  background:var(--aphro-btn-fond-h, #C68F89);
}

/* LE SECOND BOUTON : le contour est une OMBRE INTERIEURE, pas une bordure.
   Une bordure de 1 px s'ajoute a la boite : le second ferait 2 px de plus
   que le premier, ce qui se voit tout de suite sur une paire. L'ombre
   interieure dessine le meme trait sans prendre aucune place, donc les deux
   gardent la marge interieure commune et la meme hauteur PAR CONSTRUCTION,
   pas par reglage.

   LA RACINE PASSE DEVANT, SINON ELEMENTOR EFFACE LE CONTOUR.
   `frontend.min.css` d'Elementor ecrit `.elementor a{box-shadow:none}`, en
   0-1-1. Un selecteur a nous en 0-1-0 perd, et le contour disparait sans
   rien dire : le bouton garde sa couleur, sa taille et sa place, il perd
   seulement son trait. On ne le voit qu'en le comparant au bouton d'a cote.
   `.wsbn-aphro a.` donne 0-2-1, qui gagne. */
.wsbn-aphro a.wsbn-aphro__btn2,
.wsbn-aphro .wsbn-aphro__btn2{
  background:transparent;
  color:inherit;
  text-decoration:none;
  box-shadow:inset 0 0 0 var(--aphro-btn2-e, 1px) var(--aphro-btn2-bord, rgba(255,255,255,.85));
}

.wsbn-aphro a.wsbn-aphro__btn2:hover,
.wsbn-aphro .wsbn-aphro__btn2:hover{
  background:var(--aphro-btn2-fond-h, rgba(255,255,255,.14));
  box-shadow:inset 0 0 0 var(--aphro-btn2-e, 1px) var(--aphro-btn2-bord, rgba(255,255,255,.85));
}

/* --------------------------------------------------------------------------
   MOUVEMENT REDUIT

   Aucune boucle ici, pas un seul `@keyframes` : c'est pour ca qu'Aphrodite
   ne declare pas `ws-banniere-veille`, qui ne saurait rien y mettre en
   pause. Restent les transitions, qui sont des mouvements PROVOQUES par le
   survol : la preference vaut pour eux aussi.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion:reduce){
  .wsbn-aphro__btn,
  .wsbn-aphro__btn2{ transition:none; }
}