/* theme.css - CSS de la maquette porte sous .neuf.
   Genere le 2026-10-03 depuis _outils/_refonte/maquette-accueil.html.
   Ne pas modifier a la main : relancer _outils/_refonte/_nuit/architecture.py. */

@font-face{font-family:'Archivo';src:url(../fonts/archivo-var.woff2) format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'Geist Mono';src:url(../fonts/geist-mono-var.woff2) format('woff2');font-weight:100 900;font-display:swap}
.neuf{
  --navy:#0F2B46; --navy-d:#0A1F33; --ink:#0E1117;
  --ivoire:#FAFAF9; --stone:#EFEAE0; --mist:#D7E1E8;
  --ocre:#C28840; --ocre-d:#9C6A2E;
  --sky:#2E7BA8; --sky-l:#9CC3DB; --sky-bg:#E6EEF4;--sky-bg2:#DCE7EF; --navy-2:#163A5C;
  --w:#F4F6F8; --w2:rgba(244,246,248,.76); --w3:rgba(244,246,248,.5);
  --soft:rgba(26,39,54,.74); --faint:rgba(26,39,54,.5);
  --fil:rgba(15,43,70,.14); --fil2:rgba(15,43,70,.28);
  --mono:'Geist Mono',ui-monospace,monospace;
  --px:clamp(20px,5vw,72px);
  --t:.6s cubic-bezier(.2,.8,.2,1);
}
.neuf{box-sizing:border-box}
.neuf{scroll-behavior:smooth}
.neuf{margin:0;overflow-x:clip;background:var(--ivoire);color:var(--ink);
  font-family:'Archivo',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.neuf img{display:block;max-width:100%}
.neuf a{color:inherit}
.neuf h1, .neuf h2, .neuf h3, .neuf h4, .neuf p, .neuf ul, .neuf ol, .neuf figure, .neuf blockquote{margin:0}
.neuf ul{list-style:none;padding:0}
.neuf button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.neuf .mono{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.neuf /* le fond cesse d'etre un aplat : trame de filets a 3 angles non multiples
   (theverge.com) et degrade radial ancre dans un angle (mckinsey.com) */
.pie.tram{background-image:
  linear-gradient(118deg,rgba(15,43,70,.035) .5px,rgba(0,0,0,0) .5px),
  linear-gradient(242deg,rgba(15,43,70,.026) .5px,rgba(0,0,0,0) .5px);
  background-size:120px 120px,160px 160px}
.neuf .tram{background-image:
  linear-gradient(118deg,rgba(156,195,219,.05) .5px,rgba(0,0,0,0) .5px),
  linear-gradient(242deg,rgba(156,195,219,.038) .5px,rgba(0,0,0,0) .5px),
  linear-gradient(14deg,rgba(156,195,219,.026) .5px,rgba(0,0,0,0) .5px);
  background-size:120px 120px,160px 160px,200px 200px}
.neuf .wrap{max-width:1360px;margin:0 auto;padding-inline:var(--px)}
.neuf /* l'accroche : quelques mots en graisse lourde dans un texte leger */

/* l'approche se resserre quand le corps grandit (vercel.com) */
.t-xl{letter-spacing:-.062em}
.neuf .t-l{letter-spacing:-.052em}
.neuf h2, .neuf h3{letter-spacing:-.032em}
.neuf .lead, .neuf p{letter-spacing:-.004em}
.neuf .t-l b, .neuf .t-xl b{font-weight:700;letter-spacing:-.058em;color:var(--navy)}
.neuf .acc{font-weight:680;letter-spacing:-.026em;color:var(--navy)}
.neuf .band-in .acc, .neuf .ctc .acc{color:var(--w)}
.neuf .lead{font-size:clamp(15.5px,1.3vw,19px);line-height:1.66;color:var(--soft);max-width:62ch}
.neuf /* titres : une seule echelle, .neuf portee par la graisse et la chasse */
.t-xl{font-size:clamp(38px,6.4vw,104px);font-weight:250;line-height:.94;letter-spacing:-.05em}
.neuf .t-l{font-size:clamp(30px,4.2vw,62px);font-weight:250;line-height:.98;letter-spacing:-.045em}
.neuf .t-m{font-size:clamp(22px,2.4vw,34px);font-weight:300;line-height:1.1;letter-spacing:-.035em}
.neuf .t-s{font-size:clamp(17px,1.5vw,21px);font-weight:400;line-height:1.24;letter-spacing:-.02em}
@media(max-width:860px){
.neuf .t-xl{font-weight:320}
.neuf .t-l{font-weight:360}
.neuf .t-m{font-weight:400}}
.neuf /* apparition */
.rev{opacity:0;transform:translateY(18px);
  transition:opacity .9s cubic-bezier(.16,1,.3,1),transform 1.15s cubic-bezier(.16,1,.3,1)}
.neuf .rev.on{opacity:1;transform:none}
.neuf /* les blocs photo se devoilent par un rideau qui monte, .neuf plutot que d'apparaitre */
.rev .ph, .neuf .rev .vg{clip-path:inset(0 0 100% 0);
  transition:clip-path 1.25s cubic-bezier(.16,1,.3,1) .06s}
.neuf .rev.on .ph, .neuf .rev.on .vg{clip-path:inset(0 0 0 0)}
.neuf /* et les voisins d'une meme grille se decalent */
.ent-g>.rev:nth-child(2), .neuf .eta-g>.rev:nth-child(2){transition-delay:.11s}
.neuf .ent-g>.rev:nth-child(2) .ph{transition-delay:.17s}
.neuf .ctc-g>.rev:nth-child(2){transition-delay:.09s}
.neuf .avi-p>.avi-q:nth-child(2){transition-delay:.07s}
.neuf .avi-p>.avi-q:nth-child(3){transition-delay:.14s}
@media(prefers-reduced-motion:reduce){
.neuf{scroll-behavior:auto}
.neuf .rev{opacity:1;transform:none;transition:none}
.neuf .rev .ph, .neuf .rev .vg{clip-path:none;transition:none}
.neuf{animation:none!important}
}
.neuf /* ---------------------------------------------------- repere de maquette */
.faux-hero{background:var(--navy-d);color:var(--w);padding:26px var(--px);
  display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.neuf .faux-hero .mono{color:var(--w3)}
.neuf /* ---------------------------------------------------- barre d'ancrage */
.anc{position:sticky;top:0;z-index:60;background:rgba(250,250,249,.86);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--fil);
  transform:translateY(-100%);transition:transform .45s var(--t)}
.neuf .anc.on{transform:none}
.neuf .anc-in{display:flex;align-items:center;gap:6px;height:54px;overflow-x:auto;
  scrollbar-width:none}
.neuf .anc-in::-webkit-scrollbar{display:none}
.neuf .anc a{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;color:var(--faint);padding:8px 13px;white-space:nowrap;
  border-bottom:2px solid transparent;transition:color .3s,border-color .3s}
.neuf .anc a:hover{color:var(--navy)}
.neuf .anc a.act{color:var(--navy);border-bottom-color:var(--sky);border-bottom-width:2px}
.neuf .anc .tel{margin-left:auto;font-family:var(--mono);font-size:12px;letter-spacing:.06em;
  text-decoration:none;color:var(--navy);white-space:nowrap;padding-left:18px;
  font-variant-numeric:tabular-nums}
@media(max-width:860px){
.neuf .anc .tel{display:none}}
.neuf /* ---------------------------------------------------- ouverture */
.ouv{background:var(--ivoire);padding:clamp(46px,5.4vw,80px) 0 clamp(40px,4.6vw,64px)}
.neuf .ouv-g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:clamp(22px,2.6vw,38px);align-items:start}
.neuf .ouv-t{grid-column:1 / 8;grid-row:1}
.neuf .chif{grid-column:1 / 8;grid-row:3}
.neuf .jnl{grid-column:8 / 13;grid-row:1 / span 3}
.neuf .ouv h2 em{font-style:normal;color:var(--ocre-d)}
.neuf .ouv .lead{margin-top:clamp(26px,3.4vw,44px);padding-left:clamp(16px,1.8vw,24px);
  border-left:2px solid var(--ocre);max-width:52ch;color:var(--navy)}
.neuf .ouv .lead b{font-weight:680;letter-spacing:-.024em}
.neuf /* le journal : une vedette, .neuf puis des breves numerotees (monocle.com).
   colle a la lecture sur toute la hauteur de la section, .neuf sans defilement
   interne : c'est la page qui defile, .neuf le journal se decolle tout seul a la fin
   de sa zone de grille. */
.jnl{position:sticky;top:72px;align-self:start;background:var(--sky-bg);
  border-left:2px solid var(--sky-l);padding:clamp(16px,1.8vw,24px)}
.neuf .jnl-k{display:block;padding-bottom:12px;margin-bottom:16px;
  border-bottom:1px solid var(--fil2);font-family:var(--mono);font-size:10px;
  font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--navy)}
