:root{
  --ink:#0F141B; --paper:#F1F2F0; --paper-2:#E5E7E4; --white:#FFF;
  --accent:#26456E; --accent-hi:#31598A; --gold:#E9B449; --gold-hi:#F3C15E; --grey:#5D646C; --grey-lt:#98A0A8;
  --ink-rgb:15,20,27; --paper-rgb:241,242,240;
  --rule-d:rgba(var(--paper-rgb),.18); --rule-l:rgba(var(--ink-rgb),.14);
  --f-s:"Manrope","Helvetica Neue",Arial,sans-serif;
  --f-g:"Inter","Helvetica Neue",Arial,sans-serif;
  --pad:clamp(20px,5vw,64px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f-g);font-weight:400;font-size:15px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:clip}
/* height:auto est obligatoire des que les attributs width/height
   sont poses sur la balise, sinon la hauteur du fichier ecrase
   la mise en page et l'image est etiree. */
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.pad{padding-left:var(--pad);padding-right:var(--pad)}
.hold{max-width:1400px;margin:0 auto}
.chrome{background:var(--white);color:var(--ink)}
.light{background:var(--paper);color:var(--ink)}
.tint{background:var(--paper-2);color:var(--ink)}

h1,h2,h3,h4{margin:0;font-family:var(--f-s);font-weight:700;letter-spacing:-.022em}
.say{font-family:var(--f-s);font-weight:500;letter-spacing:-.018em;
  font-size:clamp(1.3rem,2.4vw,1.95rem);line-height:1.34;max-width:32ch;text-wrap:pretty}
.ttl{font-family:var(--f-s);font-size:clamp(1.45rem,2.6vw,2.05rem);line-height:1.18}
.ttl-i{font-style:italic}
.lbl{font-family:var(--f-g);font-weight:600;font-size:.61rem;letter-spacing:.16em;
  text-transform:uppercase;display:block}
.lbl-r{position:relative;padding-left:15px}
.lbl-r::before{content:"";position:absolute;left:0;top:.1em;bottom:.1em;width:2px;
  background:var(--accent)}
.lbl-d{color:var(--grey-lt)} .lbl-l{color:var(--grey)}
p{margin:0}
.txt{font-size:.87rem;line-height:1.7;max-width:46ch}
.txt-d{color:rgba(var(--paper-rgb),.74)} .txt-l{color:var(--grey)}
.txt+.txt{margin-top:1em}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--f-g);font-weight:600;font-size:.65rem;
  text-transform:uppercase;padding:15px 28px;cursor:pointer;border:1px solid transparent;
  letter-spacing:.16em;transition:background .22s,color .22s,border-color .22s}
.btn-1{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn-1:hover{background:var(--accent-hi);border-color:var(--accent-hi)}
.btn-2{background:rgba(var(--ink-rgb),.34);color:var(--paper);
  border-color:rgba(var(--paper-rgb),.72);backdrop-filter:blur(6px)}
.btn-2:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn-3{background:transparent;color:var(--ink);border-color:var(--rule-l)}
.btn-3:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn-w{background:#fff;color:var(--ink);border-color:#fff}
.btn-gold{background:var(--gold);color:var(--ink);border-color:var(--gold);font-weight:700}
.btn-gold:hover{background:var(--gold-hi);border-color:var(--gold-hi);color:var(--ink)}
.btn-w:hover{background:var(--ink);color:#fff;border-color:var(--ink)}



/* ---------- top ---------- */
.tick{border-bottom:1px solid var(--rule-l);padding-block:9px;
  font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;color:var(--grey-lt);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.tick i{font-style:normal;color:var(--ink)}
.bar{padding-block:15px;display:flex;align-items:center;justify-content:space-between;gap:22px}
.bar nav{display:flex;gap:14px;flex-wrap:nowrap}
.bar nav a{font-size:.6rem;letter-spacing:.11em;white-space:nowrap;text-transform:uppercase;color:var(--grey)}
.bar nav a:hover{color:var(--ink)}
.sig{display:flex;align-items:center;gap:11px}
.sig img{width:30px}
.sig b{font-family:var(--f-s);font-weight:400;font-size:1.18rem;letter-spacing:.1em;
  text-transform:uppercase;line-height:1}
.bar .btn{padding:11px 18px;font-size:.62rem}
.bar>.btn .sm{display:none}
@media (max-width:1280px){.bar nav{gap:12px}.bar nav a{font-size:.58rem}}
@media (max-width:560px){.bar{gap:12px}.sig b{font-size:1rem}.sig img{width:26px}
  .bar>.btn{padding:10px 13px}
  .bar>.btn .lg{display:none}.bar>.btn .sm{display:inline}}


/* ---------- hero ---------- */
.shot{position:relative;background:var(--ink)}
.shot>img{width:100%;height:clamp(460px,72vh,720px);object-fit:cover;object-position:center 60%}
.shot::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(var(--ink-rgb),.88) 0,rgba(var(--ink-rgb),.44) 55%,rgba(var(--ink-rgb),.1) 100%),
             linear-gradient(0deg,rgba(var(--ink-rgb),.72) 0,rgba(var(--ink-rgb),0) 42%)}
.shot .over{position:absolute;inset:auto 0 0 0;z-index:2;padding-bottom:clamp(34px,5vw,62px)}
.shot .over h1{font-style:italic;font-size:clamp(1.85rem,3.7vw,3rem);line-height:1.14;
  max-width:27ch;margin-top:14px;color:var(--paper)}
.shot .over p{margin-top:16px;max-width:44ch;font-size:.95rem;color:rgba(var(--paper-rgb),.82);line-height:1.62}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}

/* ---------- sections ---------- */
.sec{padding-block:clamp(64px,9.5vw,138px)}
.sec-s{padding-block:clamp(50px,7vw,100px)}
.head{display:block;margin-bottom:clamp(28px,4vw,46px);max-width:72ch}
.head .ttl{max-width:22ch}
.head .txt{margin-top:14px;max-width:62ch}

/* statement trio */
.trio{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:clamp(12px,2vw,24px);margin-top:clamp(34px,4vw,54px)}
@media (max-width:980px){.trio{grid-template-columns:1fr 1fr}.trio figure:first-child{grid-column:1/-1}}
@media (max-width:760px){.trio{grid-template-columns:1fr}}
.trio figure{margin:0}
.trio img{width:100%;aspect-ratio:3/2;object-fit:cover}
.trio em{font-style:italic;font-family:var(--f-s);font-size:.98rem;display:block;margin-top:11px}
.trio span{font-size:.78rem;color:var(--grey-lt);line-height:1.6;display:block;margin-top:5px}

/* ---------- parcours 4 étapes ---------- */
.path{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--rule-l)}
.path li{list-style:none;padding:24px 24px 30px 0;border-right:1px solid var(--rule-l)}
.path li+li{padding-left:24px}
.path li:last-child{border-right:0}
.path .n{font-family:var(--f-s);font-style:italic;font-size:1rem;color:var(--accent);display:block;margin-bottom:12px}
.path h3{font-size:1.14rem;margin-bottom:9px}
.path p{font-size:.85rem;color:var(--grey);line-height:1.62}
.path .when{display:block;margin-top:11px;font-size:.62rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--accent)}
@media (max-width:900px){.path{grid-template-columns:repeat(2,1fr)}
  .path li{border-bottom:1px solid var(--rule-l)}
  .path li:nth-child(2n){border-right:0}}
@media (max-width:540px){.path{grid-template-columns:1fr}
  .path li{border-right:0;padding-left:0!important}}

/* ---------- index ---------- */
.idx-head{display:flex;align-items:baseline;justify-content:space-between;gap:18px;
  flex-wrap:wrap;margin-bottom:clamp(22px,3vw,34px)}
.filters{display:flex;gap:17px;flex-wrap:wrap}
.filters button{background:none;border:0;padding:0 0 3px;cursor:pointer;font-family:var(--f-g);
  font-size:.63rem;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);
  border-bottom:1px solid transparent}
.filters button[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--ink)}
.idx{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.2vw,30px)}
@media (max-width:1040px){.idx{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.idx{grid-template-columns:1fr}}
.card[hidden]{display:none}
.card img{width:100%;aspect-ratio:3/2;object-fit:cover;margin-bottom:13px}
.card .meta{font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;color:var(--grey);
  display:block;margin-bottom:7px}
.card h3{font-style:italic;font-size:1.1rem;line-height:1.24;margin-bottom:8px}
.card p{font-size:.79rem;line-height:1.6;color:var(--grey)}
.card .spec{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;margin:0;
  font-size:.72rem;font-variant-numeric:tabular-nums}
.card .spec dt{color:var(--grey)}
.card .spec dd{margin:0}

/* ---------- témoignages ---------- */
.says{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,24px)}
@media (max-width:880px){.says{grid-template-columns:1fr}}
.saybox{background:var(--white);border:1px solid var(--rule-l);padding:24px 24px 20px;
  display:flex;flex-direction:column}
.saybox p{font-family:var(--f-s);font-style:italic;font-size:1.06rem;line-height:1.42;flex:1}
.saybox cite{display:block;margin-top:18px;padding-top:14px;border-top:1px solid var(--rule-l);
  font-style:normal;font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;color:var(--grey)}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--rule-l)}
.faq details{border-bottom:1px solid var(--rule-l)}
.faq summary{cursor:pointer;padding:19px 40px 19px 0;position:relative;list-style:none;
  font-family:var(--f-s);font-size:clamp(1.02rem,1.7vw,1.2rem);line-height:1.35}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);
  font-family:var(--f-g);font-size:1.1rem;color:var(--accent);transition:transform .25s}
.faq details[open] summary::after{content:"–"}
.faq .a{padding:0 0 22px;font-size:.88rem;line-height:1.72;color:var(--grey);max-width:76ch}
.faq .a b{color:var(--ink);font-weight:600}

