/* ════════════════════════════════════════════════════════════════════════
   BRAIN TO FIELD — « LA PRESSE »
   Direction artistique du 28/10/2026, en noir et blanc strict.

   Leur mot-symbole est une Didone grasse italique, noire sur blanc, et
   c'est TOUT ce que la marque possède : aucune couleur, aucune photo,
   aucune réalisation publiable (les clients sont sous NDA). Le site est
   donc composé comme une page de presse — c'est le seul registre où le
   noir et blanc n'est pas une privation mais une matière.

   Ce qui empêche le noir et blanc d'être fade, et qui est la décision
   centrale de cette charte :
     · LE GRAIN. Une trame fine sur toute la page. Sans elle, deux aplats
       de blanc et de noir sont plats ; avec elle, c'est du papier.
     · L'INVERSION PLEINE PAGE. Les sections alternent encre et papier,
       bord à bord, sans transition douce. C'est la seule dramaturgie
       disponible quand on n'a pas de couleur — alors on s'en sert fort.
     · LE MÉLANGE « DIFFERENCE ». L'en-tête et le fil sont blancs en
       mode difference : ils s'inversent tout seuls selon ce qui passe
       derrière. Aucun script, et l'effet se recalcule à chaque pixel
       de défilement.
     · L'ÉCHELLE. Un affichage énorme contre un courant serré. Un
       écart de 1 à 8 entre le plus grand et le plus petit palier.

   TOUT CE QUI EST ICI EST DANS LA CHARTE. Aucune valeur improvisée.
   ════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── valeurs (il n'y a pas de couleurs : c'est la règle) ───────────── */
  --papier:#FFFFFF;  --creux:#F2F2F2;  --trait:#E3E3E3;
  --gris-faible:#767676;  --gris-doux:#444444;  --encre:#0A0A0A;
  --nuit:#0A0A0A;  --trait-nuit:#2B2B2B;  --nuit-faible:#8A8A8A;  --nuit-douce:#B0B0B0;

  /* ── espacement : 60 % d'écart minimum entre deux voisines ─────────── */
  --xs:6px; --s:10px; --m:16px; --l:26px; --xl:44px; --xxl:72px; --xxxl:120px;

  /* ── type ──────────────────────────────────────────────────────────── */
  --aff:clamp(3.4rem,11vw,10rem);
  --t1:clamp(2.2rem,5.6vw,4.6rem);
  --t2:clamp(1.4rem,2.6vw,2.1rem);
  --corps:clamp(1rem,1.05vw,1.0625rem);
  --appui:.9375rem;  --meta:.75rem;
  --sans:Montserrat,"Helvetica Neue",Arial,sans-serif;
  /* Une seule famille sur tout le site (30/10/2026). La variable garde son
     nom : elle désigne le RÔLE d'affichage, pas la fonte. Les règles qui
     l'emploient gardent leur italique et leur 900 — seule la famille change.
     Le mot-symbole n'est pas concerné : c'est un tracé SVG, pas du texte. */
  --aff-f:Montserrat,"Helvetica Neue",Arial,sans-serif;

  --entree:cubic-bezier(.16,1,.3,1);
  --sortie:cubic-bezier(.4,0,1,1);
  --rail:30px;
  --bande:min(1460px,100% - var(--l) * 2);
}
@media(max-width:860px){ :root{ --rail:14px } }

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--papier); color:var(--encre);
  font-family:var(--sans); font-size:var(--corps); line-height:1.68;
  letter-spacing:-.002em; word-spacing:.018em;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3{margin:0;font-weight:400;text-wrap:balance}
