/* ==========================================================================
   JDT – Jost Drone Technologie — feuille de style unique (one-page)
   Direction « Signal thermique » : palette ironbow, Barlow Condensed + Barlow,
   esthétique d'instrument de mesure (viseur, grille, halos de chaleur).
   Tout est lisible sans JavaScript ; les animations ne s'appliquent que si
   le script est chargé et que l'utilisateur n'a pas demandé moins de mouvement.
   ========================================================================== */

/* 1. Polices auto-hébergées (licence OFL, sous-ensemble latin) ------------- */
@font-face{font-family:"Barlow";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/barlow-latin-400-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/barlow-latin-500-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow";font-style:normal;font-weight:600;font-display:swap;src:url("/assets/fonts/barlow-latin-600-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:600;font-display:swap;src:url("/assets/fonts/barlow-condensed-latin-600-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:700;font-display:swap;src:url("/assets/fonts/barlow-condensed-latin-700-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* Polices de repli dimensionnées comme Barlow, pour que la mise en page ne bouge pas quand la
   vraie police arrive (mesuré : Arial Bold 31 % plus large que Barlow Condensed 700 ; Arial à 94 %
   garde le même nombre de lignes que Barlow dans le hero). Le titre du hero est limité en em et
   non en ch, unité qui dépend de la police affichée. Mesuré le 26/09/2026 avec les polices
   retardées de 0,8 s : CLS inférieur à 0,01 de 390 à 1440 px. */
@font-face{font-family:"Barlow Condensed Repli";src:local("Arial Bold"),local("Arial-BoldMT"),local("Roboto Bold"),local("Arial");font-weight:600 700;size-adjust:76%}
@font-face{font-family:"Barlow Repli";src:local("Arial"),local("ArialMT"),local("Roboto");font-weight:400 600;size-adjust:94%}

/* 2. Jetons ----------------------------------------------------------------- */
:root{
  --bg:#0F1730; --bg2:#141D3A; --panel:#1A2547; --deep:#0A1024;
  --line:rgba(242,240,234,.12); --line-2:rgba(242,240,234,.22);
  --ink:#F2F0EA; --muted:#AEB5CB; --dim:#7C86A6;
  --cold:#2C1C6B; --violet:#7A2A8C; --magenta:#C4245E; --hot:#F0552B; --warm:#FBB03B; --peak:#FFF2A6;
  --ironbow:linear-gradient(90deg,#0B0B2B 0%,#2C1C6B 18%,#7A2A8C 38%,#C4245E 56%,#F0552B 72%,#FBB03B 88%,#FFF2A6 100%);
  --hotgrad:linear-gradient(90deg,#F0552B 0%,#FBB03B 65%,#FFF2A6 100%);
  --glass:linear-gradient(180deg,rgba(38,52,98,.62),rgba(22,31,62,.62));
  --glass-solid:#1C2750;
  --shadow:0 1px 0 rgba(255,255,255,.05) inset,0 24px 60px -28px rgba(0,0,0,.75);
  --r:14px; --r-sm:8px;
  --display:"Barlow Condensed","Barlow Condensed Repli","Arial Narrow",sans-serif;
  --body:"Barlow","Barlow Repli","Helvetica Neue",Arial,sans-serif;
  --max:1200px;
  --pad:clamp(20px,4vw,40px);
  --sec:clamp(80px,10vw,136px);
  --head:72px;
}

/* 3. Base -------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--head) + 16px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-variant-numeric:tabular-nums}
/* grain très léger : casse l'aplat numérique du fond */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
a{color:inherit}
img,svg{max-width:100%}
img{height:auto}
p{margin:0}
h1,h2,h3,h4,h5{font-family:var(--display);line-height:1.02;margin:0;font-weight:700;letter-spacing:.005em;text-wrap:balance}
h1{font-size:clamp(44px,6.2vw,84px)}
h2{font-size:clamp(34px,4.2vw,56px)}
h3{font-size:28px;font-weight:600}
h4{font-size:21px;font-weight:600;line-height:1.15}
h5{font-size:18px;font-weight:600;line-height:1.2}
strong,b{font-weight:600}
::selection{background:rgba(251,176,59,.35);color:var(--ink)}
:focus-visible{outline:3px solid var(--warm);outline-offset:3px;border-radius:4px}
main:focus{outline:none}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ic{width:1.15em;height:1.15em;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.18em}

.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--hot);color:#160A08;padding:12px 18px;font-weight:600;text-decoration:none;border-radius:0 0 8px 0}
.skip:focus{left:0}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--pad)}
.bar{height:4px;background:var(--ironbow)}

/* 4. En-tête et navigation --------------------------------------------------- */
.site-head{position:sticky;top:0;z-index:40;transition:background-color .25s,box-shadow .25s,border-color .25s;
  background:rgba(15,23,48,.72);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid transparent}
.site-head.scrolled{background:rgba(10,16,36,.88);border-bottom-color:var(--line);box-shadow:0 12px 30px -20px rgba(0,0,0,.8)}
.nav{display:flex;align-items:center;gap:22px;height:var(--head)}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;white-space:nowrap;font-family:var(--display);font-weight:700;font-size:23px;letter-spacing:.02em}
/* Monogramme officiel : le noir du logo prend la couleur du texte sur fond sombre. */
.logo-mono{display:block;height:30px;width:auto;aspect-ratio:1486/370;color:var(--ink)}
.menu{display:flex;align-items:center;gap:4px;list-style:none;margin:0 0 0 auto;padding:0}
.menu a{display:block;white-space:nowrap;padding:8px 11px;border-radius:8px;text-decoration:none;color:var(--muted);font-weight:500;font-size:15.5px;transition:color .2s,background-color .2s}
.menu a:hover{color:var(--ink);background:rgba(242,240,234,.05)}
.menu a[aria-current="true"]{color:var(--ink);background:rgba(251,176,59,.10);box-shadow:inset 0 -2px 0 var(--warm)}
.head-tel{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-family:var(--display);font-size:19px;font-weight:600;white-space:nowrap}
.head-tel .ic{color:var(--warm)}
.head-tel{transition:color .2s,border-color .2s,background-color .2s}
.head-tel:hover{color:var(--warm)}
.burger{display:none}
.site-head .wrap{max-width:1320px}
/* Entre 1 100 et 1 280 px, le numéro se réduit à une icône d'appel : le lien reste en place. */
@media (max-width:1280px){.head-tel .num{display:none}.head-tel{width:40px;height:40px;justify-content:center;border:1px solid var(--line-2);border-radius:9px}.head-tel:hover{border-color:var(--ink);background:rgba(242,240,234,.05)}}
@media (max-width:1100px){
  .menu,.head-tel,.nav>.btn{display:none}
  .burger{display:inline-flex;align-items:center;gap:8px;margin-left:auto;background:rgba(242,240,234,.04);border:1px solid var(--line-2);color:var(--ink);
    border-radius:10px;padding:9px 14px;font:500 16px var(--body);cursor:pointer}
  .burger .ic-x{display:none}
  .burger[aria-expanded="true"] .ic-menu{display:none}
  .burger[aria-expanded="true"] .ic-x{display:inline}
  /* Panneau plein écran à l'ouverture */
  .site-head.open .menu{display:flex;flex-direction:column;align-items:stretch;gap:2px;position:fixed;left:0;right:0;top:calc(var(--head) + 4px);bottom:0;
    margin:0;padding:18px var(--pad) 120px;background:var(--deep);overflow-y:auto;border-top:1px solid var(--line)}
  .site-head.open .menu a{font-family:var(--display);font-size:30px;font-weight:600;color:var(--ink);padding:12px 4px;border-radius:0;border-bottom:1px solid var(--line);background:none;box-shadow:none}
  .site-head.open .menu a[aria-current="true"]{color:var(--warm)}
  .site-head.open .menu .menu-extra{display:block;margin-top:22px}
}
@media (max-width:560px){.logo-mono{height:26px}.nav{gap:12px}}
.menu-extra{display:none}
/* Très petits écrans : le mot « Menu » est masqué visuellement mais reste le nom du bouton. */
@media (max-width:380px){.burger-txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.burger{padding:10px 12px}}
/* Sans JavaScript, le menu reste affiché, en ligne, sous le logo. */
@media (max-width:1100px){html:not(.js) .nav{flex-wrap:wrap;height:auto;padding-block:12px}html:not(.js) .menu{display:flex;flex-wrap:wrap;width:100%;margin:6px 0 0}html:not(.js) .burger{display:none}}
.menu-extra .btn{width:100%;justify-content:center;margin-top:10px}

