/* ==========================================================================
   Hyères 3D — habillage « Carte marine » (tâche H de PLAN.md ; maquette : design/piste-carte-marine.html)
   Papier crème, encre marine, magenta des cartes marines, double filet, cartouche gradué.
   Les boutons tactiles empruntent à la piste « Signalétique de port » : pastilles de 64 px, boutons de 44 px au moins.
   Utilisé par index.html (body.jeu), credits.html et mentions-legales.html (body.doc).
   Polices : Libre Caslon Text et IBM Plex Sans Condensed, licence SIL OFL, servies depuis vendor/fonts/ (aucune requête externe).
   ========================================================================== */

@font-face { font-family: "Libre Caslon Text"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(vendor/fonts/libre-caslon-text-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Libre Caslon Text"; font-style: italic; font-weight: 400; font-display: swap;
  src: url(vendor/fonts/libre-caslon-text-latin-400-italic.woff2) format("woff2"); }
@font-face { font-family: "Libre Caslon Text"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(vendor/fonts/libre-caslon-text-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans Condensed"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(vendor/fonts/ibm-plex-sans-condensed-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans Condensed"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(vendor/fonts/ibm-plex-sans-condensed-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans Condensed"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(vendor/fonts/ibm-plex-sans-condensed-latin-700-normal.woff2) format("woff2"); }

/* ---------- 1. Variables ---------- */
:root {
  --papier:        #f7f0dc;   /* papier de carte : fond des panneaux */
  --papier-ombre:  #e6d9ba;   /* papier ombré : bandeaux, survol */
  --encre:         #14284b;   /* encre marine : texte, filets, cadre */
  --bleu:          #2a5287;   /* bleu cartographe : texte secondaire */
  --magenta:       #a0155e;   /* magenta des cartes marines : accents */
  --magenta-fonce: #7e0f4a;   /* magenta enfoncé (bouton actif) */
  --eau:           #c3dfe8;
  --ocre:          #ecdcab;
  --vert:          #2b6a3c;
  --blanc:         #ffffff;
  --champ:         #fffdf4;
  --inactif-fond:  #e3dcc6;
  --inactif-texte: #46546c;
  --panneau:       rgba(247, 240, 220, .96);   /* papier à 96 % : laisse deviner la scène */

  --serif: "Libre Caslon Text", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:  "IBM Plex Sans Condensed", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;

  --cible: 44px;               /* cible tactile minimale */
  --pastille: 64px;            /* boutons ronds du tactile */
  --g: 10px;                   /* épaisseur du cartouche gradué */
  --pas: 20px;                 /* largeur d'un bloc noir ou blanc */
  --bas: env(safe-area-inset-bottom, 0px);
}
@media (max-width: 520px) { :root { --g: 6px; --pas: 14px; } }

/* ---------- 2. Base ---------- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--encre); background: var(--papier); font: 500 15px/1.45 var(--sans); overflow-wrap: break-word; }
body.jeu { height: 100%; overflow: hidden; background: var(--eau); -webkit-user-select: none; user-select: none; }
html:has(body.jeu) { height: 100%; }
h1, h2, h3 { font-family: var(--serif); font-weight: 700; line-height: 1.15; margin: 0; }
p { margin: 0 0 10px; }
b, strong { font-weight: 700; }
a { color: var(--magenta); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--encre); outline-offset: 3px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
canvas#view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.etiq { font: 600 12px/1.3 var(--sans); text-transform: uppercase; letter-spacing: .12em; color: var(--magenta); }

/* ---------- 3. Éléments de carte : panneau, filets, cartouche gradué ---------- */
.panneau { background: var(--panneau); color: var(--encre); border: 2px solid var(--encre);
  box-shadow: inset 0 0 0 3px var(--papier), inset 0 0 0 4px var(--encre); }
.filet { border: 0; border-top: 4px double var(--encre); margin: 12px 0; height: 0; }
/* Cartouche gradué : blocs noirs et blancs alternés, posé sur les écrans « feuille » seulement */
.grad { position: fixed; inset: 0; pointer-events: none; z-index: 5; border: 1px solid var(--encre);
  background:
    repeating-linear-gradient(90deg,  var(--encre) 0 var(--pas), var(--papier) var(--pas) calc(2 * var(--pas))) top    / 100% var(--g) no-repeat,
    repeating-linear-gradient(90deg,  var(--encre) 0 var(--pas), var(--papier) var(--pas) calc(2 * var(--pas))) bottom / 100% var(--g) no-repeat,
    repeating-linear-gradient(180deg, var(--encre) 0 var(--pas), var(--papier) var(--pas) calc(2 * var(--pas))) left   / var(--g) 100% no-repeat,
    repeating-linear-gradient(180deg, var(--encre) 0 var(--pas), var(--papier) var(--pas) calc(2 * var(--pas))) right  / var(--g) 100% no-repeat; }
.grad::after { content: ""; position: absolute; inset: var(--g); border: 1px solid var(--encre); }

/* ---------- 4. Boutons : angles vifs, double filet, petites capitales ---------- */
.btn { -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: var(--cible); min-width: var(--cible); padding: 8px 18px;
  font: 600 15px/1.15 var(--sans); text-transform: uppercase; letter-spacing: .1em; text-align: center; text-decoration: none;
  color: var(--encre); background: var(--papier); border: 2px solid var(--encre); border-radius: 0;
  box-shadow: inset 0 0 0 3px var(--papier), inset 0 0 0 4px var(--encre); cursor: pointer; touch-action: manipulation; }
.btn.plein { display: flex; width: 100%; }
.btn.primary, .btn.principal { color: var(--blanc); background: var(--magenta); box-shadow: inset 0 0 0 3px var(--magenta), inset 0 0 0 4px var(--blanc); }
.btn:hover { color: var(--papier); background: var(--encre); box-shadow: inset 0 0 0 3px var(--encre), inset 0 0 0 4px var(--papier); }
.btn.primary:hover, .btn.principal:hover { color: var(--blanc); background: var(--encre); box-shadow: inset 0 0 0 3px var(--encre), inset 0 0 0 4px var(--magenta); }
.btn:active { color: var(--encre); background: var(--papier-ombre); box-shadow: inset 0 0 0 3px var(--papier-ombre), inset 0 0 0 6px var(--encre); transform: translateY(1px); }
.btn.primary:active, .btn.principal:active { color: var(--blanc); background: var(--magenta-fonce); box-shadow: inset 0 0 0 3px var(--magenta-fonce), inset 0 0 0 6px var(--blanc); }
.btn:disabled, .btn.off { color: var(--inactif-texte); background: var(--inactif-fond); border: 2px dashed var(--inactif-texte);
  box-shadow: none; cursor: not-allowed; pointer-events: none; transform: none; }
.btn.carre { padding: 0; font-size: 22px; letter-spacing: 0; line-height: 1; min-width: var(--cible); }
.btn.carre#mphoto { font-size: 12px; letter-spacing: 0; }
#mapbtns .btn { width: 52px; }
.btn.carre[aria-pressed="true"] { color: var(--papier); background: var(--encre); box-shadow: inset 0 0 0 3px var(--encre), inset 0 0 0 4px var(--papier); }
.btn.on { color: var(--blanc); background: var(--magenta); box-shadow: inset 0 0 0 3px var(--magenta), inset 0 0 0 4px var(--blanc); }
.btn.on:hover { color: var(--blanc); background: var(--encre); box-shadow: inset 0 0 0 3px var(--encre), inset 0 0 0 4px var(--magenta); }

/* ---------- 5. HUD (en jeu : petits panneaux, la scène reste libre) ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; }
#info { position: absolute; left: 12px; top: 12px; max-width: min(340px, calc(100vw - 112px)); padding: 7px 12px 6px;
  font-variant-numeric: tabular-nums lining-nums; }
#info .lieu { font: 700 16px/1.25 var(--serif); }
#info .coord { font: 600 13px/1.35 var(--sans); color: var(--bleu); }
#info .rang { margin-top: 4px; padding-top: 4px; border-top: 2px dotted var(--bleu); font-size: 13px; line-height: 1.35; }
#info .rang:has(> span:empty) { display: none; }
#info .rang .etiq { display: inline; margin-right: .6em; }
#topright { position: absolute; right: 12px; top: 12px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
#menubtn { pointer-events: auto; }
#fps { order: 3; padding: 3px 9px; font: 600 12px/1.3 var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
#fps:empty { display: none; }
#cross { position: absolute; left: 50%; top: 50%; width: 38px; height: 38px; margin: -19px 0 0 -19px; }
#map { position: fixed; right: 12px; bottom: 46px; width: min(300px, 42vw); height: auto; cursor: pointer; pointer-events: auto;
  padding: 0; background: var(--eau); box-shadow: 0 0 0 3px var(--papier), 0 0 0 5px var(--encre); border: 2px solid var(--encre); }
#creditsbar { position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 12px calc(4px + var(--bas)); background: var(--panneau);
  border-top: 2px solid var(--encre); }
.credits { font: 500 12px/1.4 var(--sans); color: var(--encre); }
#creditsbar a { pointer-events: auto; white-space: nowrap; display: inline-block; padding: 14px 6px; margin: -14px 0 -14px 6px; font-weight: 600; }   /* zone de toucher de 44 px sans grossir la barre */

/* ---------- 6. Menu pause ---------- */
#overlay { position: fixed; inset: 0; display: flex; padding: calc(var(--g) + 14px) calc(var(--g) + 12px); overflow: auto; background: rgba(20, 40, 75, .62); }
#overlay.hidden { display: none; }
#card { width: min(30em, 100%); margin: auto; padding: 18px 26px 16px; position: relative; z-index: 1; }
#card .rose { display: block; width: 74px; height: 82px; margin: 0 auto 2px; color: var(--encre); }
#card .etiq-carte { margin: 0; text-align: center; font: 600 12px/1.3 var(--sans); text-transform: uppercase; letter-spacing: .14em; color: var(--magenta); }
#card h1 { margin: 4px 0 2px; text-align: center; font-size: 42px; letter-spacing: .01em; }
#card h2 { margin: 0; text-align: center; font: italic 400 17px/1.35 var(--serif); }
#card h3 { margin: 14px 0 6px; font: 600 13px/1.3 var(--sans); text-transform: uppercase; letter-spacing: .12em; color: var(--magenta); }
#card h3:first-child { margin-top: 0; }
#card p { margin: 0 0 10px; }
#card .btn { margin: 0 0 8px; }
.row2 { display: flex; gap: 10px; }
.row2 .btn { flex: 1; margin-bottom: 0; }
.row2 + .btn { margin-top: 10px; }
.statut { display: flex; justify-content: center; align-items: baseline; gap: 10px; margin: 6px 0 0 !important; padding-top: 8px;
  border-top: 2px dotted var(--bleu); font-weight: 600; font-size: 14px; min-height: 2.2em; }
#status { color: var(--vert); }
#status.err { color: var(--magenta-fonce); }
#card .credits { margin: 10px 0 0; padding: 7px 10px; background: var(--papier-ombre); text-align: left; }
.seg { display: flex; gap: 8px; }
.seg .btn { flex: 1; padding-left: 8px; padding-right: 8px; letter-spacing: .06em; }
#look-note, #jump-note, #card .note { font-size: 13px; line-height: 1.4; color: var(--bleu); margin: 6px 0 0; }
#card .note { margin: 8px 0 14px; }
.keyrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 3px 0; border-bottom: 1px dotted var(--bleu); }
.keyrow .key { -webkit-appearance: none; appearance: none; min-width: 150px; min-height: var(--cible); padding: 4px 10px; cursor: pointer;
  font: 600 14px/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--encre); background: var(--champ); border: 2px solid var(--encre); border-radius: 0; }
.keyrow .key:hover { background: var(--eau); }
.keyrow .key.wait { color: var(--blanc); background: var(--magenta); }
#helpkeys { border-collapse: collapse; width: 100%; margin-bottom: 6px; }
#helpkeys td { padding: 4px 0; vertical-align: top; border-bottom: 1px dotted var(--bleu); }
#helpkeys td:first-child { white-space: nowrap; padding-right: 16px; font-weight: 700; color: var(--magenta); }
.mesure { display: inline-block; margin-right: 6px; padding: 0 6px; font: 700 12px/1.5 var(--sans); text-transform: uppercase; letter-spacing: .1em;
  color: var(--papier); background: var(--encre); }
.mesure.invente { color: var(--encre); background: var(--ocre); border: 1px dashed var(--encre); }

/* ---------- 7. Grande carte : grille « recherche | fermer / carte | zoom / aide | légende » ---------- */
#mapview { position: fixed; inset: 0; display: grid; background: var(--papier);
  grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr) auto; gap: 8px;
  padding: calc(var(--g) + 12px) calc(var(--g) + 12px) calc(var(--g) + 12px + var(--bas)); }