.neuf .jnl-v{display:block;text-decoration:none;color:inherit;padding-bottom:17px;
  border-bottom:1px solid var(--fil2)}
.neuf .jnl-v .ph{display:block;aspect-ratio:3/2;overflow:hidden;background:var(--mist);margin-bottom:13px}
.neuf .jnl-v img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.1s var(--t)}
.neuf .jnl-v:hover img{transform:scale(1.05)}
.neuf .jnl-v i, .neuf .jnl-a i{display:block;font-style:normal;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ocre-d)}
.neuf .jnl-v b{display:block;margin-top:6px;font-size:16.5px;font-weight:550;letter-spacing:-.028em;
  line-height:1.24;color:var(--navy);transition:color var(--t)}
.neuf .jnl-v:hover b, .neuf .jnl-a:hover b{color:var(--ocre-d)}
.neuf .jnl-v .go{display:block;margin-top:10px;font-family:var(--mono);font-size:10px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--sky)}
.neuf .jnl-a{display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;padding:11px 0;
  border-bottom:1px solid var(--fil);text-decoration:none;color:inherit}
.neuf .jnl-a .n{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;color:var(--sky);padding-top:3px}
.neuf .jnl-a b{display:block;margin-top:3px;font-size:13.5px;font-weight:500;letter-spacing:-.022em;
  line-height:1.3;color:var(--navy);transition:color var(--t)}
.neuf .jnl-all{display:block;margin-top:15px;font-family:var(--mono);font-size:10px;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;color:var(--navy);text-decoration:none}
.neuf .jnl-all:hover{color:var(--ocre-d)}
.neuf /* fenetre courte : le journal depasse la hauteur utile. On ne le colle plus par
   le haut, .neuf on le colle par le bas (le reflexe des colonnes hautes du nytimes) :
   il monte avec la page jusqu'a ce que son pied touche le bas de l'ecran, .neuf et
   c'est la qu'il se fige. On en lit toujours l'integralite. */
@media(max-height:920px){ .jnl{top:auto;bottom:16px} }
.neuf /* les chiffres en damier, .neuf d'apres suffolk.com : chiffre plein en couleur de
   marque (aucune entreprise de construction serieuse ne les met en filigrane), .neuf carre de 12 px devant le libelle en capitales, .neuf et une case laissee vide -
   c'est elle qui casse la grille. */
.chif-t{grid-column:1 / 8;grid-row:2;align-self:end;
  margin:clamp(36px,4.4vw,60px) 0 clamp(13px,1.6vw,18px);
  font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint)}
.neuf .chif{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--fil)}
.neuf .chif .c{background:var(--ivoire);padding:clamp(18px,2.2vw,28px);
  min-height:clamp(150px,15vw,208px);display:flex;flex-direction:column;justify-content:flex-end}
.neuf /* la case libre reste vide : meme fond que les trois autres, .neuf rien dedans.
   C'est la case blanche de suffolk.com, .neuf sans rien y mettre. */
.chif .c-x{min-height:0}
.neuf .chif b{display:block;white-space:nowrap;font-size:clamp(34px,4.2vw,62px);font-weight:300;
  line-height:.88;letter-spacing:-.05em;color:var(--navy);font-variant-numeric:tabular-nums}
.neuf .chif b .pre{font-size:.42em;font-weight:400;letter-spacing:-.01em}
.neuf .chif b sup{font-size:.32em;font-weight:400;vertical-align:super;margin-left:.08em;letter-spacing:0}
.neuf .chif .k{display:block;margin-top:15px;font-family:var(--mono);font-size:10px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--navy)}
.neuf .chif .k::before{content:"";display:inline-block;width:12px;height:12px;background:var(--ocre);
  margin-right:10px;vertical-align:-1px}
.neuf .chif p{margin:8px 0 0;font-size:12px;line-height:1.56;color:var(--soft)}
@media(max-width:980px){
.neuf .ouv-g{grid-template-columns:1fr;row-gap:clamp(30px,4vw,48px)}
.neuf .ouv-t, .neuf .chif, .neuf .jnl, .neuf .chif-t{grid-column:auto;grid-row:auto}
.neuf .chif{margin-top:0}
.neuf .jnl{position:static}
.neuf .jnl-l{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:22px;align-content:start}
}
@media(max-width:620px){
.neuf .chif{grid-template-columns:1fr}
.neuf .chif .c-x{display:none}
.neuf .jnl-l{grid-template-columns:1fr}
}
.neuf .sh{display:flex;align-items:flex-end;gap:clamp(16px,3vw,40px);flex-wrap:wrap;
  padding-bottom:16px;border-bottom:1px solid var(--navy);margin-bottom:clamp(26px,3.4vw,46px)}
.neuf .sh .num{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--ocre-d)}
.neuf .sh .lab{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint)}
.neuf .sh .sp{flex-grow:1}
.neuf .sh .act{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ocre-d);text-decoration:none;border-bottom:1px solid rgba(156,106,46,.4);
  padding-bottom:3px;transition:color .3s,border-color .3s}
.neuf .sh .act:hover{color:var(--navy);border-color:var(--navy)}
.neuf .gal{padding:clamp(40px,4.6vw,66px) 0 clamp(34px,4vw,58px)}
.neuf .gal-p{display:flex;gap:clamp(14px,1.6vw,24px);overflow-x:auto;scroll-snap-type:x proximity;
  scroll-padding-inline:var(--px);
  padding-inline:var(--px);padding-bottom:clamp(20px,2.4vw,32px);
  scrollbar-width:none;cursor:grab;scroll-behavior:smooth}
.neuf .gal-p::-webkit-scrollbar{display:none}
.neuf .gal-p.drag{cursor:grabbing;scroll-behavior:auto}
.neuf .gal-c{flex:0 0 clamp(250px,30vw,430px);scroll-snap-align:start;text-decoration:none;
  color:inherit;position:relative}