/* 5. Boutons, pastilles, liens ----------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;white-space:nowrap;padding:14px 22px;border-radius:10px;font:600 17px var(--body);
  text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform .2s,background-color .2s,border-color .2s,box-shadow .2s}
.btn:hover{transform:translateY(-1px)}
.btn-hot{background:var(--hot);color:#160A08;box-shadow:0 10px 28px -12px rgba(240,85,43,.8)}
.btn-hot:hover{background:var(--warm);box-shadow:0 14px 34px -12px rgba(251,176,59,.75)}
.btn-ghost{border-color:var(--dim);color:var(--ink);background:rgba(242,240,234,.03)}
.btn-ghost:hover{border-color:var(--ink);background:rgba(242,240,234,.07)}
.btn-sm{padding:10px 16px;font-size:15.5px;border-radius:9px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.link{color:var(--warm);font-weight:500;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:rgba(251,176,59,.45)}
.link:hover{text-decoration-color:var(--warm)}
.pill{display:inline-flex;align-items:center;gap:9px;padding:7px 14px 7px 12px;border-radius:999px;border:1px solid var(--line-2);background:rgba(242,240,234,.04);
  font-size:14.5px;color:var(--muted)}
.pill .dot{width:8px;height:8px;border-radius:50%;background:var(--warm);box-shadow:0 0 0 4px rgba(251,176,59,.18)}

/* 6. Sections ------------------------------------------------------------------ */
.sec{padding-block:var(--sec);position:relative}
.sec-alt{background:linear-gradient(180deg,var(--bg2),var(--bg));border-block:1px solid var(--line)}
.sh{display:grid;grid-template-columns:1.05fr .95fr;gap:24px 56px;align-items:end;margin-bottom:clamp(36px,5vw,56px)}
.sh p{color:var(--muted);font-size:18px;max-width:30em}
.sh-solo{display:block}
.sh-solo p{margin-top:16px}
@media (max-width:900px){.sh{grid-template-columns:1fr}}
.lead{font-size:19px;color:var(--muted);max-width:28em}
.small{font-size:15px;color:var(--muted)}
.caption{font-size:13.5px;color:var(--dim);line-height:1.45}
.mt-s{margin-top:14px}

