/* ============================================================
   DronéoTech
   Parti pris : une fiche technique, pas un thème.
   Pas de cartes, pas d'ombres portées, pas de coins arrondis.
   La structure repose sur des filets d'1 px et une grille asymétrique.

   Palette de marque : #1D2892, #000000, #FFFFFF · CTA : #E8792A
   --ink / --glow sont des nuances du bleu de marque.
   ============================================================ */

:root{
  --navy:#1D2892;
  --glow:#6E7DF0;
  --ink:#080B1E;
  --ink-2:#0D1230;
  --cta:#E8792A;
  --cta-dark:#cf6819;

  --line:rgba(255,255,255,.13);
  --line-2:rgba(255,255,255,.26);
  --txt:rgba(255,255,255,.74);

  --paper:#FFFFFF;
  --paper-ink:#0A0C18;
  --paper-line:#DFE1EA;
  --paper-txt:#4C5060;

  --head:"Barlow Condensed","Oswald","Arial Narrow",Impact,system-ui,sans-serif;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --rail:0px;
  --gut:clamp(20px,5vw,64px);
  --ease:cubic-bezier(.16,.84,.28,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:70px;}
body{
  margin:0;padding-left:var(--rail);
  font-family:var(--body);font-size:17px;line-height:1.62;
  color:#fff;background:var(--ink);
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block;}
h1,h2,h3{font-family:var(--head);font-weight:700;text-transform:uppercase;line-height:.92;margin:0;}
p{margin:0 0 1.05em;}

.skip-link{position:absolute;left:-9999px;top:0;background:var(--cta);color:#fff;padding:10px 16px;z-index:300;font-weight:600;}
.skip-link:focus{left:0;}
:focus-visible{outline:2px solid var(--cta);outline-offset:3px;}

/* ---------- Index de section (le repère de toute la page) ---------- */
.idx{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--navy);display:flex;align-items:center;gap:14px;margin:0 0 22px;
}
.idx i{display:block;width:38px;height:1px;background:currentColor;opacity:.5;}
.idx.light{color:var(--glow);}

/* ---------- Boutons / liens ---------- */
.btn{
  display:inline-block;font-family:var(--head);font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;font-size:18px;line-height:1;padding:17px 30px;border:0;cursor:pointer;
  text-decoration:none;background:var(--cta);color:#fff;
  transition:background-color .2s,transform .2s var(--ease);
}
.btn:hover{background:var(--cta-dark);transform:translateY(-2px);}
.btn:active{transform:none;}
.btn-wide{display:block;width:100%;text-align:center;}

.link-arrow{
  font-family:var(--head);font-weight:600;text-transform:uppercase;letter-spacing:.06em;
  font-size:18px;color:#fff;text-decoration:none;
  display:inline-flex;align-items:center;gap:12px;padding:17px 0;
  border-bottom:1px solid var(--line-2);transition:border-color .2s,gap .2s var(--ease);
}
.link-arrow::after{content:"→";color:var(--cta);}
.link-arrow:hover{border-color:var(--cta);gap:18px;}

/* ---------- Barre haute ---------- */
.topbar{
  position:sticky;top:0;z-index:80;
  display:flex;align-items:center;gap:20px;
  height:66px;padding:0 var(--gut) 0 0;
  background:rgba(8,11,30,.88);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.topbar-logo{padding:0 0 0 var(--gut);line-height:0;flex:none;}
.topbar-logo img{height:36px;width:auto;}
.topnav{display:none;gap:26px;margin-left:auto;}
.topnav a{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--txt);text-decoration:none;padding:6px 0;border-bottom:1px solid transparent;
  transition:color .2s,border-color .2s;
}
.topnav a:hover{color:#fff;border-color:var(--cta);}

/* ---------- Rail latéral (desktop) ---------- */
.rail{display:none;}

/* ============================================================
   HERO — image pleine page + viseur thermique interactif
   Deux couches d'image superposées : le visible, et sa transposition
   infrarouge révélée par un masque circulaire qui suit le pointeur.
   ============================================================ */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:calc(100svh - 66px);
  display:grid;grid-template-rows:1fr auto;
  background:var(--ink);
  --sx:62%;--sy:56%;--sr:104px;
}

.shots{position:absolute;inset:0;z-index:0;}
.shot{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 40%;
}
.shot-ir{
  position:absolute;inset:0;
  -webkit-mask-image:radial-gradient(circle var(--sr) at var(--sx) var(--sy),
    #000 0 72%,rgba(0,0,0,.55) 88%,transparent 100%);
          mask-image:radial-gradient(circle var(--sr) at var(--sx) var(--sy),
    #000 0 72%,rgba(0,0,0,.55) 88%,transparent 100%);
}

/* Voile : garde le texte lisible et fond la photo dans le bleu nuit */
.hero-scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(100deg,rgba(8,11,30,.97) 0%,rgba(8,11,30,.88) 26%,
      rgba(8,11,30,.38) 56%,rgba(8,11,30,.18) 78%,rgba(8,11,30,.62) 100%),
    linear-gradient(180deg,rgba(8,11,30,.72) 0%,transparent 22%,
      transparent 58%,rgba(8,11,30,.92) 100%),
    rgba(29,40,146,.14);
}
.fx{position:absolute;inset:0;width:100%;height:100%;z-index:2;opacity:.5;pointer-events:none;}
.hero-mesh{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px) 0 0/100% 78px,
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px) 0 0/78px 100%,
    repeating-linear-gradient(0deg,rgba(255,255,255,.022) 0 1px,transparent 1px 3px);
  -webkit-mask-image:linear-gradient(90deg,#000 0 42%,transparent 76%);
          mask-image:linear-gradient(90deg,#000 0 42%,transparent 76%);
}
.hero-scan{
  position:absolute;left:0;right:0;height:220px;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(110,125,240,.16) 46%,rgba(232,121,42,.09) 53%,transparent);
  animation:scan 9s linear infinite;
}
@keyframes scan{0%{transform:translateY(-260px);opacity:0}12%{opacity:1}86%{opacity:1}100%{transform:translateY(112vh);opacity:0}}

/* ---------- Viseur ---------- */
.scope{
  position:absolute;z-index:3;pointer-events:none;
  left:var(--sx);top:var(--sy);
  width:calc(var(--sr) * 2);height:calc(var(--sr) * 2);
  margin:calc(var(--sr) * -1) 0 0 calc(var(--sr) * -1);
  border:1px solid rgba(255,255,255,.55);border-radius:50%;
  box-shadow:0 0 0 1px rgba(8,11,30,.5),0 0 60px rgba(110,125,240,.28) inset;
  opacity:0;transition:opacity .5s var(--ease);
}
.hero.scope-on .scope{opacity:1;}
.scope-dash{
  position:absolute;inset:9px;border-radius:50%;
  border:1px dashed rgba(255,255,255,.32);
  animation:spin 22s linear infinite;
}
.scope-tick{position:absolute;background:var(--cta);}
.tick-t,.tick-b{left:50%;width:1px;height:12px;margin-left:-.5px;}
.tick-l,.tick-r{top:50%;height:1px;width:12px;margin-top:-.5px;}
.tick-t{top:-6px;} .tick-b{bottom:-6px;} .tick-l{left:-6px;} .tick-r{right:-6px;}
.scope-tag{
  position:absolute;left:50%;bottom:-26px;transform:translateX(-50%);
  font-family:var(--mono);font-style:normal;font-size:10px;letter-spacing:.18em;
  color:rgba(255,255,255,.75);white-space:nowrap;
  background:rgba(8,11,30,.6);padding:3px 8px;
}

/* ---------- Repères d'interface ---------- */
.hud{
  display:none;position:absolute;z-index:3;pointer-events:none;
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.5);
}
.hud b{color:var(--cta);}
.hud-tr{top:18px;right:var(--gut);}
.hud-br{bottom:112px;right:var(--gut);}
.hero::before,.hero::after{
  content:"";position:absolute;z-index:3;width:34px;height:34px;pointer-events:none;
  border:1px solid rgba(255,255,255,.35);
}
.hero::before{top:14px;right:14px;border-left:0;border-bottom:0;}
.hero::after{bottom:14px;right:14px;border-left:0;border-top:0;}

