/* ATELIER NORD — feuille de style
   ─────────────────────────────────────────────────────────────────────────
   Principe directeur : sur un site minimaliste, c'est la TYPOGRAPHIE qui
   porte le design, pas le décor. Le minimalisme est l'approche la plus
   exigeante — les défauts qui se cachent sur une page chargée deviennent
   criants sur une page vide. Donc : une échelle typographique stricte, un
   rythme d'espacement en multiples de 8 px, et deux polices, pas trois.

   La 3D est un décor de fond volontairement SOBRE. Quand du texte est à
   l'écran, la scène derrière doit être calme : on ne pose jamais du complexe
   sur du complexe. */

@font-face{font-family:'Geist';font-weight:400;font-display:swap;src:url('polices/Geist-wght-400.woff2') format('woff2')}
@font-face{font-family:'Geist';font-weight:500;font-display:swap;src:url('polices/Geist-wght-500.woff2') format('woff2')}
@font-face{font-family:'Geist';font-weight:700;font-display:swap;src:url('polices/Geist-wght-700.woff2') format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url('polices/Instrument-Serif-ital-wght-1-400.woff2') format('woff2')}

:root{
  /* ── Couleurs ───────────────────────────────────────────────────────
     Jamais de noir pur : sur fond parfaitement noir, le texte clair crée
     une halation qui fatigue l'œil et efface la profondeur. On part d'un
     gris très sombre légèrement chaud, et la profondeur se fait par des
     surfaces PLUS CLAIRES — en interface sombre, les ombres ne se voient
     pas, c'est la lumière qui hiérarchise. */
  --fond:#121310;          /* fond de page */
  --surface:#1B1C17;       /* un cran plus haut */
  --surface-2:#24251E;     /* deux crans plus haut */

  --craie:#EDEBE3;         /* texte principal — 14,8:1 */
  --craie-2:#B3B2A6;       /* texte secondaire — 8,6:1 */
  --craie-3:#8A8B80;       /* texte tertiaire — 5,2:1 (était 3,6:1 : échec) */
  --laiton:#C89A57;        /* accent — 6,9:1 */
  --laiton-clair:#DDB57C;
  --trait:rgba(237,235,227,.12);

  /* ── Typographie ────────────────────────────────────────────────────
     Deux familles seulement. Une troisième police brouille la lecture et
     dilue l'identité. Le mono a été retiré : ses libellés sont repris en
     Geist avec un interlettrage large, ce qui économise aussi un fichier. */
  --sans:'Geist',-apple-system,'Segoe UI',sans-serif;
  --serif:'Instrument Serif',Georgia,serif;

  /* Échelle modulaire, raison 1,25 (tierce majeure). Des tailles tirées
     d'une même suite s'accordent entre elles ; des valeurs choisies au cas
     par cas se remarquent sans qu'on sache pourquoi. */
  --t-xs:.8125rem;   /* 13 px — libellés en capitales UNIQUEMENT */
  --t-sm:1rem;       /* 16 px — plancher absolu du texte courant */
  --t-base:1.0625rem;/* 17 px — texte courant */
  --t-md:1.3125rem;  /* 21 px */
  --t-lg:1.625rem;   /* 26 px */
  --t-xl:2.0625rem;  /* 33 px */
  --t-2xl:2.5625rem; /* 41 px */
  --t-3xl:3.1875rem; /* 51 px */

  /* ── Espacement : multiples de 8 px ─────────────────────────────────
     Un rythme unique évite les écarts « presque pareils » qui donnent
     l'impression que la page est mal assemblée. */
  --e1:.5rem; --e2:1rem; --e3:1.5rem; --e4:2rem;
  --e5:3rem;  --e6:4rem; --e7:6rem;   --e8:8rem;

  --marge:clamp(1.5rem,5vw,5rem);
  --mesure:66ch;           /* longueur de ligne visée : ~66 caractères */
  --ease:cubic-bezier(.16,.84,.32,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--fond)}
body{margin:0;background:transparent;color:var(--craie);font-family:var(--sans);
  font-size:var(--t-base);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--laiton);outline-offset:4px}
[id]{scroll-margin-top:6.5rem}

