/* Panache — styles de l'application (extraits d'index.html sans changement, audit priorité 8, étape 1) */
:root {
  /* PANACHE — jetons du guide de marque V1 */
  --panache-forest: #344C3D;
  --panache-sage: #87947B;
  --panache-sand: #C3B99F;
  --panache-mist: #E8E5D9;
  --panache-night: #303B36;
  --panache-accent: #D68A3A;
  --panache-radius-sm: 8px;
  --panache-radius-md: 14px;
  --panache-radius-lg: 20px;
  /* Interface : panneaux clairs (Brume), texte Nuit, boutons Forêt, orange réservé aux accents.
     Contrastes vérifiés sur Brume : texte 9,2:1, texte discret 4,8:1, accent texte 5:1. */
  --ink: #303B36;
  --muted: #5B665E;
  --panel: rgba(232, 229, 217, 0.97);
  --surface: #F4F2EB;
  --press: #DDD8C8;
  --line: rgba(48, 59, 54, 0.17);
  --brand: #344C3D;
  --brand-ink: #F4F2EB;
  --brand-press: #26392E;
  --accent: #D68A3A;
  --accent-ink: #303B36;
  --accent-texte: #8F5114;
  --cam: #5ec8ff;
  --salt: #e4dcff;
  --trail: #f4e27a;
  --terr: #ffd23f;
  --good: #256A40;
  --warn: #875000;
  --bad: #B3261E;
  --f-display: "Montserrat", "Arial", system-ui, sans-serif;
  --f-body: "Lato", "Arial", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --top: calc(env(safe-area-inset-top, 0px) + 10px);
  --sabv: env(safe-area-inset-bottom, 0px);
  color-scheme: light;
}
@font-face { font-family: "Montserrat"; src: url("polices/montserrat-600.woff") format("woff"); font-weight: 500 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Lato"; src: url("polices/lato-400.woff") format("woff"); font-weight: 300 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Lato"; src: url("polices/lato-700.woff") format("woff"); font-weight: 600 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Lato"; src: url("polices/lato-400-italique.woff") format("woff"); font-weight: 300 500; font-style: italic; font-display: swap; }
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; background: var(--panache-night); color: var(--ink); font-family: var(--f-body); font-size: 16px; -webkit-tap-highlight-color: transparent; }
button, input, select, textarea { font: inherit; color: inherit; }
button { touch-action: manipulation; cursor: pointer; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
#map { position: fixed; inset: 0; background: #6F7A68; }
.leaflet-container { font-family: var(--f-body); background: #6F7A68; }
.leaflet-control-attribution { background: rgba(0,0,0,.55) !important; color: #cfd6cf !important; font-size: 10px; }
.leaflet-control-attribution a { color: #fff !important; }
.leaflet-control-scale-line { background: rgba(0,0,0,.55); color: #fff; border-color: #fff; text-shadow: none; }
/* credits et echelle degages de la barre de gestes du telephone */
.leaflet-bottom.leaflet-left { margin-bottom: calc(env(safe-area-inset-bottom, 0px) + 18px); }
.leaflet-bottom.leaflet-right { margin-bottom: env(safe-area-inset-bottom, 0px); }

/* Vent (chip) */
.wx { position: fixed; top: var(--top); left: 10px; z-index: 900; display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); text-align: left; max-width: calc(100vw - 80px); }
.wx .dial { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); flex: none; }
.wx .dial svg { width: 26px; height: 26px; transition: transform .6s ease; }
.wx .v, .wx .s { display: block; }
.wx .v { font-family: var(--f-display); font-weight: 600; font-size: 20px; line-height: 1; font-variant-numeric: tabular-nums; }
.wx .v small { font-size: 14px; font-weight: 600; color: var(--muted); }
.wx .s { font-size: 12.5px; color: var(--muted); line-height: 1.25; margin-top: 2px; font-variant-numeric: tabular-nums; }
.wx.stale .v, .wx.stale .dial { opacity: .45; }
.wx .flag { color: var(--warn); font-weight: 600; }
.wx.fc { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.wx .fcl { color: var(--accent-texte); font-weight: 700; }
.fstrip { display: flex; gap: 6px; overflow-x: auto; padding: 4px 0 8px; margin: 6px 0 4px; scroll-snap-type: x proximity; }
.fcard { flex: none; width: 58px; padding: 6px 4px 7px; border-radius: 11px; border: 1px solid var(--line); background: var(--surface); text-align: center; font-variant-numeric: tabular-nums; scroll-snap-align: start; }
.fcard.on { border-color: var(--accent); background: rgba(214,138,58,.18); }
.fcard .d { display: block; font-size: 11.5px; color: var(--accent-texte); font-weight: 700; min-height: 13px; }
.fcard .t { display: block; font-size: 13px; color: var(--muted); }
.fcard svg { width: 22px; height: 22px; display: block; margin: 3px auto; }
.fcard .k { display: block; font-family: var(--f-display); font-weight: 600; font-size: 16px; }
.fcard .g { display: block; font-size: 12px; color: var(--muted); }
.report { border: 1px solid var(--line); border-left: 4px solid var(--muted); border-radius: 12px; padding: 10px 12px; margin: 12px 0; background: var(--surface); }
.report.good { border-left-color: var(--good); } .report.warn { border-left-color: var(--warn); } .report.bad { border-left-color: var(--bad); }
.report .v { font-family: var(--f-display); font-size: 18px; font-weight: 600; }
.report.good .v { color: var(--good); } .report.warn .v { color: var(--warn); } .report.bad .v { color: var(--bad); }
.report p { margin: 5px 0 0; font-size: 14.5px; }
.report p.info { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; padding: 8px 10px; border-radius: 10px; background: rgba(135,148,123,.16); color: var(--ink); font-size: 14px; }
.report p.info svg { width: 20px; height: 20px; flex: none; margin-top: 1px; fill: none; stroke: var(--panache-forest); stroke-width: 2; stroke-linecap: round; }
.report p.info svg .f { fill: var(--panache-forest); stroke: none; }
.report .tabs { display: flex; gap: 6px; float: right; }
.report .sal { margin-top: 10px; padding: 8px 10px; border-radius: 10px; background: rgba(135,148,123,.12); font-size: 14px; }
.report .sal ul { list-style: none; margin: 6px 0 0; padding: 0; }
.report .sal li { display: flex; gap: 8px; align-items: flex-start; margin: 4px 0; line-height: 1.38; }
.report .sal li i { flex: none; width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; background: var(--good); }
.report .sal li.tou i { background: var(--bad); }
.report .sal p { margin-top: 6px; font-size: 14px; font-weight: 600; }
fieldset.salchoix { border: 0; padding: 0; margin: 14px 0 0; min-width: 0; }
fieldset.salchoix legend { padding: 0; font-size: 13.5px; font-weight: 700; color: var(--muted); margin-bottom: 4px; }
fieldset.salchoix small { color: var(--muted); font-weight: 400; }
.report .tabs button { min-height: 44px; padding: 4px 12px; border-radius: 8px; border: 1px solid var(--line); background: transparent; font-size: 12.5px; font-weight: 600; }
.report .tabs button.on { border-color: var(--brand); background: var(--brand); color: var(--brand-ink); }
.hours { display: flex; gap: 2px; overflow-x: auto; margin: 10px 0 2px; padding-bottom: 2px; }
.hr { flex: 1 0 24px; text-align: center; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.hr i { display: block; height: 9px; border-radius: 3px; margin-bottom: 3px; background: var(--muted); }
.hr.g i { background: var(--good); } .hr.m i { background: var(--warn); } .hr.b i { background: var(--bad); }
.rank { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; margin-bottom: 6px; border-radius: 11px; border: 1px solid var(--line); background: var(--surface); text-align: left; }
.rank i { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--muted); }
.rank i.good { background: var(--good); } .rank i.warn { background: var(--warn); } .rank i.bad { background: var(--bad); }
.rank small { display: block; color: var(--muted); }

/* Outils */
#tools { position: fixed; top: var(--top); right: 10px; z-index: 900; display: flex; flex-direction: column; gap: 8px; }
.tool { width: 46px; height: 46px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); box-shadow: 0 2px 8px rgba(30,40,34,.18); display: grid; place-items: center; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.tool svg { width: 23px; height: 23px; stroke: var(--brand); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tool:active { transform: scale(.96); background: var(--press); }
.tool { position: relative; }
.tool .dot { position: absolute; top: 5px; right: 5px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--panache-mist); display: none; }
.tool .dot.ok { display: block; background: var(--good); }
.tool .dot.pending { display: block; background: var(--warn); }
.tool .dot.error { display: block; background: var(--bad); }
#compassSvg { transition: transform .15s linear; }
#compassSvg path { stroke: none; } #compassSvg .nord { fill: var(--accent); } #compassSvg .sud { fill: var(--brand); }
.tool svg .f, #chatBtn svg .f { fill: var(--brand); stroke: none; }
/* État actif : panneau ou mode correspondant ouvert */
.tool.on, #chatBtn.on { background: var(--brand); border-color: var(--brand); }
.tool.on svg, #chatBtn.on svg { stroke: var(--brand-ink); }
.tool.on svg .f, #chatBtn.on svg .f, .tool.on #compassSvg .sud { fill: var(--brand-ink); }
#windCanvas { position: fixed; left: 0; top: 0; z-index: 400; pointer-events: none; }
.syncline { display: flex; align-items: center; gap: 8px; font-size: 14px; margin: 6px 0 10px; }
.syncline i { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); flex: none; }
.syncline i.ok { background: var(--good); } .syncline i.pending { background: var(--warn); } .syncline i.error { background: var(--bad); }
input[type=password] { width: 100%; padding: 11px 12px; border-radius: 11px; border: 1px solid var(--line); background: #FBFAF6; font-size: 16px; }
.big-up { font-family: var(--f-display); font-size: 28px; font-weight: 600; font-variant-numeric: tabular-nums; }
.fab { position: fixed; right: 14px; bottom: calc(var(--sabv) + 26px); z-index: 900; width: 60px; height: 60px; border-radius: 18px; border: 0; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; box-shadow: 0 6px 18px rgba(30,40,34,.35); }
.fab:active { transform: scale(.96); filter: brightness(.94); }
/* Mode terrain : commandes de 56 à 64 px pour les gants (audit, accessibilité) */
.terrain .tool { width: 58px; height: 58px; border-radius: 16px; } .terrain .tool svg { width: 28px; height: 28px; }
.terrain #tools { gap: 10px; }
.terrain .fab { width: 72px; height: 72px; border-radius: 22px; }
.terrain #chatBtn { min-width: 64px; min-height: 64px; }
.terrain .btn, .terrain .seg button { min-height: 56px; font-size: 17px; }
.terrain .fcard { min-width: 64px; }
.terrain #sheetClose { width: 56px; height: 56px; }
.fab svg { width: 28px; height: 28px; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; fill: none; }
body.sheet-open .fab, body.moding .fab { display: none; }

/* Barre de mode (placement, tracé) */
#modebar { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--sabv) + 22px); z-index: 950; width: min(560px, calc(100vw - 20px)); background: var(--panel); border: 1px solid var(--accent); border-radius: 16px; padding: 12px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 8px 24px rgba(30,40,34,.3); }
#modebar p { margin: 0 0 10px; font-weight: 600; }
#modebar p small { display: block; font-weight: 400; color: var(--muted); }

/* Panneau */
#sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; max-height: 64%; overflow: auto; overscroll-behavior: contain; background: var(--panel); border-top: 1px solid var(--line); border-radius: 20px 20px 0 0; padding: 4px 16px calc(env(safe-area-inset-bottom, 0px) + 18px); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transform: translateY(105%); transition: transform .22s ease; box-shadow: 0 -8px 26px rgba(30,40,34,.25); }
#sheet.open { transform: none; }
#sheet .grab { position: sticky; top: 0; z-index: 1; height: 24px; margin: 0 -16px; touch-action: none; cursor: grab; }
#sheet .grab::before { content: ''; display: block; width: 44px; height: 5px; border-radius: 4px; background: var(--panache-sage); margin: 8px auto 0; }
#sheet.glisse { transition: none !important; }
#sheet .chathead, #sheet #dHead, #sheet > #sheetBody > .kicker:first-child { touch-action: none; }   /* l'en-tête se glisse aussi vers le bas */
.msgmenu .mm .grab { height: 22px; margin: -10px -14px 2px; touch-action: none; cursor: grab; }
.msgmenu .mm .grab::before { content: ''; display: block; width: 44px; height: 5px; border-radius: 4px; background: var(--panache-sage); margin: 8px auto 0; }
.msgmenu .mm.glisse { transition: none !important; }
.msgmenu .mm { transition: transform .2s ease; }
#sheetClose { position: sticky; top: 0; float: right; width: 40px; height: 40px; margin: 0 -6px 0 8px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); font-size: 22px; line-height: 1; z-index: 2; }
@media (orientation: landscape) and (min-width: 700px) {
  #sheet { top: 0; left: auto; width: 390px; max-height: none; border-radius: 18px 0 0 18px; border-top: 0; border-left: 1px solid var(--line); transform: translateX(105%); padding-top: calc(env(safe-area-inset-top, 0px) + 8px); }
  #sheet .grab { display: none; }
  body.sheet-open #tools { right: 400px; }
  #sheet.chat { height: auto; }
}
@media (prefers-reduced-motion: reduce) { #sheet, .wx .dial svg { transition: none; } }
@media (min-width: 700px) and (orientation: portrait) { #sheet { max-width: 620px; margin: 0 auto; border-left: 1px solid var(--line); border-right: 1px solid var(--line); } }
/* Marqueurs de la carte : zone tactile élargie autour du symbole (44 px) */
.leaflet-marker-icon.pt::before { content: ''; position: absolute; inset: -7px; border-radius: 50%; }
/* Messages du groupe */
#chatBtn { position: fixed; left: 14px; bottom: calc(var(--sabv) + 30px); z-index: 900; width: 54px; height: 54px; border-radius: 17px; border: 1px solid var(--line); background: var(--panel); box-shadow: 0 2px 8px rgba(30,40,34,.18); display: grid; place-items: center; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
#chatBtn[hidden] { display: none; }
#chatBtn svg { width: 26px; height: 26px; fill: none; stroke: var(--brand); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
#chatBadge { position: absolute; top: -5px; right: -5px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--bad); color: #fff; font: 700 12px/20px var(--f-body); text-align: center; }
#chatBadge[hidden] { display: none; }
body.moding #chatBtn, body.searching #chatBtn { visibility: hidden; }
body.has-chat .leaflet-bottom.leaflet-left { left: 76px; }   /* l'échelle passe à droite de la bulle */
#sheet.chat { height: 88%; max-height: none; overflow: hidden; display: flex; flex-direction: column; padding-bottom: 0; }   /* la barre d'écriture reste toujours en bas */
#sheet.chat .grab, #sheet.chat #sheetBody > * { flex: none; }
#sheet.chat #sheetBody > .chatlist { flex: 1 1 0; min-height: 60px; }
#sheet.chat #sheetClose { align-self: flex-end; flex: none; }
#sheet.chat #sheetBody { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.chatlist { flex: 1; min-height: 60px; overflow-y: auto; padding: 4px 0 8px; display: flex; flex-direction: column; gap: 3px; overscroll-behavior: contain; }
.cday { align-self: center; font-size: 13px; font-weight: 700; color: var(--muted); margin: 10px 0 4px; }
.cmsg { max-width: 82%; align-self: flex-start; }
.cmsg.moi { align-self: flex-end; }
.cmsg .who { font-size: 12.5px; font-weight: 700; color: var(--muted); margin: 6px 0 2px 10px; }
.cmsg .bub { padding: 8px 12px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15.5px; line-height: 1.35; }
.cmsg.moi .bub { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.cmsg .t { font-size: 12px; color: var(--muted); margin: 2px 10px 0; }
.cmsg.moi .t { text-align: right; }
.cmsg.attente .bub { opacity: .55; }
.emo { width: 1.7em; height: 1.7em; vertical-align: -0.45em; margin: 0 1px; }
.cmsg .bub.emo-seul { background: transparent !important; border-color: transparent !important; padding: 0 2px; }
.cmsg .bub.emo-seul .emo { width: 84px; height: 84px; vertical-align: top; }
.cmsg .bub.a-photo { padding: 3px; }
.cmsg .bub.a-photo > span { display: block; padding: 5px 9px 4px; }
.cphoto { display: block; padding: 0; border: 0; background: rgba(48,59,54,.12); border-radius: 13px; overflow: hidden; min-width: 120px; min-height: 90px; }
.cphoto img { display: block; max-width: min(240px, 62vw); max-height: 320px; }
.vu { display: flex; align-self: flex-end; align-items: center; gap: 3px; margin: 1px 4px 2px; padding: 2px 0; background: none; border: 0; color: var(--muted); }
.vu i { width: 17px; height: 17px; border-radius: 50%; font: 700 10px/17px var(--f-body); font-style: normal; text-align: center; color: #fff; box-shadow: 0 0 0 1.5px var(--panache-mist); }
.vu .noms { font-size: 12px; margin-right: 3px; }
.cico { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--brand); cursor: pointer; }
.cico:active { background: var(--press); }
.cico .emo-ico { width: 32px; height: 32px; }
.cico.on { background: var(--press); border-color: var(--brand); }
.btn.envoyer svg { display: none; }
@media (max-width: 420px) { .btn.envoyer { padding: 0; width: 48px; flex: none; display: grid; place-items: center; } .btn.envoyer svg { display: block; } .btn.envoyer span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }
.clieu { display: inline; border: 0; padding: 1px 6px; margin: 0 1px; border-radius: 8px; background: rgba(52,76,61,.12); color: inherit; font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.cmsg.moi .clieu { background: rgba(255,255,255,.22); }
.clieu.mention { background: none; padding: 0; font-weight: inherit; text-decoration-style: dotted; }
.lieumenu { max-height: 42vh; overflow: auto; display: grid; gap: 2px; padding: 6px 0; border-top: 1px solid var(--line); background: var(--panel); }
.lieumenu .lm-t { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 8px 12px 2px; }
.lieumenu button { text-align: left; min-height: 44px; padding: 10px 12px; border: 0; border-radius: 10px; background: none; color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }
.lieumenu button:active { background: var(--press); } .lieumenu small { color: var(--muted); font-weight: 600; margin-right: 4px; }
.lieu-pulse { width: 28px; height: 28px; border-radius: 50%; background: rgba(217,130,43,.35); border: 3px solid #d9822b; box-shadow: 0 0 0 0 rgba(217,130,43,.6); animation: lieuPulse 1.6s ease-out infinite; }
@keyframes lieuPulse { to { box-shadow: 0 0 0 18px rgba(217,130,43,0); } }
@media (prefers-reduced-motion: reduce) { .lieu-pulse { animation: none; } }
ul.cmention { list-style: none; margin: 6px 0 8px; padding: 0; display: grid; gap: 8px; } ul.cmention li { padding: 8px 10px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); font-size: 14px; line-height: 1.4; }
.chatbar .btn { padding-left: 14px; padding-right: 14px; }
.emopick { padding: 8px 0 2px; border-top: 1px solid var(--line); }
.emopick[hidden] { display: none; }
.emopick input[type=search] { width: 100%; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(48,59,54,.28); background: #FBFAF6; font-size: 15px; }
.emotabs { display: flex; gap: 4px; overflow-x: auto; padding: 6px 0 2px; }
.emotabs button { flex: none; width: 46px; height: 42px; display: grid; place-items: center; border: 1px solid transparent; border-radius: 12px; background: transparent; }
.emotabs button.on { background: var(--surface); border-color: var(--line); box-shadow: inset 0 -3px 0 var(--brand); }
.emotabs .emo-tab { width: 32px; height: 32px; }
.emotabs .uni-tab { font-size: 24px; line-height: 1; }
.emonom { font: 600 12.5px/1.2 var(--f-display); color: var(--muted); margin: 4px 2px 6px; }
.emogrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); gap: 2px; max-height: min(210px, 24vh); overflow-y: auto; overscroll-behavior: contain; }
.emogrid button { padding: 3px; border: 0; border-radius: 12px; background: transparent; min-height: 54px; }
.emogrid button:active { background: var(--press); }
.emogrid .emo-big { width: 48px; height: 48px; display: block; margin: 0 auto; }
.emogrid .uni { font-size: 28px; line-height: 1; }
.emopick .hint { margin: 4px 0 0; font-size: 12.5px; }
.pviewer { position: fixed; inset: 0; z-index: 4000; background: rgba(0,0,0,.94); display: grid; place-items: center; }
.pviewer img { max-width: 100vw; max-height: 100vh; object-fit: contain; }
.pviewer button { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 10px); right: 10px; width: 44px; height: 44px; border-radius: 13px; border: 1px solid rgba(255,255,255,.25); background: rgba(0,0,0,.4); color: #fff; font-size: 26px; line-height: 1; }
.ecrit { display: flex; align-items: center; gap: 8px; padding: 2px 4px 6px; font-size: 13px; color: var(--muted); }
.ecrit[hidden] { display: none; }
.ecrit .pts { display: inline-flex; gap: 3px; padding: 7px 9px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.ecrit .pts i { width: 6px; height: 6px; border-radius: 50%; background: var(--panache-sage); animation: ecrit 1.2s infinite ease-in-out; }
.ecrit .pts i:nth-child(2) { animation-delay: .15s; } .ecrit .pts i:nth-child(3) { animation-delay: .3s; }
@keyframes ecrit { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-3px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ecrit .pts i { animation: none; opacity: .8; } }
.chatbar { display: flex; gap: 8px; align-items: flex-end; padding: 8px 0 calc(env(safe-area-inset-bottom, 0px) + 10px); border-top: 1px solid var(--line); background: var(--panel); }
.chatbar textarea { flex: 1; min-height: 44px; max-height: 130px; margin: 0; resize: none; font-size: 16px; padding: 10px 12px; border-radius: 14px; }
.chatbar .btn { flex: none; height: 44px; }
/* Données et réglages : menu de sections */
.dmenu { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 10px 0 14px; clear: both; }
.dmenu[hidden], .dsec[hidden] { display: none; }
.drow { display: flex; align-items: center; gap: 12px; width: 100%; min-width: 0; min-height: 64px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-align: left; cursor: pointer; }
.drow:active { background: var(--press); }
.drow .ico { flex: none; color: var(--brand); }
.drow span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.drow b { font: 700 15.5px/1.2 var(--f-body); }
.drow small { font-size: 13px; line-height: 1.25; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drow .dpoint { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(214, 138, 58, .25); }
.drow .chev { flex: none; color: var(--muted); }
.dretour { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; margin: 0 0 0 -8px; padding: 4px 10px 4px 4px; border: 0; border-radius: 10px; background: transparent; color: var(--accent-texte); font: 600 12.5px/1 var(--f-display); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.dretour:active { background: var(--press); }
.dsec > h3:first-child { margin-top: 4px; padding-top: 0; border-top: 0; }
.dsec.sans-titre > h3:first-child { display: none; }
/* Fond de la discussion */
.chathead { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.chathead .kicker { margin: 0; }
.fondbtn { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--brand); }
.chatfond { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; pointer-events: none; background: var(--panache-night); }
.chatfond img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.chatfond .flou { object-fit: cover; object-position: var(--fx, 50%) 50%; filter: blur(22px) saturate(1.15) brightness(.9); transform: scale(1.12); }
.chatfond .net { inset: auto; left: 0; right: 0; top: 42%; width: 100%; height: auto; transform: translateY(-42%); -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 82%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 82%, transparent 100%); }
.chatfond.plein .flou { display: none; }
.chatfond.plein .net { inset: 0; top: 0; height: 100%; transform: none; object-fit: cover; object-position: var(--fx, 50%) 50%; -webkit-mask-image: none; mask-image: none; }
#sheet.chat.a-fond { background: var(--panache-night); }
#sheet.chat.a-fond #sheetBody, #sheet.chat.a-fond .grab { position: relative; z-index: 1; }
#sheet.chat.a-fond #sheetClose { z-index: 2; }
.a-fond .chathead .kicker, .a-fond #sheetBody > label.check, .a-fond .cday, .a-fond .cmsg .t, .a-fond .cmsg .who, .a-fond .vu .noms, .a-fond .chatlist > .hint, .a-fond .ecrit > span:last-child { width: fit-content; max-width: 100%; padding: 2px 9px; border-radius: 10px; background: rgba(244, 242, 235, .9); color: var(--ink); }
.a-fond #sheetBody > label.check { align-self: flex-start; margin-top: 6px !important; }
.a-fond .cmsg.moi .t { margin-left: auto; }
.a-fond .cmsg .bub { box-shadow: 0 1px 4px rgba(0, 0, 0, .3); }
.a-fond .cmsg .bub.emo-seul { box-shadow: none; }
.a-fond .cite { background: rgba(244, 242, 235, .95); color: var(--muted); opacity: 1; box-shadow: 0 1px 4px rgba(0, 0, 0, .3); }
.a-fond .cmsg.attente .bub { opacity: .85; }
.chatfond::after { content: ''; position: absolute; inset: 0; background: rgba(20, 26, 23, .16); }
.fondcat { margin: 12px 2px 6px; font: 600 12.5px/1.2 var(--f-display); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.a-fond .emopick { background: var(--panel); padding-left: 8px; padding-right: 8px; margin: 0 -8px; }
.a-fond .vu { background: rgba(244, 242, 235, .9); border-radius: 12px; padding: 2px 6px; }
.tuiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tuile { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 0; border: 2px solid transparent; border-radius: 14px; background: transparent; text-align: center; cursor: pointer; font: 600 12px/1.2 var(--f-body); color: var(--ink); }
.tuile img, .tuile i { display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 11px; background: var(--surface); border: 1px solid var(--line); color: var(--brand); font-style: normal; font-size: 11px; }
.tuile i.uni { background: var(--panel); }
.tuile i.indispo { color: var(--muted); padding: 6px; }
.tuile.on { border-color: var(--accent); }
label.tuile { margin: 0; font-size: 12px; font-weight: 600; }
.tuile span { padding: 0 2px 4px; }
/* Répondre, réagir, modifier */
.cmsg .bub { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.cmsg.flash .bub { box-shadow: 0 0 0 3px var(--accent); transition: box-shadow .3s; }
.cite { display: block; max-width: 100%; margin: 2px 0 -6px; padding: 5px 10px 10px; border: 0; border-left: 3px solid var(--panache-sage); border-radius: 12px 12px 4px 4px; background: rgba(48,59,54,.08); color: var(--muted); font-size: 13px; line-height: 1.3; text-align: left; opacity: .9; }
.cmsg.moi .cite { margin-left: auto; border-left: 0; border-right: 3px solid var(--panache-sage); text-align: right; }
.cite b { display: block; font-size: 12px; color: var(--ink); }
.cite span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-wrap; overflow-wrap: anywhere; }
.cite .emo { width: 1.3em; height: 1.3em; }
.reacs { display: flex; flex-wrap: wrap; gap: 4px; margin: -5px 8px 0; position: relative; }
.cmsg.moi .reacs { justify-content: flex-end; }
.reacs .rc { display: inline-flex; align-items: center; gap: 3px; min-height: 28px; padding: 1px 8px; border-radius: 14px; border: 1px solid var(--line); background: var(--panache-mist); box-shadow: 0 1px 3px rgba(30,40,34,.18); font-size: 15px; line-height: 1; color: var(--ink); }
.reacs .rc b { font: 700 12px/1 var(--f-body); color: var(--muted); }
.reacs .rc.on { border-color: var(--brand); background: #DDE3D6; }
.reacs .rc .emo { width: 20px; height: 20px; margin: 0; vertical-align: middle; }
.repbar { display: flex; align-items: center; gap: 10px; padding: 8px 4px 8px 12px; border-top: 1px solid var(--line); border-left: 4px solid var(--accent); background: var(--surface); font-size: 13.5px; }
.repbar[hidden] { display: none; }
.repbar > div { flex: 1; min-width: 0; }
.repbar b { display: block; color: var(--ink); }
.repbar span { display: block; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.repbar span .emo { width: 1.3em; height: 1.3em; }
.repbar button { flex: none; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); font-size: 22px; line-height: 1; color: var(--ink); }
button, #modal, .msgmenu { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.liens-legaux { margin: 0 0 8px; padding-left: 20px; }
.lien { color: var(--brand); font-weight: 700; }
.liens-legaux li { margin: 4px 0; }
.liens-legaux a { color: var(--brand); font-weight: 700; }
.etapes-suppr { padding-left: 20px; margin: 4px 0 8px; }
.etapes-suppr li { margin: 4px 0; }
.retour-suppr { margin: 10px 0; padding: 10px 12px; border-radius: 12px; background: #FBEAEA; border: 1px solid #E3B1AD; font-size: 14.5px; }
.retour-suppr[hidden] { display: none; }
.bloques { list-style: none; padding: 0; margin: 0 0 10px; }
.bloques li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.bloques .btn { min-height: 40px; }
.msgmenu { position: fixed; inset: 0; z-index: 1180; background: rgba(20,26,23,.45); display: flex; flex-direction: column; justify-content: flex-end; }
.msgmenu .mm { background: var(--panache-mist); border-radius: 20px 20px 0 0; padding: 12px 14px calc(env(safe-area-inset-bottom, 0px) + 12px); box-shadow: 0 -8px 26px rgba(30,40,34,.3); max-height: 80%; overflow-y: auto; }
.mm .apercu { margin: 0 0 10px; padding: 8px 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); font-size: 14px; color: var(--ink); max-height: 4.2em; overflow: hidden; white-space: pre-wrap; overflow-wrap: anywhere; }
.mm .apercu b { display: block; font-size: 12px; color: var(--muted); }
.mm .apercu .emo { width: 1.4em; height: 1.4em; }
.mm .rapide { display: flex; justify-content: space-between; gap: 4px; padding: 6px; border-radius: 30px; background: var(--surface); border: 1px solid var(--line); margin-bottom: 10px; }
.mm .rapide button { flex: 1; min-width: 0; height: 46px; border: 0; border-radius: 23px; background: transparent; font-size: 27px; line-height: 1; display: grid; place-items: center; }
.mm .rapide button.on { background: #DDE3D6; box-shadow: inset 0 0 0 2px var(--brand); }
.mm .rapide button:active { background: var(--press); }
.mm .rapide .plus { font: 600 26px/1 var(--f-display); color: var(--brand); }
.mm .tous { display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 2px; max-height: 190px; overflow-y: auto; margin-bottom: 10px; }
.mm .tous[hidden] { display: none; }
.mm .tous button { height: 48px; border: 0; border-radius: 12px; background: transparent; font-size: 26px; line-height: 1; display: grid; place-items: center; }
.mm .tous .emo { width: 40px; height: 40px; margin: 0; }
.mm .qui { margin: 0 2px 10px; font-size: 13.5px; color: var(--muted); }
.mm .acts { display: grid; gap: 6px; }
.mm .acts button { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); font: 700 15.5px/1.2 var(--f-body); color: var(--ink); text-align: left; }
.mm .acts button svg { flex: none; color: var(--brand); }
.mm .acts button.danger { color: var(--bad); }
.mm .acts button.danger svg { color: var(--bad); }
.mm .acts button.annuler { justify-content: center; background: transparent; }
/* Soleil et heures légales de chasse */
.wx .sun { display: flex; align-items: center; gap: 4px; margin-top: 3px; color: var(--ink); font-weight: 600; }
.wx .sun:empty { display: none; }
.wx .sun svg { width: 13px; height: 13px; flex: none; }
.wx .sun.on { color: var(--good); } .wx .sun.off { color: var(--warn); }
.suncard { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin: 10px 0 4px; background: var(--surface); }
.suncard .now { font-family: var(--f-display); font-size: 17px; font-weight: 600; }
.suncard .now.on { color: var(--good); } .suncard .now.off { color: var(--warn); }
.suncard table { width: 100%; border-collapse: collapse; margin-top: 6px; font-variant-numeric: tabular-nums; font-size: 14.5px; }
.suncard th { text-align: left; font-weight: 700; color: var(--muted); font-size: 12.5px; padding: 4px 4px 2px 0; }
.suncard td { padding: 4px 4px 4px 0; border-top: 1px solid var(--line); }
.suncard td b { color: var(--ink); }
/* Zones de chasse */
#zoneChip { position: fixed; top: calc(var(--top) + 64px); left: 10px; z-index: 900; display: flex; align-items: center; gap: 6px; max-width: calc(100vw - 90px); padding: 7px 9px 7px 9px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font: 700 14px/1.1 var(--f-body); box-shadow: 0 2px 8px rgba(30,40,34,.18); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
#zoneChip[hidden] { display: none; }
#zoneChip svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--brand); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
#zoneChip svg.car { stroke: var(--muted); width: 16px; height: 16px; }
#zoneChip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.searching #zoneChip, body.moding #zoneChip { visibility: hidden; }
.zlist { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 4px; }
.zgrp { margin: 8px 0 0; font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-texte); }
.zgrp:first-child { margin-top: 0; }
.etapes { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.etapes p { margin: 4px 0; }
.zrow { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 11px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); }
.zrow.on { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.zrow b { display: block; font-size: 16px; }
.zrow small { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
.zrow .tag { margin-left: auto; flex: none; font-size: 12px; font-weight: 700; color: var(--brand); text-transform: uppercase; letter-spacing: .04em; }
/* Recherche de lieux */
#q::placeholder { color: var(--muted); opacity: .85; }
#search { position: fixed; top: var(--top); left: 10px; right: 10px; z-index: 1100; max-width: 560px; margin: 0 auto; }
#search .sbar { display: flex; align-items: center; gap: 4px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 4px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 8px 24px rgba(30,40,34,.28); }
#search input { flex: 1; min-width: 0; margin: 0; border: 0; background: transparent; font-size: 17px; padding: 10px 6px; color: var(--ink); outline: none; }
#search .sb-btn { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border: 0; border-radius: 11px; background: transparent; }
#search .sb-btn.go { background: var(--brand); }
#search .sb-btn svg { width: 23px; height: 23px; fill: none; stroke: var(--brand); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#search .sb-btn.go svg { stroke: var(--brand-ink); }
.sres { margin-top: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; max-height: min(62vh, 520px); overflow: auto; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.sres:empty { display: none; }
.sres .it { display: flex; gap: 10px; align-items: center; width: 100%; text-align: left; padding: 11px 12px; border: 0; border-bottom: 1px solid var(--line); background: transparent; }
.sres .it:last-child { border-bottom: 0; }
.sres .it b { display: block; font-size: 16px; }
.sres .it small { display: block; color: var(--muted); font-size: 13px; margin-top: 1px; }
.sres .it .ty { flex: none; min-width: 64px; font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--accent-texte); }
.sres .msg { padding: 12px; color: var(--muted); font-size: 14px; }
body.searching #wx { visibility: hidden; }
.pin { width: 30px; height: 40px; }
.pin-lbl { position: absolute; left: 50%; top: -22px; transform: translateX(-50%); white-space: nowrap; background: rgba(17,21,19,.9); color: #fff; font: 600 12.5px/1 var(--f-body); padding: 4px 7px; border-radius: 7px; border: 1px solid var(--accent); }
.fond-topo .cl-lbl { color: #6B4F2E; text-shadow: 0 0 3px #fff, 0 0 2px #fff; }
/* Courbes de niveau */
.cl-lbl { font: 700 11px/1 var(--f-body); color: #F3E6C4; text-shadow: 0 0 3px #000, 0 0 2px #000; white-space: nowrap; transform: translate(-50%, -50%); pointer-events: none; font-variant-numeric: tabular-nums; }
/* Visite guidée */
#tour { position: fixed; inset: 0; z-index: 1250; }
#tour .hole { position: fixed; border-radius: 14px; box-shadow: 0 0 0 200vmax rgba(0,0,0,.62); outline: 2px solid var(--accent); outline-offset: 2px; pointer-events: none; transition: left .25s ease, top .25s ease, width .25s ease, height .25s ease; }
#tour .hole.none { outline: 0; }
#tour .tip { position: fixed; left: 12px; right: 12px; max-width: 420px; margin: 0 auto; background: var(--panache-mist); border: 1px solid var(--accent); border-radius: 16px; padding: 12px 16px 12px; box-shadow: 0 12px 34px rgba(0,0,0,.4); transition: top .25s ease; }
#tour .tip .n { font-size: 12.5px; color: var(--accent-texte); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
#tour .tip .ou { display: flex; gap: 6px; align-items: flex-start; margin: 0 40px 4px 0; padding: 6px 9px; border-radius: 10px; background: rgba(135,148,123,.18); font-size: 13.5px; line-height: 1.35; color: var(--ink); }
#tour .tip .ou[hidden] { display: none; }
#tour .tip .ou svg { width: 16px; height: 16px; flex: none; margin-top: 1px; fill: none; stroke: var(--accent-texte); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
#tour .tip h3 { margin: 2px 40px 6px 0; font-family: var(--f-display); font-weight: 600; font-size: 20px; line-height: 1.15; }
#tour .tip p { margin: 0; font-size: 15px; line-height: 1.42; }
#tour .tip .nav { display: flex; gap: 8px; margin-top: 12px; }
#tour .tip .nav .btn { flex: 1; }
#tour .tip .x { position: absolute; top: 6px; right: 6px; width: 44px; height: 44px; border-radius: 11px; border: 1px solid var(--line); background: var(--surface); font-size: 22px; line-height: 1; color: var(--ink); }
#tour .bar { height: 3px; border-radius: 2px; background: rgba(48,59,54,.12); margin: 6px 0 8px; overflow: hidden; }
#tour .bar i { display: block; height: 100%; background: var(--accent); transition: width .25s ease; }
@media (prefers-reduced-motion: reduce) { #tour .hole, #tour .tip, #tour .bar i { transition: none; } }


h2 { font-family: var(--f-display); font-weight: 600; font-size: 23px; line-height: 1.22; margin: 6px 0 14px; text-wrap: balance; letter-spacing: 0; color: var(--panache-forest); }
h3 { font-family: var(--f-display); font-weight: 600; font-size: 17px; margin: 24px 0 10px; color: var(--panache-forest); letter-spacing: 0; }
/* Sections des panneaux séparées par un filet discret (sauf la première) */
#sheetBody h3 { padding-top: 16px; border-top: 1px solid var(--line); }
#sheetBody h2 + h3, #sheetBody h3.premier, #sheetBody .kicker + h3 { padding-top: 0; border-top: 0; margin-top: 8px; }
.kicker { font-family: var(--f-display); font-size: 12px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: var(--accent-texte); margin-top: 8px; }
p { line-height: 1.5; margin: 0 0 12px; }
.hint { font-size: 13.5px; line-height: 1.45; color: var(--muted); }
label { display: block; font-size: 13.5px; font-weight: 700; color: var(--muted); margin: 14px 0 6px; }
input[type=text], input[type=number], input[type=datetime-local], input[type=password], input[type=email], input[type=tel], input:not([type]), select, textarea { width: 100%; padding: 11px 12px; border-radius: 11px; border: 1px solid rgba(48,59,54,.28); background: #FBFAF6; font-size: 16px; }
input:focus, select:focus, textarea:focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px rgba(52,76,61,.22); }
input[disabled], select[disabled], textarea[disabled] { opacity: .55; }
textarea { resize: vertical; }
input[type=range] { width: 100%; min-height: 36px; accent-color: var(--brand); }
.row { display: flex; align-items: center; gap: 10px; }
.row.two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: end; }
.row.two > div > label { margin-top: 12px; }
.unit { white-space: nowrap; font-variant-numeric: tabular-nums; }
.or-num { width: 84px !important; flex: none; min-height: 44px; }
label.check { display: flex; align-items: center; gap: 10px; color: var(--ink); font-size: 15px; font-weight: 400; margin: 14px 0 4px; min-height: 44px; }
label.check input { width: 20px; height: 20px; accent-color: var(--brand); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.chip { min-width: 44px; min-height: 44px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); font-family: var(--f-display); font-weight: 600; font-size: 14px; }
.chip:active { background: var(--press); }
.chip.on { border-color: var(--brand); background: var(--brand); color: var(--brand-ink); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.actions.col { flex-direction: column; }
/* Boutons : secondaire (Brume clair), principal (Forêt), accent (orange, avec parcimonie), danger.
   États : pressé (:active), désactivé ([disabled]), chargement ([aria-busy]), focus (:focus-visible). */
.btn { min-height: 44px; padding: 11px 14px; border-radius: 12px; border: 1px solid rgba(48,59,54,.24); background: var(--surface); color: var(--ink); font-weight: 700; font-size: 15px; text-align: center; display: inline-block; transition: background .12s ease, transform .08s ease; }
.btn:active { background: var(--press); transform: translateY(1px); }
.btn.primary { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.btn.primary:active { background: var(--brand-press); }
.btn.accent { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.danger { border-color: rgba(179,38,30,.5); color: var(--bad); background: #FBF3F1; }
.btn.ghost { background: transparent; }
.btn.full { width: 100%; }
.btn[disabled], .btn[aria-disabled=true] { opacity: .45; cursor: not-allowed; transform: none; }
.btn[aria-busy=true] { position: relative; color: transparent !important; pointer-events: none; }
.btn[aria-busy=true]::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; border: 2.5px solid currentColor; border-color: var(--muted) transparent var(--muted) transparent; animation: tourne .8s linear infinite; }
.btn.primary[aria-busy=true]::after { border-color: var(--brand-ink) transparent var(--brand-ink) transparent; }
@keyframes tourne { to { transform: rotate(360deg); } }
.grid-add { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.tile { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 6px 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); font-weight: 700; }
.tile:active { background: var(--press); }
.tile .sym { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: #3A4A40; }
dl.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin: 0 0 6px; }
dl.facts div { min-width: 0; }
dl.facts dt { font-size: 12.5px; color: var(--muted); }
dl.facts dd { margin: 2px 0 0; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
dl.facts .wide { grid-column: 1 / -1; }
.card { border: 1px solid var(--line); border-left: 4px solid var(--muted); border-radius: 12px; padding: 10px 12px; margin: 12px 0; background: var(--surface); }
.card b { display: block; font-family: var(--f-display); font-weight: 600; font-size: 16px; }
.card.good { border-left-color: var(--good); } .card.good b { color: var(--good); }
.card.warn { border-left-color: var(--warn); } .card.warn b { color: var(--warn); }
.collerlien { display: flex; gap: 8px; align-items: stretch; } .collerlien input { flex: 1; min-width: 0; } .collerlien .btn { flex: none; }
.etapes-liste { margin: 8px 0 0; padding-left: 20px; } .etapes-liste li { margin: 4px 0; }
.choix-liste { display: grid; gap: 10px; margin: 14px 0 8px; }
.btn.choix { display: flex; align-items: center; gap: 14px; text-align: left; padding: 14px 16px; min-height: 78px; width: 100%; }
.btn.choix .ci { flex: none; width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: var(--panache-mist); color: var(--panache-forest); }
.btn.choix .ct { display: block; min-width: 0; } .btn.choix b { display: block; font-size: 16.5px; } .btn.choix small { display: block; margin-top: 3px; color: var(--muted); font-size: 13.5px; font-weight: 500; line-height: 1.35; }
.btn.lien-retour { border: 0; background: none; padding-left: 0; margin-top: 10px; color: var(--muted); }
.hl-barre { height: 8px; border-radius: 4px; background: rgba(48,59,54,.14); overflow: hidden; margin: 6px 0 4px; } .hl-barre i { display: block; height: 100%; background: var(--brand); transition: width .2s; }
button.lien { border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--brand); text-decoration: underline; cursor: pointer; }
.legende .lg { display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: var(--c); vertical-align: -1px; margin: 0 4px 0 6px; box-shadow: 0 0 0 1px rgba(0,0,0,.2); }
.legende .lg:first-child { margin-left: 0; }
details.fiab { margin: 10px 0 4px; font-size: 14px; color: var(--muted); } details.fiab summary { cursor: pointer; font-weight: 600; color: var(--ink); padding: 6px 0; } details.fiab p { margin: 6px 0; }
.recepc dd { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.recepc .val { font-family: ui-monospace, monospace; font-size: 15px; word-break: break-all; user-select: all; -webkit-user-select: all; }
.recepc p.ok { color: var(--good); font-weight: 600; } .recepc p.warn { color: var(--warn); font-weight: 600; }
.btn.mini { min-height: 36px; padding: 0 12px; font-size: 14px; flex: none; }
.card.bad { border-left-color: var(--bad); } .card.bad b { color: var(--bad); }
.card p { margin: 4px 0 0; font-size: 14px; }
.tag { display: inline-block; font-size: 12.5px; font-weight: 600; padding: 2px 8px; border-radius: 99px; border: 1px solid var(--line); color: var(--muted); }
.tag.manual { border-color: rgba(135,80,0,.45); color: var(--warn); }
.obslist { display: flex; flex-direction: column; gap: 8px; }
.obsrow { display: flex; align-items: center; gap: 12px; width: 100%; padding: 6px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); text-align: left; }
.obsrow:active { background: var(--press); }
.obsrow .th { width: 64px; height: 44px; border-radius: 8px; background: rgba(48,59,54,.1) center/cover no-repeat; flex: none; }
.obsrow small { display: block; color: var(--muted); font-variant-numeric: tabular-nums; }
img.photo { width: 100%; border-radius: 12px; display: block; background: #000; margin: 6px 0 10px; }
.toggles { display: grid; gap: 2px; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: var(--press); }
.seg button { min-height: 44px; border: 0; border-radius: 11px; background: transparent; font-weight: 700; color: var(--ink); }
.seg3 { grid-template-columns: 1fr 1fr 1fr; }
.mrow > span:first-child { flex: 1; min-width: 0; }
.mrow.off { opacity: .6; }
.badge { flex: none; font: 700 12px/1 var(--f-body); padding: 6px 9px; border-radius: 99px; border: 1px solid var(--line); }
.badge.r-admin { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.badge.r-rw { background: rgba(135,148,123,.22); }
.badge.r-ro { background: transparent; color: var(--muted); }
.invmsg { padding: 12px 14px; border-radius: 12px; background: #FBFAF6; border: 1px solid var(--line); font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; user-select: all; -webkit-user-select: all; }
.seg button.on { background: var(--brand); color: var(--brand-ink); box-shadow: 0 1px 3px rgba(30,40,34,.25); }
.seg button small { display: block; font-weight: 500; font-size: 12px; opacity: .8; }
.tg { display: flex; align-items: center; gap: 12px; color: var(--ink); font-size: 15px; font-weight: 400; margin: 0; padding: 10px 2px; min-height: 48px; border-bottom: 1px solid var(--line); }
.tg input { width: 20px; height: 20px; accent-color: var(--brand); flex: none; }
.lg { width: 32px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 6px; background: #3A4A40; }   /* symboles montrés comme sur la carte */
.bands { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin: 6px 0 8px; }
.bands div { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.bands i { display: block; height: 6px; border-radius: 3px; margin-bottom: 4px; }
#toast { position: fixed; top: calc(var(--top) + 62px); left: 50%; transform: translateX(-50%); z-index: 1200; max-width: calc(100vw - 24px); background: var(--panache-night); color: var(--panache-mist); font-weight: 700; font-size: 14px; padding: 10px 14px; border-radius: 12px; box-shadow: 0 6px 18px rgba(0,0,0,.4); opacity: 0; pointer-events: none; transition: opacity .2s; text-align: center; }
#toast.on { opacity: 1; }
#modal { position: fixed; inset: 0; z-index: 1300; background: rgba(0,0,0,.55); display: grid; place-items: center; padding: 20px; }
#modal[hidden] { display: none; }
#modal .box { width: min(420px, 100%); background: var(--panache-mist); border: 1px solid var(--line); border-radius: 18px; padding: 18px; box-shadow: 0 14px 40px rgba(0,0,0,.35); }
#modal .box p { margin: 0 0 4px; }
/* Boîte de confirmation centrée : question au milieu, boutons de même largeur côte à côte */
#modal .box { text-align: center; padding: 22px 18px 18px; }
#modal .box p { font-size: 17px; line-height: 1.45; text-wrap: balance; }
#modal .box .actions { justify-content: center; margin-top: 16px; }
#modal .box .actions .btn { flex: 1 1 0; max-width: 190px; }
#fatal { position: fixed; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; z-index: 2000; background: var(--panache-mist); }
#fatal[hidden] { display: none; }

/* Symboles cartographiques */
.mk { width: 30px; height: 30px; display: grid; place-items: center; filter: drop-shadow(0 1px 2px rgba(0,0,0,.7)); }
.mk svg { width: 100%; height: 100%; overflow: visible; }
.mk.sel svg { filter: drop-shadow(0 0 4px #fff); }
.lbl { background: rgba(14,22,17,.86) !important; border: 1px solid rgba(255,255,255,.22) !important; box-shadow: 0 1px 3px rgba(0,0,0,.45) !important; color: #fff !important; font-family: var(--f-display); font-weight: 600; font-size: 13px; padding: 1px 6px !important; border-radius: 6px !important; display: none; }
.lbl::before { display: none; }
.labels .lbl { display: block; }
.leaflet-tooltip.lbl.lbl-off, .cl-lbl.lbl-off { visibility: hidden; }
/* Empilement des icônes, carte tournée ou non : caches par-dessus caméras, salines et observations;
   la cache choisie devant les autres; position GPS et épingle de recherche au-dessus; poignées d'édition tout en haut */
.leaflet-marker-icon.pt-cache { z-index: 100000 !important; }
.leaflet-marker-icon.pt-cache.pt-sel { z-index: 100001 !important; }
.leaflet-marker-icon.au-dessus { z-index: 150000 !important; }
.leaflet-marker-icon.poignee { z-index: 200000 !important; }
.z-bas .mk { transform: scale(.82); } .z-tres-bas .mk { transform: scale(.66); }
.obs { display: flex; align-items: center; gap: 3px; height: 26px; padding: 0 7px 0 4px; border-radius: 13px; background: #6b3f1d; border: 2px solid #ffd9b0; color: #fff; font-family: var(--f-display); font-weight: 700; font-size: 15px; box-shadow: 0 2px 6px rgba(0,0,0,.6); white-space: nowrap; }
.obs svg { width: 20px; height: 20px; stroke: #ffd9b0; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.obs.other { background: #3d4540; border-color: #c9d1ca; }
.obs.other svg { stroke: #c9d1ca; }
.obs.new { animation: pulse 1.8s ease-out infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255,217,176,.75); } 100% { box-shadow: 0 0 0 14px rgba(255,217,176,0); } }
@media (prefers-reduced-motion: reduce) { .obs.new { animation: none; outline: 2px solid #fff; } }
.me { width: 18px; height: 18px; border-radius: 50%; background: #2f8cff; border: 3px solid #fff; box-shadow: 0 0 0 6px rgba(47,140,255,.25); }
.vh { width: 22px; height: 22px; margin: 7px; border-radius: 50%; background: #fff; border: 3px solid var(--accent); box-shadow: 0 1px 4px rgba(0,0,0,.7); }
.vh.sel { background: var(--accent); border-color: #fff; transform: scale(1.2); }
.vm { width: 20px; height: 20px; margin: 5px; border-radius: 50%; background: rgba(20,25,22,.88); border: 2px solid #fff; color: #fff; font: 700 15px/16px var(--f-body); text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,.6); }
.cad-tiles { filter: drop-shadow(0 0 1px rgba(255,255,255,.95)) drop-shadow(0 0 1px rgba(255,255,255,.6)); }
.vtx { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--accent); }
#majBar { position: fixed; left: 10px; right: 10px; bottom: calc(var(--sabv) + 100px); z-index: 1150; max-width: 460px; margin: 0 auto; padding: 12px 44px 12px 20px; border-radius: 16px; border: 1px solid var(--line); border-top: 4px solid var(--accent); background: var(--panache-mist); box-shadow: 0 10px 28px rgba(30,40,34,.35); }
#majBar .mt b { display: block; font-family: var(--f-display); font-weight: 600; font-size: 16px; color: var(--panache-forest); }
#majBar .mt span { display: block; font-size: 13.5px; color: var(--muted); margin-top: 2px; }
#majBar .mb { display: flex; gap: 8px; margin-top: 10px; }
#majBar .mb .btn { flex: 1; }
#majBar .x { position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 20px; line-height: 1; }
body.sheet-open #majBar { display: none; }
#installBar { position: fixed; left: 10px; right: 10px; bottom: calc(var(--sabv) + 100px); z-index: 1140; max-width: 460px; margin: 0 auto; display: grid; grid-template-columns: 44px 1fr; gap: 4px 12px; align-items: center; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--line); border-top: 4px solid var(--brand); background: var(--panache-mist); box-shadow: 0 10px 28px rgba(30,40,34,.35); }
#installBar > svg { width: 44px !important; height: 44px !important; margin: 0 !important; }
#installBar .mt b { display: block; font-family: var(--f-display); font-weight: 600; font-size: 16px; color: var(--panache-forest); }
#installBar .mt span { display: block; font-size: 13.5px; color: var(--muted); margin-top: 2px; }
#installBar .mb { grid-column: 1 / -1; display: flex; gap: 8px; margin-top: 8px; }
#installBar .mb .btn { flex: 1; }
body.sheet-open #installBar, body.moding #installBar { display: none; }
ol.etapes { list-style: none; counter-reset: e; margin: 6px 0 12px; padding: 0; display: grid; gap: 10px; }
ol.etapes li { counter-increment: e; display: grid; grid-template-columns: 28px 52px 1fr; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); font-size: 15px; line-height: 1.4; }
ol.etapes li::before { content: counter(e); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: var(--brand-ink); font: 700 14px/1 var(--f-display); }
ol.etapes .ic { width: 52px; height: 44px; display: grid; place-items: center; border-radius: 10px; background: #FBFAF6; border: 1px solid var(--line); color: #2F6FE0; }
ol.etapes .ic svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
ol.etapes .ic-txt { font: 700 13px/1 var(--f-body); }
.fleche-bas { display: flex; flex-direction: column-reverse; align-items: center; margin: 14px auto 0; color: var(--accent); pointer-events: none; animation: fleche 1.2s ease-in-out infinite; }
.fleche-bas svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.fleche-bas span { font: 700 12.5px/1 var(--f-body); color: var(--accent-texte); margin-bottom: 2px; }
@keyframes fleche { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .fleche-bas { animation: none; } }
ul.notes { margin: 6px 0 10px; padding-left: 20px; } ul.notes li { margin: 4px 0; }
.vlist { display: flex; flex-direction: column; gap: 4px; }
.vrow { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.vrow .vn { flex: 1 1 auto; } .vrow .vn small, .vrow .vq { color: var(--muted); font-size: 12.5px; }
.vrow .vv { font-weight: 700; font-size: 14px; } .vrow .vv.ok { color: var(--good); } .vrow .vv.old { color: var(--accent-texte); }
.vrow .vq { flex-basis: 100%; }
.vrow .vx { order: 3; margin-left: auto; min-height: 36px; padding: 4px 10px; border-radius: 9px; border: 1px solid var(--line); background: transparent; font-size: 13px; color: var(--muted); }
.vmem { border-bottom: 1px solid var(--line); padding: 6px 0 2px; } .vmn { font-weight: 700; } .vmn small { color: var(--muted); font-size: 12.5px; font-weight: 500; }
.vrow.sous { padding-left: 14px; border-bottom: 0; } .vrow.sous .vn { color: var(--muted); font-size: 14px; }
.mrow .tag.dbl { background: rgba(214,138,58,.18); color: var(--accent-texte); border-color: transparent; }
/* Écran de démarrage PANACHE : le logo officiel sur son vert nuit, avec une lueur douce derrière le cerf.
   Le fond du logo (#012217) se fond dans la lueur grâce à mix-blend-mode: lighten (aucun bord visible). */
#splash { position: fixed; inset: 0; z-index: 5000; display: flex; align-items: center; justify-content: center; padding: 24px 20px calc(env(safe-area-inset-bottom, 0px) + 6vh); background: radial-gradient(ellipse 75% 50% at 50% 40%, #0A3626 0%, #042A1C 48%, #012217 78%); }
#splash.out { opacity: 0; pointer-events: none; transition: opacity .6s ease; }
#splash .sp-logo { display: block; width: min(90vw, 470px); max-height: 82vh; height: auto; object-fit: contain; mix-blend-mode: lighten; animation: spIn 1.1s cubic-bezier(.2,.8,.2,1) both, spZoom 8s ease-out both; }
@keyframes spIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes spZoom { from { transform: scale(.95); } to { transform: scale(1.03); } }
@media (prefers-reduced-motion: reduce) { #splash, #splash .sp-logo { animation: none; transition: none; } }
/* Motif secondaire : courbes de niveau discrètes en haut des panneaux */
#sheet { background: var(--topo) center top / 360px 120px repeat-x, var(--panel); }
:root { --topo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='120' viewBox='0 0 360 120'%3E%3Cg fill='none' stroke='%2387947B' stroke-opacity='.28' stroke-width='1'%3E%3Cpath d='M0 18 C40 6 80 30 120 20 S200 4 240 16 S320 30 360 18'/%3E%3Cpath d='M0 34 C46 22 86 44 126 36 S206 20 246 32 S322 46 360 34'/%3E%3Cpath d='M0 50 C50 40 92 58 132 52 S212 38 252 48 S324 60 360 50' stroke-opacity='.18'/%3E%3C/g%3E%3C/svg%3E"); }
.kicker > svg { vertical-align: middle; margin-right: 8px; }