/* ============================================================
   SAVIOR SECURITY GROUP — Design system
   Palette issue du logo : marine #14213d + or #c9a227 / #d8bd7e
   Accent CTA : ambre #fca311 (couleur Astra déjà en place)
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  --navy-950:#060b1a;
  --navy-900:#0b1228;
  --navy-800:#14213d;
  --navy-700:#1c2c50;
  --navy-600:#26386a;

  --gold-300:#e6d3a3;
  --gold-400:#d8bd7e;
  --gold-500:#c9a227;
  --gold-600:#a5831a;
  /* Or lisible sur fond clair : #a5831a plafonne a 3,3:1, le seuil WCAG est a 4,5. */
  --gold-700:#7a6019;

  --amber:#fca311;
  --amber-dark:#d78600;

  --paper:#ffffff;
  --paper-2:#f5f6f8;
  --paper-3:#e9ebef;
  --ink:#191c24;
  --ink-soft:#525a6b;

  --line-dark:rgba(255,255,255,.10);
  --line-light:rgba(20,33,61,.12);

  --ff-title:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ff-body:"Open Sans",system-ui,-apple-system,"Segoe UI",sans-serif;

  --container:1240px;
  --gutter:clamp(20px,5vw,48px);
  --section-y:clamp(64px,9vw,128px);

  --radius:4px;
  --radius-lg:10px;

  --shadow-sm:0 2px 12px rgba(6,11,26,.10);
  --shadow-md:0 18px 46px -22px rgba(6,11,26,.55);
  --shadow-lg:0 40px 90px -40px rgba(6,11,26,.75);

  --ease:cubic-bezier(.22,.61,.36,1);
  --dur:.55s;

  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  font-family:var(--ff-body);
  font-size:clamp(15.5px,.42vw + 14.6px,17px);
  line-height:1.7;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{
  font-family:var(--ff-title);
  font-weight:800;
  line-height:1.08;
  letter-spacing:-.02em;
  margin:0 0 .5em;
  text-wrap:balance;
}
h1{font-size:clamp(2.3rem,5.6vw,4.4rem)}
h2{font-size:clamp(1.85rem,3.6vw,3rem)}
h3{font-size:clamp(1.15rem,1.5vw,1.4rem);font-weight:700;letter-spacing:-.01em}
p{margin:0 0 1.1em;text-wrap:pretty}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:2px}

/* ---------- 3. Utilitaires ---------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section-y);position:relative}
.section--dark{background:var(--navy-900);color:#e8ecf5}
.section--navy{background:var(--navy-800);color:#e8ecf5}
.section--soft{background:var(--paper-2)}
.section--dark h1,.section--dark h2,.section--dark h3,
.section--navy h1,.section--navy h2,.section--navy h3{color:#fff}
.grain::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:var(--grain);opacity:.05;mix-blend-mode:overlay;
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-999px;top:0;z-index:200;background:var(--amber);color:var(--navy-900);padding:12px 20px;font-weight:700}
.skip:focus{left:12px;top:12px}

/* Sur-titre doré */
.eyebrow{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--ff-title);font-weight:700;font-size:.72rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold-500);
  margin-bottom:18px;
}
.eyebrow::before{content:"";width:38px;height:2px;background:currentColor;flex:none}
.section--dark .eyebrow,.section--navy .eyebrow{color:var(--gold-400)}

