/* =====================================================================
   Reformer Society · MODE CLAIR (tout le site, chargé par chaque page)
   Palette reprise de l'admin reformersocietyconnect.com/reformerAdmin :
   fond #F8F6F3, surface #FFF, surface 2 #F1EDE7, texte #242322,
   bordeaux #670F00 (survol #8B1500), beige #C5B099, brun #7A5C3E.
   Règle de marque : accent beige/érable en sombre, BORDEAUX en clair.
   Principe : on inverse les jetons sur html[data-theme="light"], puis on
   RÉTABLIT les jetons sombres dans tout ce qui est posé sur une photo ou
   un écran (hero, bandeaux, cartes photo, maquette TV, plan…).
   ===================================================================== */

html[data-theme="light"]{
  --noir:#f8f6f3;
  --carbon:#ffffff;
  --carbon-2:#f1ede7;
  --creme:#242322;
  --creme-2:rgba(36,35,34,.82);
  --sable:rgba(36,35,34,.66);
  --erable:#7a5c3e;
  --erable-clair:#670f00;
  --ligne:rgba(36,35,34,.10);
  --ligne-forte:rgba(36,35,34,.18);
  --voile:rgba(36,35,34,.35);
  --bordeaux:#670f00;
  --beige:#c5b099;
  color-scheme:light;
}
html[data-theme="light"] body{background:var(--noir);color:var(--creme)}
html[data-theme="light"] ::selection{background:rgba(103,15,0,.14);color:#242322}

/* ---------- Zones sur photo / écran : jetons sombres rétablis ----------
   Tout ce qui est posé sur une photo, une vidéo, un écran ou un voile
   sombre codé en dur (rgba(11,10,8,…)) garde la palette sombre.
   Les hero de page n'en font partie QUE s'ils ont un visuel (.hero-media) :
   les hero des pages légales et de la 404 suivent le thème clair. */
html[data-theme="light"] .hero,
html[data-theme="light"] .page-hero:has(>.hero-media),
html[data-theme="light"] .article-hero:has(>.hero-media),
html[data-theme="light"] .motion-band,
html[data-theme="light"] .cta-final,
html[data-theme="light"] .mega-feature,
html[data-theme="light"] .course-card,
html[data-theme="light"] .play-cta,
html[data-theme="light"] .badge-admin,
html[data-theme="light"] .shop-card .fav,
html[data-theme="light"] .device,
html[data-theme="light"] .mci-card,
html[data-theme="light"] .sd-kpi-card .visual,
html[data-theme="light"] .profile-card,
html[data-theme="light"] .sd-client,
html[data-theme="light"] .bt-hero,
html[data-theme="light"] .cx-acc-item,
html[data-theme="light"] .cx-prof,
html[data-theme="light"] .cx-tv,
html[data-theme="light"] .iso-canvas,
html[data-theme="light"] .ic-visual,
html[data-theme="light"].rs-media-top .site-header:not(.is-solid){
  --noir:#0b0a08;--carbon:#161310;--carbon-2:#1d1915;
  --creme:#f1ebdf;--creme-2:#e4dccb;--sable:#cfc2a9;
  --erable:#b9874e;--erable-clair:#d4a96f;
  --ligne:rgba(241,235,223,.14);--ligne-forte:rgba(241,235,223,.28);--voile:rgba(11,10,8,.55);
  color:var(--creme);
}
html[data-theme="light"] .badge-admin{color:var(--sable)}
/* Fond sombre de secours sous les visuels : tant qu'une photo ou une vidéo
   n'est pas chargée (réseau lent, image différée), le texte crème ne doit
   pas se retrouver sur le fond clair de la page. Uniquement sur des blocs
   qui isolent leur pile (isolation:isolate) ou sans média en z-index négatif. */
html[data-theme="light"] :is(.hero,.page-hero:has(>.hero-media),.article-hero:has(>.hero-media),.motion-band,.cta-final,
  .mega-feature,.course-card,.sd-kpi-card .visual,.profile-card,.sd-client,.cx-acc-item,.cx-prof){background-color:#0b0a08}
/* la fiche de détail du plan s'affiche hors image sur mobile : elle garde sa carte sombre */
html[data-theme="light"] .plan-tip{--creme:#f1ebdf;--creme-2:#e4dccb;--sable:#cfc2a9;--erable-clair:#d4a96f;color:#f1ebdf}

/* ---------- En-tête ----------
   Logo bordeaux natif (sans filtre) dès que l'en-tête est sur fond clair ;
   crème (filtre de main.css) seulement quand il est transparent sur le
   visuel d'ouverture (html.rs-media-top, posé par layout.js). Le voile
   dégradé du haut n'a de sens que sur ce visuel. */
html[data-theme="light"] .site-header.is-solid{background:rgba(248,246,243,.9);border-bottom-color:rgba(36,35,34,.1)}
html[data-theme="light"] .site-header::before{opacity:0}
html[data-theme="light"].rs-media-top .site-header:not(.is-solid)::before{opacity:1}
html[data-theme="light"] .site-header .logo-img,
html[data-theme="light"] .mobile-nav .logo-img,
html[data-theme="light"] .site-footer .logo-img{filter:none}
html[data-theme="light"].rs-media-top .site-header:not(.is-solid) .logo-img{filter:brightness(0) invert(.93) sepia(.22)}
/* le méga-menu reste clair même quand l'en-tête est transparent sur le visuel */
html[data-theme="light"].rs-media-top .site-header:not(.is-solid) .mega{
  --noir:#f8f6f3;--carbon:#ffffff;--carbon-2:#f1ede7;--creme:#242322;--creme-2:rgba(36,35,34,.82);--sable:rgba(36,35,34,.66);
  --erable:#7a5c3e;--erable-clair:#670f00;--ligne:rgba(36,35,34,.10);--ligne-forte:rgba(36,35,34,.18);--voile:rgba(36,35,34,.35);
  color:var(--creme);
}
html[data-theme="light"] .mega{box-shadow:0 30px 60px -20px rgba(36,35,34,.22),0 2px 8px rgba(36,35,34,.06)}
html[data-theme="light"] .icon-btn .count{background:var(--bordeaux);color:#f8f6f3}
html[data-theme="light"] .drawer-overlay{background:rgba(36,35,34,.38)}
html[data-theme="light"] .cart-drawer{box-shadow:-20px 0 60px rgba(36,35,34,.12)}

/* ---------- Boutons : bordeaux en clair ---------- */
html[data-theme="light"] .btn-solid{background:var(--bordeaux);border-color:var(--bordeaux);color:#f8f6f3}
html[data-theme="light"] .btn-solid::before{background:#8b1500}
html[data-theme="light"] .btn-solid:hover{color:#f8f6f3;border-color:#8b1500}
html[data-theme="light"] :is(.hero,.cta-final,.motion-band,.page-hero:has(>.hero-media)) .btn-solid{background:#f1ebdf;border-color:#f1ebdf;color:#0b0a08}
html[data-theme="light"] :is(.hero,.cta-final,.motion-band,.page-hero:has(>.hero-media)) .btn-solid::before{background:#f1ebdf}

/* ---------- Sections à fond carbone : surfaces claires ---------- */
html[data-theme="light"] #fonctionnement{background:var(--carbon-2)!important}
html[data-theme="light"] .sd-models,
html[data-theme="light"] .sd-offer{background:linear-gradient(160deg,rgba(197,176,153,.22),rgba(197,176,153,0) 45%),#fff;box-shadow:0 8px 32px rgba(36,35,34,.07),0 2px 8px rgba(36,35,34,.04)}
html[data-theme="light"] .so-figs .is-price{background:rgba(103,15,0,.05)}
html[data-theme="light"] .sd-seg{background:#fff}
html[data-theme="light"] [data-tabs] .sd-seg-thumb{background:var(--bordeaux)}
html[data-theme="light"] [data-tabs] .sd-seg-btn.is-active{color:#f8f6f3}
html[data-theme="light"] .sd-seg-btn.is-active{background:var(--bordeaux);color:#f8f6f3}
html[data-theme="light"] .sd-compare td.hl,
html[data-theme="light"] .sd-legend li.is-active{background:rgba(103,15,0,.05);border-color:rgba(103,15,0,.25)}
html[data-theme="light"] .slot.e,html[data-theme="light"] .sd-day-legend i.e{background:rgba(36,35,34,.05)}
html[data-theme="light"] .sd-gauge .track{background:rgba(36,35,34,.08)}
html[data-theme="light"] .sd-benefits .app-feat::before{color:rgba(103,15,0,.12)}
html[data-theme="light"] .sd-benefits .app-feat:hover::before{color:rgba(103,15,0,.3)}
html[data-theme="light"] .app-feat,html[data-theme="light"] .sd-kpi-card,html[data-theme="light"] .bt:not(.bt-hero){background:#fff}
html[data-theme="light"] .sd-kpi-card,html[data-theme="light"] .app-feat{box-shadow:0 1px 3px rgba(36,35,34,.06)}

/* bento côté exploitant (visuels d'interface sur fond clair) */
html[data-theme="light"] .bt-hours i{background:rgba(36,35,34,.08)}
html[data-theme="light"] .bt-hours i.on{background:#c5b099}
html[data-theme="light"] .bt-hours i.cr{background:linear-gradient(180deg,#8b1500,#670f00)}
/* Comparateur (journée type) : mêmes couleurs que la carte « heures creuses » : cours collectif beige, autonomie guidée dégradé bordeaux */
html[data-theme="light"] .sd-day-legend i.c,html[data-theme="light"] .slot.c{background:#c5b099}
html[data-theme="light"] .sd-day-legend i.a,html[data-theme="light"] .slot.a{background:linear-gradient(180deg,#8b1500,#670f00)}
html[data-theme="light"] .bt-seats i{background:rgba(36,35,34,.03)}
html[data-theme="light"] .bt-cat span{background:linear-gradient(135deg,rgba(197,176,153,.55),rgba(241,237,231,.6))}
html[data-theme="light"] .bt-cat span:nth-child(2){background:linear-gradient(135deg,rgba(36,35,34,.1),rgba(36,35,34,.02))}
html[data-theme="light"] .bt-cat span:nth-child(3){background:linear-gradient(135deg,rgba(103,15,0,.14),rgba(241,237,231,.5))}
html[data-theme="light"] .bt-steps span.on{background:var(--bordeaux);border-color:var(--bordeaux);color:#f8f6f3}

/* ---------- Plan d'implantation ---------- */
html[data-theme="light"] .iso-view{background:radial-gradient(120% 90% at 50% 40%,#fbf9f6,#ece6dc);border-color:rgba(36,35,34,.1)}
html[data-theme="light"] .iso-hint{background:rgba(11,10,8,.55)}
html[data-theme="light"] .iso-specs dd{color:var(--bordeaux)}
html[data-theme="light"] .iso-legend li{background:#fff!important}
html[data-theme="light"] .iso-cta{background:#fff;border-color:rgba(36,35,34,.1);box-shadow:0 8px 32px rgba(36,35,34,.07)}
html[data-theme="light"] .ic-visual::after{background:linear-gradient(to right,transparent 40%,#fff 99%),linear-gradient(to top,rgba(11,10,8,.7),transparent 40%)}
@media (max-width:620px){html[data-theme="light"] .ic-visual::after{background:linear-gradient(to bottom,transparent 55%,#fff)}html[data-theme="light"] .iso-cta .ic-badge{color:#242322}}

/* ---------- Offre (cours, professeurs, leasing) ---------- */
html[data-theme="light"] .cx-pg,html[data-theme="light"] .cx-plan,html[data-theme="light"] .cx-lease,html[data-theme="light"] .so-card{background:#fff}
html[data-theme="light"] .cx-pg:hover{background:rgba(103,15,0,.04);border-color:rgba(103,15,0,.35)}
html[data-theme="light"] .cx-plan{border-color:rgba(103,15,0,.3);background:radial-gradient(110% 90% at 0% 0%,rgba(103,15,0,.07),transparent 60%),#fff}
html[data-theme="light"] .cx-chip{background:var(--bordeaux);color:#f8f6f3}
html[data-theme="light"] .cx-chip.is-ghost{background:none;color:var(--bordeaux);border-color:rgba(103,15,0,.4)}
html[data-theme="light"] .cx-dot{background:#fff}
html[data-theme="light"] .cx-steps::before{background:linear-gradient(90deg,var(--bordeaux),rgba(103,15,0,.12))}
html[data-theme="light"] .cx-more,html[data-theme="light"] .cx-acc-more,html[data-theme="light"] .so-more{border-color:rgba(103,15,0,.35);background:radial-gradient(120% 80% at 100% 0%,rgba(197,176,153,.35),transparent 60%),#fff}
html[data-theme="light"] .cx-glow{background:radial-gradient(60% 60% at 50% 50%,rgba(197,176,153,.55),transparent 70%)}
html[data-theme="light"] .cx-ch i{background:rgba(36,35,34,.12)}
html[data-theme="light"] .cx-ch i::after{background:var(--bordeaux)}
html[data-theme="light"] .cx-stand{background:linear-gradient(90deg,#b9b2a8,#e2ddd5,#b9b2a8)}
html[data-theme="light"] .cx-stand::after{background:linear-gradient(#d9d3ca,#b9b2a8);box-shadow:0 10px 24px -10px rgba(36,35,34,.35)}
html[data-theme="light"] .cx-tv{box-shadow:0 30px 60px -30px rgba(36,35,34,.45),inset 0 0 0 1px rgba(255,255,255,.06)}
html[data-theme="light"] .cx-live i{background:var(--bordeaux)}

/* ---------- Zone d'intervention ---------- */
html[data-theme="light"] .zm-card{background:radial-gradient(rgba(36,35,34,.07) 1px,transparent 1.3px) 0 0/16px 16px,linear-gradient(160deg,#fff,#f1ede7)}
html[data-theme="light"] .zm-ctx{fill:rgba(36,35,34,.04);stroke:rgba(36,35,34,.16)}
html[data-theme="light"] .zm-c{fill:rgba(197,176,153,.45);stroke:#7a5c3e}
html[data-theme="light"] .zm-c.is-home{fill:rgba(103,15,0,.22)}
html[data-theme="light"] .zm-c.is-hl,html[data-theme="light"] .zm-c:hover{fill:rgba(103,15,0,.55)}
html[data-theme="light"] .zm-pt circle{fill:var(--bordeaux);stroke:#fff}
html[data-theme="light"] .zm-show .r1{fill:var(--bordeaux)}
html[data-theme="light"] .zm-show .r2{stroke:var(--bordeaux)}
html[data-theme="light"] .zm-legend{background:rgba(255,255,255,.85)}
html[data-theme="light"] .zm-legend i.h{background:var(--bordeaux);box-shadow:0 0 0 3px rgba(103,15,0,.18)}
html[data-theme="light"] .zc:hover,html[data-theme="light"] .zc.is-hl{background:var(--bordeaux);border-color:var(--bordeaux);color:#f8f6f3}
html[data-theme="light"] .zc:hover .d,html[data-theme="light"] .zc.is-hl .d{background:#f8f6f3}

/* ---------- Divers ---------- */
html[data-theme="light"] .timeline-item .ti-img{opacity:1}
html[data-theme="light"] .faq-item,html[data-theme="light"] details{border-color:var(--ligne)}
html[data-theme="light"] .site-footer{background:#f1ede7}

/* hero sans visuel (pages légales, 404) : pas de voile sombre */
html[data-theme="light"] .page-hero:not(:has(>.hero-media))::after{background:linear-gradient(180deg,rgba(197,176,153,.16),rgba(197,176,153,0) 70%)}
html[data-theme="light"] .cx-ch span{opacity:1}

/* ---------- Puces, filtres, onglets : accent bordeaux en clair ---------- */
html[data-theme="light"] .filter-chip.is-active,
html[data-theme="light"] .faq-cat.is-active,
html[data-theme="light"] .add-btn:hover,
html[data-theme="light"] .showcase-nav button:hover,
html[data-theme="light"] .sd-cn:hover,
html[data-theme="light"] .blog-filter.is-active{background:var(--bordeaux);border-color:var(--bordeaux);color:#f8f6f3}
html[data-theme="light"] .blog-filter .n{opacity:1}
html[data-theme="light"] .pro-nav{background:rgba(248,246,243,.92)}
html[data-theme="light"] .sticky-buy{background:rgba(248,246,243,.94);box-shadow:0 -10px 30px rgba(36,35,34,.08)}
html[data-theme="light"] .float-card{box-shadow:0 24px 50px -18px rgba(36,35,34,.28)}
html[data-theme="light"] .add-btn.is-added,html[data-theme="light"] .shop-card .fav.is-on{background:var(--bordeaux);border-color:var(--bordeaux);color:#f8f6f3}

/* ---------- Formulaires ---------- */
html[data-theme="light"] .field input,html[data-theme="light"] .field select,html[data-theme="light"] .field textarea{background:#fff;border-color:rgba(36,35,34,.24)}
html[data-theme="light"] .field input:focus,html[data-theme="light"] .field select:focus,html[data-theme="light"] .field textarea:focus{background:#fff;border-color:var(--bordeaux);box-shadow:0 0 0 3px rgba(103,15,0,.12)}
html[data-theme="light"] input::placeholder,html[data-theme="light"] textarea::placeholder,
html[data-theme="light"] .field input::placeholder,html[data-theme="light"] .field textarea::placeholder,
html[data-theme="light"] .newsletter input::placeholder{color:rgba(36,35,34,.7);opacity:1}
html[data-theme="light"] .field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23242322' fill='none' stroke-width='1.5'/%3E%3C/svg%3E")}
html[data-theme="light"] .field.has-error input,html[data-theme="light"] .field.has-error select,html[data-theme="light"] .field.has-error textarea{border-color:#a3290f}
html[data-theme="light"] .field .error-msg{color:#9a2610}
html[data-theme="light"] .form-success{background:rgba(103,15,0,.04);border-color:rgba(103,15,0,.35)}
html[data-theme="light"] .btn .spinner{border-color:rgba(248,246,243,.35);border-top-color:#f8f6f3}

/* ---------- Page merci (styles en ligne .mci-) ---------- */
html[data-theme="light"] .mci-benefit p{color:var(--sable)}
html[data-theme="light"] .mci-benefit:hover{background:var(--carbon-2)}
html[data-theme="light"] .mci-seal{box-shadow:0 18px 40px -18px rgba(36,35,34,.3)}

/* ---------- Bouton de thème (en-tête + menu mobile) ----------
   Styles valables dans les deux thèmes. Sous 560px l'en-tête n'a plus la
   place pour un 5e bouton (le logo se tassait) : le réglage passe dans le
   menu mobile, où il est toujours présent. */
.theme-toggle svg,.m-theme svg{display:block}
.theme-toggle .ico-moon,.m-theme .ico-moon{display:none}
html[data-theme="light"] .theme-toggle .ico-sun,html[data-theme="light"] .m-theme .ico-sun{display:none}
html[data-theme="light"] .theme-toggle .ico-moon,html[data-theme="light"] .m-theme .ico-moon{display:block}
/* 2026-10-13 : bouton de thème visible aussi en mobile (demande Vladimir) ; place gagnée en resserrant les icônes */
@media (max-width:560px){.header-actions{gap:.15rem}.header-actions .icon-btn{width:40px;height:40px}}
.m-theme{
  display:flex;align-items:center;gap:.85rem;width:100%;min-height:54px;margin-top:.4rem;
  padding:.7rem .15rem;border-top:1px solid var(--ligne);border-bottom:1px solid var(--ligne);
  color:var(--creme-2);font:inherit;font-size:.95rem;font-weight:500;letter-spacing:.02em;text-align:left;cursor:pointer;
}
.m-theme-ic{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid var(--ligne-forte);color:var(--creme)}
.m-theme-txt{flex:1}
.m-theme-sw{position:relative;width:42px;height:24px;border-radius:999px;border:1px solid var(--ligne-forte);background:var(--carbon-2);flex:none}
.m-theme-sw i{position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--sable);transition:transform .3s var(--ease),background .3s}
.m-theme[aria-pressed="true"] .m-theme-sw{background:var(--bordeaux);border-color:var(--bordeaux)}
.m-theme[aria-pressed="true"] .m-theme-sw i{transform:translateX(18px);background:#f8f6f3}
.m-theme:hover,.m-theme:focus-visible{color:var(--creme)}
.m-theme:focus-visible{outline:2px solid var(--erable-clair);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.m-theme-sw i{transition:none}}
html.theme-anim,html.theme-anim *{transition:background-color .45s ease,color .45s ease,border-color .45s ease,fill .45s ease!important}