.mt-l{margin-top:40px}
.label{font-family:var(--display);font-size:15px;font-weight:600;letter-spacing:.04em;color:var(--warm)}

/* Surfaces en verre et reflet de chaleur qui suit le pointeur */
.card{position:relative;border:1px solid var(--line);border-radius:var(--r);background:var(--glass);box-shadow:var(--shadow);overflow:hidden;isolation:isolate}
.card::after{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .35s;pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(240,85,43,.16),transparent 60%)}
.card:hover::after{opacity:1}
.card .caption,.card .small{color:var(--muted)}

/* 7. Hero ----------------------------------------------------------------------- */
.hero{position:relative;overflow:hidden;padding:clamp(56px,8vw,104px) 0 clamp(64px,8vw,112px);isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background-image:linear-gradient(rgba(242,240,234,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(242,240,234,.06) 1px,transparent 1px);
  background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse 70% 70% at 70% 40%,#000 15%,transparent 72%);mask-image:radial-gradient(ellipse 70% 70% at 70% 40%,#000 15%,transparent 72%)}
.hero::after{content:"";position:absolute;inset:-20% -10% auto auto;width:70%;height:120%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(196,36,94,.22),transparent 70%),radial-gradient(40% 40% at 60% 45%,rgba(240,85,43,.20),transparent 70%)}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,5vw,64px);align-items:center}
.hero h1{max-width:5.44em;margin-top:22px}
.hero .lead{margin:24px 0 32px}
.hero .cta-note{margin-top:16px}
.cta-note{font-size:15px;color:var(--dim);max-width:30em}
.creds{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:32px;padding-top:24px;border-top:1px solid var(--line);color:var(--muted);font-size:15px;list-style:none;padding-left:0}
.creds li{display:inline-flex;align-items:center;gap:8px}
.creds .ic{color:var(--warm)}
@media (max-width:960px){.hero .wrap{grid-template-columns:1fr}}

/* Viseur : cadre d'instrument autour de l'illustration thermique */
.scope{position:relative}
.scope-frame{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line-2);background:#0B0B2B;
  box-shadow:0 40px 90px -40px rgba(196,36,94,.55),0 30px 60px -30px rgba(0,0,0,.8)}
.scope-frame svg{display:block;width:100%;height:auto}
.scope-scan{position:absolute;left:0;right:0;top:0;height:28%;pointer-events:none;opacity:0;
  background:linear-gradient(180deg,transparent,rgba(255,242,166,.08) 70%,rgba(255,242,166,.45) 99%,transparent)}