p{margin:0}
img,svg{max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.saut{position:absolute;left:-9999px;top:0;background:var(--encre);color:var(--papier);padding:var(--s) var(--m);z-index:200}
.saut:focus{left:var(--m);top:var(--m)}

/* ── LE GRAIN — la décision qui empêche le noir et blanc d'être plat ─── */
.grain{
  position:fixed; inset:0; z-index:90; pointer-events:none;
  opacity:.5; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='.42'/%3E%3C/svg%3E");
}

.wrap{width:var(--bande);margin-inline:auto;padding-left:var(--rail)}
.t-aff{font-family:var(--aff-f);font-weight:700;font-size:var(--aff);line-height:1.02;letter-spacing:-.028em;word-spacing:.02em}
.t1{font-family:var(--aff-f);font-weight:700;font-size:var(--t1);line-height:1.08;letter-spacing:-.028em;word-spacing:.02em}
.t2{font-family:var(--aff-f);font-weight:700;font-size:var(--t2);line-height:1.2;letter-spacing:-.02em;word-spacing:.02em}
.sur{font-size:var(--meta);text-transform:uppercase;letter-spacing:.16em;font-weight:600}
.appui{font-size:var(--appui);line-height:1.55;color:var(--gris-doux)}
.lede{font-size:clamp(1.05rem,1.6vw,1.3rem);line-height:1.5;max-width:46ch}
.mesure{max-width:62ch}
.mesure p+p{margin-top:var(--m)}

/* ════ L'INVERSION ════════════════════════════════════════════════════
   Les sections alternent bord à bord. « .encre » n'est pas une variante
   décorative : c'est le seul contraste fort dont on dispose sans couleur,
   et la page s'en sert comme d'une ponctuation.                        */
section{position:relative;padding:var(--xxxl) 0}
.encre{background:var(--nuit);color:var(--papier)}
.encre .appui{color:var(--nuit-douce)}
.encre .sur{color:var(--nuit-faible)}
.encre .filet{background:var(--trait-nuit)}
.encre a{color:var(--papier)}

/* ════ EN-TÊTE ════════════════════════════════════════════════════════
   Blanc en mode « difference » : il devient noir sur le papier et blanc
   sur l'encre, tout seul, sans une ligne de script et sans jamais se
   tromper d'un pixel au défilement.                                    */
.top{
  position:fixed; inset:0 0 auto; z-index:100;
  mix-blend-mode:difference; color:#fff;
  /* 28 px en haut au lieu de 16 : le nom collait au bord de la fenêtre
     (client, 01/11/2026). Le bas garde ses 16 px. */
  padding:28px 0 var(--m); pointer-events:none;
}
.top .wrap{padding-right:calc(var(--rail) + var(--l))}
/* Le nom à gauche, le menu groupé à droite. L'avoir réparti de bout en bout
   écartait trop les entrées : un menu se lit comme un bloc, pas comme une
   règle graduée. */
.top__rang{display:flex;align-items:center;gap:var(--l);min-height:30px}
.top__cale{display:none}
.nav{margin-left:auto;display:flex;align-items:center;gap:var(--xl)}
.top a{pointer-events:auto;text-decoration:none}
.top__marque{display:block;width:clamp(116px,13vw,168px)}
.top__marque svg{display:block;width:100%;height:auto;color:#fff}
/* Le logo de l'en-tête porte sa mention dessous. Elle est calée sur la
   LARGEUR DU LOGO (em d'un corps proportionnel), pas sur une valeur fixe :
   le logo rétrécit sur téléphone, la mention doit suivre ou elle dépasse. */
.top__sous{display:block;margin-top:.5em;
  /* 8 px, fixe : le milieu entre les 9 px du premier jet et les 7 px qui
     étaient trop petits. Cette ligne est le SEUL endroit visible de la page
     où l'on lit ce que fait l'agence — les autres occurrences sont des
     métadonnées — donc elle ne redescendra pas plus bas. */
  /* Approche resserrée depuis le passage à l'Archivo variable : elle rend
     plus large que les instances statiques, et la mention débordait du
     logo de 17 px sur téléphone. */
  font-size:.5rem; letter-spacing:.12em;
  text-transform:uppercase; font-weight:700; white-space:nowrap;
  /* Gris, pas blanc : la mention accompagne le nom, elle ne le concurrence
     pas. L'en-tête est en « mix-blend-mode:difference », donc cette valeur
     devient son complément sur fond clair — gris dans les deux cas. */
  color:#9B9B9B}
.nav a{font-size:var(--meta);text-transform:uppercase;letter-spacing:.16em;font-weight:600;position:relative;padding-block:var(--xs)}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .4s var(--entree)}
.nav a:hover::after,.nav a:focus-visible::after{transform:scaleX(1)}
/* Sur mobile, le nom centré et le bouton se rencontraient : mesuré, ils se
   chevauchaient de 42 px à 375 px de large. On réduit les deux plutôt que de
   renoncer au centrage. Ce bloc doit rester APRÈS les règles de base de
   .top__marque et .nav a — sinon elles le réécrivent, à spécificité égale. */
@media(max-width:720px){
  /* La barre ne porte plus que le nom et le bouton du menu. « Nous écrire »
     n'a pas disparu : elle est la dernière entrée du panneau, où elle a la
     place d'être lisible au lieu d'être rognée en « ÉCRIRE ». */
  .js-menu .nav{display:none}
  .nav{justify-content:flex-end;gap:var(--m)}
  .nav a{font-size:.6875rem;letter-spacing:.09em}
  .nav__long{display:none}
  .top__marque{width:clamp(118px,31vw,126px)}  /* calé sur la mention à 8 px, approche .12em */
  .js-menu .burger{display:flex}    /* le script a pris la main */
}

/* ── LE BOUTON DU MENU ────────────────────────────────────────────────
   Deux traits qui se croisent. Pas de troisième : avec deux, l'ouverture
   et la fermeture sont le même geste, et la croix n'a rien à cacher.
   « currentColor » pour qu'il s'inverse avec le reste de l'en-tête. */
.burger{
  display:none; pointer-events:auto; margin-left:var(--s); position:relative;
  width:30px; height:30px; padding:0; border:0; background:none;
  color:inherit; cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:7px;
}
.burger__t{
  display:block; width:22px; height:1.5px; background:currentColor;
  transition:transform .4s var(--entree);
}
.burger[aria-expanded="true"] .burger__t:first-child{transform:translateY(4.25px) rotate(45deg)}
.burger[aria-expanded="true"] .burger__t:last-child {transform:translateY(-4.25px) rotate(-45deg)}
/* La cible du doigt fait 44 px, le dessin en fait 30. Un pseudo-élément
   plutôt qu'un bouton plus large : la zone grandit sans décaler les traits,
   donc la marge droite reste alignée sur celle du nom à gauche. */
.burger::after{content:"";position:absolute;inset:-7px}
.burger:focus-visible{outline:2px solid currentColor;outline-offset:3px}

/* ⚠ CES DEUX RÈGLES DOIVENT RESTER APRÈS « .burger », pas dans la requête
   média plus haut. À spécificité égale c'est l'ORDRE qui tranche : écrites
   avant, la règle de base les réécrivait et le bouton restait collé au nom,
   à 193 px du bord au lieu de 40. Ce projet s'est déjà fait prendre par là
   sur « .top__marque ».

   L'en-tête gardait 40 px de marge à droite, héritage du temps où le menu
   s'y alignait : le bouton flottait loin du bord, bien plus rentré que le
   nom ne l'est à gauche. Les deux marges sont désormais identiques. */
@media(max-width:720px){
  .top .wrap{padding-right:var(--rail)}
  .burger{margin-left:auto}
}

/* ── LE PANNEAU ───────────────────────────────────────────────────────
   Pleine page, encre sur papier inversés : c'est l'inversion qui sert de
   dramaturgie partout ailleurs sur ce site, le menu ne fait pas exception.
   L'en-tête repasse au-dessus et quitte le mode « difference » le temps de
   l'ouverture — sinon son propre bouton passerait sous le panneau. */
.menu{
  position:fixed; inset:0; z-index:150;
  background:var(--nuit); color:var(--papier);
  display:grid; align-content:center;
  padding:var(--xxxl) var(--rail) var(--xxl);
  opacity:0; transition:opacity .34s var(--entree);
}
.menu[hidden]{display:none}
.menu.la{opacity:1}
.menu__nav{display:flex;flex-direction:column}
/* Ce panneau EST la navigation : il parle la même langue que le menu du
   bureau — capitales, approche large — simplement à l'échelle du doigt. */
.menu__nav a{
  font-family:var(--sans); font-weight:700;
  font-size:clamp(1rem,4.4vw,1.25rem); line-height:1.2;
  text-transform:uppercase; letter-spacing:.12em;
  color:inherit; text-decoration:none;
  padding:var(--l) 0; border-bottom:1px solid var(--trait-nuit);
}
.menu__nav a:first-child{border-top:1px solid var(--trait-nuit)}
.menu__nav a:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.js-menu-ouvert .top{z-index:200; mix-blend-mode:normal}
.js-menu-ouvert{overflow:hidden}
@media(prefers-reduced-motion:reduce){
  .menu{transition:none}
  .burger__t{transition:none}
}

/* ════ LE FIL — repère de traversée, lui aussi en « difference » ══════ */
.fil{position:fixed;left:var(--rail);top:0;bottom:0;width:1px;z-index:95;
  mix-blend-mode:difference;background:rgba(255,255,255,.26);pointer-events:none}
.fil b{display:block;width:3px;margin-left:-1px;height:100vh;background:#fff;
  transform:scaleY(0);transform-origin:top;will-change:transform}
html:not(.js-anim) .fil b{display:none}

/* ════ HÉROS ══════════════════════════════════════════════════════════
   Le mot-symbole en trois morceaux. Au défilement, « Brain » descend à
   gauche et « Field » monte à droite, sur la pente de leur italique —
   la marque s'écarte pour laisser passer le propos. C'est la seule
   animation que ce logo-là peut faire, et elle n'est possible que parce
   qu'il a un mot-pivot au milieu.                                      */
/* Le noir du héros est celui de la vidéo elle-même — mesuré sur ses coins,
   #040404 pour celle du 28/10 au soir : les bandes de part et d'autre du
   film se fondent dans la section et on ne voit aucune arête, quelle que
   soit la largeur. À re-mesurer si la vidéo change. */
/* Le héros ne porte plus que le film et sa signature. Le « padding:0 » est
   EXPLICITE : retirer la déclaration ne la neutralise pas, elle retombe sur
   le padding générique des sections — 120 px en haut comme en bas, soit une
   bande noire vide de part et d'autre de la vidéo. */
.heros{background:#040404;color:var(--papier);overflow:hidden;padding:0}
.heros__film{position:relative;width:100%;will-change:transform}
.heros__video,.heros__repli{display:block;width:100%;height:auto}
.heros__repli{display:none}
/* ── LA SIGNATURE SOUS LE MOT-SYMBOLE DU FILM ─────────────────────────
   Le lettrage est DANS la vidéo, pas dans le HTML : on ne peut donc pas
   l'attacher à un élément, il faut le viser. Les pourcentages ci-dessous
   sont MESURÉS sur l'image du poster, qui a le cadrage du film :
   le lettrage occupe 43,89 % → 56,20 % en hauteur, et son centre est à
   48,91 % en largeur (la vidéo avait été calée à 48,96 %, ça recoupe).

   La vidéo est en « width:100%; height:auto » : elle garde donc ses
   proportions à toutes les largeurs, et ces pourcentages tiennent sans
   point de rupture. La légende est à l'intérieur de .heros__film pour
   dériver avec lui au défilement — sinon elle décrocherait du lettrage. */
.film__signature{
  /* L'écart se compte en « em », pas en pourcentage de la hauteur du film :
     le corps du texte a un plancher (il doit rester lisible), donc à 375 px
     un écart proportionnel tombait à 7 px et la ligne venait toucher le
     lettrage. En em, il vaut toujours une ligne et demie. */
  position:absolute; top:calc(56.2% + 1.4em); left:48.91%; transform:translateX(-50%);
  margin:0; width:max-content; max-width:82vw; text-align:center;
  font-family:var(--aff-f); font-weight:400;
  font-size:clamp(.65rem,1.45vw,1.15rem); line-height:1.2;
  color:var(--papier); text-shadow:0 1px 14px rgba(0,0,0,.55);
  pointer-events:none;
}



/* ════ TÊTE DE SECTION ════════════════════════════════════════════════ */
.tete{display:grid;grid-template-columns:minmax(0,210px) minmax(0,1fr);
  gap:var(--m) var(--xl);margin-bottom:var(--xxl);align-items:start}
.tete .barre{grid-column:1;grid-row:1}
.tete .sur{grid-column:1;grid-row:2}
.tete h2{grid-column:2;grid-row:1 / span 2;margin:0}
@media(max-width:860px){
  .tete{grid-template-columns:1fr;gap:var(--m)}
  .tete .barre,.tete .sur,.tete h2{grid-column:1;grid-row:auto}
}
.tete .sur{color:var(--gris-faible)}
.filet{height:1px;background:var(--trait);transform-origin:left;width:100%}
.js-anim .filet{transform:scaleX(0)}
.barre{height:9px;background:currentColor;width:clamp(72px,9vw,128px);transform-origin:left}
.js-anim .barre{transform:scaleX(0)}

/* ════ MÉTIERS — quatre terrains ══════════════════════════════════════
   Au survol, la fiche s'inverse en bloc. Sans couleur, l'inversion EST
   l'état de survol : il n'y a rien d'autre à faire bouger qui se voie
   autant, et c'est instantané.                                         */
.metiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--trait)}
@media(max-width:1020px){ .metiers{grid-template-columns:repeat(2,minmax(0,1fr))}
  .metier:nth-child(3n){border-right:1px solid var(--trait)}
  .metier:nth-child(2n){border-right:0} }
@media(max-width:700px){ .metiers{grid-template-columns:1fr}
  .metier,.metier:nth-child(2n),.metier:nth-child(3n){border-right:0} }
.metier{position:relative;background:var(--papier);padding:var(--l) var(--l) var(--xl);
  overflow:hidden;border-bottom:1px solid var(--trait);border-right:1px solid var(--trait);
  transition:background .45s var(--entree),color .45s var(--entree)}
.metier:nth-child(3n){border-right:0}
@media(max-width:760px){ .metier{border-right:0} }
.metier__no{position:absolute;right:-.04em;bottom:-.26em;font-family:var(--aff-f);
  font-weight:700;letter-spacing:-.03em;font-size:clamp(2.6rem,4.4vw,3.8rem);line-height:1;
  color:var(--creux);pointer-events:none;user-select:none;
  transition:color .45s var(--entree),transform .9s var(--entree);will-change:transform}
.metier__quoi{position:relative;z-index:1}
.metier h3{font-family:var(--aff-f);font-weight:600;letter-spacing:-.012em;
  font-size:clamp(1.15rem,1.9vw,1.5rem);line-height:1.12;margin-bottom:var(--l);
  padding-bottom:var(--m);max-width:22ch;position:relative;margin-bottom:0}
.metier h3::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;transform:scaleX(.26);transform-origin:left;
  transition:transform .55s var(--entree)}
