/* ==========================================================================
   PADC — composants réutilisables
   En-tête · boutons · champs · recherche · badges · cartes · notices ·
   navigation secondaire · tableaux · chronologie · étapes · squelettes ·
   états · citations · récapitulatif · pied de page · logos
   ========================================================================== */

/* --- En-tête du portail ---------------------------------------------------- */
.entete {
  position: relative;
  z-index: 10;
  background: var(--surface);
  border-bottom: 1px solid var(--trait);
}
.entete__interieur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  min-height: var(--hauteur-entete);
}
.marque {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  padding-block: var(--e-2);
  color: var(--encre);
  text-decoration: none;
  border-radius: var(--r-2);
}
.marque:hover { color: var(--encre); }
.marque__logo { height: 56px; width: auto; }
.marque__texte { display: flex; flex-direction: column; line-height: 1.15; margin-inline-start: calc(-1 * var(--e-4)); }
.marque__sigle {
  font-family: var(--police-titre);
  font-size: 1.2rem;
  font-weight: 750;
  letter-spacing: 0.05em;
  color: var(--vert-800);
}
.marque__nom { max-width: 17.5em; font-size: 0.78rem; color: var(--encre-3); }

.nav-principale ul {
  display: flex;
  align-items: stretch;
  gap: var(--e-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav-principale li + li { margin-top: 0; }
.nav-principale a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  min-height: 44px;
  padding: var(--e-2) var(--e-3);
  border-radius: var(--r-2);
  color: var(--encre-2);
  font-size: var(--taille-s);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.nav-principale a .icone { color: var(--vert-600); }
.nav-principale a:hover { background: var(--vert-50); color: var(--vert-900); }
.nav-principale a[aria-current="page"] { color: var(--vert-900); background: var(--vert-50); }
.nav-principale a[aria-current="page"]::after {
  content: "";
  position: absolute;
  inset-inline-start: var(--e-3);
  inset-inline-end: var(--e-3);
  bottom: 2px;
  height: 3px;
  border-radius: 3px;
  background: var(--vert-500);
}
.bouton-menu { display: none; }

@media (max-width: 64rem) {
  .marque__logo { height: 44px; }
  .bouton-menu {
    display: inline-flex;
    align-items: center;
    gap: var(--e-2);
    min-height: 44px;
    padding: var(--e-2) var(--e-3);
    border: 1px solid var(--trait-fort);
    border-radius: var(--r-2);
    background: var(--surface);
    font-weight: 650;
    color: var(--encre);
  }
  .bouton-menu[aria-expanded="true"] { background: var(--vert-50); border-color: var(--vert-600); }
  .nav-principale {
    position: absolute;
    inset-inline-start: 0;
    inset-inline-end: 0;
    top: 100%;
    display: none;
    background: var(--surface);
    border-bottom: 1px solid var(--trait);
    box-shadow: var(--ombre-3);
  }
  .nav-principale.est-ouverte { display: block; }
  .nav-principale ul {
    flex-direction: column;
    gap: 0;
    padding: var(--e-2) var(--gouttiere) var(--e-4);
  }
  .nav-principale a {
    display: flex;
    min-height: 52px;
    font-size: var(--taille-m);
    border-radius: var(--r-2);
  }
  .nav-principale a[aria-current="page"]::after { inset-inline-start: 0; inset-inline-end: auto; top: 10px; bottom: 10px; width: 4px; height: auto; }
}
@media (max-width: 36rem) {
  .marque__nom { display: none; }
  .marque__logo { height: 40px; }
}

/* --- Boutons ---------------------------------------------------------------- */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: 44px;
  padding: 0.625rem 1.125rem;
  border: 2px solid transparent;
  border-radius: var(--r-2);
  background: var(--vert-700);
  color: #fff;
  font-weight: 650;
  font-size: var(--taille-m);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 2px 0 var(--vert-900);
  transition: background-color var(--duree-courte) var(--courbe-standard), box-shadow var(--duree-courte), transform var(--duree-courte);
}
.bouton:hover { background: var(--vert-800); color: #fff; text-decoration: none; }
.bouton:active { transform: translateY(2px); box-shadow: none; }
.bouton:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.bouton--secondaire {
  background: var(--surface);
  color: var(--vert-800);
  border-color: var(--vert-700);
  box-shadow: none;
}
.bouton--secondaire:hover { background: var(--vert-50); color: var(--vert-900); }
.bouton--tertiaire {
  background: transparent;
  color: var(--vert-700);
  box-shadow: none;
  padding-inline: var(--e-2);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}
.bouton--tertiaire:hover { background: var(--vert-50); color: var(--vert-900); }
.bouton--danger { background: var(--erreur); box-shadow: 0 2px 0 #7a160f; }
.bouton--danger:hover { background: #8f1c13; }
.bouton--grand { min-height: 56px; padding: 0.875rem 1.75rem; font-size: var(--taille-l); border-radius: var(--r-3); }
.bouton--petit { min-height: 36px; padding: 0.375rem 0.75rem; font-size: var(--taille-s); }
.bouton--bloc { width: 100%; }
.bouton[disabled], .bouton[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}
.groupe-boutons { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3); }

/* --- Champs de formulaire -------------------------------------------------- */
.champ { margin-bottom: var(--e-5); }
.champ__label, .groupe-champs legend {
  display: block;
  margin-bottom: var(--e-1);
  font-weight: 650;
  color: var(--encre);
}
.champ__label .facultatif, legend .facultatif { font-weight: 400; color: var(--encre-3); }
.champ__aide { display: block; margin: 0 0 var(--e-2); color: var(--encre-3); font-size: var(--taille-s); }
.champ__erreur {
  display: flex;
  align-items: flex-start;
  gap: var(--e-2);
  margin: 0 0 var(--e-2);
  color: var(--erreur);
  font-weight: 650;
}
.champ--erreur { padding-inline-start: var(--e-4); border-inline-start: 4px solid var(--erreur); }
.saisie, .selection, .zone-texte {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 0.625rem 0.75rem;
  border: 2px solid var(--trait-fort);
  border-radius: var(--r-2);
  background: var(--surface);
  color: var(--encre);
  line-height: 1.4;
}
.saisie:hover, .selection:hover, .zone-texte:hover { border-color: var(--encre-3); }
.saisie:focus-visible, .selection:focus-visible, .zone-texte:focus-visible {
  border-color: var(--focus);
  outline: 3px solid var(--focus);
  outline-offset: 0;
}
.champ--erreur .saisie, .champ--erreur .selection, .champ--erreur .zone-texte { border-color: var(--erreur); }
.zone-texte { min-height: 7.5rem; resize: vertical; }
.selection {
  appearance: none;
  padding-inline-end: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314201d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1.1rem;
}
.saisie--courte { max-width: 16rem; }
.saisie--moyenne { max-width: 28rem; }
.groupe-champs { margin: 0 0 var(--e-5); padding: 0; border: 0; min-width: 0; }
.groupe-champs legend { padding: 0; margin-bottom: var(--e-2); }
.groupe-champs--titre legend { font-size: var(--taille-l); margin-bottom: var(--e-3); }
.choix {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
  padding: var(--e-1) 0;
}
.choix + .choix { margin-top: var(--e-1); }
.choix input {
  flex: none;
  width: 1.375rem;
  height: 1.375rem;
  margin: 0.12rem 0 0;
  accent-color: var(--vert-700);
  cursor: pointer;
}
.choix label { cursor: pointer; }
.choix__texte { display: flex; flex-direction: column; }
.choix__compte { color: var(--encre-3); font-variant-numeric: tabular-nums; }
.choix__aide { display: block; color: var(--encre-3); font-size: var(--taille-s); }
.choix--desactive label { color: var(--encre-3); }

/* --- Barre de recherche ---------------------------------------------------- */
.recherche { display: flex; width: 100%; }
.recherche__saisie {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 60px;
  padding-block: 0.75rem; padding-inline: 3rem 1rem;
  border: 2px solid var(--vert-700);
  border-inline-end: 0;
  border-radius: var(--r-3) 0 0 var(--r-3);
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23146b5e' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4.5 4.5'/%3E%3C/svg%3E") no-repeat 1rem center / 1.35rem;
  font-size: var(--taille-l);
  color: var(--encre);
}
.recherche__saisie::placeholder { color: var(--encre-3); opacity: 1; }
.recherche__saisie:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; position: relative; z-index: 1; }
.recherche__bouton {
  flex: none;
  min-height: 60px;
  border-radius: 0 var(--r-3) var(--r-3) 0;
  box-shadow: none;
  padding-inline: 1.5rem;
  font-size: var(--taille-l);
}
.recherche--compacte .recherche__saisie { min-height: 52px; font-size: var(--taille-m); }
.recherche--compacte .recherche__bouton { min-height: 52px; font-size: var(--taille-m); }
@media (max-width: 30rem) {
  .recherche { flex-direction: column; gap: var(--e-2); }
  .recherche__saisie { border-inline-end: 2px solid var(--vert-700); border-radius: var(--r-3); }
  .recherche__bouton { border-radius: var(--r-3); width: 100%; }
}

/* --- Puces (filtres actifs, suggestions) ---------------------------------- */
.puces { display: flex; flex-wrap: wrap; gap: var(--e-2); margin: 0; padding: 0; list-style: none; }
.puces li + li { margin-top: 0; }
.puce {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  min-height: 36px;
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--vert-200);
  border-radius: var(--r-pilule);
  background: var(--surface);
  color: var(--vert-800);
  font-size: var(--taille-s);
  font-weight: 600;
  text-decoration: none;
}
a.puce:hover, button.puce:hover { background: var(--vert-50); border-color: var(--vert-600); color: var(--vert-900); }
.puce--filtre { background: var(--vert-50); border-color: var(--vert-300); }
.puce--filtre .icone { width: 1em; height: 1em; }

/* --- Badges de statut ------------------------------------------------------ */
.statut {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding-block: 0.15rem; padding-inline: 0.45rem 0.6rem;
  border: 1px solid;
  border-radius: var(--r-pilule);
  font-size: var(--taille-xs);
  font-weight: 650;
  line-height: 1.5;
  white-space: nowrap;
}
.statut .icone { width: 1.1em; height: 1.1em; vertical-align: 0; stroke-width: 2.1; }
.statut--publiee    { color: var(--succes); background: var(--succes-fond); border-color: var(--succes-trait); }
.statut--verification, .statut--a-traiter { color: var(--info); background: var(--info-fond); border-color: var(--info-trait); }
.statut--suspendue, .statut--retourne { color: var(--alerte); background: var(--alerte-fond); border-color: var(--alerte-trait); }
.statut--rejetee    { color: var(--erreur); background: var(--erreur-fond); border-color: var(--erreur-trait); }
.statut--remplacee, .statut--neutre { color: var(--neutre); background: var(--neutre-fond); border-color: var(--neutre-trait); }

.etiquette {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.1rem 0.5rem;
  border-radius: var(--r-1);
  background: var(--neutre-fond);
  color: var(--encre-2);
  font-size: var(--taille-xs);
  font-weight: 600;
  line-height: 1.6;
  max-width: 100%;
}
.etiquette--vert { background: var(--vert-50); color: var(--vert-800); }
.etiquette--confirmer { background: var(--alerte-fond); color: var(--alerte); border: 1px solid var(--alerte-trait); }

/* --- Juridiction : pastille hexagonale + nom ------------------------------- */
.juridiction {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  color: var(--encre-2);
  font-size: var(--taille-s);
  font-weight: 600;
  line-height: 1.3;
}
.hexa {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 2.35em;
  height: 2.05em;
  clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%);
  background: var(--vert-700);
  color: #fff;
  font-family: var(--police-titre);
  font-size: 0.8rem;
  font-weight: 750;
  letter-spacing: 0.03em;
  line-height: 1;
}
.hexa--grand { font-size: 1.35rem; }
.juridiction__type { font-weight: 400; color: var(--encre-3); }
/* Drapeau des pays pilotes : décoratif, toujours accompagné du nom du pays. */
.drapeau { display: inline-block; flex: none; vertical-align: middle; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.14); }
.juridiction__drapeau { width: 1.65em; height: 1.1em; }
.hexa--zone { width: 3.6em; background: var(--encre-2); font-size: 0.62rem; letter-spacing: 0.02em; }