.scale{position:absolute;right:-26px;top:8%;bottom:8%;width:10px;border-radius:5px;transform-origin:bottom;
  background:linear-gradient(180deg,#FFF2A6,#FBB03B,#F0552B,#C4245E,#7A2A8C,#2C1C6B,#0B0B2B)}
.scale i{position:absolute;left:16px;font-style:normal;font-size:12px;color:var(--dim);white-space:nowrap}
.scale .t{top:0}.scale .m{top:50%;transform:translateY(-50%)}.scale .b{bottom:0}
@media (min-width:961px){.scope{margin-right:66px}}
@media (max-width:960px){
  .scale{position:relative;right:auto;top:auto;bottom:auto;width:100%;height:8px;margin:14px 0 30px;transform-origin:left;
    background:linear-gradient(90deg,#0B0B2B,#2C1C6B,#7A2A8C,#C4245E,#F0552B,#FBB03B,#FFF2A6)}
  .scale .t,.scale .m,.scale .b{top:14px;bottom:auto;transform:none}
  .scale .t{left:auto;right:0}.scale .m{left:50%;transform:translateX(-50%)}.scale .b{left:0}
}
.scope .caption{margin-top:14px}

/* 8. Bandeau de confiance -------------------------------------------------------- */
.trust{border-block:1px solid var(--line);background:rgba(10,16,36,.55)}
.trust ul{list-style:none;margin:0 auto;padding:0;display:grid;grid-template-columns:repeat(4,1fr)}
.trust li{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;align-items:start;padding:26px 24px;font-size:15.5px;color:var(--muted)}
.trust li+li{border-left:1px solid var(--line)}
.trust .ic{grid-row:span 2;width:26px;height:26px;color:var(--warm);margin-top:2px}
.trust strong{font-family:var(--display);font-size:24px;font-weight:600;color:var(--ink);line-height:1.1}
@media (max-width:960px){.trust ul{grid-template-columns:1fr 1fr}.trust li:nth-child(3){border-left:0}.trust li:nth-child(n+3){border-top:1px solid var(--line)}}
@media (max-width:560px){.trust ul{grid-template-columns:1fr}.trust li+li{border-left:0;border-top:1px solid var(--line)}}

/* 9. Onglets (prestations, villes) ------------------------------------------------- */
.tablist{display:none}
.js [data-tabs]:not(.ready) .tabpanel~.tabpanel{display:none}
.js .tablist{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:28px}
.tab{position:relative;display:inline-flex;align-items:center;gap:10px;padding:13px 18px;border-radius:12px;border:1px solid var(--line);
  background:rgba(242,240,234,.03);color:var(--muted);font:500 16px var(--body);cursor:pointer;transition:color .2s,background-color .2s,border-color .2s;overflow:hidden}
.tab:hover{color:var(--ink);border-color:var(--line-2)}
.tab .ic{color:var(--dim);transition:color .2s}
.tab[aria-selected="true"]{color:var(--ink);background:var(--glass-solid);border-color:var(--line-2)}
.tab[aria-selected="true"] .ic{color:var(--warm)}
/* barre ironbow en tête du panneau prestation actif : la signature de la marque */
.tabs-presta .tab[aria-selected="true"]::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--ironbow)}
.tabpanel+.tabpanel{margin-top:28px}
.js .tabpanel+.tabpanel{margin-top:0}
.tabpanel:focus-visible{outline-offset:6px}
@media (max-width:640px){.js .tablist{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-block:8px;margin-block:-8px 20px;margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad);scroll-snap-type:x mandatory}
  .js .tablist::-webkit-scrollbar{display:none}.tab{flex:none;scroll-snap-align:start}}

/* 10. Panneau prestation ------------------------------------------------------------ */
.presta{padding:clamp(24px,3.5vw,40px)}
.presta::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--ironbow)}
.presta-head{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;align-items:center;margin-bottom:22px}
.presta-ico{grid-row:span 2;width:56px;height:56px;border-radius:14px;display:grid;place-items:center;background:rgba(240,85,43,.12);border:1px solid rgba(240,85,43,.35);color:var(--warm)}
.presta-ico .ic{width:28px;height:28px}
.presta-head p{color:var(--warm);font-weight:500;font-size:18px}
/* Illustration de la prestation : bandeau 12:5, vues empilées sur mobile (même seuil que <source>) */
.presta-media{margin:0 0 30px}
.media-frame{position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--line-2);background:var(--deep)}
.media-frame img{display:block;width:100%;height:auto;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
/* Coins de visée : gauche en ::before, droite en ::after (masqués sur les vues comparatives, où l'échelle occupe la droite) */
.media-frame::before,.media-frame::after{content:"";position:absolute;inset:14px;z-index:1;pointer-events:none;--c:rgba(242,240,234,.7);--l:22px;background-repeat:no-repeat}
.media-frame::before{background:linear-gradient(var(--c),var(--c)) top left/var(--l) 2px no-repeat,linear-gradient(var(--c),var(--c)) top left/2px var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) bottom left/var(--l) 2px no-repeat,linear-gradient(var(--c),var(--c)) bottom left/2px var(--l) no-repeat}
.media-frame::after{background:linear-gradient(var(--c),var(--c)) top right/var(--l) 2px no-repeat,linear-gradient(var(--c),var(--c)) top right/2px var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) bottom right/var(--l) 2px no-repeat,linear-gradient(var(--c),var(--c)) bottom right/2px var(--l) no-repeat}
.media-split::after{display:none}
@media (hover:hover) and (prefers-reduced-motion:no-preference){.media-frame:hover img{transform:scale(1.015)}}
.media-lbl{position:absolute;z-index:2;top:28px;left:28px;display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:6px;background:rgba(10,16,36,.8);border:1px solid var(--line-2);color:var(--ink);font:600 13px/1 var(--display);letter-spacing:.08em;text-transform:uppercase}
.media-lbl::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--muted)}
.media-lbl+.media-lbl{left:calc(50% + 30px)}
.media-split .media-lbl{top:auto;bottom:28px}
.media-lbl+.media-lbl::before{background:var(--ironbow)}
.presta-media .caption{margin-top:12px;max-width:60em}
@media (max-width:640px){
  .media-frame::before,.media-frame::after{inset:10px;--l:16px}
  .media-lbl{top:18px;left:18px;padding:5px 8px;font-size:12.5px}
  .media-lbl+.media-lbl{left:18px;top:calc(50% + 20px)}
  .media-split .media-lbl{top:auto;bottom:calc(50% + 20px)}
  .media-split .media-lbl+.media-lbl{bottom:18px}
}
.presta-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(24px,4vw,48px)}
.presta-intro{color:var(--muted);font-size:18px;max-width:30em}
.presta-pour{margin-top:14px;font-size:15.5px;color:var(--muted)}
.presta-pour b{color:var(--ink)}
.presta h4{margin:30px 0 14px;font-size:20px}
.presta-side h4:first-child{margin-top:0}
.sits{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sit{padding:18px 18px 16px;border-radius:12px;border:1px solid var(--line);background:rgba(10,16,36,.35)}
.sit h5{margin-bottom:6px}
.sit p{font-size:15.5px;color:var(--muted)}
.det{display:grid;gap:18px}
.det h5{font-size:16px;letter-spacing:.03em;color:var(--warm);margin-bottom:8px}
.checks{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.checks li{display:grid;grid-template-columns:auto 1fr;gap:10px;font-size:15.5px;color:var(--muted);line-height:1.45}
.checks .ic{color:var(--warm);margin-top:2px;width:18px;height:18px}
.delai{margin-top:14px;padding:12px 14px;border-radius:10px;background:rgba(251,176,59,.08);border:1px solid rgba(251,176,59,.25);font-size:15px;color:var(--ink);display:flex;gap:10px}
.delai .ic{color:var(--warm);margin-top:3px}
.limite{margin-top:26px;padding:18px 20px;border-left:3px solid var(--warm);border-radius:0 12px 12px 0;background:rgba(10,16,36,.45)}
.limite h4{margin:0 0 8px}
.limite p{color:var(--muted);font-size:15.5px}
.presta-cta{margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
@media (max-width:900px){.presta-grid{grid-template-columns:1fr}.sits{grid-template-columns:1fr}}

/* 11. Livrable : aperçu de rapport ---------------------------------------------------- */
.deliv{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,64px);align-items:center}
.report{padding:20px;border-radius:var(--r);border:1px solid var(--line-2);background:var(--glass-solid);box-shadow:0 40px 80px -40px rgba(0,0,0,.8)}
.report .top{display:flex;justify-content:space-between;gap:16px;font-size:14px;color:var(--muted);margin-bottom:12px}
.report svg{width:100%;height:auto;display:block;border-radius:8px}
.report table{width:100%;border-collapse:collapse;font-size:15px;margin-top:14px}
.report caption{text-align:left;font-size:13.5px;color:var(--muted);padding-bottom:8px}
.report th{text-align:left;font-weight:600;color:var(--muted);border-bottom:1px solid var(--line);padding:6px 4px;font-size:14px}
.report td{padding:9px 4px;border-bottom:1px solid var(--line);vertical-align:top}
.report td:first-child{color:var(--warm);font-weight:600}
.report .caption{color:var(--muted)}
.sev{display:inline-block;padding:2px 8px;border-radius:4px;font-size:13px;font-weight:600;white-space:nowrap}
.sev.h{background:#F0552B;color:#160A08}.sev.m{background:#FBB03B;color:#160A08}.sev.l{background:#2C1C6B;color:#F2F0EA}
@media (min-width:901px){.deliv .report{order:-1}}
.points{list-style:none;margin:28px 0 0;padding:0}
.points li{display:grid;grid-template-columns:44px 1fr;gap:14px;padding:16px 0;border-top:1px solid var(--line);color:var(--muted)}
.points li b{color:var(--ink)}
.points .ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:rgba(242,240,234,.05);border:1px solid var(--line);color:var(--warm)}
@media (max-width:900px){.deliv{grid-template-columns:1fr}}

/* 12. Méthode : frise en quatre étapes -------------------------------------------------- */
.steps{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.steps-line{position:absolute;left:0;right:0;top:22px;height:2px;background:var(--line)}
.steps-line span{position:absolute;inset:0;background:var(--hotgrad);transform-origin:left}
.step{position:relative;padding-top:64px}
.step-num{position:absolute;top:0;left:0;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:var(--deep);border:2px solid var(--hot);font-family:var(--display);font-size:20px;font-weight:700;color:var(--ink);box-shadow:0 0 0 6px var(--bg)}
.step h3{font-size:25px;margin-bottom:8px}
.step p{color:var(--muted);font-size:16px}
.method{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:clamp(40px,5vw,64px)}
.method .card{padding:22px}
.method h4{font-size:19px;margin:12px 0 6px}
.method p{font-size:15px;color:var(--muted)}
.method .ic{width:24px;height:24px;color:var(--warm)}
@media (max-width:960px){.steps,.method{grid-template-columns:1fr 1fr}.steps-line{display:none}}
@media (max-width:560px){.steps,.method{grid-template-columns:1fr}}

/* 13. Zone : carte + sélecteur de ville --------------------------------------------------- */
.zone{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(28px,4vw,56px);align-items:start}
.map{position:sticky;top:calc(var(--head) + 24px)}
.map svg{display:block;width:100%;height:auto}
.map .ring{fill:none;stroke:rgba(242,240,234,.22)}
.map .city circle{transition:r .25s,fill .25s}
.map .city.on circle{fill:var(--warm);r:6}
.map .city.on text{fill:var(--warm);font-weight:600}
.map .link-line{stroke:var(--warm);stroke-width:1.5;stroke-dasharray:4 4;opacity:0;transition:opacity .25s}
.map .link-line.on{opacity:.9}
.city-card{padding:clamp(22px,3vw,32px)}
.city-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin:0 0 22px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--line)}
.city-stats div{background:rgba(10,16,36,.55);padding:14px 16px;display:flex;flex-direction:column}
.city-stats dt{font-size:13.5px;color:var(--muted)}
.city-stats dd{margin:auto 0 0;padding-top:4px;font-family:var(--display);font-size:28px;font-weight:700;color:var(--warm);line-height:1}
.city-card h3{margin-bottom:10px}
.city-card .accroche{color:var(--ink);font-size:18px;font-weight:500}
.city-card .bati{color:var(--muted);margin-top:12px}
.city-card h4{margin:22px 0 10px;font-size:18px}
.city-pr{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.city-pr li{display:grid;grid-template-columns:auto 1fr;gap:12px;font-size:15.5px;color:var(--muted)}
.city-pr .ic{color:var(--warm);margin-top:3px}
.city-pr a{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:rgba(242,240,234,.3);text-underline-offset:3px}
.city-pr a:hover{text-decoration-color:currentColor}
.circles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:clamp(36px,5vw,56px)}
.circles .card{padding:22px}
.circles h4{font-size:24px;color:var(--warm)}
.circles .villes{margin-top:6px;font-weight:600;color:var(--ink);font-size:15.5px}
.circles p{margin-top:8px;font-size:15px;color:var(--muted)}
.beyond{display:grid;grid-template-columns:1fr 1fr 1fr;gap:28px;margin-top:40px}
.beyond h3{font-size:22px;margin-bottom:8px}
.beyond p{color:var(--muted);font-size:15.5px}
@media (max-width:960px){.zone{grid-template-columns:1fr}.map{position:static;max-width:520px}.circles,.beyond{grid-template-columns:1fr}}


/* 14. Réalisations ------------------------------------------------------------------------- */
.cases{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.case{display:flex;flex-direction:column}
.case .placeholder{border-radius:0;border:0;border-bottom:1px solid var(--line)}
.case-body{padding:20px 22px 24px}
.case-body .label{display:block;margin-bottom:6px}
.case-body h3{font-size:24px;margin-bottom:10px}
@media (max-width:900px){.cases{grid-template-columns:1fr}}

/* 15. À propos ------------------------------------------------------------------------------ */
.about{display:grid;grid-template-columns:340px 1fr;gap:clamp(32px,5vw,64px);align-items:start}
.about-side{position:sticky;top:calc(var(--head) + 24px)}
.about-main .lead{margin-top:18px}
.about-main>p:not(.lead){color:var(--muted);margin-top:16px;max-width:30em}
.about-main>p.quals-intro{margin:-2px 0 16px;color:var(--ink);max-width:none}
.about h3{margin:40px 0 16px;font-size:26px}
.quals{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.qual{padding:14px 16px;border-radius:12px;border:1px solid var(--line);background:rgba(10,16,36,.35)}
.qual b{display:flex;align-items:center;gap:8px;font-family:var(--display);font-size:18px;font-weight:600}
.qual b .ic{color:var(--warm);width:18px;height:18px}
.qual span{display:block;margin-top:4px;font-size:14.5px;color:var(--muted)}
/* Matériel : une fiche par drone, photo détourée sur une scène sombre */
.fleet{margin-top:clamp(56px,7vw,96px)}
.fleet-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px 40px;margin-bottom:24px}
.fleet-head h3{font-size:clamp(28px,3.2vw,36px)}
.fleet-head p{color:var(--muted);max-width:34em}
.fleet-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.drone{display:flex;flex-direction:column}
.drone-stage{position:relative;aspect-ratio:16/9;min-height:0;display:grid;grid-template:minmax(0,1fr)/minmax(0,1fr);padding:7% 7% 10%;border-bottom:1px solid var(--line);
  background:radial-gradient(55% 60% at 50% 55%,var(--halo),transparent 72%),linear-gradient(180deg,rgba(10,16,36,.2),rgba(10,16,36,.75))}
.drone-thermique{--halo:rgba(240,85,43,.22)}
.drone-visible{--halo:rgba(120,160,255,.18)}
.drone-stage::after{content:"";position:absolute;left:24%;right:24%;bottom:8%;height:9%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,0,0,.6),transparent);transition:transform .6s cubic-bezier(.2,.7,.2,1),opacity .6s}
.drone-stage img{position:relative;z-index:1;display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 18px 22px rgba(0,0,0,.35));transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.drone-thermique .media-lbl::before{background:var(--ironbow)}
.drone-stage .media-lbl{top:12px;left:12px}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .drone:hover .drone-stage img{transform:translateY(-5px)}
  .drone:hover .drone-stage::after{transform:scaleX(.82);opacity:.7}
}
.drone-body{flex:1;display:flex;flex-direction:column;padding:22px clamp(20px,2.4vw,28px) 26px}
.drone-body h4{font-size:26px}
.drone-role{margin-top:2px;color:var(--warm);font-weight:500}
.drone-body>p:not(.drone-role){margin:12px 0 18px;color:var(--muted)}
.drone-specs{margin:auto 0 0;border-top:1px solid var(--line)}
.drone-specs div{display:grid;grid-template-columns:minmax(120px,38%) 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.drone-specs dt{font:600 13.5px/1.5 var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.drone-specs dd{margin:0;font-size:15.5px}
.fleet-notes{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:24px}
.fleet-notes>div{padding:18px 20px;border-left:3px solid var(--warm);border-radius:0 12px 12px 0;background:rgba(10,16,36,.45)}
.fleet-notes h4{font-size:19px}
.fleet-notes p{margin-top:6px;color:var(--muted);font-size:15.5px}
.fleet .tbc{margin-top:18px}
@media (max-width:900px){.fleet-grid,.fleet-notes{grid-template-columns:1fr}.drone-stage img{max-width:540px;justify-self:center}}
@media (max-width:640px){.drone-stage{padding:14% 6% 9%}}
@media (max-width:420px){.drone-specs div{grid-template-columns:1fr;gap:2px}}
@media (max-width:900px){.about{grid-template-columns:1fr}.about-side{position:static;max-width:340px}.quals{grid-template-columns:1fr}}

/* 16. FAQ ------------------------------------------------------------------------------------ */
.chips{display:none}
.js .chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.chip{padding:9px 15px;border-radius:999px;border:1px solid var(--line-2);background:transparent;color:var(--muted);font:500 15px var(--body);cursor:pointer;transition:all .2s}
.chip:hover{color:var(--ink);border-color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.faq-list{max-width:52em}
.faq-list details{border-top:1px solid var(--line)}
.faq-list details:last-of-type{border-bottom:1px solid var(--line)}
.faq-list details[hidden]{display:none}
.faq-list summary{cursor:pointer;padding:20px 0;list-style:none;display:grid;grid-template-columns:1fr auto;column-gap:20px;align-items:start}
.faq-list summary .cat{grid-column:1}
.faq-list summary h3{grid-column:1}
.faq-list summary::after{grid-column:2;grid-row:1 / span 2;align-self:center}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary h3{font-size:23px;font-weight:600;line-height:1.2}
.faq-list summary::after{content:"";flex:none;width:28px;height:28px;margin-top:-2px;border-radius:50%;border:1px solid var(--line-2);
  background:linear-gradient(var(--warm),var(--warm)) center/12px 2px no-repeat,linear-gradient(var(--warm),var(--warm)) center/2px 12px no-repeat;transition:transform .25s}
.faq-list details[open] summary::after{transform:rotate(45deg)}
.faq-list summary:hover h3{color:var(--peak)}
.faq-list .cat{display:block;margin-bottom:6px;font-size:13.5px;color:var(--dim)}
.faq-list details p{color:var(--muted);padding:0 0 22px;max-width:30em}

/* 17. Contact --------------------------------------------------------------------------------- */
.contact{position:relative;overflow:hidden;isolation:isolate}
.contact::before{content:"";position:absolute;inset:auto -10% -40% -10%;height:90%;z-index:-1;pointer-events:none;
  background:radial-gradient(50% 60% at 30% 70%,rgba(240,85,43,.22),transparent 70%),radial-gradient(40% 50% at 80% 60%,rgba(122,42,140,.25),transparent 70%)}
.contact-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,56px);align-items:start}
.phone-xl{display:inline-block;font-family:var(--display);font-weight:700;line-height:1;font-size:clamp(48px,7vw,84px);color:var(--ink);text-decoration:none;margin:18px 0 8px;letter-spacing:.01em}
.phone-xl:hover{color:var(--warm)}
.contact .cta-row{margin-top:22px}
.facts{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:10px}
.facts li{display:grid;grid-template-columns:auto 1fr;gap:12px;color:var(--muted);font-size:15.5px}
.facts .ic{color:var(--warm);margin-top:3px}
.prep{padding:clamp(22px,3vw,32px)}
.prep h3{font-size:24px;margin-bottom:16px}
.prep ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.prep li{display:grid;grid-template-columns:auto 1fr;gap:12px}
.prep li .ic{color:var(--warm);margin-top:3px}
.prep li b{display:block}
.prep li span{font-size:15px;color:var(--muted)}
.nap{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);font-size:15px;color:var(--muted);line-height:1.65}
.nap b{color:var(--ink)}
.mailnote{margin-top:14px;font-size:15px;color:var(--muted);max-width:30em}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}