.metier p{max-width:34ch}
.metier .sur{color:var(--gris-faible);display:block;margin-bottom:var(--l)}

/* ── LES MÉTIERS : LE TITRE, ET RIEN D'AUTRE ──────────────────────────
   Le détail de chaque chantier a été retiré le 30/10/2026 à la demande du
   client — pas masqué : retiré du HTML, sinon il resterait lisible dans le
   source et dans l'index des moteurs. Les fiches ne portent plus que leur
   titre et leur numéro, sur écran comme sur téléphone.

   Le trait sous le titre ne se déploie donc plus au survol : il n'annonce
   plus rien à révéler. Il est posé à sa longueur définitive. */
.metier h3::after{transform:scaleX(1)}
/* ════ MÉTIERS — le schéma de travail ═══════════════════════════════
   Un fil traverse la page de gauche à droite, du brief au reporting
   mensuel ; six jalons y sont posés. Les titres alternent au-dessus et
   au-dessous du fil — chaque jalon a ainsi deux colonnes de large pour
   respirer, et l'œil lit un rythme, pas un tableau. Pas de flèches : le
   fil et la suite des numéros suffisent à donner le sens (client, le
   01/11/2026). Le fil se trace à l'arrivée dans le cadre (data-barre).  */
.parcours{position:relative; padding:var(--xl) 0 var(--xl)}
.parcours__ligne{position:absolute; left:0; right:0; top:50%; height:1px; background:var(--encre)}
.parcours__jalons{
  list-style:none; margin:0; padding:0; position:relative;
  display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); column-gap:var(--m);
}
.jalon{
  position:relative; display:grid; grid-template-rows:1fr 13px 1fr; align-items:end;
  min-height:clamp(300px,34vw,420px);
}
.jalon__point{
  grid-row:2; width:13px; height:13px; border-radius:50%;
  background:var(--papier); border:1px solid var(--encre);
  box-shadow:0 0 0 6px var(--papier);
  transition:background .4s var(--entree), transform .5s var(--entree);
}
.jalon:hover .jalon__point{background:var(--encre); transform:scale(1.25)}
.jalon__quoi{position:relative; z-index:1; max-width:17ch}
/* Impairs : au-dessus du fil, calés sur lui. Pairs : au-dessous. */
.jalon:nth-child(odd)  .jalon__quoi{grid-row:1; align-self:end;   padding-bottom:var(--l)}
.jalon:nth-child(even) .jalon__quoi{grid-row:3; align-self:start; padding-top:var(--l)}
.jalon__no{
  display:block; font-family:var(--aff-f); font-weight:700; letter-spacing:-.03em;
  font-size:clamp(2.4rem,4vw,3.6rem); line-height:.9; color:#DDDDDD;
  margin-bottom:var(--s); transition:color .45s var(--entree);
}
.jalon:hover .jalon__no{color:var(--encre)}
.jalon h3{
  margin:0; font-family:var(--aff-f); font-weight:600; letter-spacing:-.012em;
  font-size:clamp(1rem,1.45vw,1.3rem); line-height:1.15;
}
/* Les deux bornes du fil, en petites capitales : le départ à gauche
   au-dessus, l'arrivée à droite au-dessous. */
