/* ============================================================================
   PROAXION — page d'accueil
   Direction sombre, conforme aux Directives de la marque 2023.

   Couleurs officielles du brandbook :
     bleu   #145091   (RGB 20-80-145)
     noir   #000000
     gris   #E5E6E7   (RGB 229-230-231)
   Le brandbook autorise 1 à 2 couleurs additionnelles au besoin : nous ajoutons
   --blue-lit (#4A93EC), strictement la même teinte éclaircie, réservée au texte
   d'accent sur fond noir — #145091 sur noir n'atteint pas le contraste minimal
   de lisibilité. Les aplats, boutons et bandes restent au #145091 officiel.

   Typographie officielle : Agrandir Narrow Black (titres) + Medium (textes).
   Agrandir est sous licence commerciale et n'est pas redistribuable ici. Le
   fallback est Archivo variable, dont les axes de largeur et de graisse
   reproduisent la même paire Narrow Black / Narrow Medium.
   → Pour activer la vraie police une fois la licence acquise : déposer les
     fichiers dans assets/fonts/ et décommenter le bloc @font-face ci-dessous.
     Aucune autre modification n'est nécessaire.
   ============================================================================ */

/*
@font-face{
  font-family:"Agrandir Narrow"; font-style:normal; font-weight:500; font-display:swap;
  src:url("../fonts/Agrandir-NarrowMedium.woff2") format("woff2");
}
@font-face{
  font-family:"Agrandir Narrow"; font-style:normal; font-weight:900; font-display:swap;
  src:url("../fonts/Agrandir-NarrowBlack.woff2") format("woff2");
}
*/