/* 18. Informations légales ------------------------------------------------------------------- */
.legal details{border:1px solid var(--line);border-radius:var(--r);background:rgba(10,16,36,.35)}
.legal details+details{margin-top:12px}
.legal summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 24px}
.legal summary::-webkit-details-marker{display:none}
.legal summary h3{font-size:24px}
.legal summary::after{content:"";width:12px;height:12px;border-right:2px solid var(--warm);border-bottom:2px solid var(--warm);transform:rotate(45deg);transition:transform .25s;margin-top:-6px}
.legal summary h3,.about-more summary h3{transition:color .2s}
.legal summary:hover h3,.about-more summary:hover h3{color:var(--peak)}
.legal details[open] summary::after{transform:rotate(-135deg);margin-top:6px}
.prose{padding:0 24px 28px;max-width:44em}
.prose .lead-sm{color:var(--ink);font-size:17px}
.prose h4{margin:30px 0 10px;font-size:21px}
.prose h5{margin:22px 0 8px;font-size:18px}
.prose p{color:var(--muted);margin-top:12px;max-width:34em}
.prose ul,.prose ol{color:var(--muted);margin:12px 0 0;padding-left:20px;max-width:34em}
.prose li{margin:6px 0}
.prose a{color:var(--warm);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:rgba(251,176,59,.45)}
.prose a:hover,.err-links a:hover{text-decoration-color:var(--warm)}
.prose dl{margin:14px 0 0}
.prose dt{font-weight:600;color:var(--ink);margin-top:12px}
.prose dd{margin:4px 0 0;color:var(--muted)}
.prose .note{margin-top:16px;padding:16px 18px;border-left:3px solid var(--warm);border-radius:0 10px 10px 0;background:rgba(26,37,71,.6)}
.prose .note h5{margin:0 0 6px}

