/* ══════════════════════════════════════════════════════════════
   noir-argent.css - direction noir mat / argent
   Chargé par les 9 pages du site, toujours après responsive.css
   (ou après main.css sur les pages légales, qui ne chargent pas
   responsive.css). Direction validée et unique du site depuis le
   2026-09-04 : il n'existe plus de version V5 kaki nulle part.

   Deux rôles, dans cet ordre :
   1. remapper les tokens sémantiques de la V5 kaki (--bg, --text,
      --khaki…) sur la palette noir/argent déclarée dans main.css,
      sous le scope .theme-noir posé sur <body>. Tous les composants
      existants (méthodologie, devis, faq, contact, footer, pages
      villes, pages légales) suivent alors sans être réécrits ;
   2. porter les composants propres à cette direction : wordmark,
      hero, tuiles, bandeau de références.

   Les pages villes (marly, peltre, montigny-les-metz,
   longeville-les-metz) chargent en plus css/villes.css après ce
   fichier, qui consomme ses tokens sans écrire de couleur en dur.

   Micro-interactions : transform et opacity uniquement, 160-260ms,
   jamais d'ease-in sur une action directe, tout hover derrière
   (hover: hover) pour ne pas coller un état figé sur tactile.
   ══════════════════════════════════════════════════════════════ */

/* Overscroll : évite la bande blanche au rebond iOS / macOS */
html { background: var(--noir); }

/* ── 1. Remap sémantique ──────────────────────────────────── */
.theme-noir {
  --bg:         var(--noir);
  --bg-alt:     var(--noir-2);
  --bg-green:   var(--noir-2);   /* sections « vertes » de la V5 */
  --surface:    var(--noir-3);

  --text:       var(--blanc);
  --text-muted: var(--gris-clair);
  --text-light: var(--argent-lo);

  /* L'accent kaki devient l'argent. Un seul accent sur toute la page. */
  --khaki:      var(--argent);
  --khaki-dark: var(--noir);
  --khaki-mid:  var(--argent-lo);
  --khaki-bg:   rgba(200,204,208,0.10);

  --border:     var(--filet);
  --border-med: var(--filet-fort);

  /* Sur du noir mat une ombre portée ne se voit pas et salit les
     bords : la hiérarchie passe par les filets.
     Ombre transparente et NON « none » : main.css compose ces tokens
     dans des listes séparées par des virgules (#navbar.scrolled,
     .engagement-avatar). « none » y est invalide et fait tomber la
     déclaration entière, ce qui supprimait au passage l'anneau de
     l'avatar. « 0 0 #0000 » reste valide partout et ne rend rien. */
  --shadow-sm:  0 0 #0000;
  --shadow-md:  0 0 #0000;
  --shadow-lg:  0 0 #0000;

  /* Système de rayons. Angles vifs sur les panneaux et les
     sélections, pilule réservée aux vraies commandes (boutons,
     onglet CTA de la nav). Seul --radius-tuile déroge, à 3px : un
     adoucissement volontairement sous le seuil de perception, qui
     enlève la dureté de l'angle sans transformer la tuile en carte.
     Au-delà de 4px la direction bascule dans le générique. */
  --radius:       0px;
  --radius-sm:    0px;
  --radius-tuile: 3px;

  /* Fluidité générale. main.css cadence tous ses composants sur
     --transition, dont la courbe (0.4, 0, 0.2, 1) démarre lentement :
     à l'écran l'interface a l'air de traîner au moment précis où
     l'oeil la suit. Recomposé ici sur la même sortie rapide que le
     reste de la direction, ce qui fluidifie nav, boutons, champs,
     FAQ et contact d'un seul geste. */
  --transition:   0.2s var(--ease-noir);

  /* Typographie. Une seule famille sur tout le site, celle de
     main.css : Inter, servie par --font. La direction ne remappe
     plus rien ici. Les sur-titres et les libelles techniques ne
     changent plus de dessin, ils changent de graisse et de
     chasse (voir plus bas). Goldman reste reserve a l'intro
     animee et au repli du logo de pied de page. */
}

.theme-noir body,
body.theme-noir { background: var(--noir); color: var(--blanc); }

/* Sélection : argent sur noir, pas le bleu système */
.theme-noir ::selection { background: var(--argent); color: var(--noir); }

/* Focus clavier visible sur fond sombre, partout */
.theme-noir a:focus-visible,
.theme-noir button:focus-visible,
.theme-noir input:focus-visible,
.theme-noir select:focus-visible,
.theme-noir textarea:focus-visible,
.theme-noir summary:focus-visible {
  outline: 2px solid var(--argent);
  outline-offset: 3px;
}