:root{
  color-scheme:dark;

  /* --- marque --- */
  --blue:#145091;
  --blue-hi:#1A63B2;
  --blue-deep:#0C3564;
  --blue-lit:#4A93EC;
  --paper:#E5E6E7;

  /* --- fonds : noir de marque, très légèrement dérivé vers le bleu --- */
  --ink:#05070A;
  --ink-2:#0A0F16;
  --ink-3:#111823;
  --mute:#8B95A3;
  --soft:#C3C9D1;
  --line:rgba(229,230,231,.13);
  --line-2:rgba(229,230,231,.28);

  /* --- typographie --- */
  --f:"Agrandir Narrow","Archivo","Archivo Narrow","Helvetica Neue",Arial,sans-serif;
  --d1:clamp(2.7rem,6.6vw,6.2rem);
  --d2:clamp(2rem,4.4vw,3.9rem);
  --d3:clamp(1.35rem,2.4vw,2.1rem);

  /* --- rythme --- */
  --pad:clamp(20px,5vw,88px);
  --sect:clamp(52px,7vw,104px);
  --head:clamp(68px,8vw,92px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* l'entête est fixe : les ancres doivent s'arrêter en dessous, pas derrière */
[id]{scroll-margin-top:calc(var(--head) + 20px)}
body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--f);
  font-variation-settings:"wdth" 100,"wght" 400;
  font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
:focus-visible{outline:2px solid var(--blue-lit); outline-offset:3px}
.sr{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.skip{position:absolute; left:-9999px; top:0; z-index:400; padding:1em 1.5em; background:var(--blue); color:#fff}
.skip:focus{left:0}

/* ---------------------------------------------------------------- type --- */
.dsp{
  font-variation-settings:"wdth" 78,"wght" 900;
  font-weight:900;
  text-transform:uppercase;
  line-height:.9; letter-spacing:-.012em;
  text-wrap:balance; margin:0;
}
.lbl{
  margin:0; font-size:.72rem; text-transform:uppercase; letter-spacing:.19em;
  font-variation-settings:"wdth" 92,"wght" 600; font-weight:600; color:var(--mute);
}
.lede{margin:0; max-width:62ch; font-size:clamp(1rem,1.35vw,1.15rem); line-height:1.62; color:var(--soft)}
.lede + .lede{margin-top:1rem}
.blue{color:var(--blue-lit)}
.num{font-variant-numeric:tabular-nums}

.btn{
  display:inline-flex; align-items:center; gap:.7em;
  padding:.95em 1.5em; background:var(--blue); color:#fff;
  font-size:.8rem; letter-spacing:.14em; text-transform:uppercase;
  font-variation-settings:"wdth" 92,"wght" 700; font-weight:700;
  transition:background .2s ease, transform .2s ease;
}
.btn:hover{background:var(--blue-hi); transform:translateY(-1px)}
.btn--ghost{background:none; border:1px solid var(--line-2); color:var(--paper)}
.btn--ghost:hover{background:rgba(229,230,231,.07); border-color:var(--paper)}
.arw{display:inline-block; transition:transform .2s ease}
.btn:hover .arw,.door:hover .arw{transform:translateX(4px)}

/* -------------------------------------------------------------- entête --- */
.head{
  position:fixed; inset:0 0 auto 0; z-index:90;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  height:var(--head); padding:0 var(--pad);
  transition:background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
  border-bottom:1px solid transparent;
}
.head[data-stuck="1"]{
  background:rgba(5,7,10,.9);
  backdrop-filter:blur(14px);
  border-bottom-color:var(--line);
}
/* zone de protection du logo : jamais moins que la hauteur du symbole (brandbook) */
.head__logo img{width:clamp(132px,13vw,180px); height:auto}
.burger{
  display:flex; align-items:center; gap:.8em;
  font-size:.72rem; letter-spacing:.19em; text-transform:uppercase;
  font-variation-settings:"wdth" 90,"wght" 700; font-weight:700;
}
.burger__bars{display:grid; gap:6px}
.burger__bars i{display:block; width:26px; height:1.5px; background:var(--paper); transition:width .22s ease}
.burger:hover .burger__bars i:first-child{width:34px}

/* ---------------------------------------------------------------- hero --- */
.hero{position:relative; display:flex; min-height:clamp(600px,88vh,860px); overflow:hidden}
.hero__img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(.35) contrast(1.06)}
.hero__veil{
  position:absolute; inset:0;
  background:
    linear-gradient(96deg, rgba(5,7,10,.96) 0%, rgba(5,7,10,.84) 36%, rgba(5,7,10,.30) 70%, rgba(12,53,100,.44) 100%),
    linear-gradient(0deg, rgba(5,7,10,.92), rgba(5,7,10,0) 46%);
}
.hero__body{
  position:relative; z-index:2; align-self:flex-end;
  padding:0 var(--pad) clamp(46px,6.5vw,84px); max-width:960px;
}
.hero h1{font-size:var(--d1); margin:.55rem 0 1.15rem}
.hero__cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:1.9rem}
.hero__rule{
  position:absolute; z-index:2; left:var(--pad); right:var(--pad); bottom:0; height:3px;
  background:linear-gradient(90deg,var(--blue) 0%,var(--blue-lit) 40%,rgba(229,230,231,.08) 40%);
}

/* ------------------------------------------------------------- sections --- */
.section{padding:var(--sect) var(--pad)}
.section--edge{border-bottom:1px solid var(--line)}

/* Qui nous sommes : titre déployé, chiffres à droite, preuves en tuiles. */
.qui{padding-bottom:0}
.qui h2{margin:1.25rem 0 0; font-size:clamp(2.6rem,7vw,6rem)}
.qui__sous{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,4vw,64px); margin-top:clamp(26px,3vw,44px); align-items:end;
}
.qui__texte{margin:0; max-width:52ch; font-size:clamp(1.05rem,1.5vw,1.28rem); line-height:1.58; color:var(--soft)}
.qui__chiffres{display:flex; flex-wrap:wrap; gap:clamp(20px,3vw,44px); justify-content:flex-end}
.qui__chiffres div{text-align:right}
.qui__chiffres b{
  display:block; font-size:clamp(1.6rem,3vw,2.4rem); line-height:1;
  font-variation-settings:"wdth" 76,"wght" 900; font-weight:900; font-variant-numeric:tabular-nums;
}
.qui__chiffres small{display:block; margin-top:.4rem; font-size:.7rem; letter-spacing:.15em; text-transform:uppercase; color:var(--mute)}
.qui__tuiles{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); margin-top:clamp(38px,5vw,66px)}
.qui__tuiles > div{background:var(--ink-2); padding:clamp(24px,2.8vw,38px); border-top:3px solid var(--blue)}
.qui__tuiles h3{margin:.8rem 0 .5rem; font-size:1.05rem; line-height:1.1; font-variation-settings:"wdth" 86,"wght" 800; font-weight:800; text-transform:uppercase}
.qui__tuiles p{margin:0; color:var(--mute); font-size:.92rem}
@media (max-width:900px){
  .qui__sous{grid-template-columns:1fr}
  .qui__chiffres{justify-content:flex-start}
  .qui__chiffres div{text-align:left}
  .qui__tuiles{grid-template-columns:1fr}
}

