/**
 * WS Banniere - OURANOS, l'arc de cartes
 *
 * Source de verite du design : `design-banniere-ouranos.html`. Les valeurs
 * de repli ci-dessous sont celles de sa ligne de sortie.
 *
 * 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.
 *
 * LES DEFAUTS SONT DES REPLIS, PAS DES DECLARATIONS. Elementor ecrit les
 * variables d'Ouranos sur `.wsbn-ciel`, en 0-2-0 : on les LIT avec un repli,
 * `var(--ciel-fond, #F7F2EA)`, sans jamais les reposer ici.
 */

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

   Elle porte `.wsbn-ciel` ET `.wsbn-classique`, condition du partage du titre
   et des boutons. `.wsbn-classique{}` pose une marge de 60 px, une hauteur
   minimale, un `display:flex` aligne au centre : la mise en page de Hestia,
   pas celle-ci.

   LA REPRISE EST EN 0-2-0, et ce n'est pas un detail. Aphrodite la fait en
   0-1-0 et ne tient que par l'ORDRE DE CHARGEMENT des deux feuilles ; ici
   `.wsbn-ciel.wsbn-classique` gagne quel que soit cet ordre. Elementor, lui,
   n'ecrit que des VARIABLES sur cet element : aucune propriete ci-dessous ne
   lui dispute rien.
   -------------------------------------------------------------------------- */

