/**
 * WS Banniere - APOLLON, l'encadre sur photo
 *
 * Source de verite du design : `design-banniere-apollon.html`. Les valeurs
 * de repli ci-dessous sont celles de sa ligne de sortie, elles-memes
 * MESUREES sur la banniere d'accueil de muzestudio.fr le 2026-10-13.
 *
 * LE TITRE ET LES BOUTONS NE SONT PAS ICI : ils viennent de la feuille de
 * Classique, chargee avant celle-ci. Cette feuille n'en regle que les
 * couleurs de depart, par leurs variables, et la place des boutons.
 *
 * LES DEFAUTS SONT DES REPLIS, PAS DES DECLARATIONS. Elementor ecrit les
 * variables d'Apollon sur `.wsbn-apo` : on les LIT avec un repli,
 * `var(--apo-espace, 200px)`, sans jamais les reposer ici.
 */

/* --------------------------------------------------------------------------
   LA RACINE

   Elle porte `.wsbn-apo` ET `.wsbn-classique`, condition du partage du titre
   et des boutons. `.wsbn-classique{}` pose une marge de 60 px, une hauteur
   minimale et un `display:flex` : la mise en page de Hestia, pas celle-ci.
   La reprise est en 0-2-0, comme sur Ouranos : elle gagne quel que soit
   l'ordre de chargement des deux feuilles.

   LA HAUTEUR N'EST PAS POSEE : c'est l'encadre plus la photo laissee
   visible au-dessus et au-dessous (`--apo-espace`).
   -------------------------------------------------------------------------- */

.wsbn-apo.wsbn-classique{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:block;
  min-height:0;
  padding:var(--apo-espace, 200px) 20px;
  border-radius:var(--apo-arrondi, 0px);
  background:#D9D6D0;
  color:#FFFFFF;
}

/* LES COULEURS DE DEPART DU TITRE ET DES BOUTONS DE HESTIA, celles du
   modele : titre blanc, boutons blancs a texte rose. Posees en 0-1-0 apres
   la feuille de Classique : elles battent ses valeurs de depart, et
   perdent contre tout reglage du panneau, ecrit en 0-2-0. */
.wsbn-apo{
  --wsbn-c-title-color:#FFFFFF;
  --wsbn-c-title-accent:#FFFFFF;
  --wsbn-c-btn-bg:#FFFFFF;
  --wsbn-c-btn-bg-hover:#FFF1F8;
  --wsbn-c-btn-text:#F290C9;
  --wsbn-c-btn2-fond:#FFFFFF;
  --wsbn-c-btn2-fond-h:#FFF1F8;
  --wsbn-c-btn2-encre:#F290C9;
}

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

/* --------------------------------------------------------------------------
   LA PHOTO, en absolu : c'est la banniere qui decide de la hauteur.
   La racine passe devant pour battre les `img{height:auto}` des themes.
   -------------------------------------------------------------------------- */

.wsbn-apo__media{
  position:absolute;
  inset:0;
  z-index:0;
  display:block;
}

.wsbn-apo .wsbn-apo__photo{
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  object-position:var(--apo-photo-pos, center center);
}

/* Le voile, a zero par defaut comme sur le modele. */
.wsbn-apo::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:var(--apo-voile, #000000);
  opacity:var(--apo-voile-o, 0);
}

/* --------------------------------------------------------------------------
   LE CONTENEUR ET L'ENCADRE

   L'encadre se cale sur une colonne centree de 1140 px, pas sur le bord de
   l'ecran : sur un grand ecran il reste pres du centre, comme sur le
   modele, ou il commence a 373 px du bord d'une fenetre de 1885.
   -------------------------------------------------------------------------- */

.wsbn-apo__zone{
  position:relative;
  z-index:2;
  max-width:var(--apo-conteneur, 1140px);
  margin:0 auto;
  display:flex;
  justify-content:var(--apo-pos-x, flex-start);
}

.wsbn-apo__encadre{
  width:100%;
  max-width:var(--apo-encadre-w, 551px);
  padding:30px;
  border-radius:var(--apo-encadre-r, 0px);
  background:var(--apo-encadre-fond, rgba(242,144,201,.95));
  -webkit-backdrop-filter:blur(var(--apo-flou, 0px));
          backdrop-filter:blur(var(--apo-flou, 0px));
}

/* L'ombre n'existe que si on l'allume : c'est la classe POSEE qui
   l'apporte, `prefix_class` l'ecrivant sur l'enveloppe du widget. */
.wsbn-apo-ombre-yes .wsbn-apo__encadre{
  box-shadow:0 18px 50px rgba(0,0,0,var(--apo-ombre-o, .22));
}

/* --------------------------------------------------------------------------
   LE TEXTE
   -------------------------------------------------------------------------- */

/* L'ESPACE RESERVE A CHAQUE LIGNE SE DECIDE SUR LE CONTENEUR, pas sur le
   texte : c'est la regle du titre de Hestia, ou les parties sont des blocs
   en ligne. Ce conteneur vaut `clamp(28px, 4.4vw, 52px)` chez Hestia :
   avec l'interligne de 1,4 du modele, chaque ligne reservait 73 px pour un
   texte de 36, et le titre s'ouvrait comme un poeme. Mesure le 2026-10-13
   sur le banc : 146 px pour deux lignes, contre 101 attendus.

   Le conteneur prend donc la taille du titre du modele, ecran par ecran
   (36, 23, 19 px). Un titre regle PLUS GRAND dans le panneau reserve
   davantage, l'interligne suivant le plus grand des deux ; un titre plus
   petit garde l'espace du modele. */
