/* Généré par generer-pages-departements.py — ne pas éditer à la main.
   Source du design : le <style> de public/index.html. */
:root{
    --beton:#EDEEE9;        /* papier béton, fond de page */
    --papier:#FAFAF6;       /* fiches */
    --encre:#171A1F;        /* texte */
    --gris:#5C6570;         /* texte secondaire */
    --bleu:#2946D8;         /* bleu cordeau — traits techniques, liens */
    --bleu-pale:#DDE3FA;
    --orange:#FF5A1E;       /* orange sécurité — action */
    --jaune:#FFC61A;        /* balisage */
    --trait:#C9CCC2;
    --grille:rgba(41,70,216,.055);
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0;color:var(--encre);background:var(--beton);
    font:16px/1.6 "Barlow",system-ui,sans-serif;
    background-image:
      linear-gradient(var(--grille) 1px,transparent 1px),
      linear-gradient(90deg,var(--grille) 1px,transparent 1px);
    background-size:28px 28px;
    -webkit-font-smoothing:antialiased;
  }
  .w{max-width:1080px;margin:0 auto;padding:0 22px}

  /* ── balisage chantier (défile lentement) ──────────── */
  .tape{
    height:10px;
    background:repeating-linear-gradient(-45deg,
      var(--jaune) 0 22px, var(--encre) 22px 44px);
    animation:defile-tape 2.6s linear infinite;
  }
  @keyframes defile-tape{to{background-position:62.2px 0}}

  /* ── barre haute ───────────────────────────────────── */
  .top{border-bottom:2px solid var(--encre);background:var(--papier)}
  .top .w{display:flex;align-items:center;justify-content:space-between;padding-top:14px;padding-bottom:14px}
  .logo{font:800 26px/1 "Big Shoulders";letter-spacing:.5px;text-transform:uppercase;display:flex;align-items:center;gap:10px}
  .logo .blip{width:12px;height:12px;border-radius:50%;background:var(--orange);position:relative;flex:none}
  .logo .blip::after{content:"";position:absolute;inset:-5px;border:2px solid var(--orange);border-radius:50%;opacity:.5;animation:ping 2.2s ease-out infinite}
  @keyframes ping{0%{transform:scale(.5);opacity:.7}80%,100%{transform:scale(1.5);opacity:0}}
  .top .off{font:500 12px/1.4 "IBM Plex Mono";color:var(--gris);text-transform:uppercase;letter-spacing:.6px;text-align:right}
  .top .off b{color:var(--bleu);font-weight:600}

  /* ── héros ─────────────────────────────────────────── */
  .hero{padding:64px 0 54px;overflow:hidden}
  .hero .w{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:start}
  .eyebrow{font:600 12px/1 "IBM Plex Mono";letter-spacing:1.6px;text-transform:uppercase;color:var(--bleu);
    display:inline-flex;align-items:center;gap:8px;margin:0 0 18px}
  .eyebrow::before{content:"";width:26px;height:2px;background:var(--bleu);
    transform-origin:left;animation:trace .6s .1s cubic-bezier(.2,.7,.2,1) backwards}
  @keyframes trace{from{transform:scaleX(0)}}
  h1{font:800 clamp(46px,7.2vw,86px)/1 "Big Shoulders";text-transform:uppercase;letter-spacing:.5px;margin:0 0 22px}
  h1 .l{display:block;overflow:hidden;padding-top:.08em;margin-top:-.08em}
  h1 .l span{display:inline-block;transform:translateY(110%);animation:leve .7s cubic-bezier(.2,.7,.2,1) forwards}
  h1 .l:nth-child(2) span{animation-delay:.12s}
  h1 .l:nth-child(3) span{animation-delay:.24s;color:var(--orange)}
  @keyframes leve{to{transform:translateY(0)}}
  .hero p.pitch{font-size:19px;color:var(--gris);max-width:30em;margin:0 0 28px}
  .hero p.pitch b{color:var(--encre)}
  .hero .précision{display:inline-block;margin-top:10px;font-size:14.5px;color:var(--gris);
    border-left:3px solid var(--trait);padding-left:12px}

  .stats{display:flex;gap:0;border:2px solid var(--encre);background:var(--papier);width:max-content;max-width:100%}
  .stat{padding:14px 22px;border-right:2px solid var(--encre);
    animation:monte .55s cubic-bezier(.2,.7,.2,1) backwards}
  .stat:nth-child(1){animation-delay:.35s}
  .stat:nth-child(2){animation-delay:.47s}
  .stat:nth-child(3){animation-delay:.59s}
  @keyframes monte{from{opacity:0;transform:translateY(14px)}}
  .stat:last-child{border-right:0}
  .stat b{display:block;font:700 26px/1 "Big Shoulders";letter-spacing:.5px;font-variant-numeric:tabular-nums}
  .stat span{font:500 11px/1.3 "IBM Plex Mono";text-transform:uppercase;letter-spacing:.5px;color:var(--gris)}

  /* ── flux radar (signature) ────────────────────────── */
  .radar{border:2px solid var(--encre);background:var(--encre);color:#E8EAE4;position:relative;
    box-shadow:8px 8px 0 rgba(23,26,31,.14)}
  .radar .head{display:flex;align-items:center;justify-content:space-between;
    padding:12px 16px;border-bottom:1px solid #3A3F47}
  .radar .head h2{margin:0;font:700 15px/1 "Big Shoulders";letter-spacing:1.5px;text-transform:uppercase;color:var(--jaune)}
  .radar .head .live{font:500 10.5px/1 "IBM Plex Mono";letter-spacing:1px;color:#9BA3AD;display:flex;align-items:center;gap:6px}
  .radar .head .live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--orange);animation:pulse 1.4s ease-in-out infinite}
  @keyframes pulse{50%{opacity:.25}}
  .flux{position:relative;overflow:hidden;min-height:352px;padding:8px 0}
  .flux::after{content:"";position:absolute;left:0;right:0;top:-40%;height:38%;
    background:linear-gradient(180deg,transparent,rgba(255,198,26,.10) 78%,rgba(255,198,26,.28));
    animation:balayage 4.6s linear infinite;pointer-events:none}
  @keyframes balayage{to{top:110%}}
  .ligne{display:grid;grid-template-columns:52px 1fr auto;gap:10px;align-items:baseline;
    padding:9px 16px;border-bottom:1px dashed #33383F;font:400 12.5px/1.5 "IBM Plex Mono"}
  .ligne .d{color:#8B939D}
  .ligne .c b{color:#fff;font-weight:600}
  .ligne .c{color:#B9C0C8}
  .ligne .t{color:var(--jaune);font-size:11px;letter-spacing:.4px;white-space:nowrap}
  .ligne{transition:background .25s ease}
  .ligne:hover{background:rgba(255,198,26,.08)}
  .ligne.neuf{animation:arrive .5s cubic-bezier(.2,.7,.2,1)}
  @keyframes arrive{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
  .radar .pied{padding:10px 16px;font:400 11px/1.5 "IBM Plex Mono";color:#788089;border-top:1px solid #3A3F47}

  /* ── sections ──────────────────────────────────────── */
  .sec{padding:58px 0}
  .sec-titre{font:700 13px/1 "IBM Plex Mono";letter-spacing:2px;text-transform:uppercase;color:var(--bleu);margin:0 0 8px;
    display:flex;align-items:center;gap:10px}
  .sec-titre::after{content:"";flex:1;height:1px;background:var(--trait)}
  .sec h2.gros{font:800 clamp(30px,4.4vw,46px)/1 "Big Shoulders";text-transform:uppercase;margin:0 0 26px;letter-spacing:.5px}

  .apparait{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
  .apparait.vu{opacity:1;transform:none}

  /* ── l'outil ───────────────────────────────────────── */
  .outil{background:var(--papier);border:2px solid var(--encre);box-shadow:8px 8px 0 rgba(23,26,31,.14);padding:34px}
  label{display:block;font:600 13px/1 "IBM Plex Mono";letter-spacing:1px;text-transform:uppercase;margin-bottom:12px}
  .champ{position:relative;max-width:560px}
  select{
    width:100%;padding:18px 52px 18px 18px;font:600 19px/1.2 "Barlow";color:var(--encre);
    background:#fff;border:2px solid var(--encre);border-radius:0;appearance:none;cursor:pointer;
  }
  .champ::after{content:"▼";position:absolute;right:18px;top:50%;transform:translateY(-50%);
    color:var(--bleu);font-size:14px;pointer-events:none}
  .sous-champ{font-size:14px;color:var(--gris);margin:12px 0 0;max-width:560px}
  .sous-champ b{color:var(--encre)}
  select:focus-visible{outline:3px solid var(--bleu);outline-offset:2px}

  .res{display:none;margin-top:26px;padding-top:26px;border-top:2px dashed var(--trait)}
  .res.on{display:block}
  .tampon{display:inline-block;border:3px solid var(--bleu);color:var(--bleu);padding:6px 14px;
    font:800 16px/1 "Big Shoulders";letter-spacing:2px;text-transform:uppercase;transform:rotate(-2deg);margin-bottom:14px}
  .res.on .tampon{animation:coup .45s cubic-bezier(.2,1.4,.4,1)}
  @keyframes coup{0%{transform:scale(1.9) rotate(-9deg);opacity:0}55%{transform:scale(.94) rotate(-1deg);opacity:1}100%{transform:scale(1) rotate(-2deg)}}
  .res .titre{font:800 34px/1.05 "Big Shoulders";text-transform:uppercase;letter-spacing:.5px;margin:0 0 6px}
  .res .detail{color:var(--gris);font-size:15px}

  .btn{
    display:inline-block;margin-top:20px;padding:17px 30px;border:2px solid var(--encre);border-radius:0;
    background:var(--orange);color:#fff;font:700 17px/1 "Barlow";text-decoration:none;cursor:pointer;
    text-transform:uppercase;letter-spacing:.5px;position:relative;overflow:hidden;
    box-shadow:5px 5px 0 var(--encre);transition:transform .12s ease,box-shadow .12s ease;
  }
  .btn::before{content:"";position:absolute;top:0;bottom:0;width:46%;left:-60%;
    background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);
    transform:skewX(-18deg);transition:none}
  .btn:hover::before{left:130%;transition:left .55s ease}
  .btn:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--encre)}
  .btn:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--encre)}
  .btn:focus-visible{outline:3px solid var(--bleu);outline-offset:3px}
  .btn.calme{background:var(--papier);color:var(--encre)}
  .res .note{margin:16px 0 0;font-size:14px;color:var(--gris)}
  .res .note b{color:var(--bleu)}

  /* ── offre pro ─────────────────────────────────────── */
  .pro .w{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
  .pro p.expl{font-size:17px;color:var(--gris);margin:0 0 22px;max-width:30em}
  .pro p.expl b{color:var(--encre)}
  ul.inclus{list-style:none;margin:0;padding:0}
  ul.inclus li{padding:11px 0 11px 34px;position:relative;border-bottom:1px solid var(--trait);font-size:15.5px;
    opacity:0;transform:translateX(-14px);transition:opacity .45s ease,transform .45s cubic-bezier(.2,.7,.2,1)}
  .apparait.vu ul.inclus li{opacity:1;transform:none}
  .apparait.vu ul.inclus li:nth-child(1){transition-delay:.10s}
  .apparait.vu ul.inclus li:nth-child(2){transition-delay:.20s}
  .apparait.vu ul.inclus li:nth-child(3){transition-delay:.30s}
  .apparait.vu ul.inclus li:nth-child(4){transition-delay:.40s}
  .apparait.vu ul.inclus li:nth-child(5){transition-delay:.50s}
  ul.inclus li::before{content:"■";position:absolute;left:2px;color:var(--orange);font-size:12px;top:14px}
  ul.inclus li b{font-variant-numeric:tabular-nums}
  .franchise{margin:22px 0 0;padding:16px 18px;border-left:4px solid var(--orange);
    background:var(--papier);font-size:14.5px;color:var(--gris);line-height:1.6}
  .franchise b{color:var(--encre)}

  .tarifs{display:grid;gap:18px}
  .tarif{background:var(--papier);border:2px solid var(--encre);padding:26px;position:relative;
    box-shadow:6px 6px 0 rgba(23,26,31,.14)}
  .tarif.phare{border-color:var(--orange);animation:lueur 2.6s ease-in-out infinite}
  @keyframes lueur{
    0%,100%{box-shadow:6px 6px 0 rgba(255,90,30,.3)}
    50%{box-shadow:6px 6px 0 rgba(255,90,30,.62)}
  }
  .tarif .badge{position:absolute;top:-13px;left:22px;background:var(--jaune);border:2px solid var(--encre);
    font:700 11px/1 "IBM Plex Mono";letter-spacing:1px;padding:5px 10px;text-transform:uppercase}
  .tarif .prix{font:800 44px/1 "Big Shoulders";letter-spacing:.5px}
  .tarif .prix small{font:500 14px "Barlow";color:var(--gris);letter-spacing:0}
  .tarif p{color:var(--gris);font-size:14.5px;margin:8px 0 0}

  /* ── FAQ ───────────────────────────────────────────── */
  .faq details{background:var(--papier);border:2px solid var(--encre);margin-bottom:12px}
  .faq summary{cursor:pointer;list-style:none;padding:18px 22px;font:600 16.5px/1.4 "Barlow";
    display:flex;justify-content:space-between;align-items:center;gap:14px}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:"+";font:700 26px/1 "Big Shoulders";color:var(--orange);flex:none}
  .faq details[open] summary::after{content:"–"}
  .faq details[open] summary{border-bottom:1px dashed var(--trait)}
  .faq .rep{padding:18px 22px;color:var(--gris);font-size:15px}
  .faq .rep b{color:var(--encre)}
  .faq details[open] .rep{animation:deplie .3s ease}
  @keyframes deplie{from{opacity:0;transform:translateY(-8px)}}

  /* ── téléscripteur des départements ────────────────── */
  .ticker{background:var(--encre);overflow:hidden;padding:11px 0;border-top:2px solid var(--encre)}
  .ticker-piste{display:inline-block;white-space:nowrap;will-change:transform;
    font:500 13px/1 "IBM Plex Mono";letter-spacing:.8px;color:var(--jaune);
    animation:teletype 50s linear infinite}
  .ticker:hover .ticker-piste{animation-play-state:paused}
  .ticker-piste b{color:#fff;font-weight:600}
  .ticker-piste .sep{color:var(--orange);margin:0 16px}
  @keyframes teletype{to{transform:translateX(-50%)}}

  /* ── pied ──────────────────────────────────────────── */
  footer{border-top:2px solid var(--encre);background:var(--papier);padding:36px 0 46px;
    font-size:13px;color:var(--gris);line-height:1.7}
  footer .w{display:grid;grid-template-columns:1fr 1fr;gap:30px}
  footer b{color:var(--encre)}
  footer a{color:var(--bleu)}
  footer p{margin:0 0 10px}

  /* ── responsive ────────────────────────────────────── */
  @media(max-width:860px){
    .hero .w,.pro .w,footer .w{grid-template-columns:1fr}
    .hero{padding:44px 0 40px}
    .stats{width:100%;flex-wrap:wrap}
    .stat{flex:1 1 33%;border-bottom:0;padding:12px 14px}
    .outil{padding:24px 18px}
    .radar{box-shadow:5px 5px 0 rgba(23,26,31,.14)}
    .flux{min-height:300px}
  }
  @media(max-width:480px){
    .ligne{grid-template-columns:44px 1fr;font-size:11.5px}
    .ligne .t{grid-column:2;justify-self:start}
    .stat b{font-size:21px}
  }

  @media(prefers-reduced-motion:reduce){
    *,*::before,*::after{animation:none!important;transition:none!important}
    h1 .l span{transform:none}
    .apparait{opacity:1;transform:none}
  }

/* ── pages départementales (générées) ──────────────────── */
.fil{font:500 12px/1.5 "IBM Plex Mono";text-transform:uppercase;letter-spacing:.6px;
  color:var(--gris);padding:18px 0 0}
.fil a{color:var(--bleu);text-decoration:none}
.fil a:hover{text-decoration:underline}
.fil span{opacity:.55;margin:0 6px}
.dep-hero{padding:26px 0 40px}
.dep-hero h1{font:800 clamp(38px,6vw,68px)/1 "Big Shoulders";text-transform:uppercase;
  letter-spacing:.5px;margin:8px 0 18px}
.dep-hero h1 em{font-style:normal;color:var(--orange)}
.dep-intro{font-size:18px;color:var(--gris);max-width:44em;margin:0 0 26px}
.dep-intro b{color:var(--encre)}
.chiffres{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  border:2px solid var(--encre);background:var(--papier);margin:0 0 30px}
.chiffre{padding:16px 20px;border-right:2px solid var(--encre)}
.chiffre:last-child{border-right:0}
.chiffre b{display:block;font:700 30px/1 "Big Shoulders";letter-spacing:.5px;
  font-variant-numeric:tabular-nums}
.chiffre span{font:500 11px/1.35 "IBM Plex Mono";text-transform:uppercase;
  letter-spacing:.5px;color:var(--gris)}
.bloc{background:var(--papier);border:2px solid var(--encre);padding:22px 24px;margin:0 0 22px;
  box-shadow:6px 6px 0 rgba(23,26,31,.10)}
.bloc h2{font:700 22px/1.15 "Big Shoulders";text-transform:uppercase;letter-spacing:.5px;
  margin:0 0 12px}
.bloc p{margin:0 0 12px;color:var(--gris)}
.bloc p b{color:var(--encre)}
.bloc p:last-child{margin-bottom:0}
.communes{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0;padding:0;list-style:none}
.communes li{font:500 13px/1 "IBM Plex Mono";border:1px solid var(--trait);
  background:var(--beton);padding:8px 12px}
.actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:16px}
.gratuit{display:inline-block;background:var(--orange);color:#fff;text-decoration:none;
  font:700 15px/1 "Barlow";padding:15px 22px;border:2px solid var(--encre);
  box-shadow:4px 4px 0 var(--encre);transition:transform .12s,box-shadow .12s}
.gratuit:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--encre)}
.second{display:inline-block;background:var(--papier);color:var(--encre);text-decoration:none;
  font:600 15px/1 "Barlow";padding:15px 22px;border:2px solid var(--encre)}