.tick{list-style:none; display:grid; gap:.6rem; margin:1.7rem 0 0; padding:0}
.tick li{display:grid; grid-template-columns:auto 1fr; gap:.85em; align-items:baseline; font-size:.95rem; color:var(--soft)}
.tick li::before{content:""; width:14px; height:1.5px; background:var(--blue-lit); transform:translateY(-4px)}

/* -------------------------------------------------------- nos services --- */
.svc__head{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:20px;
  padding:var(--sect) var(--pad) 1.5rem;
}
.svc__head h2{font-size:var(--d2)}
.row{
  position:relative; display:grid; grid-template-columns:3.4rem minmax(0,1fr) auto;
  gap:clamp(14px,3vw,40px); align-items:center;
  padding:clamp(20px,2.5vw,28px) var(--pad);
  border-top:1px solid var(--line);
  transition:background .25s ease;
}
.row:last-of-type{border-bottom:1px solid var(--line)}
.row:hover{background:linear-gradient(90deg,rgba(20,80,145,.32),rgba(20,80,145,0) 66%)}
.row__n{font-size:.78rem; letter-spacing:.1em; color:var(--blue-lit); font-variation-settings:"wdth" 90,"wght" 700; font-weight:700}
.row h3{
  margin:0; font-size:clamp(1.3rem,2.5vw,2rem); line-height:1;
  font-variation-settings:"wdth" 80,"wght" 800; font-weight:800; text-transform:uppercase;
}
.row p{margin:.5rem 0 0; max-width:54ch; color:var(--mute); font-size:.94rem}
.row__thumb{
  justify-self:end; width:132px; height:86px; object-fit:cover;
  opacity:0; filter:grayscale(1); transition:opacity .3s ease, filter .3s ease;
}
.row:hover .row__thumb{opacity:1; filter:grayscale(.2)}
@media (max-width:760px){
  .row{grid-template-columns:2.6rem minmax(0,1fr)}
  .row__thumb{display:none}
}

/* ------------------------------------------------------------- chiffres --- */
.stats{display:grid; grid-template-columns:repeat(4,1fr); background:var(--blue)}
.stats__cell{padding:clamp(28px,3.5vw,44px) clamp(16px,2.2vw,30px); border-left:1px solid rgba(255,255,255,.16)}
.stats__cell:first-child{border-left:0}
.stats b{
  display:block; font-size:clamp(1.5rem,3.4vw,2.7rem); line-height:1; color:#fff;
  font-variation-settings:"wdth" 76,"wght" 900; font-weight:900; font-variant-numeric:tabular-nums;
}
.stats small{display:block; margin-top:.55rem; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.74)}
@media (max-width:760px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .stats__cell:nth-child(3){border-left:0}
  .stats__cell:nth-child(n+3){border-top:1px solid rgba(255,255,255,.16)}
}

/* ----------------------------------------------------------- différence --- */
.diff{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(28px,5vw,72px); align-items:center}
.diff h2{font-size:var(--d2); margin:.75rem 0 1.4rem}
.diff figure{margin:0}
/* seule image du site où le bleu de marque est le sujet : pas de désaturation */
.diff figure img{width:100%; height:auto}
.diff figcaption{margin-top:.9rem; font-size:.78rem; line-height:1.6; color:var(--mute)}
@media (max-width:880px){ .diff{grid-template-columns:1fr} }

/* ------------------------------------------------------- mots de marque --- */
/* Les six mots-clés du brandbook, présents comme signature et non comme section. */
.creed{
  display:flex; flex-wrap:wrap; align-items:center; gap:clamp(14px,2.4vw,30px);
  padding:clamp(22px,2.6vw,30px) var(--pad);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:var(--ink-2);
}
.creed span{
  font-size:.74rem; letter-spacing:.2em; text-transform:uppercase;
  font-variation-settings:"wdth" 90,"wght" 700; font-weight:700; color:var(--soft);
}
.creed span:nth-child(odd){color:var(--blue-lit)}

/* ---------------------------------------------------------- trois voies --- */
.doors{display:grid; grid-template-columns:repeat(3,1fr)}
.door{
  display:block; padding:clamp(32px,3.8vw,54px) clamp(20px,2.6vw,40px);
  background:var(--ink); border-left:1px solid var(--line);
  transition:background .25s ease;
}
.door:first-child{border-left:0}
.door:hover{background:var(--ink-3)}
.door h3{
  margin:.95rem 0 .7rem; font-size:clamp(1.1rem,1.9vw,1.5rem); line-height:1.02;
  font-variation-settings:"wdth" 82,"wght" 800; font-weight:800; text-transform:uppercase;
}
.door p{margin:0 0 1.6rem; color:var(--mute); font-size:.92rem}
.door__go{
  display:inline-flex; align-items:center; gap:.6em;
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--blue-lit);
  font-variation-settings:"wdth" 90,"wght" 700; font-weight:700;
}
@media (max-width:820px){
  .doors{grid-template-columns:1fr}
  .door{border-left:0; border-top:1px solid var(--line)}
  .door:first-child{border-top:0}
}