/* ---------- CTA band ---------- */

.band h2{font-style:italic;font-size:clamp(1.6rem,3.2vw,2.4rem);line-height:1.16;
  max-width:22ch;margin:0 auto}
.band p{margin:16px auto 0;max-width:52ch;font-size:.94rem;color:rgba(var(--paper-rgb),.8)}
.band .btns{justify-content:center}

/* ---------- contact cards ---------- */
.quiet{display:grid;grid-template-columns:repeat(2,1fr);
  gap:0 clamp(28px,4vw,64px);border-top:1px solid var(--rule-l)}
@media (max-width:760px){.quiet{grid-template-columns:1fr}}
.qc{padding:24px 0 22px;border-bottom:1px solid var(--rule-l);
  display:flex;flex-direction:column}
.qc .lbl{margin-bottom:9px}
.qc p{font-size:.82rem;color:var(--grey);line-height:1.6;margin-bottom:14px;flex:1}
.qc a{display:inline-flex;gap:7px;align-items:center;font-size:.76rem;font-weight:600;
  align-self:flex-start;color:var(--accent)}
.qc a::after{content:"↗";color:var(--grey);font-weight:400}

/* ---------- sticky lead magnet ---------- */
.sticky{position:fixed;right:clamp(14px,2.4vw,28px);bottom:clamp(14px,2.4vw,28px);z-index:60;
  box-shadow:0 10px 30px rgba(0,0,0,.3);
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .28s ease,transform .28s ease,visibility .28s}
.sticky.on{opacity:1;visibility:visible;transform:none}
.sticky .btn{padding:15px 22px}
@media (max-width:520px){.sticky{left:14px;right:14px}.sticky .btn{width:100%}}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;
  padding:20px;background:rgba(var(--ink-rgb),.72)}
.modal.on{display:flex}
.modal-in{background:var(--paper);color:var(--ink);max-width:520px;width:100%;
  padding:clamp(24px,3.4vw,40px);position:relative;max-height:92vh;overflow-y:auto}
.modal h3{font-style:italic;font-size:clamp(1.3rem,2.4vw,1.72rem);line-height:1.2;margin-bottom:10px}
.modal .sub{font-size:.87rem;color:var(--grey);line-height:1.62;margin-bottom:22px;max-width:44ch}
.modal .fld+.fld{margin-top:13px}
.modal .btn{width:100%;margin-top:18px}
.modal .fine{margin-top:14px;font-size:.68rem;color:var(--grey);line-height:1.55}
.modal .x{position:absolute;top:12px;right:12px;background:none;border:0;cursor:pointer;
  font-size:1.5rem;line-height:1;color:var(--grey);padding:6px 10px}
.modal .x:hover{color:var(--ink)}
.modal .done{display:none;text-align:center;padding:14px 0}
.modal.sent .form-part{display:none}
.modal.sent .done{display:block}

footer{padding-block:clamp(46px,6vw,74px) 30px}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(22px,4vw,48px)}
@media (max-width:760px){.fgrid{grid-template-columns:1fr 1fr}}
@media (max-width:460px){.fgrid{grid-template-columns:1fr}}
.fgrid h2{font-family:var(--f-g);font-weight:600;font-size:.6rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grey-lt);margin-bottom:13px}
.fgrid p,.fgrid a{font-size:.85rem;color:rgba(var(--paper-rgb),.72);line-height:1.85;display:block}
.colo{margin-top:clamp(32px,4vw,48px);padding-top:18px;border-top:1px solid var(--rule-d);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-size:.6rem;letter-spacing:.11em;text-transform:uppercase;color:var(--grey)}
.colo .legals a{border-bottom:1px solid rgba(var(--paper-rgb),.25);padding-bottom:1px}
.colo .legals a:hover{color:var(--paper);border-bottom-color:var(--paper)}

.anim .rv{opacity:0;transform:translateY(13px);
  transition:opacity .85s cubic-bezier(.2,.7,.3,1),transform .85s cubic-bezier(.2,.7,.3,1)}
.anim .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}.rv{opacity:1;transform:none;transition:none}*{transition:none!important}
}


/* ---------- Manrope n'a pas d'italique : emphase par la graisse ---------- */
h1,h2,h3,h4,.say,.ttl,.ttl-i,.card h3,.saybox p,.path .n,.trio em,
.step h3,.band h2,.modal h3,.faq summary,.sig b,.est b,.shot .over h1{font-style:normal}
.ttl-i{color:var(--accent)}
.shot .ttl-i{color:inherit;opacity:.78}
.trio em{font-weight:700}
.card h3{font-weight:700}
.saybox p{font-weight:500;letter-spacing:-.012em}
.path .n{font-weight:600;letter-spacing:.08em}
.est b{font-weight:600}
.faq summary{font-weight:600;letter-spacing:-.012em}
.band h2{font-weight:700;letter-spacing:-.022em}
.modal h3{font-weight:700}
.step h3{font-weight:700}
.sig b{font-weight:800;letter-spacing:.06em}
body{font-weight:400}

/* ---------- chantiers en cours ---------- */
.works{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule-l);
  border:1px solid var(--rule-d)}
@media (max-width:820px){.works{grid-template-columns:1fr}}
.works .work{background:var(--white);padding:clamp(22px,3vw,34px)}
.works h3{font-size:clamp(1.15rem,2vw,1.5rem);font-weight:700;letter-spacing:-.02em}
.wspec{display:grid;grid-template-columns:auto 1fr;gap:7px 18px;margin:18px 0 0;
  padding-top:16px;border-top:1px solid var(--rule-d);
  font-size:.74rem;font-variant-numeric:tabular-nums}
.wspec dt{color:var(--grey-lt);text-transform:uppercase;letter-spacing:.1em;font-size:.6rem;
  align-self:center}
.wspec dd{margin:0;font-weight:500}

/* ---------- formulaire de contact ---------- */
.cform{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(22px,4vw,58px);align-items:start}
@media (max-width:900px){.cform{grid-template-columns:1fr}}
.cform figure{margin:0}
.cform figure img{width:100%;aspect-ratio:4/5;object-fit:cover}
.crow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){.crow{grid-template-columns:1fr}}
.cform .fld+.fld,.cform .crow+.crow,.cform .crow+.fld{margin-top:14px}
.fld{display:flex;flex-direction:column;gap:7px}
.fld label{font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;color:var(--grey)}
.fld input,.fld textarea{font-family:var(--f-g);font-size:.94rem;background:var(--paper-2);
  border:0;padding:13px 14px;color:var(--ink);resize:vertical}
.btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}

/* ---------- en-tête de page intérieure ---------- */
.phero{background:var(--paper-2);color:var(--ink);border-bottom:1px solid var(--rule-l);padding-block:clamp(54px,7vw,104px)}
.phero h1{font-size:clamp(1.9rem,3.8vw,3rem);line-height:1.12;max-width:28ch;margin-top:14px}
.phero p{margin-top:18px;max-width:56ch;font-size:1rem;color:var(--grey);line-height:1.66}
.phero .btns{margin-top:28px}
.prose{max-width:66ch}
.prose h3{font-size:1.12rem;margin:26px 0 8px}
.prose p{font-size:.92rem;line-height:1.75;color:var(--grey);margin-bottom:12px}
.prose p:first-child{margin-top:0}
.numlist{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule-l)}
.numlist li{padding:22px 0;border-bottom:1px solid var(--rule-l);display:grid;
  grid-template-columns:52px 1fr;gap:0 20px}
@media (max-width:620px){.numlist li{grid-template-columns:1fr;gap:8px}}
.numlist .n{font-weight:600;font-size:.72rem;letter-spacing:.1em;color:var(--accent)}
.numlist h3{font-size:1.08rem;margin-bottom:7px}
.numlist p{font-size:.88rem;line-height:1.7;color:var(--grey);max-width:64ch}
.numlist .when{display:inline-block;margin-top:10px;font-size:.62rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--accent)}
.note{border-left:2px solid var(--accent);background:var(--paper-2);padding:20px 22px;
  margin-top:clamp(26px,3.4vw,40px)}
.note h3{font-size:1.06rem;margin-bottom:9px}
.note p{font-size:.87rem;color:var(--grey);line-height:1.7;max-width:70ch}
.tbl{width:100%;border-collapse:collapse;font-size:.84rem;margin-top:22px}
.tbl th{text-align:left;font-weight:600;font-size:.58rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grey);padding:0 12px 9px 0;border-bottom:1px solid var(--rule-l)}
.tbl td{padding:12px 12px 12px 0;border-bottom:1px solid var(--rule-l);vertical-align:top;
  color:var(--grey)}
.tbl td:first-child{font-weight:600;color:var(--ink);white-space:nowrap}
.tblwrap{overflow-x:auto}


/* ---------- articles illustres ---------- */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,30px)}
@media (max-width:860px){.posts{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.posts{grid-template-columns:1fr}}
.post img{width:100%;aspect-ratio:3/2;object-fit:cover;margin-bottom:14px}
.post .pmeta{display:block;font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--grey-lt);margin-bottom:8px}
.post h3{font-size:1.02rem;line-height:1.35;margin-bottom:8px}
.post p{font-size:.85rem;line-height:1.66;color:var(--grey);margin-bottom:12px}
.post a{font-size:.76rem;font-weight:600;color:var(--accent)}
.post a::after{content:" \2197"}

/* ---------- groupes de champs ---------- */
.clusters{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,48px);
  margin-top:clamp(28px,3.4vw,44px);border-top:1px solid var(--rule-l);padding-top:clamp(22px,3vw,34px)}
@media (max-width:760px){.clusters{grid-template-columns:1fr;gap:26px}}
.cl h3{font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--accent);
  margin-bottom:12px}