.wsbn-ciel.wsbn-classique{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding:0;
  min-height:var(--ciel-minh, 760px);
  border-radius:var(--ciel-arrondi, 18px);
  background:var(--ciel-fond, #F7F2EA);
  color:#1E1B17;
}

/* LES COULEURS DE DEPART DU TITRE ET DES BOUTONS DE HESTIA.

   Celles de Classique sont faites pour une photo sombre : titre blanc,
   bouton dore. Sur un fond clair le titre disparaitrait. Ces variables sont
   posees en 0-1-0, apres la feuille de Classique : elles battent ses
   valeurs de depart, et perdent contre tout reglage du panneau, qui les
   ecrit en 0-2-0 sur le meme element ou plus bas. */
.wsbn-ciel{
  --wsbn-c-title-color:#000000;
  --wsbn-c-title-accent:#9A8366;
  --wsbn-c-btn-bg:#000000;
  --wsbn-c-btn-bg-hover:#2A2A2A;
  --wsbn-c-btn-text:#FFFFFF;
  --wsbn-c-btn2-fond:#FFFFFF;
  --wsbn-c-btn2-fond-h:#F1EEE8;
  --wsbn-c-btn2-encre:#000000;
}

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

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

.wsbn-ciel__corps{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  width:100%;
  max-width:var(--ciel-corps-w, 900px);
  padding:var(--ciel-corps-haut, 80px) 20px 0;
}

.wsbn-ciel .wsbn-classique__title{
  margin:0;
  width:100%;
}

/* `color` pose DIRECTEMENT, racine devant : un theme qui ecrit
   `.entry-content p{color:...}` perdrait sinon contre nous en 0-1-1. */
.wsbn-ciel .wsbn-ciel__accroche{
  margin:var(--ciel-accroche-haut, 18px) 0 0;
  max-width:46ch;
  font-size:15px;
  line-height:1.5;
  color:var(--ciel-accroche-couleur, #000000);
}

/* Les boutons de Hestia, sous l'accroche. */
.wsbn-ciel .wsbn-classique__cta{
  margin-top:24px;
  width:100%;
}

/* ==========================================================================
   L'ANNEAU, REPRIS DE `ws-ring-carousel` (WS Booster)

   DEUX ECARTS A L'ORIGINAL DANS CETTE FEUILLE :
   1. Ni `will-change` ni `translateZ(0)` sur la racine et la scene. Regle du
      projet : une couche declaree en CSS est retenue a vie. L'animation de
      rotation promeut deja la scene toute seule.
   2. L'INCLINAISON vit sur le CONTENEUR. L'original l'ecrivait en
      `transform` sur la scene, que l'animation de rotation ecrase a chaque
      image : elle ne marchait que rotation coupee.
   ========================================================================== */

.wsbn-ciel__zone{
  position:relative;
  width:100%;
  margin-top:var(--ciel-anneau-haut, 46px);
  margin-bottom:var(--ciel-anneau-bas, 40px);
}

/* L'anneau et le calque des fleches partagent la meme scene 3D. L'anneau
   est COUPE au bord des marges laterales (le script pose `--ciel-coupe`) :
   on voit exactement le nombre de cartes demande. Le debord vertical est
   genereux pour ne pas rogner les ombres. `clip-path` sur le parent qui
   porte la perspective ne casse pas la 3D, qui se joue dans ses enfants. */
.wsbn-ciel__anneau,
.wsbn-ciel__fleches{
  width:100%;
  height:var(--ciel-anneau-h, 300px);
  perspective:var(--ciel-perspective, 800px);
  display:flex;
  align-items:center;
  justify-content:center;
}

.wsbn-ciel__anneau{
  position:relative;
  isolation:isolate;
  clip-path:inset(-120px var(--ciel-coupe, 0px));
}

.wsbn-ciel__fleches{
  position:absolute;
  inset:0;
  pointer-events:none;
  visibility:hidden;
}

.wsbn-ciel-fleches-yes .wsbn-ciel__fleches{ visibility:visible; }

/* LE CONTENEUR a la largeur d'UN emplacement (le script la calcule ; ceci
   est le repli sans script). LE RECUL est ici : il repousse le centre de
   l'anneau d'un rayon derriere l'ecran, donc la carte de devant se trouve
   DANS le plan de l'ecran, a sa taille. C'est ce qui separe l'arc ouvert du
   modele de la roue de WS Booster, dont la carte de devant sortait vers le
   visiteur et grossissait. */
.wsbn-ciel__conteneur{
  position:relative;
  width:14%;
  aspect-ratio:3 / 4;
  max-height:100%;
  transform-style:preserve-3d;
  transform:translateZ(calc(var(--ciel-rayon, 800px) * -1)) rotateX(var(--ciel-inclinaison, 0deg));
}

/* `rotate` et non `transform` pour le demi-pas : la propriete individuelle
   se COMPOSE avec l'animation, qui ecrit `transform`. C'est lui qui centre
   un nombre pair de cartes ; un second `transform` aurait ecrase la
   rotation. */
.wsbn-ciel__scene{
  position:absolute;
  inset:0;
  transform-style:preserve-3d;
  rotate:y var(--ciel-decalage, 0deg);
}

.wsbn-ciel-auto-yes .wsbn-ciel__scene{
  animation:wsbn-ciel-tour var(--ciel-vitesse, 140s) linear infinite;
}
.wsbn-ciel-sens-inverse .wsbn-ciel__scene{ animation-direction:reverse; }

.wsbn-ciel-pause-yes .wsbn-ciel__anneau:hover .wsbn-ciel__scene,
.wsbn-ciel__scene.is-dragging{ animation-play-state:paused; }

@keyframes wsbn-ciel-tour{
  from{ transform:rotateY(0deg); }
  to{ transform:rotateY(360deg); }
}

/* Un emplacement : il tourne de son angle et avance du rayon. Il ne dessine
   rien : c'est la carte, dedans, qui a sa hauteur, comme sur le modele ou
   les cartes ne font pas toutes la meme taille. `backface-visibility`
   efface la moitie qui tourne le dos. */
.wsbn-ciel__place{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  transform:rotateY(var(--angle, 0deg)) translateZ(var(--ciel-rayon, 800px));
  backface-visibility:hidden;
}

/* --------------------------------------------------------------------------
   LES CARTES
   La racine devant partout : une carte avec lien est un `<a>`, et
   `.elementor a{box-shadow:none}` (0-1-1) lui retirerait son ombre.
   -------------------------------------------------------------------------- */

.wsbn-ciel .wsbn-ciel__carte{
  position:relative;
  width:100%;
  height:calc(100% * var(--haut, .92));
  border-radius:var(--ciel-carte-arrondi, 14px);
  overflow:hidden;
  padding:12px;
  display:flex;
  flex-direction:column;
  background:var(--ciel-clair, #FFFFFF);
  color:var(--ciel-clair-encre, #1A1814);
  text-decoration:none;
  backface-visibility:hidden;
  box-shadow:0 14px 34px rgba(70, 52, 25, var(--ciel-ombre, .10)),
             0 2px 6px rgba(70, 52, 25, calc(var(--ciel-ombre, .10) * .8));
}

.wsbn-ciel .wsbn-ciel__carte--sombre{
  background:var(--ciel-sombre, #17171A);
  color:var(--ciel-sombre-encre, #FFFFFF);
}
.wsbn-ciel .wsbn-ciel__carte--accent{
  background:var(--ciel-accent, #D8F28A);
  color:var(--ciel-accent-encre, #1C2410);
}

/* Les marges et les couleurs des themes sur `p` ne doivent pas entrer. */
.wsbn-ciel .wsbn-ciel__carte p{ margin:0; color:inherit; }

.wsbn-ciel .wsbn-ciel__petit{ font-size:10px; line-height:1.35; opacity:.62; }
.wsbn-ciel .wsbn-ciel__grand{ margin-top:4px; font-size:30px; line-height:1; font-weight:400; letter-spacing:-.04em; }
.wsbn-ciel .wsbn-ciel__grand small{ font-size:9.5px; letter-spacing:0; opacity:.6; margin-left:3px; }
.wsbn-ciel .wsbn-ciel__bas{ margin-top:auto; }
.wsbn-ciel .wsbn-ciel__carte--accent{ justify-content:center; }

/* La photo. Sans image choisie, la carte garde un fond uni et sa legende. */
.wsbn-ciel .wsbn-ciel__carte--photo{ padding:0; background:#E2D6C4; }
.wsbn-ciel .wsbn-ciel__visuel{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  display:block;
  -webkit-user-drag:none;
  pointer-events:none;
}
.wsbn-ciel__legende{
  position:absolute;
  left:8px;
  right:8px;
  bottom:8px;
  padding:5px 8px;
  border-radius:7px;
  background:rgba(255, 255, 255, .94);
  color:#1A1814;
  font-size:9px;
  line-height:1.3;
}

/* La courbe : dessinee en SVG, sa taille fait partie du dessin, donc la
   racine devant contre `.elementor-element svg{width:1em}` du theme. */
.wsbn-ciel .wsbn-ciel__courbe{ margin-top:auto; width:100%; height:52%; display:block; }
.wsbn-ciel__aire{ fill:var(--ciel-courbe, #3E9B47); fill-opacity:.25; }
.wsbn-ciel__trait{ fill:none; stroke:var(--ciel-courbe, #3E9B47); stroke-width:1.8; }

.wsbn-ciel .wsbn-ciel__phrase{ margin-top:auto; font-size:14px; line-height:1.22; font-weight:500; letter-spacing:-.01em; }
.wsbn-ciel__phrase span{ opacity:.55; }
.wsbn-ciel__point{ width:8px; height:8px; border-radius:50%; background:var(--ciel-point, #E4F36B); }

/* Le verre depoli. Sur un fond clair il ne peut pas montrer un ciel : il
   devient un blanc translucide a filet clair, la carte << a remplir >>. */
.wsbn-ciel .wsbn-ciel__carte--verre{
  background:rgba(255, 255, 255, .45);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  box-shadow:inset 0 0 0 1px rgba(255, 255, 255, .9),
             0 14px 34px rgba(70, 52, 25, calc(var(--ciel-ombre, .10) * .6));
  color:#6B6153;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:10px;
}
.wsbn-ciel .wsbn-ciel__verre-texte{ opacity:.9; }
.wsbn-ciel__plus{
  width:34px;
  height:34px;
  border-radius:50%;
  background:var(--ciel-plus-fond, #FFFFFF);
  color:var(--ciel-plus, #8A7B63);
  display:grid;
  place-items:center;
  font-size:20px;
  line-height:1;
  box-shadow:0 4px 12px rgba(70, 52, 25, .10);
}

.wsbn-ciel .wsbn-ciel__liste-titre{ opacity:1; font-weight:500; }
.wsbn-ciel .wsbn-ciel__liste{ list-style:none; margin:10px 0 0; padding:0; display:grid; gap:9px; }
.wsbn-ciel .wsbn-ciel__liste li{ display:flex; align-items:center; gap:7px; margin:0; }
.wsbn-ciel__coche{
  width:12px;
  height:12px;
  border-radius:4px;
  background:var(--ciel-courbe, #3E9B47);
  color:var(--ciel-coche, #FFFFFF);
  flex:none;
  display:grid;
  place-items:center;
}
.wsbn-ciel__coche--vide{ background:#ECE8E1; }
.wsbn-ciel .wsbn-ciel__coche svg{ width:8px; height:8px; }
.wsbn-ciel__barrette{ height:5px; border-radius:3px; background:#ECE8E1; flex:1; }

/* --------------------------------------------------------------------------
   LES FLECHES, dans la scene 3D
   Posees comme une carte : tournees de leur angle autour du centre, puis
   avancees du rayon, plus un pas vers le visiteur pour flotter devant.
   L'angle est calcule par le script (au milieu de la marge). Elles ne
   tournent pas avec l'anneau.
   -------------------------------------------------------------------------- */

.wsbn-ciel .wsbn-ciel__fleche{
  position:absolute;
  top:50%;
  left:50%;
  width:var(--ciel-fleche-taille, 46px);
  height:var(--ciel-fleche-taille, 46px);
  margin:calc(var(--ciel-fleche-taille, 46px) / -2) 0 0 calc(var(--ciel-fleche-taille, 46px) / -2);
  border:0;
  border-radius:50%;
  padding:0;
  display:grid;
  place-items:center;
  cursor:pointer;
  pointer-events:auto;
  background:var(--ciel-fleche-fond, #FFFFFF);
  color:var(--ciel-fleche-encre, #1E1B17);
  box-shadow:0 10px 26px rgba(70, 52, 25, .16);
  backface-visibility:hidden;
}
.wsbn-ciel .wsbn-ciel__fleche--prec{
  transform:rotateY(calc(var(--ciel-fleche-auto, 40deg) * -1)) translateZ(calc(var(--ciel-rayon, 800px) + var(--ciel-fleche-avance, 70px)));
}
.wsbn-ciel .wsbn-ciel__fleche--suiv{
  transform:rotateY(var(--ciel-fleche-auto, 40deg)) translateZ(calc(var(--ciel-rayon, 800px) + var(--ciel-fleche-avance, 70px)));
}
.wsbn-ciel .wsbn-ciel__fleche svg{ width:38%; height:38%; }
.wsbn-ciel .wsbn-ciel__fleche:focus-visible{ outline:2px solid currentColor; outline-offset:3px; }

.wsbn-ciel-glisser-yes .wsbn-ciel__anneau{ cursor:grab; user-select:none; }
.wsbn-ciel-glisser-yes .wsbn-ciel__anneau.is-dragging{ cursor:grabbing; }

/* LA VEILLE : hors de l'ecran ou onglet cache, l'anneau s'arrete. C'est la
   classe POSEE qui met en pause, jamais son absence. */
.wsbn-ciel.wsbn-hors-vue .wsbn-ciel__scene,
.wsbn-onglet-cache .wsbn-ciel .wsbn-ciel__scene{ animation-play-state:paused; }

@media (prefers-reduced-motion: reduce){
  .wsbn-ciel-auto-yes .wsbn-ciel__scene{ animation:none; }
}

/* --------------------------------------------------------------------------
   TABLETTE ET TELEPHONE
   Les reglages responsives arrivent par Elementor, en variables. Ce qui suit
   n'est que le REPLI de chaque ecran, quand aucune variable n'est posee.
   -------------------------------------------------------------------------- */

@media (max-width: 1024px){
  .wsbn-ciel.wsbn-classique{ min-height:var(--ciel-minh, 680px); }
  .wsbn-ciel__anneau,
  .wsbn-ciel__fleches{ height:var(--ciel-anneau-h, 280px); }
  .wsbn-ciel__conteneur{ width:20%; }
}

@media (max-width: 767px){
  .wsbn-ciel.wsbn-classique{ min-height:var(--ciel-minh, 0px); }
  .wsbn-ciel__corps{ padding-top:var(--ciel-corps-haut, 48px); }
  .wsbn-ciel .wsbn-ciel__accroche{ font-size:14px; }
  .wsbn-ciel__anneau,
  .wsbn-ciel__fleches{ height:var(--ciel-anneau-h, 230px); }
  .wsbn-ciel__zone{ margin-top:var(--ciel-anneau-haut, 32px); margin-bottom:var(--ciel-anneau-bas, 30px); }
  .wsbn-ciel__conteneur{ width:30%; }
  .wsbn-ciel .wsbn-ciel__fleche{
    width:var(--ciel-fleche-taille, 38px);
    height:var(--ciel-fleche-taille, 38px);
    margin:calc(var(--ciel-fleche-taille, 38px) / -2) 0 0 calc(var(--ciel-fleche-taille, 38px) / -2);
  }
}