/* ------------------------------------------------------------------ pied --- */
.foot{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:28px; align-items:end;
  padding:var(--sect) var(--pad) clamp(30px,4vw,48px);
  border-top:1px solid var(--line);
}
.foot__logo{width:154px; height:auto; margin-bottom:1.2rem}
.foot address{font-style:normal; font-size:.9rem; line-height:1.85; color:var(--mute)}
.foot address a:hover{color:var(--paper)}
.foot__slogan{
  margin:0; text-align:right; font-size:.74rem; line-height:1.7;
  letter-spacing:.2em; text-transform:uppercase; color:var(--mute);
  font-variation-settings:"wdth" 90,"wght" 700; font-weight:700;
}
.foot__legal{
  padding:0 var(--pad) clamp(26px,3vw,40px);
  font-size:.72rem; color:#5C6470; letter-spacing:.06em;
}
@media (max-width:700px){
  .foot{grid-template-columns:1fr}
  .foot__slogan{text-align:left}
}

/* ====================================================== menu cinéma ====== */
.menu{position:fixed; inset:0; z-index:200; visibility:hidden; pointer-events:none}
.menu[data-open="1"]{visibility:visible; pointer-events:auto}
.menu__bgs{position:absolute; inset:0; background:#000}
.menu__bgs img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transform:scale(1.05);
  filter:grayscale(1) contrast(1.15) brightness(.42) blur(2px);
  transition:opacity .6s ease, transform 7s ease;
}
.menu__bgs img.is-on{opacity:1; transform:scale(1.1)}
.menu__tint{
  position:absolute; inset:0;
  background:radial-gradient(120% 95% at 16% 52%, rgba(20,80,145,.34), rgba(0,0,0,.94) 66%);
  opacity:0; transition:opacity .32s ease;
}
.menu[data-open="1"] .menu__tint{opacity:1}
.menu__bgs{opacity:0; transition:opacity .32s ease}
.menu[data-open="1"] .menu__bgs{opacity:1}

.menu__panel{
  position:absolute; inset:0; z-index:3;
  display:flex; flex-direction:column; justify-content:center;
  padding:var(--head) var(--pad) clamp(30px,5vw,56px);
  overflow-y:auto;
}
.menu__bar{
  position:absolute; inset:0 0 auto 0; z-index:4; height:var(--head);
  display:flex; align-items:center; justify-content:space-between; padding:0 var(--pad);
}
.menu__bar img{width:clamp(132px,13vw,180px); height:auto}
.menu__close{display:flex; align-items:center}
.menu__close i{
  display:grid; place-items:center; width:38px; height:38px;
  border:1px solid var(--line-2); font-style:normal; font-size:1rem;
  transition:background .2s ease, border-color .2s ease;
}
.menu__close:hover i{background:rgba(229,230,231,.09); border-color:var(--paper)}

.menu__nav{list-style:none; margin:0; padding:0; max-width:940px; width:100%}
.menu__nav li{border-bottom:1px solid rgba(229,230,231,.11)}
.menu__nav a{
  display:flex; align-items:baseline; gap:clamp(14px,2.6vw,36px);
  padding:clamp(8px,1.4vw,15px) 0;
  transition:padding-left .3s cubic-bezier(.2,.7,.3,1);
}
.menu__nav a:hover,.menu__nav a:focus-visible{padding-left:clamp(8px,1.6vw,22px)}
.menu__nav em{
  font-style:normal; font-size:clamp(.95rem,1.5vw,1.4rem); color:#3D4756;
  font-variation-settings:"wdth" 82,"wght" 800; font-weight:800; font-variant-numeric:tabular-nums;
  transition:color .25s ease;
}
.menu__nav b{
  font-size:clamp(1.9rem,5.8vw,4.6rem); line-height:.94; color:#69737F;
  font-variation-settings:"wdth" 76,"wght" 900; font-weight:900;
  text-transform:uppercase; letter-spacing:-.015em; transition:color .25s ease;
}
.menu__nav a:hover em,.menu__nav a:focus-visible em{color:var(--blue-lit)}
.menu__nav a:hover b,.menu__nav a:focus-visible b{color:#fff}

.menu__foot{
  display:flex; flex-wrap:wrap; align-items:center; gap:16px 30px;
  margin-top:clamp(28px,4vw,52px);
}
.menu__slogan{
  margin:0; font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; color:var(--blue-lit);
  font-variation-settings:"wdth" 90,"wght" 700; font-weight:700;
}
.menu__mini{
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--mute);
  font-variation-settings:"wdth" 90,"wght" 600; font-weight:600;
}
.menu__mini:hover{color:var(--paper)}