.neuf .gal-c .ph{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--mist)}
.neuf .gal-c .ph img{width:100%;height:100%;object-fit:cover;
  transition:transform 1s var(--t),filter .6s var(--t)}
.neuf .gal-c:hover .ph img{transform:scale(1.055)}
.neuf .gal-c .ph::after{content:"";position:absolute;inset:auto 0 0 0;height:50%;
  background:linear-gradient(to top,rgba(10,31,51,.72),transparent);opacity:0;transition:opacity .5s var(--t)}
.neuf .gal-c:hover .ph::after{opacity:1}
.neuf .gal-c .ov{position:absolute;left:16px;right:16px;bottom:14px;color:var(--w);
  opacity:0;transform:translateY(10px);transition:opacity .5s var(--t),transform .5s var(--t)}
.neuf .gal-c:hover .ov{opacity:1;transform:none}
.neuf .gal-c .ov span{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase}
.neuf .gal-c .mt{display:flex;align-items:baseline;gap:12px;margin-top:14px}
.neuf .gal-c .mt .v{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--faint)}
.neuf .gal-c .mt .e{margin-left:auto;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ocre-d)}
.neuf .gal-c h3{margin-top:7px;font-size:clamp(15px,1.2vw,18px);font-weight:400;
  letter-spacing:-.02em;line-height:1.3;color:var(--navy);transition:color .3s}
.neuf .gal-c:hover h3{color:var(--ocre-d)}
.neuf .gal-n{display:flex;align-items:center;gap:14px;margin-top:clamp(16px,2vw,26px)}
.neuf .gal-n .bar{flex-grow:1;height:1px;background:var(--fil);position:relative}
.neuf .gal-n .bar i{position:absolute;left:0;top:-1px;height:3px;background:var(--navy);
  transition:left .3s var(--t),width .3s var(--t)}
.neuf .gal-n button{width:42px;height:42px;border:1px solid var(--fil2);display:grid;place-items:center;
  transition:background .3s,color .3s,border-color .3s}
.neuf .gal-n button:hover{background:var(--navy);color:var(--w);border-color:var(--navy)}
.neuf .gal-n .cpt{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--faint);
  font-variant-numeric:tabular-nums}
.neuf /* la tranche : seule surface pleine autorisee au bleu de niveau 2, .neuf 52 px.
   soprema.fr tient 1 % de sa page en #0072CE de cette facon, .neuf rockwool.fr 2 %
   en #D20014. On porte les certifications dessus : une bande qui informe. */
.trn{background:var(--sky);color:var(--w)}
.neuf .trn-t{margin:0;padding-top:clamp(14px,1.8vw,20px);font-family:var(--mono);font-size:10.5px;
  font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.neuf .trn ul{display:flex;align-items:center;flex-wrap:wrap;gap:clamp(14px,2.6vw,42px);
  min-height:52px;padding:9px 0 clamp(12px,1.6vw,18px)}
.neuf .trn li{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:10px;
  font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.92)}
.neuf .trn li::before{content:"";width:7px;height:7px;background:var(--w);flex:none}
.neuf .trn .fin{margin-left:auto;color:var(--w);text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.45);padding-bottom:2px}
.neuf .trn .fin:hover{border-color:var(--w)}
@media(max-width:860px){
.neuf .trn .fin{margin-left:0} }
.neuf /* ---------------------------------------------------- bandeau sombre */
.band{position:relative;overflow:hidden;background:var(--navy-d);
  margin-top:clamp(60px,7vw,110px)}
.neuf /* la tranche de certifications s'appuie directement sur la photo : pas de
   respiration blanche entre les deux, .neuf la bande saturee entre dans le
   bandeau sombre. */
.trn + .band{margin-top:0}
.neuf .band-ph{position:absolute;inset:-12% 0;opacity:.44}
.neuf .band-ph img{width:100%;height:100%;object-fit:cover;will-change:transform}
.neuf .band-in{position:relative;padding-block:clamp(48px,6.4vw,100px);color:var(--w)}
.neuf .band-in p{max-width:20ch}
.neuf .band-in .mono{color:var(--w3);display:block;margin-bottom:22px}
.neuf /* ---------------------------------------------------- metiers, .neuf tiroirs */
.met{padding:clamp(46px,5.4vw,80px) 0}
.neuf .met-g{display:grid;grid-template-columns:minmax(0,38%) minmax(0,1fr);
  gap:clamp(22px,3vw,48px);align-items:start}
.neuf .met-i{border-top:1px solid var(--fil)}
.neuf .met-l{display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;align-items:center;
  padding:15px 12px;border-bottom:1px solid var(--fil);text-decoration:none;
  transition:background var(--t),padding-left var(--t)}
.neuf .met-l i{font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  color:var(--faint);transition:color var(--t)}
.neuf .met-l b{font-size:clamp(15px,1.45vw,19px);font-weight:400;letter-spacing:-.028em;
  color:var(--navy);transition:color var(--t)}
.neuf .met-l.on{background:var(--navy);padding-left:20px}
.neuf .met-l.on i{color:var(--ocre)}
.neuf .met-l.on b{color:var(--w)}
.neuf .met-ph{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--mist)}
.neuf .met-p{position:absolute;inset:0;opacity:0;transition:opacity .4s linear}
.neuf .met-p.on{opacity:1}
.neuf .met-p img{width:100%;height:100%;object-fit:cover;display:block}
.neuf /* la legende : un cartouche cale en bas a gauche DANS la photo, .neuf sur un bleu a
   20 % pose sur un flou de l'image. Un voile ivoire a 55 % passe dessous pour
   que le texte tienne meme quand la photo est claire. */
.met-ph{position:relative;isolation:isolate}
.neuf .met-t{position:absolute;left:0;bottom:0;z-index:2;display:none;
  width:min(66%,352px);padding:15px 18px 16px;
  background:rgba(46,123,168,.20);
  -webkit-backdrop-filter:blur(14px) saturate(.9);backdrop-filter:blur(14px) saturate(.9);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.neuf .met-t::before{content:"";position:absolute;inset:0;background:rgba(250,250,249,.55);z-index:-1}
.neuf .met-t.on{display:block}
.neuf .met-t .n{display:block;font-style:normal;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.14em;color:#6B4517}
.neuf .met-t h3{display:block;margin:7px 0 0;font-size:clamp(15px,1.5vw,19px);font-weight:500;
  letter-spacing:-.03em;line-height:1.16;color:var(--navy)}
.neuf .met-t .ps{display:block;margin-top:10px;padding-top:10px;border-top:1px solid rgba(15,43,70,.22);
  font-family:var(--mono);font-size:9px;letter-spacing:.07em;text-transform:uppercase;
  color:rgba(15,43,70,.68);line-height:1.75}
.neuf .met-t .go{display:inline-block;text-decoration:none;margin-top:11px;font-family:var(--mono);font-size:9.5px;
  font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--sky)}
@media(max-width:620px){
.neuf .met-t{position:static;width:100%;display:none}
.neuf .met-t.on{display:block}
.neuf .met-t::before{display:none}
.neuf .met-t{background:var(--sky-bg);-webkit-backdrop-filter:none;backdrop-filter:none;
    box-shadow:none} }
@media(max-width:900px){
.neuf .met-g{grid-template-columns:1fr;gap:20px}
.neuf .met-l{padding:13px 10px}
}
.neuf /* ---------------------------------------------------- methode */
.mth{background:var(--sky-bg2);padding:clamp(46px,5.4vw,80px) 0}
.neuf .mth-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,3vw,48px);
  position:relative;margin-top:clamp(30px,4vw,56px)}
