/* ==========================================================================
   Les Monsieurs — feuille de style principale
   Polices auto-hébergées : aucune requête vers Google, rien à déclarer au RGPD.
   ========================================================================== */

@font-face{font-family:"Fraunces";src:url("../fonts/fraunces-latin-200-normal.woff2") format("woff2");font-weight:200;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url("../fonts/fraunces-latin-300-normal.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url("../fonts/fraunces-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Jost";src:url("../fonts/jost-latin-300-normal.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Jost";src:url("../fonts/jost-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Jost";src:url("../fonts/jost-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Mono";src:url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Mono";src:url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}

:root{
  /* couleurs */
  --papier:#EDE8E3;
  --papier-2:#E7E1DA;
  --papier-3:#F3F0EC;
  --encre:#171512;
  --encre-doux:#4E483F;
  --encre-pale:#8A8276;
  --laiton:#8F6C36;
  --laiton-clair:#C09A5E;
  --filet:#CDC5BA;
  --filet-doux:#DED8CE;

  /* familles */
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Jost","Helvetica Neue",Arial,sans-serif;
  --mono:"Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;

  /* échelle d'espacement — une seule série, utilisée partout */
  --e1:8px; --e2:14px; --e3:22px; --e4:34px; --e5:52px; --e6:76px;
  --section:clamp(58px, 7vw, 96px);
  --gouttiere:clamp(22px, 4vw, 40px);
  --max:1220px;
  --rail:158px;      /* colonne des intitulés de section */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--papier);color:var(--encre);
  font-family:var(--sans);font-weight:300;font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{margin:0;font-family:var(--serif);font-weight:300;letter-spacing:-.022em;line-height:1.08;text-wrap:balance}
p{margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--laiton);outline-offset:3px}
::selection{background:var(--laiton);color:var(--papier)}

.sr,.saut{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.saut:focus{position:fixed;top:10px;left:10px;width:auto;height:auto;clip-path:none;background:var(--encre);color:var(--papier);padding:12px 18px;z-index:999}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gouttiere);position:relative}
.section{padding:var(--section) 0}
.section--haute{padding-top:calc(var(--section) * .72)}
.section--fin{padding-bottom:calc(var(--section) * 1.2)}
.section + .section{padding-top:0}

.label{
  font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--encre-pale);margin:0;line-height:1.75;
}
.dia{display:inline-block;width:5px;height:5px;background:var(--laiton);transform:rotate(45deg);vertical-align:middle;margin:0 var(--e1) 2px}

/* --- le fil vertical de la maison --- */
.reglure{
  position:fixed;top:0;bottom:0;left:50%;
  transform:translateX(calc(-50% + var(--max)/2 - var(--gouttiere) - .5px));
  width:1px;background:linear-gradient(to bottom,transparent,var(--filet-doux) 14%,var(--filet-doux) 86%,transparent);
  pointer-events:none;z-index:1;
}
@media(max-width:1320px){.reglure{display:none}}

/* ==========================================================================
   En-tête
   ========================================================================== */
.hdr{position:sticky;top:0;z-index:60;background:rgba(237,232,227,.88);backdrop-filter:blur(14px) saturate(1.2);border-bottom:1px solid var(--filet)}
.hdr__in{max-width:var(--max);margin:0 auto;padding:var(--e2) var(--gouttiere);display:flex;align-items:center;gap:var(--e4)}
.logo{text-decoration:none;line-height:1;display:block;flex:0 0 auto}
.logo__nom{font-family:var(--serif);font-weight:200;font-size:16px;letter-spacing:.26em;text-indent:.26em;display:block;white-space:nowrap}
.logo__sous{font-family:var(--sans);font-weight:300;font-size:7.6px;letter-spacing:.30em;text-indent:.30em;text-transform:uppercase;color:var(--encre-doux);display:block;margin-top:6px;white-space:nowrap}
.logo__sous i{display:inline-block;width:3.4px;height:3.4px;background:var(--laiton);transform:rotate(45deg);margin:0 1px 1px}

