/* ParkStreet — unique feuille de style. Charte reprise de ParkTarifs (E04).
   Charte Metz Parkings : bleu #2F398E, jaune #FFDD05, blanc.
   Règle de contraste : le jaune n'est JAMAIS du texte sur fond clair (1,35:1). Il sert d'accent sur
   le bleu, de liseré, d'aplat. tests/interface.test.js vérifie la palette et cette règle.
   De 360 px (téléphone de terrain) au bureau (guichet) : une colonne, jamais de défilement horizontal. */

:root {
  --bleu: #2F398E;
  --jaune: #FFDD05;
  --blanc: #FFFFFF;
  --fond: #F3F4F8;
  --texte: #1B1F3B;
  --texte-secondaire: #4A4F6A;
  --bordure: #D3D6E2;
  --bordure-champ: #767B96;
  --erreur: #B3261E;
  --erreur-fond: #FCEEEE;
  --avertissement-fond: #FFF7CC;
  --survol: #FFF7D1;
  --texte-sur-bleu: #C2C7E8;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.4;
  color: var(--texte);
  background: var(--fond);
  overflow-wrap: anywhere;
}

:focus-visible { outline: 3px solid var(--bleu); outline-offset: 2px; }
[hidden] { display: none !important; }
p { margin: 0.25rem 0; }

/* --- Bandeau supérieur (comme ParkTarifs) ---------------------------------------------------- */

.bandeau {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1.25rem;
  padding: 0.4rem 1rem;
  background: var(--bleu);
  color: var(--blanc);
}
/* Le fond du logo est exactement le bleu du bandeau : posé à nu, sans pastille ni cadre. */
.bandeau .logo { height: 40px; width: auto; display: block; }
.bandeau-titre { font-weight: 600; font-size: 1.05rem; }

/* --- Alertes ---------------------------------------------------------------------------------- */

.alertes { max-width: 760px; margin: 0 auto; padding: 0 1rem; }
.alerte {
  margin: 0.6rem 0 0;
  padding: 0.5rem 0.75rem;
  background: var(--avertissement-fond);
  border-left: 5px solid var(--jaune);
  color: var(--texte);
  font-weight: 600;
}

/* --- Contenu ---------------------------------------------------------------------------------- */

.contenu { max-width: 760px; margin: 0 auto; padding: 1rem 1rem 2rem; }
.panneau { background: var(--blanc); border: 1px solid var(--bordure); padding: 1rem; }
.chargement { padding: 1rem; background: var(--blanc); border: 1px solid var(--bordure); }
.chargement.erreur, .message.erreur { color: var(--erreur); font-weight: 600; }
.note, .message { color: var(--texte-secondaire); font-size: 0.9rem; }
.message { min-height: 1.3rem; margin-top: 0.4rem; }
/* Ligne des sources, permanente en bas de page (D79) : sur le fond de la page, en texte secondaire. */
.sources { max-width: 760px; margin: 0 auto; padding: 0 1rem 1.5rem; color: var(--texte-secondaire); font-size: 0.85rem; }
.sources p { margin: 0; }
#etiquette { display: block; font-weight: 700; color: var(--bleu); font-size: 1.1rem; }

/* --- Champ adresse et liste de suggestions (combobox) ------------------------------------------ */

.combobox { position: relative; margin-top: 0.5rem; }
/* 16 px au moins : un téléphone ne zoome pas sur le champ ; 48 px de haut, confortable au doigt. */
#adresse {
  width: 100%;
  min-height: 48px;
  font: inherit;
  font-size: 1.05rem;
  color: var(--texte);
  background: var(--blanc);
  border: 1px solid var(--bordure-champ);
  border-radius: 4px;
  padding: 0.5rem 3rem 0.5rem 0.75rem; /* place du bouton ✕ à droite */
}
/* Bouton ✕ (D63) : vide le champ et le résultat ; 44 × 44 px au moins, posé dans le champ. */
.effacer {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 44px;
  min-height: 44px;
  font: inherit;
  font-size: 1.1rem;
  color: var(--texte-secondaire);
  background: var(--blanc);
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}
.effacer:hover { color: var(--texte); background: var(--fond); }
.suggestions {
  list-style: none;
  margin: 0.25rem 0 0;
  padding: 0;
  background: var(--blanc);
  border: 1px solid var(--bordure-champ);
  border-radius: 4px;
}
.suggestions li {
  min-height: 44px;
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid var(--bordure);
  cursor: pointer;
}
.suggestions li:last-child { border-bottom: 0; }
.suggestions li:hover, .suggestions li[aria-selected="true"] { background: var(--survol); color: var(--texte); }
.suggestions li[aria-selected="true"] { box-shadow: inset 4px 0 0 var(--bleu); }

/* --- Résultat --------------------------------------------------------------------------------- */

.resultat { margin-top: 1rem; }
.resultat-pour { font-weight: 600; color: var(--texte); }

/* Bloc résident, en gros : fond bleu, liseré jaune (comme le prix de ParkTarifs). */
.bloc-resident {
  margin-top: 0.75rem;
  padding: 0.9rem 1rem;
  background: var(--bleu);
  color: var(--blanc);
  border-left: 8px solid var(--jaune);
}
.bloc-resident .message-resident { font-weight: 600; font-size: 1.05rem; margin-bottom: 0.5rem; }
.bloc-resident .zone { font-size: 1.6rem; font-weight: 700; line-height: 1.2; margin: 0.4rem 0 0.2rem; color: var(--blanc); }
.bloc-resident .abonnement, .bloc-resident .deuxieme { color: var(--texte-sur-bleu); }

/* Avertissement du noir : il concerne l'abonné, juste après le bloc résident (D44). Style « erreur » de
   la charte ParkTarifs (D64) : liseré rouge, fond rouge clair ; le jaune reste au mode hors ligne. */
.alerte-noir { margin-top: 0.75rem; background: var(--erreur-fond); border-left-color: var(--erreur); }

/* Bloc tarifaire, plus petit. */
.bloc-tarifaire {
  margin-top: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  font-size: 0.95rem;
}
.bloc-tarifaire .lettre { font-weight: 700; color: var(--bleu); margin-top: 0.4rem; }
.bloc-tarifaire .mention { color: var(--texte-secondaire); font-size: 0.85rem; margin-top: 0.4rem; }

/* Prix : un élément (« 65 €/trimestre », « 1h15 1,50 € ») ne se coupe jamais ; la ligne ne passe à la
   ligne qu'entre deux éléments, au « · ». Sans cette règle, Safari coupe après la barre oblique. */
.insecable { white-space: nowrap; }