/* ============================================================
   BideoGemu — feuille de style unique du site public.
   Direction « Plan technique » : fond de plan bleu, tracés cyan,
   orange réservé aux actions cliquables.
   Aucune dépendance front, aucun build : ce fichier est servi tel quel.
   ============================================================ */
/* ============================================================
   Display face: Bahnschrift/DIN when the system has it,
   otherwise the inlined condensed grotesque below.
   ============================================================ */
@font-face{
  font-family:"BG Narrow";
  src:url(data:font/ttf;base64,__FONT_REG__) format("truetype");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"BG Narrow";
  src:url(data:font/ttf;base64,__FONT_BOLD__) format("truetype");
  font-weight:700; font-style:normal; font-display:swap;
}

:root{
  color-scheme:dark;
  --ground:#0B1B2E;
  --ground-2:#0E2439;
  --panel:#0F2337;
  --grid:rgba(127,196,238,.085);
  --line:#7FC4EE;
  --line-soft:rgba(127,196,238,.26);
  --line-faint:rgba(127,196,238,.14);
  --paper:#E9F1F8;
  --dim:#9BB4CA;
  --faint:#6E8CA6;
  --orange:#FF7A2F;
  --orange-deep:#C4520F;
  --ok:#4FD08A;
  --mono:"Cascadia Mono","Cascadia Code",Consolas,"DejaVu Sans Mono",ui-monospace,monospace;
  --sans:"Source Sans 3","Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  --narrow:"Bahnschrift","Liberation Sans Narrow","BG Narrow","Arial Narrow",sans-serif;
  --maxw:1200px;
}
*{box-sizing:border-box}
/* The hidden attribute only sets display:none in the UA sheet, so any rule
   that sets a display wins over it. Reassert it once, for good. */
[hidden]{display:none !important}
html{scroll-behavior:smooth}
body{
  /* Colonne pleine hauteur : sur une page courte, le pied reste en bas
     au lieu de flotter au milieu de l'écran. */
  margin:0; min-height:100vh; display:flex; flex-direction:column;
  color:var(--paper);
  font-family:var(--sans);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  background-color:var(--ground);
  position:relative;
}
/* fond de plan : élément fixe plutôt que background-attachment,
   qui laisse une bande non peinte en haut de page une fois défilé */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(var(--grid) 1px,transparent 1px) 0 0/32px 32px,
    linear-gradient(90deg,var(--grid) 1px,transparent 1px) 0 0/32px 32px,
    radial-gradient(140% 70% at 80% -5%,#17405F 0%,var(--ground) 55%);
}
a{color:inherit; text-decoration:none}
:focus-visible{outline:2px solid var(--orange); outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important}
  html{scroll-behavior:auto}
}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px; width:100%}

/* ============================================================
   BANDEAU SUPÉRIEUR + NAVIGATION
   ============================================================ */
.s-top{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--faint); background:rgba(6,15,26,.6); border-bottom:1px solid var(--line-faint);
}
.s-top .wrap{display:flex; align-items:center; gap:16px; flex-wrap:wrap; height:34px}
.s-top .dispo{margin-left:auto; color:var(--ok); display:inline-flex; align-items:center; gap:7px}
.s-top .dispo i{width:6px; height:6px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 3px rgba(79,208,138,.18)}

.s-nav{
  position:sticky; top:0; z-index:40;
  background:rgba(9,21,35,.86); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line-soft);
}
.s-nav .wrap{display:flex; align-items:center; gap:22px; height:62px}
.mark{font-family:var(--narrow); font-size:21px; letter-spacing:.17em; text-transform:uppercase; color:#FFF; white-space:nowrap}
.mark s{text-decoration:none; color:var(--line)}
.mark-kana{font-family:var(--mono); font-size:9.5px; letter-spacing:.34em; color:var(--faint); display:block; margin-top:-2px}
.s-nav nav{margin-left:auto; display:flex; gap:22px; font-family:var(--mono); font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--dim)}
.s-nav nav a{padding:4px 0; border-bottom:1px solid transparent}
.s-nav nav a:hover{color:#FFF; border-bottom-color:var(--line)}
.s-nav nav a.on{color:#FFF; border-bottom-color:var(--orange)}
.btn{
  display:inline-block; font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  padding:10px 17px; border:1px solid var(--orange); color:var(--orange); background:rgba(255,122,47,.07);
  transition:background .15s ease,color .15s ease; white-space:nowrap; cursor:pointer;
}
.btn:hover{background:var(--orange); color:#1B0C03}
.btn.ghost{border-color:var(--line-soft); color:var(--dim); background:transparent}
.btn.ghost:hover{border-color:var(--line); color:#FFF; background:rgba(127,196,238,.08)}
.s-nav .btn{margin-left:4px}
.burger{display:none}

/* ============================================================
   HERO
   ============================================================ */
.s-hero{padding:64px 0 52px}
.s-hero .wrap{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center}
.eyebrow{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--orange); margin:0 0 18px; display:flex; align-items:center; gap:10px;
}
.eyebrow::after{content:""; flex:1; height:1px; background:var(--line-faint)}
h1.title{
  font-family:var(--narrow); font-weight:700; text-transform:uppercase; color:#FFF;
  font-size:clamp(30px,5.4vw,53px); line-height:.97; letter-spacing:.04em;
  margin:0 0 20px; text-wrap:balance;
}
h1.title u{text-decoration:none; color:transparent; -webkit-text-stroke:1.5px var(--line)}
.lede{font-size:16px; line-height:1.65; color:var(--dim); max-width:48ch; margin:0 0 26px}
.lede b{color:var(--paper); font-weight:600}
.cta{display:flex; gap:12px; flex-wrap:wrap; align-items:center}

/* cotes — le geste signature */
.cotes{margin:34px 0 0; border-top:1px solid var(--line-faint); padding-top:20px}
/* grille à 3 colonnes : le trait de cote garde la même longueur d'une
   ligne à l'autre, au lieu de dépendre de la longueur des textes */
.cote{
  display:grid; grid-template-columns:11em 1fr 8em; align-items:center; gap:12px; margin-bottom:11px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--faint);
}
.contact .cote{grid-template-columns:13em 1fr 8em}
.cote em{text-align:right}
.cote .rail{flex:1; height:1px; background:var(--line); opacity:.6; position:relative; min-width:36px}
.cote .rail::before,.cote .rail::after{
  content:""; position:absolute; top:-3.5px; width:0; height:0;
  border-top:4px solid transparent; border-bottom:4px solid transparent;
}
.cote .rail::before{left:0; border-right:8px solid var(--line)}
.cote .rail::after{right:0; border-left:8px solid var(--line)}
.cote em{font-style:normal; color:var(--paper); letter-spacing:.05em}
.cote:last-child{margin-bottom:0}
.cote:last-child em{color:var(--orange)}

/* élévation éclatée */
/* le biseau déborde d'environ 25 px à droite : on lui réserve la place */
.stack{position:relative; padding:14px 30px 14px 0}
.plate{
  position:relative; height:74px; margin-bottom:-8px;
  transform:skewX(-32deg);
  border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(127,196,238,.15),rgba(127,196,238,.03));
  transition:transform .22s ease, background .22s ease;
}
.plate:nth-child(1){margin-left:0}
.plate:nth-child(2){margin-left:22px}
.plate:nth-child(3){margin-left:44px}
.plate:nth-child(4){margin-left:66px; border-color:var(--orange); background:linear-gradient(180deg,rgba(255,122,47,.18),rgba(255,122,47,.04))}
.plate:hover{transform:skewX(-32deg) translateX(-10px); background:linear-gradient(180deg,rgba(127,196,238,.3),rgba(127,196,238,.07))}
.plate b{
  position:absolute; left:18px; top:50%; transform:skewX(32deg) translateY(-50%);
  font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase;
  font-weight:400; color:#FFF; white-space:nowrap;
}
.plate i{
  position:absolute; right:22px; top:50%; transform:skewX(32deg) translateY(-50%);
  font-family:var(--mono); font-style:normal; font-size:10px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--faint); white-space:nowrap; padding-left:16px; border-left:1px dashed var(--line-soft);
}
.plate:nth-child(4) i{color:var(--orange)}