#bigmap { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: crosshair; touch-action: none; background: var(--papier); }
#search { grid-column: 1; grid-row: 1; position: relative; z-index: 2; width: min(32em, 100%); padding: 8px 10px 8px; }
#search .champ { position: relative; display: block; }
#search .champ svg { position: absolute; left: 11px; top: 50%; width: 20px; height: 20px; margin-top: -10px; color: var(--encre); pointer-events: none; }
#q { width: 100%; min-height: var(--cible); padding: 6px 12px 6px 40px; font: 500 16px/1.3 var(--sans); color: var(--encre);
  background: var(--champ); border: 2px solid var(--encre); border-radius: 0; outline: none; -webkit-user-select: text; user-select: text; }
#q::placeholder { color: var(--bleu); opacity: 1; }
#q:focus { outline: 3px solid var(--magenta); outline-offset: 2px; }
#results { margin-top: 6px; max-height: 46vh; overflow: auto; border-top: 2px dotted var(--bleu); }
#results button { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; min-height: var(--cible); padding: 4px 10px;
  border: 0; border-left: 4px solid transparent; border-bottom: 1px solid var(--encre); border-radius: 0; background: transparent; cursor: pointer; text-align: left; font: 500 15px/1.25 var(--sans); }
#results button span { font: 700 16px/1.25 var(--serif); }
#results button:hover, #results button.sel { background: var(--eau); border-left-color: var(--magenta); }
#results small { font: 600 12px/1 var(--sans); text-transform: uppercase; letter-spacing: .1em; color: var(--magenta-fonce); white-space: nowrap; }
#results .none { padding: 10px; color: var(--bleu); font-weight: 600; }
#mclose { grid-column: 2; grid-row: 1; position: relative; z-index: 2; align-self: start; justify-self: end; }
#mapbtns { grid-column: 2; grid-row: 2; position: relative; z-index: 2; align-self: center; justify-self: end; display: grid; gap: 8px; }
#mapcomp { grid-column: 1; grid-row: 2; position: relative; z-index: 2; align-self: end; justify-self: start; display: grid; justify-items: center; gap: 4px; padding: 6px 10px 8px; }
#maprose { width: 62px; height: 69px; color: var(--encre); transition: transform .2s; }
#mapscale { position: relative; height: 22px; min-width: 40px; margin: 0 16px; }
#mapscale i { display: block; width: 100%; height: 7px; border: 1px solid var(--encre);
  background: repeating-linear-gradient(90deg, var(--encre) 0 25%, var(--papier) 25% 50%); }