@media(max-width:820px){
.neuf .mth-g{grid-template-columns:minmax(0,1fr);gap:34px}}
.neuf .mth-line{position:absolute;left:0;right:0;top:12px;height:1px;background:rgba(15,43,70,.22)}
.neuf .mth-line i{position:absolute;left:0;top:-1px;height:3px;width:0;background:var(--ocre);
  transition:width 1.2s var(--t)}
@media(max-width:820px){
.neuf .mth-line{display:none}}
.neuf .mth-c{padding-top:40px;position:relative}
.neuf .mth-c::before{content:"";position:absolute;left:0;top:7px;width:11px;height:11px;
  background:#fff;border:1px solid var(--navy);transform:rotate(45deg)}
.neuf .mth-c.on::before{background:var(--ocre);border-color:var(--ocre)}
.neuf .mth-c .vg{margin-bottom:18px;aspect-ratio:4/3;overflow:hidden;background:var(--mist)}
.neuf .mth-c .vg img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.1s var(--t)}
.neuf .mth-c:hover .vg img{transform:scale(1.035)}
.neuf .mth-c .fg{position:absolute;right:4px;top:-18px;z-index:0;line-height:.8;pointer-events:none;
  font-size:clamp(84px,10vw,160px);font-weight:300;letter-spacing:-.06em;color:rgba(15,43,70,.07);
  font-variant-numeric:tabular-nums}
.neuf .mth-c>*:not(.fg){position:relative;z-index:1}
.neuf .mth-c .i{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--ocre-d);
  display:block;margin-bottom:12px}
.neuf .mth-c h3{font-size:clamp(17px,1.6vw,22px);font-weight:550;letter-spacing:-.025em;
  color:var(--navy);line-height:1.22}
.neuf .mth-c p{margin-top:11px;font-size:13.5px;line-height:1.68;color:var(--soft)}
.neuf /* ---------------------------------------------------- deux entrees */
.ent{position:relative;padding:clamp(46px,5.4vw,78px) 0 clamp(56px,6.4vw,92px)}
.neuf .ent-bg{position:absolute;left:0;right:0;top:0;height:clamp(330px,38vw,540px);
  background:var(--navy);background-image:radial-gradient(circle at 82% 0%,
  rgba(46,123,168,.34) 0%,rgba(15,43,70,0) 62%);z-index:0}
.neuf .ent>.wrap{position:relative;z-index:1}
.neuf .ent .sh{border-color:rgba(255,255,255,.26)}
.neuf .ent .sh .lab{color:var(--w3)}
.neuf .ent .sh .num{color:var(--ocre)}
.neuf .ent .sh h2{color:var(--w)}
.neuf .ent .sh{padding-left:clamp(16px,2vw,28px);padding-top:clamp(22px,2.6vw,36px);
  padding-bottom:clamp(22px,2.6vw,34px);margin-bottom:clamp(34px,4.2vw,66px)}
@media(max-width:760px){
.neuf .ent-bg{height:clamp(300px,66vw,400px)}
.neuf .ent-g{grid-template-columns:1fr;gap:34px}
}
.neuf .ent-g{display:grid;grid-template-columns:7fr 5fr;gap:clamp(22px,3.4vw,56px);align-items:start}
@media(max-width:820px){
.neuf .ent-g{grid-template-columns:minmax(0,1fr);gap:40px}}
.neuf .ent-c{position:relative;z-index:1;text-decoration:none;color:inherit;display:block}
.neuf .ent-c{border-top:1px solid rgba(255,255,255,.26);padding-top:clamp(16px,1.8vw,24px)}
.neuf .ent-c .ph{position:relative;overflow:hidden;aspect-ratio:3/2;background:var(--mist);margin-top:clamp(14px,1.6vw,22px)}
.neuf .ent-c .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--t)}
.neuf .ent-c:hover .ph img{transform:scale(1.05)}
.neuf .ent-c .tag{position:absolute;left:0;top:0;background:var(--navy);color:var(--w);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  padding:11px 16px}
.neuf .ent-c .ec{display:block;font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--sky-l)}
.neuf .ent-c h3{margin-top:22px;font-size:clamp(19px,2vw,28px);font-weight:420;letter-spacing:-.03em;
  line-height:1.16;color:var(--navy)}
.neuf .ent-c p{margin-top:12px;font-size:13.5px;line-height:1.7;color:var(--soft);max-width:44ch}
.neuf .ent-c .go{display:inline-block;margin-top:16px;font-family:var(--mono);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ocre-d);
  border-bottom:1px solid rgba(156,106,46,.4);padding-bottom:3px}
.neuf /* ---------------------------------------------------- preuves */
.prv{background:var(--navy);color:var(--w);padding:clamp(60px,8vw,120px) 0}
.neuf .prv .sh{border-color:rgba(255,255,255,.26)}
.neuf .prv .sh .lab{color:var(--w3)}
.neuf .prv .sh .num{color:var(--ocre)}
.neuf .prv-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,38%);gap:clamp(26px,4vw,64px);
  align-items:start}
@media(max-width:900px){
.neuf .prv-g{grid-template-columns:minmax(0,1fr)}}
.neuf .prv-i{border-bottom:1px solid rgba(255,255,255,.16)}
.neuf .prv-i:first-child{border-top:1px solid rgba(255,255,255,.16)}
.neuf .prv-b{display:grid;grid-template-columns:40px minmax(0,1fr) 22px;gap:16px;align-items:center;
  width:100%;text-align:left;padding:clamp(15px,1.7vw,21px) 0}
.neuf .prv-b .i{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--w3)}
.neuf .prv-b .n{font-size:clamp(16px,1.5vw,21px);font-weight:300;letter-spacing:-.025em}
.neuf .prv-b .pm{justify-self:end;position:relative;width:13px;height:13px}
.neuf .prv-b .pm::before, .neuf .prv-b .pm::after{content:"";position:absolute;background:var(--ocre);
  transition:transform .4s var(--t)}
.neuf .prv-b .pm::before{left:0;top:6px;width:13px;height:1px}
.neuf .prv-b .pm::after{left:6px;top:0;width:1px;height:13px}
.neuf .prv-i.on .prv-b .pm::after{transform:rotate(90deg)}
.neuf .prv-d{overflow:hidden;max-height:0;transition:max-height .5s var(--t)}
.neuf .prv-i.on .prv-d{max-height:260px}
.neuf .prv-d p{padding:0 0 20px 56px;font-size:13.5px;line-height:1.7;color:var(--w2);max-width:58ch}
.neuf .prv-s{border:1px solid rgba(255,255,255,.2);padding:clamp(22px,2.6vw,34px)}
.neuf .prv-s .mono{color:var(--w3);display:block;margin-bottom:18px}
.neuf .prv-s li{display:flex;gap:14px;padding:13px 0;border-top:1px solid rgba(255,255,255,.14);
  font-size:13.5px;line-height:1.5}
.neuf .prv-s li i{color:var(--ocre);font-style:normal}
.neuf .prv-s a{display:inline-block;margin-top:18px;font-family:var(--mono);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--w);text-decoration:none;
  border-bottom:1px solid rgba(244,246,248,.4);padding-bottom:3px}