/* Fonds documentaire : règles établies d'après les textes officiels. */
.etiquette--reel { border: 1px solid var(--vert-200); background: var(--vert-50); color: var(--vert-800); }
.etiquette--reel .icone { width: 1em; height: 1em; }
.statut--extraite { color: #5b2f86; background: #f4eefb; border-color: #c9b2e6; }
.carte-regle--extraite { border-inline-start: 4px solid #c9b2e6; }
.logo-inst--pcom { height: 84px; width: auto; }

/* --- Cartes --------------------------------------------------------------- */
.carte {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--r-3);
  box-shadow: var(--ombre-1);
  padding: var(--e-5);
}
.carte--plate { box-shadow: none; }
.carte--interactive { transition: box-shadow var(--duree-moyenne) var(--courbe-standard), border-color var(--duree-moyenne); }
.carte--interactive:hover, .carte--interactive:focus-within { box-shadow: var(--ombre-2); border-color: var(--vert-200); }
.carte__lien-etendu { color: inherit; text-decoration: none; }
.carte__lien-etendu::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.carte__lien-etendu:hover { color: var(--vert-800); text-decoration: underline; }
.carte__lien-etendu:focus-visible { outline: none; }
.carte__lien-etendu:focus-visible::after { outline: 3px solid var(--focus); outline-offset: 2px; }
.grille-cartes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr));
  gap: var(--e-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.grille-cartes > li { margin: 0; display: flex; }
.grille-cartes > li > .carte { flex: 1; }
.carte-acces { display: flex; flex-direction: column; gap: var(--e-2); }
.carte-acces__icone {
  display: inline-grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: var(--e-2);
  border-radius: var(--r-3);
  background: var(--vert-50);
  color: var(--vert-700);
}
.carte-acces__icone .icone { width: 1.6rem; height: 1.6rem; }
.carte-acces h3 { margin: 0; font-size: var(--taille-l); }
.carte-acces p { margin: 0; color: var(--encre-2); font-size: var(--taille-s); }

/* --- Carte de résultat (règle) -------------------------------------------- */
.resultats { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--e-4); }
.resultats > li { margin: 0; }
.carte-regle { padding: var(--e-5); }
.carte-regle__haut {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2) var(--e-3);
  margin-bottom: var(--e-3);
}
.carte-regle__haut .statut { margin-inline-start: auto; }
.carte-regle__titre { margin: 0 0 var(--e-1); font-size: var(--taille-l); }
.carte-regle__titre a { color: var(--encre); text-decoration: none; }
.carte-regle__titre a:hover { color: var(--vert-800); text-decoration: underline; }
.carte-regle__classement { margin: 0 0 var(--e-2); color: var(--encre-3); font-size: var(--taille-s); }
.carte-regle__resume { margin: 0 0 var(--e-4); color: var(--encre-2); }
.carte-regle__pied {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--e-2) var(--e-4);
  margin-top: var(--e-4);
  color: var(--encre-3);
  font-size: var(--taille-xs);
}
.carte-regle--non-applicable { border-inline-start: 5px solid var(--info); }
.carte-regle--suspendue { border-inline-start: 5px solid var(--alerte-trait); }