#mapscale span { position: absolute; top: 8px; font: 600 12px/1.2 var(--sans); font-variant-numeric: tabular-nums; }
#mapscale .z { left: 0; transform: translateX(-30%); }
#mapscale #mapscale-val { right: 0; transform: translateX(30%); white-space: nowrap; }
#maphelp { grid-column: 1; grid-row: 3; position: relative; z-index: 2; justify-self: start; align-self: end; padding: 7px 14px; font-size: 14px; line-height: 1.4; }
#maphelp .doigt, body.touch #maphelp .souris { display: none; }
body.touch #maphelp .doigt { display: inline; }
#maplegend { position: absolute; z-index: 2; right: calc(var(--g) + 12px); bottom: calc(var(--g) + 12px + var(--bas)); padding: 7px 12px; font-size: 13px; line-height: 1.35; max-width: 21em; }
#maplegend ul { list-style: none; margin: 4px 0 0; padding: 0; }
#maplegend li { display: flex; gap: 8px; align-items: baseline; }
#maplegend .sw { flex: none; display: inline-block; width: 18px; height: 11px; border: 1.5px solid var(--encre); transform: translateY(1px); }
#maplegend .sw.terre { background: var(--ocre); }
#maplegend .sw.route { background: var(--papier); border-top-width: 4px; }
#maplegend .sw.mer { background: var(--eau); border-style: dashed; }
@media (max-width: 899px) {
  #maplegend { display: none; }
  #maphelp { grid-column: 1 / -1; justify-self: stretch; }
  #mapview { grid-template-rows: auto minmax(0, 1fr) auto; }
  #bigmap { position: relative; grid-column: 1 / -1; grid-row: 2; inset: auto; outline: 2px solid var(--encre); outline-offset: -2px; }
  #mapcomp { grid-column: 1; grid-row: 2; margin: 6px; }
  #mapbtns { margin: 6px; }
}
@media (max-width: 520px) {
  #maprose { width: 44px; height: 49px; } #mapcomp { padding: 4px 8px 6px; }
  #search { grid-column: 1 / -1; width: 100%; }
  #maphelp { grid-column: 1; justify-self: stretch; }
  #mclose { grid-column: 2; grid-row: 3; align-self: end; }
}