/* ── 4. Navbar repeinte ───────────────────────────────────── */
.theme-noir #navbar { background: transparent; }
.theme-noir #navbar::before {
  background: linear-gradient(to bottom, rgba(12,12,13,0.72), rgba(12,12,13,0));
}
.theme-noir #navbar.scrolled {
  background: rgba(12,12,13,0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--filet);
}
.theme-noir .nav-link { color: rgba(245,246,247,0.78); }
.theme-noir .nav-link:hover,
.theme-noir .nav-link.active { color: var(--blanc); }
.theme-noir #navbar.scrolled .nav-link { color: rgba(245,246,247,0.78); }
.theme-noir #navbar.scrolled .nav-link:hover,
.theme-noir #navbar.scrolled .nav-link.active { color: var(--blanc); }

/* CTA nav : contour fin, jamais un aplat clair. */
.theme-noir .nav-link.nav-cta,
.theme-noir #navbar.scrolled .nav-link.nav-cta {
  background: transparent;
  color: var(--blanc);
  border: 1px solid var(--filet-fort);
}
.theme-noir .nav-link.nav-cta:hover,
.theme-noir #navbar.scrolled .nav-link.nav-cta:hover {
  background: rgba(200,204,208,0.12);
  color: var(--blanc);
  border-color: var(--argent);
}
.theme-noir .nav-toggle span,
.theme-noir #navbar.scrolled .nav-toggle span { background: var(--blanc); }

/* Menu plein écran : verre liquide, pas un aplat. Même matière que
   l'ancien panneau de 320px, étendue au viewport entier, mais plus
   dense : à 0,42 d'opacité le texte argent tombait sous 4,5:1 dès
   qu'une zone claire de la vidéo du hero passait dessous. À 0,74 le
   pire cas, du blanc pur derrière, donne 5,3:1 pour --argent et
   8,1:1 pour --blanc, et la page continue de se deviner au travers.
   Aucun rayon : l'écran n'a pas de coin visible, la matière se
   reconnaît au reflet et au flou, pas à sa forme. */
.theme-noir .nav-overlay {
  background: rgba(11,11,12,0.74);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
}
/* Le reflet qui dit qu'il s'agit d'une matière : il descend du haut,
   là où le bouton vient de la faire monter. */
.theme-noir .nav-overlay::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(255,255,255,0.07), rgba(255,255,255,0) 34%);
}
/* Sans flou disponible, ou quand le système demande moins de
   transparence, la matière devient un aplat : le contraste ne peut
   pas dépendre d'un effet optionnel. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .theme-noir .nav-overlay { background: rgba(11,11,12,0.97); }
}
@media (prefers-reduced-transparency: reduce) {
  .theme-noir .nav-overlay {
    background: rgba(11,11,12,0.97);
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .theme-noir .nav-overlay::before { background: none; }
}
/* Le bandeau disparaît dans le verre le temps de l'ouverture : il ne
   reste que le bouton et le logo, posés sur la matière. */
body.theme-noir.nav-open #navbar.scrolled,
body.theme-noir.nav-open #navbar.navbar--solid {
  background: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: 0 0 #0000;
}

.theme-noir .nav-primary .nav-link { color: var(--argent); }
.theme-noir .nav-primary .nav-link:hover,
.theme-noir .nav-primary .nav-link.active { color: var(--blanc); }
.theme-noir .nav-rule { border-top-color: var(--filet-fort); }
.theme-noir .nav-overlay .nav-cta { background: var(--argent); color: var(--noir); }
.theme-noir .nav-overlay .nav-cta:hover { background: var(--argent-hi); color: var(--noir); }
.theme-noir .nav-coord { color: var(--argent); }
.theme-noir .nav-coord:hover { color: var(--blanc); }

/* Pages sans hero sombre (mentions légales, confidentialité) : le
   bandeau porte son fond dès le haut de page. Même traitement que
   .scrolled, puisque rien ne le distingue une fois posé. */
.theme-noir #navbar.navbar--solid {
  background: rgba(12,12,13,0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--filet);
}

@media (max-width: 768px) {
  .nav-wordmark img { height: 26px; }
}

/* ── 5. Hero ──────────────────────────────────────────────── */
/* Mécanique conservée telle quelle : .hero-bg-fallback (Ken Burns)
   sous .hero-video-wrap qui passe de 0 à 1 sur canplaythrough
   (js/main.js). Seuls l'image, le voile et la typo changent. */
.theme-noir #hero { background: var(--noir); }
.theme-noir .hero-bg-fallback {
  background-image: url('../images/fond1.webp');
  /* fond1 est déjà très sombre : un simple desaturate suffit,
     pas besoin d'écraser la luminosité. */
  filter: grayscale(1) contrast(1.06) brightness(0.82);
}
/* Voile en deux couches :
   - une ellipse centrée sur le bloc de texte, qui garantit le
     contraste même là où la photo s'éclaircit (panneau perforé) ;
   - un dégradé vertical qui raccorde le bas du hero au noir plein
     de la section suivante, sans couture visible.
   Assombrir uniformément aurait suffi au contraste mais aurait
   éteint la photo : le scrim local préserve la matière sur les
   bords tout en tenant le texte. */