/* Libellé en capitales : la seule place où l'on descend sous 16 px, parce
   qu'il ne s'agit pas de texte à lire mais d'une étiquette à repérer.
   L'interlettrage augmente quand la taille diminue. */
.etiq{font-size:var(--t-xs);letter-spacing:.2em;text-transform:uppercase;font-weight:500}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

.saut{position:fixed;top:0;left:50%;transform:translate(-50%,-120%);z-index:110;
  background:var(--laiton);color:var(--fond);padding:var(--e2) var(--e3);
  font-size:var(--t-xs);letter-spacing:.2em;text-transform:uppercase;
  border-radius:0 0 8px 8px;transition:transform .3s var(--ease)}
.saut:focus-visible{transform:translate(-50%,0)}

#scene{position:fixed;inset:0;z-index:-1;width:100%;height:100%;display:block}

#infobulle{position:fixed;z-index:80;pointer-events:none;transform:translate(18px,-50%) scale(.94);opacity:0;
  font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--craie-2);
  background:rgba(18,19,16,.88);backdrop-filter:blur(10px);border:1px solid var(--trait);
  padding:var(--e2) var(--e2);line-height:1.7;white-space:nowrap;
  transition:opacity .3s var(--ease),transform .4s var(--ease)}
#infobulle.on{opacity:1;transform:translate(18px,-50%) scale(1)}
#infobulle b{display:block;color:var(--laiton-clair);font-weight:500;letter-spacing:.18em;margin-bottom:var(--e1)}

/* ─── Ouverture ──────────────────────────────────────────────────────── */
#rideau{position:fixed;inset:0;z-index:100;background:var(--fond);display:grid;place-items:center;
  transition:transform 1.1s var(--ease),opacity .7s ease}
#rideau.parti{transform:translateY(-101%);opacity:0;pointer-events:none}
.rideau-in{text-align:center;padding:0 var(--e3)}
.rideau-marque{font-size:clamp(1.6rem,5.5vw,3.2rem);font-weight:500;letter-spacing:.42em;text-indent:.42em;
  opacity:0;animation:entree 1.15s var(--ease) .25s forwards}
.rideau-sous{font-family:var(--serif);font-style:italic;font-size:var(--t-md);color:var(--craie-2);
  margin-top:var(--e3);opacity:0;animation:entree 1s var(--ease) .8s forwards}
.rideau-barre{width:min(280px,52vw);height:1px;background:var(--trait);margin:var(--e5) auto 0;position:relative;overflow:hidden}
.rideau-barre i{position:absolute;inset:0;background:var(--laiton);transform-origin:left;transform:scaleX(0);
  animation:charge 1.7s var(--ease) .55s forwards}
@keyframes entree{to{opacity:1}}
@keyframes charge{to{transform:scaleX(1)}}

/* ─── En-tête ────────────────────────────────────────────────────────── */
.hdr{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;
  justify-content:space-between;gap:var(--e3);padding:var(--e3) var(--marge)}
/* L'en-tête est fixe et le contenu défile dessous. Sans ce dégradé, un titre
   qui passe derrière se mélange aux liens de navigation et les deux
   deviennent illisibles. Le voile s'éteint progressivement pour ne pas
   dessiner une barre opaque. */
.hdr::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(18,19,16,.94) 0%,rgba(18,19,16,.78) 55%,rgba(18,19,16,0) 100%)}
.hdr-marque{font-size:var(--t-sm);font-weight:500;letter-spacing:.34em;text-indent:.34em}
.hdr-nav{display:flex;gap:var(--e4);font-size:var(--t-xs);letter-spacing:.2em;
  text-transform:uppercase;color:var(--craie-2);font-weight:500}
.hdr-nav a{transition:color .3s;padding:var(--e1) 0;display:inline-block}
.hdr-nav a:hover{color:var(--craie)}
@media(max-width:820px){.hdr-nav{display:none}}

.hdr-tel{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--e2);
  border:1px solid var(--laiton);border-radius:60px;font-size:var(--t-xs);
  letter-spacing:.12em;font-weight:500;color:var(--laiton-clair);white-space:nowrap;
  transition:background .4s var(--ease),color .4s var(--ease)}
