/* ===========================================================================
   VESTA : la DISPOSITION des pages du portail, et les pastilles d'état.

   Couleurs, espacements, tailles, rayons : les jetons du socle, chacun avec sa
   valeur de repli. Seule exception, déclarée : l'ORANGE des pastilles. La
   charte n'a pas d'orange (son « avertissement » est un rouge sombre) ; il est
   posé ici une seule fois, en attendant d'être proposé au référentiel.
   =========================================================================== */

:root {
  --vesta-vert: var(--iav-succes-texte, #1B7A4B);
  --vesta-orange: #B4530A;
  --vesta-orange-fond: #FDF3E7;
  --vesta-orange-bordure: #F0C898;
  --vesta-rouge: var(--iav-erreur-texte, #A61B2B);
  --vesta-gris: var(--iav-texte-secondaire, #5A6B7F);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) { --vesta-orange: #F5A455; --vesta-orange-fond: #2E2114; --vesta-orange-bordure: #5C4023; }
}
:root[data-theme="sombre"] { --vesta-orange: #F5A455; --vesta-orange-fond: #2E2114; --vesta-orange-bordure: #5C4023; }

.vesta-page { display: flex; flex: 1 0 auto; align-items: stretch; }
.vesta-corps { flex: 1 1 auto; min-width: 0; padding: var(--iav-espace-large, 24px); box-sizing: border-box; }
.vesta-corps > * { max-width: var(--iav-largeur-lecture, 72rem); }
.vesta-titre { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--iav-espace-moyen, 16px); margin-bottom: var(--iav-espace-large, 24px); }
.vesta-titre h1 { margin: 0; }
.vesta-bloc { margin-bottom: var(--iav-espace-large, 24px); }
.vesta-note { color: var(--iav-texte-secondaire, #5A6B7F); font-size: var(--iav-taille-secondaire, 12px); }
@media (max-width: 800px) {
  .vesta-page { flex-direction: column; }
  .vesta-corps { padding: var(--iav-espace-moyen, 16px); }
}

/* La pastille : un point de couleur, toujours accompagné d'un texte. */
.vesta-pastille { display: inline-block; flex: 0 0 auto; width: 0.85em; height: 0.85em;
  border-radius: var(--iav-rayon-rond, 999px); background: var(--vesta-gris); vertical-align: -0.05em;
  margin-right: var(--iav-espace-petit, 8px); }
.vesta-pastille-vert { background: var(--vesta-vert); }
.vesta-pastille-orange { background: var(--vesta-orange); }
.vesta-pastille-rouge { background: var(--vesta-rouge); }

/* Le bandeau d'état général. */
.vesta-global { display: flex; align-items: center; gap: var(--iav-espace-moyen, 16px);
  padding: var(--iav-espace-large, 24px); margin-bottom: var(--iav-espace-large, 24px);
  border: var(--iav-trait, 1px) solid var(--iav-bordure, #D6DEE8); border-radius: var(--iav-rayon-grand, 12px);
  background: var(--iav-fond-bloc, #FFFFFF); box-shadow: var(--iav-ombre-carte, none); }
.vesta-global-point { flex: 0 0 auto; width: 3.5rem; height: 3.5rem; border-radius: var(--iav-rayon-rond, 999px);
  background: var(--vesta-gris); }
.vesta-global-titre { margin: 0; font-size: var(--iav-taille-titre-fort, 24px); font-weight: var(--iav-graisse-forte, 700); }
.vesta-global-texte { margin: var(--iav-espace-minuscule, 4px) 0 0 0; color: var(--iav-texte-secondaire, #5A6B7F); }
.vesta-global-vert { border-color: var(--iav-succes-bordure, #BFE3CE); background: var(--iav-succes-fond, #EDF7F1); }
.vesta-global-vert .vesta-global-point { background: var(--vesta-vert); }
.vesta-global-orange { border-color: var(--vesta-orange-bordure); background: var(--vesta-orange-fond); }
.vesta-global-orange .vesta-global-point { background: var(--vesta-orange); }
.vesta-global-rouge { border-color: var(--iav-erreur-bordure, #E8B4B8); background: var(--iav-erreur-fond, #FBEDEE); }
.vesta-global-rouge .vesta-global-point { background: var(--vesta-rouge); }

/* Les composants : une carte chacun, repliable pour le détail. */
.vesta-composants { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: var(--iav-espace-moyen, 16px); margin-bottom: var(--iav-espace-large, 24px); }
.vesta-composant { padding: var(--iav-espace-moyen, 16px); border: var(--iav-trait, 1px) solid var(--iav-bordure, #D6DEE8);
  border-radius: var(--iav-rayon, 8px); background: var(--iav-fond-bloc, #FFFFFF); box-shadow: var(--iav-ombre-carte, none);
  border-left: var(--iav-espace-minuscule, 4px) solid var(--vesta-gris); }
.vesta-composant-vert { border-left-color: var(--vesta-vert); }
.vesta-composant-orange { border-left-color: var(--vesta-orange); }
.vesta-composant-rouge { border-left-color: var(--vesta-rouge); }
.vesta-composant-nom { display: flex; align-items: center; margin: 0; font-size: var(--iav-taille-intertitre, 16px);
  font-weight: var(--iav-graisse-semi, 600); }
.vesta-composant-resume { margin: var(--iav-espace-petit, 8px) 0 0 0; color: var(--iav-texte-secondaire, #5A6B7F); }
.vesta-composant details { margin-top: var(--iav-espace-petit, 8px); }
.vesta-composant summary { cursor: pointer; color: var(--iav-bleu-lien, #2B6CB0); font-size: var(--iav-taille-secondaire, 12px); }
.vesta-details { margin: var(--iav-espace-petit, 8px) 0 0 0; display: grid; grid-template-columns: auto 1fr;
  gap: var(--iav-espace-minuscule, 4px) var(--iav-espace-moyen, 16px); font-size: var(--iav-taille-secondaire, 12px); }
.vesta-details dt { color: var(--iav-texte-secondaire, #5A6B7F); }
.vesta-details dd { margin: 0; }

.vesta-demo { margin-bottom: var(--iav-espace-moyen, 16px); }
.vesta-jeton { display: block; padding: var(--iav-espace-moyen, 16px); overflow-wrap: anywhere;
  font-family: var(--iav-police-mono, monospace); border: var(--iav-trait, 1px) dashed var(--iav-bordure, #D6DEE8);
  border-radius: var(--iav-rayon, 8px); background: var(--iav-fond-bloc, #FFFFFF); }
.vesta-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: var(--iav-espace-petit, 8px); }
.vesta-ligne .iav-controle { flex: 1 1 9rem; min-width: 0; }
.vesta-centre { flex: 1 0 auto; display: flex; align-items: center; justify-content: center; padding: var(--iav-espace-large, 24px); }
.vesta-centre-boite { max-width: 30rem; text-align: center; }

/* L'en-tête : le titre du service et, dessous, la ligne de présentation de la
   société, à côté du logo. Même disposition et mêmes mesures que le bandeau de
   la fiche de réception de la maison (68 px de haut, titre 16 px, ligne 12 px). */
.iav-entete { min-height: 68px; box-sizing: border-box; padding: 10px 14px; gap: 10px; }
.vesta-entete-titres { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.vesta-entete-titre { font-size: var(--iav-taille-intertitre, 16px); font-weight: var(--iav-graisse-semi, 600);
  line-height: var(--iav-interligne-serre, 1.3); color: var(--iav-texte-inverse, #FFFFFF);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 480px) { .vesta-entete-titres .iav-entete-slogan { display: none; } }
/* Le nom de code, dans le pied : en gras, de la couleur du texte qui l'entoure. */
.vesta-nom-de-code { font-weight: var(--iav-graisse-forte, 700); letter-spacing: 1.5px; cursor: help;
  border-bottom: var(--iav-trait, 1px) dotted var(--iav-gris-pied, #5A6B7F); }
/* La même pile de polices que le bandeau et le pied de la fiche de réception. */
.iav-entete, .pied { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
/* Le pied : même structure et mêmes mesures dans les deux thèmes. En clair, les
   couleurs de la fiche de réception. En sombre (correction du 08/10/2026), les
   jetons sombres du socle s'appliquent : fond sombre, texte clair, « depuis 2008 »
   dans le rouge du thème sombre. Rien n'est redéfini ici. */