/* Eagle Engineering, feuille unique.
   Marque lue sur le logo : rouge #D52834 (mot EAGLE), gris #989A9D (ailes).
   Newsreader pour les titres et la nav, IBM Plex Sans pour le texte. Coins carrés partout. */

:root{
  --encre:#16191E;
  --encre-2:#20242B;
  --papier:#F6F5F2;
  --blanc:#FFFFFF;
  --texte:#2B2F36;
  --texte-2:#5A5E65;
  --gris:#989A9D;
  --gris-encre:#808286;
  --filet:#DEDBD4;
  --filet-sombre:rgba(255,255,255,.14);
  --rouge:#D52834;
  --rouge-fonce:#B01F2A;
  --f-titre:"Newsreader",Georgia,"Times New Roman",serif;
  --f-texte:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --max:1240px;
  --gout:clamp(20px,4vw,56px);
  --nav-h:84px;
  --sec:clamp(72px,10vw,132px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--papier);color:var(--texte);font-family:var(--f-texte);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body.devis-open{overflow:hidden}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
p{margin:0 0 1em}
h1,h2,h3{font-family:var(--f-titre);font-weight:400;line-height:1.12;margin:0;color:var(--encre);letter-spacing:-.01em}
button{font:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sauter{position:absolute;left:12px;top:-60px;z-index:200;background:var(--encre);color:var(--blanc);padding:10px 16px;text-decoration:none}
.sauter:focus{top:12px}
:focus-visible{outline:2px solid var(--rouge);outline-offset:3px}

.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gout)}

/* ------------------------------------------------------------------ boutons */
.btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:0 26px;border:1px solid var(--encre);background:var(--encre);color:var(--blanc);font-family:var(--f-texte);font-size:15px;font-weight:500;letter-spacing:.02em;text-decoration:none;cursor:pointer;transition:border-color .45s,color .45s,padding .35s ease}
.btn:has(.fl):hover{padding:0 30px}
.btn::before{content:"";position:absolute;inset:-1px;z-index:-1;background:var(--rouge);transform:scaleX(0);transform-origin:right;transition:transform .55s cubic-bezier(.7,0,.2,1)}
.btn:hover::before{transform:scaleX(1);transform-origin:left}
.btn:hover{border-color:var(--rouge);color:var(--blanc)}
.btn--clair{background:var(--blanc);border-color:var(--blanc);color:var(--encre)}
.btn--ligne{background:transparent;color:var(--encre)}
.btn--ligne::before{background:var(--encre)}
.btn--ligne:hover{border-color:var(--encre)}
.btn--ligne-clair{background:transparent;border-color:rgba(255,255,255,.55);color:var(--blanc)}
.btn--ligne-clair::before{background:var(--blanc)}
.btn--ligne-clair:hover{border-color:var(--blanc);color:var(--encre)}
.btn svg{width:18px;height:18px;flex:0 0 auto}

.lien{display:inline-flex;align-items:center;gap:10px;font-weight:500;font-size:15px;color:var(--encre);text-decoration:none;padding:6px 0;border-bottom:1px solid var(--encre);transition:color .25s,border-color .25s}
.lien:hover{color:var(--rouge);border-color:var(--rouge)}
.lien--clair{color:var(--blanc);border-color:rgba(255,255,255,.6)}
.lien--clair:hover{color:var(--blanc);border-color:var(--blanc)}
/* la flèche sort à droite et revient par la gauche (bcg.com) */
.fl{display:inline-flex;flex:0 0 auto;width:18px;height:18px;overflow:hidden}
.fl svg{width:18px;height:18px;flex:0 0 auto}
.lien .fl,.lien .fl svg{width:16px;height:16px}
@keyframes boucle{0%{transform:none}49%{transform:translateX(115%)}50%{transform:translateX(-115%)}100%{transform:none}}
a:hover .fl svg,button:hover .fl svg,a:focus-visible .fl svg,button:focus-visible .fl svg{animation:boucle .6s cubic-bezier(.6,.1,.2,1)}
/* souligné à trou qui traverse avec un léger rebond (bcg.com) */
.pied__haut a:not(.pied__logo),.coord__v a{background-image:linear-gradient(90deg,currentColor,currentColor 47%,transparent 0,transparent 53%,currentColor 0);background-repeat:no-repeat;background-position:101% 100%;background-size:210% 1px;padding-bottom:2px;text-decoration:none;transition:background-position .5s cubic-bezier(.64,2,.67,1.53),color .25s}
.pied__haut a:not(.pied__logo):hover,.coord__v a:hover,.pied__haut a:not(.pied__logo):focus-visible,.coord__v a:focus-visible{background-position:0 100%}
::selection{background:var(--rouge);color:var(--blanc)}