.cl p{font-size:.86rem;line-height:1.62;color:var(--grey);margin:0 0 9px}
.cl p b{color:var(--ink);font-weight:600}

/* ---------- visuel de section ---------- */
.shotband{margin-top:clamp(34px,4.4vw,60px)}
.shotband img{width:100%;aspect-ratio:21/9;object-fit:cover}
.shotband figcaption{margin-top:10px;font-size:.76rem;color:var(--grey)}

/* ---------- mode sombre systeme ----------
   Le chrome (barre, hero, pied, bandes accent) est deja sombre et ne bouge pas.
   Seules les surfaces de lecture claires basculent. */




/* ============================================================
   THEME SOMBRE UNIQUE
   Une seule famille de surfaces sur toute la page.
   Seul accent chaud : l'or du blason. Le marine sert de
   profondeur, jamais de bande pleine.
   ============================================================ */
:root{
  --s0:#0B0E13;  /* base de page */
  --s1:#11151C;  /* section surelevee */
  --s2:#171C25;  /* cartes, champs, encarts */
  --t1:#F4F5F6;  /* texte principal */
  --t2:#A9B1B9;  /* texte courant */
  --t3:#7F878F;  /* labels, mentions */
  --hair:rgba(255,255,255,.075);
  --hair-2:rgba(255,255,255,.14);
}
body{background:var(--s0);color:var(--t1)}

/* --- surfaces --- */
.chrome{background:var(--s0);color:var(--t1)}
.base{background:var(--s0);color:var(--t1)}
.raise{background:var(--s1);color:var(--t1)}
.sec{padding-block:clamp(80px,11vw,168px)}
.sec-s{padding-block:clamp(64px,8vw,116px)}

/* --- typographie --- */
.base h1,.base h2,.base h3,.raise h1,.raise h2,.raise h3,
.base .ttl,.raise .ttl{color:var(--t1)}
.ttl{letter-spacing:-.025em}
.txt-l,.txt-d{color:var(--t2)}
.lbl-l,.lbl-d{color:var(--t3)}
.prose p{color:var(--t2);font-size:.95rem;line-height:1.8}
.prose p b,.prose p strong{color:var(--t1)}
.prose h3{color:var(--t1)}
.head{margin-bottom:var(--gap-bloc)}

/* --- chrome --- */
.tick{border-bottom:1px solid var(--hair);color:var(--t3)}
.tick i{color:var(--t1)}
.bar{border-bottom:1px solid var(--hair)}
.bar nav a{color:var(--t3)}
.bar nav a:hover{color:var(--t1)}

/* --- hero de page interieure --- */
.phero{background:var(--s0);color:var(--t1);border-bottom:1px solid var(--hair);
  padding-block:clamp(72px,9vw,132px)}
.phero p{color:var(--t2)}

/* --- boutons --- */
.btn-3{background:transparent;color:var(--t1);border-color:var(--hair-2)}
.btn-3:hover{background:var(--t1);color:var(--s0);border-color:var(--t1)}
.btn-2{background:rgba(11,14,19,.4);color:var(--t1);border-color:rgba(255,255,255,.62)}
.btn-2:hover{background:var(--t1);color:var(--s0);border-color:var(--t1)}

/* --- composants --- */
.quiet{border-top:1px solid var(--hair)}
.qc{border-bottom:1px solid var(--hair);padding:28px 0 26px}
.qc p{color:var(--t2)}
.qc p b{color:var(--t1)}
.qc a{color:var(--gold)}
.note{background:var(--s2);border-left:2px solid var(--gold);padding:26px 28px}
.note h3{color:var(--t1)}
.note p{color:var(--t2)}
.numlist{border-top:1px solid var(--hair)}
.numlist li{border-bottom:1px solid var(--hair);padding:28px 0}
.numlist h3{color:var(--t1)}
.numlist p{color:var(--t2)}
.numlist .n{color:var(--gold)}
.numlist .when{color:var(--t3)}
.clusters{border-top:1px solid var(--hair)}
.cl h3{color:var(--gold)}
.cl p{color:var(--t2)}
.cl p b{color:var(--t1)}
.post h3{color:var(--t1)}
.post p{color:var(--t2)}
.post a{color:var(--gold)}
.post .pmeta{color:var(--t3)}
.shotband figcaption{color:var(--t3)}
.saybox{background:var(--s2);border:1px solid var(--hair)}
.works{background:var(--hair)}
.works .work{background:var(--s1)}
.trio figure em{color:var(--t1)}
.trio figure span{color:var(--t2)}
.idx .card h3{color:var(--t1)}
.idx .card p,.idx .spec dd{color:var(--t2)}
.idx .spec dt,.idx .card .meta{color:var(--t3)}
.idx .spec dt,.idx .spec dd{border-bottom-color:var(--hair)}
.filters button{color:var(--t2);border-color:var(--hair-2)}
.filters button[aria-pressed="true"]{background:var(--t1);color:var(--s0);border-color:var(--t1)}
.faq details{border-bottom:1px solid var(--hair)}
.faq summary{color:var(--t1)}
.faq .a{color:var(--t2)}
.faq .a b{color:var(--t1)}

/* --- formulaires --- */
.fld label{color:var(--t3)}
.fld input,.fld textarea{background:var(--s2);color:var(--t1);border:1px solid var(--hair-2)}
.fld input::placeholder,.fld textarea::placeholder{color:var(--t3)}
.fld input:focus-visible,.fld textarea:focus-visible{border-color:var(--gold);
  outline:2px solid var(--gold);outline-offset:2px}

/* --- bande de conversion : surface surelevee, filet or --- */
.band{background:var(--s2);border:1px solid var(--hair);border-top:2px solid var(--gold);
  padding:clamp(38px,4.6vw,64px) clamp(28px,3.6vw,58px);text-align:left;max-width:none}
.band h2{font-size:clamp(1.6rem,3.1vw,2.4rem);line-height:1.12;max-width:20ch;color:var(--t1)}
.band p{margin-top:16px;max-width:60ch;color:var(--t2);font-size:.95rem;line-height:1.75}


/* --- pied de page --- */
footer.chrome{border-top:1px solid var(--hair)}
.chrome .fgrid h2{color:var(--t1)}
.chrome .fgrid a,.chrome .fgrid p{color:var(--t3)}
.chrome .fgrid a:hover{color:var(--t1)}
.chrome .colo{border-top:1px solid var(--hair);color:var(--t3)}

/* --- tiroir --- */

/* --- modale --- */
.modal-in{background:var(--s1);color:var(--t1);border:1px solid var(--hair)}
.modal-in h3{color:var(--t1)}
.modal-in .sub,.modal-in .fine{color:var(--t2)}
.modal-in .x{color:var(--t1)}

/* --- emphase de titre : l'italique porte l'accent, pas la couleur --- */
.ttl-i{color:var(--t2)}
.path .n,.trio em{color:var(--t1)}
.path .when{color:var(--t3)}
.path p{color:var(--t2)}
.say,.saybox p{color:var(--t1)}
.prose .sign{color:var(--t1);font-weight:600;margin-top:18px}

/* ============================================================
   MENU TOUJOURS VISIBLE
   Au-dessus de 1000px : rangee unique.
   En dessous : le menu passe sur sa propre ligne, defilable
   horizontalement, avec un degrade qui signale la suite.
   ============================================================ */
@media (max-width:1000px){
  .bar{flex-wrap:wrap;row-gap:0}
  .bar .sig{order:1}
  .bar>.btn{order:2}
  .bar nav{order:3;display:flex;width:100%;flex-wrap:nowrap;
    gap:20px;overflow-x:auto;overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    scroll-snap-type:x proximity;
    margin-top:12px;padding:12px 0 2px;border-top:1px solid var(--hair)}
  .bar nav::-webkit-scrollbar{display:none}
  .bar nav{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent)}
  .bar nav a{scroll-snap-align:start;flex:0 0 auto;font-size:.62rem;padding-block:3px}
  .bar nav a[aria-current]{color:var(--gold)}
}
.bar nav a[aria-current]{color:var(--gold)}

/* ============================================================
   ECHELLE D'INTERLIGNAGE
   Regle : plus le corps est grand, plus l'interlignage se
   resserre. Plus il est petit, plus il s'ouvre. Sept valeurs
   heritees remplacees par six paliers.

   display  >= 36px .......... 1.15
   titre     24-35px ......... 1.20
   sous-titre 16-23px ........ 1.35
   interface 13-15px ......... 1.45
   corps     15-16px ......... 1.75
   petit corps 12-14px ....... 1.80
   ============================================================ */

/* display */
.shot .over h1,.phero h1{line-height:1.15}
.band h2{line-height:1.15}

/* titres de section */
.ttl{line-height:1.2}
.modal h3{line-height:1.2}
.say{line-height:1.3}

/* sous-titres */
.card h3,.idx .card h3{line-height:1.3}
.note h3,.prose h3,.numlist h3,.path h3,.post h3,.work h3{line-height:1.35}
.faq summary{line-height:1.42}
.saybox p{line-height:1.45}

/* interface */
.bar nav a,.btn,.lbl,.chrome .fgrid h2{line-height:1.45}
.cl h3,.post .pmeta,.numlist .when,.path .when,.idx .card .meta{line-height:1.5}

/* corps */
.prose p{line-height:1.78}
.txt,.phero p,.band p,.modal .sub{line-height:1.72}
.numlist p,.path p,.faq .a{line-height:1.75}

/* petit corps : le plus ouvert */
.qc p,.cl p,.post p,.note p,.shotband figcaption,.trio figure span,
.chrome .fgrid p,.modal .fine{line-height:1.8}
.idx .spec dt,.idx .spec dd,.wspec dt,.wspec dd{line-height:1.6}
/* titre de chantier : 24px, donc palier titre et non sous-titre */
.works h3,.work h3{line-height:1.28}