.nav{margin-left:auto;display:flex;align-items:center;gap:var(--e2)}
.nav__liste{list-style:none;margin:0;padding:0;display:flex;gap:2px}
.nav__liste a{position:relative;display:block;font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--encre-doux);padding:9px 13px;text-decoration:none;transition:color .2s}
.nav__liste a::after{content:"";position:absolute;left:13px;right:13px;bottom:2px;height:1px;background:var(--laiton);transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.nav__liste a:hover{color:var(--encre)}
.nav__liste a:hover::after,.nav__liste .current-menu-item>a::after{transform:scaleX(1)}
.nav__liste .current-menu-item>a{color:var(--encre)}

.nav__bascule{display:none;margin-left:auto;background:none;border:0;cursor:pointer;padding:10px}
.nav__barres,.nav__barres::before,.nav__barres::after{display:block;width:22px;height:1px;background:var(--encre);transition:transform .25s,background .25s}
.nav__barres::before,.nav__barres::after{content:"";position:relative;top:-7px}
.nav__barres::after{top:6px}
.nav-mobile{border-top:1px solid var(--filet);background:var(--papier)}
.nav-mobile__liste{list-style:none;margin:0;padding:var(--e1) var(--gouttiere) var(--e3);display:flex;flex-direction:column}
.nav-mobile__liste a{display:block;padding:14px 0;border-bottom:1px solid var(--filet-doux);text-decoration:none;font-family:var(--serif);font-size:21px;font-weight:300}
@media(max-width:940px){
  .nav{display:none}
  .nav__bascule{display:block}
  [aria-expanded="true"] .nav__barres{background:transparent}
  [aria-expanded="true"] .nav__barres::before{transform:rotate(45deg) translate(4px,5px)}
  [aria-expanded="true"] .nav__barres::after{transform:rotate(-45deg) translate(3px,-4px)}
}

/* ==========================================================================
   Boutons
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.17em;text-transform:uppercase;
  text-decoration:none;padding:15px 26px;background:var(--encre);color:var(--papier);
  border:1px solid var(--encre);cursor:pointer;transition:background .22s,color .22s;
}
.btn:hover{background:transparent;color:var(--encre)}
.btn--fantome{background:transparent;color:var(--encre)}
.btn--fantome:hover{background:var(--encre);color:var(--papier)}
.btn--mini{padding:9px 15px;background:transparent;color:var(--encre)}
.btn--mini:hover{background:var(--encre);color:var(--papier)}
.actions{display:flex;gap:var(--e2);flex-wrap:wrap;margin:0;align-items:center}
.actions--haut{margin-top:var(--e5)}

/* ==========================================================================
   Bandeau d'accueil
   ========================================================================== */
.hero{padding:clamp(52px,7vw,88px) 0 calc(var(--section) * .8)}
.hero__kicker{display:flex;flex-wrap:wrap;align-items:center;margin-bottom:var(--e4)}
.hero__titre{
  font-size:clamp(38px,5.4vw,74px);font-weight:200;line-height:1.04;
  letter-spacing:-.032em;max-width:16ch;
}
.hero__titre em{font-style:italic;font-weight:300;color:var(--laiton)}

/* le pied du bandeau : chapeau à gauche, disponibilité à droite */
.hero__pied{
  margin-top:var(--e5);display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:var(--e5);align-items:end;
  padding-top:var(--e4);border-top:1px solid var(--filet);
}
.hero__lede{max-width:52ch;font-size:19px;color:var(--encre-doux)}
.hero .actions{margin-top:var(--e4)}
.hero__dispo{text-align:right;display:flex;flex-direction:column;gap:6px;white-space:nowrap}
.hero__dispo b{font-family:var(--serif);font-size:23px;font-weight:300;letter-spacing:-.02em}
@media(max-width:820px){
  .hero__pied{grid-template-columns:1fr;gap:var(--e4)}
  .hero__dispo{text-align:left;white-space:normal}
}

/* ==========================================================================
   Chiffres
   ========================================================================== */
.chiffres{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--filet);border-bottom:1px solid var(--filet)}
.chiffre{padding:var(--e4) var(--e3) var(--e4) 0;border-right:1px solid var(--filet);display:flex;flex-direction:column;gap:var(--e2)}
.chiffre:last-child{border-right:0;padding-right:0}
.chiffre b{
  display:block;font-family:var(--serif);font-weight:200;
  font-size:clamp(28px,3.1vw,40px);line-height:1;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}