/* entrée échelonnée des rubriques */
.menu[data-open="1"] .menu__nav li{animation:menu-rise .5s cubic-bezier(.2,.7,.3,1) both}
.menu[data-open="1"] .menu__nav li:nth-child(1){animation-delay:.05s}
.menu[data-open="1"] .menu__nav li:nth-child(2){animation-delay:.11s}
.menu[data-open="1"] .menu__nav li:nth-child(3){animation-delay:.17s}
.menu[data-open="1"] .menu__nav li:nth-child(4){animation-delay:.23s}
.menu[data-open="1"] .menu__nav li:nth-child(5){animation-delay:.29s}
.menu[data-open="1"] .menu__foot{animation:menu-rise .5s .34s cubic-bezier(.2,.7,.3,1) both}
@keyframes menu-rise{from{opacity:0; transform:translateY(24px)} to{opacity:1; transform:none}}

@media (max-width:560px){
  .menu__panel{justify-content:flex-start; padding-top:calc(var(--head) + 12px)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important}
  .menu__bgs img{transform:none !important}
}

/* ======================================================= pages internes === */

/* --- bandeau de page (plus court que le hero d'accueil) ------------------- */
.phero{position:relative; display:flex; min-height:clamp(360px,52vh,520px); overflow:hidden}
.phero__img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(.42) contrast(1.06)}
.phero__veil{
  position:absolute; inset:0;
  background:
    linear-gradient(98deg, rgba(5,7,10,.96) 0%, rgba(5,7,10,.86) 40%, rgba(5,7,10,.38) 74%, rgba(12,53,100,.42) 100%),
    linear-gradient(0deg, rgba(5,7,10,.9), rgba(5,7,10,0) 52%);
}
.phero__body{position:relative; z-index:2; align-self:flex-end; padding:0 var(--pad) clamp(34px,4.5vw,58px); max-width:900px}
.phero h1{font-size:clamp(2.3rem,5.4vw,4.6rem); margin:.5rem 0 1rem}
.phero__rule{
  position:absolute; z-index:2; left:var(--pad); right:var(--pad); bottom:0; height:3px;
  background:linear-gradient(90deg,var(--blue) 0%,var(--blue-lit) 34%,rgba(229,230,231,.08) 34%);
}

/* --- deux colonnes texte -------------------------------------------------- */
.duo{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.35fr); gap:clamp(24px,5vw,74px); align-items:start}
.duo h2{font-size:var(--d3); margin:.6rem 0 0; max-width:16ch}
@media (max-width:860px){ .duo{grid-template-columns:1fr} }

/* --- service en pleine largeur, image et texte alternés ------------------- */
.split{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,4vw,60px); align-items:center;
  padding:clamp(38px,4.6vw,64px) var(--pad);
  border-top:1px solid var(--line);
}
.split:last-of-type{border-bottom:1px solid var(--line)}
.split__media{margin:0; position:relative}
.split__media img{width:100%; height:auto; filter:grayscale(.42) contrast(1.05); transition:filter .4s ease}
.split:hover .split__media img{filter:grayscale(.1)}
.split__n{
  position:absolute; top:0; left:0; padding:.6em 1em; background:var(--blue); color:#fff;
  font-size:.76rem; letter-spacing:.16em; font-variation-settings:"wdth" 90,"wght" 700; font-weight:700;
  font-variant-numeric:tabular-nums;
}
.split h2{font-size:clamp(1.6rem,3.2vw,2.6rem); margin:0 0 1rem}
.split:nth-of-type(even) .split__media{order:2}
@media (max-width:860px){
  .split{grid-template-columns:1fr}
  .split:nth-of-type(even) .split__media{order:0}
}