/* --------------------------------------------------------------------- nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;height:var(--nav-h);color:var(--blanc);transition:background .35s,color .35s,box-shadow .35s,top .45s cubic-bezier(.2,.7,.2,1),left .45s cubic-bezier(.2,.7,.2,1),right .45s cubic-bezier(.2,.7,.2,1),height .45s cubic-bezier(.2,.7,.2,1)}
.nav::before{content:"";position:absolute;inset:0 0 -56px;background:linear-gradient(180deg,rgba(14,16,20,.62),rgba(14,16,20,0));pointer-events:none;transition:opacity .3s}
.nav.scrolled{top:12px;left:clamp(10px,2vw,28px);right:clamp(10px,2vw,28px);height:68px;background:rgba(255,255,255,.8);-webkit-backdrop-filter:blur(20px) saturate(1.5);backdrop-filter:blur(20px) saturate(1.5);color:var(--encre);box-shadow:0 0 0 1px rgba(22,25,30,.07),0 14px 34px rgba(22,25,30,.09)}
.nav.scrolled .nav__in{padding:0 clamp(16px,2vw,28px)}
.lecture{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--rouge);transform:scaleX(var(--p,0));transform-origin:left;pointer-events:none}
.nav.scrolled::before,.nav.menu-open::before{opacity:0}
.nav__in{position:relative;height:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:28px;padding:0 var(--gout)}
.nav__logo{display:inline-flex;align-items:center;position:relative;z-index:2;justify-self:start}
.nav__logo img{height:46px;width:auto;max-width:none}
.nav__logo-fonce{display:none}
.nav.scrolled .nav__logo-clair{display:none}
.nav.scrolled .nav__logo-fonce{display:block}
.nav__links{display:flex;align-items:center;justify-self:center;gap:clamp(18px,2.2vw,34px)}
.nav__links a{position:relative;font-family:var(--f-titre);font-size:18px;font-weight:400;text-decoration:none;color:inherit;white-space:nowrap;padding:6px 0}
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s cubic-bezier(.7,0,.2,1)}
.nav__links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav__links a.active::after{background:var(--rouge);transform:scaleX(1)}
.nav__menu-cta,.nav__menu-tel{display:none}
.nav__droite{justify-self:end;display:flex;align-items:center;gap:22px}
.nav__tel{font-size:14.5px;font-weight:500;letter-spacing:.02em;text-decoration:none;color:inherit;white-space:nowrap}
.nav__tel:hover{text-decoration:underline;text-underline-offset:4px}
.nav__cta{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;font-size:14.5px;font-weight:500;letter-spacing:.02em;color:inherit;border:1px solid currentColor;background:transparent;cursor:pointer;white-space:nowrap;transition:background .25s,color .25s,border-color .25s}
.nav__cta:hover{background:var(--rouge);border-color:var(--rouge);color:var(--blanc)}
.nav__burger{display:none;justify-self:end;position:relative;z-index:2;width:44px;height:44px;margin-right:-8px;background:none;border:0;cursor:pointer;color:inherit}
.nav__burger span{position:absolute;left:10px;right:10px;height:1.5px;background:currentColor;transition:transform .3s,opacity .2s}
.nav__burger span:nth-child(1){top:15px}
.nav__burger span:nth-child(2){top:21px}
.nav__burger span:nth-child(3){top:27px}

@media (max-width:1180px){
  .nav__tel{display:none}
}
@media (max-width:1020px){
  :root{--nav-h:72px}
  .nav__in{grid-template-columns:1fr auto}
  .nav__droite{display:none}
  .nav__burger{display:block}
  .nav__logo img{height:40px}
  .nav__links{position:fixed;inset:0;z-index:1;justify-self:stretch;flex-direction:column;justify-content:center;justify-content:safe center;align-items:center;text-align:center;gap:4px;background:var(--encre);padding:calc(var(--nav-h) + 28px) var(--gout) 40px;overflow-y:auto;transform:translateY(-100%);visibility:hidden;transition:transform .32s ease,visibility 0s linear .32s}
  .nav__links.nav-open{transform:none;visibility:visible;transition:transform .32s ease,visibility 0s}
  .nav .nav__links a,.nav.scrolled .nav__links a{font-size:32px;color:var(--blanc);padding:8px 0}
  .nav__links .nav__menu-cta{display:inline-flex;margin-top:28px;min-width:240px}
  .nav .nav__links .nav__menu-tel,.nav.scrolled .nav__links .nav__menu-tel{display:inline-block;margin-top:18px;font-family:var(--f-texte);font-size:17px;color:rgba(255,255,255,.82);border:0}
  .nav.scrolled{height:62px}
  .nav.menu-open{top:0;left:0;right:0;height:var(--nav-h);background:var(--encre);color:var(--blanc);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  .nav.menu-open .nav__in{padding:0 var(--gout)}
  .nav.menu-open .nav__logo-clair{display:block}
  .nav.menu-open .nav__logo-fonce{display:none}
  .nav.menu-open .nav__burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .nav.menu-open .nav__burger span:nth-child(2){opacity:0}
  .nav.menu-open .nav__burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
}
@media (max-width:420px){
  .nav__logo img{height:36px}
}

/* --------------------------------------------- hero d'accueil : la fenêtre de l'aigle
   La vidéo est plein écran sous un aplat graphite percé à la forme de l'aigle du logo. En
   défilant, la scène reste collée et l'aigle s'agrandit jusqu'à ouvrir tout l'écran (app.js). */
.vol{position:relative;background:var(--encre);color:var(--blanc)}
.js .vol{height:200vh;height:200svh}
.vol__scene{position:sticky;top:0;height:100vh;height:100svh;min-height:540px;display:flex;align-items:flex-end;overflow:hidden}
.vol__media{position:absolute;inset:0}
.vol__media picture{display:contents}
.vol__poster,.vol__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vol__video{opacity:0;transition:opacity 1.4s ease}
.vol.is-video .vol__video{opacity:1}
.vol__voile{position:absolute;inset:0;opacity:var(--v,0);background:linear-gradient(90deg,rgba(14,16,20,.82) 0%,rgba(14,16,20,.5) 42%,rgba(14,16,20,.08) 80%),linear-gradient(0deg,rgba(14,16,20,.62) 0%,rgba(14,16,20,0) 46%)}
.vol__cache{position:absolute;inset:0;display:block;width:100%;height:100%}
.vol__txt{position:relative;z-index:2;width:100%;max-width:var(--max);margin:0 auto;padding:calc(var(--nav-h) + 40px) var(--gout) clamp(48px,9vh,100px)}
.vol__trait{display:block;width:72px;height:2px;margin-bottom:28px;background:var(--rouge);transform-origin:left}
.vol h1{color:var(--blanc);font-size:clamp(40px,5.6vw,80px);line-height:1.04;max-width:12ch;letter-spacing:-.02em}
.vol__sous{max-width:460px;margin:24px 0 0;font-size:clamp(16.5px,1.3vw,18.5px);line-height:1.6;color:rgba(255,255,255,.84)}
.vol__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.vol__pause{position:absolute;z-index:3;right:var(--gout);bottom:clamp(24px,5vh,48px);display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid rgba(255,255,255,.4);background:rgba(22,25,30,.3);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--blanc);cursor:pointer;transition:background .3s,border-color .3s}
.vol__pause:hover{background:var(--rouge);border-color:var(--rouge)}
.vol__pause span{width:12px;height:14px;border-left:3px solid currentColor;border-right:3px solid currentColor}
.vol__pause.is-paused span{width:0;height:0;margin-left:4px;border-left:12px solid currentColor;border-right:0;border-top:7px solid transparent;border-bottom:7px solid transparent}
.vol__pause[hidden]{display:none}
@media (max-width:760px){
  .js .vol{height:170vh;height:170svh}
  .vol h1{max-width:none}
  .vol__pause{right:16px;bottom:24px}
}

/* ------------------------------------------------- hero des pages intérieures */
.phero{position:sticky;top:0;z-index:0;min-height:60vh;min-height:60svh;display:flex;align-items:flex-end;color:var(--blanc);background:var(--encre);overflow:hidden}
.phero__media{position:absolute;inset:0;margin:0}
.phero__media img{width:100%;height:100%;object-fit:cover}
.phero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,16,20,.84) 0%,rgba(14,16,20,.55) 45%,rgba(14,16,20,.15) 85%),linear-gradient(0deg,rgba(14,16,20,.5) 0%,rgba(14,16,20,0) 50%),linear-gradient(200deg,rgba(213,40,52,.16) 0%,rgba(213,40,52,0) 34%)}
.phero__trait{display:block;width:56px;height:2px;margin-bottom:26px;background:var(--rouge);transform-origin:left}
.phero__txt{position:relative;z-index:1;width:100%;max-width:var(--max);margin:0 auto;padding:calc(var(--nav-h) + 56px) var(--gout) clamp(44px,7vh,76px)}
.phero h1{color:var(--blanc);font-size:clamp(46px,7vw,108px);line-height:1;letter-spacing:-.025em}
/* rideau : le bandeau reste en place et la page monte par-dessus ; il s'assombrit à mesure (app.js) */
.phero::before,.ahero::before{content:"";position:absolute;inset:0;z-index:1;background:var(--encre);opacity:var(--q,0);pointer-events:none}
main > .phero ~ *,main > .ahero ~ *{position:relative;z-index:1}
main > .phero + *,main > .ahero + *{box-shadow:0 -28px 56px rgba(14,16,20,.22)}
main > .phero ~ .sec:not(.sec--blanc):not(.sec--sombre){background:var(--papier)}
.phero p{max-width:560px;margin:18px 0 0;font-size:clamp(16.5px,1.3vw,18.5px);color:rgba(255,255,255,.86)}

.vol__media::after,.phero__media::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.16;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='.33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E")}