/* Les titres sont en clamp() : au petit bout de l'echelle, un
   ratio fixe se resserre trop. On rouvre sous 700px. */
@media (max-width:700px){
  .shot .over h1,.phero h1,.band h2{line-height:1.22}
  .ttl{line-height:1.26}
  .modal h3{line-height:1.3}
  .works h3,.work h3{line-height:1.34}
}

/* ============================================================
   RETOUR AU SURVOL
   Motif : accuser reception du pointage. Une image qui ne
   bouge pas sous le curseur ne dit pas qu'elle est cliquable.
   Uniquement transform et opacity, donc compose par le GPU.
   ============================================================ */
.post,.idx .card,.trio figure,.shotband{--lift:0}
.post img,.idx .card img,.trio figure img,.shotband img,.cform figure img{
  transition:transform .7s cubic-bezier(.16,1,.3,1),opacity .4s ease}
.post,.idx .card,.trio figure{overflow:hidden}
.post:hover img,.idx .card:hover img,.trio figure:hover img{transform:scale(1.045)}
.post h3,.idx .card h3{transition:color .25s ease}
.post:hover h3,.idx .card:hover h3{color:var(--gold)}

.qc{transition:background .3s ease,padding-left .3s cubic-bezier(.16,1,.3,1)}
.qc:hover{background:var(--s1);padding-left:14px}

.work{transition:background .3s ease}
.work:hover{background:var(--s2)}

.numlist li,.path li{transition:background .3s ease}
.numlist li:hover,.path li:hover{background:var(--s1)}

/* pression physique sur les boutons */
.btn{transition:background .25s ease,color .25s ease,border-color .25s ease,transform .12s ease}
.btn:active{transform:translateY(1px)}

@media (prefers-reduced-motion:reduce){
  .post img,.idx .card img,.trio figure img,.shotband img,.cform figure img,
  .qc,.work,.numlist li,.path li,.btn{transition:none}
  .post:hover img,.idx .card:hover img,.trio figure:hover img{transform:none}
  .qc:hover{padding-left:0}
  .btn:active{transform:none}
}

/* --- visuels de chantier dans la grille des travaux --- */
.work img{width:100%;aspect-ratio:3/2;object-fit:cover;margin-bottom:18px;
  transition:transform .7s cubic-bezier(.16,1,.3,1)}
.work{overflow:hidden}
.work:hover img{transform:scale(1.04)}

/* --- visuels dans les lignes de la grille sobre --- */
.qc img{width:100%;aspect-ratio:3/2;object-fit:cover;margin-bottom:16px;
  transition:transform .7s cubic-bezier(.16,1,.3,1)}
.qc{overflow:hidden}
.qc:hover img{transform:scale(1.04)}

@media (prefers-reduced-motion:reduce){
  .work img,.qc img{transition:none}
  .work:hover img,.qc:hover img{transform:none}
}

/* ============================================================
   ECHELLE DE PROPORTIONS
   Sept ratios remplaces par trois, chacun avec un role.

   3/2   imagerie de grille : cartes, lignes, articles, metiers
   21/9  bandeaux pleine largeur, respiration entre sections
   4/5   portrait, unique emplacement en colonne etroite

   Le hero garde une hauteur fixe : c'est un plein cadre,
   pas une vignette dans une grille.
   ============================================================ */
.work img,.qc img,.post img,.card img,.idx .card img,.trio figure img{
  aspect-ratio:3/2;object-fit:cover;width:100%}
.shotband img{aspect-ratio:21/9;object-fit:cover;width:100%}
.cform figure img{aspect-ratio:4/5;object-fit:cover;width:100%}

/* sous 560px, un 21/9 devient une bande illisible */
@media (max-width:560px){
  .shotband img{aspect-ratio:16/9}
  .cform figure img{aspect-ratio:3/2}
}

/* ============================================================
   COUCHE DE DESIGN
   Trois leviers : contraste d'echelle, profondeur, direction
   photographique. Le sombre plat fait bon marche ; il lui faut
   de la lumiere qui vient de quelque part.
   ============================================================ */

/* --- 1. CONTRASTE D'ECHELLE ---------------------------------
   Un titre de section a 33px sur un ecran de 1280 n'impose rien.
   On ouvre l'ecart entre le display et le corps. */
.shot .over h1{font-size:clamp(2.1rem,4.6vw,4.1rem);letter-spacing:-.035em;max-width:25ch}
.phero h1{font-size:clamp(2.1rem,5.2vw,4.2rem);letter-spacing:-.032em;max-width:20ch}
.ttl{font-size:clamp(1.8rem,3.9vw,3.1rem);letter-spacing:-.03em}
.band h2{font-size:clamp(1.9rem,4vw,3.2rem);letter-spacing:-.03em;max-width:16ch}
.shot .over p{font-size:clamp(.98rem,1.25vw,1.12rem);max-width:50ch}
.phero p{font-size:clamp(.98rem,1.2vw,1.1rem)}

/* --- 2. PROFONDEUR ------------------------------------------
   Une lueur froide tres basse derriere le haut de chaque
   section sombre, pour que les surfaces ne soient pas des
   aplats morts. */
.base,.raise{position:relative;isolation:isolate}
.base::before,.raise::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 65% at 50% 0%,rgba(49,89,138,.13),transparent 62%)}
.raise::before{background:radial-gradient(110% 60% at 15% 0%,rgba(233,180,73,.055),transparent 58%)}

/* grain fin, fixe et non cliquable : jamais sur un conteneur
   qui defile, sinon le GPU repeint en continu */
body::after{content:"";position:fixed;inset:0;z-index:70;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E")}

/* le hero gagne une vignette basse : le texte s'y pose au lieu
   de flotter sur la photo */
.shot::after{background:
  linear-gradient(90deg,rgba(11,14,19,.78) 0,rgba(11,14,19,.34) 46%,rgba(11,14,19,0) 78%),
  linear-gradient(0deg,rgba(11,14,19,.86) 0,rgba(11,14,19,.18) 42%,rgba(11,14,19,0) 68%)}

/* --- 3. DIRECTION PHOTOGRAPHIQUE ----------------------------
   Les images de banque sonnent "banque" parce qu'elles sont
   saturees et neutres. On desature legerement et on rechauffe
   vers l'or, pour qu'elles appartiennent a la meme palette. */
.work img,.qc img,.post img,.card img,.idx .card img,
.trio figure img,.shotband img,.cform figure img{
  filter:saturate(.82) contrast(1.06) brightness(.94)}
.work:hover img,.qc:hover img,.post:hover img,
.idx .card:hover img,.trio figure:hover img{filter:saturate(1) contrast(1.04) brightness(1)}
.shot>img{filter:saturate(.88) contrast(1.05)}

/* --- 4. L'OR COMME ACCENT EDITORIAL -------------------------
   Il ne servait qu'aux boutons. Les numeros d'etape deviennent
   un vrai element graphique. */
.path .n,.numlist .n{font-family:var(--f-s);font-size:clamp(1.6rem,3vw,2.5rem);
  font-weight:200;color:var(--gold);opacity:.85;letter-spacing:0;line-height:1}
.numlist li{grid-template-columns:clamp(54px,6vw,86px) 1fr}

/* --- 5. ASYMETRIE -------------------------------------------
   Tout etait cale a gauche sur la meme verticale. */
@media (min-width:1100px){
  .prose{margin-left:clamp(0px,7vw,120px)}
  .works{grid-template-columns:1.25fr 1fr}
  .head{max-width:none}
  .head .ttl{max-width:18ch}
}

@media (prefers-reduced-motion:reduce){
  .work:hover img,.qc:hover img,.post:hover img,
  .idx .card:hover img,.trio figure:hover img{filter:saturate(.82) contrast(1.06) brightness(.94)}
}

/* ============================================================
   BANDE DE PREUVE
   Elle tient lieu de caution et donne au haut de page un
   contrepoids compositionnel au hero. Les chiffres sont
   traites en display, pas en corps de texte.
   ============================================================ */
.proof{background:var(--s1);border-bottom:1px solid var(--hair);
  padding-block:clamp(40px,5vw,72px);position:relative;isolation:isolate}
.proof::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(90% 100% at 85% 50%,rgba(233,180,73,.07),transparent 62%)}
.proof-in{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(28px,5vw,88px);align-items:center}
@media (max-width:900px){.proof-in{grid-template-columns:1fr;gap:30px}}
.proof-say h2{font-family:var(--f-s);font-size:clamp(1.25rem,2.1vw,1.7rem);
  line-height:1.2;letter-spacing:-.02em;color:var(--t1);max-width:18ch}
.proof-say p{margin-top:12px;color:var(--t2);font-size:.92rem;line-height:1.75;max-width:54ch}

.figs{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:0}
@media (max-width:620px){.figs{grid-template-columns:1fr;gap:0}}
.figs>div{padding:4px 0 4px clamp(18px,2.4vw,34px);border-left:1px solid var(--hair)}
.figs>div:first-child{border-left:0;padding-left:0}
@media (max-width:620px){
  .figs>div{border-left:0;border-top:1px solid var(--hair);padding:16px 0}
  .figs>div:first-child{border-top:0;padding-top:0}
}
.figs dt{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--t3);line-height:1.5;max-width:18ch}
.figs dd{margin:8px 0 0;font-family:var(--f-s);font-weight:200;
  font-size:clamp(1.9rem,3.6vw,3rem);line-height:1;letter-spacing:-.03em;color:var(--gold)}
.figs dd span{font-size:.42em;font-weight:400;letter-spacing:0;margin-left:.15em;color:var(--t2)}

