/* Audioguide des Sentiers de l'eau.
 *
 * Point de départ : la maquette « Maigrauge » (02_Concept/maquette-maigrauge.html).
 * La charte des Chemins de la Sarine, reprise telle quelle ; ce qui appartient
 * aux Sentiers de l'eau, c'est la ligne de surface et le basculement du dessus
 * au dessous. Contrastes AA vérifiés dans les deux ambiances. */

@font-face { font-family: "IBM Plex Sans"; font-weight: 300; font-style: italic;
  font-display: swap; src: url("../polices/ibm-plex-sans-latin-300-italic.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: normal;
  font-display: swap; src: url("../polices/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-style: normal;
  font-display: swap; src: url("../polices/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 700; font-style: normal;
  font-display: swap; src: url("../polices/ibm-plex-sans-latin-700-normal.woff2") format("woff2"); }
/* Polices au choix de l'organisation (éditeur, page Organisations) : servies
   d'ici, téléchargées seulement si l'identité les demande. Licence OFL. */
@font-face { font-family: "Source Sans 3"; font-weight: 200 900; font-style: normal;
  font-display: swap; src: url("../polices/source-sans-3-latin.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-weight: 200 900; font-style: italic;
  font-display: swap; src: url("../polices/source-sans-3-latin-italic.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-weight: 300 800; font-style: normal;
  font-display: swap; src: url("../polices/open-sans.woff2") format("woff2"); }
@font-face { font-family: "Onest"; font-weight: 100 900; font-style: normal;
  font-display: swap; src: url("../polices/onest-latin.woff2") format("woff2"); }

:root {
  --eau: #204A62;        /* Eau bleu foncé, Pantone 7694U */
  --gres: #FCE6AB;       /* Grès, Pantone 7401U */
  --sarine: #79C5C9;     /* Sarine turquoise, Pantone 2233U */
  --orange: #EA6128;     /* repères et jeu, jamais du texte fin sur grès */
  --profond: #0C2A38;    /* sous la surface */
  --encre: #14212B;

  --fond: var(--gres);
  --surface: #FFF7DD;
  --texte: var(--encre);
  --accent: var(--eau);           /* 7,7:1 sur grès */
  --sourdine: #3E4A52;            /* 7,4:1 sur grès */
  --trait: rgba(20, 33, 43, .22);
  --repere: #A23F17;              /* orange assombri, 5,2:1 sur grès */
  --mesure: 34rem;
}

/* Sous la surface : la lumière tombe, le contraste s'inverse. */
body.dessous {
  --fond: var(--profond);
  --surface: #12384A;
  --texte: #E8F4F6;               /* 13,3:1 sur profond */
  --accent: var(--sarine);        /* 7,6:1 sur profond */
  --sourdine: #B9D3DA;
  --trait: rgba(232, 244, 246, .25);
  --repere: #F29A6B;
}

/* Profil coureur : un écran à lire d'un coup d'œil, en courant. */
body.coureur { font-size: 19px; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body {
  margin: 0;
  font-family: var(--police, "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, sans-serif);
  font-size: 17px;
  line-height: 1.6;
  color: var(--texte);
  background: var(--fond);
  transition: background-color .6s, color .6s;
  min-height: 100dvh;
}
a { color: var(--accent); }
:focus-visible { outline: 3px solid var(--repere); outline-offset: 3px; }
[hidden] { display: none !important; }
.visuellement-cache { position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ─── Cadre ─────────────────────────────────────────────────────────────── */
.bandeau-demo {
  background: var(--accent); color: var(--fond); text-align: center; font-size: .8rem; font-weight: 600;
  letter-spacing: .06em; padding: 4px 12px; padding-top: max(4px, env(safe-area-inset-top));
}
/* Zones sûres (encoche, coins arrondis, téléphone en paysage). */
.barre { padding-top: max(10px, env(safe-area-inset-top)); }
.bandeau-demo:not([hidden]) + .barre { padding-top: 10px; }
.barre, .ecran { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
.barre {
  display: flex; align-items: center; gap: 8px; justify-content: space-between;
  max-width: var(--mesure); margin: 0 auto; padding-bottom: 0;
}
.barre .lieu { font-size: .78rem; letter-spacing: .09em; font-weight: 600; color: var(--accent); margin: 0;
  text-transform: uppercase; display: flex; align-items: center; gap: .6em; }
.image-accueil { width: 100%; height: auto; display: block; border-radius: 14px; margin: 0 0 1rem; }
.logo-organisation { height: 2.2em; width: auto; max-width: 9em; object-fit: contain; display: block; }
/* Choix de la trace : la carte des traces du projet, puis la liste. */
.carte-traces { width: 100%; height: auto; display: block; margin: 0 0 1rem; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--trait); }
.carte-traces path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.carte-traces .trait { stroke-width: 5; pointer-events: none; }
.carte-traces .zone-toucher { stroke: transparent; stroke-width: 30; cursor: pointer; }
.carte-traces .choisie .trait { stroke-width: 8; }
.carte-traces .trace-tactile:focus { outline: none; }
.carte-traces .trace-tactile:focus-visible .trait, .carte-traces .trace-tactile:active .trait { stroke-width: 10; }
.puce-trace { display: inline-block; width: .9em; height: .9em; border-radius: 50%; margin-right: .5em; vertical-align: -.05em; }
.bascule {
  display: inline-flex; border: 1.5px solid var(--accent); border-radius: 999px; padding: 3px;
}
.bascule button {
  appearance: none; border: 0; background: none; font: inherit; font-size: .85rem; font-weight: 600;
  color: var(--accent); padding: 8px 12px; min-height: 44px; border-radius: 999px; cursor: pointer;
}
.bascule button[aria-pressed="true"] { background: var(--accent); color: var(--fond); }

/* La barre d'écoute du bas ne cache jamais la fin de l'écran. */
/* Le bouton principal de l'accueil reste à portée du pouce, même quand les
   consignes dépassent la hauteur d'un petit téléphone. */
.ecran:focus { outline: none; }

h1, h2, h3 { line-height: 1.15; margin: 0 0 .5em; }
.titre { font-size: clamp(1.75rem, 8vw, 2.8rem); font-weight: 700; letter-spacing: -.02em; margin: 18px 0 12px; text-wrap: balance; }
/* Téléphone en paysage : la hauteur manque, le titre se fait plus discret. */
@media (orientation: landscape) and (max-height: 500px) {
  .titre { font-size: clamp(1.5rem, 4.5vh + 1rem, 2rem); margin: 8px 0; }
}
.phrase { font-size: clamp(1.1rem, 4.6vw, 1.35rem); line-height: 1.35; font-weight: 300; font-style: italic; margin: 0 0 8px; }
h2 { font-size: 1.25rem; }

/* La ligne de surface, de bord à bord : c'est le concept. */
.trait-surface {
  position: relative; height: 0; border-top: 2px solid var(--accent);
  margin: 22px calc(50% - 50vw); opacity: .9;
}
.trait-surface::after {
  content: ""; position: absolute; inset: 0 0 auto; height: 40px;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--accent) 22%, transparent), transparent);
}

.messages { list-style: none; padding: 0; margin: 0 0 24px; }
.messages li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--trait); }
.messages svg { flex: none; width: 24px; height: 24px; color: var(--accent); margin-top: 2px; }

/* ─── Boutons ───────────────────────────────────────────────────────────── */
.bouton {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  min-height: 52px; padding: 12px 20px; border-radius: 999px; cursor: pointer;
  font: inherit; font-weight: 600; font-size: 1.02rem;
  border: 1.5px solid var(--accent); background: transparent; color: var(--accent);
}
.bouton-principal { background: var(--accent); color: var(--fond); }
/* Retour visuel au toucher, sans déplacer la mise en page. */
.bouton, .choix button, .liste-points button, .versions button, .lien-retour, .bascule button, .langues button,
.lecteur button, .mini-lecteur button { transition: background-color .12s ease-out, filter .12s ease-out; }
.bouton:active, .choix button:active, .versions button:active, .lecteur .petit:active, .bascule button:active,
.langues button:active, .mini-lecteur button:active {
  background-color: color-mix(in srgb, var(--accent) 16%, transparent);
}
.bouton-principal:active, .lecteur .lecture:active, .versions button[aria-pressed="true"]:active,
.bascule button[aria-pressed="true"]:active { background-color: var(--accent); filter: brightness(.88); }
.liste-points button:active { background-color: color-mix(in srgb, var(--accent) 10%, transparent); }
.lien-retour:active { opacity: .7; }
.bouton + .bouton { margin-top: 10px; }
.lien-retour { background: none; border: 0; color: var(--accent); font: inherit; font-weight: 600;
  min-height: 44px; padding: 0; cursor: pointer; text-decoration: underline; }
.lien-retour + .lien-retour { display: block; margin-top: .25rem; }

.choix { display: grid; gap: 12px; margin: 16px 0 24px; }
.choix button {
  text-align: left; display: grid; gap: 2px; padding: 16px 18px; min-height: 76px;
  border-radius: 14px; border: 1.5px solid var(--trait); background: var(--surface);
  color: var(--texte); font: inherit; cursor: pointer;
}
.choix button strong { font-size: 1.15rem; }
.choix button span { color: var(--sourdine); font-size: .93rem; }
.choix button[aria-current="true"], .choix button.suggere { border-color: var(--accent); box-shadow: inset 4px 0 0 var(--accent); }
.marque { font-size: .78rem; font-weight: 700; letter-spacing: .05em; color: var(--repere); }

/* ─── En route ──────────────────────────────────────────────────────────── */
.etat-pret { font-size: .88rem; color: var(--sourdine); margin: 4px 0 12px; }
.carte-svg { width: 100%; height: auto; display: block; background: var(--surface);
  border-radius: 14px; border: 1px solid var(--trait); touch-action: manipulation; }
.carte-svg .trace { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: .55; }
.carte-svg .trace-active { opacity: 1; stroke-width: 4; }
.carte-svg .zone { fill: var(--accent); opacity: .18; }
.carte-svg .point circle.pastille { fill: var(--accent); stroke: var(--fond); stroke-width: 3; }
.carte-svg .point text { fill: var(--fond); font-family: inherit; font-weight: 700; font-size: 15px; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.carte-svg .point.entendu circle.pastille { fill: var(--sourdine); }
.carte-svg .point.sans-contenu circle.pastille { fill: none; stroke: var(--accent); stroke-dasharray: 4 3; }
.carte-svg .point.sans-contenu text { fill: var(--accent); }
.carte-svg .point { cursor: pointer; }
/* Pas encore sur le téléphone : un anneau pointillé, en plus du libellé lu
   par les lecteurs d'écran. */
.carte-svg .point.non-pret circle.pastille { stroke: var(--repere); stroke-width: 3; stroke-dasharray: 4 3; }
.carte-svg .point:focus-visible circle.pastille { stroke: var(--repere); stroke-width: 4; }
.carte-svg .marcheur { fill: var(--repere); stroke: #fff; stroke-width: 3; }
.attribution { font-size: .75rem; color: var(--sourdine); margin: 4px 0 12px; }


.simulation { border: 1.5px dashed var(--accent); border-radius: 14px; padding: 12px 14px; margin: 16px 0; }
.simulation h2 { font-size: 1rem; margin: 0 0 6px; }
.simulation input[type=range] { width: 100%; min-height: 44px; accent-color: var(--accent); }
.simulation .rangee { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.simulation .rangee .bouton { width: auto; flex: 1 1 140px; min-height: 48px; }
.simulation label { font-size: .9rem; }
.simulation select { font: inherit; min-height: 44px; border-radius: 8px; border: 1.5px solid var(--accent);
  background: var(--surface); color: var(--texte); padding: 0 8px; }

.liste-points { list-style: none; padding: 0; margin: 12px 0; }
.liste-points button {
  display: flex; gap: 12px; align-items: center; width: 100%; text-align: left; font: inherit; color: var(--texte);
  background: none; border: 0; border-bottom: 1px solid var(--trait); padding: 10px 0; min-height: 52px; cursor: pointer;
}
.liste-points .num { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: var(--fond); font-weight: 700; }
.liste-points .entendu .num { background: var(--sourdine); }
.liste-points small { display: block; color: var(--sourdine); }

/* Coureur : rien à toucher, tout se lit de loin. */

/* ─── Point ─────────────────────────────────────────────────────────────── */
.voix-nom { font-size: .82rem; font-weight: 600; color: var(--accent); margin: 0 0 4px; }
.lecteur .progression {
  -webkit-appearance: none; appearance: none; width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer;
  touch-action: pan-y;
}
.lecteur .progression::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px;
  background: linear-gradient(to right, var(--accent) var(--fait, 0%), var(--trait) var(--fait, 0%));
}
.lecteur .progression::-moz-range-track { height: 6px; border-radius: 3px; background: var(--trait); }
.lecteur .progression::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--accent); }
.lecteur .progression::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px; margin-top: -6px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--fond);
}
.lecteur .progression::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); border: 2px solid var(--fond); }
.lecteur .progression:disabled { cursor: default; }
.lecteur .progression:disabled::-webkit-slider-thumb { visibility: hidden; }
.lecteur .progression:disabled::-moz-range-thumb { visibility: hidden; }
/* Changer de public sur un poste : une famille écoute la version adulte, puis
   celle des enfants. */
