@charset "UTF-8";
/* ==========================================================================
   LANCER-CONSTRUIRE-CRÉER (LCC) — Feuille de style
   Palette dérivée du logo : encre anthracite, bronze doré, ivoire,
   accents vert / jaune / bleu du drapeau gabonais.
   ========================================================================== */

/* ------------------------------------------------------------------ TOKENS */
:root{
  /* encre */
  --ink-950:#070A0E;
  --ink-900:#0B0E12;
  --ink-800:#11161C;
  --ink-700:#1A212A;
  --ink-600:#28313C;
  --ink-500:#44505F;
  --ink-450:#5F6C7B;   /* texte atténué sur fond CLAIR  — 5,05:1 sur --paper */
  --ink-400:#6A7685;   /* réservé aux traits et aux fonds décoratifs */
  --ink-350:#8A94A1;   /* texte atténué sur fond SOMBRE — 6,29:1 sur --ink-900 */
  --ink-300:#95A0AD;

  /* papier */
  --paper:#FAF8F4;
  --paper-2:#F3EFE8;
  --paper-3:#EBE5DA;
  --line:#E2DBCD;
  --line-2:#D3C9B6;
  --line-3:#8C8372;    /* contour perceptible des champs — 3,53:1 sur --paper */

  /* bronze */
  --gold-900:#6E4A15;
  --gold-800:#8A5F1E;
  --gold-700:#A9762A;
  --gold-600:#B4802F;
  --gold:#C08B36;
  --gold-400:#D8A857;
  --gold-300:#E7C689;
  --gold-100:#F5E9D2;

  /* drapeau */
  --ga-green:#009E60;
  --ga-yellow:#FCD116;
  --ga-blue:#3A75C4;

  /* états */
  --ok:#0E6B43;
  --ok-bg:#EAF7F0;
  --ok-line:#A8DCC2;
  --ko:#9B2D20;
  --ko-bg:#FDF3F2;
  --ko-line:#F0C4BF;
  --wa:#1FA855;

  /* rôles */
  --bg:var(--paper);
  --fg:var(--ink-900);
  --muted:var(--ink-500);
  --accent:var(--gold-700);

  /* typo */
  --ff-display:"Sora","Segoe UI",system-ui,-apple-system,"Helvetica Neue",sans-serif;
  --ff-body:"Inter","Segoe UI",system-ui,-apple-system,"Helvetica Neue",sans-serif;

  /* rythme */
  --wrap:1240px;
  --gut:clamp(1.25rem,4vw,2.5rem);
  --sec:clamp(4.5rem,9vw,8.5rem);
  /* Formes : le béton, l'acier et le bois de coffrage ont des arêtes.
     Des rayons de 12 et 20 px sont le vocabulaire d'une application. */
  --r-sm:2px;
  --r:3px;
  --r-lg:4px;

  /* Mesures de ligne, en em : l'unité ch vaut l'avance du « 0 », soit
     environ 1,25 caractère dans cette fonte — chaque plafond en ch était
     de 25 à 33 % plus large que l'intention. */
  --m-narrow:30em;
  --m-lead:34em;
  --m-text:38em;

  /* Courbes : une par intention, au lieu d'une expo-out pour tout. */
  --e-out:cubic-bezier(.22,1,.36,1);    /* arrivée, révélation */
  --e-io :cubic-bezier(.65,.05,.36,1);  /* trajet complet : tracé, jauge */
  --e-ui :cubic-bezier(.32,.72,0,1);    /* changement d'état : net */
  --e-in :cubic-bezier(.5,0,.75,0);     /* sortie, disparition */

  /* Durées : quatre paliers, rien entre les deux. */
  --dur-1:.14s;   /* pression, bascule */
  --dur-2:.2s;    /* survol, focus, couleur */
  --dur-3:.34s;   /* panneau, tiroir, visionneuse */
  --dur-4:.62s;   /* révélation, arrivée */

  --ease:var(--e-out);      /* alias conservés pour les règles existantes */
  --ease-io:var(--e-io);

  /* ombres */
  --sh-1:0 1px 2px rgba(11,14,18,.05),0 2px 8px rgba(11,14,18,.04);
  --sh-2:0 2px 6px rgba(11,14,18,.06),0 14px 34px -12px rgba(11,14,18,.16);
  --sh-3:0 4px 10px rgba(11,14,18,.08),0 30px 70px -20px rgba(11,14,18,.28);
  --sh-gold:0 14px 40px -14px rgba(192,139,54,.55);
}