/* ---------- 8. Tactile : joystick flottant et pastilles de 64 px ---------- */
#stick { position: absolute; left: 0; width: 120px; height: 120px; margin: -60px; border-radius: 50%; display: none;
  border: 2px solid var(--encre); background: rgba(247, 240, 220, .55); box-shadow: inset 0 0 0 3px rgba(247, 240, 220, .8), inset 0 0 0 4px var(--encre); }
#stick i { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px; border-radius: 50%;
  background: var(--magenta); border: 3px solid var(--papier); box-shadow: 0 0 0 2px var(--encre); }
.pastille { position: absolute; display: none; place-items: center; width: var(--pastille); height: var(--pastille); padding: 0; border-radius: 50%;
  pointer-events: auto; touch-action: none; -webkit-tap-highlight-color: transparent; cursor: pointer;
  font: 700 12px/1.1 var(--sans); text-transform: uppercase; letter-spacing: .04em; text-align: center;
  color: var(--encre); background: var(--papier); border: 2px solid var(--encre); box-shadow: inset 0 0 0 3px var(--papier), inset 0 0 0 4px var(--encre); }
.pastille.principal { color: var(--blanc); background: var(--magenta); box-shadow: inset 0 0 0 3px var(--magenta), inset 0 0 0 4px var(--blanc); }
.pastille.on { color: var(--papier); background: var(--encre); box-shadow: inset 0 0 0 3px var(--encre), inset 0 0 0 4px var(--papier); }
.pastille.principal.on { color: var(--blanc); background: var(--magenta-fonce); box-shadow: inset 0 0 0 3px var(--magenta-fonce), inset 0 0 0 6px var(--blanc); }
#jump { right: 14px; bottom: calc(92px + var(--bas)); }
#run  { right: 92px; bottom: calc(92px + var(--bas)); }
#fly  { right: 14px; bottom: calc(172px + var(--bas)); }
body.touch .pastille { display: grid; }
body.touch #map { position: static; width: min(34vw, 190px); }
body.touch #fps { display: none; }