.ma-position { margin: 4px 0 12px; }
.ma-position .etat-gps { margin: 0; }
.versions { margin: 0 0 16px; }
.versions-titre { display: block; font-size: .85rem; color: var(--sourdine); font-weight: 600; margin-bottom: 6px; }
/* À parts égales sur une rangée quand elle suffit ; sinon à la ligne, jamais
   de mot coupé. */
.versions-choix { display: flex; flex-wrap: wrap; gap: 6px; }
.versions-choix button { flex: 1 1 auto; }
.versions button {
  min-height: 44px; padding: 6px 12px; border-radius: 999px; border: 1.5px solid var(--accent);
  background: none; color: var(--accent); font: inherit; font-size: .95rem; font-weight: 600; cursor: pointer;
}
.versions button[aria-pressed="true"] { background: var(--accent); color: var(--fond); }
.sans-audio { font-size: .92rem; color: var(--sourdine); }
.consigne { border-left: 4px solid var(--repere); padding: 6px 12px; margin: 12px 0; }
.ecouteurs { display: flex; gap: 10px; align-items: center; font-size: .92rem; color: var(--sourdine); }
.ecouteurs svg { width: 26px; height: 26px; color: var(--accent); flex: none; }
.galerie { display: grid; gap: 10px; margin: 12px 0; }
.galerie img { width: 100%; height: auto; border-radius: 10px; }
.provisoire { font-size: .8rem; font-weight: 600; color: var(--repere); letter-spacing: .04em; }