.theme-noir .hero-overlay {
  background:
    radial-gradient(ellipse 72% 46% at 50% 54%,
      rgba(12,12,13,0.74) 0%,
      rgba(12,12,13,0.30) 62%,
      rgba(12,12,13,0) 100%),
    linear-gradient(to bottom,
      rgba(12,12,13,0.58) 0%,
      rgba(12,12,13,0.42) 38%,
      rgba(12,12,13,0.86) 82%,
      var(--noir) 100%);
}

/* #hero centre déjà verticalement (flex + align-items: center) sur
   ses 100dvh : hero-inner ne doit pas re-imposer de hauteur, sinon
   ses paddings s'ajoutent au dvh et le bloc déborde du premier écran. */
.theme-noir .hero-inner {
  padding: 5.5rem var(--px) 3.5rem;
  display: flex;
  justify-content: center;
}
/* Le titre est compose en deux lignes explicites, separees par un
   <br>. La largeur est calee sur la plus longue des deux a la taille
   max du clamp : « Votre site devrait la raconter. » mesure 955px en
   Inter a 3.25rem, d'ou les 61rem. En dessous, la ligne se casse en
   deux et la construction du titre tombe. */
.theme-noir .hero-content {
  max-width: 61rem;
  text-align: center;
}
/* Pages villes uniquement : le hero garde son sur-titre et ses deux
   CTA, retirés sur l'accueil. Le bloc entier est centré, ces deux
   rangées flex doivent l'être aussi, sans quoi elles restent collées
   à gauche du texte centré au-dessus et en dessous. */
.theme-noir .hero-eyebrow {
  justify-content: center;
  color: var(--argent-lo);
}
.theme-noir .hero-eyebrow::before { background: var(--argent-lo); }
.theme-noir .hero-actions { justify-content: center; }
.theme-noir #hero-title {
  font-family: var(--font);
  font-size: clamp(1.55rem, 4vw, 3.25rem);
  font-weight: 600;
  /* Tracking positif mais tres serre : en capitales, Inter a besoin
   d'un filet d'air, pas d'un interlettrage qui delierait les mots.
   La hauteur de ligne laisse passer les descendantes du segment
   accentue. */
  letter-spacing: 0.01em;
  line-height: 1.12;
  text-transform: uppercase;
  color: var(--blanc);
  margin-bottom: 1.5rem;
  padding-bottom: 0.12em;
}
/* Le segment accentué prend la matière argent brossée. Fallback :
   la couleur pleine reste appliquée si background-clip n'est pas
   supporté, le texte n'est jamais invisible. */
.theme-noir #hero-title em {
  font-style: normal;
  color: var(--argent);
  display: inline-block;
  transform: skewX(-8deg);
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .theme-noir #hero-title em {
    background: var(--argent-brosse);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

/* Le hero ne porte plus que deux éléments : le titre et cette ligne.
   Aucune marge basse, le noir plein en dessous fait la respiration. */
.theme-noir .hero-sub {
  font-size: clamp(0.95rem, 1.6vw, 1.05rem);
  color: rgba(245,246,247,0.74);
  line-height: 1.7;
  max-width: 46rem;
  margin: 0 auto;
}
/* ── 6. Section « Le studio » : 3 tuiles ──────────────────── */
#studio { background: var(--noir); }
.studio-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--py) var(--px);
}
.studio-title {
  font-family: var(--font);
  font-size: clamp(1.6rem, 4vw, 2.75rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.15;
  color: var(--blanc);
  margin-bottom: 3rem;
}

/* Mobile-first : une colonne, puis trois colonnes strictement
   égales à partir de 768px. Grid, pas de calcul de pourcentages. */
.studio-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem 2rem;
}
@media (min-width: 768px) {
  .studio-grid { grid-template-columns: repeat(3, 1fr); }
}

.studio-tile { position: relative; display: flex; flex-direction: column; }

/* Cadre de l'image : coins vifs, aucun ombrage, un filet argent très
   fin qui se renforce au survol. C'est le conteneur qui masque, pas
   l'image : le zoom reste contenu. */
.studio-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--filet);
  border-radius: var(--radius-tuile);
  background: var(--noir-2);
  /* La tuile entiere reagit a l'appui : 0.995 se sent sans se voir,
     et le retour est plus rapide que l'aller. */
  transition: border-color 0.2s var(--ease-noir), transform 0.22s var(--ease-noir);
}
.studio-tile:active .studio-media { transform: scale(0.994); transition-duration: 0.1s; }
.studio-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Les sources sont hétérogènes (chaudes, froides) : le passage en
     niveaux de gris les ramène toutes dans la palette. */
  filter: grayscale(1) contrast(1.05) brightness(0.86);
  /* Le zoom est ambiant, pas un retour d'action : il peut durer plus
     longtemps que les 300ms d'une interaction directe. */
  transition: transform 0.4s var(--ease-noir), filter 0.4s var(--ease-noir);
}
/* Voile bas : garantit que le filet et le titre ne se perdent pas
   sur une image claire. */
