/* ============================================================
   À sec, à flot — LA CARTE EN PAPIER (09/10/2026)
   La carte ne charge pas charte.css (elle a ses propres règles, en ligne) ;
   elle restait en interface plate : panneaux blancs à liseré gris, boutons
   en pilule, interrupteurs de téléphone. Cette feuille, chargée APRÈS le
   style de la page, en fait des feuilles de papier posées sur la carte :
   grain, ombre de feuille, coins de papier, boutons en étiquettes.
   Le fond de carte lui-même est repeint par fond-papier.js.
   La carte reste en thème clair (data-theme="clair" sur la page).
   Seules les couleurs, les coins et les ombres changent : aucune position,
   aucune taille, aucun z-index — les règles de placement de la page tiennent.
   ============================================================ */
:root {
  --cp-surface: #FFFBF3;
  --cp-survol: #F6EEDF;
  --cp-ligne: #E3D6BF;
  --cp-encre: #1C1A16;
  --cp-muet: #6B675E;
  --cp-ombre: 0 1px 0 rgba(90, 64, 24, .07), 0 14px 26px -14px rgba(90, 64, 24, .55);
  --cp-ombre-basse: 0 1px 0 rgba(90, 64, 24, .07), 0 6px 12px -6px rgba(90, 64, 24, .5);
  --cp-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .32 0 0 0 0 .18 0 0 0 .10 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ── les feuilles posées sur la carte ───────────────────────────────── */
.bandeau, .volet, .actions-carte, .ctx-panneau, .pointage, .situation-barre, .rayon-menu,
.replay-panel, .sugg, .maplibregl-popup-content, .maplibregl-ctrl-group, .fond, .volet-pill {
  background-color: var(--cp-surface); background-image: var(--cp-grain);
  border-color: transparent; box-shadow: var(--cp-ombre); color: var(--cp-encre);
}
.volet, .actions-carte, .ctx-panneau, .pointage, .rayon-menu, .replay-panel, .sugg,
.maplibregl-popup-content, .situation-barre { border-radius: 4px; }
.maplibregl-ctrl-group { border-radius: 3px; }
.maplibregl-ctrl-group button + button { border-top-color: var(--cp-ligne); }
.maplibregl-popup-anchor-top .maplibregl-popup-tip, .maplibregl-popup-anchor-top-left .maplibregl-popup-tip,
.maplibregl-popup-anchor-top-right .maplibregl-popup-tip { border-bottom-color: var(--cp-surface); }
.maplibregl-popup-anchor-bottom .maplibregl-popup-tip, .maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,
.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip { border-top-color: var(--cp-surface); }
.maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: var(--cp-surface); }
.maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: var(--cp-surface); }
.maplibregl-popup-close-button { background: var(--cp-surface); }
.maplibregl-popup-close-button:hover { background: var(--cp-survol); }
/* le bandeau du haut : une bande de papier, le liseré bichrome reste */
.bandeau { box-shadow: 0 1px 0 rgba(90, 64, 24, .08), 0 8px 16px -10px rgba(90, 64, 24, .45); }
/* en-têtes collants des panneaux : même papier que la feuille */
.volet-tete, .ctx-tete { background-color: var(--cp-surface); background-image: var(--cp-grain); border-bottom-color: var(--cp-ligne); }
.ctx-onglets { border-bottom-color: var(--cp-ligne); }