/* en-tête typographique des articles */
.ahero{position:sticky;top:0;z-index:0;isolation:isolate;overflow:hidden;background:var(--encre);color:var(--blanc);padding:calc(var(--nav-h) + clamp(56px,9vw,104px)) 0 clamp(52px,7vw,84px)}
.ahero .wrap{position:relative;z-index:2}
.ahero h1{color:var(--blanc);font-size:clamp(34px,4.8vw,66px);line-height:1.08;max-width:21ch;letter-spacing:-.02em}
/* le code du référentiel en très grand, au trait, qui glisse au défilement (app.js) */
.fond{position:absolute;z-index:-1;right:-.03em;bottom:-.2em;font-family:var(--f-titre);font-size:clamp(96px,17vw,260px);line-height:1;letter-spacing:-.03em;white-space:nowrap;color:transparent;-webkit-text-stroke:1px #CBC7BE;pointer-events:none;translate:var(--dx,0px) 0;transition:-webkit-text-stroke-color .5s}
.ahero .fond{-webkit-text-stroke-color:rgba(255,255,255,.14)}
.ahero__meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-bottom:22px;font-size:14px;letter-spacing:.04em;color:rgba(255,255,255,.72)}
.ahero__meta .tag{color:var(--blanc);border-color:rgba(255,255,255,.4)}

/* ----------------------------------------------------------------- sections */
.sec{padding:var(--sec) 0}
.sec--blanc{background:var(--blanc)}
.sec--sombre{background:var(--encre);color:rgba(255,255,255,.82)}
.sec--sombre h2,.sec--sombre h3{color:var(--blanc)}
.sec--sombre p,.sec--sombre li{color:rgba(255,255,255,.82)}
.sec__tete{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 64px;align-items:end;margin-bottom:clamp(40px,5vw,64px)}
.sec__tete p{margin:0;max-width:520px;color:var(--texte-2)}
.sec--sombre .sec__tete p{color:rgba(255,255,255,.72)}
.surligne{display:flex;align-items:center;gap:14px;margin:0 0 18px;font-family:var(--f-texte);font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--texte-2)}
.surligne::before{content:"";width:28px;height:2px;background:var(--rouge);flex:0 0 auto}
.sec--sombre .surligne,.cta .surligne{color:rgba(255,255,255,.7)}
h2{font-size:clamp(34px,4.2vw,56px)}
.lead{font-size:clamp(18px,1.5vw,20px);line-height:1.6;color:var(--texte)}

@media (max-width:860px){
  .sec__tete{grid-template-columns:1fr;align-items:start}
}

/* ------------------------------------------------------------ bande chiffres */
.chiffres{background:var(--encre);color:var(--blanc)}
.chiffres__in{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.chiffre{margin:0;padding:clamp(40px,5vw,64px) clamp(16px,3vw,44px);border-left:1px solid var(--filet-sombre)}
.chiffre:first-child{border-left:0;padding-left:0}
.chiffre__n{display:block;font-family:var(--f-titre);font-size:clamp(46px,5.8vw,80px);line-height:1.1;color:var(--blanc);letter-spacing:-.02em;font-variant-numeric:tabular-nums lining-nums}
.chiffre__l{display:block;margin-top:14px;max-width:260px;font-size:15px;line-height:1.5;color:rgba(255,255,255,.68)}
/* compteur : une bande 0-9 par chiffre, posée d'emblée sur la vraie valeur */
.odo__v{display:inline-flex;align-items:flex-start;height:1.1em;overflow:hidden}
.odo__c{display:inline-block;height:1.1em;overflow:hidden}
.odo__b{display:flex;flex-direction:column;transition:transform 1.9s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
.odo__b span{display:block;height:1.1em;line-height:1.1}
.odo--zero .odo__b{transition:none}
@media (max-width:760px){
  .chiffres__in{grid-template-columns:1fr}
  .chiffre{border-left:0;border-top:1px solid var(--filet-sombre);padding:28px 0}
  .chiffre:first-child{border-top:0}
}

/* ------------------------------------------- services : panneaux qui s'empilent
   Chaque panneau colle sous la nav ; le suivant monte et le couvre, le précédent recule (app.js).
   La légende est une carte de verre dépoli posée sur la photo (bcg.com). */
.sec__lien{justify-self:end;align-self:end}
.piles{display:grid;gap:clamp(24px,3vw,40px)}
.pile{position:sticky;top:calc(var(--nav-h) + 12px + var(--n) * 18px);height:min(74vh,640px);height:min(74svh,640px)}
.pile__in{position:relative;height:100%;overflow:hidden;background:var(--encre);transform-origin:50% 0}
.pile__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.pile__in::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,rgba(14,16,20,.5),rgba(14,16,20,0) 55%),linear-gradient(200deg,rgba(213,40,52,.16),rgba(213,40,52,0) 36%)}
.pile__carte{position:absolute;z-index:1;left:clamp(14px,3vw,40px);bottom:clamp(14px,3vw,40px);width:min(470px,calc(100% - 28px));padding:clamp(22px,2.8vw,36px);background:rgba(22,25,30,.52);-webkit-backdrop-filter:blur(20px) saturate(1.3);backdrop-filter:blur(20px) saturate(1.3);border:1px solid rgba(255,255,255,.16);color:rgba(255,255,255,.84);transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.pile__n{display:block;margin-bottom:18px;font-family:var(--f-titre);font-size:clamp(44px,5vw,72px);line-height:1;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.75)}
.pile__carte h3{color:var(--blanc);font-size:clamp(28px,2.8vw,40px)}
.pile__carte p{margin:12px 0 22px;color:rgba(255,255,255,.84)}
@media (hover:hover){
  .pile:hover .pile__photo{transform:scale(1.04)}
  .pile:hover .pile__carte{transform:translateY(-6px)}
}
@media (max-width:760px){
  .pile{height:min(72vh,560px);height:min(72svh,560px)}
  .pile__carte{left:10px;right:10px;bottom:10px;width:auto;padding:20px 20px 22px}
  .pile__n{font-size:38px;margin-bottom:10px}
  .pile__carte p{font-size:15.5px;margin:8px 0 16px}
}
@media (max-width:860px){.sec__lien{justify-self:start}}

/* ---------------------------------------------- référentiels : la liste en grand
   Au survol, un aplat graphite traverse la ligne et l'aigle entre ; au défilement, les lignes
   glissent en sens alternés (translate, posé par app.js). */
.sec:has(.normes-liste){overflow-x:clip}
.normes-liste{list-style:none;margin:0;padding:0;border-top:1px solid var(--filet)}
.nl{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:6px 32px;padding:clamp(14px,1.8vw,24px) 0;border-bottom:1px solid var(--filet)}
.nl::before{content:"";position:absolute;inset:-1px calc(var(--gout) * -1) 0;z-index:-1;background:var(--encre);transform:scaleX(0);transform-origin:right;transition:transform .7s cubic-bezier(.7,0,.2,1)}
.nl__code{font-family:var(--f-titre);font-size:clamp(34px,5.4vw,78px);line-height:1.05;letter-spacing:-.02em;color:var(--encre);translate:var(--dx,0px) 0;transition:color .5s,transform .7s cubic-bezier(.2,.7,.2,1)}
.nl__dom{max-width:300px;font-size:15.5px;line-height:1.45;text-align:right;color:var(--texte-2);transition:color .5s}
.nl__aigle{position:absolute;left:0;top:50%;width:clamp(44px,4.6vw,66px);height:auto;transform:translateY(-50%);clip-path:inset(0 100% 0 0);transition:clip-path .8s cubic-bezier(.6,.1,.2,1)}
@media (hover:hover){
  .nl:hover::before{transform:scaleX(1);transform-origin:left}
  .nl:hover .nl__code{color:var(--blanc);transform:translateX(calc(clamp(44px,4.6vw,66px) + 22px))}
  .nl:hover .nl__dom{color:rgba(255,255,255,.76)}
  .nl:hover .nl__aigle{clip-path:inset(0 0 0 0)}
}
@media (max-width:600px){
  .nl{grid-template-columns:1fr;gap:2px}
  .nl__dom{text-align:left;max-width:none;font-size:14.5px}
}