.neuf /* ---------------------------------------------------- avis */

/* ---------------------------------------------------- zones */
/* les zones en vert profond sourd. C'est la seule couleur relevee dans le
   metier : soprema.fr tient 13 % de sa page d'accueil en #41693D. Pas de bleu, .neuf la page en a deja quatre niveaux. */
.zon{background:#3A4A3E;color:var(--w);padding:clamp(40px,4.6vw,64px) 0}
.neuf .zon-h{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:end;
  padding-bottom:clamp(18px,2vw,26px);border-bottom:1px solid rgba(255,255,255,.22)}
.neuf .zon-h .num{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--ocre);margin-right:18px}
.neuf .zon-h .lab{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--w3)}
.neuf .zon-s{margin:10px 0 0;font-size:13px;line-height:1.6;color:var(--w2);max-width:64ch}
.neuf .zon-h h2{margin:12px 0 0;font-size:clamp(20px,2.2vw,30px);font-weight:400;
  letter-spacing:-.032em;line-height:1.14;color:var(--w)}
.neuf /* colonnes d'index, .neuf d'apres monocle.com : le numero, .neuf le nom, .neuf un filet, .neuf le lien.
   Rien d'autre - les communes vivent sur les pages de zone. */
.zon-g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
  background:rgba(255,255,255,.18);margin-top:clamp(18px,2.2vw,28px)}
.neuf .zon-g a{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:baseline;
  gap:0 12px;background:#3A4A3E;text-decoration:none;padding:15px 16px;
  transition:background var(--t)}
.neuf .zon-g a i{font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  color:var(--ocre);transition:color var(--t)}
.neuf .zon-g a b{font-size:15px;font-weight:500;letter-spacing:-.026em;color:var(--w);
  transition:color var(--t)}
.neuf .zon-g a .go{font-family:var(--mono);font-size:13px;line-height:1;color:var(--w3);
  transition:color var(--t)}
.neuf .zon-g a:hover{background:#4C6050}
.neuf .zon-g a:hover .go{color:var(--ocre)}
.neuf .zon-all{font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--w2);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:5px;
  white-space:nowrap;transition:color var(--t),border-color var(--t)}
.neuf .zon-all:hover{color:var(--w);border-color:var(--w)}
@media(max-width:700px){
.neuf .zon-h{grid-template-columns:1fr;align-items:start}
.neuf .zon-g{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.neuf .faq{background:var(--sky-bg);padding:clamp(44px,5vw,72px) 0}
.neuf .faq details{border-bottom:1px solid rgba(15,43,70,.14)}
.neuf .faq details:first-of-type{border-top:1px solid rgba(15,43,70,.14)}
.neuf .faq summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:40px minmax(0,1fr) 22px;
  gap:16px;align-items:center;padding:clamp(15px,1.7vw,21px) 0}
.neuf .faq summary::-webkit-details-marker{display:none}
.neuf .faq summary .i{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--faint)}
.neuf .faq summary .q{font-size:clamp(15px,1.35vw,19px);font-weight:400;letter-spacing:-.02em;color:var(--navy)}
.neuf .faq summary .pm{justify-self:end;position:relative;width:13px;height:13px}
.neuf .faq summary .pm::before, .neuf .faq summary .pm::after{content:"";position:absolute;background:var(--ocre-d);
  transition:transform .4s var(--t)}
.neuf .faq summary .pm::before{left:0;top:6px;width:13px;height:1px}
.neuf .faq summary .pm::after{left:6px;top:0;width:1px;height:13px}
.neuf .faq details[open] summary .pm::after{transform:rotate(90deg)}
.neuf .faq .a{padding:0 0 22px 56px;font-size:13.5px;line-height:1.74;color:var(--soft);max-width:72ch}
.neuf /* la bande des references clientes, .neuf reprise de la page en ligne */
.ref{background:var(--ivoire);border-top:1px solid var(--fil);padding:clamp(22px,2.8vw,38px) 0}
.neuf .ref-g{display:flex;align-items:center;flex-wrap:wrap;gap:clamp(18px,3vw,52px)}
.neuf .ref .n{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint);flex:0 0 auto}
.neuf .ref ul{display:flex;align-items:center;flex-wrap:wrap;gap:clamp(20px,3.4vw,54px);
  margin:0;padding:0;list-style:none;flex:1 1 auto}
.neuf .ref img{display:block;height:clamp(20px,2.2vw,30px);width:auto;
  filter:grayscale(1);opacity:.62;transition:filter var(--t),opacity var(--t)}
.neuf .ref li:hover img{filter:grayscale(0);opacity:1}
@media(max-width:700px){
.neuf .ref ul{gap:22px}
.neuf .ref img{height:20px} }
.neuf /* ---------------------------------------------------- contact */
.ctc{position:relative;z-index:1;background:var(--navy-d);background-image:radial-gradient(circle at 8% 100%,rgba(46,123,168,.3) 0%,rgba(15,43,70,0) 58%);color:var(--w);padding:clamp(48px,5.6vw,84px) 0}
.neuf .ctc .sh{border-color:rgba(255,255,255,.26)}
.neuf .ctc .sh .lab{color:var(--w3)}
.neuf .ctc .sh .num{color:var(--ocre)}
.neuf .ctc-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,46%);gap:clamp(30px,4.6vw,76px);
  align-items:start}
@media(max-width:940px){
.neuf .ctc-g{grid-template-columns:minmax(0,1fr)}}
.neuf .ctc h2{max-width:17ch}
.neuf .ctc .lead{color:var(--w2);margin-top:20px}
.neuf .ctc-pts{margin-top:30px;border-top:1px solid rgba(255,255,255,.18)}
.neuf .ctc-pts li{display:flex;gap:14px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.12);
  font-size:13.5px;color:var(--w2)}
.neuf .ctc-pts li i{color:var(--ocre);font-style:normal}
.neuf .ctc-tel{display:block;margin-top:30px;font-size:clamp(32px,4.4vw,58px);font-weight:200;
  letter-spacing:-.05em;color:var(--w);text-decoration:none;font-variant-numeric:tabular-nums}
.neuf .ctc-h{margin-top:12px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--w3)}
.neuf .ctc-v{margin-top:clamp(18px,2.2vw,28px);padding-top:clamp(16px,2vw,24px);
  border-top:1px solid rgba(255,255,255,.18);font-size:13.5px;line-height:1.62;
  color:var(--w2);max-width:46ch}
.neuf /* le depot de pieces jointes : le bloc que portait le formulaire en ligne, .neuf replie par defaut pour ne pas alourdir la demande courante. */
.f-pj{margin-top:18px;border-top:0;padding-top:0}
/* le depliant des pieces jointes est un bouton encadre, pas une ligne sous un filet */
.neuf .f-pj summary{border:1px solid rgba(15,43,70,.28);background:#fff;padding:14px 15px;
  transition:border-color var(--t)}
.neuf .f-pj summary:hover{border-color:var(--navy)}
.neuf .f-pj summary{list-style:none;cursor:pointer;display:grid;
  grid-template-columns:minmax(0,1fr) 14px;gap:0 14px;align-items:start}
.neuf .f-pj summary::-webkit-details-marker{display:none}
/* Le signe + porte grid-row:1 sans colonne. La grille place d'abord les
   elements dont la ligne est fixee : il prenait donc la colonne large, et le
   titre se retrouvait dans les 14 px reserves au signe, a se casser sur dix
   lignes. On donne sa colonne a chacun. */