/* ============================================================
   CORRECTION DU HERO
   hero.jpg est une prise de nuit. Empilee sous trois voiles et
   desaturee, elle devenait un aplat noir. On remonte la photo
   et on allege le voile : il doit asseoir le texte, pas cacher
   le meilleur visuel de la page.
   ============================================================ */
.shot>img{filter:saturate(1.02) contrast(1.04) brightness(1.24)}
.shot::after{background:
  linear-gradient(90deg,rgba(11,14,19,.74) 0,rgba(11,14,19,.30) 52%,rgba(11,14,19,0) 88%),
  linear-gradient(0deg,rgba(11,14,19,.8) 0,rgba(11,14,19,.1) 38%,rgba(11,14,19,0) 60%)}

/* le second appel a l'action lisait comme un rectangle blanc pose
   sur du noir. Il devient un verre teinte, pose sur la photo. */
.btn-2{background:rgba(11,14,19,.28);border-color:rgba(255,255,255,.38);
  backdrop-filter:blur(10px) saturate(1.1);-webkit-backdrop-filter:blur(10px) saturate(1.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
.btn-2:hover{background:var(--t1);color:var(--s0);border-color:var(--t1);box-shadow:none}
@media (prefers-reduced-transparency:reduce){
  .btn-2{background:rgba(11,14,19,.82);backdrop-filter:none;-webkit-backdrop-filter:none}
}

/* ============================================================
   MOUVEMENT
   Chaque animation repond a une raison.
   1. Arrivee du hero : etablit la hierarchie de lecture.
   2. Respiration de la photo : donne de la profondeur au defilement.
   3. Volet sur les images : la photographie est le produit,
      elle merite mieux qu'un fondu.
   4. Montee des chiffres : impose l'ordre de lecture de la preuve.
   Transform et opacity uniquement. Tout s'annule sous
   prefers-reduced-motion.
   ============================================================ */
@media (prefers-reduced-motion:no-preference){

  /* 1. arrivee du hero, en cascade */
  .anim .shot .over>*{opacity:0;transform:translateY(22px);
    animation:rise .9s cubic-bezier(.16,1,.3,1) forwards}
  .shot .over .lbl{animation-delay:.15s}
  .shot .over h1{animation-delay:.26s}
  .shot .over p{animation-delay:.40s}
  .shot .over .hero-cta{animation-delay:.52s}
  @keyframes rise{to{opacity:1;transform:none}}

  /* 2. la photo du hero s'ouvre lentement, puis respire au defilement */
  .shot>img{animation:openshot 1.8s cubic-bezier(.16,1,.3,1) both}
  @keyframes openshot{from{transform:scale(1.07)}to{transform:scale(1)}}

  @supports (animation-timeline:view()){
    .shot>img{animation:openshot 1.8s cubic-bezier(.16,1,.3,1) both,
                        drift linear both;
      animation-timeline:auto,view();
      animation-range:normal,entry 0% exit 100%}
    @keyframes drift{from{transform:translateY(-3%) scale(1.06)}
                     to{transform:translateY(3%) scale(1.06)}}
  }

  /* 3. volet sur les images revelees */
  /* les deux extremites doivent avoir la meme forme calculee,
     sinon l'interpolation echoue et l'image reste masquee */
  /* Le volet en clip-path a ete retire : il echouait par intermittence
     et laissait des images definitivement invisibles. On garde l'effet
     d'ouverture avec une echelle, dont la defaillance est benigne :
     au pire l'image est simplement deja a sa taille finale. */
  .anim .rv img,.anim .shotband img{transform:scale(1.06);
    transition:transform 1.1s cubic-bezier(.16,1,.3,1) 60ms}
  .anim .rv.in img,.anim .shotband.in img{transform:scale(1)}

  /* 4. les chiffres de la preuve montent dans l'ordre de lecture */
  .anim .figs>div{opacity:0;transform:translateY(16px);
    transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
  .anim .figs.in>div{opacity:1;transform:none}
  .anim .figs.in>div:nth-child(2){transition-delay:.1s}
  .anim .figs.in>div:nth-child(3){transition-delay:.2s}

  /* soulevement des blocs au survol, tres court */
  .work,.post,.idx .card{transition:transform .5s cubic-bezier(.16,1,.3,1),background .3s ease}
  .work:hover,.post:hover,.idx .card:hover{transform:translateY(-4px)}
}

@media (prefers-reduced-motion:reduce){
  .shot .over>*,.figs>div{opacity:1;transform:none;animation:none}
  .rv img,.shotband img{clip-path:none;transition:none}
  .shot>img{animation:none}
}

/* l'agrandissement de la photo du hero depassait la largeur de page
   et creait une barre de defilement horizontale */
.shot{overflow:hidden}

/* les regles de survol redefinissaient `transition` et annulaient
   celle du volet : on les fusionne au lieu de les ecraser */
@media (prefers-reduced-motion:no-preference){
  .work img,.qc img,.post img,.card img,.idx .card img,
  .trio figure img,.shotband img,.cform figure img{
    transition:clip-path 1.05s cubic-bezier(.16,1,.3,1) 60ms,
               transform .7s cubic-bezier(.16,1,.3,1),
               filter .5s ease}
}

/* le survol prime sur l'echelle d'ouverture */
@media (prefers-reduced-motion:no-preference){
  .anim .work:hover img,.anim .qc:hover img,.anim .post:hover img,
  .anim .idx .card:hover img,.anim .trio figure:hover img{transform:scale(1.045)}
}
@media (prefers-reduced-motion:reduce){
  .anim .rv img,.anim .shotband img{transform:none;transition:none}
}

/* ============================================================
   ACCROCHES D'ACCUEIL
   Trois familles de mise en page distinctes, pour qu'aucune ne
   ressemble aux sections voisines.
   1. Modeles : texte a gauche, bande de trois images a droite
   2. Zone    : purement typographique, aucune image
   3. Blog    : liste numerotee a trois colonnes
   ============================================================ */

/* --- 1. Modeles ------------------------------------------- */
.teaser{display:grid;grid-template-columns:.85fr 1.15fr;
  gap:clamp(28px,4.5vw,76px);align-items:center}
@media (max-width:900px){.teaser{grid-template-columns:1fr;gap:30px}}
.teaser-txt .ttl{max-width:16ch}
.teaser-txt .txt{margin-top:16px;max-width:46ch}


.strip{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(8px,1.2vw,16px)}
.strip img{width:100%;aspect-ratio:3/2;object-fit:cover}
/* la premiere image domine, les deux autres suivent */
@media (min-width:901px){
  .strip{grid-template-columns:1.4fr 1fr 1fr;align-items:end}
  .strip img:first-child{aspect-ratio:4/5}
  .strip img:nth-child(n+2){aspect-ratio:1/1}
}
@media (max-width:560px){
  .strip{grid-template-columns:1fr 1fr}
  .strip img:first-child{grid-column:1/-1;aspect-ratio:3/2}
}

/* --- 2. Zone ---------------------------------------------- */
.zone{display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(28px,4.5vw,76px);align-items:start}
@media (max-width:860px){.zone{grid-template-columns:1fr;gap:26px}}
.zone-txt .ttl{max-width:15ch}
.zone-txt .txt{margin-top:16px;max-width:48ch}
.zone-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair)}
.zone-list li{font-family:var(--f-s);font-weight:300;
  font-size:clamp(1.15rem,2.2vw,1.75rem);line-height:1.3;letter-spacing:-.02em;
  color:var(--t1);padding:clamp(14px,1.8vw,22px) 0;
  border-bottom:1px solid var(--hair);position:relative;padding-left:clamp(22px,2.6vw,38px)}
.zone-list li::before{content:"";position:absolute;left:0;top:50%;
  width:clamp(10px,1.4vw,20px);height:1px;background:var(--gold);transform:translateY(-50%)}

/* --- 3. Blog ---------------------------------------------- */
.soon{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair)}
.soon li{display:grid;grid-template-columns:clamp(46px,5vw,72px) 1fr auto;
  gap:clamp(14px,2.2vw,34px);align-items:baseline;
  padding:clamp(20px,2.6vw,32px) 0;border-bottom:1px solid var(--hair)}
@media (max-width:760px){
  .soon li{grid-template-columns:clamp(40px,8vw,56px) 1fr;row-gap:8px}
  .soon-lg{grid-column:2;justify-self:start}
}
.soon-n{font-family:var(--f-s);font-weight:200;color:var(--gold);
  font-size:clamp(1.05rem,1.9vw,1.5rem);line-height:1;letter-spacing:0}
.soon h3{font-size:clamp(1rem,1.7vw,1.24rem);line-height:1.35;color:var(--t1)}
.soon p{margin-top:8px;font-size:.88rem;line-height:1.75;color:var(--t2);max-width:62ch}
.soon-lg{font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--t3);white-space:nowrap;line-height:1.5}

/* ============================================================
   EN-TETE DE PAGE PHOTOGRAPHIQUE
   Les sept pages interieures ouvraient sur le meme rectangle
   sombre. Elles ouvrent maintenant sur leur propre photo, titre
   en incrustation. C'est ce que font adidas, Wise et Okta sur
   leurs pages interieures, et cela differencie les pages entre
   elles sans toucher a leur contenu.
   ============================================================ */
.phero{position:relative;isolation:isolate;overflow:hidden;
  background:var(--s0);border-bottom:1px solid var(--hair);
  padding-block:clamp(96px,13vw,190px);display:flex;align-items:flex-end}
.phero .phero-bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;
  object-fit:cover;object-position:center 58%;
  filter:saturate(.92) contrast(1.04) brightness(.92)}
.phero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(11,14,19,.86) 0,rgba(11,14,19,.5) 48%,rgba(11,14,19,.14) 100%),
    linear-gradient(0deg,rgba(11,14,19,.9) 0,rgba(11,14,19,.24) 46%,rgba(11,14,19,.06) 100%)}
