/* ══════════════════════════════════════════════════════════════
   blanc-kaki.css - direction blanc / kaki
   index.html, realisations.html, tarifs.html, methodologie.html et
   les 4 pages villes.
   Chargé après noir-argent.css, sous le scope .theme-kaki posé sur
   <body> à côté de .theme-noir. Ne touche QUE la couleur : aucune
   taille, aucun espacement, aucune position ne change ici.

   Principe : noir-argent.css écrit ses composants sur la palette
   brute (--noir pour les fonds, --blanc pour le texte, --argent pour
   l'accent). On la remappe deux fois :
   - scope CLAIR, par défaut sur tout le body : --noir devient le
     blanc papier, --blanc devient l'encre noire, l'accent passe au
     kaki foncé. Tout ce qui était blanc sur noir devient noir sur
     blanc, et l'argent des boutons devient un aplat kaki à texte
     blanc ;
   - scope SOMBRE, sur les zones qui gardent un fond foncé (hero
     photo, studio et contact en kaki foncé, bandeau du haut tant
     qu'il flotte sur le hero) : palette noir kaki d'origine.
   Les tokens sémantiques de .theme-noir (--bg, --text…) sont
   résolus sur <body> : chaque scope doit donc les redéclarer,
   sans quoi les composants de main.css garderaient ceux du body.

   Rythme de l'accueil :
     hero       photo en niveaux de gris teintée kaki     (sombre)
     studio     kaki foncé, texte blanc                   (sombre)
     références blanc, texte noir                         (clair)
     devis      blanc, sélections en kaki foncé           (clair)
     contact    kaki foncé, texte blanc                   (sombre)
     pied       noir kaki, signature rayée (kaki-commun)  (sombre)
   Rythme des pages secondaires (section 9) :
     ouverture  .page-head / .tarifs-hero, noir kaki      (sombre)
     contenu    blanc                                     (clair)
     appel      .pf-cta / .tarifs-cta-section, kaki foncé (sombre)
     pied       noir kaki, signature rayée                (sombre)
   ══════════════════════════════════════════════════════════════ */

html { background: var(--papier); }

/* ── 1. Scope clair (défaut) ──────────────────────────────── */
body.theme-kaki,
body.theme-kaki.nav-open #navbar {
  --noir:       var(--papier);
  --noir-2:     var(--papier-2);
  --noir-3:     var(--papier-3);
  --blanc:      var(--noir-kaki);

  --argent:     var(--kaki-fonce);
  --argent-hi:  var(--kaki-plein);
  --argent-lo:  var(--kaki-encre);
  --gris-clair: var(--gris-encre);

  --filet:      rgba(15,18,14,0.12);
  --filet-fort: rgba(15,18,14,0.24);

  --argent-brosse: linear-gradient(100deg, var(--kaki-fonce), var(--kaki-plein));

  --bg:         var(--papier);
  --bg-alt:     var(--papier-2);
  --bg-green:   var(--papier-2);
  --surface:    var(--papier-3);
  --text:       var(--noir-kaki);
  --text-muted: var(--gris-encre);
  --text-light: var(--kaki-encre);
  --khaki:      var(--kaki-fonce);
  --khaki-dark: var(--papier);
  --khaki-mid:  var(--kaki-encre);
  --khaki-bg:   rgba(44,68,39,0.07);
  --border:     rgba(15,18,14,0.12);
  --border-med: rgba(15,18,14,0.24);
}

