/* Écrans du parcours mobile (maquettes M2, M2b, M2c, M5, M6). Un bloc marqué data-sur n'est affiché que sur les écrans
   qu'il cite : le script lui ajoute la classe .hors-ecran sur les autres (voir js/ecrans.js).
   Tailles de texte en rem, jamais sous 0,9375rem (15 px). */

.hors-ecran { display: none !important; }

/* Titres et textes d'écran (Kalam pour le titre, Quicksand pour le texte). */
.titre-ecran { margin: 0; font-size: var(--text-title); line-height: 1.15; }
.texte-ecran { margin: 0; font-size: var(--text-input); line-height: 1.5; }
.actions-ecran { display: flex; flex-direction: column; gap: var(--space-3); }
.note-centree { margin: 0; text-align: center; font-size: var(--text-body-sm); }

/* M2 : position à autoriser. */
.ecran-position { display: flex; flex-direction: column; gap: 1.125rem; padding-top: var(--space-5); }
.ecran-position .titre-ecran { font-size: 1.875rem; }
.ecran-position .texte-ecran { font-size: var(--text-body); }
.ecran-position .actions-ecran { margin-top: var(--space-4); }
.dessin-position { display: block; width: 100%; max-width: 18.75rem; margin: 0 auto; }
#locate:disabled { opacity: 0.75; cursor: progress; }

/* Photo de l'utilisateur dans son cadre de carnet ; le bandeau fait partie de l'aperçu (image finale). */
.carte-photo { margin: var(--space-4) auto var(--space-6); }
.carte-photo canvas { background: var(--banner); }

/* M3 : liste « Où étiez-vous ? » (PlaceOption). Le vrai bouton radio reste accessible au clavier, le rond dessiné le remplace. */
.lieux { display: flex; flex-direction: column; gap: var(--space-4); margin-bottom: 1.125rem; }
.titre-lieux { font-size: var(--text-title-sm); }
.liste-lieux { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.625rem; }
.liste-lieux .pn-place { position: relative; overflow-wrap: anywhere; }
.liste-lieux .pn-place:has(input:checked) { background: var(--cream); }
.liste-lieux input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.liste-lieux .pn-radio i { display: none; }
.liste-lieux input:checked + .pn-radio i { display: block; }
.liste-lieux .pn-place:has(input:focus-visible) { outline: 3px solid var(--ink); outline-offset: 3px; }

/* Édition de la légende (M2b, M2c, M3, M4, M5). */
#legend-section > [data-sur] { display: flex; flex-direction: column; gap: 1.125rem; }
#legend-section .legend-meta { margin: -0.75rem 0 0; }
/* Sans remarque, le paragraphe vide ne prend pas de place (plus de compteur au-dessus de l'avertissement). */
#legend-section .legend-meta:has(> #legend-note:empty) { display: none; }
#legend { resize: vertical; }
#place-note { margin: 0; font-size: var(--text-body-sm); }
#export-status:empty { display: none; }

/* M6 : après le téléchargement. */
#ready { display: flex; flex-direction: column; gap: 1.125rem; margin-top: 0; }
.titre-final { display: flex; align-items: center; gap: 0.625rem; margin: 0; font-family: var(--font-title); font-size: var(--text-title); line-height: 1.15; }
.titre-final svg { flex: none; }
.note-detail { margin: -0.5rem 0 0; font-size: var(--text-body-sm); overflow-wrap: anywhere; }
.note-detail:empty { display: none; }
#ready .secondary { margin: 0; }
#ready-status:empty { display: none; }

/* Bloc d'aide repliable (M6, D4) : HelpTip du Design System, ombre bleue comme sur les maquettes. */
.aide { box-shadow: 4px 5px 0 var(--sky); }
.aide summary .chev { flex: none; }
.aide .body p { margin: 0; }
.aide h3 { margin: var(--space-2) 0 0; font-family: var(--font-body); font-weight: 700; font-size: 1rem; }
.aide ol { margin: 0; padding-left: 1.375rem; display: flex; flex-direction: column; gap: var(--space-1); }
.aide .body > div { display: flex; flex-direction: column; gap: var(--space-3); }
/* Une ligne vide entre les sections Android et iPhone (pas de trait). */
.aide .body > div > div + div { margin-top: var(--space-3); }
.aide .aide-lien a { font-size: var(--text-body-sm); text-underline-offset: 4px; }
.aide .aide-masquer .link-button { padding-left: 0; }

/* Ordinateur (D1 à D4) : deux colonnes, la photo à gauche, le contenu de l'écran à droite. body[data-colonnes="2"] est
   posé par le script seulement sur ordinateur (js/ecrans.js, deuxColonnes) : la tablette reste en une colonne. */
@media (min-width: 60rem) {
  [data-colonnes="2"] #application {
    max-width: 73.75rem; padding: var(--space-4) var(--space-7) 3.5rem;
    display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: 3.5rem; align-items: start;
  }
  [data-colonnes="2"] #application > * { grid-column: 2; }
  [data-colonnes="2"] #application > .carte-photo { grid-column: 1; grid-row: 1 / span 20; max-width: none; margin: var(--space-4) 0 0; }
  [data-colonnes="2"] .titre-ecran { font-size: 2.25rem; }
  [data-colonnes="2"] .titre-lieux { font-size: 1.875rem; }
  [data-colonnes="2"] .texte-ecran { font-size: 1.25rem; }
  [data-colonnes="2"] .titre-final { font-size: 2.125rem; }
}

/* Lecture et recherche des lieux : le bouton photo de l'accueil n'a pas d'utilité. */
body[data-occupe="1"] .hero-action { display: none; }