/* ═══════════════════════════════════════════════════════════════════
 * saison.css — habillage saisonnier d'Ari Lashes
 * Cree le 22-09-2026 · Saison : AUTOMNE
 *
 * PRINCIPE : cette feuille ne repeint PAS la marque. Le lilas #9b8dd4
 * reste l'accent principal — il doit rester coherent avec le logo, le
 * QR code des avis, la carte cadeau et la carte de fidelite imprimees,
 * et l'og-image. Ce qui change ici, ce sont les NEUTRES (du blanc
 * violace vers la creme tiede) et le degrade des prix (lilas -> caramel).
 *
 * ACTIVER   : <html lang="fr" data-saison="automne">
 * DESACTIVER: retirer l'attribut data-saison. Rien d'autre a toucher.
 *
 * Presque toutes les regles sont prefixees :root[data-saison="automne"],
 * donc la specificite l'emporte sur le <style> inline quel que soit
 * l'ordre de chargement du <link>. Exception voulue : .saison-feuilles
 * {display:none} et le style des feuilles, non prefixes, pour que le div
 * reste invisible quand on retire l'attribut.
 * ═══════════════════════════════════════════════════════════════════ */

:root[data-saison="automne"]{
  /* — Fonds : le blanc violace devient creme tiede — */
  --bg:#FFFCF8;
  --bg2:#FBF5EC;
  --bg3:#F8EFE4;
  --card:#FFFFFF;
  --card2:#FAF2E7;

  /* — Marque : inchangee. C'est volontaire. — */
  --purple:#9b8dd4;
  --purple-d:#7b6cac;
  --purple-l:#c4bae8;

  /* — Le rose froid devient terre cuite / caramel — */
  --rose:#A97243;
  --rose-l:#E8C9A8;

  /* — Signature de la saison : le degrade des prix et des chiffres
   *   passe du lilas de marque au caramel. C'est le seul endroit ou
   *   l'automne touche un element de marque, et c'est l'effet voulu. — */
  --grad:linear-gradient(135deg,#9B8DD4 0%,#C98B3E 100%);
  --grad-soft:linear-gradient(135deg,rgba(155,141,212,.13) 0%,rgba(201,139,62,.15) 100%);
  --svc-bg:linear-gradient(135deg,#FDF7F0 0%,#FBEFDE 100%);
  --svc-bg-hov:linear-gradient(135deg,#FAF0E4 0%,#F7E6CF 100%);

  /* — Textes : noir violace -> brun profond. --muted passe de #8a85a8
   *   (3.28:1, sous le seuil AA) a #726554 : 5.54:1 sur --bg, 5.23:1
   *   sur --bg2 et 4.98:1 sur --bg3 — AA sur les trois surfaces. La
   *   saison corrige au passage un defaut de contraste existant. — */
  --text:#241A14;
  --text2:#5A4632;
  --muted:#726554;

  /* — Filets et ombres : lilas -> noisette — */
  --border:rgba(176,124,74,.26);
  --border2:rgba(176,124,74,.12);
  --shadow:0 4px 32px rgba(150,108,66,.13);
  --shadow2:0 8px 48px rgba(150,108,66,.20);
}

/* ─────────────────────────────────────────────────────────────────
 * Ombres ecrites en dur dans le <style> inline (rgba 155,141,212).
 * On ne les corrige QUE la ou elles se voient sur fond creme.
 * ───────────────────────────────────────────────────────────────── */
:root[data-saison="automne"] .svc-card{
  box-shadow:0 2px 10px rgba(150,108,66,.07);
}
:root[data-saison="automne"] .svc-card:hover{
  box-shadow:0 12px 30px rgba(176,124,74,.20);
  border-color:#DFC3A0;
}
:root[data-saison="automne"] .btn-primary{
  box-shadow:0 4px 20px rgba(155,141,212,.32);
}
:root[data-saison="automne"] .btn-primary:hover{
  box-shadow:0 8px 28px rgba(155,141,212,.45);
}

/* ──────────────────────────────────────────────────────────────
 * Bouton desactive. Le <style> inline fait :disabled{background:var(--muted)}.
 * Avec le --muted assombri pour le contraste AA, un bouton desactive passerait
 * pour un bouton actif. On lui rend un gris-taupe clair, sans ambiguite.
 * ─────────────────────────────────────────────────────────── */
:root[data-saison="automne"] .bm-btn-primary:disabled{
  background:#CFC5B6;
}
:root[data-saison="automne"] ::-webkit-scrollbar-thumb{background:var(--purple);}
:root[data-saison="automne"] ::selection{background:#EBD6BB;color:var(--text);}

/* ─────────────────────────────────────────────────────────────────
 * Hero : la video reste la meme, l'overlay se rechauffe.
 * Le bas du degrade garde sa densite (lisibilite du titre blanc).
 * ───────────────────────────────────────────────────────────────── */
:root[data-saison="automne"] .hero-overlay{
  background:linear-gradient(to bottom,
    rgba(58,32,14,.16) 0%,
    rgba(58,32,14,.10) 38%,
    rgba(40,24,12,.34) 72%,
    rgba(26,16,9,.52) 100%);
}

/* — Fonds de section ecrits en dur dans le <style> inline —
   inatteignables par les variables, repris un a un ici.

   Meme structure a chaque fois : meme angle, meme nombre de paliers.
   Seul le hex froid change, remplace par son equivalent tiede a L*
   equivalent, pour que le rythme clair/fonce de la page soit conserve.
   Listees dans l'ordre ou elles apparaissent sur la page. — */
:root[data-saison="automne"] .tryon{background:linear-gradient(180deg,#FCF7EF 0%,#FBEFE0 100%)}
:root[data-saison="automne"] .about{background:linear-gradient(180deg,#FCF7EF 0%,#F7EDE1 100%)}
:root[data-saison="automne"] .services{background:linear-gradient(180deg,#FFFFFF 0%,#FDF2E4 100%)}
:root[data-saison="automne"] .promo{background:linear-gradient(135deg,#F7EDE1 0%,#FBEFE0 100%)}
:root[data-saison="automne"] .megara{background:linear-gradient(180deg,#FCF7EF 0%,#FAEBD8 100%)}
:root[data-saison="automne"] .social{background:linear-gradient(180deg,#FFFAF3 0%,#FBEFE2 100%)}
:root[data-saison="automne"] .reviews{background:linear-gradient(180deg,#FDF7EE 0%,#F7EDE1 100%)}
:root[data-saison="automne"] .contact{background:linear-gradient(180deg,#FCF7EF 0%,#FBEFE0 100%)}
/* .gallery-section, .formations et .faq ne sont pas reprises ici : elles
   lisent deja var(--bg) / var(--bg2) et suivent donc la saison seules. */

/* ──────────────────────────────────────────────────────────
 * Restes froids visibles a l'ecran, repris ici.
 * ────────────────────────────────────────────────────────── */

/* Le badge promo passait par un degrade rose : blanc sur rose, 1.90:1 au
 * point le plus clair. En terre cuite pleine, 5.21:1 — la saison corrige
 * au passage un vrai defaut de lisibilite. */
:root[data-saison="automne"] .badge-promo{
  background:#A9552F;
}

/* Les prix et les chiffres-cles quittent le degrade pour un aplat : en
 * degrade ils se delavent, et ce sont eux que la page vend.
 * 5.69:1 sur --bg, 5.47:1 a 5.13:1 sur la carte.
 * --grad n'est PAS touche : le <em> du hero garde le degrade. */
:root[data-saison="automne"] .svc-price,
:root[data-saison="automne"] .stat-num{
  background:none;
  -webkit-text-fill-color:#9E4F2B;
  color:#9E4F2B;
}

:root[data-saison="automne"] .about-exp-card{
  background:linear-gradient(135deg,rgba(201,139,62,.08) 0%,rgba(169,85,47,.10) 100%);
}
:root[data-saison="automne"] .panel-hero-overlay{
  background:linear-gradient(to top,rgba(40,24,12,.88) 0%,rgba(40,24,12,.25) 42%,rgba(0,0,0,0) 100%);
}

/* ──────────────────────────────────────────────────────────
 * Le bord de la carte d'expertise : le 10d avait chauffe le fond en
 * laissant le filet lilas. Corrige ici.
 * ────────────────────────────────────────────────────────── */
:root[data-saison="automne"] .about-exp-card{
  border-color:rgba(169,85,47,.24);
}

/* Le :hover de la carte, ecrase par les deux regles ci-dessus : a (0,3,1)
 * elles battaient .about-exp-card:hover (0,2,0), qui perdait son fond et
 * son filet. On le reecrit en entier, ombre comprise : elle restait en
 * bleu periwinkle sur une carte devenue ambre. */
:root[data-saison="automne"] .about-exp-card:hover{
  background:linear-gradient(135deg,rgba(201,139,62,.14) 0%,rgba(169,85,47,.18) 100%);
  border-color:rgba(169,85,47,.42);
  box-shadow:0 14px 30px rgba(169,85,47,.18);
}

/* L'ecran de confirmation, celui que la cliente voit APRES avoir paye.
 * Il sortait sur un bleu-lilas en dur : le pire endroit pour une rupture. */
:root[data-saison="automne"] #bmStep4{
  background:linear-gradient(180deg,#FDF8F1 0%,#F8F0E6 45%,#F0E5D6 100%);
}

:root[data-saison="automne"] .cert-medal{
  background:linear-gradient(160deg,#FFFFFF 0%,#FDF8F1 100%);
}

/* Megara : seuls les deux titres, qui sont du texte visible. Les trois
 * cadres photo gardent leur aplat froid : la photo les recouvre au
 * chargement, ca ne vaut pas l'elargissement du patch. */
:root[data-saison="automne"] .megara-head .section-title em{
  background-image:linear-gradient(135deg,#9E4F2B,#D4A25F);
}
:root[data-saison="automne"] .megara-visitors-title{
  background-image:linear-gradient(135deg,#9b8dd4,#B0714A 50%,#D4A25F);
}

/* Les trois cadres photo. Mesure faite : bords et border-radius sont
 * propres, l'image couvre au pixel pres. Mais elle est en loading="lazy",
 * donc le cadre reste visible ~1,4 s a l'arrivee dans le viewport, et
 * indefiniment si la photo ne charge pas. background-image et non la
 * forme abregee, par principe apres la regression des titres. */
:root[data-saison="automne"] .megara-hero-frame,
:root[data-saison="automne"] .megara-gallery-item,
:root[data-saison="automne"] .megara-visitor-photo{
  background-image:linear-gradient(135deg,#D9C3A8 0%,#E8C9A8 100%);
}

/* ──────────────────────────────────────────────────────────
 * Etats interactifs. Les balayages au repos ne les voyaient pas : ces
 * elements n'existent qu'apres une action (photo envoyee, modal ouvert,
 * anniversaire enregistre) ou dans un pseudo-element.
 * Longhand partout : la forme abregee remet background-clip a border-box.
 * ────────────────────────────────────────────────────────── */

/* Mon Look : le bouton « + BrowLift » de la carte Whispy. Depuis Mon Look v2
 * (01-10-2026) la carte combo n'a plus de style propre : la carte du look
 * ideal porte un filet dore #d4a25f, deja tiede, les deux autres restent
 * sur --card / --border2 et suivent la saison seules. */
:root[data-saison="automne"] .tryon-rc-combo{
  background-image:linear-gradient(135deg,#D9C3A8 0%,#E8C9A8 100%);
}
:root[data-saison="automne"] .tryon-profile{
  background-image:linear-gradient(135deg,rgba(155,141,212,.11),rgba(232,201,168,.07));
}

/* Modal : bouton d'ajout de prestation (etape 1) et cartes suggerees. */
:root[data-saison="automne"] .cmb-addbtn{
  background-image:linear-gradient(135deg,rgba(217,195,168,.20),rgba(232,201,168,.20));
}
:root[data-saison="automne"] .cmb-sugg-card{
  background-image:linear-gradient(135deg,rgba(217,195,168,.14),rgba(232,201,168,.14));
}
:root[data-saison="automne"] .bm-deposit-notice{
  background-image:linear-gradient(135deg,rgba(217,195,168,.15),rgba(232,201,168,.1));
}

/* Pseudo-element : invisible pour getComputedStyle sans argument, il
 * n'est sorti que du balayage de la source. */
:root[data-saison="automne"] .formations::after{
  background-image:radial-gradient(circle,rgba(232,201,168,.15),transparent 70%);
}

/* Questionnaire de securite et bloc anniversaire. Le bleu-violet
 * #6B7DD9 / #9EA1F0 reste froid : second systeme, choix assume. */
:root[data-saison="automne"] .hs-consent{
  border-color:#CDAD84;
}
:root[data-saison="automne"] .bk-ribbon-line{
  background-image:linear-gradient(to right,transparent 0%,#CDAD84 30%,#6B7DD9 50%,#CDAD84 70%,transparent 100%);
}
:root[data-saison="automne"] .bk-birthday-already-card{
  background-image:linear-gradient(135deg,rgba(217,195,168,.16),rgba(207,174,128,.14));
  border-color:rgba(217,195,168,.32);
}
:root[data-saison="automne"] .bk-fx-sparkle{
  text-shadow:0 0 6px rgba(212,162,95,.85),0 0 14px rgba(212,162,95,.55),0 0 22px rgba(155,141,212,.35);
}

/* ─────────────────────────────────────────────────────────────────
 * Bandeau de saison (optionnel) — s'affiche seulement si le markup
 * contient <div class="saison-ruban">. Aucune promesse commerciale
 * ecrite ici : le texte vient du HTML, valide par Ari.
 * ───────────────────────────────────────────────────────────────── */
.saison-ruban{display:none}
:root[data-saison="automne"] .saison-ruban{
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:9px 16px;
  background:linear-gradient(135deg,var(--bg3) 0%,#F7F0FB 100%);
  border-bottom:1px solid rgba(176,124,74,.22);
  font-family:'Poppins',sans-serif;
  font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:#5A4632;text-align:center;line-height:1.5;
}

/* ── Feuilles d'automne — elles tombent le long des deux bords,
 *    jamais au milieu du contenu. Decoratif pur. ── */
.saison-feuilles{display:none}
:root[data-saison="automne"] .saison-feuilles{
  display:block;position:fixed;inset:0;
  pointer-events:none;z-index:50;overflow:hidden;
}
.saison-feuilles i{
  position:absolute;top:-10vh;font-style:normal;
  opacity:0;will-change:transform;
  animation:saison-chute linear infinite;
}
.saison-feuilles i svg{width:100%;height:100%;display:block;overflow:visible}
.saison-feuilles i svg path{fill:currentColor;stroke:none}
.saison-feuilles i svg path.v{fill:none;stroke:rgba(255,255,255,.35);stroke-width:1.1;stroke-linecap:round}
.saison-feuilles i:nth-of-type(1){left:1.5%;width:30px;height:30px;color:#A9552F;animation-duration:19s;animation-delay:0s}
.saison-feuilles i:nth-of-type(2){left:5%;  width:22px;height:22px;color:#C98B3E;animation-duration:25s;animation-delay:7s}
.saison-feuilles i:nth-of-type(3){left:3%;  width:26px;height:26px;color:#B0714A;animation-duration:22s;animation-delay:13s}
.saison-feuilles i:nth-of-type(4){right:1.5%;width:27px;height:27px;color:#D4A25F;animation-duration:21s;animation-delay:4s}
.saison-feuilles i:nth-of-type(5){right:5%; width:21px;height:21px;color:#A9552F;animation-duration:27s;animation-delay:10s}
.saison-feuilles i:nth-of-type(6){right:3%; width:31px;height:31px;color:#C98B3E;animation-duration:23s;animation-delay:16s}
.saison-feuilles i:nth-of-type(n+4){--derive:-34px}
@keyframes saison-chute{
  0%  {transform:translate3d(0,-10vh,0) rotate(0deg);opacity:0}
  8%  {opacity:.72}
  88% {opacity:.6}
  100%{transform:translate3d(var(--derive,34px),112vh,0) rotate(320deg);opacity:0}
}

/* ── Branches fixes: elles portent la saison partout, y compris sur
 *    telephone et en prefers-reduced-motion. Aucune animation.
 *    top = 72px : la nav mesure 65px a 1440 et 69px des 1024. ── */
.rama{display:none}
:root[data-saison="automne"] .rama{
  display:block;position:fixed;
  width:clamp(88px,20vw,150px);
  opacity:.42;pointer-events:none;z-index:49;
}
:root[data-saison="automne"] .rama--a{
  top:calc(72px + env(safe-area-inset-top,0px));right:0;
}
:root[data-saison="automne"] .rama--b{
  bottom:0;left:0;transform:rotate(180deg);
}
.rama svg{width:100%;height:auto;display:block;overflow:visible}
.rama svg .st{fill:none;stroke:#8F5A33;stroke-width:2.2;stroke-linecap:round;opacity:.85}
.rama svg ellipse:nth-of-type(1){fill:#A9552F}
.rama svg ellipse:nth-of-type(2){fill:#C98B3E}
.rama svg ellipse:nth-of-type(3){fill:#B0714A}
.rama svg ellipse:nth-of-type(4){fill:#D4A25F}
.rama svg ellipse:nth-of-type(5){fill:#A9552F}

@media (max-width:860px){
  :root[data-saison="automne"] .saison-feuilles i:nth-of-type(n+4){display:none}
  /* Pas de transform:scale ici : des que l animation demarre, le
     translate3d du keyframe remplace le transform en entier et la
     reduction disparait. Taille posee a la main, 0.72 applique. */
  :root[data-saison="automne"] .saison-feuilles i:nth-of-type(1){left:1%;width:22px;height:22px}
  :root[data-saison="automne"] .saison-feuilles i:nth-of-type(2){left:4%;width:16px;height:16px}
  :root[data-saison="automne"] .saison-feuilles i:nth-of-type(3){left:2%;width:19px;height:19px}
  :root[data-saison="automne"] .rama{opacity:.34}
}
@media (prefers-reduced-motion:reduce){
  :root[data-saison="automne"] .saison-feuilles i{display:none}
}