.studio-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(12,12,13,0) 45%, rgba(12,12,13,0.55) 100%);
  border-radius: inherit;
  pointer-events: none;
}

.studio-tile h3 {
  font-family: var(--font);
  font-size: 1.02rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--blanc);
  margin: 1.5rem 0 0.85rem;
}

/* Lien souligné fin : le filet est un pseudo-élément animé en
   transform (scaleX), donc composité, jamais un width animé. */
.studio-link {
  position: relative;
  align-self: flex-start;
  padding-bottom: 0.4rem;
  color: var(--argent);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.66rem;
  font-weight: 600;
  transition: color 0.2s var(--ease-noir);
}
.studio-link::before,
.studio-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
}
.studio-link::before { background: var(--filet-fort); }
.studio-link::after {
  background: var(--argent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.24s var(--ease-noir);
}

/* Un seul lien par tuile, porté par le titre : son nom accessible est
   le titre lui-même, pas « en savoir plus ». Le ::after l'étend sur
   toute la tuile, image comprise, sans dupliquer la cible. */
.studio-tile h3 a { color: inherit; }
.studio-tile h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}
/* Le focus clavier doit cerner la tuile, pas la boîte de texte du
   lien étendu (qui est plate et illisible en outline). */
.studio-tile h3 a:focus-visible { outline: none; }
.studio-tile:focus-within { outline: 2px solid var(--argent); outline-offset: 4px; }

@media (hover: hover) and (pointer: fine) {
  .studio-tile:hover .studio-media { border-color: var(--filet-fort); }
  .studio-tile:hover .studio-media img {
    transform: scale(1.04);
    filter: grayscale(1) contrast(1.08) brightness(0.98);
  }
  .studio-tile:hover .studio-link { color: var(--blanc); }
  .studio-tile:hover .studio-link::after { transform: scaleX(1); }
}
/* Clavier : le survol ne doit pas être la seule voie vers l'état actif. */
.studio-tile:focus-within .studio-media { border-color: var(--argent); }
.studio-tile:focus-within .studio-link::after { transform: scaleX(1); }

/* ── 7. Bandeau de références ─────────────────────────────── */
#references {
  background: var(--noir);
  border-top: 1px solid var(--filet);
  border-bottom: 1px solid var(--filet);
  padding: 2.75rem 0;
  overflow: hidden;
}
.ref-label {
  text-align: center;
  color: var(--argent-lo);
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: 0.62rem;
  font-weight: 600;
  margin-bottom: 2rem;
}
/* Masque latéral : les entrées naissent et meurent en fondu au lieu
   d'être coupées net par le bord de l'écran. */
.ref-viewport {
  position: relative;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}
/* La piste contient la liste deux fois (la seconde en aria-hidden) :
   à -50% le motif est identique à 0%, la boucle est invisible.
   Aucun JS, aucune librairie. */
.ref-track {
  display: flex;
  width: max-content;
  animation: refScroll 38s linear infinite;
}
.ref-group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
/* Toutes les entrees sont des liens vers les sites clients : le nom
   qu'on voit passer est celui qu'on peut atteindre. Seul le premier
   groupe compte pour le clavier et le lecteur d'ecran ; les cinq
   groupes clones sont aria-hidden et leurs liens sortent de l'ordre
   de tabulation par tabindex="-1". */
.ref-item {
  flex-shrink: 0;
  padding: 0 clamp(1.75rem, 5vw, 3.5rem);
  color: var(--argent-lo);
  font-family: var(--font);
  font-size: clamp(0.82rem, 2vw, 1.05rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  white-space: nowrap;
  text-decoration: none;
  transition: color 0.2s var(--ease-noir);
}
/* Cible tactile : 24px minimum (WCAG 2.2 - 2.5.8). Les entrees du
   bandeau ne sont pas des liens en pleine phrase, l'exception
   « inline » ne s'applique pas. */
a.ref-item {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  text-underline-offset: 0.35em;
  text-decoration-thickness: 1px;
}
@media (hover: hover) and (pointer: fine) {
  /* La piste se fige au survol : sans cela un lien se derobe sous le
     curseur au moment ou l'utilisateur vise. */
  .ref-viewport:hover .ref-track { animation-play-state: paused; }
  a.ref-item:hover { color: var(--blanc); text-decoration: underline; }
}
a.ref-item:focus-visible { color: var(--blanc); }
/* Au focus clavier la piste doit s'arreter, sinon la cible sort de
   l'ecran pendant que l'anneau de focus la suit. */
.ref-track:focus-within { animation-play-state: paused; }
@keyframes refScroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
/* Défilement infini : sans mouvement, la piste doit rester lisible
   et intégralement atteignable, donc on la fige et on l'aligne. */
@media (prefers-reduced-motion: reduce) {
  .ref-track { animation: none; flex-wrap: wrap; justify-content: center; width: 100%; }
  .ref-group[aria-hidden="true"] { display: none; }
  .ref-group { flex-wrap: wrap; justify-content: center; gap: 0.5rem 0; }
  .ref-viewport { -webkit-mask-image: none; mask-image: none; }
}

/* ── 8. Sections héritées repeintes ───────────────────────── */
/* Le remap de tokens fait l'essentiel. Ne restent que les valeurs
   codées en dur dans main.css, reprises une à une ci-dessous. */

.theme-noir #identite,
.theme-noir #engagement,
.theme-noir #faq { background: var(--noir-2); }
.theme-noir #methodologie,
.theme-noir #devis,
.theme-noir #contact { background: var(--noir); }

/* Titres de section : même famille que le reste de la direction. */
.theme-noir .section-header h2,
.theme-noir .identite-big,
.theme-noir #contact-title {
  font-family: var(--font);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.18;
  font-weight: 600;
}
.theme-noir .section-header h2 { color: var(--blanc); }
.theme-noir .section-lead { color: var(--gris-clair); }
.theme-noir .section-eyebrow,
.theme-noir .identite-eyebrow { color: var(--argent-lo); }

