/* ================================================================
   MODE CLAIR — « SALON ÉDITORIAL »
   Couche additive : le thème sombre d'origine reste intact.
   ================================================================ */

html.light {
    color-scheme: light;
    --salon-canvas: #efebe3;
    --salon-paper: #faf7f0;
    --salon-paper-strong: #fffdf8;
    --salon-ink: #171714;
    --salon-ink-soft: #555650;
    --salon-muted: #75746d;
    --salon-line: rgba(54, 49, 42, 0.16);
    --salon-line-strong: rgba(54, 49, 42, 0.26);
    --salon-violet: #5d59c9;
    --salon-violet-soft: #7772dc;
    --salon-bronze: #9a6a2c;
    --salon-shadow: 0 28px 72px rgba(72, 59, 42, 0.12);
}

html.light body {
    color: var(--salon-ink);
    background:
        linear-gradient(rgba(98, 88, 73, 0.025) 1px, transparent 1px),
        var(--salon-canvas);
    background-size: 100% 36px;
}

html.light body::selection {
    color: #fff;
    background: var(--salon-violet);
}

/* Navigation : papier translucide, encre nette, ombre de corniche. */
html.light .glass-nav {
    background: rgba(250, 247, 240, 0.9);
    border-color: rgba(54, 49, 42, 0.12);
    box-shadow: 0 8px 30px rgba(66, 55, 40, 0.06);
}