.second:hover{background:var(--bleu-pale)}
.mini{font:500 12.5px/1.5 "IBM Plex Mono";color:var(--gris);margin-top:12px}
.voisins{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px;
  margin:14px 0 0;padding:0;list-style:none}
.voisins a{display:block;text-decoration:none;color:var(--encre);background:var(--papier);
  border:1px solid var(--trait);padding:11px 13px;font-size:14px}
.voisins a:hover{border-color:var(--bleu);color:var(--bleu)}
.voisins a b{font:600 12px/1 "IBM Plex Mono";color:var(--gris);margin-right:7px}
.voisins a:hover b{color:var(--bleu)}
.tous{margin:0;padding:0;list-style:none;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px}
.tous a{display:flex;justify-content:space-between;gap:10px;text-decoration:none;
  color:var(--encre);background:var(--papier);border:1px solid var(--trait);padding:12px 14px}
.tous a:hover{border-color:var(--bleu);color:var(--bleu)}
.tous .n{font:600 12px/1.4 "IBM Plex Mono";color:var(--gris)}
.tous a:hover .n{color:var(--bleu)}
.tous .q{font:600 13px/1.4 "IBM Plex Mono";color:var(--gris);white-space:nowrap}
@media(max-width:640px){
  .chiffre{border-right:0;border-bottom:2px solid var(--encre)}
  .chiffre:last-child{border-bottom:0}
}