.lead{font-size:clamp(1.02rem,1.1vw,1.18rem);color:var(--ink-soft);max-width:62ch}
.section--dark .lead,.section--navy .lead{color:#b9c4da}
.head{max-width:760px;margin-bottom:clamp(36px,5vw,64px)}
.head--center{margin-inline:auto;text-align:center}
.head--center .eyebrow{justify-content:center}

/* ---------- 4. Boutons ---------- */
.btn{
  --btn-bg:var(--amber);--btn-fg:var(--navy-900);--btn-bd:var(--amber);
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 30px;border:2px solid var(--btn-bd);background:var(--btn-bg);color:var(--btn-fg);
  font-family:var(--ff-title);font-weight:700;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;
  text-align:center;line-height:1.35;
  border-radius:var(--radius);cursor:pointer;position:relative;overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.btn:hover{transform:translateY(-3px);box-shadow:0 14px 30px -14px rgba(252,163,17,.75)}
.btn:active{transform:translateY(-1px)}
.btn svg{width:17px;height:17px;flex:none}
.btn--ghost{--btn-bg:transparent;--btn-fg:#fff;--btn-bd:rgba(255,255,255,.42)}
.btn--ghost:hover{--btn-bg:#fff;--btn-fg:var(--navy-900);--btn-bd:#fff;box-shadow:0 14px 30px -14px rgba(255,255,255,.4)}
.btn--outline{--btn-bg:transparent;--btn-fg:var(--navy-800);--btn-bd:var(--navy-800)}
.btn--outline:hover{--btn-bg:var(--navy-800);--btn-fg:#fff;box-shadow:0 14px 30px -16px rgba(20,33,61,.7)}
.btn--wa{--btn-bg:#25d366;--btn-fg:#06331a;--btn-bd:#25d366}
.btn--wa:hover{box-shadow:0 14px 30px -14px rgba(37,211,102,.8)}
.btn--lg{padding:18px 38px;font-size:.86rem}
.btn-row{display:flex;flex-wrap:wrap;gap:14px}

/* Lien fléché */
.link-arrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--ff-title);font-weight:700;font-size:.78rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold-500);
}
.link-arrow svg{width:16px;height:16px;transition:transform .3s var(--ease)}
.link-arrow:hover svg{transform:translateX(6px)}

/* ---------- 5. Média : cadrage + duotone ---------- */
.media{
  position:relative;overflow:hidden;border-radius:var(--radius);
  background:var(--navy-800);isolation:isolate;
}
.media img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .9s var(--ease),filter .6s var(--ease)}
.media--16x9{aspect-ratio:16/9}
.media--4x3{aspect-ratio:4/3}
.media--1x1{aspect-ratio:1/1}
.media--3x4{aspect-ratio:3/4}
.media--tall{aspect-ratio:3/4.4}
/* voile marine qui unifie des photos d'origines différentes */
.media--tint::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,18,40,.30),rgba(11,18,40,.62));
  mix-blend-mode:multiply;transition:opacity .6s var(--ease);
}
.media--tint:hover::after{opacity:.35}
.media:hover img{transform:scale(1.06)}

/* Coins « viseur » dorés */
.bracket{position:relative}
.bracket::before,.bracket::after{
  content:"";position:absolute;width:26px;height:26px;pointer-events:none;z-index:2;
  border:2px solid var(--gold-500);opacity:.85;
}
.bracket::before{top:14px;left:14px;border-right:0;border-bottom:0}
.bracket::after{bottom:14px;right:14px;border-left:0;border-top:0}