/* ─── Barre d'écoute, toujours accessible au pouce ─────────────────────── */

/* ─── Carte en ligne ────────────────────────────────────────────────────── */
.carte-leaflet .leaflet-bar a { width: 44px; height: 44px; line-height: 44px; font-size: 22px; }
@media (orientation: landscape) and (max-height: 500px) { .carte-leaflet { height: 70vh; } }
.marqueur-guide { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: var(--fond); font-family: var(--police, "IBM Plex Sans", sans-serif); font-weight: 700; font-size: 15px;
  border: 3px solid var(--fond); box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.marqueur-guide.entendu { background: var(--sourdine); }
.marqueur-guide.non-pret { outline: 3px dashed var(--repere); outline-offset: 1px; }
.marqueur-guide.sans-contenu { background: var(--fond); color: var(--accent); border-color: var(--accent); }

/* ─── Position et mode test ─────────────────────────────────────────────── */
.etat-gps { font-size: .9rem; color: var(--sourdine); margin: 0 0 8px; }
.etat-gps.faible { color: var(--repere); font-weight: 600; }
.panneau-test { border: 1.5px dashed var(--repere); border-radius: 14px; padding: 12px 14px; margin: 20px 0; }
.panneau-test h2 { font-size: 1rem; margin: 0 0 6px; }
.panneau-test .bouton { min-height: 44px; font-size: .95rem; }

/* ─── Scan ──────────────────────────────────────────────────────────────── */
.scan-cadre { position: relative; border-radius: 14px; overflow: hidden; background: #000; aspect-ratio: 3 / 4; margin: 12px 0; }
.scan-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.scan-mire { position: absolute; inset: 18%; border: 3px solid var(--accent); border-radius: 12px;
  box-shadow: 0 0 0 999px rgba(12, 42, 56, .35); }

/* ─── Donnée vivante (maquette « Maigrauge ») ──────────────────────────── */
.direct {
  font-size: .78rem; line-height: 1.5; color: var(--accent); margin: 8px auto 0;
  border-top: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  padding: 6px 16px; display: flex; gap: 12px; flex-wrap: wrap; justify-content: space-between;
  max-width: var(--mesure);
}
.direct b { font-weight: 600; font-variant-numeric: tabular-nums; }

/* ─── Choix de la langue (visible seulement si le contenu existe en plusieurs langues) */
.barre { flex-wrap: wrap; }
.langues { display: inline-flex; gap: 2px; margin-left: auto; }
.langues button {
  appearance: none; border: 0; background: none; font: inherit; font-size: .8rem; font-weight: 600;
  letter-spacing: .06em; color: var(--accent); min-width: 44px; min-height: 44px; padding: 0 6px;
  border-radius: 999px; cursor: pointer;
}
.langues button[aria-pressed="true"] { background: var(--accent); color: var(--fond); }


/* ═══ Navigation (01.10.2026) ════════════════════════════════════════════
   Sur le modèle des lecteurs de podcasts et des applications de visite
   audio : un cadre fixe (barre du haut, écran, lecteur réduit en bas), des
   écrans qui tiennent dans la hauteur du téléphone, et ce qui est secondaire
   (texte, liste des postes, options) dans des volets qui montent du bas.
   L'écran ne défile qu'en dernier recours (très petit téléphone, grand texte). */

body { display: flex; flex-direction: column; height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }
.bandeau-demo, .barre, .mini-lecteur { flex: none; }
.barre { width: 100%; }
.ecran {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  width: 100%; max-width: var(--mesure); margin: 0 auto;
  display: flex; flex-direction: column;
  padding-top: 4px; padding-bottom: calc(env(safe-area-inset-bottom) + 16px);
}
body.avec-mini-lecteur .ecran { padding-bottom: 12px; }
.ecran > * { flex-shrink: 0; }

/* Le nom (ou le logo) en haut : un bouton qui ramène à l'accueil. */
button.lieu { appearance: none; background: none; border: 0; padding: 0; min-height: 44px; cursor: pointer;
  font-family: inherit; text-align: left; }
button.lieu:active { opacity: .7; }

/* Accueil : le bouton principal en bas, sans défilement. */
.action-fixe { margin-top: auto; padding-top: 12px; display: grid; gap: 10px;
  /* En dernier recours (grand texte), il reste collé au bas de l'écran. */
  position: sticky; bottom: calc(-1 * (env(safe-area-inset-bottom) + 16px));
  padding-bottom: calc(env(safe-area-inset-bottom) + 16px); margin-bottom: calc(-1 * (env(safe-area-inset-bottom) + 16px));
  background: linear-gradient(to bottom, transparent, var(--fond) 12px); }
.action-fixe .bouton + .bouton { margin-top: 0; }
.direct { margin: 4px 0 0; padding: 6px 0; font-size: .78rem; line-height: 1.4; color: var(--accent);
  border-bottom: 1px solid var(--trait); display: flex; gap: 4px 12px; flex-wrap: wrap; }
.direct b { font-weight: 600; font-variant-numeric: tabular-nums; }
.choix { gap: 10px; margin: 12px 0 16px; }
.choix button { min-height: 64px; padding: 12px 16px; }
.bon-a-savoir { font-size: .9rem; color: var(--sourdine); margin: 0 0 12px; }
.bon-a-savoir summary { min-height: 44px; display: flex; align-items: center; font-weight: 600; color: var(--accent); cursor: pointer; }

/* ─── En route : la carte d'abord ────────────────────────────────────── */
.entete-ecran { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 12px; flex-wrap: wrap; margin: 4px 0 8px; }
.contexte { margin: 0; font-weight: 700; }
.contexte span { font-weight: 400; color: var(--sourdine); }
.entete-ecran .etat-pret { margin: 0; }
.zone-carte { flex: 1 1 auto; min-height: 180px; position: relative; }
.zone-carte > .carte-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.carte-leaflet { position: absolute; inset: 0; border-radius: 14px; border: 1px solid var(--trait); }
.carte-leaflet .leaflet-bar a { width: 44px; height: 44px; line-height: 44px; font-size: 22px; }
.bas-ecran { padding-top: 10px; display: grid; gap: 10px; }
.bas-ecran .ma-position, .bas-ecran .etat-gps { margin: 0; }
.prochain {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 10px 14px;
  border: 1.5px solid var(--accent); border-radius: 14px; background: var(--surface); color: var(--texte);
  font: inherit; text-align: left; cursor: pointer;
}
.prochain .num { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: var(--fond); font-weight: 700; }
.prochain-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.prochain-texte small { font-size: .8rem; color: var(--sourdine); }
.prochain-texte strong { font-size: 1.05rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prochain .distance { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--accent); white-space: nowrap; }
.prochain svg { width: 20px; height: 20px; flex: none; color: var(--accent); }
.prochain:active { background-color: color-mix(in srgb, var(--accent) 14%, var(--surface)); }
body.coureur .prochain-texte strong { font-size: 1.3rem; }
body.coureur .prochain .distance { font-size: 1.4rem; }
.actions { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
.action {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 64px;
  border: 1.5px solid var(--accent); border-radius: 14px; background: none; color: var(--accent);
  font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; padding: 6px 4px; text-align: center;
}
.action svg { width: 24px; height: 24px; }
.action.principale { background: var(--accent); color: var(--fond); }
.action:active { background-color: color-mix(in srgb, var(--accent) 16%, transparent); }
.action.principale:active { background-color: var(--accent); filter: brightness(.88); }

/* ─── Volets ─────────────────────────────────────────────────────────── */
dialog.volet {
  margin: auto auto 0; width: 100%; max-width: var(--mesure); max-height: 85dvh; padding: 0;
  border: 0; border-radius: 20px 20px 0 0; background: var(--fond); color: var(--texte);
  box-shadow: 0 -8px 30px rgba(0, 0, 0, .25);
}
dialog.volet[open] { display: flex; flex-direction: column; animation: volet-monte .22s ease-out; }
dialog.volet::backdrop { background: rgba(0, 0, 0, .45); }
@keyframes volet-monte { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.volet-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px max(16px, env(safe-area-inset-left)) 6px; border-bottom: 1px solid var(--trait); }
.volet-tete h2 { margin: 0; font-size: 1.1rem; }
.volet-fermer { min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--accent);
  background: none; color: var(--accent); font: inherit; font-weight: 600; cursor: pointer; }
.volet-corps { overflow-y: auto; overscroll-behavior: contain;
  padding: 12px max(16px, env(safe-area-inset-left)) calc(env(safe-area-inset-bottom) + 24px); }
.volet-corps .bouton + .bouton { margin-top: 10px; }
.volet-corps > .bouton:first-of-type { margin-top: 12px; }

/* ─── Lecture en cours ───────────────────────────────────────────────── */
.entete-lecture { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 8px; }
.retour { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; padding: 0 8px 0 0; margin-left: -6px;
  background: none; border: 0; color: var(--accent); font: inherit; font-weight: 600; cursor: pointer; }
.retour svg { width: 26px; height: 26px; }
.retour:active { opacity: .7; }
.rang { margin: 0; font-size: .88rem; color: var(--sourdine); font-variant-numeric: tabular-nums; }
/* La « pochette » : l'image du poste, ou son numéro posé sur la ligne de
   surface. Elle prend la hauteur qui reste : c'est elle qui rétrécit sur un
   petit téléphone, jamais les commandes. */
.pochette { flex: 1 1 auto; min-height: 88px; max-height: 40vh; border-radius: 18px; overflow: hidden; container-type: size;
  background: var(--surface); position: relative; display: grid; place-items: center; }
.pochette img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pochette-numero { font-size: clamp(2.5rem, 52cqh, 8rem); font-weight: 700; line-height: .8; color: var(--accent);
  position: absolute; left: 50%; bottom: 38%; transform: translate(-50%, 2px); z-index: 1; font-variant-numeric: tabular-nums; }
.pochette:not(:has(img))::after {
  content: ""; position: absolute; left: 0; right: 0; top: 62%; border-top: 2px solid var(--accent);
  background: linear-gradient(to bottom, color-mix(in srgb, var(--accent) 20%, transparent), transparent);
  height: 38%;
}
.titre-lecture { font-size: clamp(1.35rem, 6vw, 1.75rem); line-height: 1.2; margin: 14px 0 2px; text-wrap: balance; }
.sous-titre { margin: 0 0 4px; color: var(--sourdine); }
.sous-titre .voix-nom { display: block; font-size: .85rem; font-weight: 600; color: var(--accent); }
.provisoire { font-size: .8rem; font-weight: 600; color: var(--repere); margin: 0 0 4px; }
.consigne { border-left: 4px solid var(--repere); padding: 4px 10px; margin: 6px 0; font-size: .92rem; }
.ecouteurs { display: flex; gap: 8px; align-items: center; font-size: .88rem; color: var(--sourdine); margin: 4px 0; }
.ecouteurs svg { width: 22px; height: 22px; color: var(--accent); flex: none; }
.sans-audio { font-size: .92rem; color: var(--sourdine); margin: 8px 0 0; }

.lecteur { margin: 6px 0 4px; }
/* La barre de lecture est la ligne de surface, d'un bord à l'autre. */
.lecteur .surface { margin: 0 calc(-1 * max(16px, env(safe-area-inset-left))); position: relative; }
.lecteur .progression {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 44px; margin: 0;
  background: transparent; cursor: pointer; touch-action: pan-y;
}
.lecteur .progression::-webkit-slider-runnable-track {
  height: 3px; background: linear-gradient(to right, var(--accent) var(--fait, 0%), var(--trait) var(--fait, 0%));
}
.lecteur .progression::-moz-range-track { height: 3px; background: var(--trait); }
.lecteur .progression::-moz-range-progress { height: 3px; background: var(--accent); }
.lecteur .progression::-webkit-slider-thumb {
  -webkit-appearance: none; width: 20px; height: 20px; margin-top: -8.5px; border-radius: 50%;
  background: var(--accent); border: 3px solid var(--fond);
}
.lecteur .progression::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); border: 3px solid var(--fond); }
.lecteur .progression:disabled { cursor: default; }
.lecteur .progression:disabled::-webkit-slider-thumb { visibility: hidden; }
.lecteur .progression:disabled::-moz-range-thumb { visibility: hidden; }
.lecteur .temps { display: flex; justify-content: space-between; margin-top: -8px;
  font-size: .82rem; color: var(--sourdine); font-variant-numeric: tabular-nums; min-height: 1.2em; }