.faits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr));
  margin: 0;
  border: 1px solid var(--trait);
  border-radius: var(--r-2);
  background: var(--surface-2);
  overflow: hidden;
}
.fait {
  margin: 0;
  padding: var(--e-3) var(--e-4);
  border-top: 1px solid var(--trait);
  border-inline-start: 1px solid var(--trait);
  margin-top: -1px;
  margin-inline-start: -1px;
}
.fait dt {
  display: flex;
  align-items: center;
  gap: var(--e-1);
  margin-bottom: 2px;
  color: var(--encre-3);
  font-size: var(--taille-xs);
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.fait dt .icone { color: var(--vert-600); width: 1.15rem; height: 1.15rem; }
.fait dd { margin: 0; font-weight: 650; line-height: 1.35; }
.fait__complement { display: block; margin-top: 2px; font-weight: 400; color: var(--encre-2); font-size: var(--taille-s); }

/* --- Notices ----------------------------------------------------------------- */
.notice {
  display: flex;
  gap: var(--e-3);
  padding: var(--e-4) var(--e-4) var(--e-4) var(--e-4);
  border: 1px solid var(--info-trait);
  border-inline-start: 6px solid var(--info);
  border-radius: var(--r-2);
  background: var(--info-fond);
  color: var(--encre);
}
.notice > .icone { flex: none; width: 1.5rem; height: 1.5rem; color: var(--info); margin-top: 1px; }
.notice__corps > :last-child { margin-bottom: 0; }
.notice__titre { display: block; margin-bottom: var(--e-1); font-weight: 700; }
.notice--alerte { border-color: var(--alerte-trait); border-inline-start-color: var(--alerte-trait); background: var(--alerte-fond); }
.notice--alerte > .icone { color: var(--alerte); }
.notice--erreur { border-color: var(--erreur-trait); border-inline-start-color: var(--erreur); background: var(--erreur-fond); }
.notice--erreur > .icone { color: var(--erreur); }
.notice--succes { border-color: var(--succes-trait); border-inline-start-color: var(--succes); background: var(--succes-fond); }
.notice--succes > .icone { color: var(--succes); }

.resume-erreurs {
  margin-bottom: var(--e-6);
  padding: var(--e-5);
  border: 4px solid var(--erreur);
  border-radius: var(--r-2);
  background: var(--surface);
}
.resume-erreurs h2 { font-size: var(--taille-l); margin-bottom: var(--e-3); }
.resume-erreurs ul { margin: 0; padding-inline-start: 1.1em; }
.resume-erreurs a { color: var(--erreur); font-weight: 650; }

.confirmation {
  padding: var(--e-6) var(--e-5);
  border-radius: var(--r-3);
  background: var(--vert-700);
  color: #fff;
  text-align: center;
}
.confirmation h1, .confirmation h2 { color: #fff; margin-bottom: var(--e-3); }
.confirmation__reference {
  display: inline-block;
  margin-top: var(--e-2);
  padding: var(--e-2) var(--e-4);
  border-radius: var(--r-2);
  background: rgba(255, 255, 255, 0.14);
  font-family: var(--police-code);
  font-size: var(--taille-l);
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* --- Fil d'Ariane --------------------------------------------------------- */
.ariane ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-1) 0; margin: 0; padding: 0; list-style: none; font-size: var(--taille-s); }
.ariane li { margin: 0; display: inline-flex; align-items: center; color: var(--encre-3); }
.ariane li + li::before {
  content: "";
  width: 0.45em;
  height: 0.45em;
  margin-block: 0; margin-inline: 0.55em 0.7em;
  border-top: 1.5px solid var(--encre-3);
  border-inline-end: 1.5px solid var(--encre-3);
  transform: rotate(45deg);
}
.ariane a { color: var(--encre-2); }
.ariane a:hover { color: var(--vert-800); }

/* --- Pagination ------------------------------------------------------------ */
.pagination { margin-top: var(--e-6); }
.pagination ul { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--e-2); margin: 0; padding: 0; list-style: none; }
.pagination li { margin: 0; }
.pagination a, .pagination span[aria-current] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-1);
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--e-3);
  border-radius: var(--r-2);
  font-weight: 650;
  text-decoration: none;
}
.pagination a { color: var(--vert-800); border: 1px solid var(--trait); background: var(--surface); }
.pagination a:hover { background: var(--vert-50); border-color: var(--vert-300); }
.pagination span[aria-current] { background: var(--vert-700); color: #fff; }
.pagination__etat { text-align: center; color: var(--encre-3); font-size: var(--taille-s); margin-top: var(--e-2); }

/* --- Onglets de navigation ----------------------------------------------- */
.onglets { border-bottom: 1px solid var(--trait-fort); margin-bottom: var(--e-5); overflow-x: auto; }
.onglets ul { display: flex; gap: var(--e-1); margin: 0; padding: 0; list-style: none; }
.onglets li { margin: 0; }
.onglets a {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  min-height: 48px;
  padding: 0 var(--e-4);
  border-bottom: 4px solid transparent;
  color: var(--encre-2);
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
}
.onglets a:hover { color: var(--vert-900); background: var(--vert-50); }
.onglets a[aria-current="page"] { color: var(--vert-900); border-bottom-color: var(--vert-600); }
.compteur {
  display: inline-grid;
  place-items: center;
  min-width: 1.6rem;
  height: 1.6rem;
  padding: 0 0.4rem;
  border-radius: var(--r-pilule);
  background: var(--neutre-fond);
  color: var(--encre-2);
  font-size: var(--taille-xs);
  font-variant-numeric: tabular-nums;
}

/* --- Tableaux -------------------------------------------------------------- */
/* position: relative : les textes masqués (position absolue) des cellules restent dans la zone défilante. */
.tableau-conteneur { position: relative; overflow-x: auto; border: 1px solid var(--trait); border-radius: var(--r-3); background: var(--surface); }
.tableau { width: 100%; font-size: var(--taille-s); }
.tableau caption { text-align: start; padding: var(--e-4); font-weight: 650; }
.tableau th, .tableau td { padding: var(--e-3) var(--e-4); text-align: start; vertical-align: top; border-bottom: 1px solid var(--trait); }
.tableau thead th { background: var(--surface-2); color: var(--encre-2); font-size: var(--taille-xs); letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; }
.tableau tbody tr:last-child > * { border-bottom: 0; }
.tableau tbody tr:hover { background: var(--surface-2); }
@media (max-width: 48rem) {
  .tableau--empile thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tableau--empile, .tableau--empile tbody, .tableau--empile tr, .tableau--empile td, .tableau--empile th { display: block; width: 100%; }
  .tableau--empile tr { padding: var(--e-3) 0; border-bottom: 1px solid var(--trait); }
  .tableau--empile tbody tr:last-child { border-bottom: 0; }
  .tableau--empile td, .tableau--empile th[scope="row"] { display: grid; grid-template-columns: minmax(7rem, 38%) 1fr; gap: var(--e-3); padding: var(--e-1) var(--e-4); border: 0; }
  .tableau--empile td::before, .tableau--empile th[scope="row"]::before { content: attr(data-label); font-weight: 650; color: var(--encre-3); font-size: var(--taille-xs); text-transform: uppercase; letter-spacing: 0.05em; padding-top: 2px; }
}

/* --- Chronologie (versions, journal d'audit) ------------------------------ */
.chronologie { position: relative; margin: 0; padding: 0; list-style: none; }
.chronologie li { position: relative; margin: 0; padding: 0 0 var(--e-5) var(--e-6); }
.chronologie li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0.44rem;
  top: 0.6rem;
  bottom: -0.4rem;
  width: 2px;
  background: var(--trait);
}
.chronologie li:last-child { padding-bottom: 0; }
.chronologie li:last-child::before { display: none; }
.chronologie__point {
  position: absolute;
  inset-inline-start: 0;
  top: 0.35rem;
  width: 1rem;
  height: 1rem;
  border: 3px solid var(--surface);
  border-radius: 50%;
  background: var(--trait-fort);
  box-shadow: 0 0 0 1px var(--trait-fort);
}
.chronologie li.est-courant .chronologie__point { background: var(--vert-600); box-shadow: 0 0 0 1px var(--vert-600); }
.chronologie__date { display: block; color: var(--encre-3); font-size: var(--taille-xs); font-weight: 600; letter-spacing: 0.02em; }
.chronologie__titre { display: block; font-weight: 650; }
.chronologie__texte { margin: var(--e-1) 0 0; color: var(--encre-2); font-size: var(--taille-s); }