.chiffre .label{display:block;max-width:24ch}
@media(max-width:900px){
  .chiffres{grid-template-columns:1fr 1fr}
  .chiffre:nth-child(2n){border-right:0;padding-right:0}
  .chiffre:nth-child(2n+1){padding-right:var(--e3)}
  .chiffre:nth-child(-n+2){border-bottom:1px solid var(--filet)}
}
@media(max-width:480px){
  .chiffres{grid-template-columns:1fr}
  .chiffre{border-right:0;padding-right:0;border-bottom:1px solid var(--filet)}
  .chiffre:last-child{border-bottom:0}
}

/* ==========================================================================
   Têtes de section
   ========================================================================== */
.sec-tete{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);gap:var(--e5);margin-bottom:var(--e6);align-items:start}
.sec-tete .label{padding-top:.55em}
.sec-titre{font-size:clamp(25px,3.1vw,36px);max-width:24ch;font-weight:300}
.sec-intro{margin-top:var(--e3);max-width:58ch;color:var(--encre-doux)}
@media(max-width:900px){
  .sec-tete{grid-template-columns:1fr;gap:var(--e2);margin-bottom:var(--e5)}
  .sec-tete .label{padding-top:0}
}

/* ==========================================================================
   Trois métiers — colonnes de hauteur égale, pieds alignés
   ========================================================================== */
.trio{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--filet)}
.metier{
  padding:var(--e4) var(--e4) var(--e4) 0;border-right:1px solid var(--filet);
  display:flex;flex-direction:column;gap:var(--e2);
}
.metier:last-child{border-right:0;padding-right:0}
.metier__n{font-family:var(--mono);font-size:10px;letter-spacing:.19em;color:var(--laiton);text-transform:uppercase}
.metier h3{font-size:22px;line-height:1.18;min-height:2.36em}
.metier p{color:var(--encre-doux);font-size:15.5px;line-height:1.6}
.metier__pt{
  margin-top:auto;padding-top:var(--e3);border-top:1px dotted var(--filet);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;color:var(--encre-pale);line-height:1.7;
}
@media(max-width:900px){
  .trio{grid-template-columns:1fr}
  .metier{border-right:0;border-bottom:1px solid var(--filet);padding-right:0}
  .metier:last-child{border-bottom:0}
  .metier h3{min-height:0}
}

/* ==========================================================================
   Liste des réalisations
   ========================================================================== */
.travaux{border-top:1px solid var(--filet)}
.travail{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto 28px;
  gap:var(--e4);align-items:center;padding:var(--e4) 0;
  border-bottom:1px solid var(--filet);text-decoration:none;
  transition:padding .35s cubic-bezier(.2,.7,.3,1),background-color .35s;
}
.travail::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--laiton);
  transform:scaleY(0);transform-origin:top;transition:transform .35s cubic-bezier(.2,.7,.3,1);
}
.travail:hover{padding-left:var(--e3);padding-right:var(--e3);background-color:var(--papier-3)}
.travail:hover::before{transform:scaleY(1)}
.travail__t{font-family:var(--serif);font-weight:300;font-size:clamp(21px,2.5vw,29px);letter-spacing:-.02em;line-height:1.14}
.travail__t small{display:block;font-family:var(--sans);font-size:15px;font-weight:300;color:var(--encre-doux);letter-spacing:0;margin-top:var(--e1);line-height:1.55;max-width:62ch}
.travail__m{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--encre-pale);text-align:right;line-height:1.8}
.travail__m b{display:block;font-weight:400;color:var(--laiton)}
.travail__fleche{font-family:var(--serif);font-size:20px;color:var(--encre-pale);justify-self:end;transition:transform .35s cubic-bezier(.2,.7,.3,1),color .35s}
.travail:hover .travail__fleche{transform:translateX(6px);color:var(--laiton)}
@media(max-width:760px){
  .travail{grid-template-columns:minmax(0,1fr) auto;gap:var(--e3)}
  .travail__m{grid-column:1;text-align:left;order:3}
  .travail__fleche{align-self:start}
}