.phero-in{width:100%}
.phero h1{color:var(--t1)}
.phero p{color:rgba(244,245,246,.84);max-width:52ch}

/* l'en-tete s'ouvre comme le hero de l'accueil */
@media (prefers-reduced-motion:no-preference){
  .phero .phero-bg{animation:openshot 1.8s cubic-bezier(.16,1,.3,1) both}
  .anim .phero-in>*{opacity:0;transform:translateY(18px);
    animation:rise .85s cubic-bezier(.16,1,.3,1) forwards}
  .phero-in>.lbl{animation-delay:.12s}
  .phero-in>h1{animation-delay:.22s}
  .phero-in>p{animation-delay:.34s}
  .phero-in>.btns{animation-delay:.46s}
}
@media (prefers-reduced-motion:reduce){
  .phero .phero-bg{animation:none}
  .phero-in>*{opacity:1;transform:none;animation:none}
}

/* ============================================================
   BOUTON SECONDAIRE
   Le simple filet sur fond sombre lisait comme une ligne blanche
   posee dans le vide. Il devient une vraie surface secondaire.
   ============================================================ */
.btn-3{background:rgba(255,255,255,.055);color:var(--t1);
  border-color:rgba(255,255,255,.16)}
.btn-3:hover{background:var(--t1);color:var(--s0);border-color:var(--t1)}

/* Les titres de page interieure sont longs (jusqu'a 10 mots).
   On elargit la mesure et on retient l'echelle pour tenir en
   deux lignes partout, plutot que de laisser filer a trois. */
.phero h1{font-size:clamp(2rem,4.3vw,3.5rem);max-width:34ch}

/* ============================================================
   ALIGNEMENT
   Trois mesures cohabitaient : contenu a x=84, bandeau a x=20,
   bande finale a x=0. Tout se cale desormais sur la meme
   verticale que le contenu courant.
   ============================================================ */

/* La bande finale reprend la mesure de page. Le visuel de carte
   passe sur un pseudo-element inset de var(--pad), pour que ses
   bords tombent exactement sur la colonne de texte. */
.band{max-width:1400px;margin-inline:auto;position:relative;isolation:isolate;
  background:none;border:0;
  padding-block:clamp(38px,4.6vw,64px);
  padding-inline:calc(var(--pad) + clamp(26px,3.2vw,52px))}
.band::before{content:"";position:absolute;inset:0 var(--pad);z-index:-1;
  background:var(--s2);border:1px solid var(--hair);border-top:2px solid var(--gold)}

/* Les conteneurs d'image doivent recadrer : l'animation
   d'ouverture agrandit a 1,06 et debordait sinon. */
.cform figure,.shotband,.strip,.proof{overflow:hidden}
.strip img{display:block}

/* Colonnes du formulaire : les deux bas s'alignent. La photo
   epouse la hauteur du formulaire au lieu d'imposer la sienne. */
@media (min-width:861px){
  .cform{align-items:stretch}
  .cform figure{display:flex}
  .cform figure img{height:100%;width:100%;aspect-ratio:auto;object-fit:cover}
}

/* Le bandeau image prend exactement la mesure du contenu, sans
   style en ligne. Son recadrage tombe alors sur la meme verticale
   que le texte, meme pendant l'agrandissement d'ouverture. */
.shotband{max-width:calc(1400px - 2 * var(--pad));margin:clamp(40px,5vw,72px) auto;
  padding:0;overflow:hidden}
.shotband img{display:block}

/* Le decalage asymetrique du .prose ne vaut que pour la colonne
   de lecture pleine largeur. A l'interieur d'un bloc deux
   colonnes, il decalait la colonne et cassait l'alignement. */
.cform .prose,.teaser .prose,.zone .prose{margin-left:0;max-width:none}

/* Heritage de l'ancienne bande centree : les enfants portaient
   encore margin:auto et justify-content:center, ce qui les
   faisait demarrer a trois abscisses differentes dans une carte
   pourtant alignee a gauche. */
.band h2,.band p{margin-left:0;margin-right:0}
.band .btns{justify-content:flex-start}
.band .lbl{display:block;margin-left:0}

/* ============================================================
   CORRECTIFS D'AUDIT
   Quatre agents en lecture seule ont mesure le site. Ce bloc
   corrige ce qu'ils ont trouve, avec la valeur mesuree en
   commentaire quand elle justifie le changement.
   ============================================================ */

/* Contraste : le libelle sur les hero photographiques tombait
   entre 2,63 et 4,24 selon la photo, pour un seuil de 4,5.
   --t3 plafonne a 5,31 meme sur du noir pur. */
.phero-in .lbl,.shot .over .lbl{color:rgba(244,245,246,.92)}

/* Contraste non textuel : bordures de champ a 1,54 et contour
   du bouton secondaire a 1,45, pour un seuil de 3. */
.fld input,.fld textarea{border-color:rgba(255,255,255,.34)}
.btn-3{border-color:rgba(255,255,255,.34)}
.filters button{border-color:rgba(255,255,255,.34)}

/* L'indicateur d'ouverture de la FAQ etait en marine de
   l'ancien theme clair : 1,99 sur fond sombre. */
.faq summary::after{color:var(--gold)}

/* La croix de fermeture disparaissait au survol : #0F141B
   sur #11151C. */
.modal .x:hover,.modal-in .x:hover{color:var(--gold)}

/* Filets herites du theme clair, invisibles sur fond sombre. */
.faq{border-top-color:var(--hair)}
.faq details{border-bottom-color:var(--hair)}
.path,.path li{border-color:var(--hair)}
.works{background:var(--hair)}
.wspec dt,.wspec dd{border-color:var(--hair)}
.wspec dt{color:var(--t3)}
.lbl-r::before{background:var(--gold)}
.qc a::after{color:var(--t3)}

/* Cibles tactiles : la navigation faisait 13,9px de haut,
   le minimum WCAG 2.2 est de 24px. */
.bar nav a{display:inline-flex;align-items:center;min-height:24px;padding-block:5px}
.colo .legals a,.qc a,.post a,.chrome .fgrid a{
  display:inline-flex;align-items:center;min-height:24px}
.filters button{min-height:26px}

/* Regression responsive : le passage en une colonne des etapes
   sous 620px etait annule par une regle de base posterieure. */
@media (max-width:620px){
  .numlist li{grid-template-columns:1fr;gap:8px}
}

/* Lien d'evitement : 9 elements focusables precedent le contenu
   sur chaque page. */
.skip{position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--gold);color:var(--s0);padding:12px 18px;
  font-family:var(--f-g);font-size:.72rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase}
.skip:focus{left:0}

/* ============================================================
   RYTHME VERTICAL
   Les blocs de contenu portaient chacun leur propre marge :
   34, 40, 44, 54, 60, 64 et 72px selon le composant. Cinq
   ecarts differents cohabitaient sur la seule page contact.
   Une seule valeur desormais, declaree une fois.
   ============================================================ */
:root{--gap-bloc:clamp(34px,4.4vw,64px)}

.quiet,.note,.clusters,.numlist,.posts,.idx,.cform,.trio,
.soon,.zone,.teaser,.prose,.path,.faq,.works,.tblwrap,.head{
  margin-top:var(--gap-bloc)}

/* Un bloc qui ouvre sa section ne prend pas de marge : la
   section fournit deja son padding. */
.hold.pad > *:first-child,
.head + *{margin-top:var(--gap-bloc)}
.hold.pad > .head:first-child{margin-top:0}
.sec > .hold.pad > *:first-child,
.sec-s > .hold.pad > *:first-child{margin-top:0}

/* Le bandeau image est intercale entre deux sections : sa marge
   s'ajoutait au padding des deux, d'ou 230px d'un cote et 174 de
   l'autre. Le padding des sections suffit. */
.shotband{margin-block:0}

/* Les boutons de fin de bloc gardent un ecart plus court, ils
   appartiennent au bloc qui precede. */
.btns{margin-top:clamp(22px,2.6vw,30px)}

/* Le lien logo etait la seule cible interactive sous 24px :
   23,1px en bureau et 20,0px a 375. */
.sig{display:inline-flex;align-items:center;min-height:24px}

/* Les deux bordures a 3,08 et 3,11 passaient de 0,03 point.
   On remonte a .38 pour avoir une marge reelle. */
.fld input,.fld textarea,.btn-3,.filters button{border-color:rgba(255,255,255,.38)}

/* La marge basse du dernier paragraphe d'un bloc se propageait et
   reduisait l'ecart visuel avec le bouton qui suit : 17px au lieu
   de 30. */
.prose > :last-child,.faq .a > :last-child{margin-bottom:0}

/* Un paragraphe de commentaire place directement apres un bloc
   prend le rythme du bloc, pas zero. */
.works + .txt,.idx + .txt,.posts + .txt{margin-top:var(--gap-bloc)}

/* ------------------------------------------------------------------
   Fiches modeles : photo plein cadre, bandeau prix, titre incruste,
   ligne de caracteristiques a pictogrammes. Format demande par la
   cliente (cf. visuel de reference).
   ------------------------------------------------------------------ */
.mgrid{display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(18px,2.2vw,28px);margin-top:20px}
@media (max-width:860px){.mgrid{grid-template-columns:1fr}}
.mcard[hidden]{display:none}

.mcard{position:relative;isolation:isolate;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;
  min-height:clamp(430px,40vw,560px);
  background:var(--s1);border:1px solid var(--hair)}
@media (max-width:560px){.mcard{min-height:400px}}

/* la photo occupe toute la fiche ; height:100% doit battre img{height:auto} */
.mcard>img{position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;object-fit:cover;
  filter:saturate(.9) contrast(1.05) brightness(.96);
  transform-origin:50% 50%}