/* ------------------------------------------------------------------- RESET */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{
  -webkit-text-size-adjust:100%;scroll-behavior:smooth;
  scroll-padding-top:100px;
  scrollbar-gutter:stable;   /* evite le saut de mise en page au verrouillage */
}
body{
  font-family:var(--ff-body);
  font-size:clamp(.975rem,.35vw + .9rem,1.0625rem);
  line-height:1.68;
  color:var(--fg);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.is-locked{overflow:hidden}
img,svg,video{display:block;max-width:100%;height:auto}
img{background:var(--paper-3)}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
::selection{background:var(--gold-300);color:var(--ink-900)}
:focus-visible{outline:2px solid var(--gold-700);outline-offset:3px;border-radius:4px}

/* Visible des seuls lecteurs d'écran : titres de structure et annonces. */
.sr-only{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* Titre de niveau 2 au-dessus des formulaires : la hiérarchie sautait de h1 à h3. */
.form__h2{
  font-size:clamp(1.45rem,2.4vw,1.95rem);margin-bottom:1.2rem;
}

.skip{
  position:fixed;top:0;left:50%;z-index:200;
  background:var(--ink-900);color:var(--paper);padding:.7rem 1.2rem;border-radius:0 0 10px 10px;
  transform:translate(-50%,-110%);
  transition:transform .3s var(--ease);
}
.skip:focus{transform:translate(-50%,0)}

/* ---------------------------------------------------------------- TYPO BASE */
h1,h2,h3,h4,h5{
  font-family:var(--ff-display);
  font-weight:700;
  line-height:1.07;
  letter-spacing:-.024em;
  text-wrap:balance;
}
h1{font-size:clamp(2.35rem,6vw,4.4rem)}
h2{font-size:clamp(1.9rem,4vw,3.15rem)}
h3{font-size:clamp(1.15rem,1.5vw,1.4rem);line-height:1.2;letter-spacing:-.015em}
h4{font-size:1.03rem;line-height:1.3;letter-spacing:-.01em}
p{text-wrap:pretty}
strong{font-weight:600}
.lead{
  font-size:clamp(1.05rem,.5vw + .95rem,1.22rem);
  line-height:1.62;color:var(--ink-500);
}
.tnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* ----------------------------------------------------------------- LAYOUT */
.wrap{width:min(100% - var(--gut)*2,var(--wrap));margin-inline:auto}
.sec{padding-block:var(--sec);position:relative}
.sec--tight{padding-block:clamp(3rem,6vw,5rem)}
.sec--paper2{background:var(--paper-2)}
.sec--ink{background:var(--ink-900);color:var(--paper)}
.sec--ink .lead{color:var(--ink-300)}
.grid{display:grid;gap:clamp(1rem,2vw,1.5rem)}

/* Les colonnes « 1fr » refusent par défaut de descendre sous la largeur
   min-content de leur contenu (images, identifiants non coupables) : elles
   débordent alors du conteneur. min-width:0 lève cette contrainte.        */
.grid>*,.split>*,.fwrap>*,.svcs>*,.team>*,.fleet>*,.kit>*,.refs>*,.gal>*,
.vals>*,.stats>*,.legal>*,.pstep>*,.srow>*,.aside>*,.form__grid>*,
.ftr__top>*,.cta__in>*,.hero__in>*,.shead--split>*,.plist>*,.proc>*{min-width:0}

/* identifiants administratifs et bancaires : coupure autorisée */
.legal span,.banks li,.ftr__legal li,.cinfo span{overflow-wrap:anywhere}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.hr{height:1px;background:var(--line);border:0}

/* grain + trame : textures discrètes des blocs sombres */
.sec--ink::before,.cta::before,.hero::before,.banner::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

/* --------------------------------------------------------------- EYEBROWS */
.eyebrow{
  display:inline-flex;align-items:center;gap:.65rem;
  font-family:var(--ff-display);font-size:.735rem;font-weight:600;
  letter-spacing:.19em;text-transform:uppercase;color:var(--gold-800);
  margin-bottom:1.1rem;
}
.eyebrow i{width:34px;height:1px;background:linear-gradient(90deg,var(--gold),transparent);display:block}
.eyebrow--light{color:var(--gold-400)}
.eyebrow--light i{background:linear-gradient(90deg,var(--gold-400),transparent)}

.shead{max-width:62ch;margin-bottom:clamp(2.2rem,4vw,3.4rem)}
.shead--center{margin-inline:auto;text-align:center}
.shead--center .eyebrow i{display:none}
.shead p.lead{margin-top:1.1rem}
.shead--split{
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.5rem,4vw,4rem);
  align-items:end;max-width:none;
}
.shead--split p.lead{margin-top:0;padding-bottom:.35rem}

/* ---------------------------------------------------------------- BUTTONS */
.btn{
  --bg-b:var(--ink-900);--fg-b:var(--paper);--bd-b:var(--ink-900);
  position:relative;display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--ff-display);font-size:.9rem;font-weight:600;letter-spacing:-.008em;
  padding:.92rem 1.5rem;border-radius:var(--r);overflow:hidden;isolation:isolate;
  background:var(--bg-b);color:var(--fg-b);border:1px solid var(--bd-b);
  transition:color var(--dur-2) var(--e-ui),border-color var(--dur-2) var(--e-ui),
             box-shadow var(--dur-2) var(--e-ui),transform var(--dur-1) var(--e-ui);
}
.btn .ic{transition:transform var(--dur-2) var(--e-ui)}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:linear-gradient(105deg,var(--gold-700),var(--gold-400));
  transform:translateY(102%);transition:transform var(--dur-3) var(--e-out);
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--sh-gold)}
.btn:hover::before{transform:translateY(0)}
.btn:hover{color:var(--ink-900);border-color:transparent}
.btn:hover .ic{transform:translateX(4px)}
.btn:active{transform:translateY(0)}
.btn--sm{padding:.7rem 1.15rem;font-size:.82rem}
.btn--lg{padding:1.08rem 1.9rem;font-size:.96rem}
.btn--gold{--bg-b:var(--gold);--bd-b:var(--gold);--fg-b:var(--ink-900)}
.btn--gold::before{background:linear-gradient(105deg,var(--gold-300),#fff)}
.btn--ghost{--bg-b:transparent;--bd-b:rgba(250,248,244,.28);--fg-b:var(--paper)}
.btn--ghost::before{background:linear-gradient(105deg,var(--paper),#fff)}
.btn--line{--bg-b:transparent;--bd-b:var(--line-2);--fg-b:var(--ink-900)}
.btn--line::before{background:linear-gradient(105deg,var(--ink-800),var(--ink-600))}
.btn--line:hover{color:var(--paper)}

/* ------------------------------------------------- RETOUR AU CONTACT
   Le site ne comportait qu'une seule règle :active, et aucun retour
   tactile : sur mobile, appuyer sur un filtre, une vignette ou une
   question ne produisait rien, tout le retour étant au survol. */
html{-webkit-tap-highlight-color:transparent}
.btn,.alink,.filters button,.qa__q,.shot,.totop,.wa,.burger,.drawer__close,
.drawer__nav a,.lbox__close,.lbox__nav,.ftr__social a,.nav a,.ftr__links a{touch-action:manipulation}

.btn:active{transform:translate3d(0,0,0) scale(.975);transition-duration:var(--dur-1)}
.filters button:active,.qa__q:active,.burger:active,.drawer__close:active,
.lbox__close:active,.lbox__nav:active,.totop:active,.ftr__social a:active,
.shot:active{transform:scale(.985);transition-duration:var(--dur-1)}
.shot:active img{transform:scale(1.02)}
.alink:active{transform:translate3d(1px,0,0)}
.drawer__nav a:active{transform:translate3d(4px,0,0);transition-duration:var(--dur-1)}

/* sans survol, l'état pressé porte tout le contenu révélé */
@media (hover:none){
  .shot:active .shot__cap{transform:none}
  .shot:active .shot__cap span{opacity:1;transform:none}
  .shot:active .shot__zoom{opacity:1;transform:none}
}

/* lien fléché */
.alink{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--ff-display);font-size:.86rem;font-weight:600;
  color:var(--gold-800);padding-bottom:2px;
  background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;
  transition:background-size .45s var(--ease),color .3s var(--ease);
}
.alink:hover{background-size:100% 1px}
.alink .ic{transition:transform var(--dur-2) var(--e-ui)}
.alink:hover .ic{transform:translateX(4px)}

/* ---------------------------------------------------------------- LOADER */
.loader{
  position:fixed;inset:0;z-index:300;display:grid;place-items:center;
  overflow:hidden;
  background:var(--ink-950);
  transition:opacity var(--dur-4) var(--e-in),visibility var(--dur-4);
}
.loader::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(60% 60% at 50% 45%,rgba(192,139,54,.14),transparent 70%);
}
.loader__in{
  position:relative;text-align:center;padding:2rem;
  width:100%;max-width:420px;margin-inline:auto;
}
.loader__logo{
  width:clamp(180px,26vw,260px);height:auto;
  margin:0 auto 1.7rem;display:block;
  background:var(--paper);border-radius:var(--r);padding:.7rem .9rem;
  box-shadow:0 22px 50px -24px rgba(0,0,0,.8);
  animation:lgIn 1s var(--ease) both;
}
.loader__bar{
  width:min(260px,60vw);height:2px;margin:0 auto;
  background:rgba(250,248,244,.14);overflow:hidden;border-radius:2px;
}
.loader__bar i{
  display:block;height:100%;width:0;border-radius:2px;
  background:linear-gradient(90deg,var(--gold-800),var(--gold-300));
  animation:lgBar .9s var(--e-io) forwards;
}
.loader__txt{
  margin-top:1.2rem;font-family:var(--ff-display);font-size:.72rem;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;color:rgba(250,248,244,.5);
  animation:lgIn 1s .25s var(--ease) both;
  max-width:100%;overflow-wrap:break-word;
}
/* le rideau se lève après que la jauge a atteint 100 % (950 ms) */
.loader.is-done{opacity:0;visibility:hidden}
.loader.is-done .loader__in{
  transform:translate3d(0,-12px,0);opacity:0;
  transition:transform var(--dur-4) var(--e-in),opacity .3s linear;
}
@keyframes lgIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes lgBar{0%{width:0}55%{width:72%}100%{width:100%}}

/* ------------------------------------------------------ SCROLL PROGRESS */
.progress{
  position:fixed;top:0;left:0;z-index:120;height:2px;width:100%;
  transform-origin:0 50%;transform:scaleX(var(--p,0));
  background:linear-gradient(90deg,var(--gold-800),var(--gold-300),var(--ga-green));
}

/* ---------------------------------------------------------------- HEADER */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:110;
  transition:transform .5s var(--ease),background-color .4s var(--ease),
             box-shadow .4s var(--ease),border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.hdr__bar{
  display:flex;align-items:center;gap:clamp(1rem,2.5vw,2.2rem);
  min-height:84px;
}
.hdr.is-stuck{
  background:rgba(250,248,244,.82);
  backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom-color:var(--line);
  box-shadow:0 8px 30px -22px rgba(11,14,18,.5);
}
.hdr.is-hidden{transform:translateY(-102%)}

/* au sommet des pages (fond sombre), l'en-tête passe en inversion :
   le logo repose sur une plaque ivoire, la navigation s'éclaircit. */
.hdr:not(.is-stuck) .nav a{color:rgba(250,248,244,.76)}
.hdr:not(.is-stuck) .nav a:hover{color:var(--paper)}
.hdr:not(.is-stuck) .nav a[aria-current]{color:var(--gold-400)}
.hdr:not(.is-stuck) .nav a span::after{background:var(--gold-400)}
.hdr:not(.is-stuck) .tel{color:rgba(250,248,244,.86)}
.hdr:not(.is-stuck) .tel .ic{color:var(--gold-400)}
.hdr:not(.is-stuck) .tel:hover{color:var(--gold-300)}
.hdr:not(.is-stuck) .btn--sm{
  background:transparent;border-color:rgba(250,248,244,.3);color:var(--paper);
}
.hdr:not(.is-stuck) .btn--sm::before{background:linear-gradient(105deg,var(--gold-300),#fff)}
.hdr:not(.is-stuck) .btn--sm:hover{color:var(--ink-900);border-color:transparent}
.hdr:not(.is-stuck) .burger{border-color:rgba(250,248,244,.26)}
.hdr:not(.is-stuck) .burger i{background:var(--paper)}

.brand{
  flex:0 0 auto;display:flex;align-items:center;border-radius:var(--r);
  background:var(--paper);padding:.48rem .68rem;
  box-shadow:0 12px 30px -18px rgba(0,0,0,.65);
  transition:background-color .4s var(--ease),box-shadow .4s var(--ease);
}
.hdr.is-stuck .brand{box-shadow:none}
.brand img{
  width:clamp(150px,15vw,218px);height:auto;
  transform-origin:left center;
  transition:transform .45s var(--ease);
}
.hdr.is-stuck .brand img{transform:scale(.84)}
.brand:hover{transform:translateY(-1px)}

.nav{margin-inline:auto;min-width:0}
.nav ul{display:flex;align-items:center;gap:clamp(.15rem,1vw,.6rem)}
.nav a{
  position:relative;display:block;padding:.55rem .78rem;border-radius:8px;
  font-family:var(--ff-display);font-size:.855rem;font-weight:500;white-space:nowrap;
  color:var(--ink-600);transition:color .3s var(--ease);
}
.nav a span{position:relative;display:block}
.nav a span::after{
  content:"";position:absolute;left:0;right:0;bottom:-4px;height:1.5px;
  background:var(--gold-700);transform:scaleX(0);transform-origin:0 50%;
  transition:transform var(--dur-2) var(--e-ui);
}
.nav a:hover{color:var(--ink-900)}
.nav a:hover span::after{transform:scaleX(1)}
.nav a[aria-current]{color:var(--gold-800);font-weight:600}
.nav a[aria-current] span::after{transform:scaleX(1)}

.hdr__act{display:flex;align-items:center;gap:.7rem;flex:0 0 auto}
.tel{
  display:inline-flex;align-items:center;gap:.45rem;
  font-family:var(--ff-display);font-size:.84rem;font-weight:600;
  color:var(--ink-700);padding:.45rem .2rem;transition:color .3s var(--ease);
}
.tel .ic{color:var(--gold-700);transition:transform .4s var(--ease)}
.tel:hover{color:var(--gold-800)}
.tel:hover .ic{transform:rotate(-14deg) scale(1.08)}

.burger{display:none;width:44px;height:44px;border-radius:10px;border:1px solid var(--line);place-items:center;gap:5px;flex-direction:column}
.burger i{display:block;width:19px;height:1.6px;background:var(--ink-800);border-radius:2px;transition:transform .4s var(--ease),opacity .3s}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(6.6px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-6.6px) rotate(-45deg)}

/* ---------------------------------------------------------------- DRAWER */
.drawer{
  position:fixed;inset:0;z-index:115;background:var(--ink-900);color:var(--paper);
  display:flex;flex-direction:column;padding-block:1.1rem 2rem;
  opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility .45s;
}
.drawer[hidden]{display:flex}
.drawer.is-open{opacity:1;visibility:visible}
.drawer__head{display:flex;align-items:center;justify-content:space-between;min-height:70px}
.drawer__title{font-family:var(--ff-display);font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-300)}
.drawer__close{width:44px;height:44px;display:grid;place-items:center;border:1px solid rgba(250,248,244,.16);border-radius:10px}
.drawer__nav{flex:1;overflow-y:auto;padding-top:1.2rem}
.drawer.is-open .drawer__nav li{
  animation:drIn .55s var(--ease) both;
  animation-delay:calc(var(--i) * 55ms + 120ms);
}
@keyframes drIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.drawer__nav a{
  display:flex;align-items:center;gap:1rem;padding:1.05rem .2rem;
  border-bottom:1px solid rgba(250,248,244,.08);
  font-family:var(--ff-display);font-size:1.22rem;font-weight:600;letter-spacing:-.02em;
  transition:color .3s var(--ease),transform .3s var(--ease);
}
.drawer__nav a:hover,.drawer__nav a[aria-current]{color:var(--gold-400);transform:translateX(.6rem)}
.drawer__ic{color:var(--gold-700);flex:0 0 auto}
.drawer__arrow{margin-left:auto;opacity:.3}
.drawer__cta{color:var(--gold-400)}
.drawer__foot{padding-top:1.6rem;display:grid;gap:.6rem;font-size:.9rem;color:var(--ink-300)}
.drawer__foot a{display:inline-flex;align-items:center;gap:.55rem}
.drawer__foot a:hover{color:var(--paper)}
.drawer__foot .ic{color:var(--gold-700)}
.drawer__foot p{font-size:.84rem;line-height:1.55;color:var(--ink-350);margin-top:.35rem}

/* ------------------------------------------------------------------- HERO */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:min(92vh,860px);       /* repli Safari < 15.4, Firefox < 101 */
  min-height:min(92svh,860px);
  display:flex;align-items:center;
  padding-block:clamp(7.5rem,14vh,9.5rem) clamp(3rem,7vh,5rem);
  background:var(--ink-950);color:var(--paper);
}
.hero__bg{position:absolute;inset:-8% 0 0;z-index:-3}
.hero__bg img{
  width:100%;height:100%;object-fit:cover;
  /* 55 % de désaturation à 42 % de luminosité éteignait la matière :
     le ferraillage et le béton ne se lisaient plus. */
  object-position:50% 78%;
  filter:grayscale(.22) saturate(1.05) contrast(1.14) brightness(.66);
  background:var(--ink-950);
}
.hero__veil{
  position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(120% 80% at 8% 0%,rgba(192,139,54,.16),rgba(7,10,14,0) 55%),
    linear-gradient(100deg,rgba(7,10,14,.94) 0%,rgba(7,10,14,.88) 34%,
                           rgba(7,10,14,.62) 66%,rgba(7,10,14,.44) 100%),
    linear-gradient(0deg,var(--ink-950) 0%,rgba(7,10,14,.55) 18%,rgba(7,10,14,0) 46%);
}
/* La trame dorée synthétique a été supprimée : elle animait
   background-position — non composité, donc un repaint continu de deux
   dégradés pavés sur toute la surface du héros, même hors écran — et elle
   concurrençait la trame réelle du dessin d'élévation, juste à côté. */

.hero__in{
  position:relative;display:grid;grid-template-columns:1.12fr .88fr;
  gap:clamp(2rem,5vw,4.5rem);align-items:center;
}
.hero__h1{
  /* 80,8 px sur quatre lignes repoussaient les six domaines de compétence
     — le seul contenu factuel du héros — sous la ligne de flottaison. */
  font-size:clamp(2.3rem,4.6vw,3.85rem);font-weight:800;line-height:1.05;
  letter-spacing:-.028em;margin-block:.3rem 1.25rem;
}
.hero__h1 em,.cta__h2 em{
  font-style:normal;display:inline-block;color:var(--gold-300);
}
.hero__lead{
  font-size:clamp(1.02rem,.55vw + .92rem,1.22rem);line-height:1.66;
  color:rgba(250,248,244,.78);max-width:var(--m-lead);
}
.hero__act{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2.1rem}
.hero__tags{
  display:flex;flex-wrap:wrap;gap:.45rem;margin-top:2.4rem;
  padding-top:1.7rem;border-top:1px solid rgba(250,248,244,.12);
}
.hero__tags li{
  display:inline-flex;align-items:center;gap:.42rem;
  font-size:.775rem;font-weight:500;letter-spacing:.01em;
  color:rgba(250,248,244,.72);
  border:1px solid rgba(250,248,244,.15);border-radius:var(--r-sm);
  padding:.4rem .82rem;background:rgba(250,248,244,.04);
  transition:border-color .35s var(--ease),color .35s var(--ease),transform .35s var(--ease);
}
.hero__tags li:hover{border-color:var(--gold-700);color:var(--gold-300);transform:translateY(-2px)}
.hero__tags .ic{color:var(--gold-600,var(--gold))}

/* plan d'élévation qui se dessine */
.hero__plan{position:relative;justify-self:end;width:100%;max-width:520px}
.hero__plan svg{width:100%;height:auto}
/* Le tracé partait au chargement du document, donc son premier tiers se
   dessinait sous le rideau opaque puis derrière le flou de révélation.
   Il démarre maintenant quand la page est réellement visible. */
.hero__plan .dl{stroke-dasharray:1;stroke-dashoffset:1}
html:not(.js) .hero__plan .dl{stroke-dashoffset:0}
body.is-ready .hero__plan .dl{
  animation:draw 1.1s var(--e-io) both;
  animation-delay:calc(var(--d,0) * .58ms + 120ms);
}
@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}