.parcours__borne{
  position:absolute; font-size:var(--meta); font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gris-faible); white-space:nowrap;
}
.parcours__borne--depart{left:0; top:0}
.parcours__borne--arrivee{right:0; bottom:0}

@media(max-width:900px){
  /* Le fil se dresse : à gauche, les jalons descendent le long. */
  .parcours{padding:var(--l) 0 var(--l) 0}
  .parcours__ligne{left:6px; right:auto; top:0; bottom:0; width:1px; height:auto; transform-origin:top}
  .parcours__jalons{grid-template-columns:1fr; row-gap:var(--xl); padding:var(--xl) 0}
  .jalon{
    min-height:0; grid-template-rows:none; grid-template-columns:13px minmax(0,1fr);
    column-gap:var(--l); align-items:start;
  }
  .jalon__point{grid-column:1; grid-row:1; margin-top:.35em}
  .jalon:nth-child(odd) .jalon__quoi,.jalon:nth-child(even) .jalon__quoi{
    grid-column:2; grid-row:1; padding:0; max-width:none}
  .jalon__no{font-size:1.9rem; margin-bottom:var(--xs)}
  .parcours__borne{position:static; display:block; padding-left:calc(13px + var(--l))}
}
@media(hover:none){
  .jalon:hover .jalon__point{background:var(--papier); transform:none}
  .jalon:hover .jalon__no{color:#DDDDDD}
}

/* ════ MÉTHODE — trois temps, une ligne qui les traverse ══════════════ */
.trajet{position:relative;display:grid;gap:var(--xxl)}
.trajet__ligne{position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--trait-nuit);
  transform-origin:top}
