/* Partie graphisme : seul fichier modifié par la conversation « graphisme ». */
@font-face { font-family: "Quicksand"; font-weight: 500; font-display: swap; src: url("fonts/quicksand-500.woff2") format("woff2"); }
@font-face { font-family: "Quicksand"; font-weight: 700; font-display: swap; src: url("fonts/quicksand-700.woff2") format("woff2"); }

:root {
  --navy: #04222C; --teal: #00BBCC; --teal-d: #00838F; --blue: #6EC1E4; --orange: #FF9D03; --text: #383838;
  --vert: #2FA84F; --bleu: #1E88E5; --rouge: #E53935; --noir: #151515;
  --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px);
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { font-family: "Quicksand", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--text); background: var(--navy); overflow: hidden; }

#map { position: absolute; inset: 0; }

/* Barre du haut */
#top { position: absolute; z-index: 5; top: 0; left: 0; right: 0; padding: calc(10px + var(--safe-t)) 12px 10px;
       background: linear-gradient(180deg, rgba(4,34,44,.96), rgba(4,34,44,.78) 70%, rgba(4,34,44,0)); color: #fff; pointer-events: none; }
#top > * { pointer-events: auto; }
#top h1 { margin: 0 0 8px; font-size: 18px; font-weight: 700; letter-spacing: .2px; display: flex; align-items: center; gap: 8px; }
#top h1 i { width: 10px; height: 10px; border-radius: 50%; background: var(--orange); display: inline-block; }
#chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
#chips::-webkit-scrollbar { display: none; }
.chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; font: 700 13px "Quicksand", sans-serif; color: #fff;
        background: rgba(255,255,255,.12); border: 1.5px solid rgba(255,255,255,.25); border-radius: 999px; padding: 7px 13px; cursor: pointer; }
.chip .dot { width: 11px; height: 11px; border-radius: 50%; border: 2px solid #fff; }
.chip[aria-pressed="false"] { opacity: .45; }
.chip[aria-pressed="true"] { background: rgba(0,187,204,.28); border-color: var(--teal); }

/* Sélecteur de fond */
#basemaps { position: absolute; z-index: 5; right: 10px; top: calc(96px + var(--safe-t)); display: flex; flex-direction: column; gap: 6px; }
#basemaps button { font: 700 12px "Quicksand", sans-serif; color: var(--navy); background: #fff; border: 2px solid transparent; border-radius: 10px;
                   padding: 7px 10px; box-shadow: 0 2px 8px rgba(0,0,0,.3); cursor: pointer; }
#basemaps button[aria-pressed="true"] { border-color: var(--orange); }

/* Contrôles MapLibre : on les remonte au-dessus de la fiche */
.maplibregl-ctrl-bottom-right { bottom: calc(6px + var(--safe-b)); }
.maplibregl-ctrl-group { border-radius: 12px; overflow: hidden; }
.maplibregl-ctrl-group button { width: 42px; height: 42px; }

/* Marqueurs */
.pin { width: 34px; height: 44px; cursor: pointer; filter: drop-shadow(0 2px 3px rgba(0,0,0,.45)); transition: transform .12s; transform-origin: 50% 100%; }
.pin:hover, .pin.sel { transform: scale(1.18); }
.pin.small { width: 26px; height: 34px; }
.pin.hidden { display: none; }
.pk { width: 26px; height: 26px; border-radius: 7px; background: #1E5BD8; color: #fff; font: 700 16px/22px "Quicksand", sans-serif;
      text-align: center; border: 2px solid #fff; box-shadow: 0 2px 5px rgba(0,0,0,.45); }
#sheet .actions { flex-wrap: wrap; }
#sheet .actions .btn { flex: 1 1 40%; }

/* Fiche (encart au clic) */
#sheet { position: absolute; z-index: 6; left: 0; right: 0; bottom: 0; background: #fff; border-radius: 18px 18px 0 0;
         padding: 16px 18px calc(18px + var(--safe-b)); box-shadow: 0 -6px 24px rgba(0,0,0,.35);
         transform: translateY(105%); transition: transform .22s ease; max-width: 520px; margin: 0 auto; }