/* ------------------------------------------------- logos clients : deux rangs qui défilent
   Chaque rang porte sa liste deux fois (la seconde aria-hidden) pour une boucle sans couture ;
   le survol ou le focus arrête le rang. */
.defile{border-top:1px solid var(--filet);border-bottom:1px solid var(--filet)}
.defile__rang{display:flex;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)}
.defile__rang + .defile__rang{border-top:1px solid var(--filet)}
.defile__piste{display:flex;flex:0 0 auto;min-width:100%;justify-content:space-around;margin:0;padding:0;list-style:none;animation:defile 52s linear infinite}
.defile__rang--inverse .defile__piste{animation-duration:46s;animation-direction:reverse}
.defile__rang:hover .defile__piste,.defile__rang:focus-within .defile__piste{animation-play-state:paused}
@keyframes defile{to{transform:translateX(-100%)}}
.logo-cli{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:clamp(150px,16vw,230px);height:120px;padding:22px 28px}
.logo-cli img{width:auto;height:auto;max-width:100%;max-height:50px;object-fit:contain;filter:grayscale(1);opacity:.7;transition:filter .4s,opacity .4s}
.logo-cli:hover img{filter:none;opacity:1}
.logo-cli img.haut{max-height:70px}
.logos__pied{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;margin-top:36px}
.logos__pied p{margin:0;color:var(--texte-2);max-width:620px}
@media (max-width:700px){
  .logo-cli{width:140px;height:96px;padding:16px 18px}
  .logo-cli img{max-height:38px}
  .logo-cli img.haut{max-height:52px}
}

/* --------------------------------------------------------------- actualités */
.actus{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,40px)}
.actu{display:flex;flex-direction:column;padding-top:26px;border-top:1px solid var(--encre);text-decoration:none;color:inherit}
.actu__meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;font-size:13.5px;color:var(--texte-2)}
.tag{display:inline-block;padding:4px 10px;border:1px solid var(--filet);font-size:12.5px;font-weight:500;letter-spacing:.04em;color:var(--texte)}
.actu h3{margin:18px 0 12px;font-size:clamp(22px,1.9vw,26px);line-height:1.22;transition:color .25s}
.actu p{margin:0 0 22px;color:var(--texte-2);font-size:16px}
.actu .lien{margin-top:auto;align-self:flex-start}
.actu:hover h3{color:var(--rouge)}
@media (max-width:900px){.actus{grid-template-columns:1fr}}

/* liste des actualités */

.actus-liste{border-top:1px solid var(--filet)}
.actu-ligne{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:200px minmax(0,1fr);gap:16px 48px;margin:0 -28px;padding:clamp(44px,5vw,68px) 28px;border-bottom:1px solid var(--filet);text-decoration:none;color:inherit}
.actu-ligne::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--encre);transform:scaleX(0);transform-origin:right;transition:transform .8s cubic-bezier(.7,0,.2,1)}
.actu-ligne__date{font-family:var(--f-titre);font-size:22px;color:var(--encre);transition:color .5s}
.actu-ligne h2{font-size:clamp(28px,3.2vw,46px);line-height:1.12;letter-spacing:-.015em;margin:16px 0 16px;max-width:24ch;transition:color .5s}
.actu-ligne p{color:var(--texte-2);max-width:640px;transition:color .5s}
.actu-ligne .tag,.actu-ligne .lien{transition:color .5s,border-color .5s}
@media (hover:hover){
  .actu-ligne:hover::before{transform:scaleX(1);transform-origin:left}
  .actu-ligne:hover h2,.actu-ligne:hover .actu-ligne__date,.actu-ligne:hover .lien{color:var(--blanc);border-color:var(--blanc)}
  .actu-ligne:hover p{color:rgba(255,255,255,.76)}
  .actu-ligne:hover .tag{color:var(--blanc);border-color:rgba(255,255,255,.4)}
  .actu-ligne:hover .fond{-webkit-text-stroke-color:rgba(255,255,255,.16)}
}
@media (max-width:760px){.actu-ligne{grid-template-columns:1fr;gap:6px;margin:0 -16px;padding:36px 16px}}

/* article */
.article-g{display:grid;grid-template-columns:200px minmax(0,740px);gap:clamp(32px,6vw,96px)}
.article__meta{position:sticky;top:calc(var(--nav-h) + 40px);align-self:start}
.article__meta dl{margin:0 0 24px}
.article__meta dl div{padding:14px 0;border-top:1px solid var(--filet)}
.article__meta dt{font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--texte-2)}
.article__meta dd{margin:4px 0 0;font-family:var(--f-titre);font-size:19px;line-height:1.35;color:var(--encre)}
.article p:first-child{font-family:var(--f-titre);font-size:clamp(22px,2vw,27px);line-height:1.5;color:var(--encre)}
@media (max-width:900px){.article-g{grid-template-columns:1fr}.article__meta{position:static;order:2}}
/* bouton copier : l'icône, le mot, puis « copié » deux secondes */
.copier{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--filet);background:transparent;color:var(--encre);font-size:13.5px;font-weight:500;cursor:pointer;transition:border-color .3s,color .3s,background .3s}
.copier svg{width:15px;height:15px;flex:0 0 auto}
.copier:hover{border-color:var(--encre)}
.copier.is-ok{background:var(--encre);border-color:var(--encre);color:var(--blanc)}
/* article suivant : le titre en grand, l'aplat graphite traverse au survol */
.suivant{background:var(--papier);border-top:1px solid var(--filet)}
.suivant__lien{position:relative;isolation:isolate;overflow:hidden;display:block;text-decoration:none;color:inherit;padding:clamp(64px,8vw,112px) 0}
.suivant__lien::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--encre);transform:scaleX(0);transform-origin:right;transition:transform .9s cubic-bezier(.7,0,.2,1)}
.suivant__in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px 40px;align-items:end}
.suivant__l{grid-column:1 / -1;display:flex;align-items:center;gap:14px;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--texte-2);transition:color .5s}
.suivant__l::before{content:"";width:28px;height:2px;background:var(--rouge)}
.suivant__titre{font-family:var(--f-titre);font-size:clamp(30px,4.4vw,64px);line-height:1.08;letter-spacing:-.02em;color:var(--encre);max-width:22ch;transition:color .5s}
.suivant__meta{grid-column:1;display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;font-size:14px;color:var(--texte-2);transition:color .5s}
.suivant__fl{grid-column:2;grid-row:2 / 4;align-self:center;display:grid;place-items:center;width:clamp(64px,7vw,96px);height:clamp(64px,7vw,96px);border:1px solid var(--encre);color:var(--encre);transition:background .5s,color .5s,border-color .5s}
.suivant__fl .fl,.suivant__fl .fl svg{width:28px;height:28px}
@media (hover:hover){
  .suivant__lien:hover::before{transform:scaleX(1);transform-origin:left}
  .suivant__lien:hover .suivant__titre{color:var(--blanc)}
  .suivant__lien:hover .suivant__l,.suivant__lien:hover .suivant__meta{color:rgba(255,255,255,.72)}
  .suivant__lien:hover .tag{color:var(--blanc);border-color:rgba(255,255,255,.4)}
  .suivant__lien:hover .suivant__fl{background:var(--rouge);border-color:var(--rouge);color:var(--blanc)}
  .suivant__lien:hover .fl svg{animation:boucle .6s cubic-bezier(.6,.1,.2,1)}
  .suivant__lien:hover .fond{-webkit-text-stroke-color:rgba(255,255,255,.16)}
}
@media (max-width:760px){.suivant__in{grid-template-columns:1fr}.suivant__fl{grid-column:1;grid-row:auto;margin-top:8px}}