/* --- Étapes d'un parcours -------------------------------------------------- */
.etapes { counter-reset: etape; display: flex; gap: var(--e-2); margin: 0 0 var(--e-6); padding: 0; list-style: none; }
.etapes li {
  counter-increment: etape;
  flex: 1 1 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  color: var(--encre-3);
  font-size: var(--taille-s);
  font-weight: 600;
  line-height: 1.3;
}
.etapes li::before {
  content: counter(etape);
  display: grid;
  place-items: center;
  height: 6px;
  border-radius: 6px;
  background: var(--trait);
  color: transparent;
  font-size: 0;
}
.etapes li.est-faite::before { background: var(--vert-500); }
.etapes li.est-courante { color: var(--vert-900); }
.etapes li.est-courante::before { background: var(--vert-700); }
.etapes__numero { font-size: var(--taille-xs); font-weight: 650; letter-spacing: 0.05em; text-transform: uppercase; }
@media (max-width: 40rem) {
  .etapes li:not(.est-courante) .etapes__libelle { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .etapes li:not(.est-courante) .etapes__numero { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .etapes li.est-courante { flex-grow: 3; }
}

/* --- Progression ---------------------------------------------------------- */
.progression {
  appearance: none;
  width: 100%;
  height: 10px;
  border: 0;
  border-radius: 10px;
  background: var(--vert-100);
  overflow: hidden;
}
.progression::-webkit-progress-bar { background: var(--vert-100); border-radius: 10px; }
.progression::-webkit-progress-value { background: var(--vert-600); border-radius: 10px; transition: width var(--duree-moyenne); }
.progression::-moz-progress-bar { background: var(--vert-600); border-radius: 10px; }

/* --- Squelettes de chargement -------------------------------------------- */
.squelette {
  display: block;
  border-radius: var(--r-1);
  background: linear-gradient(90deg, #e7ecea 0%, #f3f6f5 45%, #e7ecea 90%);
  background-size: 300% 100%;
  animation: squelette 1.3s linear infinite;
}
.squelette--titre { height: 1.35rem; width: 55%; margin-bottom: var(--e-3); }
.squelette--ligne { height: 0.85rem; width: 100%; margin-bottom: var(--e-2); }
.squelette--court { width: 35%; }
.squelette--bloc { height: 4.5rem; width: 100%; margin-top: var(--e-4); border-radius: var(--r-2); }
@keyframes squelette { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* --- États vides, erreurs, chargement ------------------------------------ */
.etat {
  display: grid;
  justify-items: center;
  gap: var(--e-2);
  padding: var(--e-7) var(--e-5);
  border: 1px dashed var(--trait-fort);
  border-radius: var(--r-3);
  background: var(--surface);
  text-align: center;
}
.etat__illustration { width: 11rem; height: auto; margin-bottom: var(--e-3); }
.etat h2, .etat h3 { margin: 0; font-size: var(--taille-xl); }
.etat p { max-width: 36rem; margin: 0; color: var(--encre-2); }
.etat .groupe-boutons { justify-content: center; margin-top: var(--e-3); }
.etat--erreur { border-style: solid; border-color: var(--erreur-trait); background: #fffafa; }
.etat ul { text-align: start; color: var(--encre-2); margin: 0; }

/* --- Citation de source et chaîne de preuve ------------------------------- */
.citation {
  position: relative;
  margin: 0;
  padding-block: var(--e-4); padding-inline: var(--e-6) var(--e-5);
  border-inline-start: 4px solid var(--vert-500);
  border-radius: 0 var(--r-2) var(--r-2) 0;
  background: var(--papier);
  font-family: var(--police-document);
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--encre);
}
.citation::before {
  content: "\201C";
  position: absolute;
  inset-inline-start: 0.55rem;
  top: 0.1rem;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--vert-400);
}
.citation p { margin: 0; }
.citation footer { margin-top: var(--e-3); font-family: var(--police-texte); font-size: var(--taille-s); color: var(--encre-3); }
.citation--vide { font-family: var(--police-texte); font-size: var(--taille-m); color: var(--encre-3); border-inline-start-style: dashed; border-inline-start-color: var(--trait-fort); background: var(--surface-2); }
.citation--vide::before { content: none; }

.chaine-preuve { display: flex; align-items: stretch; margin: 0; padding: 0; list-style: none; }
.chaine-preuve li { flex: 1 1 0; margin: 0; display: flex; align-items: center; }
.chaine-preuve li + li::before {
  content: "";
  flex: none;
  width: 2rem;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--vert-400) 0 6px, transparent 6px 10px);
}
.maillon {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--e-3);
  min-height: 100%;
  padding: var(--e-3) var(--e-4);
  border: 1px solid var(--trait);
  border-radius: var(--r-2);
  background: var(--surface);
  color: var(--encre);
  text-decoration: none;
  line-height: 1.3;
}
a.maillon:hover { border-color: var(--vert-400); background: var(--vert-50); color: var(--encre); }
.maillon__icone { display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--vert-50); color: var(--vert-700); }
.maillon__type { display: block; color: var(--encre-3); font-size: var(--taille-xs); font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; }
.maillon__libelle { display: block; font-weight: 650; font-size: var(--taille-s); }
.maillon--vide { border-style: dashed; color: var(--encre-3); background: var(--surface-2); }
@media (max-width: 48rem) {
  .chaine-preuve { flex-direction: column; }
  .chaine-preuve li { flex-direction: column; align-items: stretch; }
  .chaine-preuve li + li::before { width: 2px; height: 1.25rem; margin-inline-start: 2.2rem; background: repeating-linear-gradient(180deg, var(--vert-400) 0 5px, transparent 5px 9px); }
}