.neuf .f-pj summary .t{grid-row:1;grid-column:1;
  font-size:13.5px;font-weight:600;letter-spacing:-.018em;color:var(--navy)}
.neuf .f-pj summary .s{grid-column:1;margin-top:5px;font-size:12px;line-height:1.56;color:var(--soft)}
.neuf .f-pj .pm{grid-row:1;grid-column:2;position:relative;width:13px;height:13px;margin-top:4px}
.neuf .f-pj .pm::before, .neuf .f-pj .pm::after{content:"";position:absolute;background:var(--ocre-d);
  transition:transform var(--t)}
.neuf .f-pj .pm::before{left:0;top:6px;width:13px;height:1px}
.neuf .f-pj .pm::after{left:6px;top:0;width:1px;height:13px}
.neuf .f-pj[open] .pm::after{transform:scaleY(0)}
.neuf .f-pji{padding-top:16px}
.neuf .f-dz{border:1px dashed var(--fil2);background:#fff;padding:14px 15px;margin-bottom:10px}
.neuf .f-dz em{display:block;margin-top:5px;font-style:normal;font-size:11.5px;line-height:1.55;color:var(--faint)}
.neuf .f-pji input[type=file]{width:100%;font-size:12px;color:var(--soft)}
.neuf .f{border:1px solid rgba(255,255,255,.2);padding:clamp(22px,2.8vw,38px)}
.neuf .f .mono{color:var(--w3);display:block;margin-bottom:22px}
.neuf .fl{display:block;margin-bottom:18px}
.neuf .fl span{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--w3);margin-bottom:8px}
.neuf .fl input, .neuf .fl textarea{width:100%;background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.3);
  color:var(--w);font:inherit;font-size:14px;padding:9px 0;transition:border-color .3s}
.neuf .fl input:focus, .neuf .fl textarea:focus{outline:none;border-bottom-color:var(--ocre)}
.neuf .fl textarea{resize:vertical;min-height:76px}
.neuf .fc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:4px 0 22px}
.neuf .fc label{position:relative}
.neuf .fc input{position:absolute;opacity:0;pointer-events:none}
.neuf .fc i{display:block;font-style:normal;text-align:center;padding:12px 6px;cursor:pointer;
  border:1px solid rgba(255,255,255,.26);font-family:var(--mono);font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--w2);transition:all .3s}
.neuf .fc input:checked + i{background:var(--w);color:var(--navy-d);border-color:var(--w)}
.neuf .f .sub{width:100%;background:var(--ocre);color:#1A1205;padding:16px;font-family:var(--mono);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;transition:background .3s}
.neuf .f .sub:hover{background:var(--w)}
.neuf .f .cgu{margin-top:16px;font-size:11.5px;line-height:1.6;color:var(--w3)}
.neuf /* ---------------------------------------------------- verifications */
.vrf{position:relative;z-index:2;padding:0;background:transparent}
.neuf .vrf-bd{position:relative;margin:0;height:clamp(210px,28vw,380px);overflow:hidden;background:var(--navy-d)}
.neuf .vrf-bd img{width:100%;height:100%;object-fit:cover;display:block}
.neuf .vrf-bd figcaption{position:absolute;left:var(--px);bottom:clamp(16px,1.8vw,24px);
  background:rgba(14,17,23,.42);color:var(--w2);font-family:var(--mono);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;padding:7px 14px;white-space:nowrap}
.neuf .vrf-fil{position:absolute;left:0;right:0;height:1px;z-index:0;pointer-events:none;
  top:calc(clamp(210px,28vw,380px) + clamp(-124px,-7.6vw,-72px));
  background:linear-gradient(to right,rgba(0,0,0,0) calc(50% - 460px),
    rgba(244,246,248,.72) calc(50% - 460px),rgba(244,246,248,.72) calc(50% - 370px),
    rgba(0,0,0,0) calc(50% - 370px),rgba(0,0,0,0) calc(100% - 72px),
    rgba(244,246,248,.72) calc(100% - 72px),rgba(244,246,248,.72) 100%)}
.neuf .vrf-c{position:relative;z-index:1;margin-top:clamp(-124px,-7.6vw,-72px);
  margin-bottom:clamp(-224px,-14vw,-132px);margin-left:auto;
  width:min(100%,700px);background:var(--ivoire);border-top:3px solid var(--ocre);
  padding:clamp(24px,2.8vw,40px) clamp(20px,2.6vw,38px) clamp(18px,2.2vw,30px)}
.neuf .vrf-t .num{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--ocre-d);margin-right:18px}
.neuf .vrf-t .lab{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.neuf .vrf-s{margin:11px 0 0;font-size:13px;line-height:1.6;color:var(--soft);max-width:54ch}
.neuf .vrf-t h2{margin:12px 0 0;font-size:clamp(23px,2.6vw,36px);font-weight:300;
  letter-spacing:-.04em;line-height:1.06;color:var(--navy)}
.neuf .vrf-d2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--fil);
  margin-top:clamp(20px,2.4vw,30px)}
.neuf .vrf-k{background:var(--sky-bg);padding:16px 17px 18px}
.neuf .vrf-k h3{display:block;margin:0;font-size:15px;font-weight:600;letter-spacing:-.022em;color:var(--navy)}
.neuf .vrf-k h3::before{content:"";display:inline-block;width:9px;height:9px;background:var(--ocre);
  margin-right:10px;vertical-align:1px}
.neuf .vrf-k p{margin:9px 0 0;font-size:12.5px;line-height:1.6;color:var(--soft)}
.neuf .vrf-p{margin-top:16px;border-top:1px solid var(--fil)}
.neuf .vrf-p summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;
  padding:14px 0 0;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint);transition:color var(--t)}
.neuf .vrf-p summary::-webkit-details-marker{display:none}
.neuf .vrf-p summary:hover{color:var(--navy)}
.neuf .vrf-p .pm{position:relative;width:11px;height:11px;margin-left:auto}
.neuf .vrf-p .pm::before, .neuf .vrf-p .pm::after{content:"";position:absolute;background:var(--ocre-d);
  transition:transform var(--t)}
.neuf .vrf-p .pm::before{left:0;top:5px;width:11px;height:1px}
.neuf .vrf-p .pm::after{left:5px;top:0;width:1px;height:11px}
.neuf .vrf-p[open] .pm::after{transform:scaleY(0)}
.neuf .vrf-pi{padding-top:6px}
.neuf .vrf-r{padding:13px 0;border-top:1px solid var(--fil)}
.neuf .vrf-r:first-child{border-top:0}
.neuf .vrf-r .n{display:block;margin:0;font-weight:500;font-size:13.5px;letter-spacing:-.018em;color:var(--navy)}
.neuf .vrf-r p{margin:6px 0 0;font-size:12.5px;line-height:1.62;color:var(--soft)}

/* Le blanc sous le bandeau, tenu constant.
   Il valait 38 px sur un grand ecran et 136 px sur un ecran moyen : trois
   valeurs en vw se composaient — la hauteur du bandeau, la remontee du carton
   et son debord sur la section suivante — et le blanc etait ce qui restait.
   Le carton fait 700 px de large a toutes ces largeurs, donc son texte se
   coupe pareil : seule sa respiration interne, en vw, faisait varier sa
   hauteur. On la fige au-dessus de 860 px, et les deux marges deviennent des
   valeurs fixes. Le blanc ne depend plus de rien : 40 px, toujours.
   Sous 860 px, le carton reprend la main et s'adapte, comme avant. */