/* voile degrade : garantit la lisibilite du texte quelle que soit la photo */
.mcard::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(to top,
    rgba(8,10,14,.96) 0%, rgba(8,10,14,.93) 28%, rgba(8,10,14,.84) 46%,
    rgba(8,10,14,.52) 66%, rgba(8,10,14,.24) 84%, rgba(8,10,14,.40) 100%)}

.mprice{position:absolute;top:0;left:0;z-index:2;
  background:var(--gold);color:#0B0E13;
  font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;
  line-height:1;padding:11px 16px;font-weight:600}
.mprice b{font-weight:700}

.mbody{padding:clamp(22px,2.6vw,34px)}
.mmeta{display:block;position:relative;padding-left:14px;
  font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--t2);line-height:1.5;margin-bottom:11px}
.mmeta::before{content:"";position:absolute;left:0;top:.1em;bottom:.1em;
  width:2px;background:var(--gold)}
.mcard h3{font-style:italic;font-weight:700;
  font-size:clamp(1.55rem,2.6vw,2.1rem);line-height:1.16;
  color:var(--t1);margin:0 0 16px;transition:color .25s ease}

.mspec{list-style:none;margin:0;padding:15px 0 0;
  display:flex;flex-wrap:wrap;gap:11px 24px;
  border-top:1px solid rgba(255,255,255,.18)}
.mspec li{display:flex;align-items:center;gap:8px;
  font-size:.78rem;line-height:1.45;color:var(--t1)}
.mspec svg{width:17px;height:17px;flex:none;
  fill:none;stroke:var(--gold);stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round}
.mdesc{margin:15px 0 0;font-size:.79rem;line-height:1.66;color:var(--t2)}

@media (hover:hover){
  .mcard>img{transition:transform .6s cubic-bezier(.16,1,.3,1)}
  .mcard:hover>img{transform:scale(1.04)}
  .mcard:hover h3{color:var(--gold-hi)}
}
@media (prefers-reduced-motion:reduce){
  .mcard>img{transition:none}
  .mcard:hover>img{transform:none}
}
/* sur telephone la ligne de caracteristiques passe en deux colonnes alignees */
@media (max-width:560px){
  .mspec{display:grid;grid-template-columns:1fr 1fr;gap:11px 16px}
}
/* libelle reserve aux lecteurs d'ecran : « 118 m² » et « 3 » seuls sont muets */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}

/* variante 3 colonnes : accueil. Fiche plus verticale, caracteristiques
   sur deux colonnes puisque la largeur ne tient pas les quatre en ligne. */
.mgrid-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:1040px){.mgrid-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:720px){.mgrid-3{grid-template-columns:1fr}}
.mcard-3{min-height:clamp(420px,33vw,500px)}
.mcard-3 .mbody{padding:clamp(20px,1.9vw,26px)}
.mcard-3 h3{font-size:clamp(1.35rem,1.9vw,1.72rem);margin-bottom:14px}
.mcard-3 .mspec{display:grid;grid-template-columns:1fr 1fr;gap:11px 14px}
.mcard-3 .mspec li{font-size:.74rem}

/* la fiche entiere est cliquable sur l'accueil : pas de soulignement,
   et un focus visible puisque c'est un lien */
a.mcard{color:inherit;text-decoration:none}
a.mcard:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ------------------------------------------------------------------
   Encart modele pose sur la photo de couverture. Meme grammaire que
   les fiches : bandeau or, code + famille, titre, caracteristiques.
   Il est cale sur la mesure de page, a droite du titre.
   ------------------------------------------------------------------ */
.hcard{position:absolute;right:var(--pad);bottom:0;z-index:3;
  width:clamp(300px,24vw,356px);overflow:hidden;
  color:inherit;text-decoration:none;
  background:rgba(17,21,28,.90);border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
  backdrop-filter:blur(14px) saturate(1.1);
  box-shadow:0 22px 48px rgba(0,0,0,.45)}
.hcard-ph{display:block;position:relative;line-height:0}
.hcard-ph img{width:100%;aspect-ratio:16/9;object-fit:cover}
.hcard-b{display:block;padding:15px 18px 18px}
.hcard .mmeta{margin-bottom:9px}
.hcard-t{display:block;font-style:italic;font-weight:700;
  font-size:1.28rem;line-height:1.2;color:var(--t1);margin-bottom:13px;
  transition:color .25s ease}
.hcard .mspec{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;padding-top:12px}
.hcard .mspec li{font-size:.72rem}
.hcard .mspec svg{width:15px;height:15px}
.hcard:hover .hcard-t{color:var(--gold-hi)}
.hcard:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
/* sous 1080px le titre du hero occupe toute la largeur : l'encart
   passerait par-dessus. Le meme modele reste presente plus bas. */
@media (max-width:1079px){.hcard{display:none}}
@media (prefers-reduced-motion:no-preference){
  .shot .over .hcard{animation-delay:.64s}
}
/* l'encart occupe la droite de la couverture : le bloc de titre doit
   s'arreter avant, sinon les deux se chevauchent. */
@media (min-width:1080px){
  .shot .over .lbl,.shot .over h1,.shot .over p,.shot .over .hero-cta{
    max-width:calc(100% - clamp(300px,24vw,356px) - 56px)}
  .hcard{bottom:clamp(34px,5vw,62px)}
}

/* ------------------------------------------------------------------
   Selecteur de langue. Deux codes de deux lettres : il doit se lire
   comme un reglage, pas comme un sixieme element de navigation.
   ------------------------------------------------------------------ */
.langsw{display:flex;align-items:center;gap:2px;margin-right:14px;flex:none;order:3}
.langsw a{
  display:flex;align-items:center;min-height:24px;padding:5px 8px;
  font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  font-weight:600;line-height:1.4;color:var(--t3);
  text-decoration:none;transition:color .2s ease,background .2s ease}
.langsw a:hover{color:var(--t1)}
.langsw a[aria-current]{color:var(--gold);background:rgba(233,180,73,.1)}
.langsw a:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media (max-width:560px){.langsw{margin-right:8px}.langsw a{padding:5px 6px}}

/* ==================================================================
   Retours client du 27/09 — points 1 a 5
   ================================================================== */

/* 1. L'en-tete reste visible au defilement, a HAUTEUR CONSTANTE.
      Le repli au defilement retirait 43 px au document et decalait le
      contenu sous le lecteur : il a ete retire. Sur telephone, le bandeau
      du haut est masque par media query, pas rogne. */
div.chrome{position:sticky;top:0;z-index:50;background:var(--s0);
  box-shadow:0 10px 30px rgba(0,0,0,.42)}
div.chrome .tick{padding-block:8px}
div.chrome .bar{padding-block:13px}
@media (max-width:760px){div.chrome .tick{display:none}}

/* Toute ancre doit se poser sous la barre collee, pas dessous. */
[id]{scroll-margin-top:116px}
@media (max-width:760px){[id]{scroll-margin-top:84px}}

/* La pastille flottante faisait doublon avec l'en-tete colle. */
.sticky{display:none}

/* 2. Logo nettement plus grand et plus present. */
.sig{gap:14px}
.sig img{width:clamp(44px,3.4vw,54px)}
.sig b{font-size:clamp(1.3rem,1.9vw,1.62rem)}
footer.chrome .sig img{width:clamp(44px,3.4vw,54px)}
@media (max-width:560px){
  .sig img{width:38px}
  .sig b{font-size:1.12rem}
}

/* 3. Le nom de l'entreprise est compose en Times New Roman partout ou
      il apparait en toutes lettres. Tinos et Liberation Serif sont
      metriquement identiques, pour les systemes sans Times. */
.sig b,.brand{
  font-family:"Times New Roman",Times,"Tinos","Liberation Serif",serif;
  font-style:normal;
  letter-spacing:.01em}
.sig b{font-weight:400;letter-spacing:.04em}
/* dans un titre italique, le nom reste droit : c'est une marque */
h1 .brand,h2 .brand,h3 .brand,.ttl .brand{font-style:normal}

/* 4. La couverture revient a une seule image. Le plafond de largeur du
      titre est conserve : sans lui, la derniere ligne se posait sur la
      zone la plus claire de la photo (contraste de pic 0,96:1). */
.hcard{display:none}
.shot .over h1{max-width:18ch}
.shot .over p{max-width:46ch}

/* ------------------------------------------------------------------
   Direction : deux profils traites a egalite, portrait, role, citation.
   ------------------------------------------------------------------ */
.team{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.8vw,36px)}
@media (max-width:820px){.team{grid-template-columns:1fr}}
.member{background:var(--s1);border:1px solid var(--hair);overflow:hidden;
  display:flex;flex-direction:column}
.member figure{margin:0;line-height:0;overflow:hidden}
.member figure img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 22%;
  filter:saturate(.94) contrast(1.03);
  transition:transform .6s cubic-bezier(.16,1,.3,1)}
@media (hover:hover){.member:hover figure img{transform:scale(1.035)}}
@media (prefers-reduced-motion:reduce){.member figure img{transition:none}
  .member:hover figure img{transform:none}}
.member-b{padding:clamp(20px,2.4vw,30px);display:flex;flex-direction:column;flex:1}
.member .mmeta{margin-bottom:9px}
.member h3{font-style:italic;font-weight:700;
  font-size:clamp(1.3rem,2vw,1.62rem);line-height:1.2;color:var(--t1);margin:0 0 15px}
.member blockquote{margin:0 0 15px;padding-left:15px;border-left:2px solid var(--gold);
  font-size:.92rem;line-height:1.6;color:var(--t1);font-style:italic}
