/* Design « Synthèse » — feuille partagée : accueil, expertises, réalisations, fiches. */

:root{
  --noir:#0B0B0B; --creme:#F7F6F3; --bordeaux:#A1112B; --bordeaux-vif:#D01F41;
  --sourd:#8f8b84; --ligne:#211f1c; --panneau:#141312; --encadre:#2a2724;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  background:var(--noir); color:var(--creme);
  font-family:"Montserrat",system-ui,sans-serif; font-weight:400;
  line-height:1.6; overflow-x:hidden;
}
::selection{background:var(--bordeaux); color:#fff}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.wrap{width:min(1200px,100% - 32px); margin-inline:auto}
.kicker{font-size:.82rem; letter-spacing:.16em; text-transform:uppercase; color:var(--bordeaux-vif); font-weight:700}

/* ---------- curseur viseur ---------- */
@media (pointer:fine){
  body,a,button{cursor:none}
  .viseur{position:fixed; top:0; left:0; z-index:9999; pointer-events:none; will-change:transform}
  .viseur::before,.viseur::after{content:""; position:absolute; background:var(--creme); mix-blend-mode:difference; transition:transform .25s}
  .viseur::before{width:22px; height:1.5px; top:0; left:-11px}
  .viseur::after{width:1.5px; height:22px; left:0; top:-11px}
  .viseur .pt{position:absolute; width:5px; height:5px; border-radius:50%; background:var(--bordeaux-vif); top:-2.5px; left:-2.5px}
  body.viseur-lien .viseur::before{transform:rotate(45deg) scale(1.35)}
  body.viseur-lien .viseur::after{transform:rotate(45deg) scale(1.35)}
  html.sans-anim body, html.sans-anim a, html.sans-anim button{cursor:auto}
  html.sans-anim .viseur{display:none}
}
@media (pointer:coarse){ .viseur{display:none} }

/* ---------- header ---------- */
header{
  position:fixed; inset:0 0 auto 0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px clamp(16px,4vw,48px);
  transition:background .4s, backdrop-filter .4s;
}
header.scrolled{background:rgba(11,11,11,.85); backdrop-filter:blur(12px); border-bottom:1px solid var(--ligne)}
header img{height:30px; width:auto}
.nav-liens{display:none; align-items:center; gap:26px; font-size:.9rem; font-weight:600}
.nav-liens a{color:#c9c6bf; transition:color .2s}
.nav-liens a:hover,.nav-liens a.actuel{color:var(--creme)}
@media(min-width:960px){ .nav-liens{display:flex} }
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-weight:700; font-size:.92rem;
  padding:13px 26px; border-radius:999px; border:1px solid transparent;
  transition:transform .2s ease, background .2s ease, color .2s, border-color .2s;
  will-change:transform;
}
.btn-primary{background:var(--bordeaux); color:#fff}
.btn-primary:hover{background:var(--bordeaux-vif)}
.btn-ghost{border-color:rgba(247,246,243,.28); color:var(--creme)}
.btn-ghost:hover{border-color:var(--creme)}
.btn .arrow{transition:transform .25s}
.btn:hover .arrow{transform:translateX(4px)}

/* ---------- hero (accueil) ---------- */
.hero{position:relative; min-height:100svh; display:flex; align-items:center; overflow:hidden}
#cosmos{position:absolute; inset:0; width:100%; height:100%; display:block}
.hero::after{content:""; position:absolute; inset:0; background:radial-gradient(ellipse at 68% 42%, transparent 30%, rgba(11,11,11,.88) 78%); pointer-events:none}
.hero .wrap{position:relative; z-index:2; padding-block:140px 130px}
@media(max-width:759px){ .hero .wrap{padding-block:120px 110px} }
.hero h1{
  font-size:clamp(2.4rem,6.2vw,5.4rem); font-weight:800; line-height:1.02;
  letter-spacing:-.025em; max-width:15ch; text-wrap:balance;
}
.hero h1 .ligne{display:block; overflow:hidden}
.hero h1 .ligne>span{display:block; transform:translateY(110%)}
.hero h1 em{font-style:normal; color:var(--bordeaux-vif)}
.hero .lead{margin-top:28px; max-width:54ch; font-size:clamp(1rem,1.4vw,1.18rem); color:#c9c6bf; opacity:0}
.hero .ctas{margin-top:36px; display:flex; flex-wrap:wrap; gap:14px; align-items:center; opacity:0}
.hero .preuves{margin-top:52px; display:flex; flex-wrap:wrap; gap:10px 28px; font-size:.86rem; color:var(--sourd); opacity:0}
.hero .preuves span{display:flex; align-items:center; gap:9px}
.hero .preuves i{width:7px;height:7px;border-radius:50%;background:var(--bordeaux-vif);flex:none}
html.sans-anim .hero h1 .ligne>span{transform:none}
html.sans-anim .hero .lead,html.sans-anim .hero .ctas,html.sans-anim .hero .preuves{opacity:1}
.scroll-cue{position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:2; color:var(--sourd); font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; display:flex; flex-direction:column; align-items:center; gap:10px}
.scroll-cue::after{content:""; width:1px; height:44px; background:linear-gradient(var(--sourd),transparent); animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media(max-width:759px){ .scroll-cue{display:none} }

/* ---------- bandeau VLL (accueil) ---------- */
.vll{background:var(--bordeaux); color:#fff; position:relative; overflow:hidden}
.vll .filigrane{
  position:absolute; right:-4%; top:-6%; font-size:clamp(8rem,26vw,24rem); font-weight:850; letter-spacing:-.05em;
  color:rgba(255,255,255,.05); pointer-events:none; user-select:none; line-height:1;
}
.vll .wrap{position:relative; padding-block:clamp(80px,12vh,150px); display:grid; gap:60px; grid-template-columns:1fr}
@media(min-width:980px){ .vll .wrap{grid-template-columns:5fr 7fr; align-items:center} }
.vll .kicker{color:rgba(255,255,255,.75)}
.vll h2{margin-top:14px; font-size:clamp(2rem,4.6vw,3.6rem); font-weight:850; letter-spacing:-.025em; line-height:1.04; text-wrap:balance}
.vll .texte p{margin-top:22px; color:rgba(255,255,255,.88); max-width:52ch}
.vll .texte strong{color:#fff}
.vll .chiffres-ligne{margin-top:34px; display:grid; grid-template-columns:repeat(3,1fr); gap:18px 24px}
@media(max-width:520px){ .vll .chiffres-ligne{grid-template-columns:repeat(2,1fr)} }
.vll .chiffres-ligne div b{display:block; font-size:1.6rem; font-weight:850; letter-spacing:-.02em}
.vll .chiffres-ligne div span{font-size:.82rem; color:rgba(255,255,255,.72)}
.vll .chiffres-ligne .tic{color:#fff; font-weight:700; font-variant-numeric:tabular-nums}
.reseau{position:relative}
.reseau svg{width:100%; height:auto; overflow:visible}
.reseau .lien{fill:none; stroke:rgba(255,255,255,.38); stroke-width:1.4}
.reseau .lien.fort{stroke:#fff; stroke-width:2.2}
.reseau .noeud rect{fill:#0B0B0B; stroke:rgba(255,255,255,.22); rx:10}
.reseau .noeud.hub rect{stroke:#fff; stroke-width:1.4}
.reseau .noeud.crm rect{fill:var(--creme); stroke:#fff; stroke-width:1.6}
.reseau text{font-family:"Montserrat",sans-serif; fill:var(--creme)}
.reseau .t1{font-size:13.5px; font-weight:700}
.reseau .td{font-size:11.5px; font-weight:700; letter-spacing:.01em}
.reseau .t2{font-size:10.5px; fill:rgba(247,246,243,.62)}
.reseau .noeud.crm text{fill:var(--noir)}
.reseau .noeud.crm .t2{fill:#6f6b63}
.reseau .badge{font-size:9.5px; font-weight:800; fill:var(--bordeaux); letter-spacing:.09em}
.reseau .pulse{fill:var(--bordeaux-vif)}
html.sans-anim .reseau .apparait{opacity:1!important}
.reseau-liste{display:none}
@media(max-width:639px){
  .reseau svg{display:none}
  .reseau-liste{display:grid; gap:10px; position:relative; padding-left:20px}
  .reseau-liste::before{content:""; position:absolute; left:4px; top:16px; bottom:16px; width:1.5px; background:rgba(255,255,255,.35)}
  .rl-item{position:relative; background:#0B0B0B; border:1px solid rgba(255,255,255,.22); border-radius:10px; padding:12px 16px}
  .rl-item::before{content:""; position:absolute; left:-19px; top:18px; width:8px; height:8px; border-radius:50%; background:#fff}
  .rl-item b{display:block; font-size:.9rem; font-weight:700; overflow-wrap:anywhere}
  .rl-item > span{font-size:.78rem; color:rgba(247,246,243,.62)}
  .rl-item.hub{border-color:#fff}
  .rl-item.rl-crm{background:var(--creme); border-color:#fff}
  .rl-item.rl-crm b{color:var(--noir)}
  .rl-item.rl-crm > span{color:#6f6b63}
  .rl-item.rl-crm i{font-style:normal; display:block; font-size:.62rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--bordeaux); margin-bottom:4px}
}

/* ---------- scène pilotage (accueil) ---------- */
.chantier{position:relative; border-top:1px solid var(--ligne)}
.chantier-pin{height:100svh; display:flex; flex-direction:column; justify-content:center; overflow:hidden}
html.sans-anim .chantier-pin{height:auto; padding-block:80px}
.chantier .entete-scene{text-align:center; margin-bottom:4vh; padding-inline:16px}
.chantier .entete-scene h2{font-size:clamp(1.6rem,3vw,2.5rem); font-weight:800; letter-spacing:-.02em}
.chantier .entete-scene p{color:var(--sourd); font-size:.9rem; margin-top:8px}
.fenetre{
  width:min(1060px,94vw); margin-inline:auto; background:var(--panneau);
  border:1px solid var(--encadre); border-radius:16px; overflow:hidden;
  box-shadow:0 50px 140px rgba(0,0,0,.6);
  transform-origin:center 30%;
}
.fenetre .barre{display:flex; align-items:center; gap:6px; padding:12px 16px; border-bottom:1px solid var(--encadre)}
.fenetre .barre i{width:10px; height:10px; border-radius:50%; background:#33302c}
.fenetre .barre .url{margin-left:12px; font-size:.72rem; color:var(--sourd); background:var(--noir); border-radius:6px; padding:4px 14px}
.fenetre .barre .badge-demo{margin-left:auto; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--sourd); border:1px solid var(--encadre); border-radius:999px; padding:3px 10px}
.crm{display:grid; grid-template-columns:200px 1fr; min-height:min(58svh,540px)}
@media(max-width:820px){ .crm{grid-template-columns:56px 1fr} .crm .lat span{display:none} }
.crm .lat{background:#0e0d0c; border-right:1px solid var(--encadre); padding:18px 0}
.crm .lat .item{display:flex; align-items:center; gap:12px; padding:11px 18px; font-size:.85rem; color:var(--sourd)}
.crm .lat .item svg{width:17px; height:17px; flex:none}
.crm .lat .item.actif{color:var(--creme); background:linear-gradient(90deg, rgba(161,17,43,.22), transparent); border-left:3px solid var(--bordeaux)}
.crm .corps{padding:20px 22px; display:flex; flex-direction:column; gap:16px; position:relative}
.crm .haut{display:flex; align-items:center; justify-content:space-between; gap:14px}
.crm .haut h3{font-size:1.02rem; font-weight:800}
.crm .haut .pastilles{display:flex; gap:8px}
.crm .pastille{font-size:.68rem; font-weight:700; border-radius:999px; padding:5px 12px; background:var(--noir); border:1px solid var(--encadre); color:var(--sourd)}
.crm .pastille.ok{color:#7ec699; border-color:#274233}
.crm .cartes{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
@media(max-width:640px){ .crm .cartes{grid-template-columns:1fr} }
.crm .kpi{background:var(--noir); border:1px solid var(--encadre); border-radius:10px; padding:14px 16px}
.crm .kpi b{display:block; font-size:1.5rem; font-weight:850; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.crm .kpi span{font-size:.72rem; color:var(--sourd)}
.crm .kpi .tendance{color:#7ec699; font-size:.72rem; font-weight:700; margin-left:8px}
.crm .zone{display:grid; grid-template-columns:3fr 2fr; gap:12px; flex:1}
@media(max-width:640px){ .crm .zone{grid-template-columns:1fr} }
.crm .table{background:var(--noir); border:1px solid var(--encadre); border-radius:10px; overflow:hidden; align-self:start}
.crm .table .th,.crm .table .tr{display:grid; grid-template-columns:2.2fr 1.2fr 1fr .9fr; gap:8px; padding:10px 14px; font-size:.78rem; align-items:center}
.crm .table .th{color:var(--sourd); border-bottom:1px solid var(--encadre); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase}
.crm .table .tr{border-bottom:1px solid #191715}
.crm .table .tr b{font-weight:700}
.crm .table .etat{font-size:.66rem; font-weight:700; border-radius:999px; padding:3px 9px; width:max-content}
.crm .etat.confirme{background:rgba(126,198,153,.14); color:#7ec699}
.crm .etat.option{background:rgba(247,246,243,.08); color:var(--sourd)}
.crm .etat.attente{background:rgba(208,31,65,.16); color:var(--bordeaux-vif)}
.crm .graphe{background:var(--noir); border:1px solid var(--encadre); border-radius:10px; padding:16px; display:flex; flex-direction:column}
.crm .graphe .titre-g{font-size:.72rem; color:var(--sourd); letter-spacing:.06em; text-transform:uppercase; margin-bottom:12px}
.crm .barres{display:flex; align-items:flex-end; gap:8px; flex:1; min-height:120px}
.crm .barres i{flex:1; background:linear-gradient(180deg,var(--bordeaux-vif),var(--bordeaux)); border-radius:4px 4px 0 0; transform-origin:bottom; transform:scaleY(0)}
.crm .barres i:nth-child(odd){opacity:.75}
html.sans-anim .crm .barres i{transform:scaleY(1)}
.crm .toast{
  position:absolute; right:18px; bottom:16px; background:#161513; border:1px solid var(--encadre);
  border-left:3px solid var(--bordeaux); border-radius:10px; padding:12px 16px; font-size:.8rem;
  box-shadow:0 20px 50px rgba(0,0,0,.5); opacity:0; transform:translateY(16px);
}
html.sans-anim .crm .toast{opacity:1; transform:none}
.crm .toast b{display:block; font-size:.82rem}
.crm .toast span{color:var(--sourd); font-size:.72rem}
.chantier .legende-scene{text-align:center; color:var(--sourd); font-size:.8rem; margin-top:3vh; padding-inline:16px}
.chantier .legende-scene b{color:var(--creme)}

/* ---------- laptop (partagé) ---------- */
.laptop{position:relative; border-radius:14px 14px 0 0; background:#1c1a18; padding:14px 14px 0; border:1px solid #33302c; border-bottom:0}
.laptop .barre{display:flex; gap:6px; align-items:center; padding-bottom:10px}
.laptop .barre i{width:9px; height:9px; border-radius:50%; background:#3a3733}
.laptop .barre .url{margin-left:10px; font-size:.72rem; color:var(--sourd); background:#111; border-radius:6px; padding:3px 12px}
.laptop .ecran{aspect-ratio:16/10; overflow:hidden; border-radius:6px 6px 0 0; background:#111}
.laptop .ecran img{width:100%; height:110%; object-fit:cover; object-position:top; will-change:transform}
.laptop-fixe .ecran img{height:100%; will-change:auto}
.laptop-anonyme .ecran img{filter:blur(14px) saturate(.5); transform:scale(1.06)}
.ecran-vide{display:flex; align-items:center; justify-content:center; height:100%; color:#33302c; font-weight:850; font-size:3rem; letter-spacing:.04em}
.socle{height:14px; background:linear-gradient(#2a2724,#191715); border-radius:0 0 14px 14px; border:1px solid #33302c; border-top:0}

/* ---------- galerie horizontale (accueil) ---------- */
.galerie{position:relative; border-top:1px solid var(--ligne)}
.galerie-pin{height:100svh; overflow:hidden; display:flex; flex-direction:column; justify-content:center}
html.sans-anim .galerie-pin{height:auto; padding-block:80px}
html.sans-anim .piste-cas{overflow-x:auto; width:auto}
.galerie .entete-gal{padding:0 clamp(16px,4vw,48px); margin-bottom:34px; display:flex; align-items:baseline; justify-content:space-between; gap:20px}
.galerie h2{font-size:clamp(1.6rem,3vw,2.6rem); font-weight:800; letter-spacing:-.02em}
.galerie .compteur{font-variant-numeric:tabular-nums; color:var(--sourd); font-weight:700}
.piste-cas{display:flex; gap:clamp(20px,3vw,44px); padding:0 clamp(16px,4vw,48px); width:max-content; align-items:stretch}
.carte-cas{width:min(78vw,720px); flex:none}
.carte-cas .legende{display:flex; justify-content:space-between; gap:16px; align-items:baseline; margin-top:18px}
.carte-cas .legende b{font-size:1.15rem; font-weight:800}
.carte-cas .stat-cle{color:var(--bordeaux-vif); font-weight:800; white-space:nowrap}
.carte-cas p{color:#b5b1aa; font-size:.92rem; margin-top:8px; max-width:58ch}

/* ---------- chiffres infra (accueil) ---------- */
.preuve{border-top:1px solid var(--ligne); padding-block:clamp(70px,10vh,120px)}
.preuve h2{font-size:clamp(1.7rem,3vw,2.5rem); font-weight:800; letter-spacing:-.015em; margin-bottom:40px; max-width:26ch}
.preuve .grille{display:grid; gap:0; grid-template-columns:1fr; border-top:1px solid var(--ligne)}
@media(min-width:760px){ .preuve .grille{grid-template-columns:repeat(4,1fr)} }
.preuve .case{padding:30px 24px 36px; border-bottom:1px solid var(--ligne)}
@media(min-width:760px){ .preuve .case{border-right:1px solid var(--ligne)} .preuve .case:first-child{padding-left:4px} .preuve .case:last-child{border-right:0} }
.preuve .case b{display:block; font-size:clamp(2.1rem,3.6vw,3.1rem); font-weight:850; letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.preuve .case b i{font-style:normal; color:var(--bordeaux-vif)}
.preuve .case b span{font-size:inherit; color:inherit}
.preuve .case > span{color:var(--sourd); font-size:.88rem}

/* ---------- structure (accueil) ---------- */
.structure{border-top:1px solid var(--ligne); padding-block:clamp(70px,10vh,130px)}
.structure .entete-st{max-width:62ch}
.structure h2{margin-top:14px; font-size:clamp(1.8rem,3.4vw,2.8rem); font-weight:800; letter-spacing:-.02em; line-height:1.08}
.structure .entete-st p{margin-top:18px; color:#c9c6bf; max-width:56ch}
.poles{margin-top:46px; display:grid; gap:0 56px; grid-template-columns:1fr; border-top:1px solid var(--ligne)}
@media(min-width:820px){ .poles{grid-template-columns:1fr 1fr} }
.pole{display:grid; grid-template-columns:auto 1fr; gap:6px 18px; padding:24px 4px; border-bottom:1px solid var(--ligne); align-items:baseline}
.pole i{font-style:normal; width:9px; height:9px; border-radius:50%; background:var(--bordeaux-vif); align-self:center; grid-row:1}
.pole b{font-size:1.06rem; font-weight:800; grid-row:1; grid-column:2}
.pole span{grid-column:2; color:var(--sourd); font-size:.9rem}

/* ---------- contact (accueil) ---------- */
.fin{border-top:1px solid var(--ligne); padding-block:clamp(90px,13vh,160px)}
.fin .wrap{display:grid; gap:56px; grid-template-columns:1fr}
@media(min-width:960px){ .fin .wrap{grid-template-columns:6fr 6fr; align-items:start} }
.fin h2{font-size:clamp(2rem,4.6vw,3.8rem); font-weight:850; letter-spacing:-.025em; line-height:1.03; max-width:16ch}
.fin .intro p{margin-top:22px; color:#c9c6bf; max-width:46ch}
.fin .coord{margin-top:34px; display:flex; flex-direction:column; gap:4px}
.fin .coord small{font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--sourd)}
.fin .coord a{font-size:1.35rem; font-weight:800; width:max-content}
.fin .coord a:hover{color:var(--bordeaux-vif)}
.fin .coord .courriel{font-size:1rem; font-weight:600}
.form-sombre label{display:block; font-size:.8rem; font-weight:600; color:#c9c6bf; margin:16px 0 6px}
.form-sombre input,.form-sombre textarea{
  width:100%; background:var(--panneau); border:1px solid var(--encadre); border-radius:10px;
  padding:12px 14px; color:var(--creme); font:inherit; font-size:.95rem; transition:border-color .2s;
}
.form-sombre input:focus,.form-sombre textarea:focus{border-color:var(--bordeaux-vif); outline:none}
.form-sombre ::placeholder{color:#6f6b63}
.form-sombre textarea{min-height:140px; resize:vertical}
.form-sombre .row{display:grid; gap:0 14px; grid-template-columns:1fr 1fr}
@media(max-width:560px){ .form-sombre .row{grid-template-columns:1fr} }
.form-sombre .hint{font-size:.78rem; color:var(--sourd); margin-top:10px}
.form-sombre .form-status .ok{color:#7ec699; font-weight:700; margin-bottom:6px}
.form-sombre .form-status .err{color:var(--bordeaux-vif); font-weight:700; margin-bottom:6px}
.form-sombre .btn{margin-top:22px}

/* ---------- tête de page interne ---------- */
.page-tete{padding:clamp(130px,18vh,180px) 0 clamp(44px,6vh,70px)}
.page-tete h1{margin-top:14px; font-size:clamp(2.1rem,4.8vw,3.9rem); font-weight:850; letter-spacing:-.025em; line-height:1.05; max-width:22ch; text-wrap:balance}
.page-tete .lead{margin-top:18px; color:#c9c6bf; max-width:62ch; font-size:clamp(.98rem,1.3vw,1.12rem)}
.page-tete .ariane{display:flex; flex-wrap:wrap; gap:6px 10px; font-size:.78rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--sourd); margin-bottom:18px}
.page-tete .ariane a:hover{color:var(--creme)}
.page-tete .meta{display:flex; flex-wrap:wrap; gap:8px 22px; align-items:center; margin-bottom:16px; font-size:.8rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase}
.page-tete .meta .client{color:var(--bordeaux-vif)}
.page-tete .meta .periode{color:var(--sourd)}
.page-tete .sous-titre{margin-top:14px; font-size:1.12rem; font-weight:600; color:#e4e1da; max-width:60ch}

/* ---------- statuts ---------- */
.statut{font-size:.66rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; border-radius:999px; padding:4px 11px; background:rgba(126,198,153,.14); color:#7ec699}
.statut.encours{background:rgba(208,31,65,.16); color:var(--bordeaux-vif)}
.statut.prototype,.statut.archive{background:rgba(247,246,243,.08); color:var(--sourd)}

/* ---------- filtres + liste des réalisations ---------- */
.chips{display:flex; flex-wrap:wrap; gap:10px}
.chip{display:inline-flex; align-items:center; gap:8px; border:1px solid var(--encadre); border-radius:999px; padding:9px 16px; font-size:.85rem; font-weight:600; color:#c9c6bf; transition:border-color .2s, background .2s, color .2s}
.chip .n{font-size:.7rem; color:var(--sourd); font-weight:700}
.chip:hover{border-color:var(--sourd)}
.chip[aria-pressed="true"]{background:var(--creme); color:var(--noir); border-color:var(--creme)}
.chip[aria-pressed="true"] .n{color:#6f6b63}
.liste-info{margin-top:20px; font-size:.85rem; color:var(--sourd)}
.liste-projets{border-top:1px solid var(--ligne); margin-top:16px}
.ligne-cas{
  display:grid; grid-template-columns:1fr; gap:6px 24px;
  padding:24px 6px; border-bottom:1px solid var(--ligne); position:relative;
  transition:padding .3s ease;
}
@media(min-width:760px){ .ligne-cas{grid-template-columns:minmax(220px,3fr) 6fr 2fr; align-items:center} }
.ligne-cas::before{content:""; position:absolute; inset:0; background:var(--panneau); transform:scaleY(0); transform-origin:bottom; transition:transform .35s ease; z-index:-1}
.ligne-cas:hover::before{transform:scaleY(1)}
.ligne-cas:hover{padding-left:18px}
.ligne-cas[hidden]{display:none}
.ligne-cas .nom{display:flex; align-items:center; gap:10px; font-size:clamp(1.1rem,1.9vw,1.45rem); font-weight:800; letter-spacing:-.01em}
.ligne-cas .nom .point{width:8px; height:8px; border-radius:50%; background:var(--bordeaux-vif); flex:none}
.ligne-cas .client{display:block; font-size:.76rem; color:var(--sourd); font-weight:500; margin-top:2px}
.ligne-cas .quoi{color:#b5b1aa; font-size:.9rem; max-width:56ch; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.ligne-cas .num{font-weight:800; color:var(--bordeaux-vif); font-size:1rem; white-space:nowrap}
@media(min-width:760px){ .ligne-cas .num{text-align:right} }
.ligne-cas .num span{display:block; font-size:.7rem; font-weight:500; color:var(--sourd); letter-spacing:.02em; white-space:normal}
.ligne-cas.anonyme .nom{color:#a5a19a}
.liste-vide{padding:44px; text-align:center; color:var(--sourd); border:1px dashed var(--encadre); border-radius:14px; margin-top:24px}
.apercu-flottant{
  position:fixed; z-index:40; width:min(380px,34vw); aspect-ratio:16/10; border-radius:12px; overflow:hidden;
  pointer-events:none; opacity:0; transform:scale(.9) rotate(-2deg);
  box-shadow:0 30px 80px rgba(0,0,0,.6); border:1px solid #33302c;
}
.apercu-flottant img{width:100%; height:100%; object-fit:cover; object-position:top}
@media(pointer:coarse),(max-width:759px){ .apercu-flottant{display:none} }

/* ---------- cartes expertises ---------- */
.grille-x{display:grid; gap:18px; grid-template-columns:1fr; margin-top:48px}
@media(min-width:700px){ .grille-x{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1024px){ .grille-x{grid-template-columns:repeat(3,1fr)} }
.carte-x{background:var(--panneau); border:1px solid var(--encadre); border-radius:14px; padding:28px 26px 24px; display:flex; flex-direction:column; transition:transform .25s ease, border-color .25s ease}
.carte-x:hover{transform:translateY(-4px); border-color:rgba(247,246,243,.4)}
.carte-x .lettre{width:44px; height:44px; border-radius:12px; background:rgba(161,17,43,.2); color:var(--bordeaux-vif); display:flex; align-items:center; justify-content:center; font-weight:850; font-size:.95rem; margin-bottom:18px}
.carte-x h2{font-size:1.08rem; font-weight:800; margin-bottom:8px}
.carte-x p{color:#b5b1aa; font-size:.9rem; margin-bottom:22px}
.carte-x .lien-x{margin-top:auto; font-weight:700; font-size:.86rem; display:inline-flex; align-items:center; gap:8px}
.carte-x .lien-x .arrow{transition:transform .25s}
.carte-x:hover .lien-x .arrow{transform:translateX(4px)}
.et-aussi{margin-top:36px; color:#c9c6bf; font-size:.95rem; max-width:70ch}

/* ---------- fiche réalisation ---------- */
.fiche-visuel{padding-block:10px 0}
.fiche-visuel .cadre{max-width:920px; margin-inline:auto}
.fiche-galerie{display:grid; gap:14px; grid-template-columns:1fr; margin-top:26px}
@media(min-width:640px){ .fiche-galerie{grid-template-columns:repeat(2,1fr)} }
.fiche-galerie img{border-radius:12px; border:1px solid var(--encadre); width:100%}
.fiche-corps{display:grid; gap:56px; grid-template-columns:1fr; padding-block:clamp(50px,7vh,80px)}
@media(min-width:960px){ .fiche-corps{grid-template-columns:7fr 4fr} }
.bloc + .bloc{margin-top:44px}
.bloc .kicker{display:block; margin-bottom:14px}
.bloc > p{color:#c9c6bf; max-width:64ch}
.check-liste{list-style:none; border-top:1px solid var(--ligne)}
.check-liste li{display:flex; gap:14px; padding:14px 4px; border-bottom:1px solid var(--ligne); color:#c9c6bf; font-size:.95rem}
.check-liste li i{font-style:normal; width:8px; height:8px; border-radius:2px; background:var(--bordeaux); flex:none; margin-top:9px}
.prose-sombre{color:#c9c6bf; max-width:66ch}
.prose-sombre p + p{margin-top:14px}
.prose-sombre a{color:var(--bordeaux-vif)}
.prose-sombre a:hover{text-decoration:underline}
.prose-sombre h3,.prose-sombre h4{color:var(--creme); font-weight:800; margin:22px 0 8px}
.prose-sombre img{border-radius:12px; border:1px solid var(--encadre); margin-block:14px}
.prose-sombre ul,.prose-sombre ol{padding-left:22px; margin-block:10px}
.note-anonyme{border-left:3px solid var(--encadre); background:var(--panneau); padding:14px 18px; border-radius:0 10px 10px 0; color:var(--sourd); font-size:.85rem; margin-top:36px}
.aside-fiche .bloc-a + .bloc-a{margin-top:36px}
.aside-fiche .kicker{display:block; margin-bottom:14px}
.cartes-chiffres{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
.carte-chiffre{background:var(--panneau); border:1px solid var(--encadre); border-radius:10px; padding:14px 16px}
.carte-chiffre b{display:block; font-size:1.35rem; font-weight:850; letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1.1}
.carte-chiffre span{display:block; margin-top:5px; font-size:.74rem; color:var(--sourd); line-height:1.4}
.tags{display:flex; flex-wrap:wrap; gap:8px}
.tag{font-size:.76rem; font-weight:600; border:1px solid var(--encadre); border-radius:999px; padding:5px 12px; color:#c9c6bf}
a.tag:hover{border-color:var(--creme); color:var(--creme)}
.liens-ext{display:flex; flex-direction:column}
.liens-ext a{display:flex; justify-content:space-between; gap:12px; border-top:1px solid var(--ligne); padding:12px 2px; font-weight:600; font-size:.92rem}
.liens-ext a:first-child{border-top:0; padding-top:0}
.liens-ext a:hover{color:var(--bordeaux-vif)}
.aside-cta{background:var(--panneau); border:1px solid var(--encadre); border-radius:14px; padding:24px}
.aside-cta p{color:#b5b1aa; font-size:.9rem; margin:10px 0 18px}

/* ---------- méthode (expertises) ---------- */
.etapes-x{margin-top:46px; display:grid; gap:36px 28px; grid-template-columns:1fr}
@media(min-width:700px){ .etapes-x{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1024px){ .etapes-x{grid-template-columns:repeat(4,1fr)} }
.etape-x{border-top:1px solid var(--encadre); padding-top:20px}
.etape-x .no{font-size:2.1rem; font-weight:850; color:var(--bordeaux-vif); letter-spacing:-.03em; font-variant-numeric:tabular-nums; line-height:1}
.etape-x b{display:block; margin-top:14px; font-size:1.02rem; font-weight:800; line-height:1.3}
.etape-x p{margin-top:8px; color:var(--sourd); font-size:.9rem}

/* ---------- journal ---------- */
.journal{border-top:1px solid var(--ligne); padding-block:clamp(60px,8vh,90px)}
.journal h2{margin-top:12px; font-size:1.35rem; font-weight:800}
.journal ol{list-style:none; margin-top:22px; max-width:760px}
.journal li{display:grid; grid-template-columns:110px 1fr; gap:16px; padding:13px 0; border-bottom:1px solid var(--ligne)}
.journal time{color:var(--bordeaux-vif); font-weight:700; font-variant-numeric:tabular-nums; font-size:.9rem}
.journal b{font-weight:700; font-size:.95rem}
.journal b a:hover{color:var(--bordeaux-vif)}
.journal li span{display:block; color:var(--sourd); font-size:.82rem}
.journal .pied{margin-top:16px; color:var(--sourd); font-size:.8rem}

/* ---------- bande CTA (pages internes) ---------- */
.bande-cta{border-top:1px solid var(--ligne); padding-block:clamp(70px,10vh,110px)}
.bande-cta h2{font-size:clamp(1.9rem,4vw,3.1rem); font-weight:850; letter-spacing:-.025em; line-height:1.05; max-width:18ch}
.bande-cta p{margin-top:18px; color:#c9c6bf; max-width:48ch}
.bande-cta .ctas{margin-top:32px; display:flex; flex-wrap:wrap; gap:14px; align-items:center}
.bande-cta .tel{display:flex; flex-direction:column; margin-left:6px}
.bande-cta .tel small{font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--sourd)}
.bande-cta .tel b{font-size:1.1rem}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--ligne); padding:30px 0 44px; color:var(--sourd); font-size:.82rem}
footer .wrap{display:flex; flex-wrap:wrap; gap:14px 28px; justify-content:space-between; align-items:center}
footer nav{display:flex; flex-wrap:wrap; gap:8px 22px}
footer nav a:hover{color:var(--creme)}
.hint{opacity:.55; font-variant-numeric:tabular-nums}

/* ---------- console (porte cachée) ---------- */
.console{
  position:fixed; inset:auto 16px 16px 16px; z-index:100; max-width:640px; margin-inline:auto;
  background:rgba(8,8,8,.96); border:1px solid #2c2925; border-radius:14px;
  font-family:ui-monospace,'Cascadia Code',Menlo,monospace; font-size:.82rem; line-height:1.7;
  padding:18px 20px 22px; display:none; box-shadow:0 30px 90px rgba(0,0,0,.7);
}
.console.ouverte{display:block}
.console .barre{display:flex; justify-content:space-between; color:var(--sourd); margin-bottom:10px; font-size:.75rem}
.console button{background:none;border:0;color:var(--sourd);font:inherit}
.console button:hover{color:var(--creme)}
.console .lignes span{display:block; white-space:pre-wrap}
.console .ok{color:#7ec699}
.console .info{color:#c9c6bf}
.console .rouge{color:var(--bordeaux-vif)}

a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--bordeaux-vif); outline-offset:3px; border-radius:6px}

@media (prefers-reduced-motion:reduce){
  .hero h1 .ligne>span{transform:none}
  .hero .lead,.hero .ctas,.hero .preuves{opacity:1}
  .scroll-cue::after{animation:none}
  .crm .barres i{transform:scaleY(1)}
  .crm .toast{opacity:1; transform:none}
}