/* Les libellés du plan étaient animés en SMIL (<animate>), que le bloc
   prefers-reduced-motion ne peut pas neutraliser : passage en CSS. */
.plan__lbl{opacity:.85}
.js .plan__lbl{opacity:0;transition:opacity var(--dur-4) var(--e-out) 1.2s}
body.is-ready .plan__lbl{opacity:.85}
.hero__plan .pulse{animation:pulse 3.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.25}50%{opacity:1}}
.hero__plan figcaption{
  margin-top:1rem;font-family:var(--ff-display);font-size:.7rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(250,248,244,.62);
  display:flex;align-items:center;gap:.6rem;
}
.hero__plan figcaption::before{content:"";width:26px;height:1px;background:var(--gold-800)}

.hero__scroll{
  position:absolute;left:var(--gut);bottom:2rem;z-index:2;
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--ff-display);font-size:.7rem;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(250,248,244,.62);
}
.hero__scroll .ic{animation:bob 2.4s var(--ease-io) infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* ------------------------------------------------- BANDEAU IMMATRICULATION
   Registre fileté, dans la même langue graphique que .stats et .legal :
   une plaque encre juste sous le héros, avec les cinq numéros que l'on
   recopie dans un dossier d'appel d'offres. */
.regbar{
  background:var(--ink-900);color:var(--paper);
  border-block:1px solid rgba(250,248,244,.1);
}
.regbar__in{display:flex;flex-wrap:wrap;padding-block:.95rem}
.regbar__it{
  flex:1 1 11rem;padding:.3rem 1.2rem;
  border-left:1px solid rgba(250,248,244,.1);
}
.regbar__it:first-child{border-left:0;padding-left:0}
.regbar__it b{
  display:block;font-family:var(--ff-display);font-size:.68rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-400);margin-bottom:.22rem;
}
.regbar__it span{
  font-size:.85rem;color:var(--ink-350);
  font-variant-numeric:tabular-nums;overflow-wrap:anywhere;
}
@media (max-width:720px){
  .regbar__in{padding-block:.7rem}
  .regbar__it{flex:1 1 100%;padding:.45rem 0;border-left:0;
    border-top:1px solid rgba(250,248,244,.08)}
  .regbar__it:first-child{border-top:0}
}

/* ----------------------------------------------------------------- STATS */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
.sec--ink .stats{background:rgba(250,248,244,.12)}
.stat{
  background:var(--paper);padding:clamp(1.5rem,3vw,2.3rem);
  display:flex;flex-direction:column;gap:.35rem;position:relative;overflow:hidden;
  transition:background-color var(--dur-2) var(--e-ui);
}
.sec--ink .stat{background:var(--ink-900)}
.stat::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,var(--gold-700),var(--gold-300));
  transform:scaleX(0);transform-origin:0 50%;transition:transform .6s var(--ease);
}
.stat:hover::after{transform:scaleX(1)}
.stat__ic{color:var(--gold-700);margin-bottom:.55rem;transition:transform .5s var(--ease)}
.stat:hover .stat__ic{transform:translateY(-3px) scale(1.06)}
.stat__n{
  font-variant-numeric:tabular-nums;
  font-family:var(--ff-display);font-size:clamp(2.3rem,4.6vw,3.5rem);font-weight:800;
  line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums;
  color:var(--ink-900);
}
.sec--ink .stat__n{color:var(--gold-300)}
.stat__l{font-family:var(--ff-display);font-size:.94rem;font-weight:600;letter-spacing:-.01em}
.stat__d{font-size:.82rem;color:var(--muted)}
.sec--ink .stat__d{color:var(--ink-350)}