/* aperçu flottant au survol — la signature de la maison */
.apercu{
  position:fixed;top:0;left:0;width:min(30vw,340px);aspect-ratio:16/11;
  pointer-events:none;z-index:70;opacity:0;transform:translate(-50%,-50%) scale(.94);
  transition:opacity .32s ease,transform .42s cubic-bezier(.2,.7,.3,1);
  border:1px solid var(--filet);background:var(--papier-2);overflow:hidden;
  box-shadow:0 22px 60px -28px rgba(23,21,18,.42);
}
.apercu img{width:100%;height:100%;object-fit:cover}
.apercu.visible{opacity:1;transform:translate(-50%,-50%) scale(1)}
@media(max-width:1024px),(prefers-reduced-motion:reduce){.apercu{display:none}}

/* ==========================================================================
   Manifeste
   ========================================================================== */
.manifeste{background:var(--encre);color:var(--papier);padding:var(--section) 0}
.manifeste .label{color:#8E8579}
.manifeste__titre{color:var(--papier);font-size:clamp(26px,3.7vw,44px);max-width:19ch;font-weight:200;margin-top:var(--e3)}
.manifeste__corps{margin-top:var(--e5);display:grid;grid-template-columns:1fr 1fr;gap:var(--e5)}
.manifeste__corps p{color:#C6BEB3;max-width:50ch}
.manifeste__sig{margin-top:var(--e6);padding-top:var(--e3);border-top:1px solid #2E2A24;display:flex;justify-content:space-between;gap:var(--e3);flex-wrap:wrap}
@media(max-width:900px){.manifeste__corps{grid-template-columns:1fr;gap:var(--e3)}}

/* ==========================================================================
   Fin de page d'accueil
   ========================================================================== */
.fin{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--e5);align-items:end}
.titre-xl{font-size:clamp(28px,4vw,48px);font-weight:200;max-width:18ch}
.lede{margin-top:var(--e3);max-width:56ch;font-size:19px;color:var(--encre-doux)}
@media(max-width:820px){.fin{grid-template-columns:1fr;gap:var(--e4)}}

/* ==========================================================================
   Fiche projet
   ========================================================================== */
.fiche__tete{padding:var(--e5) 0 var(--e5);border-bottom:1px solid var(--filet)}
.retour{display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--encre-pale);text-decoration:none;margin-bottom:var(--e5)}
.retour:hover{color:var(--laiton)}
.fiche__tete .label{margin-bottom:var(--e3)}
.fiche__titre{font-size:clamp(31px,4.6vw,58px);font-weight:200;max-width:17ch}
.fiche__resume{margin-top:var(--e4);max-width:56ch;font-size:19px;color:var(--encre-doux)}
.fiche__lien{margin-top:var(--e4);display:flex;gap:var(--e3);flex-wrap:wrap;align-items:center}
.fiche__lien a{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--laiton);text-decoration:none;border-bottom:1px solid var(--laiton);padding-bottom:2px}
.fiche__lien a:hover{color:var(--encre);border-bottom-color:var(--encre)}
.fiche__hors{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--encre-pale)}