/* ---------- Texte ---------- */
.hero-text{
  position:relative;z-index:4;grid-row:1;
  align-self:center;padding:56px var(--gut) 76px;max-width:62ch;
}
.kicker{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.8);display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 26px;
}
.kicker i{display:block;width:24px;height:1px;background:var(--line-2);}
.pulse{
  width:7px;height:7px;border-radius:50%;background:var(--cta);flex:none;
  box-shadow:0 0 0 0 rgba(232,121,42,.7);animation:pulse 2.2s infinite;
}
@keyframes pulse{70%{box-shadow:0 0 0 11px rgba(232,121,42,0)}100%{box-shadow:0 0 0 0 rgba(232,121,42,0)}}

.hero h1{
  font-size:clamp(2.5rem,8.4vw,5.6rem);
  letter-spacing:-.008em;max-width:13ch;margin:0 0 26px;
  text-shadow:0 6px 44px rgba(8,11,30,.75);
}
.hero h1 .w{display:inline-block;opacity:0;transform:translateY(.45em);}
.hero h1.go .w{animation:wordIn .75s var(--ease) forwards;animation-delay:var(--wd,0ms);}
@keyframes wordIn{to{opacity:1;transform:none}}

.lede{
  font-size:clamp(1.05rem,2.3vw,1.26rem);color:rgba(255,255,255,.9);
  max-width:44ch;margin:0 0 32px;text-shadow:0 2px 18px rgba(8,11,30,.7);
}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px;}