/* ------------------------------------------------------------ CARD SERVICE */
.svcs{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.9rem,1.6vw,1.35rem)}
.svc{
  position:relative;display:flex;flex-direction:column;gap:.85rem;
  padding:clamp(1.4rem,2.4vw,1.9rem);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;isolation:isolate;
  transition:transform var(--dur-2) var(--e-ui),border-color var(--dur-2) var(--e-ui),
             box-shadow var(--dur-2) var(--e-ui);
}
.svc::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(165deg,var(--gold-100),transparent 62%);
  opacity:0;transition:opacity .5s var(--ease);
}
.svc::after{
  content:"";position:absolute;top:0;right:0;width:46px;height:46px;
  border-top:1.5px solid var(--gold-700);border-right:1.5px solid var(--gold-700);
  border-top-right-radius:var(--r);
  opacity:0;transform:translate(-7px,7px);
  transition:opacity .45s var(--ease),transform .5s var(--ease);
}
.svc:hover{transform:translateY(-6px);border-color:var(--line-2);box-shadow:var(--sh-2)}
/* pendant le suivi du pointeur, la transition ferait trainer la carte */
.svc[data-tilt]:hover,.eng[data-tilt]:hover{transition:border-color .45s var(--ease),box-shadow .55s var(--ease)}
.svc:hover::before{opacity:1}
.svc:hover::after{opacity:1;transform:none}
.svc__ic{
  width:56px;height:56px;display:grid;place-items:center;border-radius:var(--r);
  background:var(--ink-900);color:var(--gold-400);
  transition:transform var(--dur-3) var(--e-ui),background-color var(--dur-2) var(--e-ui),
             color var(--dur-2) var(--e-ui);
}
.svc:hover .svc__ic{transform:translateY(-3px) rotate(-5deg);background:var(--gold-700);color:#fff}
.svc h3{margin-top:.3rem}
.svc p{font-size:.925rem;color:var(--muted);line-height:1.6}
.svc__more{margin-top:auto;padding-top:.5rem}
.svc__n{
  position:absolute;right:1.2rem;bottom:.4rem;z-index:-1;
  font-family:var(--ff-display);font-size:4.3rem;font-weight:800;line-height:1;
  color:var(--ink-900);opacity:.045;letter-spacing:-.05em;
  transition:opacity .5s var(--ease),transform .6s var(--ease);
}
.svc:hover .svc__n{opacity:.09;transform:translateY(-4px)}

/* ------------------------------------------------------------ SERVICE FULL */
.srow{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(1.4rem,3vw,3rem);
  padding-block:clamp(2.2rem,4vw,3.4rem);border-top:1px solid var(--line);
}
.srow:last-child{border-bottom:1px solid var(--line)}
.srow__ic{
  width:clamp(64px,7vw,84px);height:clamp(64px,7vw,84px);
  display:grid;place-items:center;border-radius:var(--r);
  background:linear-gradient(155deg,var(--ink-800),var(--ink-900));color:var(--gold-400);
  box-shadow:var(--sh-2);position:relative;overflow:hidden;
}
.srow__ic::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(70% 70% at 30% 20%,rgba(216,168,87,.28),transparent 70%);
}
.srow__hd{display:flex;flex-wrap:wrap;align-items:baseline;gap:.9rem;margin-bottom:.75rem}
.srow__num{
  font-family:var(--ff-display);font-size:.76rem;font-weight:700;letter-spacing:.16em;
  color:var(--gold-800);
}
.srow__acc{font-family:var(--ff-display);font-size:1.02rem;font-weight:600;color:var(--ink-700);margin-bottom:.8rem}
.srow p:not([class]){color:var(--muted);max-width:74ch}
.plist{display:grid;grid-template-columns:repeat(2,1fr);gap:.55rem 1.6rem;margin-top:1.35rem}
.plist li{
  display:flex;gap:.7rem;font-size:.915rem;line-height:1.5;color:var(--ink-700);
}
.plist .ic{flex:0 0 auto;margin-top:.2rem;color:var(--gold-700)}

/* ----------------------------------------------------------------- SPLIT */
.split{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.split--rev .split__media{order:2}
.split__media{position:relative;isolation:isolate}
.split__media img{
  width:100%;border-radius:var(--r-lg);box-shadow:var(--sh-3);
  aspect-ratio:4/5;object-fit:cover;
}
.split__media::before{
  content:"";position:absolute;inset:auto -18px -18px auto;width:62%;height:62%;
  border:1.5px solid var(--gold-700);border-radius:var(--r-lg);z-index:-1;
}
.split__badge{
  position:absolute;left:-14px;bottom:28px;
  background:var(--ink-900);color:var(--paper);border-radius:14px;
  padding:1.05rem 1.25rem;box-shadow:var(--sh-3);
  display:flex;align-items:center;gap:.85rem;max-width:76%;
}
.split__badge .ic{color:var(--gold-400);flex:0 0 auto}
.split__badge b{
  display:block;font-family:var(--ff-display);font-size:2rem;font-weight:800;
  line-height:1;letter-spacing:-.04em;margin-bottom:.28rem;
  font-variant-numeric:tabular-nums;color:var(--gold-300);
}
.split__badge span{display:block;font-size:.8rem;color:var(--ink-300);line-height:1.4}
.split__body>p:not([class]){color:var(--muted)}
.split__body>p+p{margin-top:1rem}

.checks{display:grid;gap:.75rem;margin-top:1.7rem}
.checks li{display:flex;gap:.8rem;align-items:flex-start;font-size:.95rem}
.checks .ic{
  flex:0 0 auto;width:24px;height:24px;padding:4px;border-radius:var(--r-sm);
  background:var(--gold-100);color:var(--gold-800);margin-top:1px;
}

/* --------------------------------------------------------------- PROCESS */
.proc{position:relative;display:grid;gap:0}
.proc::before{
  content:"";position:absolute;left:27px;top:28px;bottom:28px;width:1.5px;
  background:var(--line);
}
.proc::after{
  content:"";position:absolute;left:27px;top:28px;bottom:28px;width:1.5px;
  background:linear-gradient(180deg,var(--gold-700),var(--gold-300));
  transform:scaleY(var(--ph,0));transform-origin:50% 0;
  transition:transform 1.1s var(--ease);
}
.pstep{
  display:grid;grid-template-columns:56px 1fr;gap:clamp(1rem,2.5vw,2rem);
  padding-block:clamp(1.15rem,2.4vw,1.7rem);position:relative;
}
.pstep__dot{
  width:56px;height:56px;border-radius:var(--r);display:grid;place-items:center;
  background:var(--paper);border:1.5px solid var(--line-2);color:var(--ink-450);
  font-family:var(--ff-display);font-size:.9rem;font-weight:700;
  position:relative;z-index:1;
  transition:background-color .5s var(--ease),border-color .5s var(--ease),
             color .5s var(--ease),transform .5s var(--ease);
}
.pstep__dot .ic{position:absolute;opacity:0;transition:opacity .4s var(--ease)}
.pstep__dot b{transition:opacity .4s var(--ease)}
.pstep.is-on .pstep__dot{background:var(--ink-900);border-color:var(--ink-900);color:var(--gold-400);transform:scale(1.06)}
.pstep.is-on .pstep__dot .ic{opacity:1}
.pstep.is-on .pstep__dot b{opacity:0}
.pstep__body{padding-top:.45rem}
.pstep h3{margin-bottom:.45rem}
.pstep p{color:var(--muted);font-size:.945rem;max-width:64ch}

/* ---------------------------------------------------------------- VALUES */
.vals{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
.val{
  background:var(--paper);padding:clamp(1.5rem,2.6vw,2.1rem);
  display:flex;flex-direction:column;gap:.7rem;position:relative;overflow:hidden;
  transition:background-color var(--dur-2) var(--e-ui)}
.val:hover{background:var(--paper-2)}
.val__ic{
  width:46px;height:46px;display:grid;place-items:center;border-radius:var(--r);
  background:var(--gold-100);color:var(--gold-800);
  transition:transform .55s var(--ease),background-color .45s,color .45s;
}
.val:hover .val__ic{transform:rotate(-6deg) scale(1.07);background:var(--gold-700);color:#fff}
.val p{font-size:.91rem;color:var(--muted);line-height:1.6}

/* ------------------------------------------------------------------ TEAM */
.pole{margin-bottom:clamp(2rem,4vw,3rem)}
.pole__hd{display:flex;flex-wrap:wrap;align-items:baseline;gap:.9rem;margin-bottom:1.3rem;padding-bottom:.85rem;border-bottom:1px solid var(--line)}
.pole__hd h3{letter-spacing:-.02em}
.pole__hd p{font-size:.9rem;color:var(--muted)}
.pole__n{
  margin-left:auto;font-family:var(--ff-display);font-size:.74rem;font-weight:700;
  letter-spacing:.14em;color:var(--gold-800);white-space:nowrap;
}
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.9rem,1.6vw,1.3rem)}
.mbr{
  position:relative;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r);padding:clamp(1.25rem,2.2vw,1.6rem);
  display:flex;flex-direction:column;gap:.75rem;overflow:hidden;
  transition:transform var(--dur-2) var(--e-ui),box-shadow var(--dur-2) var(--e-ui),
             border-color var(--dur-2) var(--e-ui);
}
.mbr:hover{transform:translateY(-5px);box-shadow:var(--sh-2);border-color:var(--line-2)}
.mbr__top{display:flex;align-items:center;gap:.95rem}
.mbr__av{
  flex:0 0 auto;width:58px;height:58px;border-radius:var(--r);display:grid;place-items:center;
  font-family:var(--ff-display);font-size:1.03rem;font-weight:700;letter-spacing:.01em;
  color:var(--gold-300);background:var(--ink-900);position:relative;
}
.mbr__av::after{
  content:"";position:absolute;inset:-4px;border-radius:var(--r-lg);
  border:1px solid var(--gold-700);opacity:.45;
  transition:transform .55s var(--ease),opacity .45s var(--ease);
}
.mbr:hover .mbr__av::after{transform:scale(1.1);opacity:1}
.mbr__id{min-width:0}
.mbr__nm{font-family:var(--ff-display);font-size:1.02rem;font-weight:700;letter-spacing:-.018em;line-height:1.2}
.mbr__nm span{display:block;font-size:.86rem;font-weight:500;color:var(--muted);letter-spacing:0}
.mbr__poste{
  display:inline-flex;align-items:center;gap:.5rem;font-size:.845rem;font-weight:500;
  color:var(--ink-700);padding:.34rem .7rem;border-radius:var(--r-sm);
  background:var(--paper-2);border:1px solid var(--line);align-self:flex-start;
}
.mbr__poste .ic{color:var(--gold-700);flex:0 0 auto}
.mbr p{font-size:.885rem;color:var(--muted);line-height:1.6}
.mbr__num{
  position:absolute;top:1rem;right:1.15rem;
  font-family:var(--ff-display);font-size:.72rem;font-weight:700;letter-spacing:.1em;
  color:var(--ink-450);
}
.mbr--lead{background:linear-gradient(165deg,var(--ink-800),var(--ink-900));border-color:transparent;color:var(--paper)}
.mbr--lead .mbr__nm span{color:var(--ink-300)}
.mbr--lead .mbr__poste{background:rgba(250,248,244,.07);border-color:rgba(250,248,244,.16);color:var(--gold-300)}
.mbr--lead .mbr__poste .ic{color:var(--gold-400)}
.mbr--lead p{color:rgba(250,248,244,.7)}
.mbr--lead .mbr__av{background:var(--gold-700);color:#fff}
.mbr--lead .mbr__num{color:rgba(250,248,244,.7)}
.mbr--lead:hover{box-shadow:var(--sh-3)}

/* -------------------------------------------------------------- MATERIEL */
.fleet{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(.9rem,1.6vw,1.2rem)}
.fleet--2{grid-template-columns:repeat(2,1fr)}
.eng{
  position:relative;text-align:center;padding:clamp(1.5rem,2.6vw,2.1rem) 1.1rem;
  border:1px solid var(--line);border-radius:var(--r);background:var(--paper);
  overflow:hidden;
  transition:transform var(--dur-2) var(--e-ui),border-color var(--dur-2) var(--e-ui),
             box-shadow var(--dur-2) var(--e-ui)}
.eng::before{
  content:"";position:absolute;inset:auto 0 0 0;height:3px;
  background:linear-gradient(90deg,var(--gold-700),var(--gold-300));
  transform:scaleX(0);transition:transform .55s var(--ease);
}
.eng:hover{transform:translateY(-5px);border-color:var(--line-2);box-shadow:var(--sh-2)}
.eng:hover::before{transform:scaleX(1)}
.eng__ic{
  color:var(--ink-800);margin:0 auto .9rem;
  transition:transform .6s var(--ease),color .45s var(--ease);
}
.eng:hover .eng__ic{transform:translateX(4px) scale(1.06);color:var(--gold-800)}
.eng__n{
  font-variant-numeric:tabular-nums;
  font-family:var(--ff-display);font-size:clamp(2.4rem,4vw,3.1rem);font-weight:800;
  line-height:1;letter-spacing:-.045em;font-variant-numeric:tabular-nums;
  color:var(--gold-800);
}
/* Filet : ces cartes rognent leur contenu (overflow:hidden). Un mot
   plus long que sa colonne doit se couper, pas disparaitre. */
.eng h3,.svc h3,.kitc h3,.val h3,.ref h3,.mbr__nm{overflow-wrap:anywhere}
.eng h3{margin-top:.3rem;font-size:1.02rem}
.eng p{font-size:.85rem;color:var(--muted);margin-top:.6rem;line-height:1.55}

.kit{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.9rem,1.6vw,1.2rem)}
.kitc{
  display:flex;gap:1rem;padding:clamp(1.2rem,2vw,1.5rem);
  border:1px solid var(--line);border-radius:var(--r);background:var(--paper);
  transition:border-color var(--dur-2) var(--e-ui),transform var(--dur-2) var(--e-ui)}