/* ---------- 6. Barre de contact + en-tête ---------- */
.topbar{
  background:var(--navy-950);color:#9fb0cf;font-size:.8rem;
  border-bottom:1px solid var(--line-dark);
}
.topbar__inner{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:42px;flex-wrap:wrap}
.topbar a{display:inline-flex;align-items:center;gap:8px;transition:color .25s}
.topbar a:hover{color:var(--gold-400)}
.topbar svg{width:14px;height:14px;flex:none;color:var(--gold-500)}
.topbar__list{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.topbar__tag{display:inline-flex;align-items:center;gap:8px;color:var(--gold-400);font-weight:600;letter-spacing:.06em}
.pulse{width:8px;height:8px;border-radius:50%;background:#25d366;box-shadow:0 0 0 0 rgba(37,211,102,.7);animation:pulse 2.4s infinite}
/* Sur mobile, la barre se limite au téléphone : le reste est déjà dans le menu et le bouton flottant */
@media (max-width:680px){
  .topbar__inner{justify-content:center}
  .topbar__list{gap:14px;justify-content:center}
  .topbar__list + .topbar__list,
  .topbar li:nth-child(2){display:none}
  .topbar__tag{font-size:.74rem}
}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}

.header{
  position:sticky;top:0;z-index:100;
  background:rgba(11,18,40,.86);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-dark);
  transition:background .35s var(--ease),box-shadow .35s var(--ease);
}
.header.is-stuck{background:rgba(6,11,26,.97);box-shadow:0 12px 34px -22px #000}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:80px;transition:min-height .35s var(--ease)}
.header.is-stuck .header__inner{min-height:68px}
.brand{display:flex;align-items:center;gap:13px;flex:none}
.brand img{width:48px;height:48px;object-fit:contain;transition:width .35s var(--ease),height .35s var(--ease)}
.header.is-stuck .brand img{width:42px;height:42px}
.brand__txt{display:flex;flex-direction:column;line-height:1.12}
.brand__name{font-family:var(--ff-title);font-weight:800;font-size:1.02rem;letter-spacing:.05em;color:#fff}
.brand__sub{font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-500);font-weight:700}

.nav{display:flex;align-items:center;gap:6px}
.nav a{
  position:relative;padding:10px 15px;color:#dbe3f2;
  font-family:var(--ff-title);font-weight:600;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;
  transition:color .25s;
}
.nav a::after{
  content:"";position:absolute;left:15px;right:15px;bottom:2px;height:2px;background:var(--gold-500);
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease);
}
.nav a:hover{color:#fff}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a[aria-current="page"]{color:#fff}
.header__cta{display:flex;align-items:center;gap:12px}
.header__cta .btn{padding:12px 22px;font-size:.75rem}

.burger{
  display:none;width:46px;height:46px;border:1px solid var(--line-dark);background:transparent;
  border-radius:var(--radius);cursor:pointer;place-items:center;
}
.burger span{display:block;width:20px;height:2px;background:#fff;position:relative;transition:background .2s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:#fff;transition:transform .3s var(--ease)}
.burger span::before{top:-6px}.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}

.drawer{
  position:fixed;inset:0;z-index:99;background:var(--navy-950);
  padding:110px var(--gutter) 40px;
  display:flex;flex-direction:column;gap:6px;
  transform:translateX(100%);transition:transform .45s var(--ease);
  overflow-y:auto;
}
.drawer.is-open{transform:translateX(0)}
.drawer a{
  font-family:var(--ff-title);font-weight:700;font-size:1.5rem;color:#fff;
  padding:16px 0;border-bottom:1px solid var(--line-dark);
}
.drawer a span{color:var(--gold-500);font-size:.8rem;margin-right:14px;letter-spacing:.1em}
/* le bouton du tiroir doit garder sa propre couleur de texte, pas celle des liens */
.drawer .btn{margin-top:26px;font-size:.86rem;padding:17px 24px;border-bottom:2px solid var(--btn-bd);color:var(--btn-fg)}
body.is-locked{overflow:hidden}

@media (max-width:1024px){
  .nav,.header__cta .btn{display:none}
  .burger{display:grid}
}

/* ---------- 7. Hero ---------- */
.hero{position:relative;min-height:clamp(560px,88vh,860px);display:grid;align-items:center;overflow:hidden;background:var(--navy-950)}
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center 32%}
.hero__bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(100deg,rgba(6,11,26,.95) 0%,rgba(6,11,26,.78) 42%,rgba(6,11,26,.30) 78%,rgba(6,11,26,.55) 100%),
    linear-gradient(0deg,rgba(6,11,26,.92) 0%,transparent 45%);
}
.hero__grain{position:absolute;inset:0;z-index:1;background-image:var(--grain);opacity:.06;mix-blend-mode:overlay;pointer-events:none}
.hero__inner{position:relative;z-index:2;padding-block:clamp(80px,12vh,140px)}
.hero__content{max-width:720px;color:#fff}
.hero h1{color:#fff;margin-bottom:22px}
.hero h1 em{font-style:normal;color:var(--gold-400);display:block}
.hero__lead{font-size:clamp(1.02rem,1.3vw,1.22rem);color:#c3cee4;max-width:56ch;margin-bottom:34px}
.hero .btn-row{margin-bottom:44px}
.hero__pills{display:flex;flex-wrap:wrap;gap:10px}
.hero__pills li{
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 16px;border:1px solid var(--line-dark);border-radius:100px;
  background:rgba(255,255,255,.05);backdrop-filter:blur(6px);
  font-size:.78rem;letter-spacing:.04em;color:#d7dfef;
}
.hero__pills svg{width:15px;height:15px;color:var(--gold-500);flex:none}
/* Bande dorée décorative */
.hero__rule{position:absolute;left:0;bottom:0;z-index:3;height:5px;width:100%;
  background:linear-gradient(90deg,var(--amber) 0%,var(--gold-500) 34%,transparent 34%,transparent 100%)}

/* Hero secondaire (pages internes) */
.pagehero{position:relative;min-height:clamp(300px,46vh,440px);display:grid;align-items:end;overflow:hidden;background:var(--navy-900)}
.pagehero__bg{position:absolute;inset:0}
.pagehero__bg img{width:100%;height:100%;object-fit:cover;object-position:center 35%;filter:saturate(.8)}
.pagehero__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,11,26,.72),rgba(6,11,26,.92))}
.pagehero__inner{position:relative;z-index:2;padding-block:clamp(40px,7vw,72px)}
.pagehero h1{color:#fff;margin-bottom:12px}
.pagehero p{color:#b9c4da;max-width:60ch;margin:0}
/* flex-wrap : le fil d’Ariane de /direction/ compte trois niveaux et se coupait
   au milieu d’un intitulé sous 400 px. Sans effet là où il tenait déjà. */
.crumb{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:#8ea0c2;margin-bottom:18px}
.crumb a{white-space:nowrap}
.crumb a:hover{color:var(--gold-400)}
.crumb span{color:var(--gold-500)}

/* ---------- 8. Grilles ---------- */
.grid{display:grid;gap:clamp(18px,2.4vw,30px)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
.split--form{grid-template-columns:1.45fr 1fr;gap:clamp(32px,4vw,56px)}
@media (max-width:900px){
  .grid--3,.grid--4{grid-template-columns:repeat(2,1fr)}
  .split,.split--form{grid-template-columns:1fr}
}
@media (max-width:600px){
  .grid--2,.grid--3,.grid--4{grid-template-columns:1fr}
}

/* Inversion de l'ordre visuel (image à droite) sans casser l'ordre du DOM */
@media (min-width:901px){
  .split--rev > *:first-child{order:2}
}

/* ---------- 8bis. Listes à coches ---------- */
.ticks{display:grid;gap:11px;margin-top:6px}
.ticks--2{grid-template-columns:1fr 1fr;column-gap:26px}
@media (max-width:640px){.ticks--2{grid-template-columns:1fr}}
.ticks li{position:relative;padding-left:32px;font-size:.95rem;color:var(--ink-soft)}
.section--dark .ticks li,.section--navy .ticks li{color:#b9c4da}
.ticks li::before{
  content:"";position:absolute;left:0;top:.42em;width:18px;height:18px;border-radius:50%;
  background:rgba(201,162,39,.16);border:1px solid rgba(201,162,39,.5);
}
.ticks li::after{
  content:"";position:absolute;left:5.5px;top:.72em;width:7px;height:4px;
  border-left:2px solid var(--gold-500);border-bottom:2px solid var(--gold-500);
  transform:rotate(-45deg);
}

/* ---------- 8ter. Sommaire des services ---------- */
.idxcard{
  display:flex;align-items:center;gap:14px;height:100%;
  padding:20px 20px;border:1px solid var(--line-light);border-radius:var(--radius);
  background:#fff;font-family:var(--ff-title);font-weight:700;font-size:.92rem;line-height:1.3;
  color:var(--navy-800);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
}
.idxcard span{
  flex:none;font-size:.74rem;letter-spacing:.1em;color:var(--gold-500);
  border:1px solid rgba(201,162,39,.45);border-radius:var(--radius);padding:5px 8px;
}
.idxcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--gold-500)}

/* ---------- 9. Cartes services ---------- */
.svc{
  position:relative;display:flex;flex-direction:column;
  background:var(--navy-800);border:1px solid var(--line-dark);border-radius:var(--radius);
  overflow:hidden;isolation:isolate;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease);
}
.svc:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg);border-color:rgba(201,162,39,.45)}
.svc__media{position:relative;aspect-ratio:16/11;overflow:hidden}
.svc__media img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.svc:hover .svc__media img{transform:scale(1.08)}
.svc__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,18,40,.15),rgba(11,18,40,.85))}
.svc__num{
  position:absolute;top:16px;right:18px;z-index:2;
  font-family:var(--ff-title);font-weight:800;font-size:2.6rem;line-height:1;
  color:transparent;-webkit-text-stroke:1.5px rgba(216,189,126,.55);
}
.svc__icon{
  align-self:flex-start;flex:none;width:52px;height:52px;margin-bottom:14px;
  display:grid;place-items:center;background:var(--amber);border-radius:var(--radius);
  box-shadow:0 12px 26px -12px rgba(252,163,17,.8);
}
.svc__icon svg{width:24px;height:24px;color:var(--navy-900)}
.svc__body{padding:26px 24px 26px;display:flex;flex-direction:column;flex:1;gap:2px}
.svc__body h3{color:#fff;margin-bottom:10px}
.svc__body p{color:#a9b6ce;font-size:.93rem;margin-bottom:18px}
.svc__body .link-arrow{margin-top:auto;color:var(--gold-400)}

/* Carte claire (atouts) */
.feat{
  padding:30px 26px;background:#fff;border:1px solid var(--line-light);border-radius:var(--radius);
  border-top:3px solid var(--gold-500);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.feat:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.feat__ico{width:50px;height:50px;display:grid;place-items:center;border-radius:var(--radius);
  background:rgba(20,33,61,.06);color:var(--navy-800);margin-bottom:18px}
.feat__ico svg{width:25px;height:25px}
.feat h3{margin-bottom:8px}
.feat p{color:var(--ink-soft);font-size:.93rem;margin:0}

/* ---------- 10. Chiffres ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-dark);border:1px solid var(--line-dark)}
.stat{background:var(--navy-800);padding:clamp(26px,3.4vw,40px) 22px;text-align:center}
.stat__num{
  font-family:var(--ff-title);font-weight:800;line-height:1;
  font-size:clamp(2.4rem,4.6vw,3.6rem);
  background:linear-gradient(180deg,var(--gold-300),var(--gold-600));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  display:block;margin-bottom:10px;font-variant-numeric:tabular-nums;
}
.stat__label{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:#9bacca;font-weight:600}
@media (max-width:760px){.stats{grid-template-columns:repeat(2,1fr)}}

/* ---------- 11. Onglets ---------- */
.tabs__list{display:flex;flex-wrap:wrap;gap:8px;border-bottom:1px solid var(--line-light);margin-bottom:30px}
.section--dark .tabs__list,.section--navy .tabs__list{border-color:var(--line-dark)}
.tabs__btn{
  appearance:none;background:none;border:0;border-bottom:3px solid transparent;
  padding:14px 20px;cursor:pointer;
  font-family:var(--ff-title);font-weight:700;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft);transition:color .25s,border-color .25s;
}
.section--dark .tabs__btn,.section--navy .tabs__btn{color:#93a3c1}
.tabs__btn:hover{color:var(--navy-800)}
.section--dark .tabs__btn:hover,.section--navy .tabs__btn:hover{color:#fff}
.tabs__btn[aria-selected="true"]{color:var(--gold-500);border-color:var(--gold-500)}
.tabs__panel[hidden]{display:none}
.tabs__panel{animation:fade .5s var(--ease)}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- 12. Accordéon ---------- */
.acc{border-top:1px solid var(--line-light)}
.section--dark .acc,.section--navy .acc{border-color:var(--line-dark)}
.acc__item{border-bottom:1px solid var(--line-light)}
.section--dark .acc__item,.section--navy .acc__item{border-color:var(--line-dark)}
.acc__btn{
  width:100%;display:flex;align-items:center;gap:18px;text-align:left;
  padding:26px 4px;background:none;border:0;cursor:pointer;
  font-family:var(--ff-title);font-weight:700;font-size:clamp(1rem,1.4vw,1.22rem);color:var(--navy-800);
  transition:color .25s;
}
.section--dark .acc__btn,.section--navy .acc__btn{color:#fff}
.acc__btn:hover{color:var(--gold-600)}
.section--dark .acc__btn:hover{color:var(--gold-400)}
.acc__idx{font-size:.78rem;letter-spacing:.1em;color:var(--gold-500);flex:none;width:32px;font-weight:800}
.acc__sign{margin-left:auto;flex:none;width:34px;height:34px;display:grid;place-items:center;
  border:1px solid var(--line-light);border-radius:50%;transition:transform .4s var(--ease),background .3s,border-color .3s}
.section--dark .acc__sign,.section--navy .acc__sign{border-color:var(--line-dark)}
.acc__sign svg{width:15px;height:15px}
.acc__btn[aria-expanded="true"] .acc__sign{transform:rotate(45deg);background:var(--amber);border-color:var(--amber);color:var(--navy-900)}
.acc__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.acc__panel.is-open{grid-template-rows:1fr}
.acc__inner{overflow:hidden}
.acc__content{padding:0 4px 30px;display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(22px,3vw,44px);align-items:start}
.acc__content p{color:var(--ink-soft);font-size:.95rem}
.section--dark .acc__content p,.section--navy .acc__content p{color:#a9b6ce}
.acc__tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.acc__tags li{
  font-size:.78rem;padding:7px 13px;border-radius:100px;
  background:rgba(20,33,61,.06);color:var(--navy-700);border:1px solid var(--line-light);
}
.section--dark .acc__tags li,.section--navy .acc__tags li{background:rgba(255,255,255,.05);color:#cfd8ea;border-color:var(--line-dark)}
@media (max-width:800px){.acc__content{grid-template-columns:1fr}}

/* ---------- 13. Processus ---------- */
.steps{counter-reset:s;display:grid;gap:0}
.step{
  display:grid;grid-template-columns:88px 1fr;gap:26px;align-items:start;
  padding:28px 0;border-bottom:1px solid var(--line-light);
}
.section--dark .step,.section--navy .step{border-color:var(--line-dark)}
.step:last-child{border-bottom:0}
.step__n{
  font-family:var(--ff-title);font-weight:800;font-size:2.6rem;line-height:1;
  color:transparent;-webkit-text-stroke:1.6px var(--gold-500);
}
.step h3{margin-bottom:6px}
.step p{margin:0;color:var(--ink-soft);font-size:.94rem}
.section--dark .step p,.section--navy .step p{color:#a9b6ce}
@media (max-width:560px){.step{grid-template-columns:56px 1fr;gap:16px}.step__n{font-size:1.9rem}}

/* ---------- 14. Galerie ---------- */
.gallery{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(10px,1.4vw,18px)}
.gallery figure{margin:0;position:relative;overflow:hidden;border-radius:var(--radius);background:var(--navy-800);cursor:zoom-in}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.gallery figure:hover img{transform:scale(1.07)}
.gallery figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:22px 20px 18px;
  background:linear-gradient(0deg,rgba(6,11,26,.94),transparent);
  color:#fff;font-family:var(--ff-title);font-weight:700;font-size:.86rem;letter-spacing:.04em;
  transform:translateY(8px);opacity:.92;transition:transform .4s var(--ease),opacity .4s
}
.gallery figure:hover figcaption{transform:none;opacity:1}
.gallery figcaption small{display:block;font-family:var(--ff-body);font-weight:400;font-size:.74rem;color:var(--gold-400);letter-spacing:.1em;text-transform:uppercase;margin-bottom:4px}
.g-6{grid-column:span 6;aspect-ratio:16/10}
.g-4{grid-column:span 4;aspect-ratio:4/3}
.g-8{grid-column:span 8;aspect-ratio:16/9}
.g-3{grid-column:span 3;aspect-ratio:3/4}
@media (max-width:900px){.g-6,.g-4,.g-8{grid-column:span 6}.g-3{grid-column:span 6;aspect-ratio:4/3}}
@media (max-width:560px){.g-6,.g-4,.g-8,.g-3{grid-column:span 12}}

/* Lightbox */
.lightbox{
  position:fixed;inset:0;z-index:200;display:none;place-items:center;
  background:rgba(6,11,26,.95);backdrop-filter:blur(6px);padding:24px;
}
.lightbox.is-open{display:grid}
.lightbox img{max-width:min(1100px,92vw);max-height:84vh;object-fit:contain;border-radius:var(--radius);box-shadow:var(--shadow-lg)}
.lightbox__cap{color:#c3cee4;text-align:center;margin-top:16px;font-size:.88rem}
.lightbox__close{position:absolute;top:20px;right:20px;width:48px;height:48px;border-radius:50%;
  background:rgba(255,255,255,.1);border:1px solid var(--line-dark);color:#fff;cursor:pointer;display:grid;place-items:center}
.lightbox__close:hover{background:var(--amber);color:var(--navy-900)}

/* ---------- 15. Logos / références ---------- */
.marquee{overflow:hidden;position:relative;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__track{display:flex;gap:64px;width:max-content;animation:slide 34s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.marquee span{
  font-family:var(--ff-title);font-weight:700;font-size:.9rem;letter-spacing:.18em;text-transform:uppercase;
  color:#7f8eab;white-space:nowrap;display:inline-flex;align-items:center;gap:14px;
}
.marquee span::before{content:"";width:7px;height:7px;background:var(--gold-500);transform:rotate(45deg)}

/* Tuiles de logos clients.
   Chaque logo arrive avec son propre fond (blanc, bleu marine, transparent) et
   ses propres proportions. La tuile blanche les ramène à une présentation
   commune : sans elle, un logo sur fond sombre et un logo détouré placés côte à
   côte donnent un bandeau qui part dans tous les sens.
   Un client dont le fichier logo n'est pas encore déposé reste affiché en
   toutes lettres, avec le style .marquee span ci-dessus. */
.cli{
  flex:none;display:flex;align-items:center;justify-content:center;overflow:hidden;
  width:172px;height:104px;padding:12px 18px;
  background:#fff;border:1px solid rgba(11,18,40,.09);border-radius:12px;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.cli img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
a.cli:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.marquee--logos .marquee__track{gap:30px;align-items:center}
@media (max-width:560px){.cli{width:146px;height:88px;padding:10px 14px}}
@media (prefers-reduced-motion:reduce){.marquee__track{animation:none}}

/* ---------- 16. Bandeau CTA ---------- */
.cta{position:relative;overflow:hidden;background:var(--navy-800)}
.cta__bg{position:absolute;inset:0}
.cta__bg img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
.cta__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,11,26,.96),rgba(6,11,26,.72) 60%,rgba(6,11,26,.55))}
.cta__inner{position:relative;z-index:2;padding-block:clamp(56px,8vw,104px);max-width:680px}
.cta h2{color:#fff}
.cta p{color:#bcc7dd}

/* ---------- 17. Formulaire ---------- */
.formcard{background:#fff;border:1px solid var(--line-light);border-radius:var(--radius-lg);padding:clamp(24px,3.4vw,44px);box-shadow:var(--shadow-md)}
.fieldset{border:0;padding:0;margin:0 0 30px}
.fieldset legend{
  font-family:var(--ff-title);font-weight:800;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-600);padding:0;margin-bottom:18px;display:flex;align-items:center;gap:10px;
}
.fieldset legend::after{content:"";height:1px;flex:1;background:var(--line-light)}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fgrid--3{grid-template-columns:repeat(3,1fr)}
@media (max-width:680px){.fgrid,.fgrid--3{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:7px}
.field--full{grid-column:1/-1}
.field label{font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.field label .req{color:#d64545}
.field input,.field select,.field textarea{
  width:100%;padding:13px 15px;border:1px solid var(--line-light);border-radius:var(--radius);
  background:var(--paper-2);transition:border-color .25s,background .25s,box-shadow .25s;
}
.field textarea{min-height:132px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0;border-color:var(--amber);background:#fff;box-shadow:0 0 0 4px rgba(252,163,17,.16);
}
.field input:user-invalid,.field select:user-invalid,.field textarea:user-invalid{border-color:#d64545}
.field .hint{font-size:.76rem;color:var(--ink-soft)}
.formnote{display:flex;gap:11px;align-items:flex-start;font-size:.82rem;color:var(--ink-soft);margin-top:18px}
.formnote svg{width:17px;height:17px;color:var(--gold-600);flex:none;margin-top:2px}

.formok{
  margin-top:18px;padding:15px 18px;border-radius:var(--radius);
  background:rgba(37,211,102,.12);border:1px solid rgba(37,211,102,.5);
  color:#0d5a2c;font-size:.92rem;
}
.formok a{text-decoration:underline;font-weight:600}

/* Cartes de contact rapides */
.ccard{
  display:flex;flex-direction:column;gap:4px;height:100%;
  padding:28px 26px;border:1px solid var(--line-dark);border-radius:var(--radius);
  background:rgba(255,255,255,.035);
  transition:transform .4s var(--ease),background .4s var(--ease),border-color .4s var(--ease);
}
.ccard:hover{transform:translateY(-6px);background:rgba(255,255,255,.07);border-color:rgba(201,162,39,.6)}
.ccard__ico{
  width:48px;height:48px;display:grid;place-items:center;margin-bottom:14px;
  border-radius:var(--radius);background:rgba(201,162,39,.14);color:var(--gold-400);
}
.ccard__ico svg{width:22px;height:22px}
.ccard__k{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:#8ea0c2;font-weight:700}
.ccard__v{font-family:var(--ff-title);font-size:1.24rem;color:#fff;letter-spacing:-.01em}
.ccard small{color:#8ea0c2;font-size:.82rem;margin-top:5px}

/* Encadré coordonnées */
.infobox{
  background:var(--navy-800);color:#dbe3f2;border-radius:var(--radius-lg);
  padding:clamp(24px,3vw,38px);box-shadow:var(--shadow-md);
}
.infobox h2{color:#fff;margin-bottom:8px}

/* Blocs contact */
.cinfo{display:flex;gap:16px;padding:22px 0;border-bottom:1px solid var(--line-dark)}
.cinfo:last-child{border-bottom:0}
.cinfo__ico{width:46px;height:46px;flex:none;display:grid;place-items:center;border:1px solid var(--line-dark);border-radius:var(--radius);color:var(--gold-400)}
.cinfo__ico svg{width:21px;height:21px}
.cinfo h3{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-400);margin-bottom:5px;font-weight:700}
.cinfo p,.cinfo a{margin:0;color:#dbe3f2;font-size:.98rem}
.cinfo a:hover{color:var(--gold-400)}
.cinfo small{display:block;color:#8ea0c2;font-size:.8rem;margin-top:3px}

.mapwrap{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line-light);aspect-ratio:16/10;background:var(--paper-3)}
.mapwrap iframe{width:100%;height:100%;border:0;display:block;filter:grayscale(.35) contrast(1.04)}

/* ---------- 18. Pied de page ---------- */
.footer{background:var(--navy-950);color:#93a3c1;padding-block:clamp(52px,7vw,84px) 0;position:relative}
.footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:clamp(28px,3.4vw,52px)}
@media (max-width:900px){.footer__grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer__grid{grid-template-columns:1fr}}
.footer h4{font-family:var(--ff-title);font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:#fff;margin-bottom:20px}
.footer li{margin-bottom:11px;font-size:.92rem}
.footer a{transition:color .25s,padding-left .25s}
.footer a:hover{color:var(--gold-400);padding-left:5px}
.footer__brand img{width:74px;margin-bottom:18px}
.footer__brand p{font-size:.92rem;max-width:34ch}
.social{display:flex;gap:10px;margin-top:20px}
.social a{
  width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line-dark);border-radius:var(--radius);
  color:#93a3c1;transition:all .3s var(--ease);padding:0;
}
.social a:hover{background:var(--gold-500);border-color:var(--gold-500);color:var(--navy-900);transform:translateY(-3px)}
.social svg{width:17px;height:17px}
.footer__bottom{
  margin-top:clamp(38px,5vw,60px);border-top:1px solid var(--line-dark);
  padding-block:24px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.82rem;
}

/* ---------- 19. Bouton WhatsApp flottant ---------- */
.wa{
  position:fixed;right:20px;bottom:20px;z-index:90;
  display:inline-flex;align-items:center;gap:11px;
  background:#25d366;color:#06331a;padding:14px 20px;border-radius:100px;
  font-family:var(--ff-title);font-weight:700;font-size:.82rem;
  box-shadow:0 16px 34px -14px rgba(37,211,102,.9);
  transition:transform .3s var(--ease);
}
.wa:hover{transform:translateY(-4px)}
.wa svg{width:21px;height:21px}
@media (max-width:560px){.wa{padding:15px;border-radius:50%}.wa span{display:none}}

/* ---------- 20. Révélation au scroll ---------- */
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .reveal.is-in{opacity:1;transform:none}
.js .reveal[data-d="1"]{transition-delay:.1s}
.js .reveal[data-d="2"]{transition-delay:.2s}
.js .reveal[data-d="3"]{transition-delay:.3s}
.js .reveal[data-d="4"]{transition-delay:.4s}
.js .reveal[data-d="5"]{transition-delay:.5s}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;transition:none}
  .media:hover img,.svc:hover .svc__media img,.gallery figure:hover img{transform:none}
}

/* ---------- 20bis. Pages courtes : pied de page collé en bas ---------- */
body.short{min-height:100vh;display:flex;flex-direction:column}
body.short main{flex:1 0 auto;display:flex;flex-direction:column}
body.short main > .hero{flex:1 0 auto}
body.short .footer{flex:none;padding-block:0}

/* ---------- 21. Impression ---------- */

/* ---------- 20. Selecteur de langue ---------- */
/* Deux etats seulement : la langue affichee est un bouton plein, l'autre un lien.
   Un menu deroulant serait plus lourd pour deux langues, et masquerait justement
   l'information la plus utile — dans quelle langue on se trouve. */
.langues{display:inline-flex;align-items:center;gap:3px}
.langues a,
.langues__actif{
  font-family:var(--ff-title);font-weight:700;font-size:.72rem;letter-spacing:.09em;
  padding:3px 8px;border-radius:2px;line-height:1.5;
  transition:color .25s,background .25s;
}
.langues a{color:#8b99b4}
.langues a:hover{color:var(--navy-900);background:var(--gold-400)}
.langues__actif{color:var(--navy-900);background:var(--gold-500)}
.langues abbr{text-decoration:none;border-bottom:0;cursor:inherit}
/* Dans le menu mobile, le selecteur devient une vraie cible tactile (44 px). */
.langues--drawer{margin-top:22px;gap:8px}
.langues--drawer a,
.langues--drawer .langues__actif{font-size:.95rem;padding:11px 18px;border-radius:var(--radius)}
.langues--drawer a{border:1px solid var(--line-dark)}
@media print{
  .header,.topbar,.wa,.drawer,.burger,.cta,.lightbox{display:none!important}
  body{color:#000;background:#fff}
  .section{padding-block:18px}
}