.hdr-tel:hover{background:var(--laiton);color:var(--fond)}
.hdr-tel-court{display:none}
@media(max-width:820px){.hdr-tel-txt{display:none}.hdr-tel-court{display:inline}}

.jauge{position:fixed;left:var(--marge);bottom:var(--e4);z-index:55;display:flex;align-items:center;gap:var(--e2);
  font-size:var(--t-xs);letter-spacing:.18em;text-transform:uppercase;color:var(--craie-3);
  font-weight:500;opacity:0;transition:opacity .8s var(--ease)}
.pret .jauge{opacity:1}
.jauge-nom{color:var(--laiton-clair);min-width:9.5em;transition:opacity .45s var(--ease)}
.jauge-nom.change{opacity:0}
.jauge-barre{width:120px;height:1px;background:var(--trait);position:relative}
.jauge-barre i{position:absolute;inset:0;background:var(--laiton);transform-origin:left;transform:scaleX(0);
  transition:transform .5s var(--ease)}
@media(max-width:820px){.jauge{display:none}}

/* ─── Rythme des sections ────────────────────────────────────────────── */
section{padding:var(--e8) var(--marge);position:relative;min-height:100svh;display:flex;align-items:center}
.contenu{max-width:1400px;margin-inline:auto;width:100%}
.num{font-size:var(--t-xs);letter-spacing:.2em;text-transform:uppercase;font-weight:500;
  color:var(--laiton);margin-bottom:var(--e3);display:block}
.titre-s{font-size:clamp(var(--t-xl),4.4vw,var(--t-3xl));font-weight:500;line-height:1.08;
  letter-spacing:-.02em;margin:0;text-wrap:balance}

/* Le texte courant respecte la mesure : sous 45 caractères par ligne l'œil
   saute trop souvent à la ligne, au-delà de 80 il perd le fil. */
p{max-width:var(--mesure)}

/* ─── Héros ──────────────────────────────────────────────────────────── */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;
  padding:0 var(--marge) var(--e7)}
/* Voile dégradé par-dessus la photographie de fond. Sans lui, le texte se
   pose sur une image en pleine lumière et devient illisible — c'est
   exactement la faute que ce site faisait. Sombre en bas où vit le texte,
   sombre en haut derrière la navigation, plus clair au milieu pour laisser
   respirer l'image. */
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:linear-gradient(to top,
    rgba(18,19,16,.97) 0%, rgba(18,19,16,.90) 22%, rgba(18,19,16,.55) 46%,
    rgba(18,19,16,.34) 68%, rgba(18,19,16,.72) 100%)}
.hero-in{position:relative;z-index:1;width:100%;max-width:1400px;margin-inline:auto}
.hero-eyebrow{font-family:var(--serif);font-style:italic;font-size:var(--t-md);
  color:var(--laiton-clair);margin:0 0 var(--e2)}
.hero-titre{font-size:clamp(2.4rem,7.2vw,5.6rem);font-weight:500;line-height:1.02;
  letter-spacing:-.028em;margin:0;text-wrap:balance;max-width:16ch}
.mot{display:inline-block;overflow:hidden;vertical-align:bottom}
.mot > span{display:inline-block;transform:translateY(105%);transition:transform 1.05s var(--ease)}
.pret .mot > span{transform:none}
.hero-bas{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--e4);
  margin-top:var(--e5);flex-wrap:wrap}
.hero-desc{max-width:52ch;color:var(--craie-2);font-size:var(--t-base);margin:0}
.hero-scroll{font-size:var(--t-xs);letter-spacing:.18em;text-transform:uppercase;font-weight:500;
  color:var(--craie-3);display:flex;align-items:center;gap:var(--e1);white-space:nowrap}
.hero-scroll i{width:38px;height:1px;background:var(--craie-3);display:block;position:relative;overflow:hidden}
.hero-scroll i::after{content:"";position:absolute;inset:0;background:var(--laiton);
  transform-origin:left;animation:balaye 2.6s var(--ease) infinite}
@keyframes balaye{0%{transform:scaleX(0)}55%{transform:scaleX(1)}100%{transform:scaleX(0);transform-origin:right}}