/* --- clientèles ----------------------------------------------------------- */
.sectors{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.sectors > div{background:var(--ink); padding:clamp(24px,3vw,40px) clamp(18px,2.4vw,34px)}
.sectors h3{margin:.9rem 0 .9rem; font-size:clamp(1.05rem,1.8vw,1.35rem); font-variation-settings:"wdth" 82,"wght" 800; font-weight:800; text-transform:uppercase; line-height:1.04}
.sectors ul{margin:0; padding:0; list-style:none; display:grid; gap:.4rem; color:var(--mute); font-size:.92rem}
@media (max-width:820px){ .sectors{grid-template-columns:1fr} }

/* --- récit daté (À propos) ------------------------------------------------ */
.story{list-style:none; margin:clamp(30px,4vw,48px) 0 0; padding:0; display:grid; gap:0}
.story li{display:grid; grid-template-columns:6.5rem minmax(0,1fr); gap:clamp(16px,3vw,38px); padding:clamp(18px,2.2vw,26px) 0; border-top:1px solid var(--line)}
.story li:last-child{border-bottom:1px solid var(--line)}
.story time{
  font-size:.95rem; color:var(--blue-lit); font-variant-numeric:tabular-nums;
  font-variation-settings:"wdth" 84,"wght" 800; font-weight:800; letter-spacing:.04em;
}
.story p{margin:0; color:var(--soft); font-size:.98rem; max-width:62ch}
@media (max-width:640px){ .story li{grid-template-columns:1fr; gap:.4rem} }

/* --- citation des propriétaires ------------------------------------------ */
.saying{background:var(--blue-deep); padding:clamp(44px,6vw,88px) var(--pad)}
.saying blockquote{
  margin:0 auto; max-width:56ch; text-align:center; text-wrap:balance;
  font-size:clamp(1.15rem,2.4vw,1.85rem); line-height:1.36; color:#fff;
  font-variation-settings:"wdth" 88,"wght" 500; font-weight:500;
}
.saying cite{
  display:block; margin:1.5rem auto 0; text-align:center; font-style:normal;
  font-size:.74rem; letter-spacing:.19em; text-transform:uppercase; color:rgba(255,255,255,.72);
  font-variation-settings:"wdth" 90,"wght" 700; font-weight:700;
}

/* --- formulaire ----------------------------------------------------------- */
.form{display:grid; gap:14px}
.form__pair{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.form label{display:grid; gap:.45rem; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--mute); font-variation-settings:"wdth" 90,"wght" 600; font-weight:600}
.form input,.form select,.form textarea{
  font:inherit; font-size:.98rem; color:var(--paper); background:var(--ink-2);
  border:1px solid var(--line-2); padding:.85em 1em; width:100%;
}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--blue-lit); outline:none}
.form textarea{min-height:150px; resize:vertical}
.form__hp{position:absolute; left:-9999px}
.form button{align-self:start; justify-self:start}
@media (max-width:600px){ .form__pair{grid-template-columns:1fr} }

.notice{padding:1.1em 1.3em; border-left:3px solid var(--blue-lit); background:var(--ink-2); font-size:.95rem; color:var(--soft)}
.notice--bad{border-left-color:#E2703A}

/* --- page contact --------------------------------------------------------- */
.reach{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(28px,5vw,72px); align-items:start}
.reach h2{font-size:var(--d3); margin:.6rem 0 1.2rem}
.coords{list-style:none; margin:0; padding:0; display:grid; gap:1.4rem}
.coords li{display:grid; gap:.3rem}
.coords span{font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--mute); font-variation-settings:"wdth" 90,"wght" 600; font-weight:600}
.coords strong{font-size:1.05rem; font-variation-settings:"wdth" 92,"wght" 500; font-weight:500; color:var(--paper)}
.coords a:hover{color:var(--blue-lit)}
@media (max-width:860px){ .reach{grid-template-columns:1fr} }

/* --- deux voies (page Nous joindre) --------------------------------------- */
.doors--two{grid-template-columns:repeat(2,1fr); border-bottom:1px solid var(--line)}
.door--blue{background:var(--blue)}
.door--blue:hover{background:var(--blue-hi)}
.door--blue .lbl{color:rgba(255,255,255,.74)}
.door--blue p{color:rgba(255,255,255,.86)}
.door--blue .door__go{color:#fff}
@media (max-width:820px){ .doors--two{grid-template-columns:1fr} }

/* Les trois voies placées en cours de page (accueil) se referment par un filet. */
main .doors{border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
/* juste sous la bannière, le filet bleu du hero fait déjà la séparation */
.hero + .doors{border-top:0}