/* ============================================================
   RÈGLE GRADUÉE — séparateur de section
   ============================================================ */
.rule{
  height:11px;
  background:
    repeating-linear-gradient(90deg,var(--line-soft) 0 1px,transparent 1px 16px) bottom/100% 6px no-repeat,
    linear-gradient(var(--line-faint),var(--line-faint)) bottom/100% 1px no-repeat;
  opacity:.85;
}

/* ============================================================
   SECTIONS
   ============================================================ */
section{padding:66px 0; scroll-margin-top:76px}
.sechead{display:flex; align-items:baseline; gap:16px; margin-bottom:10px; flex-wrap:wrap}
.sechead .no{font-family:var(--mono); font-size:11px; letter-spacing:.18em; color:var(--orange)}
.sechead h1,
.sechead h2{
  font-family:var(--narrow); font-weight:700; text-transform:uppercase; color:#FFF;
  font-size:clamp(24px,3.8vw,38px); letter-spacing:.05em; margin:0; line-height:1;
}
.sechead .of{font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); margin-left:auto}
.secnote{color:var(--dim); max-width:62ch; margin:0 0 30px; font-size:15px}

/* --- filtres --- */
.filters{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:26px}
.filters button{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  padding:8px 14px; background:transparent; border:1px solid var(--line-faint); color:var(--dim); cursor:pointer;
  transition:border-color .15s ease,color .15s ease,background .15s ease;
}
.filters button:hover{border-color:var(--line-soft); color:#FFF}
.filters button.on{border-color:var(--line); color:#0B1B2E; background:var(--line); font-weight:700}

/* --- cartes réalisations --- */
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.proj{
  background:linear-gradient(180deg,rgba(20,45,68,.72),rgba(11,27,46,.72));
  border:1px solid var(--line-faint); display:flex; flex-direction:column;
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.proj:hover{border-color:var(--line-soft); transform:translateY(-3px); box-shadow:0 18px 34px rgba(0,0,0,.4)}
.proj-top{
  display:flex; align-items:center; gap:10px; padding:9px 14px; border-bottom:1px solid var(--line-faint);
  font-family:var(--mono); font-size:9.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--faint);
}
.proj-top .state{margin-left:auto; display:inline-flex; align-items:center; gap:6px; color:var(--ok)}
.proj-top .state i{width:5px; height:5px; border-radius:50%; background:currentColor}
.proj-top .state.wip{color:var(--orange)}
.proj-top .state.soon{color:var(--line)}

/* vignette : capture réelle du site, tenue dans la langue du plan */
.shot{
  aspect-ratio:16/10; margin:14px 14px 0; border:1px solid var(--line-faint);
  background-size:cover; background-position:top center; background-repeat:no-repeat;
  background-color:rgba(8,20,34,.55);
  filter:saturate(.9) contrast(1.02);
  transition:filter .22s ease, border-color .22s ease;
  position:relative;
}
.proj:hover .shot{filter:none; border-color:var(--line-soft)}
/* vignette en attente de capture */
.shot.todo{
  filter:none;
  background-image:
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:14px 14px, 14px 14px;
  display:grid; place-items:center;
}
.shot.diag{
  filter:none;
  background-image:
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:14px 14px, 14px 14px;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:7px 8px; padding:14px;
}
.shot.diag span,.shot.diag b{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase;
  border:1px solid var(--line-soft); color:var(--dim); padding:6px 9px; font-weight:400;
  background:rgba(11,27,46,.7);
}
.shot.diag b{border-color:var(--orange); color:var(--orange)}
.shot.diag i{font-style:normal; color:var(--line); font-size:12px; line-height:1}
.shot.todo b{
  font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--faint); font-weight:400; border:1px dashed var(--line-soft); padding:7px 12px;
}

.proj-body{padding:14px 14px 4px}
.proj h3{
  font-family:var(--narrow); font-weight:700; text-transform:uppercase; color:#FFF;
  font-size:19px; letter-spacing:.045em; margin:0 0 6px; line-height:1.05; word-break:break-word;
}
.proj p{margin:0 0 12px; font-size:13.5px; line-height:1.5; color:var(--dim)}
.proj p code{font-family:var(--mono); font-size:12px; color:var(--line)}
.proj dl{
  margin:0; padding:11px 14px 14px; border-top:1px dashed var(--line-faint); margin-top:auto;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.03em;
}
.proj dl div{display:flex; gap:12px; padding:2.5px 0}
.proj dt{color:var(--faint); text-transform:uppercase; letter-spacing:.12em; flex:none; width:80px}
.proj dd{margin:0; color:var(--paper); text-align:right; margin-left:auto}

/* --- sous-titre (anciennes réalisations) --- */
.subhead{
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  margin:44px 0 4px; font-family:var(--narrow); font-weight:700; text-transform:uppercase;
  font-size:20px; letter-spacing:.06em; color:#FFF;
}
.subhead span{
  font-family:var(--mono); font-weight:400; font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--faint);
}