/* ── les rangées de couches ─────────────────────────────────────────── */
.rangee:hover { background: var(--cp-survol); }
.rangee + .rangee::before { background: var(--cp-ligne); }
.rangee:has(input:checked) { background: #EEF2F2; }
.univers.lesdeux, .univers.prevention, .univers.reperages { border-top-color: var(--cp-ligne); }
/* l’interrupteur : une languette de papier dans sa fente */
.rangee input[type="checkbox"] { border-radius: 3px; background: #D9CCB4;
  box-shadow: inset 0 1px 2px rgba(90, 64, 24, .35); }
.rangee input[type="checkbox"]::after { border-radius: 2px; background: var(--cp-surface);
  box-shadow: 0 1px 0 rgba(90, 64, 24, .12), 1px 2px 3px rgba(52, 34, 12, .35); }
.rangee input[type="checkbox"]:checked { background: #17405F; }
.rangee input[type="checkbox"]:focus-visible { outline: 2px solid #2E6BB8; outline-offset: 2px; }

/* ── les boutons : des étiquettes, plus des pilules ─────────────────── */
.univers-sel button, .volet-tete button, .ctx-chip, .ctx-cta, .ctx-corps .btn-tel, .ctx-corps .btn-sobre,
.ctx-corps .btn-porte, .ctx-corps .badge, .ctx-cas button, .pointage .pt-ok, .volet-pill, .fond,
.rangee .zoom-avert button, .btn-prev, .note-editeur button, .regards button, .univers .u-n,
.indice-zoom, .indice-zoom button, .situation-barre .sb-titre, .situation-barre .sb-cas,
.situation-barre #rayon-pill, .situation-barre #terrain, .rejeu-cmd .vb-btn, #toast-etat,
.scenarios button, .rayon-menu button, .actions-carte button, .actions-carte a {
  border-radius: 3px;
}
.univers-sel button, .volet-tete button, .situation-barre #rayon-pill, .ctx-cas button {
  border-color: var(--cp-ligne); background-color: var(--cp-surface);
}
.univers-sel button:hover, .volet-tete button:hover, .situation-barre #rayon-pill:hover { border-color: #17405F; }
.situation-barre .sb-titre { background: var(--cp-surface); border-color: var(--cp-ligne); }
.situation-barre .sb-cas:hover { background: var(--cp-survol); }
.situation-barre .sb-sep { background: var(--cp-ligne); }
.actions-carte button:hover, .actions-carte a:hover { background: var(--cp-survol); }
/* la recherche : une bande de papier, plus une pilule */
.cherche input { border-radius: 3px; border-color: transparent; background-color: var(--cp-surface);
  background-image: var(--cp-grain); box-shadow: var(--cp-ombre-basse); color: var(--cp-encre); }
.cherche input:focus { outline: 2px solid #2E6BB8; outline-offset: 1px; }
.sugg button:hover, .sugg button:focus-visible { background: var(--cp-survol); }

/* ── la punaise : l’adresse cherchée, le centre de « Autour de moi » ── */
.punaise { position: relative; width: 26px; height: 38px; pointer-events: none; }
.punaise::before { content: ""; position: absolute; left: 1px; top: 0; width: 24px; height: 24px; border-radius: 50%;
  background: linear-gradient(90deg, #3B342A 50%, #1C1A16 50%);
  box-shadow: 2px 3px 0 rgba(52, 34, 12, .28), inset 0 0 0 2px rgba(255, 250, 240, .9); }
.punaise::after { content: ""; position: absolute; left: 11.5px; top: 22px; width: 3px; height: 15px; border-radius: 1px;
  background: linear-gradient(90deg, #8E877B 50%, #6F6A60 50%); }
.punaise-crue::before { background: linear-gradient(90deg, #3D7BAE 50%, #17405F 50%); }

/* ── /memoire : la même carte de papier ─────────────────────────────── */
.page-memoire .volet-g, .page-memoire .volet-d, .page-memoire .stats {
  background-color: var(--cp-surface); background-image: var(--cp-grain);
  border-color: transparent; border-radius: 4px; box-shadow: var(--cp-ombre);
}
.page-memoire .btn, .page-memoire .vd-cta, .page-memoire .badge, .page-memoire .merci button { border-radius: 3px; }
/* la recherche reste l’action principale de la page : elle garde son liseré bleu */
.page-memoire .cherche input { border-radius: 3px; border: 2px solid #17405F; box-shadow: var(--cp-ombre-basse); }
.page-memoire .cherche .sugg { border-radius: 4px; }

/* ── les barres de défilement : fines, piste transparente, curseur kraft ──
   Chrome (barres natives, Windows) peignait la piste blanche des zones défilantes hors de leur
   cadre : une bande blanche sous la fenêtre d’information et sous le volet des couches (la fenêtre
   vit dans un calque « will-change: transform » de MapLibre). Défaut présent en prod avant le
   papier ; une piste transparente le rend invisible. Constaté par Jonathan le 09/10/2026, mesuré
   au pixel avec les barres natives (0 px blanc après, 287 avant). */
html, html * { scrollbar-width: thin; scrollbar-color: #C9B48F transparent; }