.kitc:hover{border-color:var(--line-2);transform:translateY(-3px)}
.kitc .ic{flex:0 0 auto;color:var(--gold-700)}
.kitc h3{font-size:1.03rem;line-height:1.3;letter-spacing:-.01em;margin-bottom:.3rem}
.kitc p{font-size:.855rem;color:var(--muted);line-height:1.55}

/* ---------------------------------------------------------------- FILTERS */
.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:clamp(1.6rem,3vw,2.4rem)}
.filters button{
  font-family:var(--ff-display);font-size:.83rem;font-weight:500;
  padding:.55rem 1.05rem;border-radius:var(--r-sm);border:1px solid var(--line);
  color:var(--ink-600);background:var(--paper);
  transition:color .35s var(--ease),background-color .35s var(--ease),
             border-color .35s var(--ease);
}
.filters button:hover{border-color:var(--line-2);color:var(--ink-900)}
.filters button[aria-pressed="true"],
.filters a[aria-current="true"]{
  background:var(--ink-900);border-color:var(--ink-900);color:var(--paper);font-weight:600;
}
.filters a[aria-current="true"] .ic{color:var(--gold-400)}

/* --------------------------------------------------------------- GALLERY */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.7rem,1.4vw,1.1rem)}
.shot{
  position:relative;display:block;width:100%;overflow:hidden;border-radius:var(--r);
  background:var(--ink-800);cursor:zoom-in;text-align:left;
  transition:opacity .4s var(--ease),transform .4s var(--ease),filter .4s;
}
.shot img{
  width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;
  transition:transform var(--dur-3) var(--e-out),filter var(--dur-3) var(--e-ui);
}
/* .shot--tall etait inerte : la grille etire toutes les vignettes a la
   hauteur de la plus haute de leur rangee, donc les onze rendaient le
   meme format. On aligne desormais les items en haut et on assume un
   format unique, choisi. */
.gal{align-items:start}
.shot::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(7,10,14,.96) 0%,rgba(7,10,14,.74) 36%,rgba(7,10,14,.2) 68%,transparent 88%);
  opacity:1;transition:opacity .5s var(--ease);
}
.shot:hover img{transform:scale(1.055)}
.shot:hover::after{opacity:1}
.shot__cap{
  position:absolute;inset:auto 0 0 0;z-index:1;padding:1.15rem 1.25rem;
  color:var(--paper);opacity:1;
  transition:transform var(--dur-2) var(--e-ui);
}
.shot:hover .shot__cap{transform:translateY(-2px)}
.shot__cap strong{display:block;font-family:var(--ff-display);font-size:1rem;font-weight:600;letter-spacing:-.015em}
.shot__cap span{
  display:block;font-size:.82rem;color:rgba(250,248,244,.84);margin-top:.3rem;
  opacity:0;transform:translateY(6px);
  transition:opacity var(--dur-2) var(--e-out),transform var(--dur-2) var(--e-out);
}
.shot:hover .shot__cap span,
.shot:focus-visible .shot__cap span{opacity:1;transform:none}
.shot__zoom{
  position:absolute;top:.9rem;right:.9rem;z-index:1;
  width:38px;height:38px;border-radius:var(--r-sm);display:grid;place-items:center;
  background:rgba(250,248,244,.14);color:var(--paper);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;transform:scale(.8);
  transition:opacity .45s var(--ease),transform .45s var(--ease);
}
.shot:hover .shot__zoom{opacity:1;transform:none}
.shot.is-out,.ref.is-out{display:none}
.shot.is-fresh,.ref.is-fresh{animation:fadeUp .6s var(--ease) both;animation-delay:var(--fd,0ms)}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
.empty{
  text-align:center;padding:clamp(2.5rem,6vw,4rem) 1rem;color:var(--muted);
  border:1px dashed var(--line-2);border-radius:var(--r);
}
.empty .ic{color:var(--ink-300);margin:0 auto .8rem}

/* ------------------------------------------------------------ REFERENCES */
.refs{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(.9rem,1.6vw,1.3rem)}
.ref{
  position:relative;display:flex;flex-direction:column;gap:.7rem;
  padding:clamp(1.4rem,2.4vw,1.9rem);
  border:1px solid var(--line);border-radius:var(--r);background:var(--paper);
  overflow:hidden;
  transition:transform var(--dur-2) var(--e-ui),box-shadow var(--dur-2) var(--e-ui),
             border-color var(--dur-2) var(--e-ui);
}
.ref:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:var(--line-2)}
.ref__top{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}
.ref__chip{
  font-family:var(--ff-display);font-size:.86rem;font-weight:700;letter-spacing:-.01em;
  color:#fff;background:var(--ink-900);border-radius:var(--r-sm);padding:.4rem .72rem;
  white-space:nowrap;flex:0 0 auto;
  transition:background-color .45s var(--ease)}
.ref:hover .ref__chip{background:var(--gold-700)}
.ref__cat{
  font-family:var(--ff-display);font-size:.7rem;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--gold-800);
}
.ref h3{font-size:1.1rem}
.ref__meta{display:flex;flex-wrap:wrap;gap:.4rem .9rem;font-size:.815rem;color:var(--muted)}
.ref__meta li{display:inline-flex;align-items:center;gap:.4rem}
.ref__meta .ic{color:var(--ink-300)}
.ref p:not([class]){font-size:.9rem;color:var(--muted);line-height:1.58}
.ref__role{
  margin-top:auto;padding-top:.85rem;border-top:1px dashed var(--line);
  font-size:.845rem;color:var(--ink-700);display:flex;gap:.55rem;align-items:flex-start;
}
.ref__role .ic{color:var(--gold-700);flex:0 0 auto;margin-top:.15rem}
.ref__role b{font-weight:600}

/* 1163 px de large pour un corps de 14 px, soit 161 caractères par ligne :
   c'était le pire défaut typographique du site, et il portait à chaque fois
   le texte le plus important de la page. */
.note{
  display:grid;grid-template-columns:auto minmax(0,34em);
  gap:.35rem 1.25rem;align-items:start;
  padding:clamp(1.25rem,2vw,1.6rem) clamp(1.3rem,2.2vw,1.75rem);
  margin-bottom:clamp(1.6rem,3vw,2.2rem);
  background:var(--gold-100);border:1px solid var(--gold-300);border-radius:var(--r);
  font-size:.92rem;line-height:1.62;color:var(--gold-900);
}
.note .ic{color:var(--gold-800);margin-top:.3em}
.note>div{grid-column:2}
.note strong{
  display:block;font-family:var(--ff-display);font-size:1.05rem;
  font-weight:600;line-height:1.22;letter-spacing:-.011em;margin-bottom:.3rem;
}
@media (max-width:720px){
  .note{grid-template-columns:1fr}
  .note>div{grid-column:1}
}