/* 19. Pied de page et barre d'appel mobile ----------------------------------------------------- */
.site-foot{padding:56px 0 40px;border-top:1px solid var(--line);background:var(--deep);font-size:15px;color:var(--dim)}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:32px}
.site-foot b{color:var(--ink);font-weight:600}
.foot-logo{display:block;width:220px;height:auto;aspect-ratio:1500/632;color:var(--ink);margin-bottom:20px}
.site-foot ul{list-style:none;padding:0;margin:10px 0 0}
.site-foot li{margin:6px 0}
.site-foot a{color:var(--muted);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:rgba(174,181,203,.4)}
.site-foot a:hover{color:var(--ink);text-decoration-color:currentColor}
.foot-bottom{margin-top:36px;padding-top:20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
@media (max-width:900px){.foot-grid{grid-template-columns:1fr}}
.callbar{display:none}
@media (max-width:1100px){
  .callbar{display:flex;align-items:center;justify-content:center;gap:10px;position:fixed;left:12px;right:12px;bottom:12px;z-index:30;min-height:54px;padding:10px 16px;
    border-radius:14px;background:var(--hot);color:#160A08;font-weight:600;font-size:17px;text-decoration:none;box-shadow:0 18px 40px -12px rgba(0,0,0,.7),0 8px 24px -10px rgba(240,85,43,.8)}
  .site-foot .callbar{color:#160A08;text-decoration:none}
  .callbar:hover,.site-foot .callbar:hover{background:var(--warm);color:#160A08}
  .callbar:focus-visible{outline-color:#160A08;outline-offset:-6px}
  body{padding-bottom:80px}
  html{scroll-padding-bottom:88px}
  .site-head.open ~ .site-foot .callbar{display:none}
}
@media (max-width:1100px) and (max-height:480px){.callbar{position:static;margin:24px var(--pad) 0;box-shadow:none}body{padding-bottom:0}html{scroll-padding-bottom:0}}
@media print{.callbar,.site-head,.scope-scan{display:none}}

/* 20. Emplacements photo et faits à confirmer ------------------------------------------------- */
.placeholder{--c:rgba(242,240,234,.5);border:1px solid var(--line);border-radius:var(--r);min-height:220px;display:grid;place-items:center;text-align:center;
  padding:30px;color:var(--muted);font-size:15px;line-height:1.5;
  background:linear-gradient(var(--c) 0 0) left 14px top 14px/22px 2px,linear-gradient(var(--c) 0 0) left 14px top 14px/2px 22px,
    linear-gradient(var(--c) 0 0) right 14px top 14px/22px 2px,linear-gradient(var(--c) 0 0) right 14px top 14px/2px 22px,
    linear-gradient(var(--c) 0 0) left 14px bottom 14px/22px 2px,linear-gradient(var(--c) 0 0) left 14px bottom 14px/2px 22px,
    linear-gradient(var(--c) 0 0) right 14px bottom 14px/22px 2px,linear-gradient(var(--c) 0 0) right 14px bottom 14px/2px 22px,
    linear-gradient(160deg,#1A2547,#0F1730);background-repeat:no-repeat}
.placeholder b{display:block;color:var(--ink);font-family:var(--display);font-size:20px;font-weight:600;margin-bottom:8px}
.placeholder.ratio45{aspect-ratio:4/5;min-height:auto}
.placeholder.ratio169{aspect-ratio:16/10;min-height:auto}
/* Fait non vérifié, à valider avec David Jost avant la mise en ligne (§9 du brief). */
.tbc{display:inline;color:var(--warm);font-style:normal;background:rgba(251,176,59,.10);border:1px dashed rgba(251,176,59,.55);border-radius:4px;
  padding:1px 7px;font-size:.92em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
p.tbc,li.tbc,div.tbc{display:block;border-radius:6px;padding:10px 14px;margin-top:14px;font-size:15px;max-width:34em}

/* 21. Apparitions au défilement : seulement avec JavaScript et sans « réduire les animations » -- */
@media (prefers-reduced-motion:no-preference){
  .js.motion [data-reveal]:not(.is-in){opacity:0;transform:translateY(18px)}
  .js.motion [data-reveal]{transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
  .js.motion:not(.fin) .scale{transform:scaleY(0)}
  .js.motion:not(.fin) .lbl{opacity:0}
  @media (max-width:960px){.js.motion:not(.fin) .scale{transform:scaleX(0)}}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition-duration:.01ms!important;animation-duration:.01ms!important}}

/* 23. Garde-fous de mise en page et version mobile compacte ------------------------------------ */
/* Un élément de grille ne doit jamais imposer sa largeur intrinsèque (carte, illustration). */
.hero .wrap>*,.presta-grid>*,.deliv>*,.zone>*,.about>*,.contact-grid>*,.foot-grid>*,.sh>*{min-width:0}
.foot-legal{display:inline-flex;gap:18px;flex-wrap:wrap}
/* À propos : rubriques secondaires dépliables */
.about-more{margin-top:32px;display:grid;gap:10px}
.about-more details{border:1px solid var(--line);border-radius:12px;background:rgba(10,16,36,.35)}
.about-more summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 20px}
.about-more summary::-webkit-details-marker{display:none}
.about-more summary h3{margin:0;font-size:22px}
.about-more summary::after{content:"";width:10px;height:10px;border-right:2px solid var(--warm);border-bottom:2px solid var(--warm);transform:rotate(45deg);transition:transform .25s;margin-top:-5px}
.about-more details[open] summary::after{transform:rotate(-135deg);margin-top:5px}
.more-body{padding:0 20px 20px}
.more-body .method{grid-template-columns:1fr 1fr;margin-top:0}
.more-body .limite{margin-top:18px}
@media (max-width:700px){
  .more-body .method{grid-template-columns:1fr}
  /* Réalisations et cercles : défilement horizontal plutôt qu'une pile de cartes */
  .cases,.circles{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin-inline:calc(var(--pad) * -1);padding:0 var(--pad) 8px;scrollbar-width:thin}
  .cases>*,.circles>*{flex:0 0 84%;scroll-snap-align:start}
  .city-stats div{padding:10px 12px}
  .city-stats dd{font-size:20px}
  .city-stats dt{font-size:12.5px}
}

/* 22. Page 404 ------------------------------------------------------------------------------- */
.err{padding:110px 0 120px;text-align:center}
.err h1{font-size:clamp(64px,12vw,140px);background:var(--hotgrad);-webkit-background-clip:text;background-clip:text;color:transparent}
.err p{color:var(--muted);margin:22px auto 0;max-width:30em}
.err .cta-row{justify-content:center;margin-top:34px}
.err-links{list-style:none;padding:0;margin:40px auto 0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;max-width:44em}
.err-links a{color:var(--warm);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:rgba(251,176,59,.45)}
.err-cta{margin-left:auto}
.site-foot .foot-bottom:only-child{margin-top:0;border-top:0;padding-top:0}