/* L'outil de calendrier vaccinal (vague 7, lot R5). Chargée par la SEULE page de
   l'outil (une feuille de plus dans le <head> de neuf pages, aucune empreinte
   `?v=` de page voisine ne bouge). Les jetons — couleurs, mode sombre — viennent
   de coque.css ; rien n'est redéfini ici. Les contrastes (AA) sont ceux des
   jetons : le texte est en --encre ou --acier sur --surface ou --fond, les
   pastilles reprennent celles des guides (`.confiance-guide`).

   Le HTML de l'outil est servi `hidden` : le module (calendrier.js) le révèle
   quand il a chargé ses données. Sans JavaScript, la page montre le message de
   <noscript> et la liste des guides — rien n'est cassé. `[hidden]` l'emporte ici
   sur les `display` ci-dessous. */
.outil-calendrier[hidden],
.outil-indisponible[hidden],
.outil-installer[hidden] { display: none !important; }

.outil-sans-js, .outil-indisponible {
  margin: 0 0 18px; padding: 12px 16px; background: var(--corail-doux);
  border-left: 3px solid var(--corail); border-radius: 0 10px 10px 0;
  color: var(--encre);
}

/* Le formulaire : trois champs côte à côte sur un grand écran, empilés sur un
   téléphone (les champs gardent 44 px de haut, le bouton 48). */
.outil-formulaire {
  display: grid; gap: 14px; margin: 0 0 18px; padding: 20px;
  background: var(--surface); border: 1px solid var(--bord); border-radius: 14px;
  box-shadow: var(--ombre);
}
@media (min-width: 720px) {
  .outil-formulaire { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
  .outil-formulaire button { grid-column: 1 / -1; }
}
.outil-formulaire .champ { min-width: 0; }
.outil-formulaire label { display: block; margin: 0 0 4px; font-size: 16px; font-weight: 600; }
.outil-formulaire :is(select, input) {
  box-sizing: border-box; width: 100%; max-width: 100%; min-width: 0; min-height: 44px; padding: 10px 12px; font: inherit; font-size: 17px;
  color: var(--encre); background: var(--fond); border: 1px solid var(--acier);
  border-radius: 10px;
}
/* Safari iOS : un champ de date garde sa largeur « naturelle » et sort de la
   carte (les deux listes, elles, s'arrêtent à la marge). On retire l'apparence
   native — le sélecteur de date, lui, reste le natif — et on borne la largeur. */
.outil-formulaire input[type="date"] {
  display: block; -webkit-appearance: none; appearance: none; text-align: left;
  padding-top: 7px; padding-bottom: 7px;
}
.outil-formulaire input[type="date"]::-webkit-date-and-time-value { text-align: left; }
/* Vide, ce champ n'affiche RIEN sur iPhone (un rectangle blanc, là où les listes
   disent « Choisir… ») : on y met le même mot. Réservé à WebKit sur iOS
   (`-webkit-touch-callout` n'existe que là) — ailleurs le champ montre déjà son
   format (jj/mm/aaaa). `data-invite` et `.rempli` sont posés par calendrier.js. */
@supports (-webkit-touch-callout: none) {
  .outil-formulaire input[type="date"]:not(.rempli)::before {
    content: attr(data-invite); color: var(--acier);
  }
}
.outil-formulaire [aria-invalid="true"] { border: 2px solid var(--corail-texte); }
.outil-formulaire .aide { margin: 6px 0 0; font-size: 14.5px; color: var(--acier); }
.outil-formulaire button {
  min-height: 48px; padding: 13px; font: inherit; font-size: 17px; font-weight: 700;
  color: var(--sur-vert); background: var(--vert); border: none; border-radius: 12px;
  cursor: pointer;
}

/* Les erreurs : une région `role="alert"`, toujours présente, qui ne prend de
   place que remplie. Elle est AU-DESSUS du formulaire : le focus remonte au
   premier champ en erreur, la liste doit se voir dans le même écran. */
.outil-erreurs:not(:empty) {
  margin: 0 0 16px; padding: 10px 14px 10px 8px; background: var(--corail-doux);
  border-left: 3px solid var(--corail); border-radius: 0 10px 10px 0;
  color: var(--encre); font-weight: 600;
}
.outil-erreurs ul { margin: 0; padding-left: 20px; }

/* Le résultat. */
.outil-resultat h3 { margin: 6px 0 10px; font-size: 21px; scroll-margin-top: 80px; }
.outil-resultat h3:focus { outline: none; }
.outil-resultat .groupe { margin: 24px 0 8px; font-size: 17px; }
.pastilles-outil { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 14px; }
.pastilles-outil span {
  background: var(--vert-doux); color: var(--vert); font-weight: 600; font-size: 13.5px;
  padding: 3px 10px; border-radius: 20px;
}
.vaccin {
  margin: 0 0 10px; padding: 12px 16px; background: var(--surface);
  border: 1px solid var(--bord); border-radius: 12px; box-shadow: var(--ombre);
}
.vaccin h5 { margin: 0 0 2px; font-size: 18px; line-height: 1.35; }
.vaccin .descriptif { margin: 0 0 8px; color: var(--acier); font-size: 15.5px; }
.vaccin .sans-date { margin: 4px 0 0; }
.etiquette-legale {
  display: inline-block; margin-left: 4px; padding: 1px 9px; vertical-align: 1px;
  background: var(--corail-doux); color: var(--corail-texte); font-size: 13px;
  font-weight: 700; border-radius: 20px;
}
.etapes { margin: 0; padding: 0; list-style: none; }
.etapes li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px;
  padding: 6px 0; border-top: 1px solid var(--bord);
}
.etapes li:first-child { border-top: none; }
.etapes .etape { min-width: 7.5em; font-weight: 600; }
.etapes .passee { color: var(--encre); }   /* « dès que possible » : le message utile, pas une mention grise */
.note-outil { margin: 12px 0; color: var(--acier); font-size: 15.5px; }

/* L'export : une case, un bouton, une note. */
.export-bloc { margin: 20px 0; }
.export-bloc .case { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.export-bloc .case input { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--vert); }
.export-bloc .case label { font-size: 16px; }
.export-bloc button {
  min-height: 48px; padding: 12px 20px; font: inherit; font-size: 17px; font-weight: 700;
  color: var(--sur-vert); background: var(--vert); border: none; border-radius: 12px;
  cursor: pointer;
}
/* Sans date à exporter, le bouton est désactivé ET une phrase visible dit
   pourquoi (jamais un clic muet). */
.export-bloc button:disabled {
  color: var(--acier); background: transparent; border: 2px dashed var(--acier);
  cursor: not-allowed;
}
/* Vide, la phrase ne prend pas de place mais RESTE dans l'arbre : une région d'état
   masquée par `display: none` n'annonce pas le texte qui y revient. */
.export-bloc #cal-export-etat:empty { margin: 0; }

/* Les sources du pays, comme sur les guides. */
.sources-outil { margin: 0 0 8px; padding-left: 20px; font-size: 15.5px; }
.sources-outil li { margin: 0 0 6px; overflow-wrap: anywhere; }

/* L'appel à installer sous le résultat : la carte de l'encart de fin de page,
   resserrée. */
.outil-installer { margin: 28px 0 8px; }
.outil-installer h3 { margin: 0 0 8px; font-size: 21px; }