/* Hermaion — thème clair sable / kaki / marron */
@font-face { font-family: 'Fraunces'; font-weight: 600; font-display: swap; src: url(/vendor/fonts/fraunces/fraunces-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Fraunces'; font-weight: 500; font-style: italic; font-display: swap; src: url(/vendor/fonts/fraunces/fraunces-latin-500-italic.woff2) format('woff2'); }
@font-face { font-family: 'Work Sans'; font-weight: 400; font-display: swap; src: url(/vendor/fonts/work-sans/work-sans-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Work Sans'; font-weight: 500; font-display: swap; src: url(/vendor/fonts/work-sans/work-sans-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'Work Sans'; font-weight: 600; font-display: swap; src: url(/vendor/fonts/work-sans/work-sans-latin-600-normal.woff2) format('woff2'); }

:root {
  --sable: #F4EDE0; --sable-2: #EAE0CC; --sable-3: #DED1B7; --carte: #FFFCF6;
  --kaki: #6E7449; --kaki-f: #4F5434; --kaki-c: #DFE0C7; --kaki-cc: #EEEFDF;
  --marron: #6A4A30; --marron-f: #3B2A1B; --terre: #B4683A; --terre-c: #F5E0D0;
  --rouge: #A8432A; --ligne: #DCCFB6; --texte: #3B2A1B; --doux: #7D6B57;
  --ombre: 0 1px 2px rgba(59,42,27,.06), 0 6px 18px rgba(59,42,27,.07);
  --r: 16px; --nav: 72px;
  --titre: 'Fraunces', Georgia, serif; --corps: 'Work Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--sable); color: var(--texte); font: 15px/1.5 var(--corps); }
body { overscroll-behavior-y: none; }
h1, h2, h3 { font-family: var(--titre); font-weight: 600; color: var(--marron-f); margin: 0 0 .4em; line-height: 1.2; }
h1 { font-size: 1.6rem; } h2 { font-size: 1.2rem; } h3 { font-size: 1rem; }
a { color: var(--kaki-f); }
button, input, select, textarea { font: inherit; color: inherit; }
.muted { color: var(--doux); } .small { font-size: .85rem; } .center { text-align: center; }
.hidden { display: none !important; }

/* ---------- structure ---------- */
#app { min-height: 100%; padding-bottom: calc(var(--nav) + env(safe-area-inset-bottom) + 12px); }
.page { max-width: 760px; margin: 0 auto; padding: 18px 16px 8px; animation: monte .25s ease; }
@keyframes monte { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.entete { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.entete .sous { font-size: .85rem; color: var(--doux); margin-top: -4px; }
.logo { font-family: var(--titre); font-weight: 600; font-size: 1.35rem; color: var(--marron-f); display: inline-flex; align-items: center; gap: 8px; }
.logo i { color: var(--terre); font-style: italic; font-weight: 500; }

/* ---------- navigation basse ---------- */
.nav { position: fixed; z-index: 900; left: 0; right: 0; bottom: 0; height: calc(var(--nav) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom); background: rgba(255,252,246,.96); backdrop-filter: blur(10px);
  border-top: 1px solid var(--ligne); display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; }
.nav a { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: .7rem; font-weight: 500; color: var(--doux); text-decoration: none; padding: 6px 0; }
.nav a svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav a.actif { color: var(--kaki-f); }
.nav a.actif svg { stroke-width: 2.2; }
.nav .plus { justify-self: center; width: 62px; height: 62px; margin-top: -30px; border-radius: 50%; background: var(--kaki);
  color: #fff; display: grid; place-items: center; box-shadow: 0 6px 16px rgba(79,84,52,.4), 0 0 0 5px var(--sable); border: 0; cursor: pointer; transition: transform .15s; }
.nav .plus:active { transform: scale(.94); }
.nav .plus svg { width: 30px; height: 30px; stroke: #fff; stroke-width: 2.4; }

/* ---------- éléments ---------- */
.carte { background: var(--carte); border: 1px solid var(--ligne); border-radius: var(--r); padding: 16px; box-shadow: var(--ombre); margin-bottom: 14px; }
.carte h2 { margin-bottom: 10px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: 999px;
  padding: 11px 18px; font-weight: 600; cursor: pointer; background: var(--kaki); color: #fff; text-decoration: none; transition: filter .15s, transform .1s; }
.btn:active { transform: scale(.98); } .btn:hover { filter: brightness(1.05); }
.btn.sec { background: var(--carte); color: var(--kaki-f); border-color: var(--ligne); }
.btn.terre { background: var(--terre); }
.btn.danger { background: transparent; color: var(--rouge); border-color: #E6C3B8; }
.btn.plein { width: 100%; }
.btn.petit { padding: 7px 13px; font-size: .85rem; white-space: nowrap; }
.btn[disabled] { opacity: .5; pointer-events: none; }
.icone-btn { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--ligne); background: var(--carte); display: grid; place-items: center; cursor: pointer; box-shadow: var(--ombre); }
.icone-btn svg { width: 20px; height: 20px; stroke: var(--marron-f); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rangee { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.rangee > .btn { flex: 1; }

label.champ { display: block; margin-bottom: 12px; }
label.champ > span { display: block; font-size: .8rem; font-weight: 600; color: var(--marron); margin-bottom: 5px; }
input:not([type]), input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=datetime-local], input[type=search], select, textarea {
  width: 100%; padding: 11px 13px; border: 1px solid var(--ligne); border-radius: 12px; background: #fff; outline: none; transition: border-color .15s, box-shadow .15s; }
input:focus, select:focus, textarea:focus { border-color: var(--kaki); box-shadow: 0 0 0 3px var(--kaki-c); }
textarea { min-height: 84px; resize: vertical; }
.deux { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.interrupteur { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; }
.interrupteur b { display: block; font-weight: 600; font-size: .92rem; }
.interrupteur small { color: var(--doux); }
.bascule { position: relative; width: 48px; height: 28px; flex: none; }
.bascule input { opacity: 0; width: 0; height: 0; }
.bascule i { position: absolute; inset: 0; border-radius: 99px; background: var(--sable-3); transition: .2s; cursor: pointer; }
.bascule i::after { content: ''; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: .2s; }
.bascule input:checked + i { background: var(--kaki); }
.bascule input:checked + i::after { transform: translateX(20px); }

.puces { display: flex; flex-wrap: wrap; gap: 8px; }
.puce { border: 1px solid var(--ligne); background: #fff; border-radius: 999px; padding: 7px 13px; font-size: .86rem; cursor: pointer; user-select: none; }
.puce.on { background: var(--kaki); border-color: var(--kaki); color: #fff; }
.badge { display: inline-block; padding: 3px 9px; border-radius: 99px; font-size: .72rem; font-weight: 600; background: var(--kaki-c); color: var(--kaki-f); }
.badge.terre { background: var(--terre-c); color: #8A4520; }
.badge.gris { background: var(--sable-2); color: var(--marron); }
.badge.rouge { background: #F2D5CC; color: var(--rouge); }

.segment { display: grid; grid-template-columns: 1fr 1fr; background: var(--sable-2); border-radius: 999px; padding: 4px; margin-bottom: 12px; }
.segment button { border: 0; background: transparent; border-radius: 999px; padding: 9px 6px; font-weight: 600; color: var(--marron); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; }
.segment button.on { background: var(--carte); color: var(--kaki-f); box-shadow: var(--ombre); }
.segment svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2; }

.vide { text-align: center; padding: 34px 18px; color: var(--doux); }
.vide svg { width: 54px; height: 54px; stroke: var(--sable-3); fill: none; stroke-width: 1.5; margin-bottom: 8px; }
.vide b { display: block; color: var(--marron-f); font-family: var(--titre); font-size: 1.1rem; margin-bottom: 4px; }

/* ---------- zones ---------- */
.zones { display: grid; gap: 12px; }
.zone-carte { display: grid; grid-template-columns: 96px 1fr auto; gap: 12px; align-items: center; background: var(--carte); border: 1px solid var(--ligne);
  border-radius: var(--r); padding: 10px; box-shadow: var(--ombre); cursor: pointer; text-decoration: none; color: inherit; transition: transform .12s, border-color .12s; }
.zone-carte:hover { transform: translateY(-2px); border-color: var(--kaki); }
.vignette { width: 76px; height: 76px; display: grid; place-items: center; } /* la forme de la parcelle seule, sans encadré */
.zone-carte h3 { margin: 0 0 2px; font-size: 1.02rem; }
.zone-carte .meta { font-size: .8rem; color: var(--doux); }
.zone-carte .droite { text-align: right; font-size: .78rem; color: var(--doux); display: grid; gap: 6px; justify-items: end; }
.resume { display: flex; gap: 18px; margin: 4px 0 14px; }
.resume div b { display: block; font-family: var(--titre); font-size: 1.35rem; color: var(--kaki-f); line-height: 1.1; }
.resume div span { font-size: .75rem; color: var(--doux); }

/* ---------- cartes (Leaflet) ---------- */
.carto { position: relative; border-radius: var(--r); overflow: hidden; border: 1px solid var(--ligne); box-shadow: var(--ombre); }
.carto .leaflet-container { width: 100%; height: 100%; background: var(--sable-2); font-family: var(--corps); }
.plein-ecran { position: fixed; inset: 0 0 calc(var(--nav) + env(safe-area-inset-bottom)) 0; z-index: 500; }
.plein-ecran .carto { border-radius: 0; border: 0; height: 100%; }
.flottant { position: absolute; z-index: 600; }
.barre-recherche { top: 12px; left: 12px; right: 12px; display: flex; gap: 8px; }
.barre-recherche .boite { flex: 1; position: relative; }
.barre-recherche input { box-shadow: var(--ombre); border-radius: 999px; padding-left: 40px; height: 46px; }
.barre-recherche .loupe { position: absolute; left: 14px; top: 13px; width: 20px; height: 20px; stroke: var(--doux); fill: none; stroke-width: 2; }
.resultats { position: absolute; top: 52px; left: 0; right: 0; background: var(--carte); border: 1px solid var(--ligne); border-radius: 14px; box-shadow: var(--ombre); overflow: hidden; }
.resultats button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 11px 14px; border-bottom: 1px solid var(--sable-2); cursor: pointer; }
.resultats button:hover { background: var(--kaki-cc); }
.resultats small { color: var(--doux); }
.outils-carte { right: 12px; top: 70px; display: grid; gap: 8px; }
.panneau-bas { left: 12px; right: 12px; bottom: 12px; background: var(--carte); border: 1px solid var(--ligne); border-radius: 18px; padding: 12px 14px; box-shadow: 0 8px 26px rgba(59,42,27,.18); }
.panneau-bas .stat { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.panneau-bas .stat b { font-family: var(--titre); font-size: 1.25rem; color: var(--kaki-f); }
.aide-trace { left: 50%; transform: translateX(-50%); top: 68px; width: max-content; max-width: calc(100% - 120px); text-align: center; background: rgba(59,42,27,.82); color: #fff; padding: 7px 14px; border-radius: 16px; font-size: .8rem; pointer-events: none; }
.plein-ecran .leaflet-bottom { bottom: 150px; }
.panneau-bas .rangee .btn.sec { flex: 1; }
.panneau-bas #valider { flex-basis: 100%; }
.sommet { width: 18px !important; height: 18px !important; margin: -9px 0 0 -9px !important; border-radius: 50%; background: #fff; border: 3px solid var(--terre); box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.sommet.premier { background: var(--terre); }
.moi { width: 16px !important; height: 16px !important; margin: -8px 0 0 -8px !important; border-radius: 50%; background: #2F7DD1; border: 3px solid #fff; box-shadow: 0 0 0 6px rgba(47,125,209,.22); }

.zone-carto { height: 52vh; min-height: 300px; }
.calques { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 12px 2px 6px; scrollbar-width: none; }
.calques::-webkit-scrollbar { display: none; }
.calque { flex: 0 0 132px; scroll-snap-align: start; background: var(--carte); border: 1.5px solid var(--ligne); border-radius: 14px; padding: 10px; cursor: pointer; position: relative; transition: border-color .15s, transform .12s; }
.calque:active { transform: scale(.97); }
.calque.on { border-color: var(--kaki); box-shadow: 0 0 0 3px var(--kaki-c); }
.calque .pastille { width: 100%; height: 46px; border-radius: 9px; margin-bottom: 7px; }
.calque b { display: block; font-size: .82rem; line-height: 1.2; }
.calque small { color: var(--doux); font-size: .72rem; }
.calque.ko { opacity: .45; }
.calque.ko::after { content: 'indisponible ici'; position: absolute; top: 14px; left: 14px; font-size: .68rem; background: #fff; padding: 1px 6px; border-radius: 6px; color: var(--rouge); font-weight: 600; }
.opacite { display: flex; align-items: center; gap: 10px; font-size: .8rem; color: var(--doux); margin: 4px 2px 12px; }
.opacite input { flex: 1; accent-color: var(--kaki); }
.fonds { left: 10px; top: 10px; display: flex; background: var(--carte); border-radius: 99px; padding: 3px; box-shadow: var(--ombre); }
.fonds button { border: 0; background: none; padding: 6px 12px; border-radius: 99px; font-size: .8rem; font-weight: 600; color: var(--marron); cursor: pointer; }
.fonds button.on { background: var(--kaki); color: #fff; }
.fleches { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }
.fleches h2 { margin: 0; }

/* ---------- trouvailles ---------- */
.grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.trouvaille { background: var(--carte); border: 1px solid var(--ligne); border-radius: 14px; overflow: hidden; cursor: pointer; box-shadow: var(--ombre); transition: transform .12s; }
.trouvaille:hover { transform: translateY(-2px); }
.trouvaille .photo { aspect-ratio: 1; background: var(--sable-2) center/cover; display: grid; place-items: center; }
.trouvaille .photo svg { width: 40px; height: 40px; stroke: var(--sable-3); fill: none; stroke-width: 1.5; }
.trouvaille div.txt { padding: 9px 10px; }
.trouvaille b { display: block; font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trouvaille small { color: var(--doux); font-size: .75rem; }
.info-bandeau { display: flex; gap: 10px; align-items: flex-start; background: var(--kaki-cc); border-radius: 12px; padding: 10px 12px; font-size: .84rem; color: var(--kaki-f); margin-bottom: 12px; }
.info-bandeau.terre { background: var(--terre-c); color: #7A3D1B; }
.info-bandeau svg { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; margin-top: 1px; }

/* ---------- sorties ---------- */
.sortie { display: grid; grid-template-columns: 64px 1fr; gap: 14px; }
.calendrier { background: var(--kaki); color: #fff; border-radius: 12px; text-align: center; padding: 8px 0; height: fit-content; }
.calendrier b { display: block; font-family: var(--titre); font-size: 1.5rem; line-height: 1; }
.calendrier span { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; }
.sortie h3 { margin: 0 0 4px; font-size: 1.05rem; }
.sortie .meta { font-size: .82rem; color: var(--doux); display: flex; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 8px; }
.avatars { display: flex; margin: 6px 0 10px; }
.avatars span { width: 28px; height: 28px; border-radius: 50%; background: var(--sable-3); border: 2px solid var(--carte); margin-left: -6px; display: grid; place-items: center; font-size: .72rem; font-weight: 600; color: var(--marron-f); }
.avatars span:first-child { margin-left: 0; }

/* ---------- profil ---------- */
.profil-tete { display: flex; gap: 16px; align-items: center; margin-bottom: 8px; }
.avatar { width: 84px; height: 84px; border-radius: 50%; background: var(--kaki-c) center/cover; display: grid; place-items: center; font-family: var(--titre); font-size: 2rem; color: var(--kaki-f); flex: none; position: relative; border: 3px solid var(--carte); box-shadow: var(--ombre); cursor: pointer; overflow: hidden; }
.avatar .edit { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(59,42,27,.6); color: #fff; font: 600 .65rem var(--corps); text-align: center; padding: 3px 0; }
.detecteur-choix { display: grid; grid-template-columns: 96px 1fr auto; gap: 12px; align-items: center; border: 1px solid var(--ligne); border-radius: 14px; padding: 10px; background: #fff; cursor: pointer; width: 100%; text-align: left; }
.detecteur-choix .illus, .det-ligne .illus { width: 96px; height: 64px; border-radius: 10px; background: var(--sable) center/cover; display: grid; place-items: center; overflow: hidden; }
.detecteur-choix b { display: block; }
.detecteur-choix small { color: var(--doux); }
.det-liste { max-height: 60vh; overflow-y: auto; margin: 0 -4px; }
.det-marque { font-family: var(--titre); color: var(--marron); font-size: .95rem; margin: 14px 4px 6px; }
.det-ligne { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: center; padding: 8px 4px; border-radius: 12px; cursor: pointer; border: 0; background: none; width: 100%; text-align: left; }
.det-ligne:hover, .det-ligne.on { background: var(--kaki-cc); }
.det-ligne small { color: var(--doux); }
.materiel { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.materiel label { display: flex; gap: 8px; align-items: center; border: 1px solid var(--ligne); border-radius: 12px; padding: 9px 10px; background: #fff; cursor: pointer; font-size: .88rem; }
.materiel input { accent-color: var(--kaki); width: 18px; height: 18px; }
.materiel label:has(input:checked) { border-color: var(--kaki); background: var(--kaki-cc); }

/* ---------- fenêtres ---------- */
.voile { position: fixed; inset: 0; z-index: 2000; background: rgba(40,28,18,.42); display: flex; align-items: flex-end; justify-content: center; animation: fondu .2s; }
@keyframes fondu { from { opacity: 0; } }
.fenetre { background: var(--sable); width: 100%; max-width: 620px; max-height: 92vh; overflow-y: auto; border-radius: 22px 22px 0 0; padding: 10px 18px calc(18px + env(safe-area-inset-bottom)); animation: glisse .25s ease; }
@keyframes glisse { from { transform: translateY(40px); opacity: .5; } }
.fenetre .poignee { width: 42px; height: 5px; border-radius: 9px; background: var(--sable-3); margin: 0 auto 12px; }
.fenetre .tete { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.fenetre .tete h2 { margin: 0; }
.fermer { border: 0; background: var(--sable-2); width: 34px; height: 34px; border-radius: 50%; cursor: pointer; font-size: 1.2rem; color: var(--marron); }
@media (min-width: 700px) { .voile { align-items: center; } .fenetre { border-radius: 22px; } }

.toast { position: fixed; left: 50%; bottom: calc(var(--nav) + 24px); transform: translateX(-50%); z-index: 3000; background: var(--marron-f); color: #fff;
  padding: 10px 18px; border-radius: 99px; font-size: .88rem; box-shadow: 0 6px 20px rgba(0,0,0,.25); animation: monte .2s; max-width: 90vw; }
.toast.erreur { background: var(--rouge); }

/* ---------- connexion ---------- */
.accueil { min-height: 100vh; display: grid; place-items: center; padding: 24px 18px; background:
  radial-gradient(900px 500px at 10% -10%, #E9E3C9 0%, transparent 60%), radial-gradient(700px 400px at 110% 110%, #EBD9C2 0%, transparent 55%), var(--sable); }
.accueil .boite { width: 100%; max-width: 400px; }
.accueil .emblème, .embleme { display: grid; place-items: center; margin-bottom: 8px; }
.accueil h1 { text-align: center; font-size: 2.2rem; margin-bottom: 4px; }
.accueil .slogan { text-align: center; color: var(--doux); margin-bottom: 22px; }
.sillons { display: block; margin: 0 auto 18px; }

/* ---------- analyse ---------- */
.progression { display: flex; gap: 6px; margin-bottom: 18px; }
.progression i { flex: 1; height: 5px; border-radius: 9px; background: var(--sable-3); }
.progression i.on { background: var(--kaki); }
.question h2 { font-size: 1.35rem; }
.question .aide { color: var(--doux); margin-bottom: 14px; }
.etapes-ia { list-style: none; padding: 0; margin: 20px 0; }
.etapes-ia li { display: flex; gap: 12px; align-items: center; padding: 9px 0; color: var(--doux); }
.etapes-ia li i { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--sable-3); flex: none; }
.etapes-ia li.en { color: var(--marron-f); font-weight: 500; }
.etapes-ia li.en i { border-color: var(--kaki); border-top-color: transparent; animation: tourne .8s linear infinite; }
.etapes-ia li.fait { color: var(--kaki-f); }
.etapes-ia li.fait i { background: var(--kaki); border-color: var(--kaki); }
@keyframes tourne { to { transform: rotate(360deg); } }
.indice { display: grid; grid-template-columns: 10px 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--sable-2); }
.indice:last-child { border: 0; }
.indice .point { width: 10px; height: 10px; border-radius: 50%; margin-top: 6px; }
.indice b { display: block; }
.indice small { color: var(--doux); }
.conf-sûr, .conf-sur { background: var(--kaki); } .conf-probable { background: var(--terre); } .conf-hypothèse, .conf-hypothese { background: var(--sable-3); }
.plan-item { display: grid; grid-template-columns: 30px 1fr; gap: 10px; padding: 8px 0; }
.plan-item .num { width: 28px; height: 28px; border-radius: 50%; background: var(--terre); color: #fff; display: grid; place-items: center; font-weight: 600; font-size: .85rem; }

.spinner { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--sable-3); border-top-color: var(--kaki); animation: tourne .8s linear infinite; margin: 30px auto; }
.leaflet-control-attribution { font-size: 9px !important; background: rgba(255,252,246,.8) !important; }

input[type=file] { width: 100%; font-size: .85rem; color: var(--doux); }
input[type=file]::file-selector-button { border: 1px solid var(--ligne); background: var(--carte); color: var(--kaki-f); font-weight: 600; border-radius: 999px; padding: 8px 14px; margin-right: 10px; cursor: pointer; }

/* ---------- découvrir : fil plein écran ---------- */
.segment.trois { grid-template-columns: 1fr 1fr 1fr; }
.segment.trois button { font-size: .86rem; }
.puces.defile { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.puces.defile::-webkit-scrollbar { display: none; }
.puces.defile .puce { flex: none; }
body.mode-fil { background: #1d1711; }
body.mode-fil #app { padding-bottom: 0; }
body.mode-fil .nav { background: rgba(29,23,17,.94); border-top-color: rgba(255,255,255,.08); }
body.mode-fil .nav a { color: #b8a993; } body.mode-fil .nav a.actif { color: #fff; }
body.mode-fil .nav .plus { box-shadow: 0 6px 16px rgba(0,0,0,.4), 0 0 0 5px #1d1711; }
.fil { position: fixed; inset: 0 0 calc(var(--nav) + env(safe-area-inset-bottom)) 0; overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none; overscroll-behavior: contain; }
.fil::-webkit-scrollbar { display: none; }
.diapo { position: relative; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden; background: #1d1711; display: grid; place-items: center; }
.fond-flou { position: absolute; inset: -30px; background: center/cover; filter: blur(28px) brightness(.55); }
.photo-fil { position: relative; max-width: 100%; max-height: 100%; width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.vide-fil { display: grid; place-items: center; } .vide-fil svg { width: 70px; height: 70px; stroke: #6b5d4a; fill: none; stroke-width: 1.4; }
.diapo::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 45%; background: linear-gradient(transparent, rgba(20,15,10,.82)); pointer-events: none; }
.legende { position: absolute; z-index: 2; left: 16px; right: 84px; bottom: 18px; color: #fff; }
.legende a { color: #fff; text-decoration: none; } .legende span { color: #e3d6bf; font-size: .85rem; }
.legende h3 { color: #fff; font-size: 1.25rem; margin: 6px 0 8px; text-shadow: 0 1px 6px rgba(0,0,0,.4); }
.legende .badge { background: rgba(255,255,255,.18); color: #fff; backdrop-filter: blur(6px); }
.actions-fil { position: absolute; z-index: 3; right: 12px; bottom: 26px; display: grid; gap: 18px; justify-items: center; }
.av-fil { width: 48px; height: 48px; border-radius: 50%; border: 2px solid #fff; background: var(--kaki-c) center/cover; display: grid; place-items: center; font-family: var(--titre); color: var(--kaki-f); font-size: 1.2rem; text-decoration: none; }
.act { border: 0; background: none; color: #fff; display: grid; justify-items: center; gap: 3px; cursor: pointer; font-weight: 600; font-size: .78rem; text-shadow: 0 1px 4px rgba(0,0,0,.5); }
.act svg { width: 34px; height: 34px; fill: rgba(255,255,255,.12); stroke: #fff; stroke-width: 1.8; stroke-linejoin: round; filter: drop-shadow(0 1px 3px rgba(0,0,0,.4)); transition: transform .15s; }
.act:active svg { transform: scale(.85); }
.act.like.on svg { fill: #E0533D; stroke: #E0533D; animation: battre .35s ease; }
@keyframes battre { 50% { transform: scale(1.25); } }
.coeur-pop { position: absolute; z-index: 4; width: 110px; height: 110px; opacity: 0; pointer-events: none; }
.coeur-pop svg { width: 100%; height: 100%; fill: #E0533D; filter: drop-shadow(0 4px 14px rgba(0,0,0,.4)); }
.coeur-pop.anim { animation: pop .8s ease; }
@keyframes pop { 0% { opacity: 0; transform: scale(.3); } 20% { opacity: 1; transform: scale(1.1); } 40% { transform: scale(.95); } 80% { opacity: 1; } 100% { opacity: 0; transform: scale(1.2) translateY(-30px); } }
.diapo.fin { color: #e3d6bf; text-align: center; gap: 10px; align-content: center; padding: 30px; }
.diapo.fin svg { width: 56px; height: 56px; stroke: #6b5d4a; fill: none; stroke-width: 1.4; justify-self: center; }
.diapo.fin b { font-family: var(--titre); font-size: 1.3rem; color: #fff; }
.fil-entete { position: fixed; z-index: 700; top: 0; left: 0; right: 0; padding: 10px 12px 6px; background: linear-gradient(rgba(20,15,10,.7), transparent); }
.fil-titre { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.fil-titre a svg { width: 26px; height: 26px; stroke: #fff; fill: none; stroke-width: 2.2; }
.fil-titre b { font-family: var(--titre); color: #fff; font-size: 1.25rem; }
.fil-entete .puce { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.22); color: #fff; backdrop-filter: blur(6px); }
.fil-entete .puce.on { background: #fff; color: var(--marron-f); border-color: #fff; }
.fil .spinner { margin-top: 45vh; border-color: #4a3d2e; border-top-color: #fff; }

/* commentaires, amis */
.com { display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--sable-2); }
.com p { margin: 2px 0 0; font-size: .92rem; }
.com a { color: inherit; text-decoration: none; }
.suppr-com { border: 0; background: none; cursor: pointer; padding: 4px; }
.suppr-com svg { width: 18px; height: 18px; stroke: var(--doux); fill: none; stroke-width: 2; }
.com-saisie { display: flex; gap: 8px; position: sticky; bottom: 0; background: var(--sable); padding-top: 12px; }
#liste-com { max-height: 50vh; overflow-y: auto; }
.mini-av { width: 36px; height: 36px; border-radius: 50%; background: var(--kaki-c) center/cover; display: grid; place-items: center; font-family: var(--titre); color: var(--kaki-f); flex: none; text-decoration: none; }
.membre { display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--sable-2); }
.membre:last-child { border: 0; }
.membre .nom { text-decoration: none; color: inherit; } .membre .nom b { display: block; } .membre .nom small { color: var(--doux); }
.membre .rangee { gap: 6px; flex-wrap: nowrap; }
.compteurs { display: block; color: var(--terre) !important; font-weight: 600; margin-top: 2px; }

/* ---------- sorties sur le terrain ---------- */
.btn.gros { padding: 15px 20px; font-size: 1.05rem; }
.choix-grand { display: grid; grid-template-columns: 52px 1fr; gap: 14px; align-items: center; width: 100%; text-align: left; border: 1px solid var(--ligne); background: var(--carte);
  border-radius: 16px; padding: 14px; margin-bottom: 10px; cursor: pointer; box-shadow: var(--ombre); }
.choix-grand:hover { border-color: var(--kaki); }
.choix-grand b { display: block; font-size: 1rem; margin-bottom: 2px; } .choix-grand small { color: var(--doux); }
.pastille-ic { width: 52px; height: 52px; border-radius: 14px; background: var(--kaki-c); display: grid; place-items: center; }
.pastille-ic.terre { background: var(--terre-c); }
.pastille-ic svg { width: 26px; height: 26px; stroke: var(--marron-f); fill: none; stroke-width: 2; stroke-linecap: round; }
.bandeau-sortie { position: fixed; z-index: 850; left: 10px; right: 10px; bottom: calc(var(--nav) + env(safe-area-inset-bottom) + 10px); display: flex; align-items: center; gap: 10px;
  background: var(--marron-f); color: #fff; padding: 11px 14px; border-radius: 14px; box-shadow: 0 8px 22px rgba(0,0,0,.25); cursor: pointer; font-size: .88rem; max-width: 740px; margin: 0 auto; }
.bandeau-sortie span:nth-child(2), .bandeau-sortie > span:first-child:not(.point-rec) { flex: 1; }
.bandeau-sortie b { color: #F2D27A; white-space: nowrap; }
.point-rec { width: 10px; height: 10px; border-radius: 50%; background: #E0533D; animation: clignote 1.2s infinite; flex: none; }
@keyframes clignote { 50% { opacity: .25; } }
.option-zone { display: flex; gap: 12px; align-items: center; padding: 10px 6px; border-bottom: 1px solid var(--sable-2); cursor: pointer; }
.option-zone:last-child { border: 0; }
.option-zone input { accent-color: var(--kaki); width: 20px; height: 20px; flex: none; }
.option-zone b { display: block; } .option-zone small { color: var(--doux); }
.hud { top: 12px; left: 12px; right: 12px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; background: rgba(29,23,17,.82); backdrop-filter: blur(6px); color: #fff; border-radius: 16px; padding: 10px 12px; }
.hud > div:not(.etat-gps):not(.etat-reseau) { flex: 1; min-width: 60px; }
.hud b { display: block; font-family: var(--titre); font-size: 1.15rem; line-height: 1.1; }
.hud span { font-size: .68rem; color: #d8cbb2; text-transform: uppercase; letter-spacing: .04em; }
.etat-gps { flex-basis: 100%; font-size: .75rem; font-weight: 600; padding-top: 6px; border-top: 1px solid rgba(255,255,255,.12); }
.etat-gps.ok { color: #9CD39A; } .etat-gps.ko { color: #F2B36B; } .etat-gps.pause { color: #F2D27A; }
.panneau-bas.terrain { display: grid; gap: 10px; }
.panneau-bas.terrain #trou { font-size: 1.2rem; padding: 18px; }
.stat-ligne { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.stat-ligne b { font-family: var(--titre); color: var(--kaki-f); font-size: 1.15rem; }
.seance { display: flex; gap: 10px; justify-content: space-between; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--sable-2); }
.seance:last-child { border: 0; } .seance b { display: block; } .seance small { color: var(--doux); }
.zone-carte .pct { font-family: var(--titre); color: var(--kaki-f); font-size: 1rem; }

/* fiches, qualification */
h3.sect { font-family: var(--corps); font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; color: var(--terre); margin: 18px 0 8px; padding-top: 12px; border-top: 1px solid var(--ligne); }
h3.sect small { text-transform: none; letter-spacing: 0; color: var(--doux); font-weight: 400; }
.champ .lib, span.lib { display: block; font-size: .8rem; font-weight: 600; color: var(--marron); margin-bottom: 6px; }
div.champ { margin-bottom: 12px; }
.puce.petite { padding: 5px 10px; font-size: .8rem; }
.qualif .puces { gap: 6px; }

/* ---------- avatar et arsenal ---------- */
.mini-av, .grand-av, .av-int { border-radius: 50%; overflow: hidden; display: inline-grid; place-items: center; background: var(--kaki-c) center/cover; flex: none; }
.mini-av svg, .grand-av svg, .av-int svg { display: block; }
.av-fil { padding: 0; overflow: hidden; background: none; }
.avatars a { margin-left: -6px; border: 2px solid var(--carte); border-radius: 50%; display: inline-flex; }
.avatars a:first-child { margin-left: 0; }
.heros { background: radial-gradient(120% 80% at 50% 0%, #EEF0DD 0%, var(--carte) 60%); }
.arsenal-scene { position: relative; width: min(100%, 360px); aspect-ratio: 1; margin: 0 auto; }
.arsenal-scene::before { content: ''; position: absolute; inset: 9%; border-radius: 50%; border: 2px dashed var(--sable-3); }
.avatar-centre { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; box-shadow: 0 0 0 6px var(--carte), 0 10px 30px rgba(59,42,27,.2); }
.grand-av { width: 150px; height: 150px; }
.objet { position: absolute; transform: translate(-50%, -50%); width: 62px; height: 62px; border-radius: 18px; border: 2px solid var(--ligne); background: var(--carte);
  display: grid; place-items: center; padding: 6px 4px 14px; cursor: default; box-shadow: var(--ombre); transition: transform .15s, opacity .15s; }
.objet svg { width: 34px; height: 34px; }
.objet span { position: absolute; bottom: 3px; left: 0; right: 0; font-size: .58rem; font-weight: 600; color: var(--marron); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 2px; }
.arsenal.modifiable .objet { cursor: pointer; opacity: .38; filter: grayscale(.8); }
.arsenal.modifiable .objet.on { opacity: 1; filter: none; border-color: var(--kaki); }
.arsenal.modifiable .objet:active { transform: translate(-50%, -50%) scale(.92); }
.arsenal:not(.modifiable) .objet { border-color: var(--kaki-c); }
.arsenal-detecteur { display: flex; gap: 14px; align-items: center; justify-content: center; margin: -8px auto 6px; background: var(--carte); border: 1.5px solid var(--kaki); border-radius: 16px; padding: 8px 14px; width: fit-content; box-shadow: var(--ombre); position: relative; }
.arsenal-detecteur .illus { width: 120px; height: 80px; border-radius: 10px; background: var(--sable) center/cover; display: grid; place-items: center; overflow: hidden; }
.arsenal-detecteur small { display: block; color: var(--doux); font-size: .72rem; } .arsenal-detecteur b { display: block; }
.apercu-av { display: grid; place-items: center; margin-bottom: 10px; }
.apercu-av svg { border-radius: 50%; box-shadow: 0 8px 22px rgba(59,42,27,.2); }
.nuancier { display: flex; flex-wrap: wrap; gap: 8px; }
.nuancier button { width: 32px; height: 32px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1px var(--ligne); cursor: pointer; }
.nuancier button.on { box-shadow: 0 0 0 3px var(--kaki); }

.diapo.pub .fond-pub { position: absolute; inset: 0; background: linear-gradient(160deg, #4F5434, #2a2418 70%); }
.badge.sponsor { background: #F2D27A !important; color: #3B2A1B !important; }

/* ---------- mode plage ---------- */
.page.mode-plage { background: linear-gradient(180deg, #FBF3DF 0, var(--sable) 260px); }
.info-bandeau.sable { background: #F7E8C2; color: #7A5A12; }
.etat-reseau { flex-basis: 100%; font-size: .75rem; font-weight: 600; color: #F2D27A; }
.bourse-btn { left: 12px; top: 128px; border: 0; border-radius: 999px; padding: 8px 14px 8px 10px; background: linear-gradient(135deg, #FFE59A, #C08A1E); color: #3B2A1A; font-weight: 600; box-shadow: 0 6px 18px rgba(59,42,27,.3); display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; cursor: pointer; }
.bourse-btn b { font-family: var(--titre); font-size: 1.15rem; }
.bourse-btn small { font-size: .7rem; opacity: .8; }
.segment.cinq { grid-template-columns: repeat(5, 1fr); }
.segment.cinq button { font-size: .78rem; padding: 9px 2px; }
.pieces { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
.piece-btn { position: relative; background: var(--carte); border: 1px solid var(--ligne); border-radius: 14px; padding: 8px 4px 6px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.piece-btn .pc { border: 0; background: transparent; padding: 0; height: 48px; display: grid; place-items: center; cursor: pointer; }
.piece-btn .pc.tinte svg { animation: tinte .35s ease; }
@keyframes tinte { 0% { transform: scale(1); } 40% { transform: scale(1.25) rotate(-12deg); } 100% { transform: scale(1); } }
.piece-btn .nb { font-family: var(--titre); font-weight: 600; font-size: 1.1rem; color: var(--marron-f); }
.piece-btn .moins { position: absolute; top: 2px; right: 2px; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--ligne); background: var(--sable); color: var(--doux); font-size: .9rem; line-height: 1; cursor: pointer; padding: 0; }
.bourse-total { text-align: center; background: linear-gradient(135deg, #FFF3CF, #F2D27A); border-radius: 16px; padding: 12px; margin-bottom: 8px; }
.bourse-total span { display: block; font-size: .8rem; color: #7A5A12; }
.bourse-total b { display: block; font-family: var(--titre); font-size: 2rem; color: var(--marron-f); }
.bourse-total small { color: #7A5A12; }
.ligne-autre { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; }
.ligne-autre input { min-width: 0; }
.ligne-autre .lib-autre { flex: 1; } .ligne-autre .nb-autre { width: 58px; } .ligne-autre .val-autre { width: 74px; }
.ligne-autre small { display: block; color: var(--doux); font-size: .8rem; }
.pastille-bijou { width: 36px; height: 36px; border-radius: 50%; background: var(--sable-2); display: grid; place-items: center; font-size: 1.1rem; }
.icone-btn.petit { width: 32px; height: 32px; font-size: 1.1rem; }
.bourse-carte { width: 100%; display: flex; gap: 12px; align-items: center; text-align: left; border: 1px solid #E9C46A; background: #FFF8E4; cursor: pointer; font: inherit; color: inherit; }
.bourse-carte > span { font-size: 1.6rem; }
.bourse-carte small { display: block; color: var(--doux); }
.bourse-carte > b { font-family: var(--titre); font-size: 1.3rem; color: var(--marron-f); }
.pieces-total { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.pieces-total span { display: flex; align-items: center; gap: 4px; font-size: .85rem; }

/* ---------- badges ---------- */
.titre-joueur { display: inline-block; margin: 4px 0 2px; padding: 2px 12px; border-radius: 999px; background: linear-gradient(135deg, #FFE59A, #C08A1E); color: #3B2A1A; font-family: var(--titre); font-style: italic; font-weight: 500; font-size: .92rem; }
.badges-ligne { display: flex; gap: 6px; align-items: flex-end; flex-wrap: wrap; margin-top: 8px; text-decoration: none; }
.badges-ligne.centre { justify-content: center; margin: 4px 0 12px; }
.badges-ligne .small { align-self: center; }
.jauge { height: 8px; background: var(--sable-2); border-radius: 99px; overflow: hidden; margin: 10px 0 4px; }
.jauge i { display: block; height: 100%; background: linear-gradient(90deg, var(--kaki), #C9A227); border-radius: 99px; }
.grille-badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; margin-top: 10px; }
.badge-case { text-align: center; padding: 8px 4px; border-radius: 14px; }
.badge-case.on { background: #FFF8E4; }
.badge-case b { display: block; font-size: .8rem; line-height: 1.2; margin-top: 2px; color: var(--marron-f); }
.badge-case:not(.on) b { color: var(--doux); }
.badge-case small { display: block; font-size: .7rem; color: var(--doux); }

/* cérémonie de fin de sortie */
.ceremonie { position: fixed; inset: 0; z-index: 2000; background: radial-gradient(circle at 50% 38%, #4a3726 0, #1D1711 70%); display: grid; place-items: center; padding: 20px; overflow: hidden; animation: cer-in .3s ease; }
.ceremonie.sortie { animation: cer-out .25s ease forwards; }
@keyframes cer-in { from { opacity: 0; } } @keyframes cer-out { to { opacity: 0; transform: scale(1.04); } }
.cer-carte { position: relative; z-index: 2; width: min(380px, 100%); text-align: center; color: #fff; }
.cer-carte h2 { color: #fff; font-size: 1.7rem; margin: 6px 0 14px; }
.cer-sur { text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; color: #E9C46A; }
.cer-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 14px; }
.cer-stats div { background: rgba(255,255,255,.07); border-radius: 14px; padding: 10px; animation: monte .4s ease backwards; }
.cer-stats div:nth-child(2) { animation-delay: .08s; } .cer-stats div:nth-child(3) { animation-delay: .16s; } .cer-stats div:nth-child(4) { animation-delay: .24s; } .cer-stats div:nth-child(5) { animation-delay: .32s; }
.cer-stats b { display: block; font-family: var(--titre); font-size: 1.5rem; }
.cer-stats span { font-size: .72rem; color: #d8cbb2; text-transform: uppercase; letter-spacing: .05em; }
.cer-bourse { background: linear-gradient(135deg, #FFE59A, #C08A1E); color: #3B2A1A; border-radius: 14px; padding: 10px; margin-bottom: 14px; animation: pop .5s .4s cubic-bezier(.2,1.6,.4,1) backwards; }
.cer-bourse b { font-family: var(--titre); font-size: 1.3rem; }
.cer-hl { font-size: .82rem; color: #F2D27A; }
.cer-annonce { font-family: var(--titre); font-size: 1.2rem; color: #E9C46A; animation: pulse 1.2s ease infinite; }
@keyframes pulse { 50% { transform: scale(1.06); } }
.cer-medaille { margin: 10px auto 6px; animation: medaille 1s cubic-bezier(.2,1.5,.4,1) backwards; filter: drop-shadow(0 10px 24px rgba(0,0,0,.45)); }
@keyframes medaille { 0% { transform: scale(0) rotate(-200deg); opacity: 0; } 60% { opacity: 1; } 100% { transform: none; } }
.cer-titre { font-size: 2rem !important; background: linear-gradient(90deg, #fff 0, #FFE59A 40%, #fff 60%, #FFE59A 100%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent !important; animation: pop .6s .5s cubic-bezier(.2,1.6,.4,1) backwards, brille 2.5s 1s linear infinite; }
@keyframes pop { 0% { transform: scale(.3); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes brille { to { background-position: -250% 0; } }
.cer-rang { display: inline-block; padding: 3px 14px; border-radius: 999px; color: #3B2A1A; font-weight: 600; font-size: .8rem; animation: pop .5s .8s ease backwards; }
.cer-desc { color: #e6dcc8; animation: pop .5s .9s ease backwards; }
.ceremonie .btn { animation: pop .4s 1.1s ease backwards; }
.cer-rayons { position: absolute; width: 160vmax; height: 160vmax; left: 50%; top: 38%; margin: -80vmax 0 0 -80vmax; background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--c) 28%, transparent) 0 8deg, transparent 8deg 22deg); animation: tourne 18s linear infinite, cer-in 1s ease; mask: radial-gradient(circle, #000 0, transparent 55%); -webkit-mask: radial-gradient(circle, #000 0, transparent 55%); }
@keyframes tourne { to { transform: rotate(360deg); } }
.cer-confettis i { position: absolute; top: -20px; width: 8px; height: 14px; border-radius: 2px; animation: tombe linear forwards; }
@keyframes tombe { to { top: 110%; transform: rotate(720deg) translateX(40px); } }
@media (prefers-reduced-motion: reduce) { .ceremonie *, .ceremonie { animation-duration: .01s !important; animation-iteration-count: 1 !important; } }
.logo-img { display: flex; justify-content: center; margin: 0 0 6px; } .logo-img svg { max-width: 100%; }
body.avec-bandeau #app { padding-bottom: calc(var(--nav) + env(safe-area-inset-bottom) + 72px); }
.logo-mot { display: inline-flex; align-items: flex-end; font-family: var(--titre); font-weight: 600; color: var(--marron-f); line-height: 1; letter-spacing: -.02em; }
.logo-mot svg { height: 1.12em; width: auto; margin: 0 0 .02em .04em; }

/* ---------- ordinateur : superposition des calques ---------- */
.page.large-pc { max-width: 1320px; display: grid; grid-template-columns: minmax(0, 1fr) 420px; column-gap: 20px; align-items: start; }
.page.large-pc > * { grid-column: 1 / -1; }
.page.large-pc > .zone-carto { grid-column: 1; height: 72vh; position: sticky; top: 12px; }
.page.large-pc > #duo { grid-column: 2; max-height: 72vh; overflow: auto; margin: 0; }
.page.large-pc > #superposition .carte { margin: 0; }
.sup-ligne { display: grid; grid-template-columns: 1fr 44px 110px 30px; grid-template-areas: 'nom nom nom ordre' 'op pct fondu ordre'; gap: 4px 8px; align-items: center; padding: 8px 6px; border-radius: 12px; border: 1px solid transparent; }
.sup-ligne + .sup-ligne { border-top-color: var(--ligne); }
.sup-ligne.on { background: var(--kaki-cc); }
.sup-ligne.ko { opacity: .5; }
.sup-nom { display: flex; gap: 8px; align-items: center; cursor: pointer; min-width: 0; }
.sup-nom input { accent-color: var(--kaki); width: 18px; height: 18px; flex: none; }
.sup-nom .pastille { width: 26px; height: 26px; border-radius: 7px; flex: none; }
.sup-nom b { display: block; font-size: .85rem; line-height: 1.15; } .sup-nom small { color: var(--doux); font-size: .72rem; }
.sup-ligne input[type=range] { width: 100%; accent-color: var(--kaki); }
.sup-ligne select { font-size: .78rem; padding: 4px 6px; border-radius: 8px; }
.sup-pct { font-size: .75rem; color: var(--doux); text-align: right; }
.sup-ordre { display: flex; flex-direction: column; gap: 2px; }
.sup-ordre button { border: 1px solid var(--ligne); background: var(--carte); border-radius: 6px; font-size: .6rem; line-height: 1; padding: 3px 0; cursor: pointer; color: var(--marron); }
.sup-ordre button:disabled { opacity: .3; cursor: default; }
.sup-nom { grid-area: nom; } .sup-ligne input[type=range] { grid-area: op; } .sup-pct { grid-area: pct; } .sup-ligne select { grid-area: fondu; } .sup-ordre { grid-area: ordre; }
.sup-nom small { display: inline; margin-left: 4px; }
.sup-nom b { display: inline; }

/* ---------- accès à la parcelle et autorisation ---------- */
.requis { font-size: .68rem; font-weight: 600; color: var(--terre); text-transform: uppercase; letter-spacing: .04em; margin-left: 4px; }
.acces-choix { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.acces-opt { text-align: left; border: 1.5px solid var(--ligne); background: var(--carte); border-radius: 14px; padding: 10px; cursor: pointer; font: inherit; color: inherit; display: grid; grid-template-columns: 28px 1fr; column-gap: 6px; align-items: start; }
.acces-opt span { font-size: 1.3rem; grid-row: span 2; }
.acces-opt b { font-size: .86rem; line-height: 1.2; color: var(--marron-f); }
.acces-opt small { font-size: .72rem; color: var(--doux); line-height: 1.25; }
.acces-opt.on { border-color: var(--kaki); background: var(--kaki-cc); box-shadow: 0 0 0 3px var(--kaki-c); }
.zone-alerte { grid-column: 1 / -1; margin-top: 4px; }
.alerte-acces { display: block; color: #9A4A1E !important; font-weight: 600; }
.accord-etat { background: var(--terre-c); color: #7A3D1B; border-radius: 12px; padding: 10px 12px; font-size: .88rem; margin: 4px 0 10px; }
.accord-etat.ok { background: var(--kaki-cc); color: var(--kaki-f); }
.case { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; font-size: .88rem; cursor: pointer; }
.case input { accent-color: var(--kaki); width: 18px; height: 18px; margin-top: 2px; flex: none; }
.pad-sign { width: 100%; height: 120px; background: #fff; border: 1.5px dashed var(--sable-3); border-radius: 12px; touch-action: none; display: block; }
.pad-outils { justify-content: space-between; margin: 4px 0 10px; }

/* le document */
.autorisation-page { max-width: 860px; }
.feuille { background: #fff; color: #1d1712; border-radius: 6px; box-shadow: var(--ombre); padding: 16mm 15mm; font-size: 10.5pt; line-height: 1.55; aspect-ratio: auto; }
.feuille header { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid #3B2A1B; padding-bottom: 8px; margin-bottom: 14px; }
.f-titre { font-family: var(--titre); font-size: 17pt; font-weight: 600; line-height: 1.15; }
.f-titre span { font-size: 11pt; font-style: italic; font-weight: 500; color: #6A4A30; }
.f-ref { font-size: 8.5pt; color: #6A4A30; white-space: nowrap; }
.feuille h4 { font-family: var(--titre); font-size: 11.5pt; margin: 14px 0 4px; color: #3B2A1B; }
.feuille ul { margin: 0; padding-left: 18px; } .feuille li { margin: 2px 0; }
.a-remplir { display: inline-block; border-bottom: 1px dotted #888; height: 1em; vertical-align: baseline; }
.f-parcelle { display: flex; gap: 16px; align-items: center; border: 1px solid #ddd2bd; border-radius: 8px; padding: 10px 14px; margin: 8px 0 12px; }
.f-vig svg { display: block; }
.f-parcelle dl { display: grid; grid-template-columns: 90px 1fr; gap: 2px 10px; margin: 0; font-size: 10pt; }
.f-parcelle dt { color: #6A4A30; } .f-parcelle dd { margin: 0; font-weight: 600; }
.f-legal { font-size: 8.6pt; color: #4a3c2e; background: #f7f2e8; border-radius: 6px; padding: 8px 10px; margin-top: 14px; }
.f-signatures { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 16px; }
.f-signatures div { border: 1px solid #ddd2bd; border-radius: 8px; padding: 8px 10px; min-height: 42mm; display: flex; flex-direction: column; }
.f-signatures span { font-weight: 600; } .f-signatures small { color: #6A4A30; font-size: 8.5pt; }
.f-signatures img { max-height: 26mm; max-width: 100%; object-fit: contain; align-self: flex-start; margin: 4px 0; }
.f-signatures i { flex: 1; }
.f-signatures b { font-size: 9.5pt; margin-top: auto; }
.feuille footer { margin-top: 14px; font-size: 7.8pt; color: #8a7a66; text-align: center; }
@media print {
  @page { size: A4; margin: 0; }
  body { background: #fff !important; }
  #nav, .bandeau-sortie, .pas-imprime, .toast { display: none !important; }
  #app { padding: 0 !important; }
  .page.autorisation-page { max-width: none; padding: 0; animation: none; }
  .feuille { box-shadow: none; border-radius: 0; padding: 14mm 15mm; }
  html, body, #app { min-height: 0 !important; height: auto !important; background: #fff !important; }
}
h2 > svg, p.small > svg { width: 1em; height: 1em; vertical-align: -.12em; fill: none; stroke: currentColor; stroke-width: 2; }
.fil-titre { justify-content: space-between; }
.fil-lien { display: inline-flex; align-items: center; gap: 6px; color: #f3e6cc; font-size: .8rem; font-weight: 600; text-decoration: none; background: rgba(255,255,255,.12); border-radius: 999px; padding: 6px 12px; }
.fil-titre .fil-lien svg { width: 16px; height: 16px; stroke: currentColor; }

/* ---------- identification IA ---------- */
.ia-btn { background: linear-gradient(135deg, #4F5434, #6E7449); color: #fff; }
.ia-attente { position: fixed; inset: 0; z-index: 3000; background: rgba(29,23,17,.82); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #fff; text-align: center; }
.ia-attente small { color: #d8cbb2; }
.ia-loupe { width: 72px; height: 72px; border-radius: 50%; border: 6px solid #E9C46A; position: relative; animation: loupe 1.6s ease-in-out infinite; margin-bottom: 10px; }
.ia-loupe::after { content: ''; position: absolute; width: 8px; height: 34px; background: #E9C46A; border-radius: 4px; right: -16px; bottom: -26px; transform: rotate(-45deg); }
@keyframes loupe { 0%, 100% { transform: translate(-14px, 0) rotate(-8deg); } 50% { transform: translate(14px, -6px) rotate(8deg); } }
.hypothese { border: 1px solid var(--ligne); border-radius: 14px; padding: 12px; margin-bottom: 10px; background: var(--carte); }
.hypothese.premiere { border-color: var(--kaki); box-shadow: 0 0 0 3px var(--kaki-c); }
.conf { font-size: .7rem; font-weight: 600; border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.conf.ok { background: var(--kaki-c); color: var(--kaki-f); } .conf.moy { background: #F7E8C2; color: #7A5A12; } .conf.faible { background: var(--terre-c); color: #7A3D1B; }
.alerte-ia { display: grid; gap: 2px; background: #F7E8C2; color: #6a4a10; border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; font-size: .88rem; }
.alerte-ia.danger { background: #F6D5CC; color: #7A2414; }
.ia-ligne { display: grid; gap: 2px; padding: 8px 0; border-top: 1px solid var(--ligne); font-size: .88rem; }
.ia-ligne small { color: var(--doux); }
.ia-liste { margin: 0 0 6px; padding-left: 18px; font-size: .88rem; }
.ia-resume { width: 100%; display: flex; gap: 10px; align-items: center; text-align: left; border: 1px solid var(--kaki-c); background: var(--kaki-cc); border-radius: 14px; padding: 10px 12px; margin-bottom: 10px; cursor: pointer; font: inherit; color: inherit; }
.ia-resume > span:first-child { font-size: 1.4rem; } .ia-resume div { flex: 1; } .ia-resume small { display: block; color: var(--doux); font-size: .75rem; }

/* ---------- entraide ---------- */
.question-carte { display: flex; gap: 12px; align-items: center; background: var(--carte); border: 1px solid var(--ligne); border-radius: 16px; padding: 10px; margin-bottom: 10px; text-decoration: none; color: inherit; box-shadow: var(--ombre); }
.q-photo { width: 72px; height: 72px; flex: none; border-radius: 12px; background: var(--sable-2) center/cover no-repeat; display: grid; place-items: center; }
.q-photo svg { width: 26px; height: 26px; stroke: var(--doux); fill: none; stroke-width: 1.6; }
.q-txt { min-width: 0; flex: 1; } .q-txt b { display: block; line-height: 1.25; } .q-txt small { color: var(--doux); font-size: .78rem; }
.q-photos { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; margin-bottom: 12px; }
.q-photos img { height: 260px; max-width: 88%; object-fit: contain; border-radius: 14px; background: #1d1711; scroll-snap-align: start; flex: none; }
.reponse { display: flex; gap: 10px; background: var(--carte); border: 1px solid var(--ligne); border-radius: 14px; padding: 10px; margin-bottom: 10px; }
.reponse.acceptee { border-color: var(--kaki); box-shadow: 0 0 0 3px var(--kaki-c); }
.votes { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 32px; }
.vote { border: 1px solid var(--ligne); background: var(--sable); border-radius: 8px; width: 30px; height: 26px; cursor: pointer; color: var(--doux); font-size: .75rem; }
.vote.on { background: var(--kaki); color: #fff; border-color: var(--kaki); } .vote:disabled { opacity: .35; cursor: default; }
.proposition { background: var(--sable); border-radius: 10px; padding: 6px 10px; margin: 6px 0; }
.avis-ia { margin-top: 10px; background: var(--kaki-cc); border-radius: 10px; padding: 8px 10px; font-size: .88rem; }
.avis-ia summary { cursor: pointer; }

/* ---------- import, trouvailles de la parcelle, souvenirs ---------- */
.ligne-imp { display: grid; grid-template-columns: 52px 1fr 130px; gap: 8px; align-items: center; margin-bottom: 8px; }
.ligne-imp .q-photo { width: 52px; height: 52px; }
.bande-trouv { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.mini-trouv { width: 64px; height: 64px; flex: none; border-radius: 12px; border: 1px solid var(--ligne); background: var(--sable-2) center/cover no-repeat; cursor: pointer; display: grid; place-items: center; }
.mini-trouv svg { width: 22px; height: 22px; stroke: var(--doux); fill: none; }
.galerie { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.gal-vig { aspect-ratio: 1; border: 0; border-radius: 10px; background: var(--sable-2) center/cover no-repeat; position: relative; cursor: pointer; overflow: hidden; padding: 0; }
.gal-vig span { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(transparent, rgba(0,0,0,.7)); color: #fff; font-size: .68rem; padding: 10px 6px 4px; text-align: left; }
.souvenir-btn { font-size: 1.2rem; cursor: pointer; }

/* masque hors de la zone : sombre et désaturé */
path.masque-ext { mix-blend-mode: multiply; }

/* ---------- deux calques à comparer ---------- */
.duo-ligne { margin-bottom: 10px; }
.duo-tag { display: inline-block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; border-radius: 6px; padding: 2px 8px; margin-bottom: 6px; }
.duo-tag.a { background: var(--kaki-c); color: var(--kaki-f); } .duo-tag.b { background: var(--terre-c); color: #7A3D1B; }
.duo-puces { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.duo-puces::-webkit-scrollbar { display: none; }
.duo-puce { flex: none; display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--ligne); background: var(--carte); border-radius: 999px; padding: 6px 12px 6px 6px; font: inherit; font-size: .82rem; font-weight: 600; color: var(--marron); cursor: pointer; }
.duo-puce .pastille { width: 22px; height: 22px; border-radius: 50%; flex: none; }
.duo-puces[data-cote="a"] .duo-puce.on { border-color: var(--kaki); background: var(--kaki-cc); color: var(--kaki-f); }
.duo-puces[data-cote="b"] .duo-puce.on { border-color: var(--terre); background: var(--terre-c); color: #7A3D1B; }
.duo-puce:disabled { opacity: .35; cursor: default; }
.duo-curseur { display: grid; grid-template-columns: minmax(0, 1fr) 2fr minmax(0, 1fr); gap: 8px; align-items: center; background: var(--sable); border-radius: 14px; padding: 10px; }
.duo-curseur b { font-size: .75rem; line-height: 1.2; } .duo-curseur b.a { color: var(--kaki-f); } .duo-curseur b.b { color: #7A3D1B; text-align: right; }
.duo-curseur input { width: 100%; accent-color: var(--terre); }
.duo-curseur.inactif { opacity: .5; }
.duo-rapides { display: flex; gap: 6px; justify-content: center; margin-top: 8px; }
.duo-rapides button { border: 1px solid var(--ligne); background: var(--carte); border-radius: 999px; padding: 4px 12px; font: inherit; font-size: .78rem; cursor: pointer; color: var(--marron); }
.large-pc .duo-puces { flex-wrap: wrap; overflow: visible; }
.vit-ok { color: #9CD39A; } .vit-moy { color: #F2D27A; } .vit-ko { color: #FF8A6B; }
.icone-btn.off { opacity: .45; }

/* ---------- administration, documentation ---------- */
.admin-menu { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
.admin-tuile { background: var(--carte); border: 1px solid var(--ligne); border-radius: 16px; padding: 14px; text-decoration: none; color: inherit; box-shadow: var(--ombre); display: grid; gap: 2px; }
.admin-tuile span { font-size: 1.6rem; } .admin-tuile b { font-family: var(--titre); font-size: 1rem; color: var(--marron-f); } .admin-tuile small { color: var(--doux); font-size: .78rem; }
.admin-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.admin-stats div { background: var(--carte); border-radius: 12px; padding: 10px; }
.carte-admin { border: 1.5px solid var(--kaki); }
.doc-ligne { display: flex; gap: 12px; align-items: center; background: var(--carte); border: 1px solid var(--ligne); border-radius: 16px; padding: 12px; margin-bottom: 10px; box-shadow: var(--ombre); flex-wrap: wrap; }
.doc-ligne h3 { margin: 0 0 2px; } .doc-ligne .meta { font-size: .8rem; color: var(--doux); }
.doc-ic { width: 44px; height: 44px; display: grid; place-items: center; flex: none; }
.doc-ic svg { width: 22px; height: 22px; stroke: var(--kaki-f); fill: none; stroke-width: 1.8; }
.doc-actions { display: flex; gap: 6px; }

/* ---------- détection responsable ---------- */
.resp-intro { display: flex; gap: 12px; align-items: flex-start; background: var(--kaki-cc); border-radius: 16px; padding: 12px 14px; margin-bottom: 12px; color: var(--kaki-f); }
.resp-intro span { font-size: 1.8rem; } .resp-intro p { margin: 0; font-size: .9rem; }
details.resp summary { display: flex; gap: 10px; align-items: center; cursor: pointer; list-style: none; }
details.resp summary::-webkit-details-marker { display: none; }
details.resp summary span { font-size: 1.4rem; } details.resp summary h2 { margin: 0; flex: 1; }
details.resp summary::after { content: '›'; color: var(--doux); font-size: 1.4rem; transition: transform .2s; }
details.resp[open] summary::after { transform: rotate(90deg); }
details.resp ul { margin: 10px 0 0; padding-left: 18px; } details.resp li { margin-bottom: 8px; font-size: .9rem; }

/* ---------- accueil ---------- */
.accueil-page .sous { font-size: .85rem; color: var(--doux); }
.cloche { position: relative; }
.cloche svg { width: 20px; height: 20px; stroke: var(--kaki-f); fill: none; }
.cloche i { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--rouge); color: #fff; font: 600 .7rem/18px var(--corps); font-style: normal; text-align: center; }
.alerte-accueil { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; background: var(--terre-c); border-color: #E9C7AE; }
.alerte-accueil small, .zone-mini small, .notif small, .accueil-liens small { display: block; color: var(--doux); font-size: .8rem; }
.actions-rapides { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.ar { display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: var(--r); border: 1px solid var(--ligne); background: var(--carte); box-shadow: var(--ombre); color: var(--texte); text-decoration: none; font: inherit; text-align: left; cursor: pointer; }
.ar span { font-size: 1.4rem; line-height: 1; }
.ar b { font-size: .92rem; font-weight: 600; }
.ar.terre { background: var(--kaki-f); border-color: var(--kaki-f); color: #fff; }
.chiffres { display: block; color: inherit; text-decoration: none; padding: 12px 16px; }
.chiffres .resume { justify-content: space-between; gap: 6px; }
.chiffres .resume div { text-align: center; min-width: 0; }
.chiffres .resume div b { font-size: 1.15rem; }
.badges-ligne { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.badges-ligne svg { display: block; }
.prochain { display: flex; gap: 12px; align-items: center; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--ligne); }
.prochain b { display: block; font-family: var(--titre); }
.prochain .jauge { margin: 6px 0 2px; }
.zone-mini { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--sable-2); color: inherit; text-decoration: none; }
.zone-mini:last-child { border-bottom: 0; padding-bottom: 0; }
.zone-mini b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pct-rond { --p: 0; width: 42px; height: 42px; border-radius: 50%; flex: none; display: grid; place-items: center; background: conic-gradient(var(--kaki) calc(var(--p) * 1%), var(--sable-2) 0); }
.pct-rond b { width: 32px; height: 32px; border-radius: 50%; background: var(--carte); display: grid; place-items: center; font-size: .72rem; color: var(--kaki-f); }
.accueil-liens { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.accueil-liens .carte { display: block; color: inherit; text-decoration: none; margin: 0 0 14px; }
.accueil-liens span { font-size: 1.3rem; }
.accueil-liens b { display: block; margin-top: 4px; }
.notif { display: block; color: inherit; text-decoration: none; border-left: 4px solid var(--terre); }
.notif.lue { border-left-color: var(--ligne); opacity: .75; }

/* ---------- rallyes ---------- */
.rallye-carte { display: flex; gap: 14px; align-items: center; background: var(--carte); border: 1px solid var(--ligne); border-radius: var(--r); padding: 12px 14px; margin-bottom: 10px; box-shadow: var(--ombre); color: inherit; text-decoration: none; }
.rallye-carte b { display: block; }
.rallye-carte small { display: block; color: var(--doux); font-size: .82rem; }
.rallye-date { width: 54px; flex: none; border-radius: 12px; overflow: hidden; text-align: center; background: var(--carte); border: 1px solid var(--ligne); }
.rallye-date b { display: block; font: 600 1.4rem/1.5 var(--titre); color: var(--kaki-f); }
.rallye-date small { display: block; background: var(--terre); color: #fff; font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; padding: 2px 0; }
.rallye-date.petite { width: 44px; }
.rallye-date.petite b { font-size: 1.1rem; }
.billet { margin: 12px 0; padding: 16px; border: 2px dashed var(--kaki); border-radius: var(--r); background: var(--kaki-cc); text-align: center; }
.billet b { display: block; font: 600 2rem/1.2 ui-monospace, monospace; letter-spacing: .25em; color: var(--kaki-f); }
.onglets-orga { display: flex; gap: 6px; overflow-x: auto; margin: 0 -16px 14px; padding: 0 16px 4px; scrollbar-width: none; }
.onglets-orga a, .onglets-orga button { flex: none; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--ligne); background: var(--carte); color: var(--texte); text-decoration: none; font: 500 .85rem var(--corps); cursor: pointer; white-space: nowrap; }
.onglets-orga .on { background: var(--kaki-f); border-color: var(--kaki-f); color: #fff; }
.orga-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.orga-actions .btn { flex: 1 1 auto; }
.pastille-carte { width: 26px !important; height: 26px !important; border-radius: 50%; display: grid; place-items: center; font: 700 .8rem var(--corps); color: #fff; background: #fff; border: 2px solid var(--kaki-f); box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.pastille-carte.trouve { background: var(--kaki); }
.pastille-carte.non-enterre { background: #8a8a8a; }
@media print { .nav, .entete, .onglets-orga, .orga-actions, .no-print { display: none !important; } }

/* ---------- décor de parcelle ---------- */
.decor-carte { display: flex; gap: 14px; align-items: center; }
.decor-vig { flex: none; width: 112px; height: 112px; border-radius: 14px; background: var(--sable-2); display: grid; place-items: center; }
.vig-decor { filter: drop-shadow(0 2px 4px rgba(59,42,27,.25)); }
.decor-apercu { width: 260px; height: 260px; margin: 6px auto 0; border-radius: 18px; background: var(--sable-2); touch-action: none; cursor: grab; }
.decor-apercu:active { cursor: grabbing; }
.mini-trouv.choisi { outline: 3px solid var(--terre); outline-offset: 2px; }
.mini-trouv.charge { opacity: .5; }
.danger-texte { color: var(--rouge); }

/* ---------- retouche photo ---------- */
.retouche-apercu { position: relative; border-radius: 14px; overflow: hidden; background: repeating-conic-gradient(#e9e2d4 0 25%, #f6f1e7 0 50%) 50% / 18px 18px; display: grid; place-items: center; min-height: 220px; }
.retouche-apercu img { display: block; max-width: 100%; max-height: 46vh; }
.rt-etiquette { position: absolute; top: 8px; left: 8px; background: rgba(0,0,0,.6); color: #fff; font-size: .75rem; padding: 3px 10px; border-radius: 99px; }
.rt-comparer { width: 100%; margin-top: 8px; user-select: none; -webkit-user-select: none; touch-action: none; }
.rt-options { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.rt-options .puce { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--ligne); background: var(--carte); font: 500 .88rem var(--corps); color: var(--texte); cursor: pointer; }
.rt-options .puce.on { background: var(--kaki-f); border-color: var(--kaki-f); color: #fff; }
.rt-options .puce:disabled { opacity: .6; }
.rt-fonds { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.rt-fonds button { display: flex; align-items: center; gap: 6px; padding: 6px 12px 6px 6px; border-radius: 999px; border: 1px solid var(--ligne); background: var(--carte); font: 500 .82rem var(--corps); color: var(--texte); cursor: pointer; }
.rt-fonds button.on { border-color: var(--kaki-f); box-shadow: 0 0 0 2px var(--kaki-f) inset; }
.rt-pastille { width: 20px; height: 20px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); }
.rt-pastille.original { background: linear-gradient(135deg, #8c6a43, #c9b48a); }
.rt-pastille.sable { background: #EFE5D2; } .rt-pastille.blanc { background: #fff; } .rt-pastille.noir { background: #1e1e1e; } .rt-pastille.kaki { background: #6E7449; }

/* ---------- offres, légal, signalements, modération ---------- */
.pro-tete { display: flex; gap: 12px; align-items: flex-start; }
.pro-tete span { font-size: 2rem; line-height: 1; }
.pro-tete p { margin: 0; }
.pro-liste { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 8px; }
.pro-liste li { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; }
.pro-liste li span { width: 24px; flex: none; text-align: center; }
.pro-liste small { display: block; color: var(--doux); font-size: .78rem; }
.pro-pub { background: linear-gradient(160deg, #FFF8E6, var(--carte) 60%); border-color: #E8D29A; }
.prix .btn { display: flex; flex-direction: column; align-items: center; gap: 0; padding: 10px; }
.prix .btn b { font: 600 1.25rem var(--titre); }
.prix .btn small { font-size: .72rem; opacity: .85; font-weight: 500; }
.offre-actuelle.pro, .carte-offre.pro { border-color: #E3C56E; background: linear-gradient(160deg, #FFF6DA, var(--carte) 70%); }
.carte-offre { text-decoration: none; color: inherit; }
.usage { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 10px; margin: 8px 0; font-size: .88rem; }
.usage .jauge { grid-column: 1 / -1; margin: 2px 0 0; height: 6px; }
.legal h3 { font-size: 1rem; margin: 16px 0 4px; }
.legal p, .legal li { font-size: .92rem; line-height: 1.5; }
.legal ul, .legal ol { padding-left: 20px; }
.charte li { margin-bottom: 6px; }
.case.cgu { align-items: flex-start; font-size: .84rem; line-height: 1.4; }
.case.cgu a { color: var(--kaki-f); }
.case.verrou { opacity: .65; }
.lien-discret { background: none; border: 0; padding: 0; margin: -4px 0 12px; color: var(--kaki-f); font: 500 .85rem var(--corps); text-decoration: underline; cursor: pointer; }
.ou { display: flex; align-items: center; gap: 10px; margin: 14px 0 10px; color: var(--doux); font-size: .8rem; }
.ou::before, .ou::after { content: ''; flex: 1; height: 1px; background: var(--ligne); }
#g-btn { display: flex; justify-content: center; }
.lien-signaler { background: none; border: 0; color: var(--doux); font: 500 .8rem var(--corps); cursor: pointer; padding: 4px 6px; }
.lien-signaler:hover { color: var(--rouge); }
.actions-fil .act.sig { font-size: 1.15rem; color: #fff; opacity: .8; }
.signalement .extrait { margin: 8px 0 4px; padding: 8px 10px; background: var(--sable); border-radius: 10px; font-size: .9rem; }
.badge.rouge { background: #F6D6CD; color: var(--rouge); }
.badge.pro { background: linear-gradient(135deg, #FFE59A, #C08A1E); color: #3B2A1A; }
.recherche { width: 100%; margin-bottom: 12px; }

/* ---------- rapport propriétaire ---------- */
.feuille .f-logo svg { height: 30px; width: auto; }
.r-chiffres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 10px 0 6px; }
.r-chiffres div { border: 1px solid #E2D8C6; border-radius: 6px; padding: 6px 8px; }
.r-chiffres b { display: block; font: 600 14pt var(--titre); color: #3B2A1B; line-height: 1.2; }
.r-chiffres span { font-size: 8.5pt; color: #6b5d4c; }
.carte-rapport { width: 100%; height: auto; border: 1px solid #E2D8C6; border-radius: 6px; }
.r-legende { font-size: 8.5pt; color: #6b5d4c; margin: 2px 0 0; }
.r-legende i { display: inline-block; width: 12px; height: 8px; margin: 0 4px 0 10px; vertical-align: middle; }
.r-legende i:first-child { margin-left: 0; }
.l-trace { background: rgba(110,116,73,.55); } .l-trou { background: #B4683A; border-radius: 50%; width: 8px !important; }
.l-dechet { background: #8a8a8a; width: 8px !important; } .l-ex { background: rgba(168,67,42,.2); border: 1px dashed #A8432A; }
.r-table { width: 100%; border-collapse: collapse; font-size: 9pt; }
.r-table th, .r-table td { text-align: left; padding: 3px 6px; border-bottom: 1px solid #E8E0D0; }
.r-table th { font-weight: 600; color: #6b5d4c; }
.r-trouv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.r-trouv div { break-inside: avoid; font-size: 9pt; }
.r-trouv img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px; display: block; margin-bottom: 3px; }
.r-trouv b { display: block; } .r-trouv small { color: #6b5d4c; font-size: 8pt; }
.r-engag { list-style: none; padding: 0 !important; }
.r-message { margin: 14px 0 6px; padding: 10px 12px; background: #FBF6EC; border-left: 3px solid #6E7449; font-style: italic; }
.r-sign { display: flex; flex-direction: column; align-items: flex-end; margin-top: 10px; }
.r-sign span { font-weight: 600; } .r-sign small { color: #6b5d4c; } .r-sign img { height: 46px; margin-top: 4px; }
@media print { .feuille.rapport h4 { break-after: avoid; } .carte-rapport { break-inside: avoid; } }

/* ---------- propriétaire ---------- */
.proprio { margin-top: 12px; padding: 12px; border-radius: 12px; background: var(--sable); border: 1px solid var(--ligne); }
.proprio-infos { margin-top: 6px; display: grid; gap: 2px; }
.p-nom { font: 600 1.05rem var(--titre); }
.proprio-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.proprio-actions .btn { text-decoration: none; }

/* ---------- journal des sorties ---------- */
.j-filtres { display: flex; gap: 6px; overflow-x: auto; flex-wrap: nowrap; margin-bottom: 12px; padding-bottom: 2px; scrollbar-width: none; }
.j-filtres .puce { flex: none; }
.j-mois { font-family: var(--titre); text-transform: capitalize; margin: 18px 0 8px; color: var(--doux); font-size: 1rem; }
.j-sortie { display: flex; gap: 12px; align-items: center; color: inherit; text-decoration: none; padding: 12px 14px; margin-bottom: 10px; }
.j-date { width: 46px; flex: none; text-align: center; border-radius: 12px; background: var(--kaki-cc); padding: 4px 0; }
.j-date b { display: block; font: 600 1.25rem/1.2 var(--titre); color: var(--kaki-f); }
.j-date small { font-size: .7rem; text-transform: uppercase; color: var(--doux); }
.j-corps { flex: 1; min-width: 0; }
.j-corps > b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.j-corps > small { display: block; color: var(--doux); font-size: .8rem; }
.j-compteurs { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; font-size: .82rem; }
.j-apercu { display: flex; gap: 6px; margin-top: 8px; }
.j-vig { width: 46px; height: 46px; border-radius: 10px; background: var(--sable-2) center/cover; flex: none; }
.j-sortie.compacte { margin-bottom: 0; border: 0; box-shadow: none; padding: 10px 0; border-radius: 0; border-bottom: 1px solid var(--sable-2); background: none; }
.j-sortie.compacte:last-child { border-bottom: 0; padding-bottom: 0; }
.j-liste { margin: 10px 0 0; padding-left: 18px; font-size: .9rem; }
.j-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; }
.j-photos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; display: block; }

/* ---------- conditions du jour ---------- */
.cond-carte { display: block; color: inherit; text-decoration: none; }
.meteo { display: flex; gap: 12px; align-items: center; }
.meteo-ic { font-size: 2rem; line-height: 1; }
.meteo b { display: block; } .meteo small { display: block; color: var(--doux); font-size: .8rem; }
.meilleure { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--ligne); display: flex; gap: 12px; align-items: center; }
.note-rond { --n: 0; width: 48px; height: 48px; border-radius: 50%; flex: none; display: grid; place-items: center; background: conic-gradient(var(--c, var(--kaki)) calc(var(--n) * 1%), var(--sable-2) 0); }
.note-rond b { width: 38px; height: 38px; border-radius: 50%; background: var(--carte); display: grid; place-items: center; font-size: .85rem; }
.note-rond.ideal { --c: #4E8A3E; } .note-rond.bon { --c: var(--kaki); } .note-rond.moyen { --c: #C9A227; } .note-rond.eviter { --c: var(--rouge); }
.raisons { margin: 4px 0 0; padding: 0; list-style: none; font-size: .8rem; }
.raisons li::before { content: '+ '; color: #4E8A3E; font-weight: 700; }
.raisons li.moins::before { content: '− '; color: var(--rouge); }
.badge.ideal { background: #DCEBD3; color: #2F5B23; } .badge.bon { background: var(--kaki-cc); color: var(--kaki-f); } .badge.moyen { background: #F5E9C4; color: #7A5E10; } .badge.eviter { background: #F6D6CD; color: var(--rouge); }
.zone-carte .note-z { font-size: .72rem; }

/* ---------- arsenal et sortie après coup ---------- */
.det-autre { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--ligne); border-radius: 12px; margin-bottom: 6px; background: var(--carte); }
.det-autre .illus { width: 54px; flex: none; }
.det-autre input.ad-nom { width: 100%; margin-bottom: 4px; }
.det-autre .ad-disque { width: 64px; padding: 4px 6px; margin: 0 4px; }
.ad-sup { border: 0; background: none; font-size: 1.4rem; color: var(--doux); cursor: pointer; padding: 0 4px; }
.det-choix { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.det-choix button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px; border-radius: 12px; border: 1px solid var(--ligne); background: var(--carte); cursor: pointer; font: inherit; color: var(--texte); text-align: center; }
.det-choix button b { font-size: .82rem; line-height: 1.2; }
.det-choix button small { font-size: .72rem; color: var(--doux); }
.det-choix button.on { border-color: var(--kaki-f); box-shadow: 0 0 0 2px var(--kaki-f) inset; background: var(--kaki-cc); }
.trois-col { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.trois-col .champ:first-child { grid-column: 1 / -1; }
.trois-col input { width: 100%; min-width: 0; }
.trois-col .champ { margin-bottom: 0; }

/* ---------- sorties prévues et discussion ---------- */
.j-date.avenir { background: var(--terre-c); }
.j-date.avenir b { color: var(--terre); }
.prevues-mini .j-sortie { margin: 8px 0 0; }
.vis-choix { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.vis-choix button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border-radius: 12px; border: 1px solid var(--ligne); background: var(--carte); cursor: pointer; font: inherit; color: var(--texte); text-align: center; }
.vis-choix button span { font-size: 1.3rem; }
.vis-choix button b { font-size: .88rem; }
.vis-choix button small { font-size: .7rem; color: var(--doux); line-height: 1.25; }
.vis-choix button.on { border-color: var(--kaki-f); box-shadow: 0 0 0 2px var(--kaki-f) inset; background: var(--kaki-cc); }
.btn.gros { padding: 16px; font-size: 1.05rem; margin-bottom: 14px; width: 100%; }
.chat .msgs { max-height: 50vh; overflow-y: auto; padding: 4px 2px 10px; }
.msg { display: flex; gap: 8px; align-items: flex-end; max-width: 88%; margin-bottom: 8px; }
.msg .bulle { min-width: 0; }
.msg.de-moi { margin-left: auto; justify-content: flex-end; }
.msg .bulle { background: var(--sable); border-radius: 14px 14px 14px 4px; padding: 7px 11px; }
.msg.de-moi .bulle { background: var(--kaki-f); color: #fff; border-radius: 14px 14px 4px 14px; }
.msg .bulle b { display: block; font-size: .75rem; color: var(--kaki-f); }
.msg .bulle p { margin: 0; white-space: pre-wrap; word-break: break-word; }
.msg .bulle small { display: block; font-size: .65rem; opacity: .65; margin-top: 2px; }
.carte-groupe { text-decoration: none; color: inherit; }
.partage-ligne { margin-top: 8px; }
.partage-ligne .segment button { font-size: .78rem; padding: 8px 4px; }
.legende-groupe { display: grid; grid-template-columns: 14px 1fr; gap: 2px 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--sable-2); }
.legende-groupe:last-child { border-bottom: 0; }
.legende-groupe i { width: 14px; height: 14px; border-radius: 4px; grid-row: span 2; }
.legende-groupe small { grid-column: 2; }

/* ---------- saisie rapide sur le terrain ---------- */
.btn.trouve { font-size: 1.25rem; padding: 20px; }
.saisie-rapide { position: fixed; inset: 0; z-index: 3000; background: rgba(30,22,14,.55); display: flex; align-items: flex-end; }
.sr-boite { width: 100%; background: var(--sable); border-radius: 22px 22px 0 0; padding: 14px 14px calc(16px + env(safe-area-inset-bottom)); }
.sr-tete { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.sr-tete small { display: block; color: var(--doux); font-size: .8rem; }
.sr-tete b { font: 600 1.7rem var(--titre); color: var(--kaki-f); }
.sr-fermer { width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--sable-2); font-size: 1.6rem; }
.sr-tuiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sr-tuiles button { min-height: 104px; border-radius: 18px; border: 2px solid var(--ligne); background: var(--carte); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font: 600 1.05rem var(--corps); color: var(--texte); }
.sr-tuiles button span { font-size: 2.3rem; line-height: 1; }
.sr-tuiles button:active { background: var(--kaki-cc); border-color: var(--kaki-f); }
.sr-outils { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.sr-outils button, .sr-outils label { min-height: 56px; border-radius: 14px; border: 1px solid var(--ligne); background: var(--carte); display: grid; place-items: center; font: 600 .95rem var(--corps); color: var(--texte); }
.sr-compte { margin-top: 10px; text-align: center; font-size: .85rem; color: var(--doux); }
.a-completer { width: 100%; border: 1px dashed var(--terre); background: var(--terre-c); font: inherit; color: inherit; cursor: pointer; }
.a-completer.on { border-style: solid; }
.pastille-sachet { position: absolute; top: 6px; left: 6px; background: var(--terre); color: #fff; font: 700 .75rem var(--corps); padding: 2px 8px; border-radius: 99px; }
.trouvaille .photo { position: relative; }
.imp-info { display: block; grid-column: 1 / -1; font-size: .72rem; color: var(--kaki-f); margin-top: 2px; }
/* ajout rapide en lot */
.lot-liste { display: grid; gap: 6px; }
.lot-ligne { display: grid; grid-template-columns: 34px 1fr 44px 34px 44px; align-items: center; gap: 6px; background: var(--creme, #fffaf0); border: 1px solid var(--sable-2); border-radius: 12px; padding: 4px 6px; }
.lot-ic { font-size: 1.4rem; text-align: center; }
.lot-n { text-align: center; font-size: 1.1rem; }
.lot-btn { width: 44px; height: 40px; border-radius: 10px; border: 1px solid var(--sable-2); background: var(--sable-1, #f3ece0); font-size: 1.3rem; font-weight: 700; color: inherit; }
/* relief et vue 3D */
.bouton-3d { right: 10px; top: 10px; background: var(--carte); color: var(--marron); font-weight: 700; font-size: .85rem; padding: 7px 12px; border-radius: 99px; box-shadow: var(--ombre); text-decoration: none; }
.profil-svg { width: 100%; height: auto; display: block; color: var(--marron); }
.carte3d { position: relative; height: 62vh; border-radius: 16px; overflow: hidden; background: #cfe1ee; }
.carte3d .fonds { z-index: 3; }
.outils3d { right: 10px; top: 10px; z-index: 3; display: flex; flex-direction: column; gap: 6px; }
.outils3d button { width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--carte); box-shadow: var(--ombre); font-size: 1.05rem; font-weight: 700; color: var(--marron); }
.outils3d button.on { background: var(--kaki); color: #fff; }
.pin3d { min-width: 24px; height: 24px; padding: 0 5px; border-radius: 12px; background: #E0533D; color: #fff; border: 2px solid #fff; font: 700 12px/20px var(--police, sans-serif); text-align: center; box-shadow: 0 1px 4px rgba(0,0,0,.4); cursor: pointer; }
.maplibregl-ctrl-attrib { font-size: 10px; }
/* prévoir : type de sortie puis onglets d'étapes */
.type-choix { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; border: 1px solid var(--ligne); }
.type-choix > span:first-child { font-size: 2rem; }
.type-choix div { flex: 1; } .type-choix b { display: block; font-size: 1.05rem; } .type-choix small { color: var(--muted, #7a6a58); }
.onglets-etapes { display: flex; gap: 4px; overflow-x: auto; margin: 0 0 12px; padding-bottom: 2px; }
.onglets-etapes button { flex: 1 0 auto; display: flex; align-items: center; gap: 6px; justify-content: center; border: 0; border-radius: 99px; padding: 7px 10px; background: var(--sable-2, #ece3d2); font: 600 .8rem/1 inherit; color: var(--marron); cursor: pointer; }
.onglets-etapes button i { font-style: normal; width: 18px; height: 18px; border-radius: 50%; background: rgba(0,0,0,.08); display: inline-grid; place-items: center; font-size: .7rem; }
.onglets-etapes button.faite i { background: var(--kaki); color: #fff; }
.onglets-etapes button.on { background: var(--kaki); color: #fff; } .onglets-etapes button.on i { background: rgba(255,255,255,.25); }
.nav-etapes { gap: 8px; margin-top: 4px; } .nav-etapes .btn { flex: 1; }
.vis-choix.deux-vis { grid-template-columns: repeat(2, 1fr); }
.recap-prevoir .j-liste { margin: 6px 0 0; }
.j-onglets { margin: 0 0 12px; }
.onglets-etapes.serre button { flex: 0 0 auto; padding: 7px 9px; }
.onglets-etapes.serre button.on { flex: 1 0 auto; }
.onglets-etapes.serre button:not(.on) span { display: none; }
/* aide à l'identification */
.aide-ident { gap: 12px; } .aide-ident small { display: block; color: var(--muted, #7a6a58); }
.pastille-aide { position: absolute; right: 6px; top: 6px; background: #2F7DD1; color: #fff; font: 700 11px/1 var(--police, sans-serif); padding: 4px 6px; border-radius: 99px; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.carte-aides { text-decoration: none; color: inherit; align-items: flex-start; }
.carte-aides .aide-ic { font-size: 1.8rem; }
.barre-prog { height: 6px; background: var(--sable-2, #ece3d2); border-radius: 99px; overflow: hidden; margin-top: 6px; }
.barre-prog i { display: block; height: 100%; background: var(--kaki); border-radius: 99px; }
.niveau-histo { padding: 8px 0; border-top: 1px solid var(--ligne); } .niveau-histo:first-of-type { border-top: 0; }
.niveau-histo b { margin-left: 6px; } .lien-trouv { background: var(--sable-2, #ece3d2); border-radius: 8px; padding: 6px 8px; }
/* rapport de zone : résumé, sections repliables, impression */
.sec-rapport > summary { list-style: none; display: flex; align-items: center; gap: 8px; cursor: pointer; }
.sec-rapport > summary::-webkit-details-marker { display: none; }
.sec-rapport > summary h2 { margin: 0; flex: 1; font-size: 1.05rem; }
.sec-rapport > summary::after { content: '›'; font-size: 1.4rem; color: var(--muted, #7a6a58); transition: transform .2s; }
.sec-rapport[open] > summary::after { transform: rotate(90deg); }
.sec-rapport[open] > summary { margin-bottom: 10px; }
.resume-30s { border: 2px solid var(--kaki); }
.alerte-sens { background: #f8e3dc; color: var(--rouge); border-radius: 8px; padding: 6px 8px; margin: 10px 0 0; }
@media print {
  #nav, .entete .icone-btn, #tout-ouvrir, #imprimer, .info-bandeau { display: none !important; }
  body, .page { background: #fff !important; } .carte { box-shadow: none !important; break-inside: avoid; border: 1px solid #ccc; }
  .sec-rapport > summary::after { display: none; }
}

.zone-carte .vignette { width: 96px; height: 96px; }

/* menu déroulant (v0.23) */
.menu-voile { position: fixed; inset: 0; z-index: 950; background: rgba(40,28,18,.28); animation: fondu .15s; }
.menu-panneau { position: absolute; right: 8px; bottom: calc(var(--nav) + env(safe-area-inset-bottom) + 8px); width: min(340px, calc(100vw - 16px));
  max-height: calc(100vh - var(--nav) - 40px); overflow-y: auto; background: var(--carte); border: 1px solid var(--ligne); border-radius: var(--r);
  box-shadow: 0 12px 32px rgba(40,28,18,.25); padding: 8px; animation: monte .18s ease-out; transform-origin: bottom right; }
@keyframes monte { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
.menu-moi { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; background: var(--sable); color: inherit; text-decoration: none; margin-bottom: 4px; }
.menu-moi small, .menu-item small { display: block; color: var(--doux); font-size: .78rem; font-weight: 400; }
.menu-groupe { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--doux); font-weight: 600; padding: 12px 10px 4px; }
.menu-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 10px; border-radius: 10px; color: var(--texte); text-decoration: none; background: none; border: 0; font: inherit; text-align: left; cursor: pointer; }
.menu-item:hover, .menu-item:focus-visible { background: var(--sable); }
.menu-item b { font-weight: 600; font-size: .93rem; }
.menu-ic { width: 28px; text-align: center; font-size: 1.15rem; flex: none; }
.menu-deco { margin-top: 6px; border-top: 1px solid var(--ligne); border-radius: 0 0 10px 10px; color: var(--rouge); }
.nav a.ouvert { color: var(--kaki-f); }
/* accueil épuré */
.accueil-tete { align-items: center; gap: 12px; }
.accueil-av { flex: none; border-radius: 50%; box-shadow: 0 0 0 3px var(--carte), 0 0 0 4px var(--ligne); line-height: 0; }
.carte-depart { display: grid; gap: 12px; }
.det-accueil { display: flex; align-items: center; gap: 14px; color: inherit; text-decoration: none; }
.det-accueil .illus { width: 96px; height: 64px; flex: none; border-radius: 12px; background: var(--sable) center/cover no-repeat; display: grid; place-items: center; }
.det-accueil b { display: block; font-size: 1.05rem; }
.det-accueil small { display: block; }
.raccourcis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.raccourcis a { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 4px; border-radius: var(--r); border: 1px solid var(--ligne); background: var(--carte); box-shadow: var(--ombre); color: var(--texte); text-decoration: none; text-align: center; }
.raccourcis span { font-size: 1.3rem; line-height: 1; height: 24px; } .raccourcis span svg { width: 24px; height: 24px; stroke: var(--kaki-f); fill: none; stroke-width: 1.8; }
.raccourcis b { font-size: .8rem; font-weight: 600; } .raccourcis small { font-size: .72rem; color: var(--doux); }

/* niveau d'intérêt (v0.24) */
.jauge-int { display: inline-flex; gap: 3px; vertical-align: middle; }
.jauge-int i { width: 10px; height: 10px; border-radius: 50%; background: var(--ligne); }
.jauge-int i.on { background: var(--terre); }
.jauge-int.petit i { width: 7px; height: 7px; }
.interet-zone { margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: var(--sable); }

/* carte de zone : 3D sur place */
.vue3d-inline { position: absolute; inset: 0; z-index: 1100; background: var(--sable); }
.zone-carto.en-3d > .fonds, .zone-carto.en-3d > #b3d { display: none; }
.vue3d-inline .fonds { z-index: 3; } .zone-carto.en-3d .leaflet-control-container { display: none; }

/* la barre de recherche et ses suggestions passent au-dessus des autres boutons de la carte */
.barre-recherche { z-index: 700; }

/* liste des zones : état de l'analyse IA */
.etat-ia { margin-top: 4px; font-size: .78rem; display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 999px; }
.etat-ia.oui { background: var(--terre-c); color: var(--marron-f); }
.etat-ia.en-cours { background: var(--sable); color: var(--marron); }
.etat-ia.non { color: var(--doux); padding-left: 0; }

/* administration : consommation IA */
.conso-grille { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.conso-grille > div { background: var(--sable); border-radius: 12px; padding: 8px 10px; display: grid; }
.conso-grille small { color: var(--doux); font-size: .74rem; } .conso-grille b { font-size: 1.15rem; } .conso-grille span { font-size: .72rem; color: var(--doux); }
.conso-ligne { display: flex; justify-content: space-between; gap: 10px; width: 100%; padding: 9px 0; border: 0; border-bottom: 1px solid var(--sable-2); background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.conso-ligne small { display: block; color: var(--doux); font-size: .74rem; } .conso-ligne .droite { text-align: right; flex: none; }

/* identification : objets à comparer, informations manquantes */
.puce-lien { display: inline-block; margin: 3px 4px 0 0; padding: 3px 9px; border-radius: 999px; background: var(--sable); color: var(--marron-f); text-decoration: none; font-size: .8rem; }
.infos-manquantes { background: var(--terre-c); border-radius: 12px; padding: 10px 12px; margin: 10px 0; }

/* fiche trouvaille : sous-groupe « ce qu'a dit le détecteur » */
.sous-groupe { background: var(--carte); border: 1px solid var(--ligne); border-radius: 12px; padding: 10px 12px 12px; margin: 4px 0 14px; }
.sous-groupe > .lib { display: block; font-weight: 600; margin-bottom: 6px; color: var(--marron); }

/* modification d'une demande d'identification */
.q-photo-edit { position: relative; width: 72px; height: 72px; border-radius: 12px; background: var(--sable) center/cover; }
.q-photo-edit button { position: absolute; top: -6px; right: -6px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: var(--rouge); color: #fff; font-weight: 700; line-height: 1; }
.q-photo-edit.retiree { opacity: .3; } .q-photo-edit.retiree button { background: var(--kaki); }
/* fiche trouvaille : bloc « Identifier cet objet » */
.bloc-ident .choix-ident { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.bloc-ident .choix-ident button, .bloc-ident .choix-ident a { display: grid; gap: 2px; text-align: left; padding: 10px; border-radius: 12px; border: 1px solid var(--ligne); background: var(--carte); font: inherit; color: inherit; text-decoration: none; cursor: pointer; }
.bloc-ident .choix-ident b { font-size: .92rem; } .bloc-ident .choix-ident small { color: var(--doux); font-size: .75rem; }

/* accueil harmonisé : mêmes en-têtes de section, icônes dans des pastilles, bilan illustré */
.tete-section { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.tete-section h2 { margin: 0; font-size: 1.15rem; }
.lien-section { font-size: .82rem; font-weight: 600; color: var(--kaki-f); text-decoration: none; background: var(--sable); padding: 4px 10px; border-radius: 999px; }
.chiffres-accueil { display: block; color: inherit; text-decoration: none; }
.bilan-grille { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; text-align: center; }
.bilan-grille > div { display: grid; justify-items: center; gap: 2px; }
.bilan-grille .ic { width: 38px; height: 38px; border-radius: 50%; background: var(--sable); display: grid; place-items: center; font-size: 1.1rem; }
.bilan-grille b { font-family: var(--titre, inherit); font-size: 1.05rem; color: var(--kaki-f); white-space: nowrap; }
.bilan-grille small { font-size: .7rem; color: var(--doux); }
.raccourcis span { width: 44px; height: 44px; border-radius: 50%; background: var(--sable); display: grid; place-items: center; font-size: 1.35rem; margin-bottom: 4px; }
.raccourcis b { color: var(--marron-f); }
.cond-carte { display: block; color: inherit; text-decoration: none; }

/* ---------- identité Hermaion : fond cartographique et icônes illustrées ---------- */
body { background: transparent; }
body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: #F8EDD9 url(/img/fond-mobile.svg) center / cover no-repeat; }
@media (min-aspect-ratio: 1/1) { body::before { background-image: url(/img/fond-large.svg); } }
/* haut de l'écran calme : les titres et boutons d'en-tête ne croisent plus les motifs du fond */
body::after { content: ''; position: fixed; left: 0; right: 0; top: 0; height: 190px; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, #F8EDD9 0, #F8EDD9 70px, rgba(248, 237, 217, 0) 100%); }
svg.ico, .raccourcis span svg.ico, .pastille-ic svg.ico { display: block; flex: none; stroke: none !important; overflow: visible; }
.tete-section h2 { display: flex; align-items: center; gap: 8px; }
.menu-ic svg.ico { margin: 0 auto; }
.raccourcis span:has(svg.ico) { background: var(--kaki-cc); }
.bilan-grille .ic:has(svg.ico) { background: var(--kaki-cc); }

/* ---------- passe de finition v0.26 ---------- */
/* deux champs côte à côte : ne débordent plus de l'écran (dates et heures sur téléphone) */
.deux { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.deux > * { min-width: 0; }
.deux input, .deux select { min-width: 0; max-width: 100%; }
@media (max-width: 480px) { .deux:has(input[type="datetime-local"]) { grid-template-columns: minmax(0, 1fr); } }
/* documentation : boutons sous le titre sur téléphone */
@media (max-width: 520px) { .doc-actions { width: 100%; } .doc-actions .btn { flex: 1; text-align: center; } }
body.mode-fil::before, body.mode-fil::after { display: none; }

/* ---------- découverte à déclarer ---------- */
.decl { border: 1px solid var(--terre); background: var(--terre-c); }
.decl.faite { border-color: var(--kaki-c, #c9d1b0); background: var(--kaki-cc); }
.decl b { display: block; } .decl small { color: var(--doux); }
.a-declarer { margin-top: 8px; }
.pastille-decl { position: absolute; left: 6px; bottom: 6px; background: #fff; font-size: .8rem; line-height: 1; padding: 4px 5px; border-radius: 99px; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.f-photo img { display: block; width: 42mm; max-height: 42mm; object-fit: cover; border-radius: 4px; }
.decl-doc > dl { display: grid; grid-template-columns: 34mm minmax(0, 1fr); gap: 2px 10px; margin: 6px 0 10px; font-size: 10pt; }
.decl-doc > dl dt { color: #6A4A30; } .decl-doc > dl dd { margin: 0; font-weight: 600; }
.decl-doc .f-parcelle dl { grid-template-columns: 30mm minmax(0, 1fr); }

/* ---------- bilan de terrain (prévu / trouvé, par où continuer) ---------- */
.bilan-duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin: 10px 0; }
.bilan-duo > div { background: var(--sable); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.bilan-duo b { font: 600 1.05rem var(--titre); color: var(--marron-f); } .bilan-duo small { color: var(--doux); font-size: .78rem; }
.bilan-terrain .lib { display: block; font: 600 .7rem var(--corps); letter-spacing: .06em; text-transform: uppercase; color: var(--terre); }
.bilan-plan { display: flex; gap: 14px; align-items: flex-start; }
.plan-secteurs { flex: none; border-radius: 6px; }
.bilan-suite { margin: 4px 0 0; padding-left: 20px; } .bilan-suite li { margin-bottom: 8px; }
.bilan-suite b { display: block; } .bilan-suite small { display: block; color: var(--doux); font-size: .8rem; margin-bottom: 3px; }
.bilan-suite .conseil { font-style: italic; margin-top: 3px; }
@media (max-width: 380px) { .bilan-plan { flex-direction: column; } }

/* ---------- objets perdus ---------- */
.perdu-ligne { gap: 12px; align-items: center; margin-bottom: 10px; }
.perdu-vig { width: 54px; height: 54px; flex: none; border-radius: 12px; background: var(--sable-2) center / cover; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; }
.a-remplir { max-width: 100%; }
.decl-doc { overflow-wrap: anywhere; }
.decl-doc .f-parcelle { flex-wrap: wrap; } .decl-doc .f-parcelle dl { flex: 1; min-width: 45mm; }

/* ============================================================
   VERSION ORDINATEUR (écrans de 1024 px et plus)
   La barre du bas devient un menu latéral, les pages s'élargissent,
   les fenêtres s'ouvrent au centre.
   ============================================================ */
.seul-large { display: none !important; }
@media screen and (min-width: 1024px) {
  :root { --cote: 236px; }
  .seul-large { display: revert !important; }
  .nav .seul-large { display: flex !important; }
  .nav { top: 0; bottom: 0; right: auto; width: var(--cote); height: auto; display: flex; flex-direction: column; align-items: stretch; gap: 2px;
    padding: 20px 12px 14px; border-top: 0; border-right: 1px solid var(--ligne); background: rgba(255, 252, 246, .9); overflow-y: auto; }
  .nav a { flex-direction: row; gap: 12px; font-size: .95rem; padding: 10px 12px; border-radius: 12px; transition: background .15s; }
  .nav a:hover { background: var(--sable-2); }
  .nav a.actif, .nav a.ouvert { background: var(--kaki-cc); color: var(--kaki-f); font-weight: 600; }
  .nav a svg { width: 22px; height: 22px; flex: none; }
  .nav .nav-logo { font: 600 1.7rem var(--titre); color: var(--marron-f); letter-spacing: -.02em; padding: 2px 12px 18px; }
  .nav .nav-logo:hover { background: none; }
  .nav .plus { order: 0; width: auto; height: auto; margin: 10px 0; border-radius: 14px; padding: 11px 14px; display: flex; align-items: center; justify-content: center; gap: 8px;
    color: #fff; font: 600 .95rem var(--corps); box-shadow: 0 4px 12px rgba(79, 84, 52, .3); }
  .nav .plus span.seul-large { display: inline !important; }
  .nav .plus svg { width: 20px; height: 20px; }
  .nav #btn-menu { margin-top: auto; }
  body.mode-fil .nav { border-right-color: rgba(255, 255, 255, .08); }
  body.mode-fil .nav .nav-logo { color: #fff; } body.mode-fil .nav a:hover { background: rgba(255, 255, 255, .08); }
  body.mode-fil .nav a.actif { background: rgba(255, 255, 255, .12); }
  body.mode-fil .nav .plus { box-shadow: none; }
  #app { margin-left: var(--cote); padding-bottom: 28px; }
  body:has(#nav.hidden) #app { margin-left: 0; }
  .page { max-width: 860px; padding: 30px 36px 12px; }
  .page.large { max-width: 1240px; }
  .entete h1 { font-size: 1.9rem; }
  /* éléments fixes décalés par le menu */
  .plein-ecran, .fil { inset: 0 0 0 var(--cote); }
  .fil-entete { left: var(--cote); }
  .bandeau-sortie { left: calc(var(--cote) + 20px); right: auto; bottom: 20px; width: min(460px, calc(100vw - var(--cote) - 40px)); }
  body.avec-bandeau #app { padding-bottom: 84px; }
  .toast { bottom: 32px; left: calc(50% + var(--cote) / 2); }
  .menu-panneau { right: auto; left: calc(var(--cote) + 10px); bottom: 12px; max-height: calc(100vh - 24px); transform-origin: bottom left; }
  .plein-ecran .leaflet-bottom { bottom: 150px; }
  /* fenêtres : au centre, plus larges pour les formulaires */
  .fenetre { max-width: 680px; max-height: 88vh; border-radius: 22px; padding: 14px 26px 24px; }
  .fenetre .poignee { display: none; }
  /* fil Découvrir : colonne centrale au format téléphone */
  .fil > * { max-width: 520px; margin-left: auto; margin-right: auto; }
  /* survol */
  a.carte:hover, button.carte:hover, .trouvaille:hover, .menu-item:hover, .raccourcis a:hover { box-shadow: 0 6px 18px rgba(59, 42, 27, .12); }
  .trouvaille { cursor: pointer; transition: transform .15s, box-shadow .15s; } .trouvaille:hover { transform: translateY(-2px); }
  .btn { cursor: pointer; }
}

/* ---------- version ordinateur : mises en page par écran ---------- */
.outils-trouv { align-items: center; gap: 10px; margin-bottom: 14px; }
.outils-trouv input[type="search"] { flex: 1; min-width: 0; height: 40px; border: 1px solid var(--ligne); border-radius: 999px; padding: 0 16px; background: var(--carte); font: inherit; }
.segment.mini { margin: 0; width: 190px; flex: none; } .segment.mini button { padding: 7px 6px; font-size: .88rem; }
.tab-carte { padding: 4px 6px 6px; overflow-x: auto; }
.tab-trouv { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tab-trouv th { text-align: left; padding: 0; border-bottom: 1px solid var(--ligne); background: var(--carte); }
.tab-trouv th button { border: 0; background: none; font: 600 .78rem var(--corps); letter-spacing: .04em; text-transform: uppercase; color: var(--doux); padding: 10px 10px; cursor: pointer; white-space: nowrap; }
.tab-trouv th button.actif { color: #8A4520; }
.tab-trouv td { padding: 8px 10px; border-bottom: 1px solid var(--sable-2); vertical-align: middle; }
.tab-trouv td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tab-trouv tbody tr { cursor: pointer; } .tab-trouv tbody tr:hover { background: var(--sable); }
.tab-trouv tbody tr:focus-visible { background: var(--sable); outline: 2px solid var(--kaki-f); outline-offset: -2px; }
.tab-trouv tbody tr:last-child td { border-bottom: 0; }
.tab-mini { display: block; width: 38px; height: 38px; border-radius: 8px; background: var(--sable-2) center / cover; }
.depot { outline: 3px dashed var(--terre); outline-offset: -6px; border-radius: 20px; background: rgba(180, 104, 58, .06); }
@media screen and (min-width: 1024px) {
  .outils-trouv { display: flex !important; }
  /* accueil : deux colonnes de cartes */
  .pg-accueil { column-count: 2; column-gap: 24px; }
  .pg-accueil > * { break-inside: avoid; }
  .pg-accueil > .entete { column-span: all; }
  .pg-accueil > .raccourcis { margin-bottom: 14px; }
  /* mes zones : cartes sur deux colonnes */
  .pg-zones .zones { display: grid; grid-template-columns: repeat(auto-fill, minmax(430px, 1fr)); gap: 12px 18px; align-items: start; }
  .pg-zones .zones > * { margin-bottom: 0; }
  .pg-zones .segment, .pg-trouvailles > .segment { max-width: 520px; }
  /* fiche d'une zone : la carte reste à gauche, les fiches défilent à droite */
  .page.pg-zone { max-width: 1320px; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: 26px; align-items: start; }
  .page.pg-zone > * { grid-column: 2; min-width: 0; }
  .page.pg-zone > .entete { grid-column: 1 / -1; }
  .page.pg-zone > .zone-carto { grid-column: 1; grid-row: 2 / span 60; position: sticky; top: 20px; height: calc(100vh - 140px) !important; min-height: 440px; margin-bottom: 0; }
  .page.pg-zone > #duo { grid-column: 2; max-height: none; overflow: visible; margin-bottom: 14px; }
  .pg-trouvailles .grille { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
}
/* sous 1024 px : toujours la grille, même si la vue Tableau a été choisie sur ordinateur */
@media (max-width: 1023px) { #tab-trouv { display: none !important; } .pg-trouvailles .grille { display: grid !important; } }

/* ---------- groupes ---------- */
.gp-blason { flex: none; display: grid; place-items: center; border-radius: 30%; color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.25), var(--ombre); line-height: 1; }
.gp-terre { background: linear-gradient(145deg, #C27A4A, #8E4D27); } .gp-kaki { background: linear-gradient(145deg, #7E8456, #4F5434); }
.gp-bronze { background: linear-gradient(145deg, #C9A15A, #8A6424); } .gp-ardoise { background: linear-gradient(145deg, #6D7B86, #3E4A54); }
.gp-bordeaux { background: linear-gradient(145deg, #9B4A4F, #622A33); } .gp-sable { background: linear-gradient(145deg, #D8C39C, #A88D5E); }
.gp-pastille { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }
.gp-liste { display: grid; gap: 10px; }
.gp-ligne { display: flex; gap: 12px; align-items: center; text-decoration: none; color: inherit; margin: 0 0 10px; }
.gp-liste .gp-ligne { margin: 0; }
.gp-nom { font-size: 1.02rem; }
.gp-pile { display: inline-flex; } .gp-pile > * { margin-left: -8px; box-shadow: 0 0 0 2px var(--carte); border-radius: 50%; } .gp-pile > *:first-child { margin-left: 0; }
.gp-nonlu { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--terre); color: #fff; font-size: .72rem; font-weight: 700; }
.gp-dernier { display: block; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gp-prochaine { display: block; margin-top: 3px; color: var(--kaki-f); font-weight: 600; }
.gp-vide { text-align: center; padding: 24px 18px; }
.gp-banniere { display: flex; gap: 14px; align-items: center; border-radius: var(--r); padding: 18px; color: #fff; margin-bottom: 12px; }
.gp-banniere h1 { margin: 0; font-size: 1.45rem; color: #fff; }
.gp-banniere .gp-blason { box-shadow: inset 0 0 0 2px rgba(255,255,255,.35), 0 4px 14px rgba(0,0,0,.18); background: rgba(255,255,255,.14); }
.gp-meta { font-size: .82rem; opacity: .9; margin-top: 2px; }
.gp-desc { margin: 8px 0 0; font-size: .88rem; opacity: .95; white-space: pre-wrap; }
.gp-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.gp-actions .btn { text-decoration: none; width: auto; flex: 0 1 auto; }
.gp-onglets button { padding: 9px 2px; font-size: .84rem; white-space: nowrap; }
.gp-onglets .gp-nonlu { min-width: 17px; height: 17px; font-size: .64rem; padding: 0 4px; }
.gp-titre { font-size: 1.05rem; margin: 18px 0 8px; }
.gp-sortie { gap: 12px; text-decoration: none; color: inherit; }
.gp-date { flex: none; width: 46px; text-align: center; border-radius: 12px; background: var(--terre-c); color: #8A4520; padding: 5px 0; line-height: 1.1; }
.gp-date b { display: block; font-size: 1.2rem; } .gp-date small { font-size: .7rem; text-transform: uppercase; }
.gp-activite { padding: 6px 14px; }
.gp-act { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--ligne); font-size: .88rem; }
.gp-act:last-child { border-bottom: 0; }
.gp-act-ic { width: 28px; height: 28px; flex: none; display: grid; place-items: center; background: var(--sable); border-radius: 50%; }
.gp-lien-tr { display: inline; padding: 0; margin: 0; font: inherit; }
.gp-membres { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.gp-membre { display: block; text-decoration: none; color: inherit; margin: 0; }
.gp-pseudo { font-size: 1rem; } .gp-titre-m { display: block; color: var(--terre); font-style: italic; font-size: .8rem; }
.gp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 10px 0 4px; background: var(--sable); border-radius: 12px; padding: 7px 4px; text-align: center; }
.gp-stats b { display: block; font-size: 1rem; color: var(--marron-f); } .gp-stats small { font-size: .68rem; color: var(--doux); }
.gp-derniere { display: block; font-size: .76rem; }
.gp-vit { display: flex; gap: 6px; margin-top: 8px; }
.gp-vit span { width: 52px; height: 52px; border-radius: 10px; background: var(--sable-2) center/cover; cursor: pointer; flex: none; }
.gp-vit .gp-plus { display: grid; place-items: center; font-size: .8rem; font-weight: 700; color: var(--marron); cursor: default; }
.gp-classement { padding: 6px 12px; }
.gp-rang { display: flex; gap: 10px; align-items: center; padding: 8px 4px; border-bottom: 1px solid var(--ligne); text-decoration: none; color: inherit; }
.gp-rang:last-child { border-bottom: 0; } .gp-rang.gp-moi { background: var(--kaki-cc); border-radius: 10px; }
.gp-place { width: 28px; text-align: center; font-weight: 700; color: var(--doux); }
.gp-barre { display: block; height: 5px; background: var(--sable-2); border-radius: 9px; margin-top: 4px; overflow: hidden; } .gp-barre i { display: block; height: 100%; background: var(--kaki); border-radius: 9px; }
.gp-val { white-space: nowrap; }
.gp-chat .gp-msgs { max-height: 58vh; min-height: 240px; }
.gp-sys { text-align: center; font-size: .78rem; color: var(--doux); margin: 8px auto; max-width: 90%; }
.gp-sys a { display: inline-block; margin-top: 2px; font-weight: 600; } .gp-sys small { display: block; font-size: .65rem; opacity: .7; }
.gp-photo { display: block; max-width: 220px; width: 100%; border-radius: 10px; margin: 2px 0 4px; cursor: zoom-in; }
.gp-tr { display: flex; gap: 8px; align-items: center; background: rgba(255,255,255,.55); border: 0; border-radius: 10px; padding: 6px; margin: 2px 0 4px; text-align: left; cursor: pointer; color: inherit; font: inherit; }
.msg.de-moi .gp-tr { background: rgba(255,255,255,.16); }
.gp-tr > span:first-child:not(:last-child) { width: 46px; height: 46px; border-radius: 8px; background: var(--sable-2) center/cover; flex: none; }
.gp-tr b { display: block; font-size: .84rem; color: inherit !important; } .gp-tr small { font-size: .7rem !important; opacity: .8; }
.gp-opt { border: 0; background: none; color: inherit; opacity: .55; cursor: pointer; padding: 0 2px; font-size: .8rem; }
.gp-rappel { margin: 6px 0; }
.gp-saisie { gap: 4px; } .gp-saisie .icone-btn { flex: none; cursor: pointer; }
.gp-emblemes { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.gp-emb { font-size: 1.3rem; border: 1px solid var(--ligne); background: #fff; border-radius: 10px; padding: 6px 0; cursor: pointer; }
.gp-emb.on { border-color: var(--kaki); box-shadow: 0 0 0 2px var(--kaki); }
.gp-menu { display: grid; gap: 10px; }
.gp-lien { width: 100%; padding: 10px; border: 1px solid var(--ligne); border-radius: 10px; font-size: .85rem; }
.gp-choix { max-height: 60vh; overflow-y: auto; }
.gp-invit { text-align: center; padding: 26px 18px; } .gp-invit .gp-blason { margin: 0 auto 10px; } .gp-invit h1 { margin: 4px 0; }
.icone-btn.petit { width: 32px; height: 32px; }

/* ---------- Découvrir : rubriques de la communauté au-dessus du fil ---------- */
.fil-entete { background: linear-gradient(rgba(20,15,10,.82) 0%, rgba(20,15,10,.6) 62%, transparent); padding-bottom: 14px; transition: padding .2s; }
.fil-titre { margin-bottom: 10px; }
.fil-sous { display: block; color: #e9dcc3; font-size: .74rem; margin-top: 1px; }
.fil-rubriques { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -12px 10px; padding: 0 12px 2px; }
.fil-rubriques::-webkit-scrollbar { display: none; }
.fil-rub { flex: 1 0 64px; min-width: 64px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none; color: #fff; padding: 9px 4px 8px; border-radius: 16px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(8px); transition: transform .12s, background .12s; }
.fil-rub:hover, .fil-rub:active { transform: translateY(-1px); background: rgba(255,255,255,.18); }
.fr-rond { position: relative; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-size: 1.3rem; box-shadow: 0 3px 10px rgba(0,0,0,.3), inset 0 0 0 2px rgba(255,255,255,.25); transition: width .2s, height .2s, font-size .2s; }
.fr-groupes .fr-rond { background: linear-gradient(145deg, #8C9460, #4F5434); }
.fr-entraide .fr-rond { background: linear-gradient(145deg, #7A8D9C, #3E4A54); }
.fr-sorties .fr-rond { background: linear-gradient(145deg, #D2AB62, #8A6424); }
.fr-rallyes .fr-rond { background: linear-gradient(145deg, #B05A5F, #622A33); }
.fr-perdus .fr-rond { background: linear-gradient(145deg, #D4895A, #8E4D27); }
.fr-nb { position: absolute; top: -4px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: #E4483A; color: #fff; font: 700 .64rem/18px var(--corps); text-align: center; font-style: normal; box-shadow: 0 0 0 2px rgba(20,15,10,.8); }
.fr-nom { font-weight: 700; font-size: .78rem; letter-spacing: .01em; }
.fr-info { font-size: .64rem; color: #e9dcc3; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; min-height: .8rem; transition: opacity .2s; }
.fil-cat-titre { flex: none; align-self: center; color: #fff; font-family: var(--titre); font-weight: 600; font-size: .95rem; margin-right: 2px; }
.fil-entete #cats { align-items: center; }
/* repliées pendant le défilement : des pastilles seules */
.fil-entete.replie { padding-bottom: 8px; }
.fil-entete.replie .fil-sous, .fil-entete.replie .fr-info, .fil-entete.replie .fr-nom { display: none; }
.fil-entete.replie .fil-rub { padding: 5px 4px; flex-basis: 50px; min-width: 50px; background: transparent; border-color: transparent; backdrop-filter: none; }
.fil-entete.replie .fr-rond { width: 34px; height: 34px; font-size: 1.05rem; }
.fil-entete.replie .fil-rubriques { margin-bottom: 4px; }
@media (min-width: 1024px) and (pointer: fine) { .fil-rub { flex: 0 0 96px; } }

/* ---------- ordinateur : barres de défilement discrètes, accueil tenu dans un écran ---------- */
@media screen and (min-width: 1024px) and (pointer: fine) {
  html, .fenetre, .menu-panneau, .tab-carte { scrollbar-width: thin; scrollbar-color: rgba(59, 42, 27, .16) transparent; }
  ::-webkit-scrollbar { width: 8px; height: 8px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: rgba(59, 42, 27, .16); border-radius: 8px; }
  ::-webkit-scrollbar-thumb:hover { background: rgba(59, 42, 27, .32); }
  body:has(.pg-accueil) #app { padding-bottom: 0; }
  .page.pg-accueil { padding-top: 22px; padding-bottom: 8px; }
  .pg-accueil > .entete { margin-bottom: 12px; }
}
/* écrans peu hauts (portable, navigateur avec barres d'outils) : cartes resserrées pour éviter le défilement */
@media screen and (min-width: 1024px) and (max-height: 820px) {
  .page.pg-accueil { padding-top: 14px; }
  .pg-accueil > .entete { margin-bottom: 8px; }
  .pg-accueil .accueil-av, .pg-accueil .accueil-av > * { width: 56px !important; height: 56px !important; }
  .pg-accueil .entete h1 { font-size: 1.6rem; }
  .pg-accueil .carte { padding-top: 12px; padding-bottom: 12px; margin-bottom: 12px; }
  .pg-accueil > .raccourcis { margin-bottom: 12px; }
  .pg-accueil .raccourcis a { padding-top: 10px; padding-bottom: 10px; }
}
.fil-exemple { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 99px; background: rgba(255,255,255,.2); color: #fff; font-size: .68rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; vertical-align: 1px; }
/* ordinateur : jamais de barre de défilement visible sur la page (la molette et le pavé tactile suffisent) */
@media screen and (min-width: 1024px) {
  html, body { scrollbar-width: none; -ms-overflow-style: none; }
  html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0; height: 0; display: none; }
  .fil, .tab-carte, .fil-rubriques, .defile, .gp-msgs, .msgs, .gp-choix { scrollbar-width: none; }
  .fil::-webkit-scrollbar, .tab-carte::-webkit-scrollbar, .defile::-webkit-scrollbar, .gp-msgs::-webkit-scrollbar, .msgs::-webkit-scrollbar, .gp-choix::-webkit-scrollbar { width: 0; height: 0; display: none; }
}
/* type de sortie : étiquette et couleur de la date */
.j-type { display: block; width: fit-content; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .7rem; font-weight: 700; letter-spacing: .02em; padding: 1px 8px; border-radius: 99px; margin-bottom: 3px; }
.prevue.type-publique .j-type { background: var(--terre-c); color: #8A4520; }
.prevue.type-groupe .j-type { background: var(--kaki-c); color: var(--kaki-f); }
.prevue.type-privee .j-type, .prevue.type-amis .j-type { background: var(--sable-2); color: var(--marron); }
.prevue.type-groupe .j-date.avenir { background: var(--kaki-c); } .prevue.type-groupe .j-date.avenir b { color: var(--kaki-f); }
.prevue.type-privee .j-date.avenir, .prevue.type-amis .j-date.avenir { background: var(--sable-2); } .prevue.type-privee .j-date.avenir b, .prevue.type-amis .j-date.avenir b { color: var(--marron); }
.prevue.type-publique { border-left: 4px solid var(--terre); } .prevue.type-groupe { border-left: 4px solid var(--kaki); }
.prevue.type-privee, .prevue.type-amis { border-left: 4px solid var(--sable-3); }
.case.a-cocher { outline: 2px solid var(--rouge); outline-offset: 4px; border-radius: 8px; }
.definition-nom { max-width: 360px; margin: -4px auto 16px; text-align: center; font: italic 500 .86rem/1.45 var(--titre); color: var(--doux); }
.definition-nom span[lang] { font-style: normal; font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif; color: #A8743A; font-size: 1.05rem; }

/* ---------- vitrine organisée : pièces maîtresses, filtres, collections, frise ---------- */
.vo-vedettes { margin-bottom: 14px; }
.vo-vedettes h3, .vo-collection h3 { font-size: 1rem; margin: 6px 0 8px; }
.vo-vedettes-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.trouvaille.vedette { box-shadow: 0 0 0 2px #C9A15A, var(--ombre); }
.trouvaille.vedette .photo { aspect-ratio: 1; }
.pastille-vedette { position: absolute; top: 6px; left: 6px; font-size: .9rem; background: rgba(255,252,246,.92); border-radius: 99px; padding: 1px 6px; }
.trouvaille .photo { position: relative; }
.vo-outils { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.vo-modes { width: auto !important; flex: none; }
.vo-modes button { padding: 7px 10px; font-size: .84rem; white-space: nowrap; }
.vo-filtres { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; flex: 1; }
.vo-filtres select { height: 34px; border: 1px solid var(--ligne); border-radius: 99px; padding: 0 10px; background: var(--carte); font: inherit; font-size: .84rem; color: var(--texte); max-width: 170px; }
.vo-collection { margin-bottom: 16px; }
.vo-frise { display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 12px; scrollbar-width: none; position: relative; }
.vo-frise::-webkit-scrollbar { display: none; }
.vo-ere { flex: 0 0 172px; position: relative; }
.vo-ere::before { content: ''; position: absolute; top: 9px; left: 0; right: -14px; height: 2px; background: linear-gradient(90deg, #C9A15A, #A8743A); }
.vo-ere:last-child::before { right: 0; }
.vo-ere-tete { position: relative; padding-top: 22px; margin-bottom: 8px; }
.vo-point { position: absolute; top: 3px; left: 0; width: 14px; height: 14px; border-radius: 50%; background: #C9A15A; box-shadow: 0 0 0 3px var(--sable); }
.vo-ere-tete b { display: block; font: 600 .95rem/1.2 var(--titre); color: var(--kaki-f); }
.vo-ere-tete small { color: var(--doux); font-size: .74rem; }
.vo-ere-pieces { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.vo-piece { position: relative; aspect-ratio: 1; border: 0; border-radius: 12px; background: var(--sable-2) center / cover; cursor: pointer; overflow: hidden; padding: 0; font-size: 1.2rem; }
.vo-piece span { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 5px 4px; font-size: .62rem; font-weight: 600; color: #fff; text-align: left; background: linear-gradient(transparent, rgba(30,22,14,.75)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 1024px) { .vo-ere { flex-basis: 210px; } .vo-ere-pieces { grid-template-columns: 1fr 1fr 1fr; } }
.vo-outils { display: block; }
.vo-modes { width: 100% !important; display: grid !important; grid-template-columns: repeat(3, 1fr); margin: 0 0 8px !important; }
.vo-filtres { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.vo-filtres::-webkit-scrollbar { display: none; }
.vo-filtres select { flex: none; max-width: 160px; }
.vo-filtres .lien-discret { flex: none; white-space: nowrap; }
@media (min-width: 1024px) { .vo-outils { display: flex; } .vo-modes { width: 360px !important; margin: 0 !important; } .vo-filtres { flex-wrap: wrap; } }
.ou-acheter { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: .8rem; color: var(--doux); margin: -2px 0 10px; }
.ou-acheter .lien-discret { margin: 0; padding: 0; font-size: .8rem; }
.ou-acheter small { margin-left: auto; font-size: .64rem; text-transform: uppercase; letter-spacing: .05em; background: var(--sable-2); padding: 1px 6px; border-radius: 99px; }
.pub-masquer { border: 0; background: rgba(255,255,255,.14); color: #fff; font: inherit; font-size: .74rem; padding: 6px 10px; border-radius: 99px; margin-right: 6px; cursor: pointer; }