.lecteur .commandes { display: flex; align-items: center; justify-content: center; gap: 28px; margin: 6px 0 2px; }
.lecteur .lecture {
  flex: none; width: 72px; height: 72px; border-radius: 50%; border: 0;
  background: var(--accent); color: var(--fond); cursor: pointer; display: grid; place-items: center;
}
.lecteur .lecture svg { width: 24px; height: 24px; }
.lecteur .secondaire { flex: none; width: 52px; height: 52px; border-radius: 50%; border: 0; background: none;
  color: var(--accent); cursor: pointer; display: grid; place-items: center; }
.lecteur .secondaire svg { width: 30px; height: 30px; }
.lecteur .secondaire:active { background-color: color-mix(in srgb, var(--accent) 16%, transparent); }
.lecteur .lecture:active { filter: brightness(.88); }
.voix-telephone { text-align: center; font-size: .88rem; color: var(--sourdine); margin: 4px 0 0; }
.versions { margin: 6px 0 0; }
.versions-titre { margin-bottom: 4px; font-size: .8rem; }
.outils-lecture { display: flex; gap: 8px; margin-top: 10px; }
.outil { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 999px;
  border: 1.5px solid var(--accent); background: none; color: var(--accent); font: inherit; font-weight: 600; cursor: pointer; }