/* --- modules & thèmes --- */
.mods{border-top:1px solid var(--line-soft)}
.mod{
  display:flex; align-items:center; gap:18px; padding:16px 4px; border-bottom:1px solid var(--line-faint);
  flex-wrap:wrap;
}
.mod .vig{
  width:96px; height:60px; flex:none; border:1px solid var(--line-faint);
  background-size:cover; background-position:top center; background-color:rgba(8,20,34,.6);
  filter:saturate(.85); transition:filter .2s ease;
}
.mod:hover .vig{filter:none}
.mod .ref{font-family:var(--mono); font-size:10.5px; letter-spacing:.15em; color:var(--faint); flex:none; width:64px}
.mod .nm{font-family:var(--narrow); font-weight:700; text-transform:uppercase; font-size:17px; letter-spacing:.05em; color:#FFF; flex:none}
.mod .ds{font-size:13.5px; color:var(--dim); flex:1 1 260px; min-width:200px}
.mod .ds b{color:var(--paper); font-weight:600}
/* Points détaillés d'une prestation : une énumération, pas une mise en
   valeur — le gras blanc de .ds b en faisait un second titre. */
.mod .pts{display:block; margin-top:7px; font-family:var(--mono); font-size:11px; letter-spacing:.03em; color:var(--line); line-height:1.75}
.mod .cp{font-family:var(--mono); font-size:10.5px; color:var(--line); letter-spacing:.08em; flex:none}
.mod .tag{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
  border:1px solid var(--line-soft); color:var(--dim); padding:4px 9px; flex:none;
}
.mod .tag.hot{border-color:var(--orange); color:var(--orange)}

/* --- méthode --- */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:1px solid var(--line-faint)}
.step{padding:22px 20px; border-right:1px solid var(--line-faint); position:relative}
.step:last-child{border-right:0}
.step .n{font-family:var(--mono); font-size:11px; letter-spacing:.2em; color:var(--orange); display:block; margin-bottom:12px}
.step h3{font-family:var(--narrow); font-weight:700; text-transform:uppercase; font-size:19px; letter-spacing:.05em; margin:0 0 8px; color:#FFF}
.step p{margin:0 0 14px; font-size:13.5px; color:var(--dim); line-height:1.5}
.step .dur{font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); border-top:1px dashed var(--line-faint); padding-top:10px}

/* --- socle --- */
.socle{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1px; background:var(--line-faint); border:1px solid var(--line-faint)}
.socle > div{background:rgba(11,27,46,.75); padding:20px}
.socle dt{font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--orange); margin-bottom:12px}
.socle ul{margin:0; padding:0; list-style:none; font-family:var(--mono); font-size:12px; color:var(--paper); line-height:2}
.socle ul li{border-bottom:1px dotted var(--line-faint); display:flex; justify-content:space-between; gap:12px}
.socle ul li span{color:var(--faint)}
.socle ul li:last-child{border-bottom:0}

/* --- contact --- */
.contact .wrap{display:grid; grid-template-columns:.85fr 1.15fr; gap:56px; align-items:start}
.form{display:grid; gap:20px}
.field{display:grid; gap:6px}
.field label{font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--faint)}
.field input,.field textarea,.field select{
  font-family:var(--sans); font-size:15px; color:var(--paper);
  background:rgba(127,196,238,.05); border:1px solid var(--line-faint);
  border-bottom-color:var(--line-soft);
  padding:11px 14px; width:100%; transition:border-color .15s ease, background .15s ease;
}
.field input:hover,.field textarea:hover,.field select:hover{background:rgba(127,196,238,.08)}
.field textarea{resize:vertical; min-height:88px; line-height:1.55}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:0; border-color:var(--line-faint); border-bottom-color:var(--orange);
  background:rgba(127,196,238,.09);
}
/* Le navigateur repeint le fond des champs auto-remplis : on lui impose le nôtre,
   sans quoi un aplat clair vient trouer la page. */
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--paper);
  -webkit-box-shadow:0 0 0 60px #12283D inset;
  box-shadow:0 0 0 60px #12283D inset;
  caret-color:var(--paper);
}
.field select option{background:#0E2439; color:var(--paper)}
.form .row{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.form-foot{display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.form-foot small{font-family:var(--mono); font-size:10px; letter-spacing:.1em; color:var(--faint); text-transform:uppercase}

/* --- pied de page : cartouche de planche --- */
.s-foot{margin-top:auto; border-top:1px solid var(--line-soft); background:rgba(6,15,26,.55)}
.block{display:grid; grid-template-columns:repeat(5,1fr)}
.block > div{padding:18px 20px; border-right:1px solid var(--line-faint)}
.block > div:last-child{border-right:0}
.block dt{font-family:var(--mono); font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--faint); margin-bottom:6px}
.block dd{margin:0; font-family:var(--mono); font-size:11.5px; letter-spacing:.05em; color:var(--paper); line-height:1.6}
.block dd a:hover{color:var(--orange)}
.legal{
  border-top:1px solid var(--line-faint); padding:14px 0;
  font-family:var(--mono); font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--faint);
  display:flex; gap:18px; flex-wrap:wrap;
}
.legal .r{margin-left:auto}

/* ============================================================
   FENÊTRE D'ÉDITEUR — le clin d'œil dev
   ============================================================ */
.ide{
  --ide-bg:#0A1622; --ide-chrome:#0E2231; --ide-gut:#4A6A84;
  --k:#7FC4EE; --str:#9FD69A; --num:#E3C07B; --com:#5A7891; --cls:#E9F1F8; --var:#B6D8F2; --fn:#A8C7E8;
  margin-top:34px; border:1px solid var(--line-soft); background:var(--ide-bg);
  box-shadow:0 22px 50px rgba(0,0,0,.45); overflow:hidden;
}
.ide-bar{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background:var(--ide-chrome); border-bottom:1px solid var(--line-faint);
  padding:0 12px; font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; color:var(--faint);
}
.ide-bar .dots{display:flex; gap:6px; padding:11px 6px 11px 2px}
.ide-bar .dots i{width:9px; height:9px; border-radius:50%; background:#2E4358}
.ide-path{padding:11px 0; color:var(--dim)}
.ide-path b{color:var(--paper); font-weight:400}
.ide-tabs{display:flex; overflow-x:auto; background:var(--ide-chrome); border-bottom:1px solid var(--line-faint)}
.ide-tabs button{
  font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--faint);
  background:transparent; border:0; border-bottom:2px solid transparent; border-right:1px solid var(--line-faint);
  padding:10px 16px; cursor:pointer; white-space:nowrap; transition:color .15s ease, background .15s ease;
}
.ide-tabs button:hover{color:var(--paper); background:rgba(127,196,238,.05)}
.ide-tabs button[aria-selected="true"]{color:#FFF; border-bottom-color:var(--orange); background:var(--ide-bg)}
.ide-pane{display:none}
.ide-pane.on{display:block}
.ide pre{
  margin:0; padding:18px 18px 20px 0; overflow-x:auto;
  font-family:var(--mono); font-size:12.5px; line-height:1.62; color:var(--cls);
  counter-reset:l; tab-size:4;
}
.ide code{font-family:inherit}
.ide .l{display:block; white-space:pre; padding-left:4.6em; position:relative}
.ide .l::before{
  counter-increment:l; content:counter(l);
  position:absolute; left:0; width:3.4em; text-align:right;
  color:var(--ide-gut); opacity:.65; font-variant-numeric:tabular-nums;
}
.ide .l:hover{background:rgba(127,196,238,.045)}
.ide .k{color:var(--k)} .ide .s{color:var(--str)} .ide .n{color:var(--num)}
.ide .c{color:var(--com); font-style:italic} .ide .t{color:var(--cls)} .ide .v{color:var(--var)} .ide .f{color:var(--fn)}
.ide-foot{
  display:flex; gap:18px; flex-wrap:wrap; align-items:center;
  background:var(--ide-chrome); border-top:1px solid var(--line-faint);
  padding:8px 14px; font-family:var(--mono); font-size:10px; letter-spacing:.1em; color:var(--faint);
}
.ide-foot .ok{color:var(--ok)}
.ide-foot .r{margin-left:auto}


/* --- bandeau de preuves --- */
.proof{border-top:1px solid var(--line-faint); border-bottom:1px solid var(--line-faint); background:rgba(6,15,26,.4)}
.proof-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-faint)}
.proof-grid > div{background:rgba(11,27,46,.72); padding:26px 22px 22px}
.proof-n{
  font-family:var(--narrow); font-weight:700; color:#FFF; line-height:.9;
  font-size:clamp(34px,5vw,52px); letter-spacing:.01em; font-variant-numeric:tabular-nums;
  display:block; margin-bottom:10px;
}
.proof-n em{font-style:normal; color:var(--orange)}
.proof-l{font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); display:block; line-height:1.5}
.proof-note{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:16px 0;
  font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--faint);
}
.proof-note b{color:var(--paper); font-weight:400}
.proof-note a{color:var(--line); border-bottom:1px solid transparent}
.proof-note a:hover{border-bottom-color:var(--line)}
.proof-note .sep{color:var(--line-soft)}
@media (max-width:820px){ .proof-grid{grid-template-columns:1fr 1fr} }