.fiche__meta{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--filet)}
.fm{padding:var(--e3) var(--e3) var(--e3) 0;border-right:1px solid var(--filet)}
.fm:last-child{border-right:0;padding-right:0}
.fm b{display:block;font-family:var(--sans);font-weight:400;font-size:16px;margin-top:6px;line-height:1.4}
@media(max-width:860px){
  .fiche__meta{grid-template-columns:1fr 1fr}
  .fm:nth-child(2n){border-right:0;padding-right:0}
  .fm:nth-child(-n+2){border-bottom:1px solid var(--filet)}
}
@media(max-width:480px){.fiche__meta{grid-template-columns:1fr}.fm{border-right:0;padding-right:0;border-bottom:1px solid var(--filet)}.fm:last-child{border-bottom:0}}

.pyr{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);gap:var(--e5);padding:var(--e4) 0;border-bottom:1px dotted var(--filet)}
.pyr:last-of-type{border-bottom:0}
.pyr__lab{font-family:var(--mono);font-size:10px;letter-spacing:.19em;text-transform:uppercase;color:var(--laiton);padding-top:.5em}
.pyr p{color:var(--encre-doux);max-width:60ch}
@media(max-width:760px){.pyr{grid-template-columns:1fr;gap:var(--e1);padding:var(--e3) 0}.pyr__lab{padding-top:0}}

.fiche__visuel{margin:var(--e5) 0 0;border:1px solid var(--filet);background:var(--papier-2)}
.planches{display:grid;grid-template-columns:1fr 1fr;gap:var(--e2);margin-top:var(--e2)}
.planches figure{margin:0;border:1px solid var(--filet);background:var(--papier-2)}
.planches figure:only-child{grid-column:span 2}
@media(max-width:700px){.planches{grid-template-columns:1fr}.planches figure:only-child{grid-column:span 1}}

.technos{margin-top:var(--e6);padding-top:var(--e3);border-top:1px solid var(--filet);display:flex;gap:var(--e1);flex-wrap:wrap}
.technos .label{border:1px solid var(--filet);padding:7px 12px;background:var(--papier-2)}

/* navigation entre projets */
.fiche__nav{display:grid;grid-template-columns:1fr 1fr;gap:var(--e2);margin-top:var(--e6);border-top:1px solid var(--filet)}
.fiche__nav a{text-decoration:none;padding:var(--e4) 0;display:block}
.fiche__nav a:last-child{text-align:right}
.fiche__nav span{display:block;font-family:var(--serif);font-size:20px;font-weight:300;margin-top:6px;line-height:1.2}
.fiche__nav a:hover span{color:var(--laiton)}
@media(max-width:700px){.fiche__nav{grid-template-columns:1fr}.fiche__nav a:last-child{text-align:left;border-top:1px solid var(--filet-doux)}}

/* ==========================================================================
   Offres
   ========================================================================== */
.offres{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--filet);border-bottom:1px solid var(--filet)}
.offre{padding:var(--e5) var(--e4) var(--e5) 0;border-right:1px solid var(--filet);display:flex;flex-direction:column}
.offre:last-child{border-right:0;padding-right:0}
.offre--mise{background:var(--papier-3);padding-left:var(--e4);padding-right:var(--e4)}
.offre h2{font-size:23px;margin-bottom:var(--e1)}
.offre__chapeau{color:var(--encre-doux);font-size:15.5px;line-height:1.6;min-height:5.6em}
.offre__prix{font-family:var(--serif);font-weight:200;font-size:38px;letter-spacing:-.03em;margin:var(--e3) 0 0;line-height:1}
.offre__prix small{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--laiton);margin-top:var(--e2)}
.offre ul{list-style:none;margin:var(--e4) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--e2)}
.offre li{position:relative;padding-left:20px;font-size:15.5px;color:var(--encre-doux);line-height:1.55}
.offre li::before{content:"";position:absolute;left:0;top:11px;width:9px;height:1px;background:var(--laiton)}
.offre__pied{margin-top:auto;padding-top:var(--e5)}
@media(max-width:960px){
  .offres{grid-template-columns:1fr}
  .offre{border-right:0;border-bottom:1px solid var(--filet);padding:var(--e4) 0}
  .offre--mise{padding-left:0;padding-right:0}
  .offre:last-child{border-bottom:0}
  .offre__chapeau{min-height:0}
}
.mention{margin-top:var(--e3);max-width:none;color:var(--encre-pale)}