.article{max-width:740px}
.article p{font-size:18.5px;line-height:1.75;color:var(--texte)}
.article__pied{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;margin-top:44px;padding-top:30px;border-top:1px solid var(--filet)}


/* --------------------------------------------------------- services détaillés
   Nos métiers : la photo reste en place, la suivante monte par-dessus quand on arrive au métier
   suivant, le compteur roule de 01 à 03 (app.js). Sans JS : chaque métier porte sa photo. */
.recit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px)}
.recit__cadre{position:sticky;top:calc(var(--nav-h) + 28px);height:calc(100vh - var(--nav-h) - 56px);height:calc(100svh - var(--nav-h) - 56px);max-height:780px;overflow:hidden;background:var(--encre)}
.recit__cadre::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(0deg,rgba(14,16,20,.45),rgba(14,16,20,0) 40%),linear-gradient(200deg,rgba(213,40,52,.16),rgba(213,40,52,0) 36%)}
.recit__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.js .recit__photo:not(:first-child){clip-path:inset(100% 0 0 0);transform:scale(1.08);transition:clip-path 1.1s cubic-bezier(.7,0,.2,1),transform 1.6s cubic-bezier(.2,.7,.2,1)}
.js .recit__photo.on{clip-path:inset(0 0 0 0);transform:none}
.recit__compte{position:absolute;z-index:4;left:clamp(16px,2.4vw,32px);bottom:clamp(16px,2.4vw,32px);display:flex;align-items:baseline;gap:12px;padding:18px 24px;background:rgba(22,25,30,.52);-webkit-backdrop-filter:blur(20px) saturate(1.3);backdrop-filter:blur(20px) saturate(1.3);border:1px solid rgba(255,255,255,.16);font-family:var(--f-titre);color:var(--blanc)}
.recit__n{display:block;height:1.05em;overflow:hidden;font-size:clamp(44px,4.4vw,64px);line-height:1.05}
.recit__bande{display:flex;flex-direction:column;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.recit__bande span{display:block;height:1.05em}
.recit__total{font-size:20px;color:rgba(255,255,255,.7)}
.recit__barre{position:absolute;z-index:4;right:clamp(16px,2.4vw,32px);top:clamp(16px,2.4vw,32px);bottom:clamp(16px,2.4vw,32px);width:2px;background:rgba(255,255,255,.25)}
.recit__barre i{position:absolute;inset:0;background:var(--rouge);transform-origin:top;transform:scaleY(var(--b,0))}
.etape{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;min-height:calc(100vh - var(--nav-h) - 56px);min-height:calc(100svh - var(--nav-h) - 56px);max-width:520px;scroll-margin-top:calc(var(--nav-h) + 28px)}
.etape__photo{display:none;width:100%;aspect-ratio:4 / 3;object-fit:cover;margin-bottom:28px}
.etape__n{display:block;margin-bottom:22px;font-family:var(--f-titre);font-size:clamp(64px,7vw,108px);line-height:1;color:transparent;-webkit-text-stroke:1px var(--encre);transition:color .7s,-webkit-text-stroke-color .7s}
.etape.on .etape__n{color:var(--rouge);-webkit-text-stroke-color:var(--rouge)}
.etape h3{font-size:clamp(32px,3.4vw,50px);letter-spacing:-.015em}
.etape p{margin:18px 0 26px;font-size:18px;color:var(--texte-2)}
.etape .lien{background:none;border-width:0 0 1px;cursor:pointer}
html:not(.js) .recit,html:not(.js) .etape{display:block}
html:not(.js) .recit__visuel{display:none}
html:not(.js) .etape{min-height:0;max-width:none;padding:40px 0;border-top:1px solid var(--filet)}
html:not(.js) .etape__photo{display:block;max-width:720px}
html:not(.js) .etape__n{color:var(--rouge);-webkit-text-stroke-color:var(--rouge)}
@media (max-width:900px){
  .recit{display:block}
  .recit__visuel{display:none}
  .etape{min-height:0;max-width:none;padding:36px 0;border-top:1px solid var(--filet)}
  .etape__photo{display:block}
  .etape__n{font-size:56px;margin-bottom:14px;color:var(--rouge);-webkit-text-stroke-color:var(--rouge)}
}

/* Systèmes de management : le cadre reste en place et son verre affiche le référentiel qu'on lit,
   les bandes de texte roulent d'un code à l'autre (app.js) */
.ref{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px)}
.ref__cadre{position:sticky;top:calc(var(--nav-h) + 28px);aspect-ratio:4 / 3;overflow:hidden}
.ref__cadre img{width:100%;height:100%;object-fit:cover}
.ref__cadre::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(200deg,rgba(213,40,52,.18),rgba(213,40,52,0) 40%)}
.ref__verre{position:absolute;z-index:1;left:clamp(14px,2.4vw,28px);right:clamp(14px,2.4vw,28px);bottom:clamp(14px,2.4vw,28px);padding:22px 26px 24px;background:rgba(22,25,30,.55);-webkit-backdrop-filter:blur(20px) saturate(1.3);backdrop-filter:blur(20px) saturate(1.3);border:1px solid rgba(255,255,255,.16)}
.ref__compte{display:block;margin-bottom:10px;font-size:12.5px;font-weight:600;letter-spacing:.14em;color:rgba(255,255,255,.7)}
.ref__i{color:var(--blanc)}
.ref__code{display:block;height:1.12em;overflow:hidden;font-family:var(--f-titre);font-size:clamp(34px,3.8vw,58px);line-height:1.12;letter-spacing:-.02em;color:var(--blanc)}
.ref__dom{display:block;height:1.5em;overflow:hidden;margin-top:6px;font-size:15.5px;line-height:1.5;color:rgba(255,255,255,.82)}
.ref__bande{display:flex;flex-direction:column;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.ref__code .ref__bande span{display:block;height:1.12em;white-space:nowrap}
.ref__dom .ref__bande span{display:block;height:1.5em;white-space:nowrap}
.ref__liste{list-style:none;margin:0;padding:0;border-top:1px solid var(--filet-sombre)}
.rl{position:relative;display:grid;grid-template-columns:52px minmax(0,1fr);gap:2px 16px;padding:clamp(18px,2vw,26px) 0;border-bottom:1px solid var(--filet-sombre)}
.rl::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--rouge);transform:scaleX(0);transform-origin:left;transition:transform .8s cubic-bezier(.6,.1,.2,1)}
.rl__n{grid-row:span 2;padding-top:.7em;font-size:12.5px;font-weight:600;letter-spacing:.12em;color:rgba(255,255,255,.5);transition:color .5s}
.sec--sombre .rl__code{font-family:var(--f-titre);font-size:clamp(26px,2.7vw,40px);line-height:1.15;letter-spacing:-.015em;color:var(--blanc);transition:color .5s,transform .7s cubic-bezier(.2,.7,.2,1)}
.sec--sombre .rl__dom{font-size:15px;color:rgba(255,255,255,.7);transition:color .5s}
.js .sec--sombre .rl:not(.on) .rl__code{color:rgba(255,255,255,.56)}
.rl.on::before{transform:scaleX(1)}
.rl.on .rl__n{color:#F0606A}
.rl.on .rl__code{transform:translateX(10px)}
.rl.on .rl__dom{color:rgba(255,255,255,.88)}
html:not(.js) .ref{display:block}
html:not(.js) .ref__visuel{display:none}
@media (max-width:900px){.ref{display:block}.ref__visuel{display:none}}

/* Stratégie et organisation : huit lignes en grand qui passent à l'encre au défilement */
.strat{list-style:none;margin:0;padding:0;border-top:1px solid var(--filet)}
.st{display:grid;grid-template-columns:64px minmax(0,1fr);align-items:baseline;gap:16px;padding:clamp(16px,2vw,26px) 0;border-bottom:1px solid var(--filet)}
.st__n{font-size:12.5px;font-weight:600;letter-spacing:.12em;color:var(--rouge)}
.st__t{font-family:var(--f-titre);font-size:clamp(26px,3.4vw,50px);line-height:1.12;letter-spacing:-.015em;color:var(--encre);transition:color .6s,transform .7s cubic-bezier(.2,.7,.2,1)}
.js .st:not(.on) .st__t{color:var(--gris-encre)}
@media (hover:hover){.st:hover .st__t{transform:translateX(12px)}}
@media (max-width:600px){.st{grid-template-columns:40px minmax(0,1fr);gap:10px}}

.centre{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(40px,6vw,96px);align-items:center}
.centre--inverse .centre__media{order:-1}
.centre__media{position:relative;margin:0}
.centre__media img{width:100%;height:clamp(360px,42vw,540px);object-fit:cover;position:relative;z-index:1}
.centre__media::before{content:"";position:absolute;right:-18px;top:-18px;width:62%;height:62%;background:var(--filet)}
.centre--inverse .centre__media::before{right:auto;left:-18px}
.centre__txt p{color:var(--texte-2)}
@media (max-width:900px){
  .centre{grid-template-columns:1fr}
  .centre--inverse .centre__media{order:0}
  .centre__media{margin:18px 18px 0 0}
  .centre--inverse .centre__media{margin:18px 0 0 18px}
  .centre__media img{height:clamp(280px,68vw,420px)}
}



/* --------------------------------------------------------------- à propos
   Les valeurs en très grand, au trait ; l'encre les remplit de gauche à droite à l'arrivée (app.js) */
.vg-liste{list-style:none;margin:0;padding:0;border-top:1px solid var(--filet)}
.vg{display:grid;grid-template-columns:auto minmax(0,340px);justify-content:space-between;align-items:end;gap:12px 48px;padding:clamp(22px,3vw,40px) 0;border-bottom:1px solid var(--filet)}
.vg__mot{padding-right:.14em;font-size:clamp(34px,6vw,96px);line-height:1;letter-spacing:-.03em;color:var(--encre)}
.vg__txt{margin:0;color:var(--texte-2);font-size:16.5px}
.js .vg__mot{color:transparent;-webkit-text-stroke:1px var(--encre);background:linear-gradient(90deg,var(--encre) 50%,transparent 50%) 100% 0 / 200% 100% no-repeat;-webkit-background-clip:text;background-clip:text;transition:background-position 1.6s cubic-bezier(.6,.1,.2,1)}
.js .vg.on .vg__mot{background-position:0 0}
@media (max-width:1020px){.vg{grid-template-columns:1fr}}

/* la mission en très grand : les mots passent du gris à l'encre au fil du défilement */
.manifeste{margin-bottom:clamp(72px,9vw,120px)}
.manifeste__titre{display:flex;align-items:center;gap:14px;margin:0 0 30px;font-family:var(--f-texte);font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--texte-2)}
.manifeste__titre::before{content:"";width:28px;height:2px;background:var(--rouge);flex:0 0 auto}
.manifeste__texte{max-width:22ch;margin:0;font-family:var(--f-titre);font-size:clamp(30px,4.6vw,64px);line-height:1.16;letter-spacing:-.015em;color:var(--encre)}
.manifeste__texte .m{transition:color .5s ease}
.js .manifeste__texte .m{color:var(--gris-encre)}
.js .manifeste__texte .m.on{color:var(--encre)}


