*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}

html{scroll-behavior:smooth; -webkit-text-size-adjust:100%; scrollbar-gutter:stable}

body{
  background-color:var(--brume);
  color:var(--suie);
  font-family:var(--f-corps); font-size:var(--t-corps); line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;   
}

img,svg,video{display:block; max-width:100%; height:auto}

img{-webkit-user-drag:none; -webkit-touch-callout:none; -webkit-user-select:none; user-select:none}

body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  opacity:var(--grain); mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='4' stitchTiles='stitch'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='0 0 0 .35 .7'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
}

::selection{background:var(--signal); color:var(--suie)}

:focus-visible{outline:2px solid var(--suie); outline-offset:3px}

.saut-contenu{
  position:absolute; left:-9999px; top:0; z-index:10000;
  background:var(--suie); color:var(--brume); padding:.8rem 1.2rem;
}
.saut-contenu:focus{left:.5rem; top:.5rem}

h1,h2,h3,.display{
  font-family:var(--f-display); font-weight:800;
  text-transform:uppercase; line-height:.92; letter-spacing:.005em;
  text-wrap:balance;
}
h1{font-size:var(--t-3xl)}
h2{font-size:var(--t-xl)}
h3{font-size:var(--t-md)}

.mono{
  font-family:var(--f-data); font-weight:400; font-size:var(--t-micro);
  text-transform:uppercase; letter-spacing:.12em; font-variant-numeric:tabular-nums;
}
.chapo{font-size:var(--t-md); line-height:1.45; max-width:46ch}
.texte{max-width:64ch}
.sourdine{color:var(--encre-72)}

.page{width:min(var(--page),100%); margin-inline:auto; padding-inline:clamp(1.2rem,4vw,3rem)}
.section{padding-block:var(--section)}
.section + .section{border-top:1px solid var(--encre-12)}

.entete-sec{display:flex; align-items:baseline; gap:var(--gap-s); flex-wrap:wrap; margin-bottom:var(--gap-l)}
.entete-sec .mono{color:var(--vert-de-gris)}

.lumiere{position:relative}
.lumiere::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  left:50%; transform:translateX(-50%); width:100vw; top:-40%; bottom:-15%;
  background:
    radial-gradient(30vw 26vw at 74vw 16%, rgba(var(--signal-rgb),.56), transparent 72%),
    radial-gradient(22vw 20vw at 56vw 34%, rgba(31,152,138,.32), transparent 74%);
}

.biseau{
  clip-path:polygon(0 0, calc(100% - var(--coin)) 0, 100% var(--coin), 100% 100%, 0 100%);
}

.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:1rem 1.7rem; font-weight:600; font-size:var(--t-petit);
  text-decoration:none; border:0; cursor:pointer; font-family:var(--f-corps);
  clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
  transition:background var(--d-court), color var(--d-court);
}
.btn--signal{background:var(--signal); color:var(--suie)}
.btn--signal:hover{background:var(--suie); color:var(--brume)}
.btn--suie{background:var(--suie); color:var(--brume)}
.btn--suie:hover{background:var(--signal); color:var(--suie)}
.btn--nu{border:1.5px solid var(--encre-22); color:var(--suie); clip-path:none}
.btn--nu:hover{border-color:var(--suie)}

.carte{background:var(--suie); padding:var(--bord)}
.carte,.carte__fond{
  clip-path:polygon(0 0, calc(100% - var(--coin)) 0, 100% var(--coin), 100% 100%, 0 100%);
}
.carte__fond{background:var(--corde); padding:1.4rem; height:100%}
.carte--signal{background:var(--signal)}
.carte--signal .carte__fond{background:var(--signal)}
.carte--suie .carte__fond{background:var(--suie); color:var(--brume)}
.carte--suie .sourdine{color:rgba(233,235,234,.7)}

.chiffre{
  font-family:var(--f-display); font-weight:800; font-size:var(--t-2xl);
  line-height:.85; display:block; font-variant-numeric:tabular-nums;
}

.entete{
  position:sticky; top:0; z-index:100;
  background:color-mix(in srgb, var(--brume) 88%, transparent);
  backdrop-filter:blur(10px);
}
.entete::after{           
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg, var(--suie), var(--encre-12) 62%, transparent);
}

.entete__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(1.5rem, 4vw, 5.5rem); padding-block:.8rem;
}

.marque{display:flex; align-items:center; gap:.65rem; text-decoration:none; color:inherit}
.marque__a{width:41px; height:auto; flex:none}
.marque__nom{width:auto; height:22px; flex:none}

.nav{display:flex; align-items:center; gap:1.1rem}
.nav a:not(.btn){
  white-space:nowrap;   
  position:relative; color:inherit; text-decoration:none;
  font-family:var(--f-display); font-weight:800; text-transform:uppercase;
  font-size:1.06rem; letter-spacing:.02em; line-height:1;
  padding-block:.5rem;
  transition:color .2s ease;
}
.nav a:not(.btn):hover{color:var(--signal)}

.nav a.secondaire{font-size:.92rem; color:var(--encre-64)}
.nav a.secondaire:hover{color:var(--signal)}
.nav a.secondaire:first-of-type{margin-left:1.2rem}

.nav a[aria-current="page"]:not(.btn){color:var(--signal)}

.entete .btn{padding:.62rem 1.15rem; font-size:.82rem;
  clip-path:polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 0 100%)}

.nav a.nav__tel{
  font-family:var(--f-data); font-weight:500; text-transform:none;
  font-size:.92rem; letter-spacing:0; color:var(--encre-72);
}
.nav a.nav__tel:hover{color:var(--signal)}
@media (max-width:1200px){ .nav a.nav__tel{display:none} }

.panneau a.panneau__tel{
  font-family:var(--f-data); font-size:var(--t-md); text-transform:none;
  color:var(--signal); border-bottom:0; margin-top:.8rem;
}

.burger{display:none; background:none; border:0; cursor:pointer; padding:.6rem; color:inherit;
  
  transition:color 0s linear calc(var(--d-menu) * .4)}