/* ==========================================================================
   Méthode
   ========================================================================== */
.etapes{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--filet)}
.etape{padding:var(--e4) var(--e3) var(--e5) 0;border-right:1px solid var(--filet);display:flex;flex-direction:column;gap:var(--e1)}
.etape:last-child{border-right:0;padding-right:0}
.etape__n{font-family:var(--mono);font-size:10px;letter-spacing:.19em;color:var(--laiton);margin-bottom:var(--e2)}
.etape h3{font-size:19px;line-height:1.2;min-height:2.4em}
.etape p{font-size:15px;color:var(--encre-doux);line-height:1.6}
@media(max-width:960px){
  .etapes{grid-template-columns:1fr 1fr}
  .etape:nth-child(2n){border-right:0;padding-right:0}
  .etape:nth-child(-n+2){border-bottom:1px solid var(--filet)}
}
@media(max-width:600px){
  .etapes{grid-template-columns:1fr}
  .etape{border-right:0;padding-right:0;border-bottom:1px solid var(--filet)}
  .etape:last-child{border-bottom:0}
  .etape h3{min-height:0}
}

/* ==========================================================================
   La maison
   ========================================================================== */
.maison-lead{font-family:var(--serif);font-weight:200;font-size:clamp(25px,3.5vw,38px);line-height:1.22;letter-spacing:-.02em;max-width:20ch}
.prose{display:grid;grid-template-columns:1fr 1fr;gap:var(--e5)}
.prose__col{display:flex;flex-direction:column;gap:var(--e3)}
.prose p{color:var(--encre-doux);max-width:50ch}
@media(max-width:900px){.prose{grid-template-columns:1fr;gap:var(--e3)}}

/* ==========================================================================
   Contenu éditorial
   ========================================================================== */
.contenu{max-width:66ch}
.contenu > * + *{margin-top:var(--e3)}
.contenu h2{font-size:clamp(23px,2.8vw,30px);margin-top:var(--e5)}
.contenu h3{font-size:20px;margin-top:var(--e4)}
.contenu a{color:var(--laiton)}
.contenu ul,.contenu ol{padding-left:20px}
.contenu li+li{margin-top:var(--e1)}
.contenu blockquote{border-left:1px solid var(--laiton);padding-left:var(--e3);font-family:var(--serif);font-size:21px;font-weight:300;color:var(--encre);margin-left:0}
.contenu img{margin:var(--e5) 0}

/* ==========================================================================
   Formulaire
   ========================================================================== */