/* les 125 références en un seul mur de noms ; un secteur choisi passe ses noms au rouge */
.mur__filtres{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:clamp(28px,3vw,44px)}
.mur__filtres button{display:inline-flex;align-items:baseline;gap:10px;padding:11px 18px;border:1px solid var(--filet);background:transparent;color:var(--encre);font-size:15px;font-weight:500;cursor:pointer;transition:background .3s,color .3s,border-color .3s}
.mur__filtres button span{font-size:12.5px;color:var(--texte-2);transition:color .3s}
.mur__filtres button:hover{border-color:var(--encre)}
.mur__filtres button[aria-pressed="true"]{background:var(--encre);border-color:var(--encre);color:var(--blanc)}
.mur__filtres button[aria-pressed="true"] span{color:rgba(255,255,255,.7)}
.mur__noms{list-style:none;margin:0;padding:clamp(24px,3vw,36px) 0 0;border-top:1px solid var(--filet);display:flex;flex-wrap:wrap;align-items:center;row-gap:6px;font-family:var(--f-titre);font-size:clamp(21px,2.3vw,32px);line-height:1.35;letter-spacing:-.01em;color:var(--encre)}
.mur__noms li{display:inline-flex;align-items:center;transition:color .5s calc(var(--i) * 3ms)}
.mur__noms li::after{content:"";width:5px;height:5px;margin:0 .6em;background:var(--gris)}
.mur__noms li:last-child::after{display:none}
.mur.filtre .mur__noms li{color:var(--gris-encre)}
.mur.filtre .mur__noms li.dans{color:var(--rouge)}
.mur.filtre .mur__noms li.dans::after{background:var(--rouge)}

/* ------------------------------------------------------------------ contact */
.contact{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(40px,6vw,88px);align-items:start}
.coord{list-style:none;margin:0;padding:0}
.coord li{display:grid;grid-template-columns:150px minmax(0,1fr);gap:6px 24px;padding:22px 0;border-top:1px solid var(--filet)}
.coord li:last-child{border-bottom:1px solid var(--filet)}
.coord__l{font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--texte-2);padding-top:5px}
.coord__v{font-family:var(--f-titre);font-size:clamp(21px,1.8vw,25px);line-height:1.35;color:var(--encre)}
.coord__v a:hover{color:var(--rouge)}
.coord__v--grand{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;font-size:clamp(28px,3.2vw,46px);line-height:1.2;letter-spacing:-.015em}
.coord__v--grand .copier{font-family:var(--f-texte);letter-spacing:0}
.contact__btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.carte-devis{background:var(--encre);color:rgba(255,255,255,.8);padding:clamp(32px,4vw,48px)}
.carte-devis h2{color:var(--blanc);font-size:clamp(30px,3vw,40px);margin-bottom:16px}
.carte-devis p{margin:0 0 28px}
.carte-devis ol{margin:0 0 30px;padding:0;list-style:none;counter-reset:e}
.carte-devis li{counter-increment:e;display:flex;gap:14px;padding:10px 0;border-top:1px solid var(--filet-sombre);font-size:15.5px}
.carte-devis li::before{content:counter(e);font-family:var(--f-titre);color:var(--blanc);min-width:16px}
.plan{margin-top:clamp(56px,7vw,88px);border:1px solid var(--filet);background:var(--blanc)}
.plan iframe{display:block;width:100%;height:440px;border:0;filter:grayscale(1) contrast(1.05)}
@media (max-width:900px){
  .contact{grid-template-columns:1fr}
  .coord li{grid-template-columns:1fr;gap:4px}
  .plan iframe{height:340px}
}