@media (max-width: 520px) {
  #info { max-width: calc(100vw - 108px); }
  #card { padding: 14px 16px 12px; }
  #card h1 { font-size: 34px; }
  .keyrow .key { min-width: 124px; }
}
@media (max-height: 520px) and (orientation: landscape) {
  #jump { bottom: calc(60px + var(--bas)); } #run { bottom: calc(60px + var(--bas)); } #fly { bottom: calc(132px + var(--bas)); }
  #mapview { padding-top: calc(var(--g) + 6px); padding-bottom: calc(var(--g) + 6px); }
}

/* ---------- 9. Pages de texte (credits.html, mentions-legales.html) ---------- */
body.doc { min-height: 100vh; }
.doc main { max-width: 780px; margin: 0 auto; padding: 22px 16px 60px; }
.doc .entete { position: relative; margin-bottom: 18px; padding: calc(var(--g) + 20px) calc(var(--g) + 18px) calc(var(--g) + 16px); background: var(--papier); }
.doc .entete .grad { position: absolute; }
.doc .entete > *:not(.grad) { position: relative; z-index: 6; }
.doc .entete .etiq { display: block; margin-bottom: 6px; }
.doc h1 { font-size: clamp(30px, 6vw, 44px); letter-spacing: .01em; }
.doc h2 { margin: 0 0 10px; font-size: 21px; padding-bottom: 6px; border-bottom: 4px double var(--encre); }
.doc h3 { margin: 18px 0 6px; font: 600 13px/1.3 var(--sans); text-transform: uppercase; letter-spacing: .12em; color: var(--magenta); }
.doc .lead { font: 400 17px/1.55 var(--serif); margin: 12px 0 0; }
.doc .retour { display: inline-flex; margin: 0 0 14px; }
.doc section { margin: 0 0 18px; padding: 16px 18px; }
.doc section.sa { box-shadow: inset 0 0 0 3px var(--papier), inset 0 0 0 4px var(--magenta); border-color: var(--magenta); }
.doc dl { margin: 0; display: grid; grid-template-columns: 10.5em 1fr; gap: 8px 14px; }
.doc dt { font: 600 12px/1.6 var(--sans); text-transform: uppercase; letter-spacing: .1em; color: var(--bleu); padding-top: 3px; }
.doc dd { margin: 0; }
.doc ul { margin: 0 0 10px; padding-left: 20px; }
.doc li { margin-bottom: 4px; }
.doc .small { font-size: 14px; color: var(--bleu); }
.doc code { font: 500 13px ui-monospace, Consolas, monospace; background: var(--papier-ombre); padding: 1px 5px; }
.doc .todo { display: inline-block; font: 700 13px/1.4 var(--sans); letter-spacing: .06em; color: var(--blanc); background: var(--magenta); padding: 0 7px; }
.doc nav { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
.doc nav a { display: inline-flex; align-items: center; min-height: var(--cible); padding: 0 16px; border: 2px solid var(--encre); color: var(--encre); background: var(--papier);
  text-decoration: none; text-transform: uppercase; letter-spacing: .1em; font-weight: 600; box-shadow: inset 0 0 0 3px var(--papier), inset 0 0 0 4px var(--encre); }
.doc nav a:hover { background: var(--encre); color: var(--papier); box-shadow: inset 0 0 0 3px var(--encre), inset 0 0 0 4px var(--papier); }
@media (max-width: 560px) { .doc dl { grid-template-columns: 1fr; gap: 0; } .doc dt { margin-top: 10px; } }
@media print { .btn, .panneau { -webkit-print-color-adjust: exact; print-color-adjust: exact; } .doc .grad { display: none; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Sous-menus : la rose et l'étiquette de carte laissent la place aux réglages */
#card:has(#menu-settings:not([hidden]), #menu-help:not([hidden])) :is(.rose, .etiq-carte) { display: none; }
body.touch #info { max-width: calc(100vw - 156px); }
@media (max-width: 899px) { #mapbtns { align-self: end; } }
#mapview.photo #maplegend { display: none; }