/* ------------------------------------------------------------------- FAQ */
.faq{display:grid;gap:.7rem;max-width:52rem}
.qa{border:1px solid var(--line);border-radius:var(--r);background:var(--paper);overflow:hidden;transition:border-color .4s var(--ease),box-shadow .4s}
.qa.is-open{border-color:var(--line-2);box-shadow:var(--sh-1)}
.qa__q{
  width:100%;display:flex;align-items:center;gap:1rem;text-align:left;
  padding:clamp(1.05rem,1.8vw,1.35rem);
  font-family:var(--ff-display);font-size:1rem;font-weight:600;letter-spacing:-.015em;
}
.qa__q:hover{color:var(--gold-800)}
.qa__sign{
  flex:0 0 auto;margin-left:auto;width:30px;height:30px;border-radius:var(--r-sm);
  display:grid;place-items:center;background:var(--paper-2);color:var(--ink-600);
  transition:transform .5s var(--ease),background-color .4s,color .4s;
}
.qa.is-open .qa__sign{transform:rotate(45deg);background:var(--gold-700);color:#fff}
.js .qa__a{height:0;overflow:hidden;transition:height .5s var(--ease)}
.qa__a>div{padding:0 clamp(1.05rem,1.8vw,1.35rem) clamp(1.15rem,2vw,1.45rem);color:var(--muted);font-size:.94rem;max-width:68ch}

/* ----------------------------------------------------------------- FORMS */
.fwrap{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,4vw,3.5rem);align-items:start}
.form{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.5rem,3vw,2.4rem);box-shadow:var(--sh-1);
}
.form__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.05rem}
.f-full{grid-column:1/-1}
.fld{position:relative}
.fld label{
  display:block;font-family:var(--ff-display);font-size:.78rem;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;color:var(--ink-500);margin-bottom:.45rem;
}
.fld label span{color:var(--gold-800)}
.fld input,.fld select,.fld textarea{
  width:100%;padding:.85rem 1rem;border:1px solid var(--line-3);border-radius:10px;
  background:var(--paper-2);font-size:1rem;font-family:var(--ff-body);
  transition:border-color .3s var(--ease),background-color .3s,box-shadow .3s;
}
.fld textarea{min-height:150px;resize:vertical;line-height:1.6}
.fld select{
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  cursor:pointer;padding-right:2.6rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%2344505F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6.6 9.4 5.4 5.4 5.4-5.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .85rem center;
}
.fld input:hover,.fld select:hover,.fld textarea:hover{border-color:var(--ink-450)}
/* `background-color` et non le raccourci `background` : celui-ci remettait
   background-image a none et faisait disparaitre le chevron du <select>. */
.fld input:focus,.fld select:focus,.fld textarea:focus{
  border-color:var(--gold-800);background-color:var(--paper);
  box-shadow:0 0 0 3px rgba(192,139,54,.22);
}
.fld input:focus:not(:focus-visible),
.fld select:focus:not(:focus-visible),
.fld textarea:focus:not(:focus-visible){outline:0}
.fld--err input,.fld--err select,.fld--err textarea{border-color:var(--ko);background-color:var(--ko-bg)}
.fld__err{display:flex;align-items:center;gap:.4rem;font-size:.8rem;color:var(--ko);margin-top:.4rem}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.hp input{font-size:1rem}
.check{display:flex;gap:.7rem;align-items:flex-start;font-size:.865rem;color:var(--muted);line-height:1.55}
.check input{width:18px;height:18px;flex:0 0 auto;margin-top:.18rem;accent-color:var(--gold-700)}
.form__act{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-top:1.6rem}
.form__note{font-size:.8rem;color:var(--ink-450)}

.alert{
  display:flex;gap:.9rem;padding:1.15rem 1.35rem;border-radius:var(--r);
  margin-bottom:1.6rem;font-size:.92rem;line-height:1.6;
  animation:alIn .55s var(--ease) both;
}
@keyframes alIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.alert .ic{flex:0 0 auto;margin-top:.15rem}
.alert--ok{background:var(--ok-bg);border:1px solid var(--ok-line);color:var(--ok)}
.alert--ko{background:var(--ko-bg);border:1px solid var(--ko-line);color:var(--ko)}
.alert strong{display:block;font-family:var(--ff-display);margin-bottom:.15rem}

.aside{display:grid;gap:1rem}
.acard{
  padding:clamp(1.3rem,2.2vw,1.7rem);border-radius:var(--r);
  border:1px solid var(--line);background:var(--paper);
}
.acard--ink{background:linear-gradient(165deg,var(--ink-800),var(--ink-900));border-color:transparent;color:var(--paper)}
.acard--ink h3{color:var(--paper)}
.acard h3{font-size:1.05rem;margin-bottom:1rem}
.acard--ink .cinfo span{color:var(--ink-300)}
.cinfo{display:grid;gap:.95rem}
.cinfo li{display:flex;gap:.85rem;align-items:flex-start;font-size:.915rem;line-height:1.5}
.cinfo .ic{flex:0 0 auto;color:var(--gold-700);margin-top:.15rem}
.acard--ink .cinfo .ic{color:var(--gold-400)}
.cinfo b{display:block;font-family:var(--ff-display);font-size:.74rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-450);margin-bottom:.15rem}
.cinfo a:hover{color:var(--gold-700)}
.acard--ink .cinfo a:hover{color:var(--gold-300)}

/* --------------------------------------------------------------- LEGAL TB */
.legal--2{grid-template-columns:repeat(2,1fr)}
.legal{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.legal li{background:var(--paper);padding:1.2rem 1.35rem;display:flex;gap:.9rem;
  align-items:flex-start;transition:background-color var(--dur-2) var(--e-ui)}
.legal li:hover{background:var(--paper-2)}
.legal .ic{flex:0 0 auto;color:var(--gold-700);margin-top:.1rem}
.legal b{display:block;font-family:var(--ff-display);font-size:.73rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-450);margin-bottom:.22rem}
.legal span{font-size:.93rem;font-weight:500;word-break:break-word}

.banks{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.2rem}
.banks li{
  display:inline-flex;align-items:center;gap:.6rem;font-size:.86rem;
  padding:.55rem .95rem;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper);
}
.banks b{font-family:var(--ff-display);font-weight:700;color:var(--gold-800)}
.banks .ic{color:var(--ink-300)}

.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.4rem}
.chips li{
  font-family:var(--ff-display);font-size:.8rem;font-weight:500;
  padding:.42rem .85rem;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--paper);color:var(--ink-600);
  transition:border-color .35s,color .35s,transform .35s var(--ease);
}
.chips li:hover{border-color:var(--gold-700);color:var(--gold-800);transform:translateY(-2px)}

/* -------------------------------------------------------------- TIMELINE */
.tl{position:relative;padding-left:2.2rem}
.tl::before{content:"";position:absolute;left:5px;top:8px;bottom:8px;width:1.5px;background:var(--line)}
.tl li{position:relative;padding-bottom:1.5rem}
.tl li:last-child{padding-bottom:0}
.tl li::before{
  content:"";position:absolute;left:-2.2rem;top:7px;width:11px;height:11px;border-radius:50%;
  background:var(--paper);border:1.5px solid var(--tl-c,var(--gold-700));
}
.tl{--tl-c:var(--gold-800)}
.acard--ink .tl{--tl-c:var(--gold-400)}
.tl b{display:block;font-family:var(--ff-display);font-size:.79rem;font-weight:700;letter-spacing:.11em;color:var(--tl-c);margin-bottom:.2rem}
.tl p{font-size:.93rem;color:var(--muted)}
.acard--ink .tl p{color:var(--ink-350)}
.acard--ink .tl li::before{background:var(--ink-800)}

/* --------------------------------------------------------------- CTA BAND */
.cta{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--ink-950);color:var(--paper);
  padding-block:clamp(3.5rem,7vw,6rem);
}
.cta__glow{
  position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(52% 88% at var(--mx,22%) var(--my,18%),rgba(192,139,54,.26),transparent 62%),
    radial-gradient(42% 70% at 88% 92%,rgba(0,158,96,.14),transparent 65%);
  transition:background-position .3s linear;
}
.cta__in{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(1.8rem,4vw,3.5rem);align-items:center}
.cta__h2{font-size:clamp(1.85rem,4.2vw,3.05rem);letter-spacing:-.032em}
.cta__lead{margin-top:1.05rem;color:rgba(250,248,244,.72);max-width:52ch}
.cta__act{display:flex;flex-direction:column;gap:.8rem;align-items:stretch}
.cta__act .btn{justify-content:center}