/* ─── Manifeste ──────────────────────────────────────────────────────── */
.manifeste p{font-size:clamp(var(--t-lg),3vw,var(--t-2xl));font-weight:400;line-height:1.34;
  letter-spacing:-.015em;max-width:24ch;margin:0}
.manifeste em{font-family:var(--serif);font-style:italic;color:var(--laiton-clair)}
.manifeste-grille{display:grid;grid-template-columns:1fr 1fr;gap:var(--e6);align-items:end}
.manifeste-aside{color:var(--craie-2);max-width:56ch;font-size:var(--t-base)}
@media(max-width:860px){.manifeste-grille{grid-template-columns:1fr;gap:var(--e5)}}

/* ─── Matières ───────────────────────────────────────────────────────── */
/* Titre en haut, légendes en bas, milieu laissé libre pour les tirages 3D.
   L'ancienne version poussait les légendes avec une grosse marge et alignait
   le bloc en bas : dès que le contenu dépassait la hauteur disponible, il
   débordait vers le haut et le titre passait sous l'en-tête. */
.matieres{align-items:stretch}
.matieres .contenu{display:flex;flex-direction:column;justify-content:space-between;
  gap:var(--e6);min-height:calc(100svh - var(--e8) * 2)}
.mat-legendes{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--e4)}
@media(max-width:900px){.mat-legendes{grid-template-columns:repeat(2,1fr);margin-top:var(--e6)}}
/* Le décor 3D est fixe et le texte défile : il n'existe aucune bande de
   l'écran où la légende soit garantie lisible. C'est donc le texte qui porte
   sa propre protection — même solution que la carte des réalisations, ce qui
   garde une seule technique dans tout le site. */
.mat-note{font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--craie-2);
  line-height:1.8;font-weight:500;padding:var(--e2);border-radius:4px;
  border-top:1px solid var(--trait);
  background:linear-gradient(to bottom,rgba(18,19,16,.92),rgba(18,19,16,.74));
  backdrop-filter:blur(10px)}
.mat-note b{display:block;color:var(--craie);font-weight:500;letter-spacing:.14em;margin-bottom:var(--e1)}

/* ─── Réalisations ───────────────────────────────────────────────────── */
.proj-item{min-height:125svh;align-items:center;justify-content:flex-start}
.proj-item.droite{justify-content:flex-end}
/* Le panneau est plus clair que le fond : en interface sombre, c'est la
   clarté qui crée l'élévation, pas l'ombre. Écart volontairement faible. */
.proj-txt{max-width:min(38rem,48vw);padding:var(--e5);
  background:rgba(27,28,23,.86);backdrop-filter:blur(16px);
  border:1px solid var(--trait);border-radius:4px}
@media(max-width:900px){.proj-txt{max-width:none;padding:var(--e4)}}
.proj-titre{font-size:clamp(var(--t-lg),3.2vw,var(--t-2xl));font-weight:500;line-height:1.1;
  letter-spacing:-.02em;margin:var(--e2) 0 var(--e3)}
.proj-lieu{font-family:var(--serif);font-style:italic;color:var(--laiton-clair);
  font-size:var(--t-md);margin:0}
.proj-desc{color:var(--craie-2);max-width:56ch;margin:0 0 var(--e4)}
.fiche{display:grid;grid-template-columns:repeat(3,auto);gap:var(--e3) var(--e5);
  font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--craie-3);
  justify-content:start;font-weight:500}
.fiche b{display:block;color:var(--craie);font-weight:500;font-size:var(--t-sm);
  letter-spacing:.02em;margin-top:var(--e1);text-transform:none}

/* ─── Processus ──────────────────────────────────────────────────────── */
.proc-liste{margin-top:var(--e5);border-top:1px solid var(--trait)}
.etape{display:grid;grid-template-columns:6rem 1fr 1.15fr;gap:var(--e5);
  padding:var(--e4) 0;border-bottom:1px solid var(--trait);align-items:baseline}