/* ── 2. Scope sombre ──────────────────────────────────────── */
.theme-kaki #hero,
.theme-kaki #studio,
.theme-kaki #contact,
.theme-kaki #footer,
.theme-kaki .page-head,
.theme-kaki .tarifs-hero,
.theme-kaki .pf-cta,
.theme-kaki .tarifs-cta-section,
.theme-kaki .ms-item--finale,
.theme-kaki #identite,
.theme-kaki #engagement,
.theme-kaki .faq--kaki,
.theme-kaki .testimonial-section,
body.theme-kaki:not(.nav-open) #navbar:not(.scrolled) {
  --noir:       var(--noir-kaki);
  --noir-2:     var(--noir-kaki-2);
  --noir-3:     var(--noir-kaki-3);
  --blanc:      #F5F6F7;

  --argent:     var(--kaki-clair);
  --argent-hi:  var(--kaki-hi);
  --argent-lo:  var(--kaki-lo);
  --gris-clair: var(--brume);

  --filet:      rgba(168,197,160,0.16);
  --filet-fort: rgba(168,197,160,0.34);

  --argent-brosse: linear-gradient(
    100deg,
    var(--kaki-lo) 0%,
    var(--kaki-hi) 28%,
    var(--kaki-clair) 46%,
    var(--kaki-lo) 62%,
    var(--kaki-hi) 88%,
    var(--kaki-clair) 100%
  );

  --bg:         var(--noir-kaki);
  --bg-alt:     var(--noir-kaki-2);
  --bg-green:   var(--noir-kaki-2);
  --surface:    var(--noir-kaki-3);
  --text:       #F5F6F7;
  --text-muted: var(--brume);
  --text-light: var(--kaki-lo);
  --khaki:      var(--kaki-clair);
  --khaki-dark: var(--noir-kaki);
  --khaki-mid:  var(--kaki-lo);
  --khaki-bg:   var(--kaki-voile);
  --border:     rgba(168,197,160,0.16);
  --border-med: rgba(168,197,160,0.34);

  color: var(--text);
}

/* ── 3. Navbar et menu plein écran ────────────────────────── */
/* Sur le hero : bandeau transparent, sans voile, logo blanc.
   Le voile de main.css passait au-dessus du logo (resté en position
   statique) et le ternissait : supprimé.
   Une fois décollé : barre blanche, traits et logo noirs. */
.theme-kaki #navbar::before { content: none; }
.theme-kaki #navbar.scrolled,
.theme-kaki #navbar.navbar--solid {
  background: rgba(255,255,255,0.90);
  box-shadow: 0 1px 0 var(--filet);
}
.theme-kaki .nav-wordmark img,
.theme-kaki .footer-logo .logo-img { transition: filter var(--transition); }
/* Le logo n'existe qu'en blanc dans la barre : brightness(0) le
   ramène au noir sans changer de fichier ni de balisage. */
.theme-kaki #navbar.scrolled .nav-wordmark img,
body.theme-kaki.nav-open .nav-wordmark img { filter: brightness(0); }

/* Verre clair. Pire cas, du noir pur derrière : à 0.86 le fond
   effectif vaut #DBDBDB, le kaki foncé y tient 7.7:1 et l'encre
   13.6:1. En dessous de 0.86 le kaki encre des coordonnées tombe
   sous 4.5:1, ne pas éclaircir sans refaire le calcul. */
.theme-kaki .nav-overlay { background: rgba(255,255,255,0.86); }
.theme-kaki .nav-overlay::before {
  background: linear-gradient(to bottom, rgba(255,255,255,0.5), rgba(255,255,255,0) 34%);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .theme-kaki .nav-overlay { background: rgba(255,255,255,0.97); }
}
@media (prefers-reduced-transparency: reduce) {
  .theme-kaki .nav-overlay { background: rgba(255,255,255,0.97); }
}
body.theme-kaki.nav-open #navbar.scrolled,
body.theme-kaki.nav-open #navbar.navbar--solid { background: transparent; box-shadow: 0 0 #0000; }
.theme-kaki .nav-overlay .nav-cta { color: var(--papier); }
.theme-kaki .nav-overlay .nav-cta:hover { color: var(--papier); }

/* ── 4. Hero ──────────────────────────────────────────────── */
.theme-kaki #hero { background: var(--kaki-fonce); }
.theme-kaki .hero-bg-fallback { filter: grayscale(1) contrast(1.04) brightness(0.96); }
/* Trois couches : un lavis kaki qui teinte la photo, le scrim centré
   sur le texte, et le dégradé qui fond le bas du hero dans le kaki
   foncé de la section studio, sans couture. */
.theme-kaki .hero-overlay {
  background:
    radial-gradient(ellipse 72% 46% at 50% 54%,
      rgba(15,18,14,0.66) 0%,
      rgba(15,18,14,0.24) 62%,
      rgba(15,18,14,0) 100%),
    linear-gradient(to bottom,
      rgba(15,18,14,0.50) 0%,
      rgba(15,18,14,0.20) 40%,
      rgba(44,68,39,0.78) 76%,
      var(--kaki-fonce) 92%),
    linear-gradient(rgba(44,68,39,0.42), rgba(44,68,39,0.42));
}
.theme-kaki .hero-sub { color: rgba(245,246,247,0.86); }