/* ---------------------------------------------------------------- FOOTER */
.ftr{background:var(--ink-950);color:var(--paper);position:relative;overflow:hidden}
.ftr::before{
  content:"";position:absolute;inset:0 0 auto;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-800),transparent);
}
.ftr__top{
  display:grid;grid-template-columns:1.5fr .8fr 1fr 1.15fr;
  gap:clamp(1.8rem,3.5vw,3rem);padding-block:clamp(3rem,6vw,4.5rem) clamp(2rem,4vw,3rem);
}
.ftr__plaque{
  display:inline-block;background:var(--paper);border-radius:var(--r);
  padding:.85rem 1.1rem;box-shadow:0 18px 40px -20px rgba(0,0,0,.7);
}
.ftr__plaque img{width:clamp(175px,17vw,215px);height:auto}
.ftr__sig{
  margin-top:1.15rem;font-family:var(--ff-display);font-size:.755rem;font-weight:600;
  letter-spacing:.17em;text-transform:uppercase;color:var(--gold-400);
}
.ftr__about{margin-top:.8rem;font-size:.885rem;line-height:1.65;color:var(--ink-300);max-width:42ch}
.ftr__social{display:flex;gap:.55rem;margin-top:1.5rem}
.ftr__social a{
  width:40px;height:40px;border-radius:var(--r-sm);display:grid;place-items:center;
  border:1px solid rgba(250,248,244,.16);color:rgba(250,248,244,.8);
  transition:color .4s var(--ease),background-color .4s var(--ease),
             border-color .4s var(--ease),transform .4s var(--ease);
}
.ftr__social a:hover{background:var(--gold-700);border-color:var(--gold-700);color:#fff;transform:translateY(-3px)}
.ftr__col h3{
  font-size:.78rem;font-weight:600;letter-spacing:.17em;text-transform:uppercase;
  color:var(--paper);margin-bottom:1.2rem;padding-bottom:.7rem;
  border-bottom:1px solid rgba(250,248,244,.1);
}
.ftr__links{display:grid;gap:.55rem}
.ftr__links a{
  display:inline-flex;align-items:center;gap:.35rem;font-size:.9rem;color:var(--ink-300);
  transition:color .35s var(--ease),transform .35s var(--ease);
}
.ftr__chev{color:var(--gold-800);opacity:0;transform:translateX(-6px);
  transition:opacity .35s var(--ease),transform .35s var(--ease)}
.ftr__links a:hover{color:var(--paper);transform:translateX(4px)}
.ftr__links a:hover .ftr__chev{opacity:1;transform:none}
.ftr__contact{display:grid;gap:1rem}
.ftr__contact li{display:flex;gap:.8rem;font-size:.885rem;line-height:1.55;color:var(--ink-300)}
.ftr__ic{flex:0 0 auto;color:var(--gold-700);margin-top:.1rem}
.ftr__contact a:hover{color:var(--paper)}

.ftr__legal{border-top:1px solid rgba(250,248,244,.09);padding-block:1.35rem}
.ftr__legal ul{display:flex;flex-wrap:wrap;gap:.55rem 1.9rem;font-size:.79rem;color:var(--ink-350);font-variant-numeric:tabular-nums}
.ftr__legal span{
  font-family:var(--ff-display);font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold-700);margin-right:.45rem;font-size:.72rem;
}
.ftr__bot{
  border-top:1px solid rgba(250,248,244,.09);padding-block:1.4rem 1.6rem;
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:.7rem;
  font-size:.8rem;color:var(--ink-350);
}
.ftr__slogan{display:inline-flex;align-items:center;gap:.5rem;color:var(--ink-300);font-style:italic}
.ftr__spark{color:var(--gold-700)}

/* ------------------------------------------------- CONFORT TACTILE
   Sur ecran tactile, une cible de 17 a 25 px de haut se rate une fois sur
   trois. On porte a 44 px les liens du pied de page, des coordonnees et
   les liens fleches, sans rien changer au rendu bureau. */
/* Seuil aligne sur celui du menu burger (1140 px) : au-dela de cette
   largeur le site se considere comme un poste de bureau. En dessous,
   la cible de 44 px est garantie sans dependre de la detection du
   pointeur, que certaines tablettes rapportent mal. */
@media (pointer:coarse),(max-width:1140px){
  .ftr__links a{min-height:44px;align-items:center}
  .ftr__contact li{align-items:center}
  .ftr__contact a{display:inline-flex;align-items:center;min-height:44px}
  .ftr__social a{width:44px;height:44px}
  .alink{min-height:44px;align-items:center}
  .drawer__foot a{min-height:44px}
  .crumb a{display:inline-flex;align-items:center;min-height:36px}
}

/* Le pied de page compte quinze liens : sur mobile, deux colonnes evitent
   660 px de liste verticale une fois les cibles portees a 44 px. */
@media (max-width:720px){
  .ftr__links{grid-template-columns:1fr 1fr;column-gap:1rem}
  .ftr__col h3{margin-bottom:.9rem}
}

/* ------------------------------------------------------- FLOATING BUTTONS */
.totop{
  position:fixed;right:1.25rem;bottom:5.1rem;z-index:90;
  width:46px;height:46px;border-radius:var(--r);display:grid;place-items:center;
  background:var(--ink-900);color:var(--paper);box-shadow:var(--sh-2);
  opacity:0;visibility:hidden;transform:translateY(14px) scale(.9);
  transition:opacity .45s var(--ease),visibility .45s,
             transform .45s var(--ease),background-color .4s var(--ease);
}
.totop.is-on{opacity:1;visibility:visible;transform:none}
.totop:hover{background:var(--gold-700);transform:translateY(-3px)}

.wa{
  position:fixed;right:1.25rem;bottom:1.25rem;z-index:90;
  flex-direction:row-reverse;
  display:inline-flex;align-items:center;gap:.6rem;
  height:48px;padding-inline:.72rem;border-radius:100px;
  background:var(--wa);color:#fff;box-shadow:0 14px 34px -12px rgba(31,168,85,.7);
  overflow:hidden;max-width:48px;
  transition:max-width .55s var(--ease),transform .4s var(--ease),box-shadow .4s;
}
.wa .ic{flex:0 0 auto;margin-right:.06rem}
.wa span{
  font-family:var(--ff-display);font-size:.845rem;font-weight:600;white-space:nowrap;
  padding-left:.5rem;opacity:0;transition:opacity .35s var(--ease) .1s;
}
.wa:hover{max-width:260px;transform:translateY(-3px)}
.wa:hover span{opacity:1}

/* -------------------------------------------------------------- LIGHTBOX */
.lbox{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  background:rgba(5,7,10,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  padding:clamp(1rem,4vw,3rem);
  overflow-y:auto;place-items:start center;align-content:center;
  opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s;
}
.lbox[hidden]{display:grid}
.lbox.is-open{opacity:1;visibility:visible}
.lbox__fig{max-width:min(1100px,100%);text-align:center}
.lbox__fig img{
  max-height:min(74vh,760px);width:auto;max-width:100%;border-radius:var(--r);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.9);margin-inline:auto;
  animation:lbIn .55s var(--ease) both;
}
@keyframes lbIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
.lbox__fig figcaption{margin-top:1.2rem;color:var(--paper)}
.lbox__fig strong{display:block;font-family:var(--ff-display);font-size:1.12rem;font-weight:600;letter-spacing:-.02em}
.lbox__fig span{display:block;font-size:.9rem;color:rgba(250,248,244,.66);margin-top:.35rem;max-width:62ch;margin-inline:auto}
.lbox__fig em{
  display:block;font-style:normal;margin-top:.85rem;
  font-family:var(--ff-display);font-size:.74rem;letter-spacing:.18em;color:var(--gold-400);
}
.lbox__close{
  position:absolute;top:clamp(.8rem,2vw,1.6rem);right:clamp(.8rem,2vw,1.6rem);
  width:46px;height:46px;border-radius:var(--r);display:grid;place-items:center;
  background:rgba(250,248,244,.1);color:var(--paper);
  transition:background-color .35s var(--ease),transform .35s var(--ease);
}
.lbox__close:hover{background:var(--gold-800);transform:rotate(90deg)}
.lbox__nav{
  position:absolute;top:50%;translate:0 -50%;
  width:48px;height:48px;border-radius:var(--r);display:grid;place-items:center;
  background:rgba(250,248,244,.1);color:var(--paper);
  transition:background-color .35s var(--ease),transform .35s var(--ease);
}
.lbox__nav:hover{background:var(--gold-800)}
.lbox__nav--prev{left:clamp(.5rem,2vw,1.6rem);rotate:180deg}
.lbox__nav--next{right:clamp(.5rem,2vw,1.6rem)}