.js-anim .trajet__ligne{transform:scaleY(0)}
.etape{position:relative;padding-left:clamp(56px,8vw,112px)}
.etape__no{position:absolute;left:0;top:-.14em;font-family:var(--aff-f);
  font-weight:700;letter-spacing:-.03em;font-size:clamp(2.6rem,6vw,4.6rem);line-height:1}
.etape h3{font-family:var(--aff-f);font-weight:600;letter-spacing:-.012em;
  font-size:clamp(1.4rem,2.8vw,2.1rem);line-height:1.1;margin-bottom:var(--m)}
.etape p{max-width:52ch}

/* ════ AGENCE ═════════════════════════════════════════════════════════ */
.agence{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:var(--xxl);align-items:start}
@media(max-width:860px){ .agence{grid-template-columns:1fr;gap:var(--xl)} }
.ndA{border-top:9px solid var(--encre);padding-top:var(--l)}
.ndA p{max-width:44ch;font-size:var(--appui);line-height:1.55;color:var(--gris-doux)}
.ndA b{display:block;font-family:var(--aff-f);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(1.3rem,2.4vw,1.8rem);line-height:1.1;color:var(--encre);margin-bottom:var(--m)}

/* ════ CONTACT ════════════════════════════════════════════════════════ */
.contact__grille{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--xxl)}
@media(max-width:860px){ .contact__grille{grid-template-columns:1fr;gap:var(--xl)} }
.coord{display:grid;gap:0}
.coord__bloc{border-top:1px solid var(--trait-nuit);padding:var(--l) 0}
.coord__quoi{font-size:var(--meta);text-transform:uppercase;letter-spacing:.18em;
  font-weight:700;color:var(--nuit-faible);margin-bottom:var(--s)}
