/* ==========================================================
   Innovia Studio : couleurs claires
   UNIQUEMENT des couleurs : aucune taille, marge, animation ou effet n'est modifié ici.
   Restent sombres comme avant : hauts de page, manifeste, studio, bandes photo,
   ET les sections juste avant / juste après une bande photo (la photo se fond dans le noir).
   Les autres sections de contenu (section.sec) passent en crème.
   S'applique aux pages dont la balise <html> porte la classe « clair ».
   ========================================================== */

html.clair {
  --paper: #FBF6F1;
  --card: #FFFFFF;
  --ink-d: #2A1418;         /* texte principal sur clair */
  --ink-m: #5E4A47;         /* texte secondaire sur clair */
  --ink-l: #6E5A57;         /* légendes sur clair */
  --line-d: rgba(42, 20, 24, .11);
  --line-d2: rgba(42, 20, 24, .22);
  --accent: #6E1422;
  --gold-d: #9C7535;
  --shadow: 0 1px 2px rgba(42, 20, 24, .05), 0 12px 32px -18px rgba(42, 20, 24, .25);
  --page-bg-l: #FBF6F1;     /* fond des sections claires, change d'une section à l'autre (js/fx.js) */
}

/* ---------- Sections claires : fond crème qui change doucement, couleurs de base inversées ---------- */
html.clair main > section.sec:not(.diff):not(.endcta):not(:has(+ .pband)):not(.pband + *), html.clair main > .marquee:not(.hero + .marquee):not(.pband + .marquee), html.clair main > section.endcta:not(.pband + *) { background-color: var(--page-bg-l); transition: background-color 1.4s ease; }
html.clair main > section.sec:not(.diff):not(.endcta):not(:has(+ .pband)):not(.pband + *), html.clair main > .marquee:not(.hero + .marquee):not(.pband + .marquee) {
  --text: #2A1418; --cream: #2A1418; --cream-2: #4A3533; --muted: #6B5552;
  --line: rgba(42, 20, 24, .14); --line-soft: rgba(42, 20, 24, .08);
  --glass: #FFFFFF; --glass-2: #FFFFFF; --ink: #FBF6F1;
  --pink: #8E1F33; --pink-2: #6E1422; --gold-on: #85602A;
  color: var(--text);
}
/* blocs sombres à l'intérieur des sections claires : ils gardent exactement leurs couleurs d'origine */
html.clair main > section.sec:not(.diff):not(.endcta):not(:has(+ .pband)):not(.pband + *) :is(.au-box, .uni, .work, .gcell, .lede, .band, .proj-kpi, .frame figcaption, .exp-item, .exp-kpi, .qform, .flow, .qrs, .gcar-stats, .cta-box, .tel, .dform, .tier.featured, .pcard.dark),
html.clair main > section.endcta:not(.pband + *) .cta-box {
  --text: #FBF4EF; --cream: #FBF4EF; --cream-2: #E9C9CF; --muted: #BE929A;
  --line: rgba(251, 244, 239, .13); --line-soft: rgba(251, 244, 239, .07);
  --glass: rgba(251, 244, 239, .05); --glass-2: rgba(251, 244, 239, .09); --ink: #3A0E16;
  --pink: #E093A8; --pink-2: #F4C4D2; --gold-on: #E0BE7E;
  color: var(--text);
}
/* leur fond était semi-transparent sur le noir : on remet le noir dessous pour garder le même rendu */
html.clair main > section.sec:not(.diff):not(.endcta):not(:has(+ .pband)):not(.pband + *) :is(.au-box, .uni, .work, .gcell, .lede, .band, .exp-item, .qform, .flow, .qrs, .dform, .gcar-stats, .tel, .cta-box, .pcard.dark), html.clair main > section.endcta:not(.pband + *) .cta-box { background-color: #14060B; }

/* ---------- Textes des sections claires ---------- */
html.clair main > section.sec:not(.diff):not(.endcta):not(:has(+ .pband)):not(.pband + *) :is(h2, h3) { color: var(--ink-d); }
html.clair main > section.sec:not(.diff):not(.endcta):not(:has(+ .pband)):not(.pband + *) em { color: var(--accent); }
html.clair main > section.sec:not(.diff):not(.endcta):not(:has(+ .pband)):not(.pband + *) .head p { color: var(--ink-m); }
html.clair main > section.sec:not(.diff):not(.endcta):not(:has(+ .pband)):not(.pband + *) .chip { background-color: var(--card); border-color: var(--line-d); color: var(--accent); }
html.clair main > section.sec:not(.diff):not(.endcta):not(:has(+ .pband)):not(.pband + *) .chip::before { background: var(--gold-d); }
html.clair main > section.sec:not(.diff):not(.endcta):not(:has(+ .pband)):not(.pband + *) .note { color: var(--ink-m); }
html.clair main > section.sec:not(.diff):not(.endcta):not(:has(+ .pband)):not(.pband + *) .link { color: var(--accent); border-color: rgba(110, 20, 34, .3); }
html.clair main > section.sec:not(.diff):not(.endcta):not(:has(+ .pband)):not(.pband + *) .link:hover { color: var(--ink-d); border-color: var(--accent); }

/* cartes */
html.clair main > section.sec:not(.diff):not(.endcta):not(:has(+ .pband)):not(.pband + *) .pcard:not(.dark) { background-color: var(--card); border-color: var(--line-d); box-shadow: var(--shadow); }
html.clair main > section.sec:not(.diff):not(.endcta):not(:has(+ .pband)):not(.pband + *) .pcard:not(.dark) .k { color: var(--accent); }
html.clair main > section.sec:not(.diff):not(.endcta):not(:has(+ .pband)):not(.pband + *) .pcard:not(.dark) p { color: var(--ink-m); }
html.clair main > section.sec:not(.diff):not(.endcta):not(:has(+ .pband)):not(.pband + *) .pcard:not(.dark) .more { color: var(--accent); }
html.clair main > section.sec:not(.diff):not(.endcta):not(:has(+ .pband)):not(.pband + *) .bul li { color: var(--ink-d); }
html.clair main > section.sec:not(.diff):not(.endcta):not(:has(+ .pband)):not(.pband + *) .bul li::before { background-color: var(--accent); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.4l2.6 2.6L13 6.6' fill='none' stroke='%23FBF4EF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* formules : cartes blanches, la formule mise en avant en bordeaux */
html.clair main > section.sec:not(.diff):not(.endcta):not(:has(+ .pband)):not(.pband + *) .tier { background-color: var(--card); border-color: var(--line-d); box-shadow: var(--shadow); color: var(--ink-d); }
html.clair main > section.sec:not(.diff):not(.endcta):not(:has(+ .pband)):not(.pband + *) .tier .desc, html.clair main > section.sec:not(.diff):not(.endcta):not(:has(+ .pband)):not(.pband + *) .price small { color: var(--ink-m); }
html.clair main > section.sec:not(.diff):not(.endcta):not(:has(+ .pband)):not(.pband + *) .price { color: var(--ink-d); }
html.clair main > section.sec:not(.diff):not(.endcta):not(:has(+ .pband)):not(.pband + *) .tier .btn-ghost { border-color: var(--line-d2); background-color: transparent; color: var(--ink-d); }
html.clair main > section.sec:not(.diff):not(.endcta):not(:has(+ .pband)):not(.pband + *) .tier .btn-ghost:hover { background-color: var(--paper); border-color: var(--accent); }
html.clair main > section.sec:not(.diff):not(.endcta):not(:has(+ .pband)):not(.pband + *) .tier.featured { background: linear-gradient(165deg, #7A1728 0%, #3A0E16 100%); border-color: transparent; color: var(--cream); box-shadow: 0 30px 60px -30px rgba(58, 14, 22, .7); }
html.clair main > section.sec:not(.diff):not(.endcta):not(:has(+ .pband)):not(.pband + *) .tier.featured :is(h3, .price, .bul li) { color: var(--cream); }
html.clair main > section.sec:not(.diff):not(.endcta):not(:has(+ .pband)):not(.pband + *) .tier.featured :is(.desc, .price small, .pk-sla) { color: #E6CFD3; }
html.clair main > section.sec:not(.diff):not(.endcta):not(:has(+ .pband)):not(.pband + *) .tier.featured .badge { background: var(--gold-on); color: var(--deep); }
html.clair main > section.sec:not(.diff):not(.endcta):not(:has(+ .pband)):not(.pband + *) .tier.featured .more-b summary { color: var(--gold-on); }
html.clair main > section.sec:not(.diff):not(.endcta):not(:has(+ .pband)):not(.pband + *) .tier.featured .bul li::before { background-color: var(--gold-on); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.4l2.6 2.6L13 6.6' fill='none' stroke='%2314060B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
html.clair main > section.sec:not(.diff):not(.endcta):not(:has(+ .pband)):not(.pband + *) .tier.featured :is(.btn, .btn-ghost) { background: var(--gold-on); border-color: var(--gold-on); color: var(--deep); }
html.clair main > section.sec:not(.diff):not(.endcta):not(:has(+ .pband)):not(.pband + *) .tier.featured .btn:hover { background: #ecd095; }

/* étapes et FAQ */
html.clair main > section.sec:not(.diff):not(.endcta):not(:has(+ .pband)):not(.pband + *) .pstep { background-color: var(--card); border-color: var(--line-d); box-shadow: var(--shadow); }
html.clair main > section.sec:not(.diff):not(.endcta):not(:has(+ .pband)):not(.pband + *) .pstep::before { color: var(--accent); }
html.clair main > section.sec:not(.diff):not(.endcta):not(:has(+ .pband)):not(.pband + *) .pstep p { color: var(--ink-m); }
html.clair main > section.sec:not(.diff):not(.endcta):not(:has(+ .pband)):not(.pband + *) .faq details { background-color: var(--card); border-color: var(--line-d); }
html.clair main > section.sec:not(.diff):not(.endcta):not(:has(+ .pband)):not(.pband + *) .faq details[open] { background-color: var(--card); border-color: var(--line-d2); }
html.clair main > section.sec:not(.diff):not(.endcta):not(:has(+ .pband)):not(.pband + *) .faq summary { color: var(--ink-d); }
html.clair main > section.sec:not(.diff):not(.endcta):not(:has(+ .pband)):not(.pband + *) .faq summary::after { color: var(--accent); }
html.clair main > section.sec:not(.diff):not(.endcta):not(:has(+ .pband)):not(.pband + *) .faq .ans { color: var(--ink-m); }

/* réalisations : cadres façon navigateur clair */
html.clair main > section.sec:not(.diff):not(.endcta):not(:has(+ .pband)):not(.pband + *) .proj-frame { border-color: var(--line-d); background-color: #fff; box-shadow: var(--shadow); }
html.clair main > section.sec:not(.diff):not(.endcta):not(:has(+ .pband)):not(.pband + *) .proj-bar { background-color: #F1E9E2; border-bottom-color: var(--line-d); }
html.clair main > section.sec:not(.diff):not(.endcta):not(:has(+ .pband)):not(.pband + *) .proj-bar i { background: rgba(42, 20, 24, .18); }
html.clair main > section.sec:not(.diff):not(.endcta):not(:has(+ .pband)):not(.pband + *) .proj-url { color: var(--ink-l); }
html.clair main > section.sec:not(.diff):not(.endcta):not(:has(+ .pband)):not(.pband + *) .proj-tags span { border-color: var(--line-d); color: var(--ink-m); }
html.clair main > section.sec:not(.diff):not(.endcta):not(:has(+ .pband)):not(.pband + *) .proj-sub { color: var(--ink-l); }
html.clair main > section.sec:not(.diff):not(.endcta):not(:has(+ .pband)):not(.pband + *) .proj-res { color: var(--ink-m); }
html.clair main > section.sec:not(.diff):not(.endcta):not(:has(+ .pband)):not(.pband + *) .proj-go { color: var(--accent); }

/* formulaires sur fond clair */
html.clair main > section.sec:not(.diff):not(.endcta):not(:has(+ .pband)):not(.pband + *) .form { background-color: var(--card); border-color: var(--line-d); box-shadow: var(--shadow); }
html.clair main > section.sec:not(.diff):not(.endcta):not(:has(+ .pband)):not(.pband + *) .form .field :is(input, select, textarea) { background-color: #fff; border-color: var(--line-d2); color: var(--ink-d); }
html.clair main > section.sec:not(.diff):not(.endcta):not(:has(+ .pband)):not(.pband + *) .btn-light:not(:is(.cta-box, .qform, .dform, .au-box) *) { background: var(--accent); color: #FBF6F1; }
html.clair main > section.sec:not(.diff):not(.endcta):not(:has(+ .pband)):not(.pband + *) .btn-light:not(:is(.cta-box, .qform, .dform, .au-box) *):hover { background: #8E1F33; }
/* bouton or : garde son or d'origine, lisible sur clair comme sur sombre */
html.clair main > section.sec:not(.diff):not(.endcta):not(:has(+ .pband)):not(.pband + *) .btn-gold { --gold-on: #E0BE7E; }

/* pastilles de gravité (maintenance) */
html.clair main > section.sec:not(.diff):not(.endcta):not(:has(+ .pband)):not(.pband + *) .pbadge { background: rgba(42, 20, 24, .06); color: var(--ink-m); }
html.clair main > section.sec:not(.diff):not(.endcta):not(:has(+ .pband)):not(.pband + *) .pbadge.h { background: rgba(181, 57, 45, .1); color: #A1301F; }
html.clair main > section.sec:not(.diff):not(.endcta):not(:has(+ .pband)):not(.pband + *) .pbadge.m { background: rgba(156, 117, 53, .12); color: #7A5A22; }
html.clair main > section.sec:not(.diff):not(.endcta):not(:has(+ .pband)):not(.pband + *) .pbadge.l { background: rgba(110, 20, 34, .08); color: var(--accent); }
html.clair main > section.sec:not(.diff):not(.endcta):not(:has(+ .pband)):not(.pband + *) .urg-note strong { color: #A1301F; }

/* bandeau de mots qui défile, sur fond clair */
html.clair main > .marquee:not(.hero + .marquee):not(.pband + .marquee) .mq-track span { color: var(--ink-d); }
html.clair main > .marquee:not(.hero + .marquee):not(.pband + .marquee) .mq-track .o { color: transparent; -webkit-text-stroke-color: rgba(42, 20, 24, .45); }
html.clair main > .marquee:not(.hero + .marquee):not(.pband + .marquee) .mq-track .s { color: var(--accent); }
html.clair main > .marquee:not(.hero + .marquee):not(.pband + .marquee) .mq-track i { background: var(--gold-d); box-shadow: none; }

/* ---------- Exceptions (en dernier) : textes des blocs sombres ---------- */
html.clair main > section.sec:not(.diff):not(.endcta):not(:has(+ .pband)):not(.pband + *) :is(.au-box, .uni, .gcell, .lede, .work, .exp-item, .band, .cta-box, .pcard.dark, .qform, .flow, .qrs, .dform, .tel) :is(h2, h3) { color: var(--cream); }
html.clair main > section.sec:not(.diff):not(.endcta):not(:has(+ .pband)):not(.pband + *) :is(.au-box, .uni, .lede, .band, .work, .cta-box, .exp-item, .gcell) em { color: var(--pink-2); }
html.clair main > section.sec:not(.diff):not(.endcta):not(:has(+ .pband)):not(.pband + *) :is(.au-box, .lede, .band, .cta-box) .chip { background-color: var(--glass); border-color: var(--line); color: var(--cream-2); }
html.clair main > section.sec:not(.diff):not(.endcta):not(:has(+ .pband)):not(.pband + *) :is(.au-box, .lede, .band, .cta-box) .chip::before { background: var(--gold-on); }
html.clair main > section.sec:not(.diff):not(.endcta):not(:has(+ .pband)):not(.pband + *) :is(.au-box, .lede, .band, .cta-box) p { color: var(--cream-2); }
html.clair main > section.sec:not(.diff):not(.endcta):not(:has(+ .pband)):not(.pband + *) :is(.exp-item, .au-box, .lede, .gcell, .band, .work, .uni, .tier.featured) .link { color: #E0BE7E; border-color: rgba(224, 190, 126, .4); }
html.clair main > section.sec:not(.diff):not(.endcta):not(:has(+ .pband)):not(.pband + *) :is(.exp-item, .au-box, .lede, .gcell) .link:hover { color: #FBF4EF; }
html.clair main > section.sec:not(.diff):not(.endcta):not(:has(+ .pband)):not(.pband + *) .cta-box :is(.link, .cta-meta a) { color: var(--cream-2); border-color: var(--line); }

/* ---------- Bandes photo : couleurs sombres d'origine, aucun réglage ici ---------- */