/* -------------------------------------------------------------- BANNER */
.banner{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--ink-950);color:var(--paper);
  padding-block:clamp(8rem,16vh,11.5rem) clamp(3rem,6vw,4.5rem);
}
.banner__bg{position:absolute;inset:-10% 0 0;z-index:-3}
.banner__bg img{
  width:100%;height:100%;object-fit:cover;object-position:50% 62%;
  filter:grayscale(.25) contrast(1.1) brightness(.5);background:var(--ink-950);
}
.banner::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(90% 70% at 8% 10%,rgba(192,139,54,.2),transparent 58%),
    linear-gradient(95deg,rgba(7,10,14,.95),rgba(7,10,14,.62));
}
.banner__grid{
  position:absolute;inset:0;z-index:-1;
  background-image:
    linear-gradient(to right,rgba(250,248,244,.055) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(250,248,244,.055) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(100% 90% at 85% 15%,#000,transparent 70%);
  -webkit-mask-image:radial-gradient(100% 90% at 85% 15%,#000,transparent 70%);
}
.banner__in{position:relative}
.crumb{
  display:flex;align-items:center;gap:.5rem;margin-bottom:1.6rem;
  font-size:.8rem;color:rgba(250,248,244,.62);
}
.crumb a{transition:color .3s var(--ease)}
.crumb a:hover{color:var(--gold-400)}
.crumb .ic{opacity:.5}
.crumb span{color:var(--paper)}
.banner__h1{font-size:clamp(2.2rem,5.6vw,4.1rem);font-weight:800;letter-spacing:-.033em;max-width:22ch}
.banner__lead{margin-top:1.2rem;font-size:clamp(1rem,.5vw + .9rem,1.16rem);line-height:1.62;color:rgba(250,248,244,.76);max-width:62ch}

/* ------------------------------------------------------------------- 404 */
.e404{text-align:center;padding-block:clamp(7rem,16vh,11rem)}
.e404__n{
  display:block;
  font-family:var(--ff-display);font-size:clamp(6rem,20vw,14rem);font-weight:800;
  line-height:.9;letter-spacing:-.06em;
  font-variant-numeric:tabular-nums;color:var(--gold-700);
}

/* ================================================================ REVEALS */
/* Rien n'est masqué tant que JavaScript n'a pas confirmé sa présence :
   si le script échoue, la page reste entièrement lisible.              */
.js [data-reveal]{opacity:0}
.js [data-reveal].is-in{animation:revUp var(--dur-4) var(--e-out) var(--rd,0ms) both}
.js [data-reveal="left"].is-in{animation-name:revLeft}
.js [data-reveal="right"].is-in{animation-name:revRight}
.js [data-reveal="scale"].is-in{animation-name:revScale}
.js [data-reveal="none"].is-in{animation-name:revFade}

/* Le flou animé forçait une passe de filtre sur toute la surface de
   chaque élément, à chaque image — jusqu'à 91 éléments par page, dont des
   photographies plein cadre. C'était la dépense la plus lourde du
   défilement sur mobile, et le texte arrivait illisible. */
@keyframes revUp   {from{opacity:0;transform:translate3d(0,20px,0)} to{opacity:1;transform:none}}
@keyframes revLeft {from{opacity:0;transform:translate3d(-24px,0,0)}to{opacity:1;transform:none}}
@keyframes revRight{from{opacity:0;transform:translate3d(24px,0,0)} to{opacity:1;transform:none}}
@keyframes revScale{from{opacity:0;transform:scale(.965)}           to{opacity:1;transform:none}}
@keyframes revFade {from{opacity:0}                                 to{opacity:1}}

[data-split] .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.js [data-split] .w>i{
  display:inline-block;font-style:inherit;
  transform:translateY(108%);opacity:0;
  transition:transform .95s var(--ease) var(--wd,0ms),opacity .8s var(--ease) var(--wd,0ms);
}
.js [data-split].is-in .w>i{transform:none;opacity:1}

/* le préchargeur n'a de sens que si le script peut le retirer */
html:not(.js) .loader{display:none}

/* ============================================================= RESPONSIVE */
/* La navigation « pleine taille » (7 entrees + telephone + bouton) ne tient
   dans aucune largeur : 1294 px de contenu pour 1240 px de conteneur. Le
   format resserre est donc permanent, et le telephone n'apparait qu'au-dela
   de 1280 px, ou le budget le permet. */
.hdr__bar{gap:1rem}
.nav ul{gap:.1rem}
.nav a{padding:.5rem .6rem;font-size:.825rem}
@media (max-width:1279px){
  .tel{display:none}
}

@media (max-width:1140px){
  .nav{display:none}
  .burger{display:flex;align-items:center;justify-content:center}
  .svcs{grid-template-columns:repeat(2,1fr)}
  .g-4{grid-template-columns:repeat(2,1fr)}
  .fleet{grid-template-columns:repeat(3,1fr)}
  /* .fleet--2 doit rester a 2 colonnes : dans la colonne etroite d'un
     .split, 3 colonnes donnent 132 px et le titre est rogne. */
  .fleet.fleet--2{grid-template-columns:repeat(2,1fr)}
  .legal.legal--2{grid-template-columns:repeat(2,1fr)}
  .kit{grid-template-columns:repeat(2,1fr)}
  .team{grid-template-columns:repeat(2,1fr)}
  .legal{grid-template-columns:repeat(2,1fr)}
  .ftr__top{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:980px){
  html{scroll-padding-top:82px}
  .hero{min-height:auto;padding-block:8.5rem 3.5rem}
  .hero__in{grid-template-columns:1fr}
  .hero__plan{max-width:440px;justify-self:start;margin-top:2.5rem}
  .hero__scroll{display:none}
  .split,.fwrap,.cta__in,.shead--split{grid-template-columns:1fr}
  .split--rev .split__media{order:0}
  .split__media img{aspect-ratio:16/11}
  .vals{grid-template-columns:repeat(2,1fr)}
  .g-3{grid-template-columns:repeat(2,1fr)}
  .gal,.refs{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .cta__act{flex-direction:row;flex-wrap:wrap}
}
@media (max-width:720px){
  .svcs,.fleet,.kit,.team,.gal,.refs,.vals,.legal,.ftr__top,.form__grid,
  .g-2,.g-3,.g-4,.legal--2,.fleet--2,
  .fleet.fleet--2,.legal.legal--2{grid-template-columns:1fr}
  /* iOS Safari agrandit la page si un champ fait moins de 16px */
  .fld input,.fld select,.fld textarea{font-size:1rem}
  .plist{grid-template-columns:1fr}
  .srow{grid-template-columns:1fr}
  .srow__ic{width:62px;height:62px}
  .shot img{aspect-ratio:4/3}
  .proc::before,.proc::after{left:22px}
  .pstep{grid-template-columns:46px 1fr;gap:1.1rem}
  .pstep__dot{width:46px;height:46px;font-size:.82rem}
  .banner__h1{max-width:none}
  .wa span{display:none}
  .wa:hover{max-width:48px}
  .hdr__act .btn--sm span{display:none}
  /* cible tactile de 44x44, alignee sur celle du burger */
  .hdr__act .btn--sm{
    padding:0;border-radius:var(--r);width:44px;height:44px;justify-content:center;
  }
}

/* Sous 420 px, le logo doit pouvoir se comprimer : sinon le bandeau
   reclame 284 px incompressibles et mange la gouttiere droite. */
@media (max-width:420px){
  .brand img{width:clamp(116px,33vw,150px)}
  .brand{padding:.35rem .5rem}
}

/* Visionneuse sur ecran etroit : les fleches quittent la photo. */
@media (max-width:560px){
  .lbox__nav{top:auto;bottom:.5rem;translate:none}
  .lbox__nav--prev{left:calc(50% - 58px);rotate:180deg}
  .lbox__nav--next{right:calc(50% - 58px)}
  .lbox__fig figcaption{padding-bottom:3.8rem}
}

/* Telephone en paysage : le pied du tiroir prenait 39 % de la hauteur. */
@media (max-height:480px){
  .drawer__foot p{display:none}
  .drawer__foot{padding-top:.7rem;grid-auto-flow:column;justify-content:start;gap:1.4rem}
  .drawer__nav a{padding-block:.68rem;font-size:1.02rem}
  .lbox__fig img{max-height:56vh}
}
@media (max-width:460px){
  .stats{grid-template-columns:1fr}
  .filters button{font-size:.78rem;padding:.48rem .85rem}
}

/* ========================================================= PRÉFÉRENCES OS */
/* Sur écran étroit, une révélation latérale de 30 px suffit à créer un
   défilement horizontal avant son animation : on la rend verticale. */
@media (max-width:720px){
  .js [data-reveal="left"].is-in,
  .js [data-reveal="right"].is-in{animation-name:revUp}
}

@media (max-height:780px){
  .hero__scroll{display:none}
}

/* Tres petits ecrans (320-360 px, Android d'entree de gamme) : mesure faite
   a 320x700, le bouton « Demander un devis » tombait sous le pli. On
   resserre le heros pour le ramener dans le premier ecran. */
@media (max-width:360px){
  .hero{padding-block:6.4rem 2.5rem}
  .hero__h1{font-size:clamp(1.85rem,8.6vw,2.2rem);margin-block:.25rem 1rem}
  .hero__lead{font-size:.95rem;line-height:1.55}
  .hero__act{gap:.55rem;margin-top:1.5rem}
  .hero__act .btn--lg{padding:.82rem 1.25rem;font-size:.88rem}
  .hero__tags{margin-top:1.5rem;padding-top:1.2rem}
}

/* Paysage mobile : le plan d'elevation ajoutait 440 px a un heros deja
   trois fois plus haut que l'ecran. Il disparait sous 560 px de hauteur. */
@media (max-height:560px) and (orientation:landscape){
  .hero__plan{display:none}
  .hero{min-height:0;padding-block:6.5rem 2.5rem}
  .hero__h1{font-size:clamp(1.9rem,5.5vw,2.6rem)}
  .hero__tags{margin-top:1.2rem;padding-top:1rem}
  .hero__tags li{font-size:.72rem;padding:.3rem .65rem}
}

/* Tiroir en paysage : 418 px de liens pour 190 px visibles. Deux colonnes
   ramenent la navigation dans l'ecran. */
@media (max-height:480px){
  .drawer__nav ul{display:grid;grid-template-columns:1fr 1fr;column-gap:1.2rem}
  .drawer__nav a{padding-block:.58rem;font-size:.98rem}
  .drawer__arrow{display:none}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .js [data-reveal],.js [data-split] .w>i{opacity:1;transform:none;filter:none}
  .js [data-reveal].is-in{animation:none}
  .loader{display:none}
  .hero__plan .dl{stroke-dasharray:none;stroke-dashoffset:0;animation:none}
  .js .plan__lbl{opacity:.85;transition:none}
  .hero__plan .pulse{animation:none;opacity:1}
}

@media print{
  .hdr,.drawer,.loader,.progress,.totop,.wa,.cta,.lbox,.hero__scroll,
  .filters,.mq,.hero__plan,.shot__zoom{display:none !important}
  body{background:#fff;color:#000}
  .sec{padding-block:1.2rem}

  /* les navigateurs n'impriment pas les fonds mais gardent la couleur du
     texte : sans cette neutralisation, l'ivoire devenait illisible. */
  .banner,.sec--ink,.ftr,.hero,.acard--ink,.mbr--lead,.split__badge,
  .ref__chip,.svc__ic,.srow__ic,.mbr__av,.pstep.is-on .pstep__dot{
    background:#fff !important;color:#000 !important;
  }
  .hero__lead,.cta__lead,.banner__lead,.mbr--lead p,.split__badge span,
  .ftr__about,.ftr__contact li,.stat__d,.crumb,.eyebrow--light{color:#333 !important}

  .stat__n,.eng__n,.split__badge b,.hero__h1 em,.cta__h2 em,.e404__n{color:#000 !important}
  .js [data-reveal]{opacity:1 !important;animation:none !important}
  .qa__a{height:auto !important}
  a{text-decoration:underline}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em;color:#555}
}