/* ---------------------------------------------------------------- bande CTA */
.cta{position:relative;background:var(--encre);color:rgba(255,255,255,.8);padding:clamp(72px,9vw,120px) 0;overflow:hidden}
.cta__in{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:40px clamp(40px,6vw,96px);align-items:center}
.cta__fenetre{position:relative;aspect-ratio:1800 / 1236}
.cta__masque{position:absolute;inset:0;overflow:hidden;-webkit-mask:url("assets/logo/logo-eagle-symbole.svg") 0 0 / 100% 100% no-repeat;mask:url("assets/logo/logo-eagle-symbole.svg") 0 0 / 100% 100% no-repeat}
.cta__photo{width:100%;height:100%;object-fit:cover;transform:scale(var(--z,1))}
.cta__contour{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.cta h2{color:var(--blanc);max-width:14ch;font-size:clamp(38px,5vw,72px);line-height:1.05;letter-spacing:-.02em}
.cta p{margin:20px 0 0;max-width:520px;color:rgba(255,255,255,.76)}
.cta__btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}
@media (max-width:860px){
  .cta__in{grid-template-columns:1fr}
  .cta__fenetre{order:-1;width:min(100%,560px)}
}

/* -------------------------------------------------------------------- pied */
.pied{background:#101216;color:rgba(255,255,255,.7);padding:clamp(64px,7vw,88px) 0 28px;font-size:15.5px}
.pied__haut{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr) minmax(0,1fr);gap:40px 56px;padding-bottom:48px;border-bottom:1px solid var(--filet-sombre)}
.pied__logo img{height:52px;width:auto;max-width:none}
.pied__desc{margin:22px 0 0;max-width:340px;color:rgba(255,255,255,.66)}
.pied h2{font-family:var(--f-texte);font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5);margin:0 0 18px}
.pied ul{list-style:none;margin:0;padding:0}
.pied li{padding:5px 0}
.pied a{color:rgba(255,255,255,.82);text-decoration:none}
.pied a:hover{color:var(--blanc)}
.pied address{font-style:normal;line-height:1.7}
.pied__bas{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;padding-top:26px;font-size:13.5px;color:rgba(255,255,255,.5)}
.pied__credit a{color:rgba(255,255,255,.62);text-transform:uppercase;text-decoration:none;letter-spacing:.12em;font-size:12px}
.pied__credit a:hover{color:var(--blanc);text-decoration:none}
@media (max-width:900px){.pied__haut{grid-template-columns:1fr 1fr}.pied__marque{grid-column:1 / -1}}
@media (max-width:560px){.pied__haut{grid-template-columns:1fr}}

/* ------------------------------------------------------------ modale devis */
.rsv{position:fixed;inset:0;z-index:140;display:flex;align-items:flex-start;justify-content:center;padding:24px;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;background:rgba(14,16,20,.62);opacity:0;visibility:hidden;transition:opacity .25s,visibility 0s linear .25s}
.rsv.is-open{opacity:1;visibility:visible;transition:opacity .25s,visibility 0s}
.rsv__card{position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;width:min(680px,calc(100vw - 40px));margin:auto;height:min(660px,calc(100vh - 48px));height:min(660px,calc(100dvh - 48px));max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);overflow:hidden;background:var(--blanc);color:var(--texte);box-shadow:0 30px 80px rgba(0,0,0,.35)}
.rsv__tete{padding:28px 32px 20px;border-bottom:1px solid var(--filet)}
.rsv__aigle{width:54px;height:auto;margin-bottom:14px}
.rsv__pas.is-on{animation:pas .5s cubic-bezier(.2,.7,.2,1) both}
@keyframes pas{from{transform:translateX(16px)}to{transform:none}}
.rsv__titre{font-family:var(--f-titre);font-size:30px;line-height:1.15;color:var(--encre);margin:0;padding-right:48px}
.rsv__etape{margin:10px 0 0;font-size:14px;color:var(--texte-2)}
.rsv__barre{height:2px;margin-top:16px;background:var(--filet)}
.rsv__barre span{display:block;height:100%;width:20%;background:var(--rouge);transition:width .35s ease}
.rsv__fermer{position:absolute;top:18px;right:18px;width:44px;height:44px;border:0;background:none;cursor:pointer;color:var(--encre)}
.rsv__fermer::before,.rsv__fermer::after{content:"";position:absolute;left:12px;right:12px;top:21px;height:1.5px;background:currentColor}
.rsv__fermer::before{transform:rotate(45deg)}
.rsv__fermer::after{transform:rotate(-45deg)}
.rsv__body{display:flex;flex-direction:column;overflow-y:auto;min-height:0;-webkit-overflow-scrolling:touch;padding:26px 32px 28px}
.rsv__body > *{flex-shrink:0}
.rsv__pas{display:none}
.rsv__pas.is-on{display:block}
.rsv__q{font-family:var(--f-titre);font-size:23px;line-height:1.25;color:var(--encre);margin:0 0 6px}
.rsv__aide{margin:0 0 18px;font-size:15px;color:var(--texte-2)}
.rsv__groupe + .rsv__groupe{margin-top:26px}
.puces{display:flex;flex-wrap:wrap;gap:10px}
.puce{display:inline-flex;align-items:center;min-height:46px;padding:10px 16px;border:1px solid var(--filet);background:var(--blanc);color:var(--texte);font-size:15.5px;line-height:1.3;text-align:left;cursor:pointer;transition:border-color .2s,background .2s,color .2s}
.puce:hover{border-color:var(--encre)}
.puce[aria-pressed="true"]{background:var(--encre);border-color:var(--encre);color:var(--blanc)}
.rsv__erreur{min-height:22px;margin:14px 0 0;font-size:14px;color:var(--rouge-fonce)}
.rsv__champ{display:block;width:100%;min-height:50px;padding:0 16px;border:1px solid var(--filet);border-radius:0;background:var(--papier);color:var(--encre);font:inherit;font-size:16.5px;-webkit-appearance:none;appearance:none;transition:border-color .2s,background .2s}
.rsv__champ::placeholder{color:var(--texte-2);opacity:.85}
.rsv__champ:focus{outline:none;border-color:var(--encre);background:var(--blanc)}
label.rsv__q{display:block;margin-bottom:12px}
/* l'e-mail prêt à partir, montré tel qu'il sera envoyé */
.rsv__apercu{margin:0 0 20px;border:1px solid var(--filet);background:var(--papier)}
.rsv__entete{display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;margin:0;padding:11px 18px;border-bottom:1px solid var(--filet);font-size:15px;color:var(--encre)}
.rsv__entete span{padding-top:2px;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--texte-2)}
.rsv__entete b{font-weight:500;overflow-wrap:anywhere}
.rsv__message{margin:0;padding:16px 18px 18px;white-space:pre-wrap;font-size:15px;line-height:1.6;color:var(--texte)}
.rsv__joindre{display:grid;gap:10px}
.rsv__joindre .btn{width:100%;justify-content:space-between}
.rsv__note{margin:16px 0 0;font-size:14px;color:var(--texte-2)}
.rsv__pied{display:flex;justify-content:space-between;gap:12px;padding:18px 32px;border-top:1px solid var(--filet);background:var(--papier)}
.rsv__pied .btn{min-height:48px;flex:0 0 auto}
.rsv__pied .btn[hidden]{display:none}
.rsv__pied [data-suivant],.rsv__pied .rsv__mail{margin-left:auto}
@media (max-width:1020px){
  .rsv__card{height:min(660px,calc(100vh - 32px));height:min(660px,calc(100dvh - 32px));max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px)}
}
@media (max-width:680px){
  .rsv{padding:0}
  .rsv__card{width:100vw;margin:0;height:100vh;max-height:100vh;height:100dvh;max-height:100dvh}
  .rsv__tete{padding:22px 20px 16px}
  .rsv__titre{font-size:26px}
  .rsv__body{padding:22px 20px 24px}
  .rsv__pied{padding:14px 20px}
}