/* Identité */
.theme-noir .identite-big span { color: var(--argent); }
.theme-noir .identite-desc { color: rgba(245,246,247,0.80); }
.theme-noir .identite-ing,
.theme-noir .identite-foot { color: var(--gris-clair); }
.theme-noir .identite-foot strong { color: var(--blanc); }
.theme-noir .ic-row-content strong { color: var(--blanc); }
.theme-noir .ic-row-content p { color: var(--gris-clair); }
.theme-noir .ic-row-num { color: var(--argent-lo); }
/* Le line-art d'origine est tracé en vert : on le repasse en argent
   sans toucher au SVG inline. */
.theme-noir .identite-illus [stroke^="#a8c5a0"],
.theme-noir .identite-illus [stroke^="rgba(168,197,160"] { stroke: var(--argent); }
.theme-noir .identite-illus [stroke^="rgba(255,255,255"] { stroke: rgba(245,246,247,0.62); }

/* Méthodologie */
/* Les numeros d'etape sont de l'affichage : meme chasse resserree
   et meme graisse que les titres, sinon un 900 en largeur normale
   jure a cote de titres condenses en 600 sur la meme page. */
.theme-noir .ms-num {
  color: var(--argent-lo);
  font-weight: 700;
  /* Le halo du filtre SVG de main.css est une donnée-URI qui code sa
     couleur en dur (kaki V5, #3D5C35) : var(--khaki) ne l'atteint pas.
     Repris ici à l'identique, seule la couleur du feFlood change. */
  filter: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cfilter%20id%3D%22f%22%20x%3D%22-30%25%22%20y%3D%22-30%25%22%20width%3D%22160%25%22%20height%3D%22160%25%22%3E%3CfeMorphology%20in%3D%22SourceAlpha%22%20operator%3D%22dilate%22%20radius%3D%221.5%22%20result%3D%22d%22%2F%3E%3CfeComposite%20in%3D%22d%22%20in2%3D%22SourceAlpha%22%20operator%3D%22out%22%20result%3D%22ring%22%2F%3E%3CfeFlood%20flood-color%3D%22%23C8CCD0%22%20flood-opacity%3D%220.2%22%20result%3D%22fc%22%2F%3E%3CfeComposite%20in%3D%22fc%22%20in2%3D%22SourceAlpha%22%20operator%3D%22in%22%20result%3D%22fillLayer%22%2F%3E%3CfeFlood%20flood-color%3D%22%23C8CCD0%22%20flood-opacity%3D%220.4%22%20result%3D%22rc%22%2F%3E%3CfeComposite%20in%3D%22rc%22%20in2%3D%22ring%22%20operator%3D%22in%22%20result%3D%22ringLayer%22%2F%3E%3CfeMerge%3E%3CfeMergeNode%20in%3D%22fillLayer%22%2F%3E%3CfeMergeNode%20in%3D%22ringLayer%22%2F%3E%3C%2FfeMerge%3E%3C%2Ffilter%3E%3C%2Fsvg%3E#f");
}
.theme-noir .ms-label { color: var(--argent); }
.theme-noir .ms-title { color: var(--blanc); }
.theme-noir .ms-desc { color: var(--gris-clair); }
.theme-noir .ms-duration { color: var(--argent-lo); }
.theme-noir .ms-vline { background: var(--filet); }
/* L'étape 06 garde son statut de panneau distinct : ici c'est le
   filet argent, pas un aplat de couleur, qui la détache. */
