/* Mise en page de l'application actuelle, aux couleurs et polices du Design System (css/tokens.css).
   Les écrans du parcours (accueil, M1 à M6, D1 à D4) viendront dans les PR suivantes avec css/composants.css.
   Tailles de texte en rem, jamais sous 0,9375rem (15 px). */
* { box-sizing: border-box; }
/* Les règles display des classes (.button, #ready…) ne doivent pas annuler l'attribut hidden. */
[hidden] { display: none !important; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font-family: var(--font-body); font-weight: 600; font-size: var(--text-body); line-height: 1.5;
}
/* Zone de l'application (résultat de la photo) : colonne étroite, lisible au téléphone. L'accueil : css/accueil.css. */
#application { max-width: 36rem; margin: 0 auto; padding: 0 var(--space-5) var(--space-6); }
h1, h2, h3 { font-family: var(--font-title); font-weight: 400; line-height: 1.15; }
h2 { font-size: var(--text-title-sm); }
#application h3 { font-size: var(--text-body); font-family: var(--font-body); font-weight: 700; }
a { color: var(--ink); }

/* Le vrai champ fichier est masqué : le libellé joue le rôle de bouton, et reste accessible au clavier. */
#photo-input, #existing-input { position: absolute; width: 1px; height: 1px; opacity: 0; }

/* Bouton principal : forme dessinée à la main du Design System (voir .pn-btn). */
.button {
  display: flex; align-items: center; justify-content: center; gap: var(--space-3); width: 100%; min-height: 3.875rem; padding: var(--space-3) var(--space-5);
  border: var(--border-strong) solid var(--ink); border-radius: var(--radius-hand);
  background: var(--peach); color: var(--ink); box-shadow: var(--shadow-button);
  font-family: var(--font-body); font-weight: 700; font-size: var(--text-button); line-height: 1.2; text-align: center; cursor: pointer;
}
.button:disabled { opacity: 0.75; cursor: progress; }
.button:focus-visible, .button:has(+ #photo-input:focus-visible) { outline: 3px solid var(--ink); outline-offset: 3px; }

#status { min-height: 1.5em; margin-top: 0; overflow-wrap: anywhere; }
#reduction-note { margin: var(--space-1) 0 0; font-size: var(--text-body-sm); }

/* Liste des lieux et champ de légende : css/ecrans.css et css/composants.css (.pn-place, .pn-input). */
.credit { margin-top: var(--space-6); font-size: var(--text-body-sm); }

.legend-meta { margin: var(--space-1) 0 var(--space-4); font-size: var(--text-body-sm); }
/* Aperçu : la vraie image finale, dans la carte photo (css/ecrans.css). */
#preview { display: block; width: 100%; height: auto; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#export-status { min-height: 1.5em; font-size: var(--text-body-sm); overflow-wrap: anywhere; }

/* Lien secondaire « Choisir une photo existante » (iPhone) et boutons discrets. */
.secondary { margin: var(--space-3) 0 0; text-align: center; }
.link-button {
  display: inline-block; padding: var(--space-3) var(--space-2); min-height: 3rem;
  background: none; border: 0; color: var(--ink); text-decoration: underline;
  font-family: var(--font-body); font-weight: 700; font-size: var(--text-label); cursor: pointer;
}
.link-button:focus-visible, .link-button:has(+ #existing-input:focus-visible) { outline: 3px solid var(--ink); outline-offset: 3px; }

/* Traitement en cours : une roue devant le texte (plus lente si l'utilisateur réduit les animations). */
.busy::before {
  content: ''; display: inline-block; width: 1em; height: 1em; margin-right: 0.5em; vertical-align: -0.15em;
  border: 0.15em solid var(--sky); border-top-color: var(--ink); border-radius: 50%; animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .busy::before { animation-duration: 3s; } }

#debug { margin-top: var(--space-5); padding: var(--space-2); font-size: var(--text-body-sm); background: var(--paper); border: 1px solid var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }


/* Écran final (téléphone) : enregistrer / partager, aide pour activer la position. */
#ready { margin-top: var(--space-2); display: flex; flex-direction: column; }
#save-wrap { margin: var(--space-3) 0 0; }

/* Légende par IA : attente ou message sous « Raconter ce lieu » ; l'avertissement est un .pn-warn (jamais de rouge). */
#ai-status { margin: 0; font-size: var(--text-body-sm); overflow-wrap: anywhere; }
#ai-status:empty { display: none; }
#ai-badge { margin: -0.5rem 0 0; }