#sheet-body { max-height: calc(58vh - 40px); overflow-y: auto; overscroll-behavior: contain; }
#sheet.open { transform: translateY(0); }
#sheet .grab { width: 42px; height: 4px; border-radius: 2px; background: #d5dadd; margin: -6px auto 10px; }
#sheet h2 { margin: 0 0 2px; font-size: 20px; font-weight: 700; color: var(--navy); padding-right: 30px; }
#sheet .sub { color: #6b7780; font-weight: 500; font-size: 14px; margin-bottom: 10px; }
#sheet .badge { display: inline-block; color: #fff; font-weight: 700; font-size: 12px; padding: 3px 10px; border-radius: 999px; margin-right: 6px; }
#sheet .meta { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 14px; margin: 10px 0 12px; }
#sheet .meta b { color: var(--teal-d); }
#sheet .warn { background: #FFF4DC; border-left: 4px solid var(--orange); padding: 8px 10px; border-radius: 6px; font-size: 13px; margin-bottom: 12px; }
#sheet .warn.red { background: #FDE8E8; border-left-color: var(--rouge); }
#sheet .muted { color: #8a949b; font-style: italic; }
#sheet .src { font-size: 12px; color: #7a858c; margin-top: 10px; line-height: 1.35; }
#sheet .btn.wide { display: block; width: 100%; margin-top: 8px; }
#sheet .actions { display: flex; gap: 8px; }
#sheet .btn { flex: 1; text-align: center; text-decoration: none; font: 700 14px "Quicksand", sans-serif; padding: 11px 8px; border-radius: 12px; border: 0; cursor: pointer; }
#sheet .btn.primary { background: var(--orange); color: var(--navy); }
#sheet .btn.ghost { background: #E7F7F9; color: var(--teal-d); }
#close { position: absolute; top: 10px; right: 12px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: #eef2f3; font-size: 18px; cursor: pointer; color: var(--navy); }

#toast { position: absolute; z-index: 9; left: 50%; top: calc(150px + var(--safe-t)); transform: translateX(-50%); background: var(--navy); color: #fff; padding: 9px 14px;
         border-radius: 10px; font-size: 13px; font-weight: 700; opacity: 0; pointer-events: none; transition: opacity .2s; max-width: 90%; text-align: center; }
#toast.show { opacity: 1; }

/* >>> GRAPHISME MODE TERRAIN (v7) — généré par sources-graphisme/terrain/gen_terrain_css.py : pictos des points clés, connexion, suivi, alerte.
   Surcharge terrain.css (chargé avant). Aucune classe nouvelle : tout s'appuie sur les classes documentées par le soft. */
:root {
  --ico-rappel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5v2'/%3E%3Cellipse cx='12' cy='8.2' rx='3' ry='3.7'/%3E%3Cpath d='M12 11.9V20.5'/%3E%3Cpath d='M8 16.6l4 4 4-4'/%3E%3C/svg%3E");
  --ico-vasque: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5c-2.3 2.9-3.9 4.9-3.9 6.9a3.9 3.9 0 0 0 7.8 0c0-2-1.6-4-3.9-6.9z'/%3E%3Cpath d='M3 15.2q2.25-2.5 4.5 0t4.5 0t4.5 0t4.5 0'/%3E%3Cpath d='M3 20q2.25-2.5 4.5 0t4.5 0t4.5 0t4.5 0'/%3E%3C/svg%3E");
  --ico-saut: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6.5' cy='5.2' r='2'/%3E%3Cpath d='M9.4 8.2c3.2 1 5.4 3.6 5.4 7'/%3E%3Cpath d='M11.7 13.3l3.1 2.9 2.2-3.2'/%3E%3Cpath d='M3 20q2.25-2.5 4.5 0t4.5 0t4.5 0t4.5 0'/%3E%3C/svg%3E");
  --ico-toboggan: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.5c6.5 0 7.5 8 11.5 9.5 2.4.9 4.5 1 6.5 1'/%3E%3Cpath d='M3 9.5c4 0 5 7 8.2 9 2.4 1.5 5.8 1.5 9.8 1.5'/%3E%3Ccircle cx='8.6' cy='6.2' r='1.5' fill='black' stroke='none'/%3E%3C/svg%3E");
  --ico-desescalade: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 4.5l6 5.5 6-5.5'/%3E%3Cpath d='M6 11.5l6 5.5 6-5.5'/%3E%3Cpath d='M4 21h16'/%3E%3C/svg%3E");
  --ico-autre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 21.5V2.8'/%3E%3Cpath d='M6 4h11.5l-3.200 4.300 3.200 4.300H6'/%3E%3C/svg%3E");
  --ico-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c1-5 4.5-7 8-7s7 2 8 7'/%3E%3C/svg%3E");
  --ico-alerte: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5L22 20.5H2z'/%3E%3Cpath d='M12 10v5'/%3E%3Cpath d='M12 17.7v.1'/%3E%3C/svg%3E");
  --ico-suivre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 20c0-6 5-4 7-8s-2-7 4-8'/%3E%3Ccircle cx='5' cy='20' r='1.6' fill='black'/%3E%3Ccircle cx='17' cy='4' r='1.6' fill='black'/%3E%3C/svg%3E");
}