@media(min-width:861px){
  .neuf .vrf-c{margin-top:-96px;margin-bottom:-250px;
    padding:40px 38px 30px}
  .neuf .vrf-t h2{font-size:36px}
  .neuf .vrf-d2{margin-top:30px}
  .neuf .vrf-fil{top:calc(clamp(210px,28vw,380px) - 96px)}
}
@media(max-width:860px){
.neuf .vrf-c{margin-top:-36px;margin-bottom:-118px;width:100%;padding-left:20px;padding-right:20px}
.neuf .avi{padding-top:156px}
.neuf .vrf-fil{display:none}
.neuf .vrf-d2{grid-template-columns:1fr}
.neuf .vrf-bd figcaption{font-size:9px;letter-spacing:.1em;padding:6px 10px;bottom:12px}
}
.neuf /* ---------------------------------------------------- avis, .neuf fond navy et G */
.avi{background:#143253;background-image:radial-gradient(circle at 100% 0%,rgba(46,123,168,.42) 0%,rgba(22,58,92,.22) 42%,rgba(15,43,70,0) 72%);color:var(--w);position:relative;overflow:hidden;
  padding:clamp(38px,4.2vw,62px) 0 clamp(40px,4.6vw,64px)}
.neuf .avi .wrap{position:relative;z-index:1}
.neuf .avi-G{position:absolute;right:-6vw;top:50%;transform:translateY(-50%);
  width:min(86vh,840px);aspect-ratio:1;pointer-events:none;
  background:linear-gradient(142deg,rgba(120,175,230,.16) 0%,rgba(90,140,195,.095) 45%,rgba(60,100,150,.04) 100%);
  -webkit-mask:url(../images/accueil/g-google-masque.png) center/contain no-repeat;
  mask:url(../images/accueil/g-google-masque.png) center/contain no-repeat}
.neuf .avi-h{display:grid;grid-template-columns:minmax(0,1fr) min(53%,712px);
  gap:clamp(20px,3vw,48px);align-items:end;
  padding-bottom:clamp(22px,2.6vw,34px);border-bottom:1px solid rgba(255,255,255,.16)}
.neuf .avi-vide{min-height:clamp(120px,11.6vw,180px)}
.neuf .avi-t .num{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--ocre);margin-right:18px}
.neuf .avi-t .lab{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--w3)}
.neuf .avi-t h2{margin:14px 0 0;font-size:clamp(26px,3.3vw,48px);font-weight:250;
  letter-spacing:-.045em;line-height:1.02;color:var(--w)}
.neuf .avi-n{display:flex;align-items:flex-end;gap:clamp(16px,2.2vw,32px);flex-wrap:wrap;
  margin-top:clamp(22px,2.8vw,38px)}
.neuf .avi-n b{font-size:clamp(40px,4.8vw,70px);font-weight:300;line-height:.84;
  letter-spacing:-.05em;color:var(--w);font-variant-numeric:tabular-nums}
.neuf .avi-n .et-g{display:block;padding-bottom:3px}
.neuf .avi-n .et{display:block}
.neuf .avi-n .k{display:block;margin-top:8px;font-family:var(--mono);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--w3)}
.neuf .avi-n a{margin-left:auto;align-self:flex-end;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ocre);text-decoration:none;
  border-bottom:1px solid rgba(194,136,64,.5);padding-bottom:4px}
.neuf .avi-n a:hover{color:var(--w);border-color:var(--w)}
.neuf .avi-p{--g:clamp(22px,3vw,44px);position:relative;display:flex;gap:var(--g);
  overflow-x:auto;scroll-snap-type:x proximity;scroll-behavior:smooth;scrollbar-width:none;
  padding:clamp(28px,3.4vw,46px) 0 6px}
.neuf .avi-p::-webkit-scrollbar{display:none}
.neuf .avi-q{flex:0 0 calc((100% - 2*var(--g))/3);scroll-snap-align:start}
.neuf .avi-q{position:relative}
.neuf /* le signe Google ferme la ligne d'attribution : le rond blanc decoupe de
   l'image fournie, .neuf a ses vraies couleurs, .neuf detoure au cercle. */
.avi-g{position:absolute;right:0;bottom:1px;width:24px;height:24px;
  background:url(../brand/google-g.png) center/contain no-repeat}
.neuf .avi-q p{margin:0;font-size:15.5px;line-height:1.66;color:var(--w2);font-weight:400;letter-spacing:0}
.neuf .avi-q .nm{display:block;margin-top:16px;font-size:15.5px;font-weight:600;color:var(--w);letter-spacing:-.01em}
.neuf .avi-q .ct{display:block;margin-top:5px;font-family:var(--mono);font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--w3)}
.neuf .avi-ctl{display:flex;align-items:center;gap:10px;padding-top:clamp(20px,2.6vw,32px);
  border-top:1px solid rgba(255,255,255,.14)}
.neuf .avi-ctl .sp{flex-grow:1}
.neuf .avi-src{margin:0;font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--w3)}
.neuf .avi-ctl button{width:36px;height:36px;display:grid;place-items:center;cursor:pointer;
  background:none;border:1px solid rgba(255,255,255,.22);color:var(--w2);
  transition:background var(--t),color var(--t),border-color var(--t)}
.neuf .avi-ctl button:hover{background:var(--w);color:var(--navy);border-color:var(--w)}
@media(max-width:860px){
.neuf .avi-h{grid-template-columns:1fr;align-items:start;gap:0}
.neuf .avi-vide{display:none}
.neuf .avi-n{gap:14px}
.neuf .avi-n a{margin-left:0;width:100%}
.neuf .avi-q{flex-basis:84%}
.neuf .avi-p{scroll-snap-type:x mandatory}
}
.neuf .zon-l{margin-bottom:1px}
.neuf .zon-dep{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--fil2);
  margin-top:1px}
@media(max-width:900px){
.neuf .zon-dep{grid-template-columns:repeat(2,minmax(0,1fr))}}
.neuf .zon-dep a{background:var(--navy);color:var(--w);padding:18px 16px;text-decoration:none;
  transition:background .3s}
.neuf .zon-dep a:hover{background:var(--ocre-d)}
.neuf .zon-dep a span{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  color:rgba(244,246,248,.6);margin-bottom:6px}
.neuf .zon-dep a b{font-size:14px;font-weight:400;letter-spacing:-.01em}
.neuf /* ---------------------------------------------------- formulaire, .neuf sur fond clair */
.f{background:var(--sky-bg);border:0;color:var(--ink);padding:clamp(24px,3vw,40px)}
.neuf .f .mono{color:var(--faint)}
.neuf .f .ttl{font-size:clamp(18px,1.7vw,23px);font-weight:400;letter-spacing:-.025em;color:var(--navy);
  margin:0 0 6px}
.neuf .f .sst{font-size:13px;line-height:1.6;color:var(--soft);margin:0 0 24px}
.neuf .fl span{color:var(--faint)}
.neuf .fl input, .neuf .fl textarea{background:#fff;border:1px solid var(--fil2);border-bottom:1px solid var(--fil2);
  color:var(--ink);padding:12px 13px}