.scope-hint{
  margin:26px 0 0;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.48);
  display:flex;align-items:center;gap:10px;max-width:46ch;line-height:1.7;
  transition:opacity .6s;
}
.scope-hint::before{
  content:"";width:16px;height:16px;flex:none;border:1px solid var(--cta);border-radius:50%;
  box-shadow:0 0 0 3px rgba(232,121,42,.16);
}
.scope-hint.gone{opacity:0;}
.sh-touch{display:none;}
body.is-touch .sh-desktop{display:none;}
body.is-touch .sh-touch{display:inline;}

/* ---------- Bandeau de caractéristiques ---------- */
.hero-meta{
  position:relative;z-index:4;grid-row:2;margin:0;
  display:grid;grid-template-columns:1fr 1fr;
  border-top:1px solid var(--line);
  background:rgba(8,11,30,.55);backdrop-filter:blur(6px);
}
.hero-meta > div{padding:16px var(--gut);border-bottom:1px solid var(--line);}
.hero-meta > div:nth-child(odd){border-right:1px solid var(--line);}
.hero-meta dt{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--glow);margin-bottom:4px;}
.hero-meta dd{margin:0;font-size:14px;color:rgba(255,255,255,.92);line-height:1.35;}

/* Entrée des blocs du hero */
.anim{opacity:0;transform:translateY(20px);animation:heroIn .8s var(--ease) forwards;animation-delay:var(--d,0ms);}
@keyframes heroIn{to{opacity:1;transform:none}}

/* ============================================================
   BANDEAU DEFILANT
   ============================================================ */
.ticker{
  background:#000;border-bottom:1px solid var(--line);overflow:hidden;padding:13px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.ticker-track{display:flex;width:max-content;animation:marquee 40s linear infinite;}
.ticker:hover .ticker-track{animation-play-state:paused;}
@keyframes marquee{to{transform:translateX(-50%)}}
.ticker-list{display:flex;align-items:center;list-style:none;margin:0;padding:0;}
.ticker-list li{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.72);white-space:nowrap;padding:0 24px;display:flex;align-items:center;
}
.ticker-list li::before{content:"";width:5px;height:5px;background:var(--cta);transform:rotate(45deg);margin-right:14px;flex:none;}

/* ============================================================
   EN-TÊTES DE SECTION
   ============================================================ */