.member-b>p{margin:0;font-size:.85rem;line-height:1.7;color:var(--t2)}
.traits{list-style:none;margin:16px 0 0;padding:15px 0 0;
  border-top:1px solid var(--hair);
  display:grid;grid-template-columns:1fr 1fr;gap:8px 16px}
.traits li{position:relative;padding-left:14px;font-size:.74rem;line-height:1.45;color:var(--t2)}
.traits li::before{content:"";position:absolute;left:0;top:.52em;
  width:5px;height:5px;background:var(--gold)}
@media (max-width:420px){.traits{grid-template-columns:1fr}}

/* Les quatre valeurs, avec les pictogrammes de König. */
.vals{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--hair);border:1px solid var(--hair)}
@media (max-width:860px){.vals{grid-template-columns:1fr 1fr}}
@media (max-width:460px){.vals{grid-template-columns:1fr}}
.val{background:var(--s1);padding:clamp(22px,2.6vw,30px)}
.val img{width:44px;height:44px;object-fit:contain;margin-bottom:14px}
.val h3{font-family:inherit;font-style:normal;font-weight:700;
  font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);line-height:1.5;margin:0 0 9px}
.val p{margin:0;font-size:.84rem;line-height:1.66;color:var(--t2)}

/* Ordre de la barre, identique a toutes les largeurs. Sans ces valeurs le
   selecteur de langue passait devant le logo sous 1000 px. */
.bar .sig{order:1}
.bar nav{order:2}
.bar .langsw{order:3}
.bar>.btn{order:4}

/* ------------------------------------------------------------------
   Portfolios. Deux grammaires distinctes, parce que les deux fonds
   d'images n'ont rien a voir : d'un cote des vues de projet a recadrer,
   de l'autre des planches deja composees qu'il faut montrer entieres.
   ------------------------------------------------------------------ */

/* Construction traditionnelle. Plusieurs visuels sont des planches
   composees avec du texte incruste (localite, donneur d'ordre, surface) :
   tout recadrage les mutile. On les montre donc entiers, en deux colonnes. */
.pfwrap{margin-top:var(--gap-bloc);
  columns:2;column-gap:clamp(10px,1.4vw,18px)}
.pfwrap figure{margin:0 0 clamp(10px,1.4vw,18px);break-inside:avoid;
  background:var(--s1);border:1px solid var(--hair);line-height:0;overflow:hidden}
.pfwrap img{width:100%;height:auto;display:block;
  filter:saturate(.94) contrast(1.03);transition:filter .4s ease}
@media (hover:hover){.pfwrap figure:hover img{filter:saturate(1) contrast(1.04)}}
@media (max-width:820px){.pfwrap{columns:1}}

/* Emplacement en attente de fichiers. Doit se lire comme une demande
   precise, pas comme un trou dans la page. */
.await{margin-top:var(--gap-bloc);background:var(--s2);
  border:1px solid var(--hair);border-left:2px solid var(--gold);
  padding:clamp(26px,3.2vw,40px);max-width:78ch}
.await h3{font-family:var(--f-g);font-style:normal;font-weight:700;
  font-size:clamp(1.15rem,1.8vw,1.42rem);line-height:1.28;
  color:var(--t1);margin:12px 0 14px}
.await p{margin:0 0 14px;font-size:.92rem;line-height:1.72;color:var(--t2);max-width:66ch}
.awl{list-style:none;margin:18px 0 0;padding:16px 0 0;
  border-top:1px solid var(--hair);display:grid;gap:10px}
.awl li{position:relative;padding-left:18px;font-size:.86rem;line-height:1.6;color:var(--t2)}
.awl li::before{content:"";position:absolute;left:0;top:.56em;
  width:6px;height:6px;background:var(--gold)}

/* ------------------------------------------------------------------
   Positionnement : six piliers et chaine en cinq etapes.
   Peu de texte visible a la fois, comme demande — chaque bloc tient
   en un regard.
   ------------------------------------------------------------------ */
.pils{margin-top:var(--gap-bloc);display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;background:var(--hair);border:1px solid var(--hair)}
@media (max-width:900px){.pils{grid-template-columns:1fr 1fr}}
@media (max-width:540px){.pils{grid-template-columns:1fr}}
.pil{background:var(--s1);padding:clamp(24px,2.8vw,34px)}
.pil-n{display:block;font-family:var(--f-s);font-weight:200;font-size:1.6rem;
  line-height:1;color:var(--gold);opacity:.75;margin-bottom:16px;
  font-variant-numeric:tabular-nums}
.pil h3{font-family:var(--f-g);font-style:normal;font-weight:700;
  font-size:1rem;line-height:1.32;color:var(--t1);margin:0 0 10px}
.pil p{margin:0;font-size:.85rem;line-height:1.68;color:var(--t2);max-width:40ch}

/* La chaine : cinq maillons en ligne, qui se replient en colonne. */
.chain{list-style:none;counter-reset:none;margin:var(--gap-bloc) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(14px,1.8vw,24px)}
@media (max-width:1040px){.chain{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.chain{grid-template-columns:1fr}}
.chain li{position:relative;padding-top:20px;border-top:1px solid var(--hair-2)}
.chain li::after{content:"";position:absolute;top:-1px;left:0;width:34px;height:2px;
  background:var(--gold)}
.chain .n{display:block;font-family:var(--f-s);font-weight:200;font-size:1.25rem;
  line-height:1;color:var(--gold);opacity:.75;margin-bottom:12px;
  font-variant-numeric:tabular-nums}
.chain h3{font-family:var(--f-g);font-style:normal;font-weight:700;
  font-size:.92rem;line-height:1.34;color:var(--t1);margin:0 0 9px}
.chain p{margin:0;font-size:.8rem;line-height:1.62;color:var(--t2)}

/* ------------------------------------------------------------------
   Systemes constructifs. Huit cases egales : aucun systeme n'est
   presente comme le bon par defaut, c'est tout le propos de la page.
   ------------------------------------------------------------------ */
.sysg{margin-top:var(--gap-bloc);display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;background:var(--hair);border:1px solid var(--hair)}
@media (max-width:1040px){.sysg{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.sysg{grid-template-columns:1fr}}
.sysc{background:var(--s1);padding:clamp(22px,2.6vw,30px)}
.sysc-n{display:block;font-family:var(--f-s);font-weight:200;font-size:1.3rem;
  line-height:1;color:var(--gold);opacity:.7;margin-bottom:14px;
  font-variant-numeric:tabular-nums}
.sysc h3{font-family:var(--f-g);font-style:normal;font-weight:700;
  font-size:.98rem;line-height:1.3;color:var(--t1);margin:0 0 9px}
.sysc p{margin:0;font-size:.82rem;line-height:1.64;color:var(--t2)}

/* Combinaisons hybrides : des etiquettes, pas des paragraphes. */
.combo{list-style:none;margin:var(--gap-bloc) 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:10px}
.combo li{border:1px solid var(--hair-2);padding:12px 18px;
  font-family:var(--f-g);font-weight:600;font-size:.84rem;line-height:1.4;
  color:var(--t1);background:var(--s1)}
.combo li:last-child{border-color:var(--gold);color:var(--gold)}

/* Ce que ca change : une liste dense, lisible d'un coup d'oeil. */
.marks{list-style:none;margin:var(--gap-bloc) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--hair);border:1px solid var(--hair)}
@media (max-width:1040px){.marks{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.marks{grid-template-columns:1fr}}
.marks li{background:var(--s1);padding:20px clamp(16px,2vw,24px);
  font-family:var(--f-g);font-weight:600;font-size:.86rem;line-height:1.42;
  color:var(--t1);position:relative;padding-left:34px}
.marks li::before{content:"";position:absolute;left:clamp(16px,2vw,24px);top:1.58em;
  width:8px;height:2px;background:var(--gold)}

/* Sous 1040 px la barre se cassait sur quatre lignes, avec le bouton
   au-dessus du selecteur de langue. On force deux rangees nettes :
   logo + langue + bouton, puis le rail de navigation en dessous. */
@media (max-width:1040px){
  .bar{flex-wrap:wrap;row-gap:10px}
  .bar .sig{order:1;margin-right:auto}
  .bar .langsw{order:2;margin-right:4px}
  .bar>.btn{order:3}
  .bar nav{order:4;flex-basis:100%;width:100%}
}

/* ------------------------------------------------------------------
   Partenaires techniques. Le logo d'un partenaire arrive dans
   n'importe quel format et sur n'importe quel fond : on lui donne une
   zone fixe, un fond clair et de la marge, plutot que de le recadrer.
   ------------------------------------------------------------------ */
.partners{margin-top:var(--gap-bloc);display:grid;
  grid-template-columns:repeat(2,1fr);gap:clamp(16px,2vw,24px)}
@media (max-width:820px){.partners{grid-template-columns:1fr}}
.partner{display:grid;grid-template-columns:140px minmax(0,1fr);
  background:var(--s1);border:1px solid var(--hair);overflow:hidden}
@media (max-width:480px){.partner{grid-template-columns:1fr}}
.partner-logo{display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.93);padding:18px}
.partner-logo img{max-width:100%;max-height:70px;width:auto;height:auto;
  object-fit:contain}
.partner-b{padding:clamp(18px,2vw,24px)}
.partner-b .mmeta{margin-bottom:8px}
.partner h3{font-family:var(--f-g);font-style:normal;font-weight:700;
  font-size:1rem;line-height:1.3;color:var(--t1);margin:0 0 8px}
.partner-b p{margin:0;font-size:.84rem;line-height:1.66;color:var(--t2)}
.partner-l{display:inline-block;margin-top:12px;font-size:.74rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--gold);
  border-bottom:1px solid rgba(233,180,73,.4);padding-bottom:2px}
.partner-l:hover{color:var(--gold-hi);border-bottom-color:var(--gold-hi)}