.pied__bas p{margin:0}

/* ---------------------------------------------------------------- mouvement
   Une animation déplace ce qui est déjà visible, elle ne révèle jamais un texte : tout passe
   par transform. Seuls l'aigle, les filets et les photos de contenu se découvrent, et ces états
   de départ n'existent que sous .js, posé par app.js quand IntersectionObserver est là. */
@keyframes monte{from{transform:translateY(18px)}to{transform:none}}
@keyframes vol{from{clip-path:inset(0 100% 0 0);transform:translateX(-22px)}to{clip-path:inset(0 0 0 0);transform:none}}
@keyframes trace{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes pose{from{transform:scale(1.06)}to{transform:none}}

.vol__trait{animation:trace 1.2s cubic-bezier(.6,.1,.2,1) 1.2s both}
.vol h1{animation:monte 1.1s cubic-bezier(.2,.7,.2,1) .25s both}
.vol__sous{animation:monte 1.1s cubic-bezier(.2,.7,.2,1) .4s both}
.vol__cta{animation:monte 1.1s cubic-bezier(.2,.7,.2,1) .55s both}
.phero__media img{animation:pose 16s cubic-bezier(.2,.7,.2,1) both}
.phero__trait{animation:trace 1.2s cubic-bezier(.6,.1,.2,1) .35s both}
.phero h1,.ahero h1{animation:monte 1s cubic-bezier(.2,.7,.2,1) .1s both}
.phero p,.ahero__meta{animation:monte 1s cubic-bezier(.2,.7,.2,1) .24s both}
.rsv.is-open .rsv__aigle{animation:vol 1.4s cubic-bezier(.6,.1,.2,1) .1s both}

/* filet rouge qui se trace sous les titres de section */
.sec__tete h2::after,.centre__txt h2::after{content:"";display:block;width:56px;height:2px;margin-top:22px;background:var(--rouge);transform-origin:left;transition:transform 1.2s cubic-bezier(.6,.1,.2,1) .2s}
.js .sec__tete:not(.vu) h2::after,.js .centre__txt:not(.vu) h2::after{transform:scaleX(0)}

/* blocs qui montent en cascade (le délai de chacun est posé par app.js) */
.nl,.actu,.coord li,.chiffre,.actu-ligne > :not(.fond),.article p,.carte-devis{transition-property:transform,background,color,filter,opacity,border-color;transition-duration:1.1s,.25s,.25s,.3s,.3s,.25s;transition-timing-function:cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s),0s,0s,0s,0s,0s}
.js .normes-liste:not(.vu) .nl,.js .actus:not(.vu) .actu,.js .coord:not(.vu) li,.js .chiffres:not(.vu) .chiffre,.js .actu-ligne:not(.vu) > :not(.fond),.js .article:not(.vu) p,.js .contact:not(.vu) .carte-devis{transform:translateY(32px)}

/* photos de contenu : le clip est sur l'<img>, l'élément observé reste entier */
.revele img{transition:clip-path 1.5s cubic-bezier(.7,0,.2,1),transform 2.2s cubic-bezier(.2,.7,.2,1)}
.js .revele:not(.vu) img{clip-path:inset(0 0 0 100%);transform:scale(1.14)}
.revele::before{transition:transform 1.4s cubic-bezier(.6,.1,.2,1) .5s}
.js .revele:not(.vu)::before{transform:scale(.6)}
.centre__media::before{transform-origin:top right}
.centre--inverse .centre__media::before{transform-origin:top left}

/* l'aigle de la bande finale se dessine de la queue à la tête à l'arrivée (clip sur l'enfant) */
.cta__masque,.cta__contour{transition:clip-path 1.9s cubic-bezier(.6,.1,.2,1)}
.js .cta:not(.vu) .cta__masque,.js .cta:not(.vu) .cta__contour{clip-path:inset(0 100% 0 0)}

/* survols */
@media (hover:hover){
  .actu{position:relative}
  .actu::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--rouge);transform:scaleX(0);transform-origin:right;transition:transform .7s cubic-bezier(.7,0,.2,1)}
  .actu:hover::before{transform:scaleX(1);transform-origin:left}
  .actu:hover .fl svg,.actu-ligne:hover .fl svg{animation:boucle .6s cubic-bezier(.6,.1,.2,1)}
  .plan iframe{transition:filter .6s}
  .plan:hover iframe{filter:none}
}

/* passage d'une page à l'autre : un panneau graphite monte avec l'aigle, puis se lève sur la
   page suivante. Hors repos, le panneau est sous l'écran et ne couvre jamais rien. */
.passage{position:fixed;inset:0;z-index:400;display:grid;place-items:center;background:var(--encre);transform:translateY(101%);visibility:hidden;transition:transform .6s cubic-bezier(.7,0,.2,1),visibility 0s .6s;pointer-events:none}
.passage img{width:clamp(120px,14vw,200px);height:auto;clip-path:inset(0 100% 0 0);transition:clip-path .9s cubic-bezier(.6,.1,.2,1) .15s}
.passage.go{transform:none;visibility:visible;transition:transform .6s cubic-bezier(.7,0,.2,1),visibility 0s}
.passage.go img{clip-path:inset(0 0 0 0)}
.passage-arrive body::after{content:"";position:fixed;inset:0;z-index:400;pointer-events:none;background:var(--encre) url("assets/logo/logo-eagle-symbole.svg") no-repeat center/clamp(120px,14vw,200px) auto;animation:leve .8s cubic-bezier(.7,0,.2,1) .12s forwards}
@keyframes leve{to{transform:translateY(-101%)}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition-duration:.01ms !important;transition-delay:0s !important}
  .vol__video{display:none}
  .passage-arrive body::after{display:none}
  .defile__rang{flex-wrap:wrap;justify-content:center;-webkit-mask-image:none;mask-image:none}
  .defile__piste{flex:1 1 100%;flex-wrap:wrap;justify-content:center}
  .defile__piste[aria-hidden]{display:none}
}