* { margin:0; padding:0; box-sizing:border-box; }

  :root{
    --font:    'Raleway', sans-serif;
    --bg:      #f5f5f5;
    --surface: #ffffff;
    --text:    #111;
    --muted:   #86868b;
    --border:  rgba(0,0,0,0.07);
    --line:    #d2d2d7;
    --accent:  #0071e3;
    --radius:  12px;
    /* Palette reprise des catégories TechWatch, pour rester en famille */
    --c1:#0071e3; --c2:#1a7f37; --c3:#b45309; --c4:#5e5ce6; --c5:#d92b2b;
  }

  body{ font-family:var(--font); background:var(--bg); color:var(--text);
        font-weight:400; font-size:15px; line-height:1.6; overflow:hidden; }

  /* ── Barre supérieure ──────────────────────────────────────────── */
  .topbar{ position:fixed; top:0; left:0; right:0; z-index:1200;
    height:52px; padding:0 24px; display:flex; align-items:center;
    justify-content:space-between;
    background:rgba(245,245,245,0.82);
    backdrop-filter:blur(20px) saturate(180%);
    -webkit-backdrop-filter:blur(20px) saturate(180%);
    border-bottom:1px solid var(--border); }
  .topbar .logo{ font-size:16px; font-weight:300; letter-spacing:.3px; }
  .topbar .logo b{ font-weight:500; }
  .topbar .meta{ font-size:12px; font-weight:300; color:var(--muted); letter-spacing:.3px; }

  #map{ position:absolute; top:52px; left:0; right:0; bottom:0; }
  .leaflet-container{ background:#e9e9ea; font-family:var(--font); }

  /* ── Cartes flottantes ─────────────────────────────────────────── */
  .carte{ position:absolute; z-index:1000;
    background:rgba(255,255,255,0.88);
    backdrop-filter:blur(20px) saturate(180%);
    -webkit-backdrop-filter:blur(20px) saturate(180%);
    border:1px solid var(--border); border-radius:var(--radius);
    box-shadow:0 1px 3px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06); }

  /* Deux colonnes en flex : les panneaux s'empilent et se partagent la
     hauteur disponible. Aucun ne peut en recouvrir un autre, quelle que
     soit la taille du contenu ou de la fenêtre. */
  .col{ position:absolute; top:68px; bottom:80px; width:272px; z-index:1000;
        display:flex; flex-direction:column; gap:12px; pointer-events:none; }
  .col-g{ left:16px; }
  .col-d{ right:16px; width:268px; }
  /* Les panneaux gardent leur hauteur naturelle. Seuls ceux qui portent
     une longue liste absorbent la place restante et défilent : sinon le
     plus volumineux écrase les autres jusqu'à les faire disparaître. */
  .col{ overflow:hidden; }
  .col .carte{ position:static; pointer-events:auto; flex:0 0 auto; overflow:visible; }
  /* La liste absorbe la place libre mais cède devant une fiche ouverte :
     sans plancher ni plafond, elle poussait la fiche hors de l'écran. */
  .col #liste, .col #faits{ flex:1 1 auto; min-height:110px; overflow:auto; }
  /* flex-shrink à zéro : la fiche garde sa hauteur et c'est la liste qui
     cède. L'inverse la réduisait à deux lignes illisibles, puisque la
     liste, elle, a toujours de quoi remplir. */
  .col #fiche{ flex:0 0 auto; max-height:60%; overflow:auto; }
  #ui{ padding:16px; }
  .grp{ margin-bottom:16px; }
  .grp:last-child{ margin-bottom:0; }
  .grp>label{ display:block; font-size:10px; font-weight:500;
    text-transform:uppercase; letter-spacing:.09em; color:var(--muted);
    margin-bottom:8px; }

  .seg{ display:flex; flex-wrap:wrap; gap:6px; }
  .seg button{ flex:1 1 auto; min-width:62px; padding:7px 10px;
    font-family:inherit; font-size:11.5px; font-weight:400; cursor:pointer;
    background:var(--surface); color:rgba(17,17,17,.55);
    border:1px solid var(--line); border-radius:20px; transition:.2s; }
  .seg button:hover{ color:var(--text); border-color:rgba(0,113,227,.4); }
  .seg button.on{ background:rgba(0,113,227,.06); border-color:rgba(0,113,227,.35);
    color:var(--accent); font-weight:500; }
  .hint{ font-size:10.5px; font-weight:300; color:var(--muted);
    margin-top:8px; line-height:1.5; }

  /* ── Chiffres ──────────────────────────────────────────────────── */
  #stats{ display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-bottom:12px; }
  /* Aucune transformation au survol : déplacer la vignette la faisait
     sortir de sous le curseur, ce qui la dé-survolait, ce qui la
     remettait en place, en boucle. Seule la bordure réagit. */
  .st{ background:var(--surface); border:1px solid var(--border);
       border-radius:10px; padding:9px 11px; cursor:default;
       transition:border-color .18s, background .18s; }
  /* Chaque chiffre porte sa propre couleur : six vignettes blanches
     alignées se lisaient comme un tableau comptable. Fond très pâle,
     bordure teintée, nombre en couleur, libellé neutre pour ne pas
     saturer. La palette est celle des catégories TechWatch. */
  .st b{ color:var(--c,var(--text)); }
  .st{ --c:var(--text); }
  .st.c1{ --c:#0071e3; background:rgba(0,113,227,.07);  border-color:rgba(0,113,227,.26); }
  .st.c2{ --c:#1a7f37; background:rgba(26,127,55,.07);  border-color:rgba(26,127,55,.26); }
  .st.c3{ --c:#5e5ce6; background:rgba(94,92,230,.07);  border-color:rgba(94,92,230,.26); }
  .st.c4{ --c:#b45309; background:rgba(180,83,9,.07);   border-color:rgba(180,83,9,.26); }
  .st.c5{ --c:#0e7490; background:rgba(14,116,144,.07); border-color:rgba(14,116,144,.26); }
  .st.c6{ --c:#be185d; background:rgba(190,24,93,.07);  border-color:rgba(190,24,93,.26); }
  .st[data-aide]:hover{ border-color:var(--c); }
  .st b{ display:block; font-size:19px; font-weight:300; color:var(--text);
    font-variant-numeric:tabular-nums; line-height:1.25; letter-spacing:-.4px; }
  .st span{ font-size:9.5px; font-weight:400; color:var(--muted);
    text-transform:uppercase; letter-spacing:.05em; }

  /* ── Frise ─────────────────────────────────────────────────────── */
  #frise{ left:16px; right:16px; bottom:16px; padding:10px 16px;
    display:flex; align-items:center; gap:14px; }
  #frise input{ flex:1; accent-color:var(--accent); cursor:pointer; }
  #dateAff{ font-variant-numeric:tabular-nums; font-size:12px; font-weight:400;
    color:var(--text); min-width:158px; text-align:right; }
  #play{ flex:none; width:32px; height:32px; border-radius:50%; cursor:pointer;
    background:var(--accent); border:0; color:#fff; font-size:12px; }
  #last{ flex:none; padding:7px 15px; font-family:inherit; font-size:11.5px;
    cursor:pointer; background:var(--surface); color:rgba(17,17,17,.55);
    border:1px solid var(--line); border-radius:20px; transition:.2s; }
  #last:hover{ color:var(--text); border-color:rgba(0,113,227,.4); }
  #last.on{ background:rgba(0,113,227,.06); border-color:rgba(0,113,227,.35);
    color:var(--accent); font-weight:500; }

  /* ── Légende et faits d'armes ──────────────────────────────────── */
  #leg{ padding:12px 14px; font-size:11.5px; flex:0 0 auto; }
  #leg b{ font-size:11px; font-weight:600; display:block; margin-bottom:8px;
    text-transform:uppercase; letter-spacing:.07em; color:var(--accent); }
  #leg .l{ display:flex; align-items:center; gap:8px; margin:5px 0;
    color:var(--muted); font-weight:300; }
  #leg i{ width:16px; height:16px; border-radius:4px; flex:none; display:block;
    border:1px solid rgba(0,0,0,.10); }
  /* Les échantillons reprennent le rendu réel de la carte : une pastille
     unie ne permettait pas de reconnaître la trame de brume. */
  .ech-ciel{ background:linear-gradient(180deg,#cbe2fa,#e4f1fe); }
  .ech-terre{ background:linear-gradient(135deg,#cfe3c8,#e8dcc0 60%,#bcd6ef); }
  .ech-front{ background:linear-gradient(180deg,#fff 55%,#a9c6e8 55%); }
  .ech-balise{ background:#cbe2fa; border-radius:50%!important;
    box-shadow:inset 0 0 0 3px rgba(184,88,14,.75); }
  #leg .note{ font-size:10.5px; font-weight:300; color:var(--muted);
    margin-top:8px; line-height:1.5; }

  #faits{ padding:13px 15px; font-size:11.5px; }
  #faits>b{ font-size:11px; font-weight:600; display:block; margin-bottom:10px;
    text-transform:uppercase; letter-spacing:.07em; color:var(--accent); }
  .fa{ display:flex; justify-content:space-between; gap:10px; padding:5px 0;
    border-top:1px solid var(--border); }
  .fa:first-of-type{ border-top:0; }
  .fa span{ color:var(--muted); font-weight:300; flex:1; }
  .fa b{ font-weight:500; font-variant-numeric:tabular-nums; white-space:nowrap; }
  .bloc{ border-top:1px solid var(--border); padding-top:9px; margin-top:10px;
    line-height:1.55; font-weight:300; }
  .bloc em{ font-style:normal; font-size:9.5px; font-weight:600;
    text-transform:uppercase; letter-spacing:.07em; color:var(--accent);
    display:block; margin-bottom:6px; }
  .bloc .fa{ border-top:0; padding:2px 0; }
  .bloc b{ font-weight:500; }
  .note2{ font-size:10.5px; color:var(--muted); margin-top:3px; }
  .pf{ display:flex; justify-content:space-between; gap:10px; padding:3px 0;
       border-radius:6px; transition:background .18s; }
  .pf:hover{ background:rgba(0,113,227,.05); }
  .pf span{ color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap; }
  .exp{ padding:6px 8px; margin:0 -8px; border-radius:8px; cursor:pointer;
        transition:background .18s; }
  .exp:hover{ background:rgba(0,113,227,.06); }
  .exp-t{ display:flex; justify-content:space-between; gap:10px; }
  .exp-t b{ font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .exp-t span{ color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap; }
  .exp-s{ color:var(--muted); font-size:10.5px; }

  /* ── Fiche de la balade mise en avant ──────────────────────────── */
  #fiche{ padding:14px 16px; display:none; font-size:11.5px; font-weight:300; }
  #fiche.on{ display:block; }
  /* Sans croix visible, on ne savait pas comment sortir d'une fiche.
     Elle est collante en haut : la fiche peut être longue. */
  #fiche{ position:relative; }
  #fiche .tete{ display:flex; align-items:flex-start; gap:10px; position:sticky;
    top:-14px; padding:14px 0 2px; margin-top:-14px;
    background:linear-gradient(rgba(255,255,255,.96) 78%,rgba(255,255,255,0)); }
  #fiche .tete>div{ flex:1; min-width:0; }
  #fermer{ flex:none; width:26px; height:26px; border-radius:50%; cursor:pointer;
    border:1px solid var(--line); background:var(--surface); color:var(--muted);
    font-family:inherit; font-size:14px; line-height:1; transition:.18s; }
  #fermer:hover{ background:rgba(217,43,43,.08); border-color:rgba(217,43,43,.4);
                 color:#d92b2b; }
  #fiche h2{ font-size:14px; font-weight:500; margin-bottom:1px; }
  #fiche .q{ color:var(--muted); font-size:10.5px; margin-bottom:10px; }
  #fiche .r{ display:flex; justify-content:space-between; padding:4px 0;
    border-top:1px solid var(--border); }
  #fiche .r span{ color:var(--muted); }
  #fiche .r b{ font-weight:500; font-variant-numeric:tabular-nums; }
  #fiche .co{ color:var(--muted); margin-top:9px; line-height:1.5;
    border-top:1px solid var(--border); padding-top:8px; }

  /* ── Appel à l'action « voir mes territoires » ────────────────────
     Posé en haut de la carte, centré, uniquement en brouillard. C'est
     la main tendue au visiteur qui ne sait pas quoi faire des nuages.
     Masqué par défaut, révélé par la classe en-brouillard sur le body,
     et il respire doucement pour attirer l'œil sans crier. */
  #versTerritoire{ display:none; position:fixed; top:66px; left:50%;
    transform:translateX(-50%); z-index:1150;
    align-items:center; gap:9px; padding:11px 20px; cursor:pointer;
    font-family:var(--font); font-size:13.5px; font-weight:500; color:#fff;
    background:var(--accent); border:0; border-radius:24px;
    box-shadow:0 4px 16px rgba(0,113,227,.34);
    animation:respire 3.2s ease-in-out infinite; }
  body.en-brouillard #versTerritoire{ display:inline-flex; }
  #versTerritoire:hover{ filter:brightness(1.07); transform:translateX(-50%) translateY(-2px); }
  #versTerritoire:active{ transform:translateX(-50%) scale(.96); }
  #versTerritoire .pastille{ width:12px; height:12px; border-radius:3px;
    background:linear-gradient(135deg,#ffd166,#34d399); flex:none;
    box-shadow:0 0 0 2px rgba(255,255,255,.5); }
  @media (max-width:960px), (max-height:520px){
    #versTerritoire{ top:58px; font-size:12.5px; padding:10px 17px; }
  }

  /* ── La récré : ce qui fait qu'on a envie de cliquer ─────────────
     Rien de tapageur, on garde la charte. Juste des ressorts courts,
     des apparitions qui viennent du bas, et une quête qui respire. */
  @keyframes entree{ from{ opacity:0; transform:translateY(10px) scale(.985); }
                     to  { opacity:1; transform:none; } }
  @keyframes glisse{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
  @keyframes respire{ 0%,100%{ box-shadow:0 0 0 0 rgba(0,113,227,.16); }
                      50%    { box-shadow:0 0 0 7px rgba(0,113,227,0); } }
  @keyframes pop{ 0%{ transform:scale(1); } 45%{ transform:scale(1.14); } 100%{ transform:scale(1); } }

  .carte{ animation:entree .45s cubic-bezier(.22,1,.36,1) both; }
  #ui{ animation-delay:.04s } #leg{ animation-delay:.10s } #faits{ animation-delay:.16s }
  #frise{ animation-delay:.22s }
  #fiche.on{ animation:glisse .34s cubic-bezier(.22,1,.36,1) both; }

  .seg button{ will-change:transform; }
  .seg button:hover{ transform:translateY(-1.5px); }
  .seg button:active{ transform:scale(.94); }
  .seg button.on{ animation:pop .32s cubic-bezier(.34,1.56,.64,1); }

  #play:hover{ transform:scale(1.12); } #play:active{ transform:scale(.9); }
  #play{ transition:transform .2s cubic-bezier(.34,1.56,.64,1); }
  #last:hover{ transform:translateY(-1.5px); }


    .fa{ transition:background .18s; border-radius:6px; }
  .fa:hover{ background:rgba(0,113,227,.045); }

  @media (prefers-reduced-motion:reduce){
    *{ animation-duration:.01ms!important; animation-iteration-count:1!important;
       transition-duration:.01ms!important; }
  }

  /* ── Téléphone ───────────────────────────────────────────────────
     Les deux colonnes latérales n'ont aucun sens sur 390 px de large.
     Tout bascule dans une feuille qui remonte du bas, à la iOS : au
     repos elle ne montre que la frise, on la tire pour le reste.
     display:contents fait que ce conteneur n'existe pas sur grand
     écran, la version bureau reste identique au pixel près.        */
  #panneaux{ display:contents; }
  #poignee{ display:none; }

  @media (max-width:960px), (max-height:520px){
    .topbar{ height:48px; padding:0 14px; }
    .topbar .meta{ font-size:11px; }
    #map{ top:48px; }

    #panneaux{
      display:flex; flex-direction:column;
      position:fixed; left:0; right:0; bottom:0; z-index:1100;
      max-height:78vh; overflow:hidden auto;
      background:rgba(252,252,253,.95);
      backdrop-filter:blur(24px) saturate(180%);
      -webkit-backdrop-filter:blur(24px) saturate(180%);
      border-top:1px solid var(--border);
      border-radius:18px 18px 0 0;
      box-shadow:0 -6px 30px rgba(0,0,0,.10);
      padding-bottom:max(10px, env(safe-area-inset-bottom));
      transform:translateY(calc(100% - 136px));
      transition:transform .38s cubic-bezier(.32,.72,0,1);
      overscroll-behavior:contain;
    }
    body.ouvert #panneaux{ transform:none; }

    /* La poignée. Une barre grise muette ne disait pas qu'il y avait tout
       un site dessous : liste, carnet, rendus. Elle annonce désormais son
       contenu et porte un chevron qui pivote une fois ouverte. C'est le
       point d'entrée du mobile, il doit se voir et se comprendre. */
    #poignee{ display:flex; order:0; flex-direction:column; align-items:center;
      gap:5px; border:0; background:none; width:100%; padding:8px 0 4px;
      cursor:pointer; font-family:var(--font); }
    #poignee .tirette{ width:42px; height:4px; border-radius:2px;
      background:#c7c7cc; transition:background .2s; }
    #poignee:active .tirette{ background:#8e8e93; }
    #poignee .etiq{ font-size:12px; font-weight:300; color:var(--muted);
      display:flex; align-items:center; gap:6px; }
    #poignee .etiq b{ font-weight:600; color:var(--text); }
    #poignee .chevron{ display:inline-block; font-size:15px; line-height:1;
      color:var(--accent); transition:transform .38s cubic-bezier(.32,.72,0,1); }
    /* Chevron vers le haut au repos (tirez), retourné une fois déplié */
    body.ouvert #poignee .chevron{ transform:rotate(180deg); }
    /* Feuille repliée un peu plus haute pour loger l'étiquette */

    /* Ordre de la frise sur téléphone : ce qui compte au repos vient en
       premier. La lecture, le curseur et la date tiennent sur la première
       ligne, donc restent visibles feuille repliée ; les trois boutons
       secondaires passent en dessous et n'apparaissent qu'une fois la
       feuille tirée. Avant, les boutons occupaient la première ligne et
       le curseur, qui est l'essentiel, dépassait de douze pixels. */
    #frise{ order:1; position:static; margin:0 12px 10px; padding:9px 12px;
            gap:8px; flex-wrap:wrap; }
    #play{ order:0; }
    #frise input{ order:1; flex:1 1 auto; min-width:120px; }
    #dateAff{ order:2; min-width:0; font-size:11.5px; white-space:nowrap; }
    #last{ order:3; } #tour{ order:4; } #ensemble{ order:5; }
    #last, #tour, #ensemble{ flex:1 1 auto; font-size:11px; padding:6px 8px; }
    #last{ padding:6px 12px; font-size:11px; }
    .topbar .meta{ font-size:10.5px; }

    /* Les trois règles qui rendaient le mobile inutilisable. Héritées du
       grand écran, elles n'étaient jamais annulées ici : la colonne
       coupait ce qui dépassait, la liste et le carnet étaient bornés à
       110 px, et surtout la feuille ne défilait pas. Le contenu tronqué
       était donc irrécupérable, aucun geste ne permettait d'y accéder. */
    .col{ position:static; display:flex; flex-direction:column; width:auto;
          bottom:auto; top:auto; height:auto; pointer-events:auto;
          overflow:visible; }
    .col #liste, .col #faits, .col #fiche{
          flex:0 0 auto; min-height:0; max-height:none; overflow:visible; }
    /* La fiche remonte au-dessus des réglages et de la liste : elle est
       contextuelle, elle doit être la première chose lue après un clic. */
    #fiche{ order:-1; }
    .col-g{ order:2; } .col-d{ order:3; }
    .col .carte{ margin:0 12px 12px; max-height:none; overflow:visible; }

    /* Cibles tactiles confortables, et deux colonnes de chiffres max */
    /* 44 px est le minimum recommandé au doigt. On y était à 27 ou 30 px
       sur les boutons de la frise, et à 36 sur les segments. */
    .seg button{ min-height:44px; font-size:12px; }
    #last, #tour, #ensemble{ min-height:44px; }
    #play{ width:44px; height:44px; }
    #frise input{ height:28px; }
    #stats{ gap:7px; }
    .st b{ font-size:18px; }

    /* Le zoom Leaflet remonte au-dessus de la feuille repliée */
    .leaflet-bottom.leaflet-right{ bottom:132px; }
    .leaflet-control-attribution{ margin-bottom:122px!important; }
  }

  @media (max-width:430px){ .topbar .meta{ display:none; } }

  @media (max-height:520px) and (orientation:landscape){
    #panneaux{ max-height:88vh; transform:translateY(calc(100% - 108px)); }
  }

  /* ── Liste des balades ───────────────────────────────────────────
     Cinq cents entrées : sans elle, on ne pouvait atteindre une balade
     que par hasard, et la carte restait collée à la région parisienne. */
  #liste{ padding:13px 15px; display:flex; flex-direction:column; min-height:120px; }
  #liste>b{ font-size:11px; font-weight:600; display:block; margin-bottom:9px;
    text-transform:uppercase; letter-spacing:.07em; color:var(--accent); }
  /* « Tout » en tête sur toute la largeur, les quatre filtres en dessous
     sur une seule ligne. En flex libre, « Course » se retrouvait seule
     sur la deuxième ligne et étirée : le filtre le plus anecdotique
     devenait le plus gros bouton du panneau. */
  #liste .seg{ display:grid; grid-template-columns:repeat(4,1fr);
               gap:6px; margin-bottom:10px; }
  #liste .seg button{ min-width:0; padding:5px 2px; font-size:10.5px; }
  #liste .seg button:first-child{ grid-column:1/-1; padding:8px;
                                  font-size:12px; font-weight:500; }
  /* position:relative pour que offsetTop des lignes se mesure bien
     par rapport à la liste, et non à un ancêtre plus lointain. */
  #listeC{ overflow:auto; flex:1 1 auto; min-height:0; margin:0 -6px;
           padding:0 6px; position:relative; }
  .an{ font-size:9.5px; font-weight:600; letter-spacing:.07em; color:var(--muted);
    text-transform:uppercase; padding:9px 0 4px; position:sticky; top:0;
    background:rgba(255,255,255,.94); backdrop-filter:blur(8px); }
  .bal{ display:flex; gap:8px; align-items:baseline; padding:5px 7px; margin:0 -7px;
    border-radius:8px; cursor:pointer; transition:background .15s; }
  .bal:hover{ background:rgba(0,113,227,.07); }
  .bal.on{ background:rgba(0,113,227,.12); box-shadow:inset 2px 0 0 var(--accent); }
  .bal .t{ flex:1; min-width:0; }
  .bal .n{ font-size:11.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .bal .l{ font-size:10px; color:var(--muted); overflow:hidden;
    text-overflow:ellipsis; white-space:nowrap; }
  .bal .k{ font-size:10.5px; color:var(--muted); font-variant-numeric:tabular-nums;
    white-space:nowrap; }
  #listeVide{ font-size:11px; color:var(--muted); font-weight:300; padding:6px 0; }

  /* Sur téléphone la liste ne peut pas prendre toute la feuille */
  /* Sur téléphone la colonne n'a pas de hauteur définie, donc un enfant
     en flex:1 se réduit à rien. On lui donne des bornes explicites. */
  @media (max-width:960px), (max-height:520px){
    #liste{ display:block; }
    #listeC{ max-height:46vh; min-height:220px; }
  }

  /* ── Bulle d'aide ────────────────────────────────────────────────
     L'attribut title du navigateur met une seconde à apparaître, ne se
     style pas et ne fonctionne pas au toucher. Celle-ci est instantanée
     et se ferme au clic ailleurs. */
  /* ── Écran d'accueil ─────────────────────────────────────────────
     On arrive sur une planète entièrement couverte. Le visiteur ne voit
     donc pas une carte de statistiques mais une promesse, et le premier
     clic déclenche exactement ce que le site raconte. */
  #accueil{ position:fixed; inset:0; z-index:1500; display:flex;
    align-items:center; justify-content:center;
    background:rgba(226,240,254,.55);
    backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
    transition:opacity .6s ease, backdrop-filter .6s ease; }
  #accueil.parti{ opacity:0; pointer-events:none; backdrop-filter:blur(0); }

  #carteAccueil{ text-align:center; padding:38px 42px; max-width:520px;
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(24px) saturate(180%);
    -webkit-backdrop-filter:blur(24px) saturate(180%);
    border:1px solid var(--border); border-radius:20px;
    box-shadow:0 2px 6px rgba(0,0,0,.04), 0 24px 60px rgba(30,60,110,.14);
    animation:entree .7s cubic-bezier(.22,1,.36,1) both; }
  #carteAccueil h1{ font-size:34px; font-weight:200; letter-spacing:-.5px; margin-bottom:14px; }
  #carteAccueil h1 b{ font-weight:500; }
  .baseline{ font-size:15px; font-weight:300; color:#4a4f57; line-height:1.65; }
  #chiffresAccueil{ display:flex; justify-content:center; gap:26px; margin:26px 0 28px;
    flex-wrap:wrap; }
  #chiffresAccueil div{ min-width:82px; }
  #chiffresAccueil b{ display:block; font-size:24px; font-weight:300;
    letter-spacing:-.5px; font-variant-numeric:tabular-nums; }
  #chiffresAccueil span{ font-size:9.5px; font-weight:500; color:var(--muted);
    text-transform:uppercase; letter-spacing:.07em; }
  #entrer{ font-family:inherit; font-size:14px; font-weight:500; cursor:pointer;
    padding:12px 30px; border-radius:24px; border:0; color:#fff;
    background:var(--accent); box-shadow:0 4px 16px rgba(0,113,227,.32);
    transition:transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s; }
  #entrer:hover{ transform:translateY(-2px); box-shadow:0 8px 22px rgba(0,113,227,.38); }
  #entrer:active{ transform:scale(.96); }
  .petit{ font-size:11px; font-weight:300; color:var(--muted); margin-top:16px; }

  /* Tant que le ciel n'est pas ouvert, l'interface reste en retrait */
  body.intro .carte, body.intro .topbar .meta{ opacity:0; pointer-events:none;
    animation:none!important; }
  .carte, .topbar .meta{ transition:opacity .5s ease; }

  @media (max-width:960px), (max-height:520px){
    #carteAccueil{ margin:16px; padding:30px 24px; }
    #carteAccueil h1{ font-size:27px; }
    .baseline{ font-size:13.5px; }
    #chiffresAccueil{ gap:18px; margin:22px 0 24px; }
  }

  /* ── Carton d'étape de la visite guidée ──────────────────────────
     Posé au centre bas, loin des panneaux, il nomme la région et donne
     l'ampleur. C'est lui qui raconte, la carte ne fait qu'illustrer. */
  #etape{ position:fixed; left:50%; bottom:96px; transform:translate(-50%,14px);
    z-index:1250; padding:14px 26px; text-align:center; opacity:0;
    background:rgba(255,255,255,.94);
    backdrop-filter:blur(20px) saturate(180%);
    -webkit-backdrop-filter:blur(20px) saturate(180%);
    border:1px solid var(--border); border-radius:16px; pointer-events:none;
    box-shadow:0 4px 10px rgba(0,0,0,.05), 0 18px 44px rgba(30,60,110,.14);
    transition:opacity .45s ease, transform .45s cubic-bezier(.22,1,.36,1); }
  #etape.on{ opacity:1; transform:translate(-50%,0); }
  #etape .lieu{ font-size:22px; font-weight:300; letter-spacing:-.3px; }
  #etape .det{ font-size:11.5px; font-weight:300; color:var(--muted); margin-top:3px; }
  #etape .cpt{ font-size:9.5px; font-weight:600; color:var(--accent);
    text-transform:uppercase; letter-spacing:.08em; margin-bottom:5px; }
  #ensemble{ flex:none; padding:7px 15px; font-family:inherit; font-size:11.5px;
    cursor:pointer; background:var(--surface); color:rgba(17,17,17,.55);
    border:1px solid var(--line); border-radius:20px; transition:.2s; }
  #ensemble:hover{ color:var(--text); border-color:rgba(0,113,227,.4); }
  #tour{ flex:none; padding:7px 15px; font-family:inherit; font-size:11.5px;
    cursor:pointer; background:var(--surface); color:rgba(17,17,17,.55);
    border:1px solid var(--line); border-radius:20px; transition:.2s; }
  #tour:hover{ color:var(--text); border-color:rgba(0,113,227,.4); }
  #tour.on{ background:rgba(0,113,227,.06); border-color:rgba(0,113,227,.35);
    color:var(--accent); font-weight:500; }
  @media (max-width:960px), (max-height:520px){
    #etape{ bottom:auto; top:64px; padding:11px 18px; max-width:calc(100vw - 32px); }
    #etape .lieu{ font-size:17px; }
  }

  /* ── Tutoriel ────────────────────────────────────────────────────
     Un projecteur découpé dans un voile sombre : l'immense box-shadow
     assombrit tout l'écran sauf le rectangle mis en avant, sans avoir à
     empiler quatre calques. */
  #spot{ position:fixed; z-index:1400; border-radius:16px; pointer-events:none;
    opacity:0; box-shadow:0 0 0 9999px rgba(12,22,40,.42);
    transition:opacity .3s ease, top .45s cubic-bezier(.22,1,.36,1),
               left .45s cubic-bezier(.22,1,.36,1),
               width .45s cubic-bezier(.22,1,.36,1),
               height .45s cubic-bezier(.22,1,.36,1); }
  #spot.on{ opacity:1; }

  #tuto{ position:fixed; z-index:1410; width:290px; padding:16px 18px;
    background:var(--surface); border:1px solid var(--border); border-radius:16px;
    box-shadow:0 4px 12px rgba(0,0,0,.06), 0 20px 50px rgba(20,40,80,.20);
    opacity:0; transform:translateY(6px); pointer-events:none;
    transition:opacity .3s ease, transform .3s cubic-bezier(.22,1,.36,1),
               top .45s cubic-bezier(.22,1,.36,1), left .45s cubic-bezier(.22,1,.36,1); }
  #tuto.on{ opacity:1; transform:none; pointer-events:auto; }
  #tuto .cpt{ display:flex; justify-content:space-between; align-items:center;
    font-size:9.5px; font-weight:600; text-transform:uppercase;
    letter-spacing:.08em; color:var(--muted); margin-bottom:8px; }
  #tuto h3{ font-size:15px; font-weight:500; margin-bottom:5px; }
  #tuto p{ font-size:12px; font-weight:300; color:#4a4f57; line-height:1.55; }
  #passer{ font-family:inherit; font-size:10px; font-weight:500; cursor:pointer;
    background:none; border:0; color:var(--muted); text-transform:uppercase;
    letter-spacing:.08em; padding:2px 0; }
  #passer:hover{ color:var(--text); }
  #suivant{ margin-top:13px; width:100%; font-family:inherit; font-size:12.5px;
    font-weight:500; cursor:pointer; padding:9px; border-radius:20px; border:0;
    color:#fff; background:var(--accent); transition:.2s; }
  #suivant:hover{ filter:brightness(1.08); }

  #bulle{ position:fixed; z-index:1300; max-width:250px; padding:9px 12px;
    background:rgba(20,24,32,.94); color:#f2f4f8; border-radius:10px;
    font-size:11.5px; font-weight:300; line-height:1.5; pointer-events:none;
    opacity:0; transform:translateY(4px); transition:opacity .14s, transform .14s;
    box-shadow:0 6px 24px rgba(0,0,0,.22); }
  #bulle.on{ opacity:1; transform:none; }

  /* ── Sortie de l'introduction ─────────────────────────────────────
     Discrète mais toujours présente, en haut à droite, au-dessus du
     voile. Elle disparaît d'elle-même à la fin de la mise en scène. */
  #couper{ position:fixed; top:62px; right:16px; z-index:1450;
    font-family:var(--font); font-size:11.5px; font-weight:500; cursor:pointer;
    padding:7px 15px; border-radius:20px; color:var(--muted);
    background:rgba(255,255,255,.92); border:1px solid var(--border);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    box-shadow:0 2px 10px rgba(20,40,80,.10); transition:.2s; }
  #couper:hover{ color:var(--text); border-color:rgba(0,113,227,.4); }

  /* ── Amorce de défilement ─────────────────────────────────────────
     Un dégradé collé en bas du panneau quand il reste du contenu.
     Sans lui, 942 px du carnet passaient inaperçus. */
  #faits, #listeC{ position:relative; }
  #faits.deborde::after, #listeC.deborde::after{
    content:''; position:sticky; display:block; bottom:-13px; height:26px;
    margin:-26px -15px -13px; pointer-events:none;
    background:linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.96)); }

  /* Le contrôle de zoom de Leaflet est ancré en bas à droite, pile où
     se trouve la frise : ses 47 px inférieurs, donc tout le bouton
     « moins », passaient dessous et étaient inatteignables. */
  .leaflet-bottom.leaflet-right{ bottom:88px; }

  .leaflet-control-attribution{ font-family:var(--font)!important;
    font-size:9px!important; font-weight:300!important; }
  .leaflet-bar a{ font-family:var(--font)!important; }