/* --- Liste récapitulative ------------------------------------------------- */
.recap { margin: 0 0 var(--e-6); border-top: 1px solid var(--trait); }
.recap__ligne {
  display: grid;
  grid-template-columns: minmax(10rem, 32%) 1fr auto;
  gap: var(--e-2) var(--e-4);
  padding: var(--e-3) 0;
  border-bottom: 1px solid var(--trait);
}
.recap dt { font-weight: 650; }
.recap dd { margin: 0; }
.recap__action { text-align: end; }
@media (max-width: 40rem) {
  .recap__ligne { grid-template-columns: 1fr auto; }
  .recap dt { grid-column: 1 / -1; }
}
.recap--compact .recap__ligne { grid-template-columns: minmax(8rem, 40%) 1fr; padding: var(--e-2) 0; font-size: var(--taille-s); }
.recap--compact dt { color: var(--encre-3); font-weight: 600; }

/* --- Dépliant (details/summary) ------------------------------------------- */
.depliant { border: 1px solid var(--trait); border-radius: var(--r-2); background: var(--surface); }
.depliant > summary {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  min-height: 48px;
  padding: var(--e-2) var(--e-4);
  cursor: pointer;
  font-weight: 650;
  color: var(--vert-800);
  list-style: none;
}
.depliant > summary::-webkit-details-marker { display: none; }
.depliant > summary::before {
  content: "";
  width: 0.5em;
  height: 0.5em;
  border-inline-end: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--duree-courte);
  margin-inline-end: var(--e-1);
}
.depliant[open] > summary::before { transform: rotate(45deg); }
.depliant__contenu { padding: 0 var(--e-4) var(--e-4); }