.neuf .fl input:focus, .neuf .fl textarea:focus{border-color:var(--navy);outline:2px solid rgba(15,43,70,.12)}
.neuf .fc i{border-color:var(--fil2);color:var(--soft);background:#fff}
.neuf .fc input:checked + i{background:var(--navy);color:var(--w);border-color:var(--navy)}
.neuf .f .sub{background:var(--navy);color:var(--w);font-size:12px}
.neuf .f .sub:hover{background:var(--ocre-d)}
.neuf .f .cgu{color:var(--faint)}
.neuf /* ---------------------------------------------------- etablissement et carte */
/* le formulaire et la carte partagent la colonne de droite. Le debord est porte
   par la colonne, .neuf pas par le formulaire. */
.ctc-r{position:relative;z-index:3;margin-bottom:clamp(-286px,-19vw,-168px)}
.neuf .ctc .f{border-left:3px solid var(--sky)}
@media(max-width:860px){
.neuf .ctc-r{margin-bottom:-60px}}
.neuf .eta{position:relative;background:#fff;padding:clamp(24px,2.4vw,38px) 0 clamp(50px,6vw,88px)}
.neuf .eta .wrap{position:relative}
.neuf .eta .sh.nofil{border-bottom:0}
.neuf .eta .sh.nofil{border-bottom:0;
  background-image:linear-gradient(to right,var(--fil2) 0,var(--fil2) calc(54% - 16px),
    rgba(0,0,0,0) calc(54% - 16px));
  background-size:100% 1px;background-position:0 100%;background-repeat:no-repeat}
@media(max-width:860px){
.neuf .eta .sh.nofil{background-image:none;border-bottom:1px solid var(--fil2)}}
.neuf /* une seule colonne, .neuf bornee a gauche de l'aplomb du formulaire : le texte ne
   peut structurellement pas passer dessous. */
.eta-g{margin-top:clamp(26px,3.4vw,46px)}
.neuf .eta-l{max-width:min(100%,49%)}
.neuf .eta-nom{font-size:clamp(28px,3.6vw,54px);font-weight:700;letter-spacing:-.045em;
  line-height:.98;color:var(--navy);margin:0}
.neuf .eta-adr{display:block;margin:clamp(12px,1.5vw,18px) 0 0;font-size:clamp(14px,1.3vw,17px);font-weight:200;
  letter-spacing:-.018em;line-height:1.38;color:var(--navy)}
.neuf .eta-l a{color:var(--navy);text-decoration:none;border-bottom:1px solid var(--fil2)}
.neuf /* quatre blocs de meme nature, .neuf poses en vraie grille : les intitules s'alignent
   d'une colonne a l'autre, .neuf ce que deux colonnes de texte empilees ne faisaient
   pas. */
.eta-d{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(18px,2.2vw,28px) clamp(22px,3vw,44px);
  margin:clamp(22px,2.8vw,36px) 0 0;padding-top:clamp(20px,2.4vw,30px);
  border-top:1px solid var(--fil)}
.neuf .eta-d dt{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint)}
.neuf .eta-d dt::before{content:"";display:inline-block;width:8px;height:8px;background:var(--ocre);
  margin-right:9px;vertical-align:.5px}
.neuf .eta-d dd{margin:9px 0 0;font-size:13.5px;line-height:1.6;color:var(--soft)}
.neuf /* la carte sort du flux et se cale sous le formulaire : elle ne pese rien dans
   la mise en page, .neuf donc elle ne peut plus pousser la section 8 vers le bas. */
.eta-m{position:absolute;left:0;right:0;top:calc(100% + clamp(14px,1.6vw,22px));
  aspect-ratio:16/9;background:var(--mist);border:1px solid var(--fil2);overflow:hidden}
.neuf .eta-m iframe{width:100%;height:100%;border:0;display:block}
@media(max-width:860px){
.neuf .eta-m{position:static;margin-top:18px;aspect-ratio:4/3}
}
.neuf .eta-act{display:inline-block;margin-top:20px;font-family:var(--mono);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--navy);text-decoration:none;
  border-bottom:1px solid var(--fil2);padding-bottom:5px;transition:border-color var(--t)}
.neuf .eta-act:hover{border-color:var(--navy)}
@media(max-width:860px){
.neuf .eta{padding-top:44px}
.neuf .eta-l{max-width:100%}
.neuf .eta-d{grid-template-columns:1fr}
.neuf .eta-mk{left:0;max-width:100%}
}
.neuf /* la bande d'appel final, .neuf reprise de la page en ligne */
.cta{background:var(--navy-d);color:var(--w);padding:clamp(48px,5.6vw,82px) 0}
.neuf .cta-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--w3)}
.neuf .cta-l{margin:14px 0 0;font-size:clamp(15px,1.5vw,19px);font-weight:300;line-height:1.5;
  letter-spacing:-.02em;color:var(--w2);max-width:40ch}
.neuf .cta-tel{display:block;margin:clamp(18px,2.2vw,30px) 0 0;font-size:clamp(44px,8.4vw,132px);
  font-weight:150;letter-spacing:-.062em;line-height:.92;color:var(--w);text-decoration:none;
  font-variant-numeric:tabular-nums;transition:color var(--t)}
.neuf .cta-tel:hover{color:var(--sky-l)}
.neuf .cta-f{margin-top:clamp(16px,2vw,24px);padding-top:clamp(14px,1.6vw,20px);
  border-top:1px solid rgba(255,255,255,.18);display:flex;gap:26px;flex-wrap:wrap;align-items:baseline}
.neuf .cta-f span, .neuf .cta-f a{font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--w3)}
.neuf .cta-f a{color:var(--w2);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3);
  padding-bottom:2px;transition:color var(--t),border-color var(--t)}
.neuf .cta-f a:hover{color:var(--w);border-color:var(--sky-l)}
@media(max-width:820px){
.neuf .cta-g{grid-template-columns:1fr}
.neuf .cta-d{text-align:left} }
.neuf .pie-arr{margin-top:clamp(26px,3vw,40px);padding-top:clamp(20px,2.4vw,30px);
  border-top:1px solid rgba(255,255,255,.14)}
.neuf .pie-arr .k{display:block;margin-bottom:12px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--w3)}
.neuf .pie-arr p{margin:0;font-size:12.5px;line-height:1.95}
.neuf .pie-arr a{color:var(--w3);text-decoration:none;margin-right:17px;
  border-bottom:1px solid transparent;transition:color var(--t),border-color var(--t)}
.neuf .pie-arr a:hover{color:var(--w);border-color:rgba(255,255,255,.3)}
.neuf .pie{background:var(--navy-d);color:var(--w2);padding:clamp(44px,5vw,70px) 0 clamp(50px,6vw,80px)}
.neuf .pie-g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,44px);
  border-top:1px solid rgba(255,255,255,.2);padding-top:clamp(24px,3vw,38px)}
@media(max-width:820px){
.neuf .pie-g{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}}
.neuf .pie-g .k{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ocre);margin-bottom:11px}
.neuf .pie-g p, .neuf .pie-g a{font-size:13.5px;line-height:1.62;color:var(--w2);text-decoration:none;
  overflow-wrap:anywhere}
.neuf .pie-g a:hover{color:var(--ocre)}
.neuf .pie-g strong{display:block;font-size:17px;font-weight:400;letter-spacing:-.02em;color:var(--w)}

/* base de la maquette, epinglee sur ce qu elle rend seule :
   le body du site impose 17px/1.6, la maquette vit sur les valeurs par defaut du navigateur */
.neuf{font-size:16px;line-height:normal}