.theme-noir .ms-item--finale {
  background: var(--noir-2);
  border: 1px solid var(--filet-fort);
}
.theme-noir .ms-item--finale .ms-label,
.theme-noir .ms-item--finale .ms-title { color: var(--blanc); }
.theme-noir .ms-item--finale .ms-desc { color: rgba(245,246,247,0.80); }
/* Même halo, en blanc du site plutôt qu'un blanc pur codé en dur
   dans le data-URI de main.css (écart de 3 valeurs RGB, I-VIS-6). */
.theme-noir .ms-item--finale .ms-num {
  filter: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cfilter%20id%3D%22f%22%20x%3D%22-30%25%22%20y%3D%22-30%25%22%20width%3D%22160%25%22%20height%3D%22160%25%22%3E%3CfeMorphology%20in%3D%22SourceAlpha%22%20operator%3D%22dilate%22%20radius%3D%221.5%22%20result%3D%22d%22%2F%3E%3CfeComposite%20in%3D%22d%22%20in2%3D%22SourceAlpha%22%20operator%3D%22out%22%20result%3D%22ring%22%2F%3E%3CfeFlood%20flood-color%3D%22%23F5F6F7%22%20flood-opacity%3D%220.2%22%20result%3D%22fc%22%2F%3E%3CfeComposite%20in%3D%22fc%22%20in2%3D%22SourceAlpha%22%20operator%3D%22in%22%20result%3D%22fillLayer%22%2F%3E%3CfeFlood%20flood-color%3D%22%23F5F6F7%22%20flood-opacity%3D%220.4%22%20result%3D%22rc%22%2F%3E%3CfeComposite%20in%3D%22rc%22%20in2%3D%22ring%22%20operator%3D%22in%22%20result%3D%22ringLayer%22%2F%3E%3CfeMerge%3E%3CfeMergeNode%20in%3D%22fillLayer%22%2F%3E%3CfeMergeNode%20in%3D%22ringLayer%22%2F%3E%3C%2FfeMerge%3E%3C%2Ffilter%3E%3C%2Fsvg%3E#f");
}

/* Engagement */
.theme-noir .engagement-right p { color: rgba(245,246,247,0.80); }
.theme-noir .engagement-right strong { color: var(--blanc); }
.theme-noir .engagement-right em { color: var(--argent); font-style: normal; }
.theme-noir .engagement-tags li {
  color: var(--gris-clair);
  border: 1px solid var(--filet);
  background: transparent;
}
/* L'anneau vient de box-shadow dans main.css : il est réaffirmé ici
   en argent, sans dépendre de la composition de tokens. */
.theme-noir .engagement-avatar {
  border: 3px solid var(--noir-2);
  box-shadow: 0 0 0 1px var(--argent);
  filter: grayscale(1);
}

/* Boutons génériques : plein argent pour l'action principale,
   contour fin pour la secondaire. Texte noir sur argent : 12.11:1. */
.theme-noir .btn-primary,
.theme-noir .hero-actions .btn-primary {
  background: var(--argent);
  color: var(--noir);
}
.theme-noir .btn-primary:hover,
.theme-noir .hero-actions .btn-primary:hover {
  background: var(--argent-hi);
  color: var(--noir);
  transform: translateY(-1px);
}
.theme-noir .btn-primary:active { transform: scale(0.98); }
.theme-noir .btn-outline,
.theme-noir .hero-actions .btn-outline {
  border: 1px solid var(--filet-fort);
  color: var(--blanc);
  background: transparent;
}
.theme-noir .btn-outline:hover,
.theme-noir .hero-actions .btn-outline:hover {
  border-color: var(--argent);
  background: rgba(200,204,208,0.10);
  color: var(--blanc);
}

/* Devis.
   La V5 posait un panneau autour du formulaire ; repris tel quel sur
   fond noir, ce cadre devenait un grand rectangle sans marge interne,
   collé à son contenu et flottant au milieu d'une section vide. Le
   cadre est supprimé : le formulaire respire directement sur le noir,
   la barre de progression le coiffe et un filet unique la sépare des
   étapes. Une seule surface au lieu de deux imbriquées. */
.theme-noir .wizard-outer {
  max-width: 60rem;
  background: transparent;
  border: 0;
}
.theme-noir .wizard-progress {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--filet);
  border-radius: 0;
  padding: 0 0 1.5rem;
  margin-bottom: 2.75rem;
}
.theme-noir .wizard-panel {
  background: transparent;
  border: 0;
  padding: 0;
}
/* Les etapes se remplacent dans le meme espace : la transition entre
   dans le sens de lecture, sans deplacement vertical qui ferait
   sauter la page. */