.outil svg { width: 18px; height: 18px; }
.outil:active { background-color: color-mix(in srgb, var(--accent) 16%, transparent); }
.volet-corps p { margin: 0 0 1em; }

/* ─── Lecteur réduit ─────────────────────────────────────────────────── */
.mini-lecteur { position: relative; background: var(--accent); color: var(--fond);
  padding: 8px max(16px, env(safe-area-inset-left)); padding-bottom: max(8px, env(safe-area-inset-bottom)); }
.mini-lecteur .dedans { max-width: var(--mesure); margin: 0 auto; display: flex; gap: 10px; align-items: center; }
.mini-lecteur #mini-lecture { flex: none; width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--fond);
  background: none; color: var(--fond); cursor: pointer; display: grid; place-items: center; }
.mini-lecteur svg { width: 18px; height: 18px; }
.mini-lecteur .quoi { flex: 1; min-width: 0; min-height: 48px; display: flex; flex-direction: column; justify-content: center;
  background: none; border: 0; color: var(--fond); font: inherit; font-size: .92rem; line-height: 1.3; text-align: left;
  cursor: pointer; padding: 0; }
.mini-lecteur .quoi strong, .mini-lecteur .quoi span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-lecteur .quoi span { opacity: .85; font-size: .85rem; }
.mini-progression { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: color-mix(in srgb, var(--fond) 30%, transparent); }
.mini-progression span { display: block; height: 100%; width: 0; background: var(--fond); }