.sechead{padding:64px var(--gut) 40px;max-width:46ch;}
.sechead h2{font-size:clamp(2.2rem,7vw,3.6rem);letter-spacing:-.005em;}
.sechead-txt{margin:22px 0 0;color:var(--paper-txt);font-size:1.03rem;}
.darksec .sechead-txt{color:var(--txt);}
h2.light{color:#fff;}

/* Révélation au défilement (activée seulement si JS répond) */
.js [data-reveal]{
  opacity:0;transform:translateY(26px);
  transition:opacity .75s var(--ease),transform .75s var(--ease);
  transition-delay:var(--d,0ms);
}
.js [data-reveal].in{opacity:1;transform:none;}

/* ============================================================
   01 · OFFRES — dalle claire, deux colonnes séparées d'un filet
   ============================================================ */
.offres{background:var(--paper);color:var(--paper-ink);}
.offres .idx{color:var(--navy);}
.duo{display:grid;grid-template-columns:1fr;border-top:1px solid var(--paper-line);}
.prestation{
  padding:0 var(--gut) 56px;
  display:flex;flex-direction:column;
  border-bottom:1px solid var(--paper-line);
}
/* Cadre commun aux deux visuels d'offre : même ratio, même recadrage, même filet.
   Les sources d'origine (5/4 et 9/16) ont été ramenées en 4/3 avant intégration. */
.prestation-visuel{
  position:relative;margin:0 calc(var(--gut) * -1) 26px;
  aspect-ratio:4/3;overflow:hidden;
  border-bottom:1px solid var(--paper-line);
  background:#EDEFF5;
}
.prestation-visuel img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .7s var(--ease);
}
.prestation:hover .prestation-visuel img{transform:scale(1.03);}
.prestation-num{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;color:var(--navy);margin:0 0 12px;
}
.prestation h3{
  font-size:clamp(1.75rem,5.2vw,2.35rem);color:var(--navy);margin:0 0 14px;letter-spacing:-.005em;
}
.cible{
  font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--paper-txt);margin:0 0 26px;padding-bottom:20px;border-bottom:1px solid var(--paper-line);
  line-height:1.7;
}
.prestation > p{color:#22252F;}

.livrable{
  border-left:2px solid var(--navy);padding:2px 0 2px 18px;margin:8px 0 26px;
  font-size:15.5px;color:#22252F;
}
.livrable span{
  display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--navy);margin-bottom:6px;
}

.fiche{margin:0 0 30px;border-top:1px solid var(--paper-line);}
.fiche > div{
  display:flex;gap:20px;align-items:baseline;
  padding:11px 0;border-bottom:1px solid var(--paper-line);
}
.fiche dt{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--paper-txt);min-width:76px;flex:none;
}
.fiche dd{margin:0;font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;color:var(--paper-ink);}

.tarif{
  display:flex;align-items:baseline;gap:12px;margin:auto 0 20px;
  font-family:var(--head);text-transform:uppercase;
}
.tarif span{font-size:16px;letter-spacing:.08em;color:var(--paper-txt);}
.tarif strong{font-size:44px;font-weight:700;color:var(--navy);line-height:1;letter-spacing:-.01em;}

/* ============================================================
   02 · METHODE
   ============================================================ */
