/* site.css — feuille de style du Trail des Terres de Saone.
   La premiere partie vient du <style> de index.html. La seconde traduit les
   attributs style-hover / style-focus, que le runtime fabriquait a la volee. */
body{margin:0;background:#FBF9F4;-webkit-font-smoothing:antialiased;text-wrap:pretty}
  *{box-sizing:border-box}
  a{color:#7FD3F5;text-decoration-thickness:1px;text-underline-offset:3px}
  a:hover{color:#B8E9FF}
  summary::-webkit-details-marker{display:none}
  details[open] .chev{transform:rotate(180deg)}
  @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
  .lf{outline-offset:3px}
  .lf:focus-visible{outline:3px solid #8CC63F}
  .leaflet-container{font-family:'Instrument Sans',sans-serif;background:#EDE8DB}
  .leaflet-container .leaflet-control-attribution{font-size:10px;background:rgba(244,240,231,.82)}

  /* ————— En-tête ————— */
  /* L'en-tete reste sur fond marine alors que la page est claire : il lui faut
     son encre a lui, sinon le titre de marque herite du texte sombre de .page. */
  .hdr{position:sticky;top:0;z-index:50;background:rgba(11,34,48,.94);color:#F4F0E7;backdrop-filter:blur(12px);border-bottom:1px solid rgba(244,240,231,.14)}
  .hdr-bar{max-width:1280px;margin:0 auto;padding:9px clamp(14px,3vw,28px);display:flex;align-items:center;gap:clamp(10px,2vw,22px)}
  .hdr-brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit;margin-right:auto;min-width:0}
  .hdr-brand:hover{color:inherit}
  .hdr-logo{width:40px;height:40px;object-fit:contain;display:block;flex:none}
  .hdr-names{display:grid;gap:2px;min-width:0}
  .hdr-title{font-family:Archivo,sans-serif;font-weight:900;font-size:15px;letter-spacing:.04em;line-height:1.05}
  .hdr-sub{font-family:'IBM Plex Mono',monospace;font-size:11px;color:#8CC63F;letter-spacing:.08em;white-space:nowrap}
  .hdr-cta{background:#8CC63F;color:#0B2230;font-family:Archivo,sans-serif;font-weight:700;letter-spacing:.02em;padding:12px 20px;border-radius:2px;text-decoration:none;font-size:15px;min-height:44px;display:inline-flex;align-items:center;flex:none}
  .hdr-cta:hover{background:#A2DB53;color:#0B2230}

  /* Bouton menu : masqué tant que les rubriques tiennent en largeur */
  .hdr-burger{display:none;align-items:center;gap:9px;flex:none;background:transparent;border:1px solid rgba(244,240,231,.32);color:#F4F0E7;border-radius:2px;padding:0 13px;min-height:44px;min-width:44px;font-family:Archivo,sans-serif;font-weight:700;font-size:13px;letter-spacing:.06em;cursor:pointer}
  .hdr-burger:hover{border-color:#8CC63F}
  .burger-icon{display:grid;gap:4px;width:18px;flex:none}
  .burger-icon i{display:block;height:2px;background:currentColor;border-radius:2px;transition:transform .18s ease,opacity .12s ease}
  .hdr-burger[aria-expanded="true"] .burger-icon i:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .hdr-burger[aria-expanded="true"] .burger-icon i:nth-child(2){opacity:0}
  .hdr-burger[aria-expanded="true"] .burger-icon i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

  /* ————— Navigation : onglets sur grand écran ————— */
  .hdr-nav{border-top:1px solid rgba(244,240,231,.1)}
  .nav-strip{max-width:1280px;margin:0 auto;padding:0 clamp(14px,3vw,28px);display:flex;gap:2px}
  .nav-item{position:relative;display:flex}
  .navlink{font-family:Archivo,sans-serif;font-weight:700;font-size:14px;letter-spacing:.01em;text-decoration:none;padding:13px 14px;white-space:nowrap;min-height:44px;display:inline-flex;align-items:center;border-bottom:2px solid transparent;color:#A8BCC6}
  .navlink:hover{color:#F4F0E7}
  .navlink[aria-current="page"]{border-bottom-color:#8CC63F;color:#F4F0E7}
  .nav-chev{font-size:10px;margin-left:7px;opacity:.75}

  /* Le sous-menu s'ouvre au survol ET au focus clavier : `:focus-within`
     suffit, aucun JavaScript n'est nécessaire pour le rendre accessible. */
  /* Largeur calée sur le contenu : les précisions ne doivent pas se couper
     en trois lignes, ce qui rendrait le menu inutilement haut. */
  .nav-drop{display:none;position:absolute;top:100%;left:0;z-index:60;
    width:max-content;min-width:250px;max-width:380px;
    background:#0E2937;border:1px solid rgba(244,240,231,.18);border-top:0;
    border-radius:0 0 3px 3px;box-shadow:0 20px 44px rgba(0,0,0,.5);padding:6px}
  /* la dernière rubrique ouvre vers la gauche pour ne pas sortir de l'écran */
  .nav-item:last-child .nav-drop{left:auto;right:0}
  .nav-item:hover .nav-drop,.nav-item:focus-within .nav-drop{display:block}
  .nav-item:hover>.navlink,.nav-item:focus-within>.navlink{color:#F4F0E7;background:#0E2937}
  .nav-sub{display:grid;gap:3px;align-content:center;min-height:48px;padding:9px 14px;border-radius:2px;text-decoration:none;color:#DCE7EC}
  .nav-sub:hover{background:rgba(140,198,63,.15);color:#F4F0E7}
  .nav-sub b{font-family:Archivo,sans-serif;font-weight:700;font-size:15px;letter-spacing:.01em}
  .nav-sub span{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.05em;color:#A8BCC6}

  .nav-backdrop,.cta-bar{display:none}

  /* ————— Sous 880 px : les rubriques ne tiennent plus, on passe au panneau ————— */
  @media (max-width:879px){
    .hdr-bar{padding:8px 14px;gap:10px}
    .hdr-logo{width:36px;height:36px}
    .hdr-title{font-size:13px;letter-spacing:.03em}
    /* la date repart dans la barre d'action basse, où elle reste toujours visible */
    .hdr-sub{display:none}
    .hdr-cta{display:none}
    .hdr-burger{display:inline-flex}

    .hdr-nav{position:absolute;top:100%;left:0;right:0;display:none;background:#0B2230;border-top:1px solid rgba(244,240,231,.14);box-shadow:0 20px 44px rgba(0,0,0,.5);max-height:calc(100dvh - 100%);overflow-y:auto;overscroll-behavior:contain}
    .hdr-nav[data-open="true"]{display:block}
    .nav-strip{flex-direction:column;gap:0;padding:4px 0 8px}
    .nav-item{position:static;flex-direction:column}
    .navlink{width:100%;min-height:54px;font-size:16px;padding:0 16px;border-bottom:2px solid transparent;border-left:3px solid transparent}
    .navlink[aria-current="page"]{border-bottom-color:transparent;border-left-color:#8CC63F;background:rgba(140,198,63,.12);color:#F4F0E7}
    .nav-item:hover>.navlink,.nav-item:focus-within>.navlink{background:transparent}
    .nav-chev{display:none}

    /* Dans le panneau, pas de menu déroulant : les sous-entrées sont
       simplement décalées sous leur rubrique, tout est visible d'un coup. */
    .nav-drop{display:block;position:static;min-width:0;padding:0 0 6px;
      background:transparent;border:0;box-shadow:none}
    .nav-sub{padding:8px 16px 8px 34px;border-radius:0;min-height:48px;
      border-bottom:1px solid rgba(244,240,231,.06)}
    .nav-sub:hover{background:rgba(140,198,63,.10)}

    .nav-backdrop[data-open="true"]{display:block;position:fixed;inset:0;z-index:40;background:rgba(5,16,23,.6)}

    /* Action principale à portée de pouce, jamais perdue dans le défilement */
    .cta-bar{display:flex;align-items:center;gap:12px;position:fixed;left:0;right:0;bottom:0;z-index:45;background:rgba(11,34,48,.94);backdrop-filter:blur(12px);border-top:1px solid rgba(244,240,231,.16);padding:10px 14px;padding-bottom:calc(10px + env(safe-area-inset-bottom))}
    .cta-bar[data-open="true"]{display:none}
    .cta-bar-when{margin:0;flex:none;font-family:'IBM Plex Mono',monospace;font-size:11px;line-height:1.35;letter-spacing:.04em;color:#8CC63F}
    .cta-bar-when span{color:#A8BCC6}
    .cta-bar-btn{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 14px;background:#8CC63F;color:#0B2230;border-radius:3px;font-family:Archivo,sans-serif;font-weight:800;font-size:17px;text-decoration:none;white-space:nowrap}
    .cta-bar-btn:hover{background:#A2DB53;color:#0B2230}
    /* le pied de page doit rester lisible au-dessus de la barre fixe */
    .page{padding-bottom:86px}
  }

  @media (max-width:400px){
    .burger-label{display:none}
    .hdr-burger{padding:0 12px}
  }

  /* ————— Carte des trois trails, page d'accueil ————— */
  /* Le cadre est réservé dès le départ : la carte arrive plus tard,
     elle ne doit pas décaler la page en s'affichant. */
  .homemap{position:relative;aspect-ratio:4/3;background:#EDE8DB;border:1px solid rgba(11,34,48,.14);border-radius:3px;overflow:hidden}
  .homemap-ghost{position:absolute;inset:0;width:100%;height:100%;display:block;transition:opacity .35s ease}
  /* aperçu SVG effacé une fois la vraie carte posée */
  .homemap[data-ready="true"] .homemap-ghost{opacity:0;pointer-events:none}

  .homemap-legend{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
  .homemap-legend a{display:flex;align-items:center;gap:9px;min-height:44px;padding:0 13px;border:1px solid rgba(11,34,48,.2);border-radius:2px;text-decoration:none;color:#3C525D;font-size:14px;background:#fff}
  .homemap-legend a:hover{border-color:#4E7F14;color:#0B2230}
  .homemap-legend i{width:16px;height:4px;border-radius:2px;flex:none}
  .homemap-legend b{font-family:Archivo,sans-serif;font-weight:800;letter-spacing:.01em}
  .homemap-legend span{font-family:'IBM Plex Mono',monospace;font-size:12px;color:#4A6675}

  /* ————— Formulaire bénévoles ————— */
  .bnv-form{display:grid;gap:22px}
  .bnv-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
  .bnv-field{display:grid;gap:7px}
  .bnv-field>span{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.1em;color:#A8BCC6;text-transform:uppercase}
  .bnv-field b{color:#8CC63F}
  .bnv-field i{font-style:normal;text-transform:none;letter-spacing:0;color:#6F8794}
  .bnv-form input[type=text],.bnv-form input[type=tel],.bnv-form input[type=email],
  .bnv-form select,.bnv-form textarea{
    width:100%;min-height:50px;padding:13px 14px;background:#0E2937;color:#F4F0E7;
    border:1px solid rgba(244,240,231,.24);border-radius:2px;
    font-family:'Instrument Sans',system-ui,sans-serif;font-size:16px}
  .bnv-form textarea{min-height:110px;resize:vertical;line-height:1.5}
  .bnv-form input::placeholder,.bnv-form textarea::placeholder{color:#6F8794}
  .bnv-form input:focus-visible,.bnv-form select:focus-visible,.bnv-form textarea:focus-visible{
    outline:3px solid #8CC63F;outline-offset:2px;border-color:#8CC63F}
  .bnv-form input:user-invalid{border-color:#E4572E}

  .bnv-fieldset{border:1px solid rgba(244,240,231,.18);border-radius:2px;padding:14px 16px 16px;margin:0}
  .bnv-fieldset legend{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.1em;color:#A8BCC6;text-transform:uppercase;padding:0 6px}
  .bnv-checks{display:flex;flex-wrap:wrap;gap:8px 20px}
  .bnv-checks label,.bnv-consent{display:flex;align-items:flex-start;gap:10px;cursor:pointer;min-height:44px;align-items:center}
  .bnv-checks input,.bnv-consent input{width:22px;height:22px;flex:none;accent-color:#8CC63F;cursor:pointer}
  .bnv-consent{align-items:flex-start;gap:12px;font-size:15px;color:#DCE7EC;line-height:1.5}
  .bnv-consent input{margin-top:2px}
  .bnv-consent b{color:#8CC63F}

  /* Champ leurre : hors écran plutôt que display:none, que certains robots détectent. */
  .bnv-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

  /* reCAPTCHA v3 : badge flottant masqué — Google l'autorise à condition de
     rappeler la mention sous le formulaire, ce que fait .bnv-captcha. */
  .grecaptcha-badge{visibility:hidden}

  .bnv-error{margin:0;padding:15px;background:rgba(228,87,46,.14);border:1px solid #E4572E;border-radius:2px;color:#FFD3C6;font-size:15px;line-height:1.55;display:grid;gap:13px;justify-items:start}
  .bnv-secours{display:inline-flex;align-items:center;min-height:48px;padding:0 22px;background:#F4F0E7;color:#0B2230;border-radius:2px;text-decoration:none;font-family:Archivo,sans-serif;font-weight:800;font-size:16px}
  .bnv-secours:hover{background:#fff;color:#0B2230}
  .bnv-submit{min-height:56px;padding:0 30px;background:#8CC63F;color:#0B2230;border:0;border-radius:2px;
    font-family:Archivo,sans-serif;font-weight:800;font-size:18px;cursor:pointer;justify-self:start}
  .bnv-submit:hover:not(:disabled){background:#A2DB53}
  .bnv-submit:disabled{opacity:.55;cursor:progress}
  .bnv-legal{margin:0;font-size:13px;color:#8FA6B2;line-height:1.55}

  @media (max-width:879px){
    .bnv-submit{width:100%;justify-self:stretch;text-align:center}
  }

  /* ————— Page contact ————— */
  .ctc-card{display:grid;gap:7px;align-content:start;background:#F4F0E7;padding:clamp(20px,2.6vw,26px);text-decoration:none;color:#0B2230;min-height:44px}
  .ctc-card:hover{background:#fff;color:#0B2230}
  .ctc-k{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em;color:#226685}
  .ctc-v{font-family:Archivo,sans-serif;font-weight:900;font-size:21px;line-height:1.15}
  .ctc-n{font-size:15px;color:#3C525D;line-height:1.5}

  .ctc-lien{display:grid;gap:5px;background:#fff;border:1px solid rgba(11,34,48,.16);border-radius:3px;padding:16px 18px;text-decoration:none;color:#0B2230;min-height:44px;align-content:center}
  .ctc-lien:hover{border-color:#4E7F14;background:#FBF9F4;color:#0B2230}
  .ctc-lien b{font-family:Archivo,sans-serif;font-weight:800;font-size:16px}
  .ctc-lien span{font-size:14px;color:#4A6675}

  .ctc-ok{background:rgba(140,198,63,.18);border:1px solid #8CC63F;border-radius:3px;padding:clamp(22px,3vw,30px);color:#0B2230}

  /* formulaires sur fond clair : on inverse ce qui doit l'etre.
     .form-light sert aux deux formulaires du site : contact et benevoles. */
  .form-light .bnv-field>span{color:#4A6675}
  .form-light .bnv-field i{color:#5A7280}
  /* meme specificite que la regle sombre au-dessus, sinon elle ne passe pas */
  .form-light input[type=text],.form-light input[type=tel],.form-light input[type=email],
  .form-light select,.form-light textarea{background:#fff;color:#0B2230;border-color:#CFC8B8}
  .form-light .bnv-legal{color:#4A6675}
  .form-light .bnv-legal a{color:#226685}
  .form-light .bnv-error{background:rgba(228,87,46,.12);color:#8A2D10}
  .form-light .bnv-secours{background:#0B2230;color:#F4F0E7}
  .form-light .bnv-secours:hover{background:#123245;color:#F4F0E7}

  /* ————— Tableaux plus larges que l'écran ————— */
  /* Ils défilent déjà horizontalement, mais rien ne le laissait deviner.
     Le dégradé est porté par .scroll-x, qui NE défile PAS : quand il vivait
     sur la zone défilante elle-même, il partait avec le tableau et venait
     barrer le milieu du contenu dès le premier glissement. */
  .scroll-x{position:relative}
  .scroll-x-vp{overflow-x:auto;-webkit-overflow-scrolling:touch}

  /* ————— Sélecteur d'épreuve (pages parcours) ————— */
  /* Les 8 libellés font ~1 500 px de large : la rangée débordait même sur
     grand écran, sans barre de défilement (scrollbar-width:none) — trois
     épreuves restaient donc introuvables. Au-dessus de 880 px, elle passe
     à la ligne ; en dessous elle défile, avec le dégradé et l'indication. */
  .chip-row{display:flex;gap:8px;flex-wrap:wrap}
  @media (max-width:879px){
    .chip-row{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:6px;scrollbar-width:none}
    .chip-row::-webkit-scrollbar{display:none}
  }
  .scroll-x-hint{display:none;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.07em;color:#4A6675;margin:0 0 9px}
  @media (max-width:879px){
    .scroll-x-hint{display:block}
    .scroll-x::after{content:"";position:absolute;top:1px;right:1px;bottom:1px;width:34px;border-radius:0 3px 3px 0;pointer-events:none;background:linear-gradient(to right,rgba(255,255,255,0),rgba(255,255,255,.92))}
    .scroll-x.on-dark::after{background:linear-gradient(to right,rgba(11,34,48,0),rgba(11,34,48,.92))}
  }
  .scroll-x-hint.on-dark{color:#A8BCC6}

  /* ————— Cibles tactiles ————— */
  @media (max-width:879px){
    .hdr-brand{min-height:44px}
    /* les liens du pied de page tombaient à 19 px de haut */
    footer li a{display:flex;align-items:center;min-height:44px}
    footer .social a,footer .legal a{min-height:44px;display:inline-flex;align-items:center}
    /* première colonne des tableaux : le lien remplit la cellule au lieu
       d'occuper la seule hauteur du texte */
    .scroll-x th[scope="row"]:has(> a){padding:0}
    .scroll-x th[scope="row"] > a{display:flex;align-items:center;min-height:48px;padding:0 16px}
    /* Leaflet dessine ses boutons à 30 px : trop petit pour le pouce */
    .leaflet-bar a{width:44px;height:44px;line-height:44px;font-size:20px}
  }

/* ————— Etats :hover et :focus (anciens attributs style-hover / style-focus) ————— */
.scp0:focus{left:8px !important;top:8px !important}
.scp1:hover{background:#123245 !important}
.scp2:hover{background:rgba(244,240,231,.1) !important}
.scp3:hover{color:#fff !important}
.scp4:hover{opacity:1 !important}
.scp5:hover{color:#DCE7EC !important}
.scp6:hover{background:#A2DB53 !important}
.scp7:hover{background:rgba(244,240,231,.1) !important;border-color:#F4F0E7 !important}
.scp8:hover{border-color:#8CC63F !important}
.scp9:hover{background:#3DBCEE !important}
.scpa:hover{background:#fff !important}
.scpb:hover{background:rgba(11,34,48,.08) !important}
.scpc:hover{background:rgba(11,34,48,.1) !important}
.scpd:hover{background:rgba(244,240,231,.16) !important}
.scpe:hover{background:rgba(206,154,133,.26) !important}
.scpf:hover{background:#FBF9F4 !important}
.scpg:hover{background:#4EE383 !important}
.scph:hover{background:#4FBEE8 !important}
.scpi:hover{background:rgba(37,211,102,.14) !important;border-color:#4EE383 !important;color:#4EE383 !important}

/* ————— Blocs reveles par site.js ————— */
[data-when][hidden]{display:none}

/* ————— Etats :hover pour les blocs passes sur fond clair ————— */
.scpj:hover{background:rgba(11,34,48,.07) !important;border-color:#0B2230 !important}
.scpl:hover{color:#0B2230 !important}

/* ————— Formulaires sur fond clair : ce que .form-light ne couvrait pas ————— */
.form-light .bnv-fieldset{border-color:rgba(11,34,48,.2)}
.form-light .bnv-fieldset legend{color:#4A6675}
.form-light .bnv-field b,.form-light .bnv-consent b{color:#4E7F14}
.form-light .bnv-consent{color:#3C525D}
.form-light input::placeholder,.form-light textarea::placeholder{color:#5A7280}

/* ————— Replis : rendre l'ouverture evidente ————— */
summary:hover{background:rgba(11,34,48,.05)}
details[open]>summary{border-bottom:1px solid #EDE8DB}
.deplier{justify-self:start;margin:0 0 4px;min-height:44px;padding:0 16px;background:transparent;
  border:1px solid rgba(11,34,48,.3);border-radius:2px;color:#0B2230;
  font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.deplier:hover{background:rgba(11,34,48,.07);border-color:#0B2230}
.scpn:hover{background:#FBF9F4 !important;box-shadow:0 2px 14px rgba(11,34,48,.13) !important}