.theme-noir .wizard-panel.is-active {
  animation: wizardIn 0.26s var(--ease-noir) both;
}
@keyframes wizardIn {
  from { opacity: 0; transform: translate3d(10px, 0, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .theme-noir .wizard-panel.is-active { animation: none; }
}
.theme-noir .wizard-q { font-family: var(--font); }
.theme-noir .wizard-illus { color: var(--argent-lo); }
.theme-noir .wp-num {
  background: transparent;
  border: 1px solid var(--filet-fort);
  color: var(--gris-clair);
}
.theme-noir .wp-num.is-active { background: var(--argent); border-color: var(--argent); color: var(--noir); }
.theme-noir .wp-num.is-done { background: transparent; border-color: var(--argent); color: var(--argent); }
.theme-noir .wp-label { color: var(--gris-clair); }
.theme-noir .wp-label.is-active { color: var(--blanc); }

/* .goal-pill est figé en 999px dans main.css, .ac-btn suit --radius-sm
   (donc 0 ici) : deux contrôles de sélection voisins ne peuvent pas
   porter deux rayons. La pilule reste réservée aux vraies actions
   (.btn, nav-cta, hero-cta), les sélections passent en angles vifs. */
.theme-noir .ac-btn,
.theme-noir .goal-pill {
  background: var(--noir-3);
  border: 1px solid var(--filet);
  border-radius: 0;
  color: rgba(245,246,247,0.82);
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
@media (hover: hover) and (pointer: fine) {
  .theme-noir .ac-btn:hover,
  .theme-noir .goal-pill:hover { border-color: var(--filet-fort); color: var(--blanc); }
}
.theme-noir .ac-btn.is-selected,
.theme-noir .goal-pill:has(input:checked) {
  background: var(--argent);
  border-color: var(--argent);
  color: var(--noir);
}
.theme-noir .form-field label { color: var(--gris-clair); }
.theme-noir .form-field input,
.theme-noir .form-field textarea,
.theme-noir .form-field select {
  background: var(--noir-3);
  border: 1px solid var(--filet);
  color: var(--blanc);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.theme-noir .form-field input::placeholder,
.theme-noir .form-field textarea::placeholder { color: var(--argent-lo); }
.theme-noir .form-field input:focus,
.theme-noir .form-field textarea:focus,
.theme-noir .form-field select:focus {
  border-color: var(--argent);
  background: var(--noir-2);
  outline: none;
}
.theme-noir .form-field input:focus-visible,
.theme-noir .form-field textarea:focus-visible,
.theme-noir .form-field select:focus-visible {
  outline: 2px solid var(--argent);
  outline-offset: 2px;
}

/* FAQ */
.theme-noir .faq-list details {
  background: transparent;
  border-bottom: 1px solid var(--filet);
}
.theme-noir .faq-list summary { color: var(--blanc); }
.theme-noir .faq-answer p { color: var(--gris-clair); }

/* Contact */
.theme-noir .contact-band { background: transparent; }
.theme-noir .contact-intro { color: var(--gris-clair); }
.theme-noir .contact-link {
  background: var(--noir-2);
  border: 1px solid var(--filet);
  color: var(--blanc);
}
.theme-noir .contact-link svg { color: var(--argent); }
.theme-noir .contact-link strong { color: var(--blanc); }
.theme-noir .contact-link em { color: var(--gris-clair); font-style: normal; }
@media (hover: hover) and (pointer: fine) {
  .theme-noir .contact-link:hover { border-color: var(--argent); transform: translateY(-2px); }
}

/* Footer */
.theme-noir #footer { background: var(--noir); border-top: 1px solid var(--filet); }
.theme-noir .footer-tagline,
.theme-noir .footer-legal { color: var(--gris-clair); }
.theme-noir .footer-nav a,
.theme-noir .footer-legal-links a { color: var(--gris-clair); }
.theme-noir .footer-nav a:hover,
.theme-noir .footer-legal-links a:hover { color: var(--blanc); }
.theme-noir .footer-logo .logo-fallback {
  font-family: var(--font);
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  color: var(--blanc);
}

/* Skip link : doit rester lisible une fois au focus. */
.theme-noir .skip-link { background: var(--argent); color: var(--noir); }

/* Sur-titres. Le site n'a plus qu'une famille : ce qui detache
   ces petits labels du reste de la page, c'est la chasse et la
   graisse, pas un second dessin. 0.22em de tracking et un 600 les
   font lire comme un marquage technique a 0.65rem sur noir mat,
   sans peser autant que le 700 de la V5. */
.theme-noir .section-eyebrow,
.theme-noir .identite-eyebrow,
.theme-noir .ms-label {
  font-weight: 600;
  letter-spacing: 0.22em;
}

/* ── Sections héritées de la V5 kaki ──────────────────────────
   main.css cible ces éléments par identifiant (#identite,
   #engagement, #faq) avec des valeurs kaki écrites en dur : le
   remap de tokens ne peut pas les atteindre, une classe pèse moins
   qu'un identifiant. On les reprend donc ici à la même
   spécificité. Ces trois sections vivent sur methodologie.html. */
.theme-noir #identite .identite-eyebrow,
.theme-noir #identite .ic-row-num,
.theme-noir #engagement .section-eyebrow { color: var(--argent-lo); }
.theme-noir #identite .identite-big span,
.theme-noir #engagement .engagement-right p em { color: var(--argent); }
.theme-noir #identite .identite-big,
.theme-noir #identite .ic-row-content strong,
.theme-noir #engagement .engagement-left h2,
.theme-noir #engagement .engagement-right p strong { color: var(--blanc); }
.theme-noir #identite .identite-desc,
.theme-noir #identite .ic-row-content p,
.theme-noir #engagement .engagement-right p { color: var(--gris-clair); }
.theme-noir #identite .identite-ing { color: var(--argent-lo); border-top-color: var(--filet); }
.theme-noir #identite .ic-row { border-top-color: var(--filet); }
.theme-noir #identite .ic-row:last-child { border-bottom-color: var(--filet); }
/* Décor de fond de la section engagement : deux cercles kaki. */
.theme-noir #engagement::before,
.theme-noir #engagement::after { border-color: var(--filet); }

/* FAQ en cartes : filets argent, pas de vert au dépliage. */
.theme-noir #faq .faq-list details {
  border-color: var(--filet);
  background: transparent;
}
.theme-noir #faq .faq-list details:last-child { border-bottom-color: var(--filet); }
.theme-noir #faq .faq-list details:hover,
.theme-noir #faq .faq-list details[open] { background: rgba(200,204,208,0.05); }
.theme-noir #faq .faq-list details[open] { border-color: var(--filet-fort); }
.theme-noir #faq .faq-list summary,
.theme-noir #faq .faq-list details[open] summary { color: var(--blanc); }
.theme-noir #faq .faq-list summary::after { color: var(--argent); }
.theme-noir #faq .faq-answer { color: var(--gris-clair); }

/* Étape 06 : le badge de durée du panneau final passe en argent. */
.theme-noir .ms-item--finale .ms-duration {
  border-color: var(--filet-fort);
  background: rgba(200,204,208,0.08);
  color: var(--argent);
}

/* En capitales et avec 0.04em de chasse, « INTERLOCUTEUR. » mesure
   385px à 2.6rem : plus large qu'un écran de 375. Le mot ne peut pas
   se couper, la taille suit donc la largeur. La V5 kaki n'est pas
   concernée, son titre n'est pas en capitales. */
@media (max-width: 768px) {
  .theme-noir .identite-big { font-size: clamp(1.85rem, 8vw, 2.6rem); }
}

/* ── 9. Réglages mobiles des composants nouveaux ──────────── */
@media (max-width: 767px) {
  .studio-title { margin-bottom: 2.25rem; }
  .studio-grid { gap: 2.5rem; }
  .theme-noir .hero-inner { padding: 5.5rem var(--px) 3.5rem; }
  .theme-noir .hero-sub { font-size: 0.9rem; }
}

/* ── 10. Révélation au scroll des tuiles ──────────────────── */
/* .reveal / .visible sont posées par js/main.js (IntersectionObserver).
   Le décalage raconte la lecture de gauche à droite ; il reste sous
   150ms au total pour ne jamais retarder la perception. */
.studio-tile:nth-child(1) { transition-delay: 0.04s; }
.studio-tile:nth-child(2) { transition-delay: 0.10s; }
.studio-tile:nth-child(3) { transition-delay: 0.16s; }

/* Garde-fou descendantes : le segment en italique simulée porte des
   jambages (p de « prêt », « pour »). Le padding réserve la place,
   sans quoi background-clip: text les rogne. */
.theme-noir #hero-title em { padding-bottom: 0.1em; }

/* ── 11. Retours de formulaire ────────────────────────────── */
/* main.css les habille en panneaux clairs (vert pâle / rose pâle),
   hérités de la V5. Sur fond noir ils cassaient le thème et, pour
   le succès, le titre passait en blanc sur blanc (1.01:1, invisible).
   Repris ici en surfaces sombres.
   Le rouge est la seule teinte hors palette de la page : un état
   d'erreur ne doit pas être signalé par la seule mise en forme
   neutre. Il reste doublé par le texte, jamais porté par la couleur
   seule. #FF8B8B mesure 7.54:1 sur --noir-3. */
.theme-noir .form-success {
  background: var(--noir-2);
  border: 1px solid var(--filet-fort);
}
.theme-noir .form-success svg   { color: var(--argent); }
.theme-noir .form-success h3    { color: var(--blanc); }
.theme-noir .form-success p     { color: var(--gris-clair); }

.theme-noir .form-error {
  background: var(--noir-3);
  border: 1px solid rgba(255,139,139,0.42);
  color: #FF8B8B;
}
.theme-noir .form-error a { color: var(--blanc); text-decoration: underline; }

/* ── 12. Cibles tactiles (WCAG 2.2 - 2.5.8) ───────────────── */
/* Les liens du pied de page mesuraient 20 à 22px de haut, sous le
   minimum de 24px. Ce sont des liens de navigation groupés, pas des
   liens en pleine phrase : l'exception « inline » ne s'applique pas. */
.theme-noir .footer-nav a,
.theme-noir .footer-legal-links a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}