.darksec{background:var(--ink);}
.methode{border-top:1px solid var(--line);}
.etapes{
  list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;
  border-top:1px solid var(--line);
}
.etapes li{
  padding:34px var(--gut) 38px;border-bottom:1px solid var(--line);position:relative;
  transition:background-color .3s;
}
.etapes li:hover{background:rgba(110,125,240,.05);}
.etape-n{
  display:block;font-family:var(--head);font-weight:700;font-size:64px;line-height:.8;
  color:transparent;-webkit-text-stroke:1.5px var(--glow);margin-bottom:18px;
}
.etapes h3{font-size:1.5rem;color:#fff;margin-bottom:10px;}
.etapes p{margin:0;color:var(--txt);max-width:40ch;}

/* ============================================================
   03 · ZONE
   ============================================================ */
.zone{border-top:1px solid var(--line);overflow:hidden;position:relative;}
.zone-inner{display:grid;grid-template-columns:1fr;align-items:center;}
.zone-txt-col{padding:64px var(--gut) 20px;}
.zone-txt-col h2{font-size:clamp(2.2rem,7vw,3.6rem);margin-bottom:24px;}
.zone-txt-col p{color:rgba(255,255,255,.9);max-width:46ch;font-size:1.06rem;}
.zone-txt-col .secondaire{color:var(--txt);font-size:.97rem;}

.radar{
  position:relative;width:min(420px,86vw);aspect-ratio:1;
  margin:10px auto 64px;display:grid;place-items:center;
}
.radar > span{position:absolute;border:1px solid rgba(110,125,240,.35);border-radius:50%;}
.radar > span:nth-child(1){inset:0;}
.radar > span:nth-child(2){inset:13%;}
.radar > span:nth-child(3){inset:28%;}
.radar > span:nth-child(4){inset:43%;border-color:rgba(110,125,240,.6);}
.radar-sweep{
  position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(110,125,240,.38),rgba(110,125,240,0) 26%,transparent);
  animation:spin 5s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.radar-core{
  position:absolute;width:11px;height:11px;background:var(--cta);border-radius:50%;
  box-shadow:0 0 0 0 rgba(232,121,42,.65);animation:pulse 2.4s infinite;
}
.radar-cap{
  position:absolute;left:50%;bottom:-4px;transform:translateX(-50%);
  font-family:var(--mono);font-style:normal;font-size:10.5px;letter-spacing:.18em;
  color:rgba(255,255,255,.55);white-space:nowrap;
}

/* ============================================================
   04 · FAQ
   ============================================================ */
.faq{border-top:1px solid var(--line);}
.faq-list{border-top:1px solid var(--line);}
.faq details{border-bottom:1px solid var(--line);}
.faq summary{
  cursor:pointer;list-style:none;position:relative;
  padding:24px calc(var(--gut) + 34px) 24px var(--gut);
  font-family:var(--head);font-weight:600;text-transform:uppercase;letter-spacing:.01em;
  font-size:1.24rem;line-height:1.15;color:#fff;transition:color .2s;
}
.faq summary:hover{color:var(--cta);}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::before,.faq summary::after{
  content:"";position:absolute;right:var(--gut);top:50%;background:var(--cta);
  transition:transform .3s var(--ease),opacity .3s;
}
.faq summary::before{width:14px;height:1.5px;margin-top:-.75px;}
.faq summary::after{width:1.5px;height:14px;right:calc(var(--gut) + 6.25px);margin-top:-7px;}
.faq details[open] summary::after{transform:rotate(90deg);opacity:0;}
.faq details p{margin:0;padding:0 var(--gut) 26px;color:var(--txt);max-width:70ch;}

/* ============================================================
   05 · CONTACT
   ============================================================ */
.contact{
  display:grid;grid-template-columns:1fr;border-top:1px solid var(--line);
  background:
    radial-gradient(90% 70% at 10% 0%,rgba(29,40,146,.5),transparent 62%),
    var(--ink);
}
.contact-left{padding:64px var(--gut) 44px;}
.contact-left h2{font-size:clamp(2.2rem,7vw,3.6rem);margin-bottom:24px;}
.contact-lede{color:var(--txt);max-width:40ch;margin-bottom:34px;}

.tel-display{
  display:inline-block;font-family:var(--head);font-weight:700;
  font-size:clamp(2.1rem,8vw,3.2rem);line-height:1;letter-spacing:-.01em;
  color:#fff;text-decoration:none;border-bottom:2px solid var(--cta);
  padding-bottom:6px;margin-bottom:34px;transition:color .2s;
}
.tel-display:hover{color:var(--cta);}

.coord{margin:0;border-top:1px solid var(--line);}
.coord > div{display:flex;flex-wrap:wrap;gap:6px 20px;padding:14px 0;border-bottom:1px solid var(--line);}
.coord dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--glow);min-width:78px;}
.coord dd{margin:0;color:rgba(255,255,255,.92);}
.coord a{color:#fff;text-decoration:none;border-bottom:1px solid var(--cta);}

.contact-right{
  background:var(--ink-2);border-top:1px solid var(--line);
  padding:44px var(--gut) 52px;
}
.form-title{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--glow);margin:0 0 26px;padding-bottom:14px;border-bottom:1px solid var(--line);
}
.field{margin-bottom:22px;}
.field label{
  display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.72);margin-bottom:9px;
}
.field label span{color:var(--cta);}
.field input,.field select,.field textarea{
  width:100%;font-family:var(--body);font-size:16px;padding:0 0 11px;border-radius:0;
  background:transparent;border:0;border-bottom:1px solid var(--line-2);color:#fff;
  transition:border-color .2s;
}
.field select{padding-bottom:11px;}
.field select option{color:#0A0C18;}
.field textarea{resize:vertical;min-height:104px;padding-top:4px;}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.36);}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-bottom-color:var(--cta);}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-bottom-color:#FF8A7A;}
.err{margin:8px 0 0;font-size:13.5px;color:#FFB3A8;}
.form-note{margin:18px 0 0;font-size:15px;}
.form-note.ok{color:#8FE3AC;}
.form-note.ko{color:#FFB3A8;}
.form-legal{margin:14px 0 0;font-size:12.5px;color:rgba(255,255,255,.5);}

/* ============================================================
   PLACEHOLDERS MÉDIA
   ============================================================ */
.ph{
  display:flex;flex-direction:column;justify-content:center;gap:10px;
  padding:26px 22px;text-align:center;position:relative;
  background:repeating-linear-gradient(45deg,rgba(110,125,240,.07) 0 9px,transparent 9px 18px),rgba(255,255,255,.03);
  border:1px dashed rgba(110,125,240,.5);
}
.ph-tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--glow);}
.ph-txt{font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.62);max-width:36ch;margin:0 auto;}
.ph-slab .ph-txt{max-width:100%;}