/* --- journal --- */
.posts{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.post{
  background:linear-gradient(180deg,rgba(20,45,68,.6),rgba(11,27,46,.6));
  border:1px solid var(--line-faint); padding:20px 20px 18px;
  display:flex; flex-direction:column; gap:10px;
  transition:border-color .18s ease, transform .18s ease;
}
.post:hover{border-color:var(--line-soft); transform:translateY(-3px)}
.post .cat{font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--orange)}
.post h3{font-family:var(--narrow); font-weight:700; text-transform:uppercase; font-size:19px; letter-spacing:.04em; line-height:1.1; margin:0; color:#FFF}
.post p{margin:0; font-size:13.5px; line-height:1.55; color:var(--dim)}
.post p code{font-family:var(--mono); font-size:12px; color:var(--line)}
.post .meta{
  margin-top:auto; padding-top:12px; border-top:1px dashed var(--line-faint);
  font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint);
  display:flex; gap:10px; flex-wrap:wrap;
}
@media (max-width:900px){ .posts{grid-template-columns:1fr} }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1000px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:1fr 1fr}
  .step:nth-child(2){border-right:0}
  .step:nth-child(1),.step:nth-child(2){border-bottom:1px solid var(--line-faint)}
  .block{grid-template-columns:repeat(2,1fr)}
  .block > div{border-bottom:1px solid var(--line-faint)}
  .block > div:nth-child(2n){border-right:0}
}
@media (max-width:820px){
  .s-hero .wrap{grid-template-columns:1fr; gap:40px}
  .contact .wrap{grid-template-columns:1fr; gap:36px}
  /* Le menu devient un panneau dépliant : sans lui, la navigation
     serait inaccessible sous 820 px. La barre doit pouvoir grandir,
     sinon le panneau sort du bandeau et flotte au-dessus de la page. */
  .s-nav .wrap{flex-wrap:wrap; height:auto; min-height:62px; padding-top:0; padding-bottom:0}
  .s-nav nav{
    display:none; order:3; width:100%; flex-direction:column; gap:0;
    border-top:1px solid var(--line-faint); margin:0 -24px; padding:6px 24px 14px;
  }
  .s-nav nav.ouvert{display:flex}
  .s-nav nav a{padding:12px 0; border-bottom:1px solid var(--line-faint); font-size:12px}
  .s-nav nav a:last-child{border-bottom:0}
  .s-nav nav a.on{color:#FFF; border-bottom-color:var(--orange)}
  .burger{display:inline-block; margin-left:auto; font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--dim); border:1px solid var(--line-faint); padding:9px 13px; background:transparent; cursor:pointer}
  .burger[aria-expanded="true"]{color:var(--orange); border-color:var(--orange)}
  .s-nav .btn{display:none}
}
@media (max-width:620px){
  .grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .step{border-right:0; border-bottom:1px solid var(--line-faint)}
  .step:last-child{border-bottom:0}
  .form .row{grid-template-columns:1fr}
  .plate i{display:none}
  section{padding:48px 0}
}

/* --- messages de formulaire --- */
.flash{
  font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:#0B1B2E;
  background:var(--ok); padding:11px 14px; margin:0 0 20px;
}
.field ul{margin:6px 0 0; padding-left:16px; list-style:none}
.field ul li{font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--orange)}
.field ul li::before{content:"— "}

/* --- fiche de réalisation (page dédiée) --- */
.fiche{display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:start; margin-top:30px}
.fiche .cotes{margin-top:26px}
.mention{font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); margin:10px 0 0}
@media (max-width:820px){ .fiche{grid-template-columns:1fr; gap:30px} }

/* ============================================================
   Blocs récupérés : fiche détaillée, compétences, audit, FAQ.
   ============================================================ */