/* ── 5. Studio : kaki foncé ───────────────────────────────── */
.theme-kaki #studio { background: var(--kaki-fonce); }
.theme-kaki .studio-media {
  border-color: rgba(245,246,247,0.22);
  background: var(--noir-kaki-2);
}
.theme-kaki .studio-media img { filter: grayscale(1) contrast(1.04) brightness(0.98); }
.theme-kaki .studio-media::after {
  background: linear-gradient(to bottom, rgba(44,68,39,0) 50%, rgba(44,68,39,0.45) 100%);
}
/* Kaki clair sur kaki foncé : 5.7:1 ; --kaki-hi monte à 7.7:1,
   plus net en 0.66rem. */
.theme-kaki .studio-link { color: var(--kaki-hi); }
.theme-kaki .studio-link::before { background: rgba(245,246,247,0.30); }
.theme-kaki .studio-link::after { background: var(--blanc); }
.theme-kaki .studio-tile:focus-within { outline-color: var(--blanc); }
.theme-kaki .studio-tile:focus-within .studio-media { border-color: var(--blanc); }
@media (hover: hover) and (pointer: fine) {
  .theme-kaki .studio-tile:hover .studio-media { border-color: rgba(245,246,247,0.55); }
  .theme-kaki .studio-tile:hover .studio-media img { filter: grayscale(1) contrast(1.06) brightness(1.06); }
}

/* ── 6. Références et devis : blanc ───────────────────────── */
/* Le remap fait l'essentiel : fonds blancs, texte noir, sélections,
   étape active et bouton en kaki foncé à texte blanc (10.7:1).
   Restent les couleurs que noir-argent.css écrit en dur. */
.theme-kaki .ac-btn,
.theme-kaki .goal-pill { color: var(--noir-kaki); }
.theme-kaki .ac-btn.is-selected,
.theme-kaki .goal-pill:has(input:checked) { color: var(--papier); }
.theme-kaki .btn-outline:hover,
.theme-kaki .hero-actions .btn-outline:hover { background: rgba(44,68,39,0.07); }

/* Retours de formulaire : le rouge clair de la version sombre
   tombe sous 2:1 sur blanc. */
.theme-kaki .form-error {
  border-color: rgba(161,44,44,0.35);
  color: var(--erreur);
}

/* ── 7. Contact : kaki foncé ──────────────────────────────── */
.theme-kaki #contact { background: var(--kaki-fonce); }
.theme-kaki .contact-link {
  background: rgba(15,18,14,0.28);
  border-color: rgba(168,197,160,0.24);
}
@media (hover: hover) and (pointer: fine) {
  .theme-kaki .contact-link:hover { border-color: var(--kaki-clair); }
}

/* ── 8. Pied de page : noir kaki ─────────────────────────── */
.theme-kaki #footer { background: var(--noir-kaki); }

/* ── 9. Pages secondaires ─────────────────────────────────── */
/* Ouverture en noir kaki, comme le hero de l'accueil ; appel final
   en kaki foncé, comme la section contact. Le contenu entre les deux
   reste dans le scope clair par défaut. */
.theme-kaki .page-head,
.theme-kaki .tarifs-hero { background: var(--noir-kaki); }
.theme-kaki .pf-cta,
.theme-kaki .tarifs-cta-section,
.theme-kaki .ms-item--finale { background: var(--kaki-fonce); }

/* FAQ (#faq sur methodologie.html et tarifs.html). noir-argent.css
   la peint en --noir-2 par identifiant, que le scope clair remappe en
   gris clair : retour au blanc papier. main.css écrit son titre en
   #fff par identifiant : encre noir kaki, 18.9:1. Le voile argent du
   dépliage devient le voile kaki du scope clair. */
.theme-kaki #faq { background: var(--papier); }
.theme-kaki #faq .section-header h2 { color: var(--text); }
.theme-kaki #faq .faq-list details:hover,
.theme-kaki #faq .faq-list details[open] { background: var(--khaki-bg); }