/* =========================================================================
   RETRATŌ — THÈME CLAIR PARTAGÉ (10/08/2026)
   Blanc cassé chaud, orange inchangé. Source de vérité unique pour tout le site.
   Activé en ajoutant la classe "light" sur <body>. Réversible : retirer la classe.
   Chargé APRÈS les styles de chaque page pour gagner la cascade (+ !important
   là où des <style> en cours de page pourraient reprendre la main).
   ========================================================================= */

body.light{
  --bg:#FAF7F2;          /* blanc cassé chaud */
  --bg-2:#FFFFFF;
  --cream:#17140F;       /* texte principal (ex-blanc) -> presque noir chaud */
  --cream-2:#4B453D;     /* texte secondaire */
  --dim:#8C857A;
  --amber:#C85A12;       /* amber lisible sur fond clair */
  --hot:#FF4A0F;         /* orange INCHANGÉ */
  --hot-2:#E85002;
  --rule:rgba(23,20,15,.12);
  --rule-2:rgba(23,20,15,.20);
  --grain-opacity:0;
  --scan-opacity:0;
  background:#FAF7F2;
  color:#17140F;
}

/* Textures retirées */
body.light .grain,body.light .scan{display:none!important}

/* Fond général : neutralise les fonds noirs hardcodés au niveau page/section */
body.light,
body.light [style*="background-color: rgb(0, 0, 0)"],
body.light [style*="background:#070707"],
body.light [style*="background-color:#070707"]{background:#FAF7F2!important}

/* HUD (barre de nav) : voile sombre -> voile clair */
body.light .hud{background:linear-gradient(180deg,rgba(250,247,242,.94),rgba(250,247,242,.6) 70%, transparent)!important}
body.light .mobile-menu{background:rgba(250,247,242,.97)!important}

/* Footer noir -> crème */
body.light footer{background:#F1ECE4!important;border-top:1px solid var(--rule)}

/* Boutons */
body.light .flow-btn{border-color:rgba(23,20,15,.35)}
body.light .btn{border-color:rgba(23,20,15,.45)}
body.light .btn:hover{background:#17140F;border-color:#17140F;color:#FAF7F2}
/* .btn.solid, .flow-btn.solid, .cb-accept restent orange (inchangés) */

/* ---- Sections de contenu au fond hardcodé sombre ---- */
body.light #pourquoi{background:#F1ECE4!important}
body.light #contact,body.light section.cta{background:#F1ECE4!important}
body.light #contact,body.light #contact h2,body.light #contact h3,body.light #contact p,
body.light section.cta,body.light section.cta h2,body.light section.cta h3,body.light section.cta p{color:var(--cream)}

/* ---- Cartes & panneaux (dégradés/fonds sombres) -> clair ---- */
body.light .pack{background:#FFFFFF!important;border:1px solid var(--rule-2)}
body.light .pack.feat{background:#FFF4EC!important;border:1px solid var(--hot)}
body.light .launch-banner{background:#FFF4EC!important;border:1px solid var(--rule-2)}
body.light .vs-frame{background:#FFFFFF!important;border:1px solid var(--rule-2)}
body.light .cta-form{background:#FFFFFF!important;border:1px solid var(--rule-2)}
body.light .cta-form input,
body.light .cta-form textarea,
body.light .cta-form select{background:#FBF8F3!important;color:var(--cream)!important;border-color:var(--rule-2)!important}
body.light .cta-form input::placeholder,
body.light .cta-form textarea::placeholder{color:var(--dim)}

/* Galerie photo (masonry) : fond de vignette sombre -> clair (l'image le recouvre) */
body.light .gallery .ph{background:#EDE7DE!important}

/* Mur de reels (page Vidéo) : placeholder clair au lieu du noir */
body.light .reelwall .clip{background:#EDE7DE!important}

/* Cartes portfolio : titre + badge posés SUR la photo -> restent blancs */
body.light .shot .ttl,body.light .shot .ttl *{color:#fff!important}
body.light .shot .shot-go{background:rgba(7,7,7,.72)!important;color:#fff!important}
body.light .shot .shot-go svg{stroke:#fff!important}

/* Bandeau cookies (présent sur toutes les pages) : sombre -> clair */
body.light #cookie-banner{background:#FFFFFF!important;border-top:1px solid var(--hot)}
body.light #cookie-banner p{color:var(--cream-2)}
body.light #cookie-banner button{color:var(--cream);border-color:var(--rule-2)}
body.light #cookie-banner button.cb-accept{color:#000}

/* Overlay lightbox études de cas : voile foncé translucide (au lieu du noir plein) */
body.light #case-overlay{background:rgba(23,20,15,.55)!important}

/* ---- HERO mosaïque (home uniquement ; sélecteurs sans effet ailleurs) ---- */
body.light .hero,body.light .hero-bg{background:#FAF7F2!important}
body.light .hero-glow{background:
  radial-gradient(58% 55% at 20% 42%, rgba(255,74,15,.14), rgba(255,74,15,0) 68%),
  radial-gradient(40% 40% at 88% 88%, rgba(255,179,94,.12), rgba(255,179,94,0) 70%)!important}
body.light .hero-wall::before{background:linear-gradient(180deg,#FAF7F2,rgba(250,247,242,0))!important}
body.light .hero-wall::after{background:linear-gradient(0deg,#FAF7F2,rgba(250,247,242,0))!important}
body.light .hero-wall-scrim{background:linear-gradient(90deg,#FAF7F2 0%, rgba(250,247,242,.55) 12%, rgba(250,247,242,0) 30%)!important}
body.light .hero-card{background:#EDE7DE!important}

/* =========================================================================
   COMPOSANTS SPÉCIFIQUES PAR PAGE
   ========================================================================= */

/* Conteneurs média (Services, À propos) : placeholder clair derrière l'image/vidéo */
body.light .svc-media{background:#EDE7DE!important}

/* Toggle Offres (Abonnements / À l'unité) — l'onglet actif reste orange */
body.light .offres-toggle{background:#EDE7DE!important;border:1px solid var(--rule-2)}
/* Encadré "Mise en bouche" (porte d'entrée 150€) */
body.light #mise-en-bouche{background:#FFF4EC!important;border:1px solid var(--rule-2)}

/* Page Gestion des réseaux / Communication 360 */
body.light .gr-hero{background:#F1ECE4!important}
body.light .cal{background:#FFFFFF!important;border:1px solid var(--rule-2)}
body.light .col-list{background:#FFFFFF!important;border:1px solid var(--rule-2)}
body.light .alt-card{background:#FFFFFF!important;border:1px solid var(--rule-2)}
body.light .alt-card.win{background:#FFF4EC!important;border:1px solid var(--hot)}

/* Carrousel du Calendrier de contenu */
body.light .car-viewport{background:#EDE7DE!important}

/* Étude de cas : section CTA finale */
body.light .case-cta{background:#F1ECE4!important}
body.light .case-cta h1,body.light .case-cta h2,body.light .case-cta h3,body.light .case-cta p{color:var(--cream)}