.coord address{font-style:normal;line-height:1.5}
.coord a{text-decoration:none;position:relative;font-weight:500}
.coord a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--entree)}
.coord a:hover::after,.coord a:focus-visible::after{transform:scaleX(1)}
.manquant{color:var(--nuit-faible)}
.carte{margin-top:var(--xl);border:1px solid var(--trait-nuit);aspect-ratio:16/10;
  transition:clip-path 1.1s var(--entree)}
.js-anim .carte{clip-path:inset(0 0 100% 0)}
.js-anim .carte.la{clip-path:inset(0 0 0 0)}
.carte iframe{display:block;width:100%;height:100%;border:0;filter:grayscale(1) contrast(1.08)}
.itineraire{display:inline-block;margin-top:var(--m);font-size:var(--meta);
  text-transform:uppercase;letter-spacing:.16em;font-weight:700;text-decoration:none;
  border-bottom:1px solid currentColor;padding-bottom:3px}

/* ════ PIED ═══════════════════════════════════════════════════════════ */
.pied{background:var(--nuit);color:var(--papier);padding:var(--xl) 0}
/* Le filet du haut servait à séparer cette rangée du mot-symbole, retiré le
   30/10/2026 sur demande du client. Sans lui, c'est une ligne qui flottait
   sous un trait sans rien au-dessus. */
.pied__rang{display:flex;flex-wrap:wrap;gap:var(--m) var(--xl);justify-content:space-between;
  align-items:baseline}
.pied__rang a{font-size:var(--meta);text-transform:uppercase;letter-spacing:.16em;font-weight:600;text-decoration:none}
.pied small{font-size:var(--meta);letter-spacing:.1em;text-transform:uppercase;color:var(--nuit-faible)}

/* ════ SPLASH — convention maison : le logo sur son propre fond ═══════ */
.splash{position:fixed;inset:0;z-index:300;background:var(--papier);
  display:grid;place-items:center;transition:opacity .5s var(--sortie)}
.splash img{width:min(62vw,560px);height:auto}
.splash--parti{opacity:0;pointer-events:none}

/* ════ CE QUI ARRIVE AU DÉFILEMENT ════════════════════════════════════
   État de départ posé par le script seulement (.js-anim), jamais dans la
   feuille nue : sans script, la page est complète et immobile — elle
   n'attend rien pour être lisible.                                     */