/* ============================================================
   FOOTER — réduit à la marque et aux pages légales
   ============================================================ */
.site-footer{background:#000;border-top:1px solid var(--line);color:var(--txt);}
.footer-main{
  display:flex;flex-direction:column;gap:26px;
  padding:40px var(--gut) 32px;
}
.footer-brand{display:block;line-height:0;}
.footer-brand img{height:46px;width:auto;opacity:.9;transition:opacity .2s;}
.footer-brand:hover img{opacity:1;}
.footer-links{display:flex;flex-wrap:wrap;gap:12px 28px;}
.footer-links a{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--txt);text-decoration:none;padding-bottom:4px;
  border-bottom:1px solid transparent;transition:color .2s,border-color .2s;
}
.footer-links a:hover{color:#fff;border-bottom-color:var(--cta);}
.footer-bottom{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;
  border-top:1px solid var(--line);
  padding:16px var(--gut) 20px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
}
.footer-bottom p{margin:0;}
.footer-bottom a{color:#fff;text-decoration:none;border-bottom:1px solid var(--cta);}

/* ============================================================
   PAGES LÉGALES
   ============================================================ */
.page-doc{padding-left:0;}
.doc{padding:44px var(--gut) 72px;max-width:80ch;}
.doc-back{
  display:inline-flex;align-items:center;gap:10px;margin-bottom:34px;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--txt);text-decoration:none;transition:color .2s;
}
.doc-back::before{content:"←";color:var(--cta);}
.doc-back:hover{color:#fff;}
.doc h1{font-size:clamp(2.1rem,7vw,3.2rem);margin:0 0 16px;letter-spacing:-.005em;}
.doc-meta{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.45);margin:0 0 8px;
}
.doc-intro{color:var(--txt);max-width:64ch;margin:0 0 8px;}
.doc section{border-top:1px solid var(--line);padding:30px 0 6px;}
.doc h2{
  display:flex;gap:16px;align-items:baseline;
  font-size:1.3rem;color:#fff;margin:0 0 16px;
}
.doc h2 span{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;color:var(--glow);
  flex:none;position:relative;top:-2px;
}
.doc p,.doc li{color:var(--txt);}
.doc a{color:#fff;text-decoration:none;border-bottom:1px solid var(--cta);}
.doc ul{margin:0 0 1.05em;padding-left:20px;}
.doc li{margin-bottom:6px;}
.doc dl{margin:0 0 1.05em;}
.doc dl > div{display:flex;flex-wrap:wrap;gap:4px 20px;padding:9px 0;border-bottom:1px solid var(--line);}
.doc dt{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.5);min-width:190px;
}
.doc dd{margin:0;color:rgba(255,255,255,.92);}
.todo{
  display:inline-block;background:var(--cta);color:#fff;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  padding:2px 8px;
}

/* ============================================================
   BARRE D'ACTION MOBILE
   ============================================================ */
.actionbar{
  position:fixed;left:0;right:0;bottom:0;z-index:95;display:flex;
  border-top:1px solid var(--line);background:rgba(8,11,30,.94);backdrop-filter:blur(12px);
}
.actionbar a{
  flex:1;text-align:center;padding:15px 8px;text-decoration:none;color:#fff;
  font-family:var(--head);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:17px;
}
.actionbar a:first-child{border-right:1px solid var(--line);}
.actionbar .ab-cta{background:var(--cta);flex:1.6;}
body{padding-bottom:54px;}

/* ============================================================
   ≥ 760px
   ============================================================ */
@media (min-width:760px){
  .topnav{display:flex;}
  .hud{display:block;}
  .hero-text{padding:80px var(--gut) 72px;}
  .hero{--sr:135px;}
  .hero-meta{grid-template-columns:repeat(4,1fr);}
  .hero-meta > div{border-right:1px solid var(--line);}
  .hero-meta > div:last-child{border-right:0;}
  .duo{grid-template-columns:1fr 1fr;}
  .prestation{border-bottom:0;border-right:1px solid var(--paper-line);}
  .prestation:last-child{border-right:0;}
  .prestation-visuel{margin-left:calc(var(--gut) * -1);margin-right:calc(var(--gut) * -1);}
  .etapes{grid-template-columns:repeat(3,1fr);}
  .etapes li{border-right:1px solid var(--line);border-bottom:0;}
  .etapes li:last-child{border-right:0;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .zone-inner{grid-template-columns:1fr 1fr;}
  .radar{margin:0 auto;}
  .zone-txt-col{padding-bottom:64px;}
}

/* ============================================================
   ≥ 1080px — rail latéral, hero en deux colonnes pleine hauteur
   ============================================================ */
@media (min-width:1080px){
  :root{--rail:88px;--gut:clamp(36px,4.4vw,72px);}
  body{font-size:17.5px;padding-bottom:0;}
  html{scroll-padding-top:0;}

  .topbar{display:none;}
  .page-doc .topbar{display:flex;}
  .actionbar{display:none;}

  .rail{
    display:flex;flex-direction:column;align-items:center;
    position:fixed;top:0;left:0;bottom:0;width:88px;z-index:85;
    border-right:1px solid var(--line);background:var(--ink);
  }
  .rail-logo{
    display:block;width:100%;padding:22px 0 20px;line-height:0;
    border-bottom:1px solid var(--line);
  }
  .rail-logo img{height:44px;width:auto;margin:0 auto;opacity:.94;transition:opacity .2s;}
  .rail-logo:hover img{opacity:1;}
  .rail-index{list-style:none;margin:auto 0;padding:0;display:grid;gap:22px;}
  .rail-index a{
    font-family:var(--mono);font-size:11px;letter-spacing:.12em;
    color:rgba(255,255,255,.34);text-decoration:none;position:relative;padding-left:16px;
    transition:color .25s;
  }
  .rail-index a::before{
    content:"";position:absolute;left:0;top:50%;width:9px;height:1px;background:currentColor;
    transform:scaleX(.5);transform-origin:left;transition:transform .25s,background-color .25s;
  }
  .rail-index a:hover{color:#fff;}
  .rail-index a::after{
    content:attr(data-label);position:absolute;left:34px;top:50%;transform:translateY(-50%) translateX(-6px);
    font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
    color:#fff;background:var(--ink-2);border:1px solid var(--line);padding:5px 10px;
    white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s var(--ease);
  }
  .rail-index a:hover::after,.rail-index a:focus-visible::after{opacity:1;transform:translateY(-50%) translateX(0);}
  .rail-index a.on{color:var(--cta);}
  .rail-index a.on::before{transform:scaleX(1);background:var(--cta);}
  .rail-cta{
    display:block;width:100%;background:var(--cta);color:#fff;text-decoration:none;
    padding:24px 0;transition:background-color .2s;
  }
  .rail-cta:hover{background:var(--cta-dark);}
  .rail-cta span{
    writing-mode:vertical-rl;transform:rotate(180deg);display:block;margin:0 auto;
    font-family:var(--head);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:16px;
  }
  .rail-mark{
    writing-mode:vertical-rl;transform:rotate(180deg);margin:0 0 24px;
    font-family:var(--mono);font-size:10px;letter-spacing:.28em;text-transform:uppercase;
    color:rgba(255,255,255,.3);
  }
  .rail-progress{
    position:absolute;right:-1px;top:0;width:1px;height:0;background:var(--cta);
  }

  .hero{--sr:170px;min-height:100svh;grid-template-rows:1fr auto;}
  .hero-text{padding:0 var(--gut) 24px;max-width:none;width:min(58%,880px);}
  .hero-meta{grid-template-columns:repeat(4,1fr);border-bottom:0;}
  .hero-meta > div{border-bottom:0;}
  .hero h1{font-size:clamp(3.4rem,5.6vw,5.6rem);max-width:13ch;}
  .hud-br{bottom:104px;}

  .sechead{padding:96px var(--gut) 56px;max-width:52ch;}

  /* En-tête sur deux colonnes : le titre tient la gauche, le chapô
     s'aligne sur sa dernière ligne à droite, séparé par un filet. */
  .sechead-split{
    display:grid;grid-template-columns:1.08fr .92fr;
    gap:0 clamp(40px,5vw,84px);
    max-width:none;align-items:end;
  }
  .sechead-split .idx{grid-column:1;grid-row:1;}
  .sechead-split h2{grid-column:1;grid-row:2;font-size:clamp(2.6rem,4.6vw,4.1rem);}
  .sechead-split .sechead-txt{
    grid-column:2;grid-row:2;margin:0;align-self:end;
    border-left:1px solid var(--paper-line);
    padding:2px 0 6px clamp(26px,3vw,52px);
    font-size:1.08rem;max-width:46ch;
  }
  .prestation{padding:0 var(--gut) 64px;}
  .etapes li{padding:44px var(--gut) 52px;}
  .etape-n{font-size:86px;}
  .contact{grid-template-columns:1fr 1fr;}
  .contact-left{padding:96px var(--gut) 90px;}
  .contact-right{border-top:0;border-left:1px solid var(--line);padding:96px var(--gut) 90px;}
  .zone-txt-col{padding:96px var(--gut);}
  .faq summary{font-size:1.42rem;}
  .footer-main{
    flex-direction:row;align-items:center;justify-content:space-between;
    padding:36px var(--gut) 32px;
  }
  .doc{padding:64px var(--gut) 96px;}
  .doc section{padding:38px 0 8px;}
}

@media (min-width:1500px){
  .hero h1{font-size:5.6rem;}
  .sechead h2,.zone-txt-col h2,.contact-left h2{font-size:3.9rem;}
}

/* ============================================================
   MOUVEMENT RÉDUIT
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation:none !important;transition:none !important;}
  .anim,.js [data-reveal],.hero h1 .w{opacity:1 !important;transform:none !important;}
  .fx,.hero-scan{display:none;}
  .hero{--sx:64%;--sy:56%;}
  .hero .scope{opacity:1;}
}

/* Entrée des blocs du hero */
.anim{opacity:0;transform:translateY(20px);animation:heroIn .8s var(--ease) forwards;animation-delay:var(--d,0ms);}
@keyframes heroIn{to{opacity:1;transform:none}}