.wsbn-apo .wsbn-classique__title{
  margin:0;
  width:100%;
  font-size:36px;
}
@media (max-width:1024px){ .wsbn-apo .wsbn-classique__title{ font-size:23px; } }
@media (max-width:767px){ .wsbn-apo .wsbn-classique__title{ font-size:19px; } }

/* `color` pose DIRECTEMENT, racine devant : un theme qui ecrit
   `.entry-content p{color:...}` gagnerait sinon. La taille et la police
   viennent du groupe Typographie ; elles ne sont ici qu'en repli. */
.wsbn-apo .wsbn-apo__accroche{
  margin:var(--apo-accroche-haut, 20px) 0 0;
  font-family:"Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:15px;
  line-height:1.65;
  color:var(--apo-accroche-couleur, #FFFFFF);
}

/* --------------------------------------------------------------------------
   LES BOUTONS, CHACUN CENTRE DANS SA MOITIE

   Le modele range ses deux boutons dans deux colonnes INEGALES, 215 et
   276 px sur 491 (43,8 et 56,2 %), chacune avec 10 px de marge, et centre
   chaque bouton dans la sienne. Mesure, pas arrondi : en moities egales le
   second bouton tombait 18 px trop a droite.

   AUCUN REGLAGE NEUF. Les colonnes viennent de << Disposition des deux
   boutons >> de Hestia, dont l'orchestrateur ajuste le dictionnaire (une
   colonne unique en pile). La place DANS la colonne vient de << Position
   du bouton >>, qui ecrit `--wsbn-c-btn-just` : flex-start, center,
   flex-end et stretch sont aussi des valeurs de `justify-items`. L'ecart
   reglable devient celui entre deux boutons EMPILES.

   0-2-0 contre le 0-1-0 de `.wsbn-classique__cta--duo` : la grille gagne
   sur la rangee flexible de Hestia, sans `!important`.
   -------------------------------------------------------------------------- */

.wsbn-apo .wsbn-classique__cta{
  margin:var(--apo-btn-haut, 30px) 0 10px;
}

.wsbn-apo .wsbn-classique__cta--duo{
  display:grid;
  grid-template-columns:var(--apo-btn-cols, 43.8fr 56.2fr);
  gap:var(--wsbn-c-btn-gap, 20px) 0;
  justify-items:var(--wsbn-c-btn-just, center);
  align-items:center;
}

.wsbn-apo .wsbn-classique__cta--duo > .wsbn-classique__btn,
.wsbn-apo .wsbn-classique__cta--duo > .wsbn-classique__btn2{
  margin:0 10px;
}

/* Un bouton etire prend toute sa colonne, libelle centre.

   LARGEUR AUTOMATIQUE, ET PAS LES 100 % DE HESTIA. En << Etiree >>, le
   dictionnaire de Hestia pose `--wsbn-c-btn-width:100%` : ajoute aux 10 px
   de marge de chaque cote, le bouton faisait 327 px dans une colonne de
   307 et sortait de l'encadre de 20 px (mesure le 2026-10-13 sur le
   telephone du banc). Dans une grille, un element en largeur automatique
   s'etire DEJA jusqu'aux marges : c'est la bonne mesure, et elle vaut pour
   les quatre positions. */
.wsbn-apo .wsbn-classique__cta--duo > a{
  width:auto;
  justify-content:center;
}

/* --------------------------------------------------------------------------
   TABLETTE ET TELEPHONE, mesures sur le modele

   Les valeurs qui changent d'un ecran a l'autre (espace, largeur de
   l'encadre, taille du titre, disposition des boutons) passent par le
   selecteur d'appareil d'Elementor. Ne reste ici que ce qui ne se regle
   pas : la marge laterale, nulle sur tablette et telephone, ou l'encadre
   colle au bord comme sur le modele.
   -------------------------------------------------------------------------- */

@media (max-width:1024px){
  .wsbn-apo.wsbn-classique{ padding-left:0; padding-right:0; }
}

@media (max-width:767px){
  .wsbn-apo__encadre{ max-width:var(--apo-encadre-w, 100%); }
}

/* --------------------------------------------------------------------------
   EMPILE, SUR TELEPHONE : la photo en bandeau, l'encadre dessous

   La classe `wsbn-apo-mob-empile` est posee sur l'enveloppe du widget par
   `prefix_class`, d'ou le sélecteur qui la met devant la racine.

   La photo REVIENT DANS LE FLUX : elle n'est plus le fond, elle a sa propre
   hauteur, en 4/3 par defaut comme le bandeau de Hestia, ou celle reglee
   dans << Hauteur de la photo >>. Avec une hauteur declaree, le rapport ne
   s'applique plus. Le voile disparait : il colorait la photo SOUS le texte,
   et le texte n'y est plus. L'espace au-dessus et au-dessous de l'encadre
   n'a plus de sens, la banniere suit son contenu.
   -------------------------------------------------------------------------- */
@media (max-width:767px){
  .wsbn-apo-mob-empile .wsbn-apo.wsbn-classique{ padding:0; }
  .wsbn-apo-mob-empile .wsbn-apo::before{ display:none; }
  .wsbn-apo-mob-empile .wsbn-apo__media{ position:relative; inset:auto; }
  .wsbn-apo-mob-empile .wsbn-apo .wsbn-apo__photo{
    width:100%;
    aspect-ratio:4/3;
    height:var(--apo-photo-h, auto);
  }
  .wsbn-apo-mob-empile .wsbn-apo__encadre{
    max-width:none;
    border-radius:0;
    box-shadow:none;
    -webkit-backdrop-filter:none;
            backdrop-filter:none;
  }
}