.js-anim [data-vient]{opacity:0}
.js-anim [data-grille] > *{opacity:0}
.js-anim [data-coupe] > .masque{transform:translateY(105%)}
.js-anim [data-mots] .mot > i{transform:translateY(110%)}
[data-coupe]{overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
[data-coupe] > .masque{display:block;will-change:transform}
[data-mots] .mot{display:inline-block;overflow:hidden;vertical-align:top}
[data-mots] .mot > i{display:inline-block;font-style:inherit;font-weight:inherit;will-change:transform}
@media(prefers-reduced-motion:reduce){
  .js-anim [data-vient]{opacity:1}
  .js-anim [data-grille] > *{opacity:1}
  .js-anim [data-coupe] > .masque{transform:none}
  .js-anim [data-mots] .mot > i{transform:none}
  .js-anim .filet,.js-anim .barre{transform:none}
  .js-anim .trajet__ligne{transform:none}
  .js-anim .carte{clip-path:none}
  .filet,.barre,.fil b,.trajet__ligne{transform:none}
  .carte{clip-path:none}
  .metier h3::after{transform:scaleX(1)}
  .heros__video{display:none}
  .heros__repli{display:block}
  *{transition-duration:.01ms !important}
}

/* ════════════════════════════════════════════════════════════════════
   LE SAS — la page d'accueil                        refonte 01/11/2026

   Le film, et sous son mot-symbole, les quatre entrées du site sur une
   ligne. Plus de portes pleine largeur, ni de numéros, ni de flèches : le
   client les a retirées. Les entrées reprennent exactement la lettre du
   menu des pages intérieures — même corps, même approche, même soulignement
   au survol — et l'en-tête de l'accueil ne porte plus de menu.

   ⚠ LE FILM GARDE SES PROPORTIONS, et c'est la section qui le rogne. La
   signature ET les entrées sont placées à des pourcentages MESURÉS sur le
   cadrage du film (lettrage de 43,89 % à 56,20 % en hauteur, centre à
   48,91 %). Surtout pas « object-fit:cover » : il changerait la boîte de
   la vidéo et décrocherait tout du lettrage.                             */
/* « min-height » partout, pas seulement sur ordinateur : sans lui, le bas
   de l'accueil mobile laissait voir le fond blanc du document sous le pied. */
.sas-page main{position:relative; display:flex; flex-direction:column; min-height:100vh; min-height:100svh; background:#040404}
.sas-page .heros{flex:none; display:grid; place-items:center; overflow:hidden}
.sas-page .heros__film{width:100%}

/* Sur ordinateur, le film occupe toute la fenêtre : sa largeur est poussée
   jusqu'à ce qu'il soit aussi haut qu'elle (16/9), le débordement est rogné.
   Rien de tel sur téléphone : à 375 px il faudrait un film de 1443 px et le
   mot-symbole deviendrait illisible. Le mobile montre le film entier. */
@media (min-width:861px){
  .sas-page .heros{flex:1 1 auto; min-height:0}
  .sas-page .heros__film{width:max(100%, calc(100svh * 16 / 9))}
}

/* Les entrées, calées sous la signature. L'écart se compte en « em » du
   corps de la signature, comme la signature elle-même sous le lettrage :
   il vaut toujours le même nombre de lignes, quelle que soit la largeur. */
.sas{
  position:absolute; top:calc(56.2% + 6.4em); left:48.91%; transform:translateX(-50%);
  font-size:clamp(.65rem,1.45vw,1.15rem);
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:var(--xs) var(--xl); width:max-content; max-width:88vw;
}
.sas__lien{
  position:relative; display:block; padding-block:var(--xs);
  font-size:var(--meta); font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--papier); text-decoration:none; text-shadow:0 1px 14px rgba(0,0,0,.55);
  /* L'entrée : chaque lien monte, l'un après l'autre.
     ⚠ AUCUNE OPACITÉ DANS CETTE ANIMATION. Une animation en « fill-mode:
     both » garde son état de départ tant qu'elle n'a pas tourné — et elle
     ne tourne pas dans un onglet qui n'est pas peint. Un départ à 0 rendrait
     la navigation invisible pour toujours dans ce cas. Au pire, ici, un lien
     reste 10 px trop bas : décalé, mais lisible et cliquable. */
  animation:sas-entre .7s var(--entree) both, sas-appel 7s ease-in-out infinite;
  animation-delay:calc(.18s + var(--rang) * .09s), calc(1.8s + var(--rang) * 1.1s);
}
/* L'appel : à tour de rôle, chaque entrée s'allume — elle passe au blanc
   plein, prend un halo, et son trait se déroule puis se retire. Quatre
   qui clignotent ensemble, c'est une enseigne ; une à la fois, c'est une
   invitation. Au repos, les entrées sont légèrement voilées pour que
   l'allumage se voie. Le survol reprend la main et coupe l'appel.        */
@keyframes sas-appel{
  0%,100%{color:rgba(255,255,255,.72); text-shadow:0 1px 14px rgba(0,0,0,.55)}
  6%,14%{color:#fff; text-shadow:0 0 18px rgba(255,255,255,.65), 0 1px 14px rgba(0,0,0,.55)}
  22%{color:rgba(255,255,255,.72); text-shadow:0 1px 14px rgba(0,0,0,.55)}
}
.sas__lien::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:left; transition:transform .4s var(--entree);
  animation:sas-appel-trait 7s ease-in-out infinite;
  animation-delay:calc(1.8s + var(--rang) * 1.1s);
}
@keyframes sas-appel-trait{
  0%,100%{transform:scaleX(0); transform-origin:left}
  12%{transform:scaleX(1); transform-origin:left}
  12.01%{transform:scaleX(1); transform-origin:right}
  24%{transform:scaleX(0); transform-origin:right}
}
.sas__lien:hover,.sas__lien:focus-visible{
  animation:sas-entre .7s var(--entree) both; color:#fff;
  text-shadow:0 0 18px rgba(255,255,255,.65), 0 1px 14px rgba(0,0,0,.55);
}
.sas__lien:hover::after,.sas__lien:focus-visible::after{animation:none; transform:scaleX(1)}
.sas__lien:focus-visible{outline:2px solid currentColor; outline-offset:4px}
@keyframes sas-entre{
  from{transform:translateY(10px)}
  to  {transform:none}
}
@media(max-width:860px){
  /* Le film est entier mais petit : les entrées se resserrent, et peuvent
     passer sur deux lignes sans sortir du cadre. */
  .sas{top:calc(56.2% + 4.4em); gap:0 var(--s); max-width:94vw}
  .sas__lien{font-size:.625rem; letter-spacing:.09em; padding-block:2px}
}
@media(prefers-reduced-motion:reduce){
  .sas__lien,.sas__lien::after{animation:none}
  .sas__lien{color:#fff}
}
/* La mention de l'agence, en bas à gauche de la fenêtre, dans la même
   lettre grise que le pied des pages intérieures. Calée sur le rail
   gauche du site, comme le nom en haut. */
.sas__mention{
  position:absolute; left:calc(var(--rail) + var(--l)); bottom:var(--xl); z-index:2; margin:0;
  font-size:var(--meta); letter-spacing:.1em; text-transform:uppercase;
  color:var(--nuit-faible); text-shadow:0 1px 10px rgba(0,0,0,.6); pointer-events:none;
}
@media(max-width:860px){
  /* Calée sur le bord du contenu, comme le nom en haut — au rail nu, elle
     touchait le trait vertical de la page. */
  .sas__mention{left:calc((100% - var(--bande)) / 2 + var(--rail)); bottom:var(--l); font-size:.625rem}
}
/* ── TÉLÉPHONE SEULEMENT (pas la tablette) ─────────────────────────────
   Le film collait sous l'en-tête et laissait tout le bas vide. Il se
   centre dans la hauteur de l'écran, l'en-tête au-dessus, la mention en
   dessous. Le film reste entier : on ne l'agrandit pas, à 390 px le
   mot-symbole deviendrait illisible.                                     */
@media(max-width:860px){
  /* Étendu à la tablette et au téléphone en double écran le 01/11/2026. */
  .sas-page .heros{flex:1 1 auto; min-height:0; display:grid; place-items:center}
}
@media(max-width:600px){
  /* Le nom en haut, plus petit : 96 px au lieu de 118-126. La mention
     dessous suit, à 7 px, pour ne pas dépasser du logo. */
  .top__marque{width:96px}
  .top__sous{font-size:.4375rem; letter-spacing:.1em}
}

/* ── LES PAGES INTÉRIEURES ───────────────────────────────────────────
   Elles n'ont pas de film : leur en-tête doit donc porter son propre
   fond, sinon le mode « difference » la rendrait illisible sur blanc.  */
.page-interieure__haut{padding-top:calc(30px + var(--xl))}
/* L'entrée de la page courante n'est pas un lien : on ne navigue pas vers
   l'endroit où l'on est déjà. Elle reste visible, simplement atténuée. */
.nav__ici,.menu__ici{opacity:.42; cursor:default}
.nav__ici{font-size:var(--meta);text-transform:uppercase;letter-spacing:.16em;font-weight:600}
.menu__ici{font-family:var(--sans);font-weight:700;font-size:clamp(1rem,4.4vw,1.25rem);
  text-transform:uppercase;letter-spacing:.12em;padding:var(--l) 0;
  border-bottom:1px solid var(--trait-nuit)}
.menu__nav>:first-child{border-top:1px solid var(--trait-nuit)}
.retour{
  display:inline-flex; align-items:center; gap:var(--s);
  font-size:var(--meta); text-transform:uppercase; letter-spacing:.16em;
  font-weight:600; text-decoration:none; color:inherit;
  margin-bottom:var(--xl);
}
.retour__trait{width:26px; height:1px; background:currentColor; transition:width .4s var(--entree)}
.retour:hover .retour__trait,.retour:focus-visible .retour__trait{width:44px}

/* ── LE PASSAGE À LA SECTION SUIVANTE ────────────────────────────────
   En bas, à droite : c'est là qu'on regarde quand on a fini de lire, et
   la symétrie avec le retour en haut à gauche donne à la page ses deux
   issues. La dernière section n'en a pas — le générateur ne l'écrit pas,
   et le bloc vide ne laisse donc aucune marge fantôme. */
.page-interieure__bas{display:flex; justify-content:flex-end}
.page-interieure__bas:empty{display:none}
.suivante{
  display:inline-flex; align-items:center; gap:var(--s);
  text-decoration:none; color:inherit; margin-top:var(--xl);
  font-size:var(--meta); text-transform:uppercase; letter-spacing:.16em;
  font-weight:600;
}
.suivante__quoi{color:var(--gris-faible)}
.encre .suivante__quoi,.suivante__quoi.sur-nuit{color:var(--nuit-faible)}
.suivante__trait{width:26px; height:1px; background:currentColor;
                 transition:width .4s var(--entree)}
.suivante:hover .suivante__trait,.suivante:focus-visible .suivante__trait{width:44px}