@media(max-width:860px){.etape{grid-template-columns:4rem 1fr;gap:var(--e2) var(--e3)}.etape p{grid-column:2}}
.etape-n{font-size:var(--t-xs);letter-spacing:.18em;color:var(--laiton);font-weight:500}
.etape h3{font-size:var(--t-md);font-weight:500;margin:0;letter-spacing:-.01em}
.etape p{color:var(--craie-2);margin:0;font-size:var(--t-base);max-width:56ch}

/* ─── Les chiffres ───────────────────────────────────────────────────── */
.qr-liste{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--e6);margin-top:var(--e6)}
@media(max-width:900px){.qr-liste{grid-template-columns:1fr;gap:var(--e5)}}
.qr h3{font-size:var(--t-md);font-weight:500;color:var(--craie);margin:0 0 var(--e2);line-height:1.35}
.qr p{font-size:var(--t-base);line-height:1.7;color:var(--craie-2);max-width:58ch;margin:0}
.qr b{color:var(--laiton-clair);font-weight:500}
.qr-action{border-left:1px solid var(--laiton);padding-left:var(--e3)}

/* ─── Contact ────────────────────────────────────────────────────────── */
.fin{text-align:center}
.fin .titre-s{max-width:18ch;margin-inline:auto}
.fin-serif{font-family:var(--serif);font-style:italic;color:var(--laiton-clair)}
.fin-note{margin:var(--e3) auto 0;font-size:var(--t-sm);color:var(--craie-3);max-width:48ch}
.coord{margin-top:var(--e6);display:flex;gap:var(--e6);justify-content:center;flex-wrap:wrap;
  font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--craie-3);font-weight:500}
.coord b{display:block;color:var(--craie);font-size:var(--t-sm);letter-spacing:.01em;
  text-transform:none;font-weight:500;margin-top:var(--e1)}
.coord a{padding-block:.3rem;color:inherit;border-bottom:1px solid var(--trait);transition:border-color .3s}
.coord a:hover{border-color:var(--laiton)}

/* Remplissage horizontal égal au double du vertical : c'est la proportion
   qui fait qu'un bouton se lit comme un bouton. */
.btn{display:inline-flex;align-items:center;gap:var(--e2);margin-top:var(--e5);
  padding:var(--e2) var(--e4);border:1px solid var(--laiton);color:var(--laiton-clair);
  font-size:var(--t-xs);letter-spacing:.2em;text-transform:uppercase;font-weight:500;
  border-radius:60px;transition:background .45s var(--ease),color .45s var(--ease),transform .45s var(--ease)}
.btn:hover{background:var(--laiton);color:var(--fond);transform:translateY(-2px)}
.btn-petit{margin-top:var(--e3);padding:.75rem var(--e3)}

/* ─── Pied ───────────────────────────────────────────────────────────── */
.pied{border-top:1px solid var(--trait);padding:var(--e5) var(--marge);font-size:var(--t-xs);
  letter-spacing:.12em;text-transform:uppercase;color:var(--craie-3);font-weight:500;
  display:flex;justify-content:space-between;gap:var(--e3);flex-wrap:wrap;background:var(--surface)}
.pied a{color:var(--laiton);transition:color .3s;padding-block:.42rem}
.pied a:hover{color:var(--laiton-clair)}
.demo{background:var(--surface);border-top:1px solid var(--trait);padding:var(--e3) var(--marge);
  text-align:center;font-size:var(--t-sm);color:var(--craie-3);line-height:1.7}
.demo p{max-width:76ch;margin:0 auto}
.demo b{color:var(--craie-2);font-weight:500}
.demo a{color:var(--laiton);padding-block:.42rem}

/* ─── Apparition au défilement ───────────────────────────────────────── */
.rv{opacity:0;transform:translateY(20px)}
.rv.vu{opacity:1;transform:none;transition:opacity 1s var(--ease),transform 1.15s var(--ease)}

@media(prefers-reduced-motion:reduce){
  .rv,.rv.vu{opacity:1;transform:none;transition:none}
  .hero-scroll i::after{animation:none}
  .mot > span{transform:none;transition:none}
  #infobulle{display:none}
  #rideau{transition:opacity .3s}
  .rideau-marque,.rideau-sous{animation:entree .01s forwards}
  .rideau-barre i{animation:charge .01s forwards}
}