/* --- Message éphémère ----------------------------------------------------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: var(--e-5);
  z-index: 100;
  display: flex;
  align-items: center;
  gap: var(--e-2);
  max-width: calc(100vw - 2rem);
  padding: var(--e-3) var(--e-4);
  border-radius: var(--r-2);
  background: var(--encre);
  color: #fff;
  box-shadow: var(--ombre-3);
  transform: translate(-50%, 0);
  animation: toast-entree var(--duree-moyenne) var(--courbe-sortie);
}
@keyframes toast-entree { from { opacity: 0; transform: translate(-50%, 12px); } }

/* --- Bande institutionnelle et logos -------------------------------------- */
/* Les logos sont des PNG/WebP à fond blanc : toujours posés sur fond blanc,
   sans déformation (hauteur fixée, largeur automatique ou recadrage de la
   seule marge excédentaire du canevas — voir DECISIONS.md). */
.bande-institutionnelle {
  background: var(--surface);
  border-top: 1px solid var(--trait);
  padding-block: var(--e-6);
}
.bande-institutionnelle__titre {
  margin: 0 0 var(--e-5);
  font-size: var(--taille-s);
  font-weight: 650;
  color: var(--encre-2);
  text-align: center;
}
.groupes-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: var(--e-5) var(--e-7);
}
.groupe-logos { margin: 0; flex: 0 1 auto; min-width: 0; }
.groupe-logos__libelle {
  display: block;
  margin-bottom: var(--e-3);
  font-size: var(--taille-xs);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--encre-3);
}
.groupe-logos ul { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3) var(--e-5); margin: 0; padding: 0; list-style: none; }
.groupe-logos li { margin: 0; display: grid; grid-template-rows: 96px auto; align-items: center; }
.logo-inst { display: block; background: #fff; }
.logo-inst__nom { align-self: start; }
.logo-inst--ali { height: 84px; width: auto; }
/* Recadrage d'AFFICHAGE de la seule marge verticale excédentaire du canevas
   (object-fit: cover centré) : fichier intact, proportions conservées,
   zone de protection blanche préservée autour de chaque signe. */
.logo-inst--recadre { height: auto; object-fit: cover; object-position: 50% 50%; }
.logo-inst--ica { width: 280px; aspect-ratio: 3; }
.logo-inst--cenarbica, .logo-inst--warbica { width: 230px; aspect-ratio: 2.8; }
.logo-inst__nom { display: block; margin-top: var(--e-1); font-size: var(--taille-xs); color: var(--encre-3); max-width: 16rem; }
@media (max-width: 60rem) {
  .groupes-logos { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .groupe-logos ul { justify-content: center; }
  .logo-inst__nom { margin-inline: auto; }
}

/* --- Pied de page ------------------------------------------------------------ */
.pied {
  background: var(--vert-900);
  color: #e3efec;
  font-size: var(--taille-s);
  padding-block: var(--e-7) var(--e-5);
}
.pied a { color: #fff; }
.pied a:hover { color: #fff; text-decoration-thickness: 2px; }
.pied h2 { color: #fff; font-size: var(--taille-m); margin-bottom: var(--e-3); }
.pied__grille { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr; gap: var(--e-6); }
.pied ul { margin: 0; padding: 0; list-style: none; }
.pied li + li { margin-top: var(--e-2); }
.pied__nom { font-family: var(--police-document); font-size: var(--taille-l); line-height: 1.3; color: #fff; margin-bottom: var(--e-3); }
.pied__ponctuation { display: block; width: 2.5rem; height: 3px; margin-bottom: var(--e-3); background: var(--rouge-ali); border-radius: 2px; }
.pied__bas {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--e-3);
  margin-top: var(--e-6);
  padding-top: var(--e-4);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  color: #c4d9d4;
  font-size: var(--taille-xs);
}
.pied .depliant { background: transparent; border-color: rgba(255, 255, 255, 0.25); margin-top: var(--e-5); }
.pied .depliant > summary { color: #fff; }
.pied .choix label { color: #e3efec; }
.pied .choix input { accent-color: var(--vert-300); }
.pied .bouton--secondaire { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.6); }
.pied .bouton--secondaire:hover { background: rgba(255, 255, 255, 0.1); }
@media (max-width: 56rem) { .pied__grille { grid-template-columns: minmax(0, 1fr); } }