/* ---------- Pictos des points clés (carte, liste de la fiche, sélecteur de type, mode suivi) ---------- */
.wp, .wp-ico { font-size: 0; line-height: 0; color: #fff; position: relative; }
.wp::before, .wp-ico::before {
  content: ""; position: absolute; inset: 0; margin: auto; width: 68%; height: 68%; background: currentColor;
  -webkit-mask: var(--ico, var(--ico-autre)) center / contain no-repeat; mask: var(--ico, var(--ico-autre)) center / contain no-repeat;
}
.wp.wp-rappel, .wp-ico.wp-rappel, .wp-item.wp-rappel .wp-ico, .wp-type.wp-rappel .wp-ico { --ico: var(--ico-rappel); }
.wp.wp-vasque, .wp-ico.wp-vasque, .wp-item.wp-vasque .wp-ico, .wp-type.wp-vasque .wp-ico { --ico: var(--ico-vasque); }
.wp.wp-saut, .wp-ico.wp-saut, .wp-item.wp-saut .wp-ico, .wp-type.wp-saut .wp-ico { --ico: var(--ico-saut); }
.wp.wp-toboggan, .wp-ico.wp-toboggan, .wp-item.wp-toboggan .wp-ico, .wp-type.wp-toboggan .wp-ico { --ico: var(--ico-toboggan); }
.wp.wp-desescalade, .wp-ico.wp-desescalade, .wp-item.wp-desescalade .wp-ico, .wp-type.wp-desescalade .wp-ico { --ico: var(--ico-desescalade); }
.wp.wp-autre, .wp-ico.wp-autre, .wp-item.wp-autre .wp-ico, .wp-type.wp-autre .wp-ico { --ico: var(--ico-autre); }

/* marqueur sur la carte : pastille marine, anneau orange (= point clé), distincte des pins de niveau */
.wp { width: 34px; height: 34px; border-width: 3px; box-shadow: 0 0 0 2px rgba(4,34,44,.28), 0 3px 8px rgba(0,0,0,.5); transition: transform .12s; }
.wp:hover { transform: scale(1.12); }
.wp.edit { color: var(--navy); }
.wp.pending { border-style: dashed; }

/* liste « Points clés » de la fiche : ligne de parcours */
.wps h3 { font-size: 16px; display: flex; align-items: center; gap: 8px; }
.wps h3::before { content: ""; width: 4px; height: 16px; border-radius: 2px; background: var(--orange); }
.wp-item { position: relative; padding: 9px 0; border-bottom: 0; align-items: center; }
.wp-item::before { content: ""; position: absolute; left: 15px; top: 0; bottom: 0; width: 2px; background: rgba(0,187,204,.38); }
.wp-item:first-child::before { top: 50%; }
.wp-item:last-child::before { bottom: 50%; }
.wp-item .wp-ico { width: 32px; height: 32px; border-width: 2.5px; z-index: 1; flex: 0 0 32px; }
.wp-txt b { font-weight: 700; color: var(--navy); }
.wp-edit { background: #E7F7F9; color: var(--teal-d); }
.wp-item.flash { background: linear-gradient(90deg, #FFF4DC, transparent); }

/* sélecteur de type (création / modification d'un point clé) */
.wp-types { gap: 10px; }
.wp-type { padding: 12px 4px 10px; gap: 8px; border-radius: 14px; background: #f1f6f7; }
.wp-type .wp-ico { width: 44px; height: 44px; border-width: 3px; }
.wp-type[aria-checked="true"] { border-color: var(--orange); background: #FFF4DC; box-shadow: 0 0 0 3px rgba(255,157,3,.25); }
.wp-type[aria-checked="true"] .wp-ico { background: var(--orange); color: var(--navy); border-color: #fff; }

/* ---------- Connexion guide ---------- */
.auth-btn { font-size: 13px; padding: 8px 12px 8px 10px; gap: 7px; }
.auth-btn::before { content: ""; width: 16px; height: 16px; background: var(--teal-d);
  -webkit-mask: var(--ico-user) center / contain no-repeat; mask: var(--ico-user) center / contain no-repeat; }
.auth-btn.on::before { background: var(--teal); }
.auth-btn.expired::before { background: var(--rouge); }
.auth-menu { border-radius: 14px; border-top: 4px solid var(--teal); }
.auth-who b { font-size: 16px; }

.modal { background: rgba(4,34,44,.78); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.modal-box { border-radius: 18px; border-top: 6px solid var(--teal); box-shadow: 0 12px 40px rgba(0,0,0,.45); }
.sheetlike .modal-box { border-radius: 20px 20px 0 0; }
.modal-box h2 { font-size: 21px; letter-spacing: .2px; }
.modal-box input:not([type=checkbox]):focus, .modal-box textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(0,187,204,.25); }
.modal-box input[type=checkbox] { accent-color: var(--teal-d); width: 18px; height: 18px; }
.tbtn { border-radius: 13px; min-height: 46px; }
.tbtn.primary { box-shadow: 0 3px 10px rgba(255,157,3,.35); }
.pick-bar { border-radius: 16px; border: 2px solid var(--orange); box-shadow: 0 6px 20px rgba(0,0,0,.45); }

/* ---------- Mode suivi ---------- */
.follow-top { background: linear-gradient(180deg, rgba(4,34,44,.97), rgba(4,34,44,.9)); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border-radius: 0 0 22px 22px; box-shadow: 0 6px 22px rgba(0,0,0,.4); gap: 8px; }
.follow-name { font-size: 18px; font-weight: 700; line-height: 1.2; }
.follow-phase { background: var(--orange); color: var(--navy); border-radius: 999px; padding: 3px 11px; font-size: 12px; text-transform: uppercase; letter-spacing: .6px; white-space: nowrap; }
.follow-bar { height: 10px; border-radius: 6px; background: rgba(255,255,255,.18); }
.follow-bar-fill { border-radius: 6px; background: linear-gradient(90deg, var(--teal), var(--blue)); }
.follow-stats { font-size: 15px; font-variant-numeric: tabular-nums; }
.follow-next { background: rgba(255,255,255,.08); border-radius: 14px; padding: 8px 10px; min-height: 52px; }
.follow-next .wp-ico { width: 38px; height: 38px; flex: 0 0 38px; border-width: 3px; }
.follow-next b { font-size: 15px; }
.follow-next small { font-size: 13px; }
.follow-warn { border-radius: 12px; }

.follow-alert { width: 112px; height: 112px; gap: 2px; font-size: 17px; letter-spacing: .8px;
  background: radial-gradient(circle at 35% 30%, #F4544F, #C62828 70%); border-width: 5px; animation: alertpulse 2.6s ease-in-out infinite; }
.follow-alert::before { content: ""; width: 28px; height: 28px; background: #fff;
  -webkit-mask: var(--ico-alerte) center / contain no-repeat; mask: var(--ico-alerte) center / contain no-repeat; }
.follow-alert.pressing { animation: none; }
.follow-alert-ring { inset: -9px; -webkit-mask: radial-gradient(circle, transparent 58px, #000 59px); mask: radial-gradient(circle, transparent 58px, #000 59px); }
@keyframes alertpulse { 0%, 100% { box-shadow: 0 4px 14px rgba(0,0,0,.5), 0 0 0 0 rgba(229,57,53,.5); } 50% { box-shadow: 0 4px 14px rgba(0,0,0,.5), 0 0 0 12px rgba(229,57,53,0); } }
@media (prefers-reduced-motion: reduce) { .follow-alert { animation: none; } }
.follow-stop, .follow-recenter { border-radius: 14px; min-height: 48px; padding: 12px 16px; }
.follow-stop { background: var(--navy); color: #fff; border: 2px solid rgba(255,255,255,.7); }
.follow-recenter { color: var(--navy); }

/* Toast en mode suivi : posé en bas, au-dessus du bouton d'alerte, pour ne jamais passer sous le bandeau du haut (dont la hauteur varie) */
body.following #toast { top: auto; bottom: calc(150px + var(--safe-b, 0px)); max-width: calc(100% - 28px); }

/* ---------- Alerte ---------- */
.alert-modal .modal-box { border-top-width: 10px; }
.al-coords { background: #FDE8E8; border: 1.5px solid #f3b9b6; border-radius: 14px; padding: 12px 14px; }
.al-coords b { font-size: 22px; letter-spacing: .3px; font-variant-numeric: tabular-nums; }
.al-site { color: var(--navy); }
.tbtn.danger { box-shadow: 0 3px 10px rgba(229,57,53,.35); }
/* <<< GRAPHISME MODE TERRAIN (v7) */