.form{display:grid;grid-template-columns:1fr 1fr;gap:var(--e4);margin-top:var(--e5);max-width:820px}
.champ{display:flex;flex-direction:column;gap:var(--e1)}
.champ--plein{grid-column:span 2}
.champ label{font-family:var(--mono);font-size:10px;letter-spacing:.17em;text-transform:uppercase;color:var(--encre-pale)}
.champ input,.champ textarea,.champ select{
  font-family:var(--sans);font-weight:300;font-size:16px;color:var(--encre);
  background:transparent;border:0;border-bottom:1px solid var(--filet);
  padding:11px 0;border-radius:0;width:100%;transition:border-color .2s;
}
.champ textarea{resize:vertical;min-height:110px}
.champ input:focus,.champ textarea:focus,.champ select:focus{outline:0;border-bottom-color:var(--laiton)}
.champ input::placeholder,.champ textarea::placeholder{color:var(--encre-pale)}
.pot-de-miel{position:absolute;left:-9999px}
.avis{padding:var(--e3);border:1px solid var(--filet);font-size:16px;margin-bottom:var(--e3);max-width:820px}
.avis--ok{border-color:var(--laiton)}
.avis--erreur{border-color:#9A5B4A;color:#7A4335}
@media(max-width:760px){.form{grid-template-columns:1fr;gap:var(--e3)}.champ--plein{grid-column:span 1}}

/* ==========================================================================
   Pagination
   ========================================================================== */
.pagination{margin-top:var(--e5);display:flex}
.pagination .nav-links{display:flex;gap:var(--e1);flex-wrap:wrap}
.pagination .page-numbers{font-family:var(--mono);font-size:11px;letter-spacing:.14em;padding:10px 14px;text-decoration:none;border:1px solid var(--filet)}
.pagination .current{background:var(--encre);color:var(--papier);border-color:var(--encre)}

/* ==========================================================================
   Pied de page
   ========================================================================== */
.pied{background:var(--encre);color:#B7AEA3;padding:var(--section) 0 var(--e5);position:relative;z-index:2}
.pied__grille{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:var(--e5)}
.pied .logo__nom{color:var(--papier)}
.pied .logo__sous{color:#8E8579}
.pied__texte{margin-top:var(--e4);max-width:34ch;color:#8E8579;font-size:15.5px}
.pied__titre{margin:0 0 var(--e3);font-family:var(--mono);font-size:10px;letter-spacing:.19em;text-transform:uppercase;color:#7C736A;font-weight:500}
.pied__liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--e1)}
.pied__liste a{text-decoration:none;font-size:15.5px;transition:color .2s}
.pied__liste a:hover{color:var(--laiton-clair)}
.pied__bas{margin-top:var(--e6);padding-top:var(--e3);border-top:1px solid #2C2822;display:flex;justify-content:space-between;gap:var(--e3);flex-wrap:wrap;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#6E665D}
@media(max-width:900px){.pied__grille{grid-template-columns:1fr;gap:var(--e4)}}

/* ==========================================================================
   Apparition au défilement
   ========================================================================== */
.rv{opacity:0;transform:translateY(16px);transition:opacity .8s cubic-bezier(.2,.7,.3,1),transform .8s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ==========================================================================
   Impression
   ========================================================================== */
@media print{
  .hdr,.pied,.reglure,.actions,.nav__bascule,.apercu{display:none}
  body{background:#fff;color:#000;font-size:11pt}
  .rv{opacity:1;transform:none}
}

/* ==========================================================================
   Fiche projet — chiffres et dessous technique
   ========================================================================== */
.projet-chiffres{
  display:flex;flex-wrap:wrap;
  border-top:1px solid var(--filet);border-bottom:1px solid var(--filet);
  margin-top:var(--e5);
}
.projet-chiffre{
  flex:1 1 190px;max-width:320px;
  padding:var(--e4) var(--e3) var(--e4) 0;border-right:1px solid var(--filet);
  display:flex;flex-direction:column;gap:var(--e2);
}
.projet-chiffre:last-child{border-right:0}
.projet-chiffre b{
  font-family:var(--serif);font-weight:200;font-size:clamp(32px,4vw,52px);
  line-height:1;letter-spacing:-.035em;font-variant-numeric:tabular-nums;
}
.projet-chiffre .label{max-width:26ch}
@media(max-width:600px){
  .projet-chiffre{border-right:0;padding-right:0;border-bottom:1px solid var(--filet)}
  .projet-chiffre:last-child{border-bottom:0}
}

.capot{margin-top:var(--e6)}
.projet-chiffres + .capot{margin-top:var(--e5)}
.capot__titre{
  font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.19em;
  text-transform:uppercase;color:var(--laiton);margin-bottom:var(--e4);
}
.capot__liste{margin:0;border-top:1px solid var(--filet)}
.capot__ligne{
  display:grid;grid-template-columns:var(--rail) minmax(0,1fr);gap:var(--e5);
  padding:var(--e3) 0;border-bottom:1px solid var(--filet-doux);
}
.capot__ligne:last-child{border-bottom:0}
.capot dt{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--encre-pale);padding-top:.35em;line-height:1.7;
}
.capot dd{margin:0;color:var(--encre-doux);max-width:60ch}
@media(max-width:760px){
  .capot__ligne{grid-template-columns:1fr;gap:4px;padding:var(--e3) 0}
  .capot dt{padding-top:0}
}