@media (prefers-reduced-motion: reduce) { dialog.volet[open] { animation: none; } }

/* Une seule ligne de barre, même à 320 px : le nom se tronque, la bascule
   se resserre. */
.barre { flex-wrap: nowrap; gap: 10px; }
button.lieu { min-width: 0; flex: 1 1 auto; overflow: hidden; white-space: nowrap; display: flex; align-items: center; }
.bascule { flex: none; }
.bascule button { font-size: .8rem; padding: 6px 10px; }
@media (max-width: 359px) { .bascule button { padding: 6px 8px; font-size: .76rem; } button.lieu { letter-spacing: .04em; } }
/* Accueil plus dense : tout doit tenir au-dessus du bouton. */
.messages { margin: 0 0 8px; }
.messages li { padding: 8px 0; font-size: .95rem; line-height: 1.45; }
.ecran > .titre { margin: 12px 0 8px; }
.ecran > .trait-surface { margin-top: 12px; margin-bottom: 14px; }
.phrase { margin-bottom: 4px; }

/* Choix du parcours : la carte prend la hauteur qui reste. */
.zone-carte-traces { min-height: 140px; margin-bottom: 4px; }
.zone-carte-traces > .carte-traces { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; }
.consigne-courte { margin: 0 0 8px; color: var(--sourdine); font-size: .95rem; }
.choix-serre { gap: 8px; margin: 8px 0; }
.choix-serre button { min-height: 56px; padding: 10px 14px; }
.choix-serre button span { font-size: .88rem; }
.ecran > h1 { margin-top: 4px; }
@media (max-width: 359px) { button.lieu { letter-spacing: .02em; font-size: .72rem; } }