.burger[aria-expanded="true"]{transition-delay:0s}
.burger span{display:block; width:24px; height:2px; background:currentColor; transition:transform var(--d-menu) var(--e-menu), opacity var(--d-menu) var(--e-menu)}
.burger span + span{margin-top:6px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

.panneau{
  position:fixed; inset:0 0 0 auto; width:min(100%,460px); z-index:99;
  background:var(--suie); overflow-x:hidden; overflow-y:auto;
  overscroll-behavior:contain; color-scheme:dark;
  transform:translateX(100%); will-change:transform;
  transition:transform var(--d-menu) var(--e-menu);
}
.panneau[data-ouvert="true"]{transform:none}

.panneau__inner{width:min(100vw,460px); min-height:100%;
  padding:calc(var(--bas-entete, 4.2rem) + 2.5rem) 2rem 2rem;
  display:flex; flex-direction:column; gap:.2rem}
.panneau a{
  font-family:var(--f-display); font-weight:800; text-transform:uppercase;
  font-size:var(--t-lg); color:var(--brume); text-decoration:none;
  padding-block:.5rem; border-bottom:1px solid rgba(233,235,234,.14);
  opacity:0; transform:translateX(28px);
  transition:opacity var(--d-menu) var(--e-menu), transform var(--d-menu) var(--e-menu);
}
.panneau a:hover{color:var(--signal)}

.panneau[data-ouvert="true"] a{opacity:1; transform:none;
  transition-duration:var(--d-liens); transition-delay:calc(var(--i, 0) * var(--pas-liens))}

.hero{--hero-bas:clamp(2rem,5vw,3rem); --hero-texte:clamp(1.5rem,4vw,2.5rem);
  padding-block:0 var(--hero-bas)}
.hero__grille{display:grid; grid-template-columns:1.05fr .95fr; gap:var(--gap-l); align-items:start}

.hero__texte{align-self:center;
  padding-block:calc(var(--hero-texte) + var(--hero-bas)) var(--hero-texte)}
.hero h1{margin-block:1rem 1.2rem}   
.hero h1 em{font-style:normal; color:var(--signal)}
.hero__preuves{display:flex; flex-wrap:wrap; gap:var(--gap-m); margin-block:var(--gap-m)}
.preuve{display:flex; align-items:center; gap:.5rem; font-size:var(--t-petit); font-weight:600}
.preuve svg{flex:none; color:var(--vert-de-gris)}
.hero__actions{display:flex; flex-wrap:wrap; gap:.8rem}
.hero__sujet{margin-top:-1px}

.hero__sujet img{width:min(100%,450px); margin-inline:auto;
  filter:drop-shadow(0 26px 34px rgba(20,22,26,.26))}

.silos{display:grid; grid-template-columns:1fr 1fr; gap:var(--gap-s)}

.silos--trois{grid-template-columns:repeat(auto-fit,minmax(255px,1fr))}
.silo{position:relative; text-decoration:none; color:inherit; display:block}
.silo__fond{padding:1.8rem; height:100%; display:flex; flex-direction:column; gap:.6rem;
  transition:background var(--d-court)}
.silo:hover .silo__fond{background:var(--signal)}
.silo:hover .sourdine{color:var(--suie)}
.silo__media{aspect-ratio:16/10; overflow:hidden; margin-bottom:1rem}
.silo__media img{width:100%; height:100%; object-fit:cover}
.silo .fleche{margin-top:auto; font-family:var(--f-data); font-size:var(--t-petit); color:var(--vert-de-gris)}
.silo:hover .fleche{color:var(--suie)}

.chiffres{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:var(--gap-s)}

.realisations{display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:var(--gap-s)}

@media (min-width: 1000px){
  .realisations:not(:has(> .chantier:nth-child(3))){grid-template-columns:repeat(3,minmax(0,1fr))}
}
.chantier{text-decoration:none; color:inherit; display:block}
.chantier__media{aspect-ratio:4/3; overflow:hidden; position:relative}
.chantier__media img{width:100%; height:100%; object-fit:cover; transition:transform .5s var(--e-sortie)}
.chantier:hover .chantier__media img{transform:scale(1.04)}
.chantier__cote{
  position:absolute; left:0; top:0; bottom:0; width:var(--marge-cote);
  background:rgba(20,22,26,.82); color:var(--brume);
  display:flex; flex-direction:column; justify-content:space-between;
  padding:.7rem .5rem; text-align:right;
}
.chantier__cote span{font-family:var(--f-data); font-size:var(--t-micro); color:rgba(233,235,234,.5)}
.chantier__cote span.actif{color:var(--signal); font-weight:500}
.chantier__corps{padding-top:.9rem}
.chantier h3{font-size:var(--t-corps); margin-bottom:.25rem}
.chantier .mono{color:var(--vert-de-gris)}

.bandeau{overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.bandeau__piste{display:flex; gap:var(--gap-l); width:max-content;
  animation:defile var(--defile-duree, 80s) linear infinite}
.bandeau:hover .bandeau__piste{animation-play-state:paused}
.logo-part{height:52px; width:132px; object-fit:cover; filter:grayscale(1) contrast(.4) brightness(1.25); opacity:.75}
@keyframes defile{from{transform:translateX(0)} to{transform:translateX(-50%)}}

.filigrane{position:relative; overflow:hidden}
.filigrane__mot{
  position:absolute; inset-inline:0; top:50%; transform:translateY(-50%);
  font-family:var(--f-display); font-weight:800; font-size:clamp(5rem,18vw,14rem);
  line-height:.8; text-align:center; color:rgba(20,22,26,.11);
  pointer-events:none; user-select:none; z-index:0;
}
.filigrane > *:not(.filigrane__mot){position:relative; z-index:1}

.articles{list-style:none; border-top:1px solid var(--encre-12)}
.articles li{border-bottom:1px solid var(--encre-12)}
.articles a{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--gap-m);
  align-items:baseline; padding-block:1.15rem;
  color:inherit; text-decoration:none; transition:color .2s ease;
}
.articles a:hover .articles__titre{color:var(--signal)}
.articles__duree{color:var(--encre-48); white-space:nowrap}
.articles__titre{
  font-family:var(--f-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(1.15rem,2.1vw,1.55rem); line-height:1.06; letter-spacing:.01em;
  transition:color .2s ease;
}
@media (max-width: 640px){
  .articles a{grid-template-columns:1fr; gap:.3rem}
}

.conversion{background:var(--suie); color:var(--brume)}
.conversion .mono{color:rgba(233,235,234,.55)}
.conversion__inner{display:grid; grid-template-columns:1.2fr .8fr; gap:var(--gap-l); align-items:center;
  padding-block:var(--section)}

.conversion .btn--nu{border-color:rgba(233,235,234,.32); color:var(--brume)}
.conversion .btn--nu:hover{border-color:var(--signal); color:var(--signal)}

.temoignage{border-left:2px solid var(--vert-de-gris); padding-left:1.2rem}
.temoignage p{font-size:var(--t-md); line-height:1.45; margin-bottom:.7rem}

.pied{border-top:1px solid var(--encre-12); padding-block:var(--gap-l)}
.pied__grille{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:var(--gap-m)}
.pied a{color:inherit; text-decoration:none; font-size:var(--t-petit)}
.pied a:hover{color:var(--signal)}
.pied h3{font-size:var(--t-petit); margin-bottom:.6rem; letter-spacing:.1em}
.pied__cookies{background:none; border:0; padding:0; font:inherit; font-size:var(--t-petit); color:inherit; cursor:pointer; text-align:left}
.pied__cookies:hover{color:var(--signal)}

.cookies{
  position:fixed; left:1rem; right:1rem; bottom:1rem; z-index:150;
  max-width:620px; margin-inline:auto; display:grid; gap:.8rem;
  background:var(--suie); color:var(--brume); padding:1.1rem 1.2rem 1.2rem;
  box-shadow:0 18px 40px rgba(20,22,26,.25);
}
.cookies__titre{color:rgba(233,235,234,.55)}
.cookies__texte{font-size:var(--t-petit); line-height:1.5}
.cookies__texte a{color:inherit; text-decoration:underline; text-underline-offset:2px}
.cookies__choix{display:grid; grid-template-columns:1fr 1fr; gap:.6rem}
.cookies__choix button{
  min-height:44px; padding:.7rem 1rem; border:0; cursor:pointer;
  background:var(--brume); color:var(--suie); font:600 var(--t-petit)/1.2 var(--f-corps);
  transition:background var(--d-court);
}
.cookies__choix button:hover{background:var(--signal)}
.cookies__choix button:focus-visible, .cookies__texte a:focus-visible{outline:2px solid var(--signal); outline-offset:2px}
.pied ul{list-style:none; display:grid; gap:.35rem}

@media (max-width: 900px){
  .hero__grille{grid-template-columns:1fr}
  .hero__sujet{order:-1; margin-top:-1px}
  .hero__texte{padding-top:var(--gap-m)}
  .hero__sujet img{width:min(55%,300px)}
  .silos{grid-template-columns:1fr}
  .conversion__inner{grid-template-columns:1fr}
}

@media (max-width: 900px){
  .hero__grille{row-gap:0}
  
  .hero__sujet img{width:min(65%, 225px); margin-inline:auto 0; filter:none}
  .hero__texte{padding-top:28px}
  .hero h1{line-height:.86}
  .hero .chapo{font-size:1.2rem; line-height:1.5}
  .hero__preuves{gap:.5rem 1.1rem}
  .hero__actions{flex-direction:column}
  .hero__actions .btn{width:100%; justify-content:center}
  
  .hero.lumiere::before{top:0; bottom:auto; height:calc(170px + 60vw);
    background:
      radial-gradient(62vw 54vw at 72vw 170px, rgba(var(--signal-rgb),.56), transparent 72%),
      radial-gradient(46vw 42vw at 46vw 260px, rgba(31,152,138,.32), transparent 74%)}
}

@media (min-width: 360px) and (max-width: 900px){
  .hero__grille{container-type:inline-size;
    grid-template-columns:minmax(0,11fr) minmax(0,9fr); column-gap:12px;
    grid-template-rows:1fr auto auto 1fr auto auto auto;
    grid-template-areas:". sujet" "sur sujet" "titre sujet" ". sujet" "chapo chapo" "preuves preuves" "actions actions"}
  .hero__texte{display:contents}
  .hero__texte > .mono{grid-area:sur}
  .hero h1{grid-area:titre; margin:.6rem 0 0; line-height:.88;
    font-size:min(calc((100cqi - 12px) * .1), 4.4rem)}
  .hero .chapo{grid-area:chapo; margin-top:24px}
  .hero__preuves{grid-area:preuves}
  .hero__actions{grid-area:actions}
  .hero__sujet{grid-area:sujet; margin-right:calc(-1 * clamp(1.2rem,4vw,3rem))}
  .hero__sujet img{width:100%; max-width:none; margin:0}
  
  .hero.lumiere::before{height:76vw;
    background:
      radial-gradient(62vw 54vw at 78vw 30vw, rgba(var(--signal-rgb),.56), transparent 72%),
      radial-gradient(46vw 42vw at 26vw 34vw, rgba(31,152,138,.32), transparent 74%)}
}

@container (max-width: 643px){
  .hero__surtitre span{display:block}
  .hero__surtitre .hero__sep{display:none}
}
@container (max-width: 330px){
  .hero__surtitre{letter-spacing:.1em}
}
@media (max-width: 359px){
  .hero__surtitre span{display:block}
  .hero__surtitre .hero__sep{display:none}
}

@media (max-width: 359px){
  .hero__preuves{gap:.45rem .8rem}
  .preuve{font-size:.82rem; gap:.35rem}
}

@media (max-width: 1024px){
  .nav{display:none}
  .burger{display:block; position:relative; z-index:100}
  .burger[aria-expanded="true"]{color:var(--brume)}
}

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

.champ{display:grid; gap:.4rem; margin-bottom:var(--gap-s)}
.champ label{font-weight:600; font-size:var(--t-petit)}
.champ .aide{font-size:var(--t-micro); color:var(--encre-64); font-family:var(--f-data)}

.champ input,.champ textarea,.champ select{
  font-family:var(--f-corps); font-size:var(--t-corps); color:var(--suie);
  background:var(--corde); border:1px solid var(--champ-bord);
  padding:.75rem .9rem; width:100%;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.champ textarea{min-height:130px; resize:vertical}
.champ input:hover,.champ textarea:hover,.champ select:hover{border-color:var(--champ-bord-focus)}

.champ input:focus,.champ textarea:focus,.champ select:focus{
  outline:none;
  border-color:var(--champ-bord-focus);
}

.champ--erreur input:focus,.champ--erreur textarea:focus,.champ--erreur select:focus{
  border-color:#96271B;
}
.champ input::placeholder,.champ textarea::placeholder{color:var(--encre-48)}
.champ input:disabled,.champ textarea:disabled{
  background:var(--encre-12); border-color:var(--encre-12);
  color:var(--encre-48); cursor:not-allowed;
}

.champ--erreur input,.champ--erreur textarea,.champ--erreur select{border-color:#C0392B}
.champ__erreur{font-size:var(--t-petit); color:#C0392B; font-weight:600}
.champ--valide input{border-color:var(--vert-de-gris)}

.choix{display:flex; align-items:center; gap:.7rem; min-height:44px; padding-block:.6rem; cursor:pointer}
.choix span{font-size:var(--t-petit)}
.choix input{
  appearance:none; -webkit-appearance:none; margin:0; flex:none;
  width:20px; height:20px; display:grid; place-content:center;
  background:var(--corde); border:1.5px solid var(--encre-22); cursor:pointer;
  transition:background var(--d-court), border-color var(--d-court);
}
.choix:hover input{border-color:var(--encre-48)}
.choix input:checked{background:var(--signal); border-color:var(--signal)}
.choix input:focus-visible{outline:2px solid var(--suie); outline-offset:2px}

.choix input[type="radio"]::after{
  content:""; width:8px; height:8px; background:var(--suie);
  transform:scale(0); transition:transform var(--d-court) var(--e-sortie);
}
.choix input[type="radio"]:checked::after{transform:scale(1)}

.choix input[type="checkbox"]::after{
  content:""; width:11px; height:6px; margin-top:-3px;
  border-left:2px solid var(--suie); border-bottom:2px solid var(--suie);
  transform:rotate(-45deg) scale(0);
  transition:transform var(--d-court) var(--e-sortie);
}
.choix input[type="checkbox"]:checked::after{transform:rotate(-45deg) scale(1)}

fieldset{border:0}
legend{font-weight:600; font-size:var(--t-petit); margin-bottom:.4rem}

.options{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:.7rem}
.option{
  position:relative; display:grid; gap:.25rem; cursor:pointer;
  background:var(--corde); border:1.5px solid var(--encre-22);
  padding:1rem 2.6rem 1rem 1rem;
  transition:border-color var(--d-court), background var(--d-court), box-shadow var(--d-court);
}
.option:hover{border-color:var(--encre-48)}
.option:has(input:checked){
  border-color:var(--signal);
  background:color-mix(in srgb, var(--signal) 7%, var(--corde));
  box-shadow:var(--ombre-basse);
}
.option:has(input:focus-visible){outline:2px solid var(--suie); outline-offset:2px}
.option__titre{font-weight:600; font-size:var(--t-petit); line-height:1.3}
.option__desc{font-size:var(--t-micro); color:var(--encre-64); line-height:1.4}
.option input{position:absolute; top:.9rem; right:.9rem}

.etiquettes{display:flex; flex-wrap:wrap; gap:.6rem}
.etiquette{
  display:flex; align-items:center; gap:.6rem; cursor:pointer;
  background:var(--corde); border:1.5px solid var(--encre-22);
  padding:.7rem 1rem; min-height:44px; font-size:var(--t-petit);
  transition:border-color var(--d-court), background var(--d-court);
}
.etiquette:hover{border-color:var(--encre-48)}
.etiquette:has(input:checked){
  border-color:var(--signal);
  background:color-mix(in srgb, var(--signal) 7%, var(--corde));
}
.etiquette:has(input:focus-visible){outline:2px solid var(--suie); outline-offset:2px}
.etiquette input{width:18px; height:18px}

.fil{display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; padding-block:1.2rem}
.fil a{color:var(--encre-64); text-decoration:none}
.fil a:hover{color:var(--signal)}
.fil span[aria-current]{color:var(--suie)}
.fil li{list-style:none; display:flex; gap:.5rem; align-items:center}
.fil ol{display:flex; flex-wrap:wrap; gap:.5rem; padding:0}
.fil .sep{color:var(--encre-48)}

.fiche{display:grid; grid-template-columns:var(--marge-cote) minmax(0,1fr) minmax(0,.92fr);
  gap:clamp(1.4rem,3vw,2.6rem)}

.fiche__media{position:sticky; top:calc(67px + 1.4rem); align-self:start}
.cotation{
  position:relative; border-right:1px solid var(--encre-22);
  min-height:340px;
}
.cotation__repere{
  position:absolute; right:.7rem; transform:translateY(50%);
  bottom:calc(var(--n) / var(--max) * 100%);
  font-family:var(--f-data); font-size:var(--t-micro); color:var(--encre-48);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.cotation__repere::after{
  content:""; position:absolute; right:-.7rem; top:50%; width:7px; height:1px;
  background:var(--encre-22);
}
.cotation__repere--actif{color:var(--signal); font-weight:500}
.cotation__repere--actif::after{width:13px; height:2px; background:var(--signal)}
.cotation__legende{
  position:absolute; bottom:0; right:.7rem; writing-mode:vertical-rl;
  font-family:var(--f-data); font-size:var(--t-micro); color:var(--encre-48);
  text-transform:uppercase; letter-spacing:.12em;
}

.recit{display:grid; gap:var(--gap-m); max-width:62ch}

.recit__temps > h2{
  font-family:var(--f-data); font-weight:500; font-size:var(--t-micro);
  text-transform:uppercase; letter-spacing:.12em; color:var(--vert-de-gris);
  margin-bottom:.5rem;
}

.contrainte{border-left:2px solid var(--signal); padding:.2rem 0 .2rem 1.1rem}
.contrainte p{font-size:var(--t-petit)}

.releve{background:var(--suie); padding:var(--bord)}
.releve,.releve__fond{
  clip-path:polygon(0 0, calc(100% - var(--coin)) 0, 100% var(--coin), 100% 100%, 0 100%);
}
.releve__fond{background:var(--corde); padding:clamp(1.2rem,3vw,2rem)}

.releve__vedettes{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px; background:var(--encre-12); margin-bottom:1px}
.releve__vedettes > div{background:var(--corde); padding-block:.4rem 1.2rem; padding-inline:0 1rem}
.releve__vedettes > div + div{padding-left:1rem}
.releve dt{font-family:var(--f-data); font-size:var(--t-micro); text-transform:uppercase;
  letter-spacing:.1em; color:var(--vert-de-gris); margin-bottom:.3rem}
.releve__vedettes dd{font-family:var(--f-display); font-weight:800; font-size:var(--t-lg);
  line-height:.95; text-transform:uppercase; font-variant-numeric:tabular-nums}
.releve__vedettes dd small{display:block; font-family:var(--f-corps); font-weight:400;
  font-size:var(--t-micro); text-transform:none; color:var(--encre-64); margin-top:.3rem;
  letter-spacing:0}

.releve__reste{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:1rem; padding-top:1.2rem; border-top:1px solid var(--encre-12)}
.releve__reste dd{font-weight:600; font-size:var(--t-petit); line-height:1.35}

.comparateur{position:relative; overflow:hidden; --pos:50%; aspect-ratio:var(--ratio,3/2)}
.comparateur img{width:100%; height:100%; object-fit:cover; display:block}
.comparateur__apres{position:absolute; inset:0; clip-path:inset(0 0 0 var(--pos))}
.comparateur input[type="range"]{
  position:absolute; inset:auto 0 0 0; width:100%; margin:0; padding:0;
  height:100%; opacity:0; cursor:ew-resize; appearance:none; background:none;
}
.comparateur__poignee{
  position:absolute; top:0; bottom:0; left:var(--pos); width:2px;
  background:var(--corde); pointer-events:none;
}
.comparateur__poignee::after{
  content:""; position:absolute; top:50%; left:50%; width:38px; height:38px;
  transform:translate(-50%,-50%); background:var(--corde);
  box-shadow:0 2px 10px rgba(20,22,26,.3);
}
.comparateur input:focus-visible ~ .comparateur__poignee::after{outline:2px solid var(--signal); outline-offset:2px}
.comparateur__etiq{
  position:absolute; top:.8rem; font-family:var(--f-data); font-size:var(--t-micro);
  text-transform:uppercase; letter-spacing:.1em; background:var(--suie);
  color:var(--brume); padding:.3rem .6rem; pointer-events:none;
}
.comparateur__etiq--avant{left:.8rem}
.comparateur__etiq--apres{right:.8rem}

.galerie{position:relative}
.galerie__piste{
  display:flex; gap:var(--gap-s); overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scroll-padding-inline:0;
  height:clamp(300px, 56vh, 600px);
  scrollbar-width:none;
  clip-path:polygon(0 0, calc(100% - var(--coin)) 0, 100% var(--coin), 100% 100%, 0 100%);
}
.galerie__piste::-webkit-scrollbar{display:none}
.galerie__piste:focus-visible{outline:2px solid var(--suie); outline-offset:4px}
.galerie__vue{flex:none; scroll-snap-align:start; position:relative; height:100%; margin:0;
  background:var(--corde)}

.galerie__vue{max-width:100%}
.galerie__vue img{height:100%; width:auto; max-width:min(92vw, 1100px); object-fit:cover; display:block}
.galerie__vue figcaption{
  position:absolute; left:.8rem; bottom:.8rem; max-width:calc(100% - 1.6rem);
  font-family:var(--f-data); font-size:var(--t-micro); text-transform:uppercase;
  letter-spacing:.1em; background:var(--suie); color:var(--brume); padding:.3rem .6rem;
  pointer-events:none;
}
.galerie__barre{display:flex; align-items:center; justify-content:space-between;
  gap:var(--gap-s); margin-top:var(--gap-s)}
.galerie__compteur{color:var(--encre-64)}
.galerie__nav{display:flex; gap:.5rem}
.galerie__btn{
  width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center;
  background:var(--suie); color:var(--brume); border:0; cursor:pointer;
  clip-path:polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
  transition:background var(--d-court), color var(--d-court);
}
.galerie__btn:hover{background:var(--signal); color:var(--suie)}
.galerie__btn[aria-disabled="true"]{opacity:.35; cursor:default; pointer-events:none}
.galerie__btn svg{width:18px; height:18px}
@media (prefers-reduced-motion: reduce){
  .galerie__piste{scroll-behavior:auto}
}

@media (max-width: 760px){
  .galerie__piste{height:clamp(280px, 50vh, 460px)}
  .galerie__vue img{max-width:100%; object-fit:contain}
}

@media (max-width: 1080px){
  .fiche{grid-template-columns:var(--marge-cote) 1fr}
  .fiche__media{position:static; grid-column:1 / -1; margin-top:var(--gap-s)}
}
@media (max-width: 760px){
  
  .fiche{grid-template-columns:1fr; gap:1rem}
  .cotation{min-height:0; border-right:0; border-bottom:1px solid var(--encre-22);
    display:flex; justify-content:space-between; padding-bottom:.6rem}
  .cotation__repere{position:static; transform:none; bottom:auto; right:auto}
  .cotation__repere::after{display:none}
  .cotation__legende{display:none}
}

.zone-entete{position:relative; overflow:hidden;
  padding-block:clamp(2rem,5vw,3.5rem) clamp(3rem,7vw,5rem)}
.zone-entete .filigrane__mot{
  top:auto; bottom:0; transform:none; text-align:left;
  inset-inline:auto; left:0; line-height:1;
}
.zone-entete > *:not(.filigrane__mot){position:relative; z-index:1}

.zone-donnees{display:flex; flex-wrap:wrap; gap:clamp(1.4rem,4vw,3rem); margin-top:var(--gap-m)}
.zone-donnees > div{display:grid; gap:.15rem}
.zone-donnees dt{font-family:var(--f-data); font-size:var(--t-micro); text-transform:uppercase;
  letter-spacing:.1em; color:var(--vert-de-gris)}
.zone-donnees dd{font-family:var(--f-display); font-weight:800; font-size:var(--t-lg);
  line-height:1; text-transform:uppercase; font-variant-numeric:tabular-nums}

.villes{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:.7rem}

.ville{
  display:flex; flex-direction:column; align-items:flex-start; gap:.45rem;
  text-decoration:none; color:inherit; background:var(--corde);
  border:1px solid var(--encre-12); padding:1rem 1.1rem;
  transition:border-color var(--d-court), background var(--d-court);
}
.ville:hover{border-color:var(--signal); background:color-mix(in srgb, var(--signal) 6%, var(--corde))}
.ville__nom{font-family:var(--f-display); font-weight:800; text-transform:uppercase;
  font-size:var(--t-md); line-height:1}
.ville__compte{font-family:var(--f-data); font-size:var(--t-micro); color:var(--encre-64);
  line-height:1.4; font-variant-numeric:tabular-nums}
.ville--vide{opacity:.55; pointer-events:none}

.villes--communes{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}

.villes--communes .ville__nom{font-size:1.15rem; line-height:1.08}

.ville--a-venir{border-style:dashed}
.ville--a-venir .ville__compte{color:var(--vert-de-gris)}
.ville--a-venir:hover{border-color:var(--encre-12); background:var(--corde)}
span.ville{cursor:default}

.devis{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);
  gap:clamp(1.6rem,4vw,3.5rem); align-items:start}
.devis__aside{position:sticky; top:calc(67px + 1.4rem); display:grid; gap:var(--gap-m)}

.devis > form{padding-top:calc(1.4rem + var(--bord))}

.groupe{border:0; padding:0; margin-bottom:var(--gap-l)}
.groupe > legend{
  font-family:var(--f-display); font-weight:800; text-transform:uppercase;
  font-size:var(--t-md); letter-spacing:.01em; margin-bottom:.3rem; padding:0;
}
.groupe__note{font-size:var(--t-petit); color:var(--encre-64); margin-bottom:var(--gap-s)}

.duo{display:grid; grid-template-columns:1fr 1fr; gap:var(--gap-s); align-items:start}
.facultatif{font-family:var(--f-data); font-size:var(--t-micro); color:var(--encre-48);
  text-transform:uppercase; letter-spacing:.1em; font-weight:400}

.etapes{display:grid; gap:1rem; counter-reset:etape}
.etape{display:grid; grid-template-columns:auto 1fr; gap:.9rem; align-items:start}
.etape::before{
  counter-increment:etape; content:counter(etape);
  font-family:var(--f-display); font-weight:800; font-size:var(--t-md); line-height:1;
  color:var(--signal); min-width:1.2em;
}
.etape h3{font-size:var(--t-petit); margin-bottom:.15rem; text-transform:none;
  font-family:var(--f-corps); font-weight:600; letter-spacing:0}
.etape p{font-size:var(--t-petit); color:var(--encre-72); line-height:1.5}

.reassurance{background:var(--suie); padding:var(--bord)}
.reassurance,.reassurance__fond{
  clip-path:polygon(0 0, calc(100% - var(--coin)) 0, 100% var(--coin), 100% 100%, 0 100%);
}
.reassurance__fond{background:var(--suie); color:var(--brume); padding:1.4rem}
.reassurance ul{list-style:none; display:grid; gap:.7rem; margin-top:.9rem}
.reassurance li{display:flex; gap:.6rem; align-items:start; font-size:var(--t-petit)}
.reassurance svg{flex:none; color:var(--vert-de-gris); margin-top:.25rem}

@media (max-width: 900px){
  .devis{grid-template-columns:1fr}
  .devis__aside{position:static; order:-1}
  .duo{grid-template-columns:1fr}
}

.fichiers input[type="file"]{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.depot{
  display:flex; align-items:center; gap:.9rem; cursor:pointer;
  background:var(--corde); border:1px dashed var(--champ-bord);
  padding:1.1rem 1.2rem; min-height:44px;
  transition:border-color var(--d-court), background var(--d-court);
}
.depot:hover{border-color:var(--signal); background:color-mix(in srgb, var(--signal) 5%, var(--corde))}
.fichiers input:focus-visible + .depot{outline:2px solid var(--suie); outline-offset:2px}
.depot__icone{
  flex:none; width:38px; height:38px; display:grid; place-content:center;
  background:var(--suie); color:var(--brume);
}
.depot__titre{font-weight:600; font-size:var(--t-petit); display:block}
.depot__note{font-family:var(--f-data); font-size:var(--t-micro); color:var(--encre-64);
  text-transform:uppercase; letter-spacing:.08em}

.depot__liste{list-style:none; display:grid; gap:.4rem; margin-top:.7rem}
.depot__liste li{
  display:flex; align-items:center; justify-content:space-between; gap:.8rem;
  background:var(--corde); border:1px solid var(--encre-12); padding:.55rem .8rem;
  font-size:var(--t-petit);
}
.depot__liste .poids{font-family:var(--f-data); font-size:var(--t-micro); color:var(--encre-64);
  white-space:nowrap; font-variant-numeric:tabular-nums}
.depot__liste .refuse{color:#C0392B; font-weight:600}
.depot__retirer{
  background:none; border:0; cursor:pointer; color:var(--encre-64);
  font-family:var(--f-data); font-size:var(--t-micro); text-transform:uppercase;
  letter-spacing:.08em; padding:.3rem .4rem;
}
.depot__retirer:hover{color:#C0392B}

.envoi{
  position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:1.5rem;
  overflow:hidden; cursor:progress;
  background:color-mix(in srgb, var(--brume) 94%, transparent);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
}
.envoi__boite{display:grid; justify-items:center; gap:var(--gap-s); text-align:center; max-width:34ch}
.envoi__descente{position:relative; width:56px; height:120px}
.envoi__descente::before{                 
  content:""; position:absolute; left:50%; bottom:0; height:100vh; width:var(--bord);
  background:var(--encre-48); transform:translateX(-50%);
}
.envoi__a{
  position:absolute; left:0; top:0; width:56px; height:auto;
  animation:envoi-descente 2.6s cubic-bezier(.45,0,.55,1) infinite;
}
.envoi__etiquette{color:var(--vert-de-gris)}
.envoi__texte{font-size:var(--t-corps); line-height:1.5; color:var(--suie)}
.btn[aria-disabled="true"]{opacity:.5; pointer-events:none}

@keyframes envoi-descente{
  0%  {transform:translateY(-6px); opacity:0}
  15% {opacity:1}
  80% {opacity:1}
  100%{transform:translateY(58px); opacity:0}
}
@media (prefers-reduced-motion: reduce){
  .envoi__a{animation:none; transform:translateY(26px)}
}

.signes{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:.8rem}
.signe{display:flex; gap:.8rem; align-items:start; background:var(--corde);
  border:1px solid var(--encre-12); padding:1rem 1.1rem}
.signe svg{flex:none; color:var(--signal); margin-top:.15rem}
.signe strong{display:block; font-size:var(--t-petit); margin-bottom:.15rem}
.signe span{font-size:var(--t-micro); color:var(--encre-72); line-height:1.45}

.arbitrage{display:grid; grid-template-columns:1fr 1fr; gap:var(--gap-s)}
.arbitrage__col{background:var(--suie); padding:var(--bord)}
.arbitrage__col,.arbitrage__fond{
  clip-path:polygon(0 0, calc(100% - var(--coin)) 0, 100% var(--coin), 100% 100%, 0 100%);
}
.arbitrage__fond{background:var(--corde); padding:1.3rem; height:100%}
.arbitrage h3{font-size:var(--t-md); margin-bottom:.2rem}
.arbitrage .mono{color:var(--vert-de-gris); display:block; margin-bottom:.9rem}
.arbitrage ul{list-style:none; display:grid; gap:.55rem}
.arbitrage li{display:flex; gap:.6rem; font-size:var(--t-petit); line-height:1.45}
.arbitrage li::before{content:"—"; color:var(--encre-48); flex:none}

.charniere{
  background:var(--corde); border:1px solid var(--encre-12);
  padding:var(--gap-l) var(--gap-m);
  clip-path:polygon(0 0, calc(100% - var(--coin)) 0, 100% var(--coin), 100% 100%, 0 100%);
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  gap:var(--gap-m); align-items:center;
}
.charniere .mono{color:var(--vert-de-gris); display:block; margin-bottom:.4rem}
.charniere h2{font-size:var(--t-md); margin-bottom:.5rem}
.charniere p{font-size:var(--t-petit); color:var(--encre-72); line-height:1.55; max-width:62ch}
@media (max-width: 760px){
  .charniere{grid-template-columns:1fr}
  .charniere .btn{justify-self:start}
}

.faq{display:grid; gap:.6rem}
.faq details{background:var(--corde); border:1px solid var(--encre-12)}
.faq summary{
  cursor:pointer; padding:1.4rem 1.6rem; font-weight:600; font-size:var(--t-md);
  line-height:1.3; display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+"; font-family:var(--f-data); font-size:var(--t-lg); color:var(--signal);
  flex:none; line-height:1; transition:transform var(--d-court) var(--e-sortie);
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:var(--signal)}

.faq p{padding:0 1.6rem 1.5rem; font-size:var(--t-corps); color:var(--encre-72);
  line-height:1.7}

.autres{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:.6rem}
.autre{display:block; text-decoration:none; color:inherit; background:var(--corde);
  border:1px solid var(--encre-12); padding:.9rem 1rem;
  font-family:var(--f-display); font-weight:800; text-transform:uppercase;
  font-size:var(--t-corps); line-height:1.1;
  transition:border-color var(--d-court), color var(--d-court)}
.autre:hover{border-color:var(--signal); color:var(--signal)}

@media (max-width: 760px){
  .arbitrage{grid-template-columns:1fr}
}

.entete-service{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.8fr);
  gap:clamp(1.6rem,4vw,3rem); align-items:center}
.entete-service__media{overflow:hidden}
.entete-service__media img{width:100%; aspect-ratio:3/2; height:auto; object-fit:cover}

.methode{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.8fr);
  gap:clamp(1.6rem,4vw,3rem); align-items:center}
.methode__media{overflow:hidden}
.methode__media img{width:100%; aspect-ratio:3/2; height:auto; object-fit:cover}

.section.homme-metier{padding-block:clamp(2.5rem, 5vw, 4rem)}
.homme-metier__grille{display:grid; grid-template-columns:minmax(0,1fr) clamp(300px, 37.5vw, 480px);
  gap:clamp(1.6rem,3.5vw,2.5rem); align-items:stretch}
.homme-metier__texte h2{text-wrap:balance; margin-bottom:var(--gap-m)}
.homme-metier__texte .texte{font-size:1.2rem; line-height:1.6}
.homme-metier__media{display:flex; flex-direction:column}
.homme-metier__surtitre{display:block; color:var(--vert-de-gris); margin-bottom:.6rem}
.homme-metier__media figure{position:relative; flex:1; min-height:200px; margin:0; overflow:hidden}
.homme-metier__media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:50% 30%; display:block}   
@media (max-width: 900px){
  .homme-metier__grille{grid-template-columns:1fr}
  .homme-metier__media figure{flex:none; min-height:0}
  .homme-metier__media img{position:static; height:auto; aspect-ratio:16/10}
}

@media (max-width: 900px){
  .entete-service,.methode{grid-template-columns:1fr}
  .entete-service__media,.methode__media{min-height:0}
  .entete-service__media img,.methode__media img{aspect-ratio:16/10; height:auto}
}

.vedettes{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:var(--gap-s)}
.vedettes .silo__fond{padding:1.4rem}
.vedettes h3{font-size:var(--t-md)}
.vedettes p{font-size:var(--t-petit); line-height:1.5}

.catalogue{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:var(--gap-m) var(--gap-l)}
.famille h3{font-size:var(--t-md); margin-bottom:.7rem; padding-bottom:.5rem;
  border-bottom:1px solid var(--encre-12)}
.famille ul{list-style:none; display:grid; gap:.45rem}

.famille li{position:relative; padding-left:1.2rem; font-size:var(--t-petit); line-height:1.45; color:var(--encre-72)}
.famille li::before{content:"—"; color:var(--encre-48); position:absolute; left:0}

.texte a{color:var(--suie); text-decoration:underline; text-decoration-color:var(--signal);
  text-decoration-thickness:2px; text-underline-offset:.2em;
  transition:color var(--d-court)}
.texte a:hover{color:var(--signal)}

.famille a{color:var(--suie); font-weight:600; text-decoration:none;
  transition:color var(--d-court)}
.famille a:hover{color:var(--signal)}

.famille .a-venir{font-weight:600}

.filtres{display:flex; flex-wrap:wrap; gap:var(--gap-m) var(--gap-l); align-items:end;
  margin-bottom:var(--gap-l)}
.filtres fieldset{border:0; padding:0; margin:0; min-width:0}
.filtres legend{font-weight:400; color:var(--vert-de-gris); margin-bottom:.6rem; padding:0}
.filtres__compte{margin-left:auto; color:var(--encre-64); padding-bottom:.9rem}

.chantier[hidden]{display:none}
.etiquette[hidden]{display:none}
.filtres__vide{max-width:56ch; color:var(--encre-72); padding:var(--gap-m) 0}
.filtres__vide a{color:var(--suie); text-decoration:underline; text-decoration-color:var(--signal);
  text-decoration-thickness:2px; text-underline-offset:.2em}
@media (max-width: 760px){
  .filtres__compte{margin-left:0; padding-bottom:0; width:100%}
}

.autre--muet{border-style:dashed; color:var(--encre-64); cursor:default}
.autres--serre{gap:.4rem; grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.autres--serre .autre{padding:.6rem .7rem; font-size:var(--t-petit)}

.pilier-hero{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(1.6rem,4vw,3.5rem); align-items:end; padding-block:var(--gap-m) var(--gap-l)}
.pilier-hero h1{font-size:var(--t-3xl)}
.pilier-hero__media{position:relative; overflow:hidden; margin:0;
  clip-path:polygon(0 0, calc(100% - var(--coin)) 0, 100% var(--coin), 100% 100%, 0 100%)}
.pilier-hero__media img{width:100%; aspect-ratio:3/4; height:auto; object-fit:cover; display:block;
  max-height:min(72vh, 640px)}
.pilier-hero__media figcaption{
  position:absolute; right:.8rem; bottom:.8rem; background:var(--suie); color:var(--brume);
  padding:.35rem .7rem; font-size:var(--t-micro)}
.pilier-hero__media figcaption a{color:var(--signal); text-decoration:none}
.pilier-hero__media figcaption a:hover{text-decoration:underline}

.socle{background:var(--suie); color:var(--brume); padding-block:var(--gap-l)}
.socle__grille{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--gap-l)}
.socle .mono{color:rgba(233,235,234,.55); display:block}
.socle h3{font-size:var(--t-lg); margin:.5rem 0 .6rem}
.socle p{font-size:var(--t-petit); color:rgba(233,235,234,.78); line-height:1.55; max-width:40ch}

.descente{position:relative; display:grid; gap:var(--gap-xl)}
.descente::before{content:""; position:absolute; left:calc(var(--marge-cote) - 1px); top:0; bottom:0;
  width:1px; background:var(--encre-22)}
.etage{display:grid; grid-template-columns:var(--marge-cote) minmax(0,1fr) minmax(0,.85fr);
  gap:var(--gap-m) var(--gap-l); align-items:start; position:relative}
.etage__cote{text-align:right; padding-right:1rem; position:relative; padding-top:.35rem}
.etage__cote::after{content:""; position:absolute; right:-1px; top:1.1rem; width:13px; height:2px; background:var(--signal)}
.etage__cote .chiffre{font-size:var(--t-xl); line-height:.9}
.etage__cote strong{font-family:var(--f-data); font-weight:500; font-size:var(--t-micro);
  color:var(--signal); letter-spacing:.1em; text-transform:uppercase}
.etage__texte > .mono{color:var(--vert-de-gris); display:block; margin-bottom:.5rem}
.etage__texte h2{font-size:var(--t-xl); margin-bottom:.8rem}
.etage__texte p{max-width:56ch}
.etage__prestations{margin-top:var(--gap-m)}
.etage:nth-child(even){grid-template-columns:var(--marge-cote) minmax(0,.85fr) minmax(0,1fr)}
.etage:nth-child(even) .etage__media{order:2}
.etage:nth-child(even) .etage__texte{order:3}

.etage--sombre .etage__texte{background:var(--suie); color:var(--brume); padding:var(--gap-m);
  clip-path:polygon(0 0, calc(100% - var(--coin)) 0, 100% var(--coin), 100% 100%, 0 100%)}
.etage--sombre .etage__texte > .mono{color:rgba(233,235,234,.55)}
.etage--sombre .etage__texte p{color:rgba(233,235,234,.82)}
.etage--sombre .autre{background:transparent; color:var(--brume); border-color:rgba(233,235,234,.3)}
.etage--sombre .autre:hover{border-color:var(--signal); color:var(--signal)}
.etage--sombre .autre--muet{color:rgba(233,235,234,.6)}

.etapes--ligne{grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:var(--gap-m)}

@media (max-width: 1080px){
  .etage,.etage:nth-child(even){grid-template-columns:var(--marge-cote) minmax(0,1fr)}
  .etage__media,.etage:nth-child(even) .etage__media{order:3; grid-column:2}
  .etage:nth-child(even) .etage__texte{order:2}
}
@media (max-width: 760px){
  .pilier-hero{grid-template-columns:1fr; align-items:start}
  .pilier-hero__media img{max-height:none; aspect-ratio:4/5}
  .descente::before{display:none}
  .etage,.etage:nth-child(even){grid-template-columns:1fr; gap:var(--gap-s)}
  .etage__cote{text-align:left; padding:0; display:flex; align-items:baseline; gap:.5rem;
    border-bottom:1px solid var(--encre-22); padding-bottom:.4rem}
  .etage__cote::after{display:none}
  .etage__media,.etage:nth-child(even) .etage__media{grid-column:auto}
}

.facade-hero{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(1.6rem,4vw,3.5rem); align-items:center; padding-block:var(--gap-m) var(--gap-l)}
.facade-hero h1{font-size:var(--t-3xl)}
.facade-hero__media .mono a{color:var(--suie); text-decoration:underline; text-decoration-color:var(--signal);
  text-decoration-thickness:2px; text-underline-offset:.2em}

.lecture{border-top:1px solid var(--encre-22)}
.lecture__ligne{display:grid; grid-template-columns:200px minmax(0,.8fr) minmax(0,1.1fr) minmax(0,1fr);
  gap:var(--gap-m) var(--gap-l); align-items:start; padding-block:var(--gap-l);
  border-bottom:1px solid var(--encre-12)}
.lecture__media{margin:0; aspect-ratio:1; overflow:hidden;
  clip-path:polygon(0 0, calc(100% - var(--coin)) 0, 100% var(--coin), 100% 100%, 0 100%)}
.lecture__media img{width:100%; height:100%; object-fit:cover; display:block}
.lecture__ou .mono{color:var(--vert-de-gris); display:block; margin-bottom:.5rem}
.lecture__ou h3{font-size:var(--t-lg)}
.lecture__voit strong,.lecture__fait strong{display:block; font-family:var(--f-data); font-weight:500;
  font-size:var(--t-micro); text-transform:uppercase; letter-spacing:.12em; color:var(--encre-48);
  margin-bottom:.6rem}
.lecture__voit p{font-size:var(--t-petit); line-height:1.6; color:var(--encre-72)}

.facons{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:var(--gap-s)}
.facons .carte__fond{display:grid; gap:.7rem; align-content:start}
.facons .mono{color:var(--vert-de-gris)}
.facons h3{font-size:var(--t-md)}
.facons p{font-size:var(--t-petit); color:var(--encre-72); line-height:1.55}

.variables{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--gap-m) var(--gap-l)}
.variables dt{color:var(--vert-de-gris); margin-bottom:.4rem}
.variables dd{font-size:var(--t-petit); line-height:1.55; color:var(--encre-72)}

@media (max-width: 1080px){
  .lecture__ligne{grid-template-columns:160px minmax(0,1fr) minmax(0,1fr)}
  .lecture__fait{grid-column:2 / -1}
}
@media (max-width: 760px){
  .facade-hero{grid-template-columns:1fr}
  .lecture__ligne{grid-template-columns:minmax(0,1fr)}
  .lecture__media{max-width:40vw}
  .lecture__fait{grid-column:auto}
}

.carte-zones{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(1.6rem,4vw,3.5rem); align-items:center}
.carte-zones__texte .entete-sec{margin-bottom:var(--gap-m)}
.carte-zones__statut{border-top:1px solid var(--encre-22); margin-top:var(--gap-m);
  padding-top:1rem; min-height:6rem; display:grid; gap:.3rem}
.carte-zones__statut .mono{color:var(--vert-de-gris)}
.carte-zones__statut strong{font-family:var(--f-display); font-weight:800; text-transform:uppercase;
  font-size:var(--t-lg); line-height:1}
.carte-zones__statut .sourdine{color:var(--encre-64)}

.carte-be{width:100%; height:auto; display:block; overflow:visible}
.carte-be__zone path{fill:var(--encre-12); stroke:var(--brume); stroke-width:1.6;
  transition:fill var(--d-court)}
.carte-be__zone--doc path{fill:var(--encre-48)}
.carte-be__zone:hover path,
.carte-be__zone:focus-visible path{fill:var(--signal)}
.carte-be__zone:focus{outline:none}
.carte-be__zone:focus-visible path{stroke:var(--suie); stroke-width:2.4}

@media (max-width: 900px){
  .carte-zones{grid-template-columns:1fr}
  .carte-zones__statut{display:none}
}

.propos-hero{display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
  gap:clamp(1.6rem,4vw,3.5rem); align-items:center; padding-block:var(--gap-m) var(--gap-l)}
.propos-hero h1{font-size:var(--t-3xl)}
.propos-hero__media{position:relative; overflow:hidden; margin:0;
  clip-path:polygon(0 0, calc(100% - var(--coin)) 0, 100% var(--coin), 100% 100%, 0 100%)}
.propos-hero__media img{width:100%; aspect-ratio:3/4; height:auto; object-fit:cover; display:block}
.propos-hero__media figcaption{
  position:absolute; left:.8rem; bottom:.8rem; max-width:calc(100% - 1.6rem);
  background:var(--suie); color:var(--brume); padding:.35rem .7rem; font-size:var(--t-micro)}

.pourquoi{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(1.6rem,4vw,3.5rem); align-items:start}
.pourquoi .texte p + p{margin-top:1rem}
.consequences{display:grid; gap:var(--gap-m); border-left:1px solid var(--encre-22); padding-left:var(--gap-m)}
.consequences dt{font-family:var(--f-display); font-weight:800; text-transform:uppercase;
  font-size:var(--t-md); line-height:1; margin-bottom:.4rem}
.consequences dd{font-size:var(--t-petit); color:var(--encre-72); line-height:1.55}

.metiers{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:.7rem}
.metier{display:grid; gap:.5rem; align-content:start; background:var(--corde);
  border:1px solid var(--encre-12); padding:1.1rem 1.2rem}
.metier h3{font-size:var(--t-md)}
.metier p{font-size:var(--t-petit); color:var(--encre-72); line-height:1.5}

.regles__photos{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--gap-s); margin-bottom:var(--gap-l)}
.regles__photos figure{position:relative; margin:0; overflow:hidden;
  clip-path:polygon(0 0, calc(100% - var(--coin)) 0, 100% var(--coin), 100% 100%, 0 100%)}
.regles__photos img{width:100%; aspect-ratio:1; height:auto; object-fit:cover; display:block}
.regles__photos figcaption{
  position:absolute; left:.8rem; bottom:.8rem; max-width:calc(100% - 1.6rem);
  font-family:var(--f-data); font-size:var(--t-micro); text-transform:uppercase; letter-spacing:.1em;
  background:var(--suie); color:var(--brume); padding:.3rem .6rem}
.regles{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:var(--gap-m) var(--gap-l)}
.regles > div{border-top:2px solid var(--suie); padding-top:.9rem}
.regles dt{font-family:var(--f-display); font-weight:800; text-transform:uppercase;
  font-size:var(--t-md); line-height:1; margin-bottom:.5rem}
.regles dd{font-size:var(--t-petit); color:var(--encre-72); line-height:1.6}

.nid{border-left:2px solid var(--vert-de-gris); padding-left:1.4rem; max-width:62ch}
.nid .mono{color:var(--vert-de-gris); display:block; margin-bottom:.5rem}
.nid h2{font-size:var(--t-md); margin-bottom:.8rem}
.nid p + p{margin-top:.8rem}

@media (max-width: 1080px){
  .pourquoi{grid-template-columns:1fr}
  .consequences{border-left:0; padding-left:0; border-top:1px solid var(--encre-22); padding-top:var(--gap-m);
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
}
@media (max-width: 760px){
  .propos-hero{grid-template-columns:1fr; align-items:start}
  .propos-hero__media{max-width:min(100%,380px)}
  .regles__photos{grid-template-columns:1fr 1fr}
  .regles__photos figure:first-child{grid-column:1 / -1}
  .regles__photos figure:first-child img{aspect-ratio:3/2}
}

.journal-hero{padding-block:var(--gap-m) var(--gap-l); display:grid;
  grid-template-columns:minmax(0,1fr) auto; gap:var(--gap-l); align-items:end}
.journal-hero h1{font-size:var(--t-3xl)}
.journal-hero__compte{color:var(--encre-64); text-align:right; white-space:nowrap}

.journal__annee{display:grid; grid-template-columns:var(--marge-cote) minmax(0,1fr);
  gap:0 clamp(1.4rem,3vw,2.6rem); align-items:start}
.journal__annee + .journal__annee{margin-top:var(--gap-l)}
.journal__cote{position:sticky; top:calc(67px + 1.4rem); text-align:right; padding-right:.7rem;
  border-right:1px solid var(--encre-22); min-height:5rem;
  font-family:var(--f-display); font-weight:800; font-size:var(--t-lg); line-height:1;
  font-variant-numeric:tabular-nums}
.journal__cote::after{content:""; position:absolute; right:-1px; top:.35rem; width:13px; height:2px; background:var(--signal)}
.journal__liste{list-style:none; border-top:1px solid var(--encre-12)}
.billet{border-bottom:1px solid var(--encre-12)}
.billet a{display:grid; grid-template-columns:minmax(0,1fr) 168px; gap:var(--gap-m) var(--gap-l);
  align-items:center; padding-block:var(--gap-m); color:inherit; text-decoration:none}
.billet__titre{font-family:var(--f-display); font-weight:800; text-transform:uppercase;
  font-size:var(--t-xl); line-height:1; letter-spacing:.005em; transition:color var(--d-court)}
.billet a:hover .billet__titre{color:var(--signal)}
.billet__essentiel{margin-top:.7rem; max-width:60ch; color:var(--encre-72); line-height:1.55}
.billet__meta{display:block; margin-top:.8rem; color:var(--encre-48)}
.billet__media{aspect-ratio:1; overflow:hidden;
  clip-path:polygon(0 0, calc(100% - var(--coin)) 0, 100% var(--coin), 100% 100%, 0 100%)}
.billet__media img{width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s var(--e-sortie)}
.billet a:hover .billet__media img{transform:scale(1.04)}

.article{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:clamp(2rem,5vw,4.5rem);
  align-items:start; padding-block:var(--gap-s) var(--section)}
.article__corps{min-width:0; max-width:68ch}
.article__corps > * + *{margin-top:1.1rem}
.article__corps > h2{margin-top:var(--gap-xl); font-size:var(--t-xl); scroll-margin-top:calc(67px + 1rem)}
.article__corps > h2 + *{margin-top:var(--gap-s)}
.article__corps p{line-height:1.7}
.article__corps ul,.article__corps ol{padding-left:1.3rem; display:grid; gap:.55rem; line-height:1.6}
.article__corps li::marker{color:var(--signal); font-weight:600}
.article__corps a:not(.btn){color:var(--suie); text-decoration:underline; text-decoration-color:var(--signal);
  text-decoration-thickness:2px; text-underline-offset:.2em; transition:color var(--d-court)}
.article__corps a:not(.btn):hover{color:var(--signal)}

.article__une{margin:0; position:relative; overflow:hidden;
  clip-path:polygon(0 0, calc(100% - var(--coin)) 0, 100% var(--coin), 100% 100%, 0 100%)}
.article__une img{width:100%; aspect-ratio:16/9; height:auto; object-fit:cover; display:block}
.article__une figcaption,.article__figure figcaption{
  position:absolute; left:.8rem; bottom:.8rem; max-width:calc(100% - 1.6rem);
  font-family:var(--f-data); font-size:var(--t-micro); text-transform:uppercase; letter-spacing:.1em;
  background:var(--suie); color:var(--brume); padding:.3rem .6rem}
.article__meta{color:var(--encre-64); margin-top:var(--gap-s)}
.article__titre{font-size:var(--t-2xl); margin-top:.6rem}

.article__essentiel{border-left:2px solid var(--signal); padding:.3rem 0 .3rem 1.2rem; margin-top:var(--gap-m)}
.article__essentiel .mono{color:var(--vert-de-gris); display:block; margin-bottom:.6rem}
.article__essentiel p{font-size:var(--t-md); line-height:1.45}
.article__essentiel p + p{margin-top:.8rem; font-size:var(--t-corps); line-height:1.6; color:var(--encre-72)}

.article__sommaire{border-top:1px solid var(--encre-12); border-bottom:1px solid var(--encre-12);
  padding-block:1rem; margin-top:var(--gap-m)}
.article__sommaire .mono{color:var(--vert-de-gris); display:block; margin-bottom:.6rem}
.article__sommaire ol{list-style:none; padding:0; display:grid; gap:.35rem}

.article__corps .article__sommaire a{color:var(--suie); text-decoration:none; font-weight:600; font-size:var(--t-petit)}
.article__corps .article__sommaire a:hover{color:var(--signal)}

.article__figure{margin:var(--gap-l) 0 0; position:relative; overflow:hidden;
  clip-path:polygon(0 0, calc(100% - var(--coin)) 0, 100% var(--coin), 100% 100%, 0 100%)}
.article__figure img{width:100%; height:auto; object-fit:cover; display:block; aspect-ratio:var(--ratio,3/2)}

.article__citation{margin:var(--gap-l) 0 0; padding:.2rem 0 .2rem 1.2rem; border-left:2px solid var(--vert-de-gris)}
.article__citation p{font-size:var(--t-md); line-height:1.45}
.article__citation cite{display:block; margin-top:.6rem; font-style:normal;
  font-family:var(--f-data); font-size:var(--t-micro); text-transform:uppercase; letter-spacing:.1em; color:var(--encre-64)}

.article__faq{margin-top:var(--gap-s)}

.article__fin{margin-top:var(--gap-xl); background:var(--suie); padding:var(--bord)}
.article__fin,.article__fin > div{clip-path:polygon(0 0, calc(100% - var(--coin)) 0, 100% var(--coin), 100% 100%, 0 100%)}
.article__fin > div{background:var(--suie); color:var(--brume); padding:clamp(1.4rem,3vw,2rem)}
.article__fin h2{font-size:var(--t-lg); margin-bottom:.7rem}
.article__fin p{color:rgba(233,235,234,.78); max-width:52ch; line-height:1.6; margin-bottom:var(--gap-m)}

.article__aside{position:sticky; top:calc(67px + 1.4rem); display:grid; gap:var(--gap-m)}
.aside-bloc .carte__fond{display:grid; gap:.6rem}
.aside-bloc h3{font-size:var(--t-md)}
.aside-bloc p{font-size:var(--t-petit); color:var(--encre-72); line-height:1.55}
.aside-bloc .marque{margin-bottom:.3rem}
.aside-bloc .mono{color:var(--vert-de-gris)}
.aside-bloc .articles a{padding-block:.8rem}
.aside-bloc .articles__titre{font-size:1.05rem}
.aside-bloc .articles{border-top:0}

.similaires{border-top:1px solid var(--encre-12); padding-block:var(--section)}

@media (max-width: 1080px){
  .article{grid-template-columns:1fr}
  .article__aside{position:static}
  .article__corps{max-width:none}
}

.juridique{max-width:68ch}
.juridique > h2{margin-top:var(--gap-xl); font-size:var(--t-lg); scroll-margin-top:calc(67px + 1rem)}
.juridique > h2:first-of-type{margin-top:var(--gap-l)}
.juridique > h2 + *{margin-top:var(--gap-s)}
.juridique > * + *{margin-top:1rem}
.juridique p,.juridique li{line-height:1.7; color:var(--encre-80)}
.juridique ul{padding-left:1.3rem; display:grid; gap:.5rem}
.juridique li::marker{color:var(--signal); font-weight:600}
.juridique a{color:var(--suie); text-decoration:underline; text-decoration-color:var(--signal);
  text-decoration-thickness:2px; text-underline-offset:.2em; transition:color var(--d-court)}
.juridique a:hover{color:var(--signal)}
.juridique dl{display:grid; grid-template-columns:max-content minmax(0,1fr); gap:.6rem var(--gap-m);
  border-top:1px solid var(--encre-12); border-bottom:1px solid var(--encre-12); padding-block:1rem}
.juridique dt{font-family:var(--f-data); font-size:var(--t-micro); text-transform:uppercase; letter-spacing:.1em;
  color:var(--vert-de-gris); padding-top:.2rem}
.juridique dd{line-height:1.6}
.a-completer{display:inline-block; font-family:var(--f-data); font-size:var(--t-micro); text-transform:uppercase;
  letter-spacing:.08em; color:var(--encre-64); border:1px dashed var(--encre-22); padding:.15rem .5rem}
@media (max-width: 640px){
  .juridique dl{grid-template-columns:1fr; gap:.2rem}
  .juridique dd + dt{margin-top:.6rem}
}
@media (max-width: 900px){
  .journal-hero{grid-template-columns:1fr; align-items:start}
  .journal-hero__compte{text-align:left}
  .journal__annee{grid-template-columns:1fr; gap:var(--gap-s)}
  .journal__cote{position:static; text-align:left; border-right:0; padding:0 0 .4rem; min-height:0;
    border-bottom:2px solid var(--suie)}
  .journal__cote::after{display:none}
  .billet a{grid-template-columns:minmax(0,1fr) 96px; gap:var(--gap-s) var(--gap-m)}
  .billet__titre{font-size:var(--t-md)}
  .billet__meta{margin-top:.5rem}
}