html.light .brand-monogram { color: var(--salon-ink); filter: none; }
html.light .brand-monogram .brand-monogram-b { color: var(--salon-violet); }
html.light .brand-wordmark { color: var(--salon-ink); font-weight: 600; }
html.light .brand-signature:hover .brand-wordmark { color: var(--salon-violet); }
html.light .premium-nav-link { color: rgba(23, 23, 20, 0.66); }
html.light .premium-nav-link:hover { color: var(--salon-ink); }
html.light .premium-nav-link::after {
    background: linear-gradient(90deg, transparent, var(--salon-violet), transparent);
}
html.light .premium-nav-link--quiz { color: #a55d16; }
html.light .premium-nav-link--quiz .premium-nav-link-icon { color: #bc6d1f; }
html.light .theme-toggle {
    color: var(--salon-ink);
    background: rgba(255, 255, 255, 0.48);
    border-color: var(--salon-line);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}
html.light .nav-project-cta {
    color: #fff;
    background: linear-gradient(115deg, #32333b, #16171a);
    border-color: rgba(23, 23, 20, 0.72);
    box-shadow: 0 12px 26px rgba(26, 26, 24, 0.13);
}

/* Hero : le même document photographique, traité comme une ouverture de revue. */
html.light .hero-premium {
    --hero-bg: #f5f1e9;
    --hero-text: #171714;
    --hero-muted: #555650;
    --hero-subtle: #77766f;
    --hero-line: rgba(54, 49, 42, 0.22);
    --hero-accent: var(--salon-violet);
    background: var(--hero-bg);
}
html.light .hero-media::before {
    background:
        radial-gradient(circle at 91% 31%, rgba(118, 113, 220, 0.1), transparent 33%),
        linear-gradient(90deg, rgba(245, 241, 233, 0.05), rgba(245, 241, 233, 0.04));
}
html.light .hero-media::after {
    width: clamp(130px, 14vw, 210px);
    background: linear-gradient(
        90deg,
        var(--hero-bg) 0%,
        rgba(245, 241, 233, 0.94) 30%,
        rgba(245, 241, 233, 0.58) 66%,
        rgba(245, 241, 233, 0) 100%
    );
}
html.light .hero-photo-stat { color: rgba(255, 255, 255, 0.84); }
html.light .hero-eyebrow { color: var(--salon-violet); }
html.light .hero-positioning { color: #44443f; }
html.light .hero-title-core { color: var(--salon-ink); }
html.light .hero-title-accent { color: var(--salon-violet); }
html.light .hero-summary { max-width: 525px; color: #53534e; }
html.light .hero-button-primary {
    color: #fff;
    background: linear-gradient(115deg, #5551bd, #716bd3);
    border-color: #6965ca;
}
html.light .hero-button-secondary {
    color: var(--salon-ink);
    background: rgba(255, 253, 248, 0.58);
    border-color: rgba(54, 49, 42, 0.34);
}
html.light .hero-button-secondary:hover { background: rgba(255, 253, 248, 0.92); }
html.light .hero-proof svg { color: #56564f; }
html.light .hero-proof p { color: #5f5e57; }
html.light .hero-proof strong { color: var(--salon-ink); }
html.light .hero-brand-wordmark { color: #33332f; }

/* Manifeste : grand feuillet clair, portrait conservé comme contrepoint sombre. */
html.light .approach-shell {
    --approach-bg: #f8f4ec;
    --approach-panel: #fffdf8;
    --approach-text: #191916;
    --approach-muted: #696860;
    --approach-line: rgba(54, 49, 42, 0.16);
    --approach-accent: var(--salon-violet);
    color: var(--approach-text);
    background:
        radial-gradient(circle at 12% 8%, rgba(93, 89, 201, 0.1), transparent 31%),
        var(--approach-bg);
    border-color: var(--approach-line);
    box-shadow: var(--salon-shadow);
}
html.light .approach-shell::before { border-color: rgba(93, 89, 201, 0.12); }
html.light .approach-kicker,
html.light .approach-copy .approach-accent-text { color: var(--salon-violet); }
html.light .approach-badge {
    color: #615f58;
    background: rgba(255, 255, 255, 0.45);
    border-color: var(--salon-line);
}
html.light .approach-copy strong { color: var(--salon-ink); }
html.light .approach-masterclass { color: #fff; }
html.light .approach-social { background: rgba(255, 255, 255, 0.48); }
html.light .approach-social:hover { color: var(--salon-ink); background: #fff; }
html.light .approach-pillars { background: rgba(255, 255, 255, 0.34); }
html.light .approach-pillar h3 { color: var(--salon-ink); }
html.light .approach-pillar strong { color: var(--salon-violet); }
html.light .approach-pillar-icon {
    color: var(--salon-violet);
    background: rgba(93, 89, 201, 0.05);
    border-color: rgba(93, 89, 201, 0.34);
}
html.light .approach-value-strip {
    color: #53534e;
    background: linear-gradient(90deg, rgba(93, 89, 201, 0.08), rgba(255, 255, 255, 0.28), rgba(93, 89, 201, 0.08));
    border-color: rgba(93, 89, 201, 0.16);
}
html.light .approach-value-sequence span { color: #4d4d48; }
html.light .approach-value-strip::before { background: linear-gradient(90deg, #f6f2e9 8%, rgba(246, 242, 233, 0)); }
html.light .approach-value-strip::after { background: linear-gradient(270deg, #f6f2e9 8%, rgba(246, 242, 233, 0)); }

/* Formations : dossier de conseil, et non tableau de bord. */
html.light .training-section {
    --training-bg: #f4f0e7;
    --training-surface: #fffdf8;
    --training-line: rgba(54, 49, 42, 0.15);
    --training-text: #191916;
    --training-muted: #696860;
}
html.light .training-shell {
    background:
        radial-gradient(circle at 8% 0%, rgba(93, 89, 201, 0.08), transparent 29%),
        linear-gradient(145deg, #f9f6ef, var(--training-bg));
    border-color: var(--training-line);
    box-shadow: var(--salon-shadow);
}
html.light .training-shell::before { border-color: rgba(93, 89, 201, 0.11); }
html.light .training-kicker { color: var(--salon-violet); }
html.light .training-tabs {
    background: rgba(255, 253, 248, 0.68);
    border-color: rgba(93, 89, 201, 0.22);
    box-shadow: 0 14px 32px rgba(66, 55, 40, 0.09), inset 0 1px 0 #fff;
}
html.light .training-tabs::before {
    background: linear-gradient(145deg, rgba(93, 89, 201, 0.16), rgba(93, 89, 201, 0.07));
    box-shadow: 0 8px 18px rgba(73, 67, 155, 0.12), inset 0 1px 0 rgba(255,255,255,.8);
}
html.light .training-tab { color: rgba(23, 23, 20, 0.58); }
html.light .training-tab[aria-selected="true"] { color: var(--salon-ink); text-shadow: none; }
html.light .training-tab + .training-tab::after { background: var(--training-line); }
html.light .training-tab[aria-selected="false"]:hover { color: var(--salon-ink); background: rgba(93, 89, 201, 0.05); }
html.light .training-panel { box-shadow: 0 22px 46px rgba(72, 59, 42, 0.08); }
html.light .training-panel-title,
html.light .training-benefit strong { color: var(--salon-ink); }
html.light .training-panel-lead + .training-panel-lead,
html.light .training-meta-item span,
html.light .training-points li,
html.light .training-topic-list li { color: #5c5c56; }
html.light .training-panel-aside { background: rgba(var(--panel-accent-rgb), 0.035); }
html.light .training-aside-kicker,
html.light .training-topics-title { color: #77766f; }
html.light .training-benefits,
html.light .training-benefit { border-color: var(--training-line); }
html.light .training-cta:hover { color: #fff; }

/* Les cas d'usage restent une planche photographique sombre dans le salon clair. */
html.light .use-cases-shell {
    box-shadow: 0 30px 70px rgba(51, 45, 37, 0.2);
    border-color: rgba(43, 42, 54, 0.3);
}

/* Cartes et contenus historiques encore pilotés par Tailwind. */
html.light .bento-card {
    background-color: var(--salon-paper-strong);
    border-color: var(--salon-line);
    box-shadow: 0 12px 35px rgba(72, 59, 42, 0.08);
}
html.light #temoignages > div > h2,
html.light #blog h2,
html.light #contact h2 { color: #62615b !important; }
html.light #temoignages .text-white,
html.light #blog .text-white,
html.light #contact .text-white { color: var(--salon-ink) !important; }
html.light #temoignages .text-gray-400,
html.light #blog .text-gray-400,
html.light #contact .text-gray-400 { color: #66665f !important; }
html.light input,
html.light textarea {
    color: var(--salon-ink);
    background: rgba(255, 253, 248, 0.86);
    border-color: var(--salon-line-strong);
}

html.light ::-webkit-scrollbar-track { background: var(--salon-canvas); }
html.light ::-webkit-scrollbar-thumb { background: #aaa397; border-radius: 4px; }
html.light ::-webkit-scrollbar-thumb:hover { background: #878075; }

@media (prefers-reduced-motion: reduce) {
    html.light body { transition: none; }
}