/* --- pied de carte : + d'infos --- */
.proj-foot{display:flex; gap:10px; align-items:center; flex-wrap:wrap; padding:0 14px 14px}
.more,.ext{
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  padding:7px 11px; border:1px solid var(--line-soft); color:var(--dim); cursor:pointer;
  transition:border-color .15s ease,color .15s ease,background .15s ease;
}
.more{border-color:var(--orange); color:var(--orange); background:rgba(255,122,47,.07)}
.more:hover{background:var(--orange); color:#1B0C03}
.ext{margin-left:auto}
.ext:hover{border-color:var(--line); color:#FFF}

/* --- planche de détail --- */
dialog.sheet{
  width:min(880px,93vw); max-height:88vh; padding:0; border:1px solid var(--line-soft);
  background:
    linear-gradient(var(--grid) 1px,transparent 1px) 0 0/28px 28px,
    linear-gradient(90deg,var(--grid) 1px,transparent 1px) 0 0/28px 28px,
    linear-gradient(180deg,#12293F,#0A1929);
  color:var(--paper); box-shadow:0 40px 90px rgba(0,0,0,.72); overflow:auto;
}
dialog.sheet::backdrop{background:rgba(4,12,21,.8)}
dialog.sheet[open]{animation:sheetIn .22s cubic-bezier(.2,.7,.3,1)}
@keyframes sheetIn{from{opacity:0; transform:translateY(16px) scale(.985)}}
.sheet-close{
  position:sticky; top:0; float:right; margin:10px 10px 0; z-index:2;
  background:rgba(11,27,46,.9); border:1px solid var(--line-faint); color:var(--dim);
  font-family:var(--mono); font-size:13px; width:32px; height:32px; cursor:pointer; line-height:1;
}
.sheet-close:hover{color:#FFF; border-color:var(--line)}
.sheet-body{padding:26px clamp(20px,4vw,38px) 30px}
.d-eyebrow{font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--orange); margin:0 0 12px}
.d-title{font-family:var(--narrow); font-weight:700; text-transform:uppercase; font-size:clamp(24px,4.6vw,38px); letter-spacing:.045em; margin:0 0 16px; color:#FFF; line-height:1}
.d-ctx{font-size:16px; line-height:1.65; color:var(--dim); max-width:62ch; margin:0 0 26px}
.d-h{font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--faint); margin:0 0 12px; font-weight:400; border-top:1px solid var(--line-faint); padding-top:16px}
.d-list{margin:0 0 22px; padding:0; list-style:none}
.d-list li{position:relative; padding-left:22px; margin-bottom:9px; font-size:14.5px; color:var(--paper); line-height:1.55}
.d-list li::before{content:"—"; position:absolute; left:0; color:var(--line)}
.d-chips{display:flex; flex-wrap:wrap; gap:7px; margin-bottom:22px}
.d-chips span{font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; border:1px solid var(--line-soft); color:var(--line); padding:6px 10px}
.d-foot{display:flex; gap:12px; flex-wrap:wrap}

/* --- bande compétences --- */
.skills{display:flex; flex-wrap:wrap; gap:9px; margin-top:26px}
.skills a{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  border:1px solid var(--line-faint); color:var(--dim); padding:9px 13px;
  transition:border-color .15s ease,color .15s ease,background .15s ease;
}
.skills a:hover{border-color:var(--line); color:#FFF; background:rgba(127,196,238,.08)}

/* --- bande audit --- */
.audit{border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); background:rgba(255,122,47,.05)}
.audit .wrap{display:grid; grid-template-columns:1.1fr .9fr; gap:46px; align-items:center; padding-top:52px; padding-bottom:52px}
.audit h1,
.audit h2{font-family:var(--narrow); font-weight:700; text-transform:uppercase; font-size:clamp(24px,4.2vw,40px); letter-spacing:.045em; margin:0 0 14px; color:#FFF; line-height:1}
.audit h2 u{text-decoration:none; color:var(--orange)}
.audit p{color:var(--dim); font-size:15.5px; margin:0 0 22px; max-width:52ch}
.audit ul{margin:0; padding:0; list-style:none; display:grid; gap:1px; background:var(--line-faint); border:1px solid var(--line-faint)}
.audit li{background:rgba(11,27,46,.75); padding:13px 16px; font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; color:var(--paper); display:flex; gap:12px; align-items:baseline}
.audit li b{color:var(--orange); font-weight:400; flex:none}
.audit p.audit-suite{
  margin:14px 0 0; max-width:none; font-size:12.5px; line-height:1.65; color:var(--faint);
  border-left:2px solid var(--line-faint); padding-left:12px;
}

/* --- FAQ --- */
.faq{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line-faint); border:1px solid var(--line-faint)}
.faq > div{background:rgba(11,27,46,.75); padding:22px 24px}
.faq h3{font-family:var(--narrow); font-weight:700; text-transform:uppercase; font-size:17px; letter-spacing:.05em; margin:0 0 10px; color:#FFF}
.faq p{margin:0; font-size:14px; line-height:1.6; color:var(--dim)}
.faq p b{color:var(--paper); font-weight:600}

@media (max-width:900px){
  .audit .wrap{grid-template-columns:1fr; gap:30px}
  .faq{grid-template-columns:1fr}
}

/* --- lien « voir tout » sous une section abrégée --- */
.voir-tout{margin:26px 0 0}

/* --- pages de section --- */
.page-tete{padding:34px 0 0}
.rappel{padding:46px 0 60px}
.rappel .lede{margin:0 0 20px}

/* ============================================================
   ESPACE CLIENT — le chantier vu par celui qui le paie
   ============================================================ */
.chantiers{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:18px}
.chantier{
  background:linear-gradient(180deg,rgba(20,45,68,.7),rgba(11,27,46,.7));
  border:1px solid var(--line-faint); padding:20px 22px 22px; display:block;
  transition:border-color .18s ease, transform .18s ease;
}
.chantier:hover{border-color:var(--line-soft); transform:translateY(-3px)}
.chantier .ref{font-family:var(--mono); font-size:10px; letter-spacing:.16em; color:var(--faint)}
.chantier h2{font-family:var(--narrow); font-weight:700; text-transform:uppercase; font-size:20px; letter-spacing:.04em; margin:8px 0 10px; color:#FFF}
.chantier .courante{margin:0 0 16px; font-size:13.5px; color:var(--dim)}
.chantier .courante b{color:var(--paper); font-weight:600}
.jauge{display:block; height:5px; background:#182F45; overflow:hidden}
.jauge span{display:block; height:100%; background:linear-gradient(90deg,var(--line),var(--orange))}
.chantier .pct{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; color:var(--faint); display:block; margin-top:8px; text-align:right}

/* --- étapes --- */
.etapes{display:grid; gap:14px}
.etape{border:1px solid var(--line-faint); border-left:3px solid var(--line-faint); background:rgba(11,27,46,.6); padding:18px 22px}
.etape.wip{border-left-color:var(--orange)}
.etape.wait{border-left-color:var(--line)}
.etape.done{border-left-color:var(--ok)}
.etape-tete{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:8px}
.etape-tete .n{font-family:var(--mono); font-size:10px; letter-spacing:.18em; color:var(--faint)}
.etape-tete h3{font-family:var(--narrow); font-weight:700; text-transform:uppercase; font-size:19px; letter-spacing:.04em; margin:0; color:#FFF}
.etape-tete .date{font-family:var(--mono); font-size:10px; letter-spacing:.1em; color:var(--faint); margin-left:auto}
.etape p{margin:0; font-size:14px; color:var(--dim); line-height:1.6}
.chip{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
  border:1px solid var(--line-faint); color:var(--dim); padding:4px 9px;
}
.chip.wip{border-color:var(--orange); color:var(--orange)}
.chip.wait{border-color:var(--line); color:var(--line)}
.chip.done{border-color:var(--ok); color:var(--ok)}
.etape .valide{margin-top:12px; font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--ok)}
.etape .valide .com{display:block; color:var(--dim); margin-top:4px; font-style:italic}
.valider{margin-top:16px; border-top:1px dashed var(--line-faint); padding-top:16px; display:grid; gap:10px; justify-items:start}
.valider label{font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint)}
.valider textarea{
  width:100%; background:transparent; border:1px solid var(--line-faint); color:var(--paper);
  font-family:var(--sans); font-size:14px; padding:10px 12px; resize:vertical;
}
.valider textarea:focus{outline:0; border-color:var(--line)}
.valider small{font-family:var(--mono); font-size:10px; letter-spacing:.06em; color:var(--faint)}

/* --- journal de chantier --- */
.journal-chantier{border-top:1px solid var(--line-faint)}
.entree{display:flex; gap:20px; padding:13px 2px; border-bottom:1px solid var(--line-faint); align-items:baseline}
.entree .quand{font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; color:var(--faint); flex:none; width:92px}
.entree p{margin:0; font-size:14px; color:var(--dim)}
.entree.jalon p{color:var(--paper); font-weight:600}
.entree.jalon .quand{color:var(--orange)}

/* --- fil d'échanges --- */
.fil{display:grid; gap:12px; margin-bottom:26px}
.bulle{border:1px solid var(--line-faint); padding:14px 18px; max-width:62ch}
.bulle.studio{border-left:3px solid var(--line); background:rgba(127,196,238,.05)}
.bulle.client{border-left:3px solid var(--orange); background:rgba(255,122,47,.05); margin-left:auto}
.bulle .qui{font-family:var(--mono); font-size:10px; letter-spacing:.1em; color:var(--faint); display:block; margin-bottom:6px}
.bulle p{margin:0; font-size:14px; color:var(--paper); line-height:1.6}
.flash.erreur{background:var(--orange); color:#1B0C03}

/* --- sélecteur de langue --- */
.langues{display:inline-flex; gap:2px; margin-left:18px}
.langues a{padding:0 6px; color:var(--faint); border-bottom:1px solid transparent}
.langues a:hover{color:var(--paper)}
.langues a.on{color:var(--line); border-bottom-color:var(--line)}

/* --- vignettes en <img> : chargement différé et pas de saut de mise en page --- */
.vignette{
  display:block; width:calc(100% - 28px); height:auto; aspect-ratio:16/10; object-fit:cover;
  margin:14px 14px 0; border:1px solid var(--line-faint); background:rgba(8,20,34,.55);
  filter:saturate(.9) contrast(1.02);
  transition:filter .22s ease, border-color .22s ease;
}
.proj:hover .vignette{filter:none; border-color:var(--line-soft)}
.mod img.vig{object-fit:cover; object-position:top center}

/* ============================================================
   PAGES LÉGALES — du texte long, lisible
   ============================================================ */
.legal-page{padding-bottom:70px}
.prose{max-width:78ch}
.prose h2{
  font-family:var(--narrow); font-weight:700; text-transform:uppercase; color:#FFF;
  font-size:20px; letter-spacing:.05em; margin:38px 0 14px; padding-top:18px;
  border-top:1px solid var(--line-faint);
}
.prose h2:first-child{border-top:0; padding-top:0; margin-top:0}
.prose p{font-size:15px; line-height:1.75; color:var(--dim); margin:0 0 14px}
.prose p b{color:var(--paper); font-weight:600}
.prose a{color:var(--line); border-bottom:1px solid transparent}
.prose a:hover{border-bottom-color:var(--line)}
.prose .chapeau{
  font-size:16.5px; color:var(--paper); border-left:3px solid var(--orange);
  padding:2px 0 2px 18px; margin-bottom:28px;
}
/* Lists: the marker is a tick, like the dimension lines elsewhere. */
.prose ul{margin:0 0 18px; padding:0; list-style:none; display:grid; gap:8px}
.prose li{position:relative; padding-left:20px; font-size:15px; line-height:1.7; color:var(--dim)}
.prose li::before{content:""; position:absolute; left:0; top:.78em; width:11px; height:1px; background:var(--line-soft)}
.prose li b{color:var(--paper); font-weight:600}
/* Inline code, then blocks. Blocks scroll on their own so the page never does. */
.prose code{
  font-family:var(--mono); font-size:.86em; color:var(--line); overflow-wrap:break-word;
  background:rgba(127,196,238,.07); border:1px solid var(--line-faint); padding:1px 5px;
}
.prose pre{
  margin:0 0 20px; padding:14px 16px; overflow-x:auto; max-width:100%;
  background:var(--panel); border:1px solid var(--line-faint); border-left:2px solid var(--line-soft);
}
.prose pre code{
  display:block; white-space:pre; overflow-wrap:normal;
  background:none; border:0; padding:0; font-size:12.5px; line-height:1.6; color:var(--paper);
}
@media (max-width:700px){
  .prose pre{padding:12px 13px}
  .prose pre code{font-size:11.5px}
}
.def{margin:0 0 20px; display:grid; gap:1px; background:var(--line-faint); border:1px solid var(--line-faint)}
.def > div{background:rgba(11,27,46,.7); padding:13px 18px; display:grid; grid-template-columns:15em 1fr; gap:18px}
.def dt{
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--faint); align-self:start; padding-top:3px;
}
.def dd{margin:0; font-size:14.5px; color:var(--paper); line-height:1.65}
.def dd b{color:var(--line); font-weight:400}
@media (max-width:700px){ .def > div{grid-template-columns:1fr; gap:5px} }

/* --- pages d'erreur : la planche absente du dossier --- */
.err{
  /* La page occupe ce qui reste sous l'en-tête : une erreur sur un tiers
     d'écran, avec du vide en dessous, a l'air d'un site cassé. */
  flex:1; display:flex; align-items:center; padding:50px 0;
}
.err-grille{display:grid; grid-template-columns:1fr 340px; gap:60px; align-items:center; width:100%}
.err-code{
  display:block; font-family:var(--mono); font-size:clamp(52px,10vw,96px); line-height:1;
  letter-spacing:.08em; color:var(--orange);
}
.err h1{font-family:var(--narrow); font-weight:700; text-transform:uppercase; letter-spacing:.02em; font-size:clamp(26px,3.8vw,40px); margin:12px 0 18px; color:#FFF}
.err-dit p{margin:0; line-height:1.8; max-width:56ch; color:var(--dim)}
.err-cartouche{border:1px solid var(--line-faint); background:rgba(11,27,46,.7)}
.err-vide{
  height:150px; display:grid; place-items:center; border-bottom:1px solid var(--line-faint);
  background:
    repeating-linear-gradient(45deg,transparent 0 9px,rgba(127,196,238,.07) 9px 10px),
    rgba(8,20,34,.6);
}
.err-vide span{font-family:var(--mono); font-size:34px; letter-spacing:.16em; color:var(--faint)}
.err-cartouche dl{margin:0; display:grid}
.err-cartouche dl > div{display:grid; grid-template-columns:6.5em 1fr; gap:12px; padding:9px 14px; border-bottom:1px solid var(--line-faint)}
.err-cartouche dl > div:last-child{border-bottom:0}
.err-cartouche dt{font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint)}
.err-cartouche dd{margin:0; font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; color:var(--line)}
@media (max-width:860px){
  .err-grille{grid-template-columns:1fr; gap:34px}
  .err-planche{max-width:320px}
}

/* --- écran de remise en ordre par glisser-déposer --- */
.ordre-onglets{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 22px}
.ordre-onglets a{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  padding:7px 12px; border:1px solid var(--line-faint); color:var(--dim);
}
.ordre-onglets a:hover{border-color:var(--line); color:var(--paper)}
.ordre-onglets a.on{border-color:var(--orange); color:var(--orange)}
.ordre-liste{list-style:none; margin:0; padding:0; display:grid; gap:1px; background:var(--line-faint); border:1px solid var(--line-faint)}
.ordre-item{
  display:flex; align-items:center; gap:14px; padding:11px 14px; background:rgba(11,27,46,.75);
  cursor:grab; user-select:none;
}
.ordre-item:hover{background:rgba(127,196,238,.06)}
.ordre-item.tire{opacity:.45; cursor:grabbing}
.ordre-item .poignee{color:var(--faint); font-size:15px; line-height:1}
.ordre-item .rang{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; color:var(--faint); width:2.4em}
.ordre-item .nom{flex:1; font-family:var(--narrow); text-transform:uppercase; letter-spacing:.04em; font-size:15px; color:#FFF}
.ordre-item .repere{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; color:var(--line)}

/* --- champ mot de passe avec bouton d'affichage --- */
.champ-mdp{display:flex; gap:10px; align-items:stretch}
.champ-mdp input{flex:1}
.voir-mdp{
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--dim); background:transparent; border:1px solid var(--line-faint);
  padding:0 12px; cursor:pointer; white-space:nowrap;
  transition:border-color .15s ease, color .15s ease;
}
.voir-mdp:hover{border-color:var(--line); color:var(--paper)}
.voir-mdp[aria-pressed="true"]{border-color:var(--orange); color:var(--orange)}

/* ============================================================
   MESSAGERIE — une conversation par chantier
   ============================================================ */
.messagerie{padding-bottom:70px}
.msg-grille{display:grid; grid-template-columns:320px 1fr; gap:1px; background:var(--line-faint); border:1px solid var(--line-faint); min-height:520px}
.msg-liste{background:rgba(8,20,34,.8); overflow-y:auto; max-height:640px}
.msg-conv{
  display:grid; gap:3px; padding:14px 16px; border-bottom:1px solid var(--line-faint);
  border-left:2px solid transparent;
}
.msg-conv:hover{background:rgba(127,196,238,.05)}
.msg-conv.on{background:rgba(255,122,47,.08); border-left-color:var(--orange)}
.msg-conv .ref{font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; color:var(--faint); display:flex; align-items:center; gap:8px}
.msg-conv .pastille{
  background:var(--orange); color:#1B0C03; font-family:var(--mono); font-size:9px; font-weight:700;
  border-radius:9px; padding:1px 7px; letter-spacing:0;
}
.msg-conv .qui{font-family:var(--narrow); font-weight:700; text-transform:uppercase; font-size:15px; letter-spacing:.04em; color:#FFF}
.msg-conv .nom{font-size:12px; color:var(--dim)}
.msg-conv .extrait{font-size:12px; color:var(--faint); line-height:1.45; margin-top:4px}
.msg-conv .quand{font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; color:var(--faint)}

.msg-fil{background:rgba(11,27,46,.6); padding:22px 26px; display:flex; flex-direction:column}
.msg-tete{display:flex; align-items:flex-start; gap:18px; flex-wrap:wrap; border-bottom:1px solid var(--line-faint); padding-bottom:16px; margin-bottom:20px}
.msg-tete h2{font-family:var(--narrow); font-weight:700; text-transform:uppercase; font-size:20px; letter-spacing:.05em; margin:0 0 4px; color:#FFF}
.msg-tete p{margin:0; font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; color:var(--faint)}
.msg-tete .btn{margin-left:auto}
.msg-fil .fil{flex:1; align-content:start; margin-bottom:20px}
.msg-repondre{border-top:1px dashed var(--line-faint); padding-top:18px; display:grid; gap:10px}
.msg-repondre label{font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint)}
.msg-repondre textarea{
  background:transparent; border:1px solid var(--line-faint); color:var(--paper);
  font-family:var(--sans); font-size:14.5px; padding:12px 14px; resize:vertical; width:100%;
}
.msg-repondre textarea:focus{outline:0; border-color:var(--line)}
.msg-vide{margin:auto; color:var(--faint)}
@media (max-width:900px){ .msg-grille{grid-template-columns:1fr} .msg-liste{max-height:none} }

/* --- chantier terminé : présent mais en retrait --- */
.chantier.clos{opacity:.65}
.chantier.clos:hover{opacity:1}

/* --- volets d'un même produit, sur une fiche de réalisation --- */
.volets{display:grid; gap:1px; background:var(--line-faint); border:1px solid var(--line-faint); margin-top:12px}
.volet{
  display:grid; grid-template-columns:5em 1fr; align-items:baseline; gap:4px 14px;
  background:rgba(11,27,46,.7); padding:12px 16px; text-decoration:none; border:0;
}
.volet:hover{background:var(--panel)}
.volet-ref{font-family:var(--mono); font-size:10px; letter-spacing:.14em; color:var(--faint)}
.volet-titre{font-family:var(--narrow); text-transform:uppercase; letter-spacing:.04em; font-size:15px; color:var(--line)}
.volet:hover .volet-titre{color:var(--orange)}
.volet-res{grid-column:2; font-size:13px; line-height:1.55; color:var(--dim)}
@media (max-width:620px){
  .volet{grid-template-columns:1fr; gap:3px}
  .volet-res{grid-column:1}
}

/* --- bandeau d'aperçu, visible seulement depuis le back-office --- */
.apercu{background:rgba(255,122,47,.1); border-bottom:1px solid var(--orange)}
.apercu .wrap{
  display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; padding-top:9px; padding-bottom:9px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
}
.apercu b{color:var(--orange); letter-spacing:.2em}
.apercu span{color:var(--paper)}
.apercu em{margin-left:auto; font-style:normal; color:var(--faint); text-transform:none; letter-spacing:.04em; font-size:11px}

/* ============================================================
   PAGE D'ARTICLE — le corps occupe la largeur de la planche
   ============================================================ */
.cover{
  margin:4px 0 34px; border:1px solid var(--line-faint); overflow:hidden;
  background:var(--ground); line-height:0;
}
.cover img{display:block; width:100%; height:auto; aspect-ratio:1200/380; object-fit:cover}

/* Le corps d'article n'est pas bridé à 78 caractères comme les pages
   légales : il prend toute la largeur utile, avec un texte un cran plus
   grand et un interlignage plus aéré pour rester lisible sur cette mesure. */
.prose.corps{max-width:none}
.prose.corps p,.prose.corps li{font-size:16px; line-height:1.85}
.prose.corps .chapeau{font-size:18px; line-height:1.6}
.prose.corps h2{font-size:22px; margin-top:44px}
.prose.corps pre code{font-size:13px}

/* vignette des cartes du journal */
.post-vue{display:block; margin:-20px -20px 4px; border-bottom:1px solid var(--line-faint); line-height:0; overflow:hidden}
.post-vue img{display:block; width:100%; height:auto; aspect-ratio:1200/380; object-fit:cover}

@media (max-width:920px){
  .cover{margin-bottom:26px}
  .prose.corps p,.prose.corps li{font-size:15.5px; line-height:1.75}
}
}

/* --- compteurs et partage d'un article --- */
.metriques{
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  margin:44px 0 0; padding-top:26px; border-top:1px solid var(--line-faint);
  font-family:var(--mono); font-size:11px; letter-spacing:.13em; text-transform:uppercase;
}
/* Traits seuls, à l'épaisseur du reste de l'habillage. */
.m-icone{
  width:15px; height:15px; flex:none; fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round; opacity:.85;
}
.m-chiffre{display:inline-flex; align-items:center; gap:9px; color:var(--faint)}
.m-chiffre b{color:var(--paper); font-weight:400}
.m-btn{
  display:inline-flex; align-items:center; gap:9px;
  font:inherit; letter-spacing:inherit; text-transform:inherit; cursor:pointer;
  color:var(--dim); background:transparent; border:1px solid var(--line-faint);
  padding:10px 18px; transition:border-color .15s ease, color .15s ease;
}
.m-btn:hover{border-color:var(--line); color:var(--paper)}
.m-btn b{color:var(--line); font-weight:400}
.m-btn[aria-pressed="true"]{border-color:var(--orange); color:var(--orange)}
.m-btn[aria-pressed="true"] b{color:var(--orange)}

.partage{position:relative; margin-top:14px; border:1px solid var(--line-soft); background:var(--panel); padding:16px 18px}
.partage-titre{
  margin:0 0 12px; font-family:var(--mono); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--orange);
}
.partage-liens{display:flex; gap:8px; flex-wrap:wrap}
.partage-liens a,.partage-liens button{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--dim);
  border:1px solid var(--line-faint); background:transparent; padding:8px 12px; cursor:pointer;
  transition:border-color .15s ease, color .15s ease;
}
.partage-liens a:hover,.partage-liens button:hover{border-color:var(--line); color:var(--paper)}
.partage-dit{margin:10px 0 0; min-height:1em; font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; color:var(--ok)}
.partage-fermer{
  position:absolute; top:10px; right:12px; background:transparent; border:0;
  color:var(--faint); font-size:14px; cursor:pointer; line-height:1;
}
.partage-fermer:hover{color:var(--paper)}

/* crédit d'illustration, sous la couverture */
.credit{
  margin:-28px 0 30px; font-family:var(--mono); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--faint);
}
.credit a{border-bottom:1px solid var(--line-faint)}
.credit a:hover{color:var(--line); border-bottom-color:var(--line)}

/* pièce publiée sous licence libre */
.libre{
  display:inline-flex; align-items:center; gap:10px; margin-top:8px;
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
}
.libre b{color:var(--ok); font-weight:400; border:1px solid rgba(79,208,138,.4); padding:3px 8px}
.libre a{color:var(--orange); border-bottom:1px solid transparent}
.libre a:hover{border-bottom-color:var(--orange)}

/* --- adresse révélée au clic, jamais écrite dans la source --- */
.courriel-btn{
  font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--orange); background:transparent; border:1px solid var(--line-faint);
  padding:3px 9px; cursor:pointer;
}
.courriel-btn:hover{border-color:var(--orange)}
.courriel-lien{border-bottom:1px solid var(--line-faint)}
.courriel-lien:hover{color:var(--orange); border-bottom-color:var(--orange)}

/* Champ leurre du formulaire de contact : hors de vue, hors du flux, hors
   du parcours au clavier — mais présent pour qui remplit tout sans regarder. */
.appat{
  position:absolute !important; left:-9999px !important;
  width:1px; height:1px; overflow:hidden; opacity:0; pointer-events:none;
}