/* Choix du mode : quatre options doivent tenir sur un petit téléphone. */
.choix-serre button strong { font-size: 1.05rem; }
.choix-serre button span { line-height: 1.35; }
@media (max-width: 359px) {
  .bascule button { font-size: .72rem; padding: 5px 7px; min-height: 44px; }
  .barre { gap: 8px; }
}

/* ─── Liste des audioguides (racine du site) ─────────────────────────── */
.choix-projets { gap: 12px; }
.carte-projet { display: flex; align-items: center; gap: 14px; padding: 16px; min-height: 76px;
  border-radius: 14px; border: 1.5px solid var(--trait); background: var(--surface); color: var(--texte);
  text-decoration: none; box-shadow: inset 5px 0 0 var(--couleur-projet, var(--accent)); }
.carte-projet.suggere { border-color: var(--couleur-projet, var(--accent)); }
.carte-projet:active { background-color: color-mix(in srgb, var(--couleur-projet, var(--accent)) 10%, var(--surface)); }
.carte-projet-logo { width: 48px; height: 48px; object-fit: contain; flex: none; }
.carte-projet-texte { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.carte-projet-texte small { font-size: .8rem; color: var(--sourdine); }
.carte-projet-texte strong { font-size: 1.15rem; }
.carte-projet-texte span { font-size: .92rem; color: var(--sourdine); }
.carte-projet-texte .marque { color: var(--couleur-projet, var(--accent)); margin-top: 2px; }
a.lien-retour { display: inline-flex; align-items: center; }

/* Pause de la position : la ligne d'état et son bouton, côte à côte. */
.ligne-gps { display: flex; align-items: center; gap: 10px; }
.ligne-gps .etat-gps { flex: 1; min-width: 0; margin: 0; }
.etat-gps.en-pause { color: var(--texte); }
.bascule-gps { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px;
  border: 1.5px solid var(--accent); border-radius: 999px; background: transparent; color: var(--accent);
  font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; }
.bascule-gps svg { width: 18px; height: 18px; }
.bascule-gps.en-pause { background: var(--accent); color: var(--surface); }
.choix button small.note-batterie { display: block; margin-top: 4px; color: var(--sourdine); font-size: .82rem; }

/* Portail : l'éditeur et ses autres outils, discrets sous la liste. */
.pied-portail { margin-top: 32px; padding-top: 16px; border-top: 1px solid currentColor; border-color: color-mix(in srgb, currentColor 18%, transparent); font-size: .9rem; color: var(--sourdine); }
.pied-portail p { margin: 0 0 6px; }
.pied-portail a { color: inherit; }