/* =============================================================================
   Socle — composants communs (après tokens.css et base.css). Uniquement des var(--…).
   Préfixe « p- ». Démonstration de chaque composant et de ses états : commun/apercu/index.html.
   Règles : un seul bouton principal par écran ; la couleur n'est jamais seule porteuse du sens ;
   cibles de 40 px au pointeur fin, 44 px au doigt ; focus toujours visible.
   ============================================================================= */

/* ─────────────────────────────── Bouton ───────────────────────────────
   <button class="p-bouton p-bouton--primaire">Enregistrer</button>
   Variantes : --primaire · --secondaire · --discret · --danger · --icone (carré, aria-label obligatoire)
   Tailles   : (défaut 40/44 px) · --compact (34 px au pointeur fin, 44 au doigt) · --grand · --bloc (pleine largeur)
   Attente   : aria-busy="true" (+ disabled) */
.p-bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--espace-2);
  min-height: var(--cible-confort);
  padding: 0 var(--espace-4);
  border: 1px solid var(--couleur-bordure-forte);
  border-radius: var(--rayon);
  background: var(--couleur-surface);
  color: var(--couleur-texte);
  font-size: var(--taille-sm); font-weight: var(--graisse-moyenne); line-height: 1.2;
  text-decoration: none; white-space: nowrap;
  cursor: pointer; user-select: none; touch-action: manipulation;
  box-shadow: var(--ombre-1);
  transition: background-color var(--duree-rapide) ease, border-color var(--duree-rapide) ease,
    color var(--duree-rapide) ease, box-shadow var(--duree-rapide) ease, transform var(--duree-rapide) var(--courbe-sortie);
}
.p-bouton svg { width: 1.0625rem; height: 1.0625rem; flex: none; }
.p-bouton:active:not(:disabled) { transform: translateY(1px); }
.p-bouton:disabled, .p-bouton[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
.p-bouton--primaire { background: var(--couleur-primaire); border-color: var(--couleur-primaire); color: var(--couleur-sur-primaire); }
.p-bouton--secondaire { background: var(--couleur-surface); }
.p-bouton--discret { background: transparent; border-color: transparent; box-shadow: none; color: var(--couleur-texte-doux); }
.p-bouton--danger { background: var(--couleur-danger-plein); border-color: var(--couleur-danger-plein); color: var(--couleur-sur-danger); }
@media (hover: hover) {
  .p-bouton:hover:not(:disabled) { background: var(--couleur-surface-2); border-color: var(--couleur-bordure-champ); }
  .p-bouton--primaire:hover:not(:disabled) { background: var(--couleur-primaire-survol); border-color: var(--couleur-primaire-survol); }
  .p-bouton--discret:hover:not(:disabled) { background: var(--couleur-surface-2); border-color: transparent; color: var(--couleur-texte); }
  .p-bouton--danger:hover:not(:disabled) { background: var(--couleur-danger-plein-survol); border-color: var(--couleur-danger-plein-survol); }
}
.p-bouton--compact { min-height: 2.125rem; padding: 0 var(--espace-3); }
@media (pointer: coarse) { .p-bouton--compact { min-height: var(--cible-min); } }
.p-bouton--grand { min-height: var(--cible-grande); padding: 0 var(--espace-5); font-size: var(--taille-md); }
.p-bouton--bloc { display: flex; width: 100%; }
.p-bouton--icone { width: var(--cible-confort); padding: 0; }
.p-bouton[aria-busy="true"] { position: relative; color: transparent !important; pointer-events: none; }
.p-bouton[aria-busy="true"]::after {
  content: ""; position: absolute; width: 1em; height: 1em;
  border: 2px solid var(--couleur-texte-doux); border-right-color: transparent; border-radius: var(--rayon-plein);
  animation: p-rotation 700ms linear infinite;
}
.p-bouton--primaire[aria-busy="true"]::after, .p-bouton--danger[aria-busy="true"]::after { border-color: var(--couleur-sur-primaire); border-right-color: transparent; }
@keyframes p-rotation { to { transform: rotate(360deg); } }

/* Groupe de boutons alignés (barre d'actions d'un formulaire). */
.p-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espace-2); }
.p-actions--fin { justify-content: flex-end; }

/* ─────────────────────────────── Carte ───────────────────────────────
   <section class="p-carte"><h2 class="p-carte__titre">…</h2> …</section>
   En-tête structuré : <header class="p-carte__entete"><h2 class="p-carte__titre">…</h2><a …>Tout voir</a></header>
   <a class="p-carte p-carte--interactive" href="…">…</a> : carte entièrement cliquable.
   --plate : sans ombre ni fond (regroupement léger) · --vedette : mise en avant (bord de la couleur d'action). */
.p-carte {
  display: block;
  padding: var(--espace-5);
  background: var(--couleur-surface);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-grand);
  box-shadow: var(--ombre-carte);
  color: inherit;
  min-width: 0;
}
@media (max-width: 479px) { .p-carte { padding: var(--espace-4); } }
.p-carte--plate { background: transparent; box-shadow: none; }
.p-carte--interactive { text-decoration: none; cursor: pointer;
  transition: border-color var(--duree) ease, box-shadow var(--duree) var(--courbe-sortie), transform var(--duree-rapide) var(--courbe-sortie); }
@media (hover: hover) {
  .p-carte--interactive:hover { border-color: var(--couleur-bordure-forte); box-shadow: var(--ombre-2); }
}
.p-carte--interactive:active { transform: translateY(1px); }
.p-carte--vedette { border-color: var(--couleur-primaire-bordure); }
.p-carte--vedette > .p-carte__interieur { height: 100%; }
.p-carte__entete { display: flex; align-items: center; justify-content: space-between; gap: var(--espace-3); margin: 0 0 var(--espace-4); }
.p-carte__entete > * { margin: 0; }
.p-carte__titre { margin: 0 0 var(--espace-2); font-size: var(--taille-md); font-weight: var(--graisse-forte); letter-spacing: -0.005em; }
.p-carte__sous-titre, .p-carte__texte { margin: 0; color: var(--couleur-texte-doux); font-size: var(--taille-sm); }
.p-carte__pied { display: flex; flex-wrap: wrap; gap: var(--espace-2); align-items: center; margin-top: var(--espace-4); padding-top: var(--espace-4); border-top: 1px solid var(--couleur-bordure); }

/* ─────────────────────────────── En-tête de page ───────────────────────────────
   <header class="p-entete-page"><div class="p-entete-page__texte"><p class="p-entete-page__fil"><a href="…">Foyers</a></p>
   <h1 class="p-entete-page__titre">…</h1><p class="p-entete-page__sous-titre">…</p></div><div class="p-entete-page__actions">…</div></header> */
.p-entete-page { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--espace-3) var(--espace-4); margin-bottom: var(--espace-5); }
.p-entete-page__texte { min-width: 0; display: grid; gap: var(--espace-1); }
.p-entete-page__titre { margin: 0; font-size: var(--taille-titre); }
.p-entete-page__sous-titre { margin: 0; color: var(--couleur-texte-doux); max-width: var(--largeur-texte); }
.p-entete-page__fil { margin: 0; font-size: var(--taille-sm); color: var(--couleur-texte-doux); }
.p-entete-page__fil a { color: inherit; text-decoration: none; }
.p-entete-page__fil a:hover { color: var(--couleur-texte); text-decoration: underline; }
.p-entete-page__actions { display: flex; flex-wrap: wrap; gap: var(--espace-2); }

/* ─────────────────────────────── Champ de formulaire ───────────────────────────────
   <div class="p-champ"><label class="p-champ__label" for="nom">Nom</label>
   <input class="p-champ__saisie" id="nom" aria-describedby="nom-aide"><p class="p-champ__aide" id="nom-aide">…</p></div>
   Erreur : .p-champ--erreur + aria-invalid="true" + .p-champ__erreur relié par aria-describedby. */
.p-champ { display: grid; gap: 0.375rem; min-width: 0; }
.p-champ__label { font-size: var(--taille-sm); font-weight: var(--graisse-moyenne); color: var(--couleur-texte); }
.p-champ__saisie {
  width: 100%;
  min-height: var(--cible-confort);
  padding: 0.5rem 0.75rem;
  background: var(--couleur-surface);
  border: 1px solid var(--couleur-bordure-champ);
  border-radius: var(--rayon);
  color: var(--couleur-texte);
  font-size: var(--taille-md);
  box-shadow: var(--ombre-1);
  transition: border-color var(--duree-rapide) ease, box-shadow var(--duree-rapide) ease;
}
@media (pointer: coarse), (max-width: 767px) { .p-champ__saisie { font-size: max(16px, var(--taille-md)); } }   /* pas de zoom sur iPhone */
.p-champ__saisie::placeholder { color: var(--couleur-texte-faible); opacity: 1; }
@media (hover: hover) { .p-champ__saisie:hover:not(:focus):not(:disabled) { border-color: var(--couleur-texte-doux); } }
.p-champ__saisie:focus-visible, .p-champ__saisie:focus {
  outline: none;
  border-color: var(--couleur-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--couleur-focus) 22%, transparent);
}
textarea.p-champ__saisie { min-height: 6rem; resize: vertical; line-height: var(--interligne); }
select.p-champ__saisie {
  appearance: none; padding-right: 2.25rem; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--couleur-texte-doux) 50%), linear-gradient(135deg, var(--couleur-texte-doux) 50%, transparent 50%);
  background-position: calc(100% - 1.05rem) 52%, calc(100% - 0.75rem) 52%;
  background-size: 0.3rem 0.3rem, 0.3rem 0.3rem; background-repeat: no-repeat;
}
input[type="file"].p-champ__saisie { padding: 0.4rem; cursor: pointer; }
input[type="file"].p-champ__saisie::file-selector-button {
  margin-right: var(--espace-3); padding: 0.35rem 0.75rem; border: 1px solid var(--couleur-bordure-forte); border-radius: var(--rayon-petit);
  background: var(--couleur-surface-2); color: var(--couleur-texte); font: inherit; font-size: var(--taille-sm); cursor: pointer;
}
.p-champ__aide { margin: 0; font-size: var(--taille-sm); color: var(--couleur-texte-doux); }
.p-champ__erreur { margin: 0; font-size: var(--taille-sm); font-weight: var(--graisse-moyenne); color: var(--couleur-danger); }
.p-champ--erreur .p-champ__saisie, .p-champ__saisie[aria-invalid="true"] { border-color: var(--couleur-danger); }
.p-champ--erreur .p-champ__saisie:focus, .p-champ__saisie[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--couleur-danger) 20%, transparent); }
.p-champ__saisie:disabled, .p-champ__saisie[readonly] { background: var(--couleur-surface-2); color: var(--couleur-texte-doux); box-shadow: none; }
.p-champ__saisie:disabled { cursor: not-allowed; }

/* Champ avec pictogramme (recherche) : <label class="p-recherche"><svg…/><span class="p-lecteur-seul">Rechercher</span><input class="p-champ__saisie" type="search"></label> */
.p-recherche { position: relative; display: block; min-width: 0; }
.p-recherche > svg { position: absolute; left: 0.75rem; top: 50%; width: 1rem; height: 1rem; transform: translateY(-50%); color: var(--couleur-texte-doux); pointer-events: none; }
.p-recherche .p-champ__saisie { padding-left: 2.25rem; }

/* Case à cocher, bouton radio : libellé entier cliquable, cible ≥ 44 px. */
.p-choix { display: flex; align-items: center; gap: var(--espace-3); min-height: var(--cible-min); cursor: pointer; }
.p-choix input { flex-shrink: 0; width: 1.125rem; height: 1.125rem; margin: 0; accent-color: var(--couleur-primaire); cursor: pointer; }
.p-choix--bloc { padding: var(--espace-3) var(--espace-4); border: 1px solid var(--couleur-bordure); border-radius: var(--rayon); background: var(--couleur-surface); }
.p-choix--bloc:has(input:checked) { border-color: var(--couleur-primaire); background: var(--couleur-primaire-doux); }

/* Groupe de champs : grille qui se replie toute seule. */
.p-grille-champs { display: grid; gap: var(--espace-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }

/* ─────────────────────────────── Interrupteur segmenté ───────────────────────────────
   <div class="p-segment" role="group" aria-label="Période"><a href="…" aria-current="true">Mois</a><a href="…">Année</a></div>
   (boutons : aria-pressed="true") */
.p-segment { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--rayon); background: var(--couleur-surface-2); border: 1px solid var(--couleur-bordure); max-width: 100%; overflow-x: auto; }
.p-segment > a, .p-segment > button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--espace-1);
  min-height: 2rem; padding: 0 var(--espace-3); border: 0; border-radius: var(--rayon-petit);
  background: transparent; color: var(--couleur-texte-doux); font-size: var(--taille-sm); font-weight: var(--graisse-moyenne);
  text-decoration: none; white-space: nowrap; cursor: pointer;
}
@media (pointer: coarse) { .p-segment > a, .p-segment > button { min-height: 2.5rem; } }
.p-segment > [aria-current="true"], .p-segment > [aria-current="page"], .p-segment > [aria-pressed="true"] { background: var(--couleur-surface); color: var(--couleur-texte); box-shadow: var(--ombre-1), 0 0 0 1px var(--couleur-bordure); }

/* ─────────────────────────────── Onglets ───────────────────────────────
   <nav class="p-onglets" aria-label="…"><a href="…" aria-current="page">Résumé</a><a href="…">Historique</a></nav> */
.p-onglets { display: flex; gap: var(--espace-1); border-bottom: 1px solid var(--couleur-bordure); margin-bottom: var(--espace-5); overflow-x: auto; scrollbar-width: none; }
.p-onglets > a, .p-onglets > button {
  position: relative; display: inline-flex; align-items: center; gap: var(--espace-2);
  min-height: var(--cible-min); padding: 0 var(--espace-3); border: 0; background: none;
  color: var(--couleur-texte-doux); font-size: var(--taille-sm); font-weight: var(--graisse-moyenne);
  text-decoration: none; white-space: nowrap; cursor: pointer;
}
.p-onglets > a:hover, .p-onglets > button:hover { color: var(--couleur-texte); }
.p-onglets > [aria-current="page"], .p-onglets > [aria-current="true"], .p-onglets > [aria-selected="true"] { color: var(--couleur-texte); }
.p-onglets > [aria-current="page"]::after, .p-onglets > [aria-current="true"]::after, .p-onglets > [aria-selected="true"]::after {
  content: ""; position: absolute; left: var(--espace-3); right: var(--espace-3); bottom: -1px; height: 2px; border-radius: 2px; background: var(--couleur-primaire);
}

/* ─────────────────────────────── Puce de filtre ───────────────────────────────
   <div class="p-puces" role="group" aria-label="Filtrer"><a class="p-puce" href="…" aria-current="true">Actifs <span class="p-puce__compte">12</span></a></div> */
.p-puces { display: flex; flex-wrap: wrap; gap: var(--espace-2); }
.p-puce {
  display: inline-flex; align-items: center; gap: var(--espace-1); min-height: 2rem; padding: 0 var(--espace-3);
  border: 1px solid var(--couleur-bordure-forte); border-radius: var(--rayon-plein); background: var(--couleur-surface);
  color: var(--couleur-texte-doux); font-size: var(--taille-sm); font-weight: var(--graisse-moyenne); text-decoration: none; white-space: nowrap; cursor: pointer;
}
@media (pointer: coarse) { .p-puce { min-height: var(--cible-min); } }
.p-puce:hover { color: var(--couleur-texte); border-color: var(--couleur-bordure-champ); }
.p-puce[aria-current="true"], .p-puce[aria-current="page"], .p-puce[aria-pressed="true"] { background: var(--couleur-texte); border-color: var(--couleur-texte); color: var(--couleur-surface); }
.p-puce__compte { font-variant-numeric: tabular-nums; opacity: 0.75; }

/* ─────────────────────────────── Badge ───────────────────────────────
   <span class="p-badge p-badge--succes">Payé</span> — le mot compte, la couleur l'accompagne.
   Variantes : (neutre) · --marque · --succes · --attention · --danger · --info · --accent */
.p-badge {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.125rem 0.5rem;
  border: 1px solid var(--couleur-bordure); border-radius: var(--rayon-petit);
  background: var(--couleur-surface-2); color: var(--couleur-texte-doux);
  font-size: var(--taille-xs); font-weight: var(--graisse-moyenne); line-height: 1.45;
  white-space: nowrap; width: fit-content; max-width: 100%;
}
.p-badge svg { width: 0.875rem; height: 0.875rem; flex: none; }
.p-badge--marque { background: var(--couleur-primaire-doux); border-color: var(--couleur-primaire-bordure); color: var(--couleur-lien); }
.p-badge--succes { background: var(--couleur-succes-fond); border-color: var(--couleur-succes-bordure); color: var(--couleur-succes); }
.p-badge--attention { background: var(--couleur-attention-fond); border-color: var(--couleur-attention-bordure); color: var(--couleur-attention); }
.p-badge--danger { background: var(--couleur-danger-fond); border-color: var(--couleur-danger-bordure); color: var(--couleur-danger); }
.p-badge--info { background: var(--couleur-info-fond); border-color: var(--couleur-info-bordure); color: var(--couleur-info); }
.p-badge--accent { background: var(--couleur-surface); border-color: var(--couleur-bordure-forte); color: var(--couleur-texte); }
.p-badge--accent::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--couleur-accent); }
/* Pastille d'état : point coloré + mot (statut d'une ligne). */
.p-etat { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--taille-sm); color: var(--couleur-texte-doux); white-space: nowrap; }
.p-etat::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--couleur-bordure-champ); flex: none; }
.p-etat--succes::before { background: var(--couleur-succes); }
.p-etat--attention::before { background: var(--couleur-attention); }
.p-etat--danger::before { background: var(--couleur-danger); }
.p-etat--info::before { background: var(--couleur-info); }

/* ─────────────────────────────── Alerte ───────────────────────────────
   <div class="p-alerte p-alerte--attention" role="status"><svg class="p-alerte__icone"…/><div class="p-alerte__corps">
   <p class="p-alerte__titre">…</p><p>…</p></div></div> — Variantes : (info) · --succes · --attention · --danger. */
.p-alerte {
  display: flex; gap: var(--espace-3);
  padding: var(--espace-3) var(--espace-4);
  border: 1px solid var(--couleur-info-bordure); border-radius: var(--rayon);
  background: var(--couleur-info-fond); color: var(--couleur-texte);
  font-size: var(--taille-sm);
}
.p-alerte__icone { flex: none; width: 1.125rem; height: 1.125rem; margin-top: 0.1rem; color: var(--couleur-info); }
.p-alerte__corps { min-width: 0; flex: 1; }
.p-alerte__corps > :last-child { margin-bottom: 0; }
.p-alerte__corps p { margin-bottom: var(--espace-1); }
.p-alerte__titre { margin: 0 0 0.125rem; font-weight: var(--graisse-forte); color: var(--couleur-texte); }
.p-alerte--succes { border-color: var(--couleur-succes-bordure); background: var(--couleur-succes-fond); }
.p-alerte--succes .p-alerte__icone { color: var(--couleur-succes); }
.p-alerte--attention { border-color: var(--couleur-attention-bordure); background: var(--couleur-attention-fond); }
.p-alerte--attention .p-alerte__icone { color: var(--couleur-attention); }
.p-alerte--danger { border-color: var(--couleur-danger-bordure); background: var(--couleur-danger-fond); }
.p-alerte--danger .p-alerte__icone { color: var(--couleur-danger); }
.p-alerte--info { border-color: var(--couleur-info-bordure); background: var(--couleur-info-fond); }   /* = apparence par défaut, nommée pour la lisibilité du balisage */
@media (forced-colors: active) { .p-alerte { border-left-width: 4px; } }

/* ─────────────────────────────── Indicateurs (chiffres clés) ───────────────────────────────
   <div class="p-indicateurs"><div class="p-indicateur"><p class="p-indicateur__libelle">Recettes</p>
   <p class="p-indicateur__valeur p-montant">4 368,00 €</p><p class="p-indicateur__note">depuis le 16 août</p></div></div> */
.p-indicateurs { display: grid; gap: var(--espace-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.p-indicateur { padding: var(--espace-4); background: var(--couleur-surface); border: 1px solid var(--couleur-bordure); border-radius: var(--rayon-grand); box-shadow: var(--ombre-carte); min-width: 0; }
.p-indicateur__libelle { margin: 0 0 var(--espace-1); font-size: var(--taille-sm); color: var(--couleur-texte-doux); font-weight: var(--graisse-moyenne); }
.p-indicateur__valeur { margin: 0; font-size: var(--taille-2xl); font-weight: var(--graisse-forte); letter-spacing: -0.02em; line-height: 1.2; font-variant-numeric: tabular-nums; }
.p-indicateur__note { margin: var(--espace-1) 0 0; font-size: var(--taille-xs); color: var(--couleur-texte-doux); }

/* ─────────────────────────────── Montant ───────────────────────────────
   <span class="p-montant p-montant--recette">+12,50 €</span> — recette en vert, dépense neutre, dû en ambre, signe écrit. */
.p-montant { font-variant-numeric: tabular-nums; white-space: nowrap; }
.p-montant--recette { color: var(--couleur-recette); }
.p-montant--depense { color: var(--couleur-depense); }
.p-montant--du { color: var(--couleur-du); }

/* ─────────────────────────────── Tableau ───────────────────────────────
   <div class="p-tableau-conteneur"><table class="p-tableau"><thead><tr><th scope="col">Date</th>…<th class="p-num">Montant</th></tr></thead>
   <tbody><tr>…<td class="p-num">12,00 €</td></tr></tbody></table></div>
   Défile horizontalement DANS son conteneur si besoin (jamais la page). --compact : lignes de 36 px. */
.p-tableau-conteneur { overflow-x: auto; border: 1px solid var(--couleur-bordure); border-radius: var(--rayon-grand); background: var(--couleur-surface); box-shadow: var(--ombre-carte); }
.p-tableau { width: 100%; border-collapse: collapse; font-size: var(--taille-sm); }
.p-tableau th, .p-tableau td { padding: 0.625rem var(--espace-4); text-align: left; vertical-align: middle; border-bottom: 1px solid var(--couleur-bordure); }
.p-tableau thead th { position: sticky; top: 0; z-index: 1; background: var(--couleur-surface-2); color: var(--couleur-texte-doux); font-size: var(--taille-xs); font-weight: var(--graisse-moyenne); white-space: nowrap; }
.p-tableau tbody tr:last-child > * { border-bottom: 0; }
.p-tableau tfoot td, .p-tableau tfoot th { background: var(--couleur-surface-2); font-weight: var(--graisse-forte); border-bottom: 0; border-top: 1px solid var(--couleur-bordure); }
@media (hover: hover) { .p-tableau tbody tr:hover > * { background: color-mix(in srgb, var(--couleur-surface-2) 60%, transparent); } }
.p-tableau .p-num, .p-tableau .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.p-tableau--compact th, .p-tableau--compact td { padding-block: 0.4rem; }
.p-tableau a { font-weight: var(--graisse-moyenne); }

/* ─────────────────────────────── Liste (lignes) ───────────────────────────────
   <ul class="p-liste"><li class="p-liste__ligne"><div class="p-liste__corps"><p class="p-liste__titre">…</p><p class="p-liste__meta">…</p></div>
   <div class="p-liste__fin">…</div></li></ul> — lignes séparées par des filets, dans une carte ou seules. */
.p-liste { list-style: none; margin: 0; padding: 0; }
.p-liste__ligne { display: flex; align-items: center; gap: var(--espace-3); min-height: var(--hauteur-ligne); padding: var(--espace-3) 0; border-bottom: 1px solid var(--couleur-bordure); }
.p-liste__ligne:last-child { border-bottom: 0; }
.p-liste__corps { flex: 1; min-width: 0; display: grid; gap: 0.125rem; }
.p-liste__titre { margin: 0; font-weight: var(--graisse-moyenne); overflow-wrap: anywhere; }
.p-liste__meta { margin: 0; font-size: var(--taille-sm); color: var(--couleur-texte-doux); }
.p-liste__fin { flex: none; display: flex; align-items: center; gap: var(--espace-2); text-align: right; }
.p-liste--carte { background: var(--couleur-surface); border: 1px solid var(--couleur-bordure); border-radius: var(--rayon-grand); box-shadow: var(--ombre-carte); }
.p-liste--carte > .p-liste__ligne { padding-inline: var(--espace-4); }
a.p-liste__ligne, .p-liste__ligne > a.p-liste__lien { color: inherit; text-decoration: none; }
@media (hover: hover) { a.p-liste__ligne:hover { background: var(--couleur-surface-2); } }

/* ─────────────────────────────── Avatar (initiale) ─────────────────────────────── */
.p-avatar { display: inline-grid; place-items: center; flex: none; width: 2rem; height: 2rem; border-radius: var(--rayon-plein);
  background: var(--couleur-primaire-doux); color: var(--couleur-lien); font-size: var(--taille-sm); font-weight: var(--graisse-forte); }
.p-avatar--grand { width: 2.75rem; height: 2.75rem; font-size: var(--taille-md); }

/* ─────────────────────────────── État vide ───────────────────────────────
   <div class="p-vide"><svg class="p-vide__icone"…/><p class="p-vide__titre">Aucune opération</p><p class="p-vide__texte">…</p><a class="p-bouton">…</a></div> */
.p-vide { display: grid; justify-items: center; gap: var(--espace-2); padding: var(--espace-7) var(--espace-4); text-align: center; color: var(--couleur-texte-doux); }
.p-vide__icone { width: 2.5rem; height: 2.5rem; padding: 0.55rem; border-radius: var(--rayon-grand); background: var(--couleur-surface-2); color: var(--couleur-texte-doux); }
.p-vide__titre { margin: var(--espace-1) 0 0; font-weight: var(--graisse-forte); color: var(--couleur-texte); }
.p-vide__texte { margin: 0 0 var(--espace-2); max-width: 42ch; font-size: var(--taille-sm); }

/* ─────────────────────────────── Chargement ─────────────────────────────── */
.p-chargement { display: inline-flex; align-items: center; gap: var(--espace-2); color: var(--couleur-texte-doux); font-size: var(--taille-sm); }
.p-chargement::before { content: ""; width: 1rem; height: 1rem; border: 2px solid var(--couleur-bordure-forte); border-top-color: var(--couleur-primaire); border-radius: 50%; animation: p-rotation 700ms linear infinite; }
.p-squelette { display: block; height: 0.875rem; border-radius: var(--rayon-petit);
  background: linear-gradient(90deg, var(--couleur-surface-2), var(--couleur-surface-3), var(--couleur-surface-2)); background-size: 200% 100%; animation: p-squelette 1.4s ease infinite; }
@keyframes p-squelette { to { background-position: -200% 0; } }

/* ─────────────────────────────── Jauge ─────────────────────────────── */
.p-progression { height: 0.375rem; border-radius: var(--rayon-plein); background: var(--couleur-surface-3); overflow: hidden; }
.p-progression__barre { height: 100%; border-radius: inherit; background: var(--couleur-primaire); }

/* ─────────────────────────────── Notification (toast) ───────────────────────────────
   <div class="p-notifications" role="status"><div class="p-notification p-notification--succes">Enregistré.</div></div> */
.p-notifications { position: fixed; z-index: 1100; right: var(--gouttiere); bottom: calc(var(--espace-4) + env(safe-area-inset-bottom)); display: grid; gap: var(--espace-2); max-width: min(24rem, calc(100vw - 2 * var(--gouttiere))); }
.p-notification { display: flex; gap: var(--espace-3); align-items: flex-start; padding: var(--espace-3) var(--espace-4); border: 1px solid var(--couleur-bordure); border-radius: var(--rayon-grand);
  background: var(--couleur-surface); color: var(--couleur-texte); box-shadow: var(--ombre-2); font-size: var(--taille-sm); animation: p-montee var(--duree-lente) var(--courbe-sortie); }
@keyframes p-montee { from { opacity: 0; transform: translateY(6px); } }

/* ─────────────────────────────── Menu déroulant (sans JavaScript : <details>) ───────────────────────────────
   <details class="p-menu"><summary class="p-bouton">Exporter</summary><div class="p-menu__panneau"><a class="p-menu__element" href="…">PDF</a></div></details> */
.p-menu { position: relative; }
.p-menu > summary { list-style: none; }
.p-menu > summary::-webkit-details-marker { display: none; }
.p-menu__panneau { position: absolute; z-index: 1000; top: calc(100% + 4px); right: 0; min-width: 13rem; padding: var(--espace-1);
  background: var(--couleur-surface); border: 1px solid var(--couleur-bordure); border-radius: var(--rayon-grand); box-shadow: var(--ombre-2);
  animation: p-apparition var(--duree) var(--courbe-sortie); }
.p-menu__element { display: flex; align-items: center; gap: var(--espace-2); width: 100%; min-height: 2.25rem; padding: 0 var(--espace-3); border: 0; border-radius: var(--rayon-petit);
  background: none; color: var(--couleur-texte); font-size: var(--taille-sm); text-align: left; text-decoration: none; cursor: pointer; }
@media (pointer: coarse) { .p-menu__element { min-height: var(--cible-min); } }
.p-menu__element:hover { background: var(--couleur-surface-2); }
@keyframes p-apparition { from { opacity: 0; transform: translateY(-4px); } }

/* ─────────────────────────────── Liste clé / valeur ─────────────────────────────── */
.p-definitions { display: grid; grid-template-columns: minmax(8rem, 34%) 1fr; margin: 0; font-size: var(--taille-sm); }
.p-definitions > dt, .p-definitions > dd { margin: 0; padding: 0.625rem 0; border-bottom: 1px solid var(--couleur-bordure); }
.p-definitions > dt { color: var(--couleur-texte-doux); padding-right: var(--espace-3); }
.p-definitions > dd { color: var(--couleur-texte); min-width: 0; overflow-wrap: anywhere; }

/* ─────────────────────────────── Boîte de dialogue (confirmation) ───────────────────────────────
   <dialog class="p-dialogue" aria-labelledby="t" aria-describedby="d"> … <div class="p-dialogue__actions">…</div></dialog>
   Focus initial sur l'action SÛRE ; Échap annule (dialog natif, showModal()). */
.p-dialogue {
  width: min(100% - 2 * var(--gouttiere), 28rem);
  max-height: calc(100% - 2 * var(--espace-5));
  margin: auto; padding: var(--espace-5);
  border: 1px solid var(--couleur-bordure); border-radius: var(--rayon-grand);
  background: var(--couleur-surface); color: var(--couleur-texte);
  box-shadow: var(--ombre-2);
  overflow: auto; overscroll-behavior: contain;
}
.p-dialogue::backdrop { background: var(--voile); backdrop-filter: blur(2px); }
.p-dialogue[open] { animation: p-dialogue-entree var(--duree-lente) var(--courbe-sortie); }
@keyframes p-dialogue-entree { from { opacity: 0; transform: translateY(8px) scale(0.98); } }
.p-dialogue__titre { margin: 0 0 var(--espace-2); font-size: var(--taille-lg); line-height: var(--interligne-serre); }
.p-dialogue__texte { margin: 0 0 var(--espace-3); color: var(--couleur-texte-doux); font-size: var(--taille-sm); }
.p-dialogue__actions { display: flex; flex-direction: column-reverse; gap: var(--espace-2); margin-top: var(--espace-5); }
.p-dialogue__actions .p-bouton { width: 100%; }
@media (min-width: 480px) {
  .p-dialogue__actions { flex-direction: row; justify-content: flex-end; }
  .p-dialogue__actions .p-bouton { width: auto; }
}

/* ─────────────────────────────── Bandeau d'aperçu d'un rôle (« Voir comme ») ───────────────────────────────
   Permanent en haut des pages tant qu'un aperçu est actif. Balisage : sites/portail/templates/_bandeau_apercu.php. */
.p-bandeau-apercu { background: var(--couleur-attention-fond); color: var(--couleur-texte); border-bottom: 1px solid var(--couleur-attention-bordure); }
.p-bandeau-apercu__interieur { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--espace-1) var(--espace-3);
  max-width: var(--largeur-page); margin: 0 auto; padding: var(--espace-1) var(--gouttiere); }
.p-bandeau-apercu__texte { display: flex; align-items: center; gap: var(--espace-2); flex: 1 1 0; min-width: 0; margin: 0; font-size: var(--taille-sm); line-height: var(--interligne-serre); }
.p-bandeau-apercu__texte svg { flex: none; width: 1.125rem; height: 1.125rem; color: var(--couleur-attention); }
.p-bandeau-apercu__titre { font-weight: var(--graisse-moyenne); }
.p-bandeau-apercu__role { display: inline-flex; align-items: center; min-height: var(--cible-min); color: var(--couleur-texte); font-weight: var(--graisse-forte); }
.p-bandeau-apercu form { flex: none; margin: 0; }
.p-bandeau-apercu__detail, .p-bandeau-apercu__long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (min-width: 640px) {
  .p-bandeau-apercu__court { display: none; }
  .p-bandeau-apercu__detail { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; margin-left: var(--espace-2); color: var(--couleur-texte-doux); }
  .p-bandeau-apercu__long { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
}
.p-bandeau-apercu__message { flex-basis: 100%; margin: 0 0 var(--espace-1); font-size: var(--taille-sm); font-weight: var(--graisse-forte); }

/* ─────────────────────────────── Logo officiel ───────────────────────────────
   Jamais redessiné, recadré ni recoloré. Fond sombre : posé sur une pastille claire (même logo, aucune retouche du dessin). */
.p-logo { display: inline-flex; align-items: center; line-height: 0; border-radius: var(--rayon); text-decoration: none; }
.p-logo img { height: 2.5rem; width: auto; object-fit: contain; }
:root[data-theme="dark"] .p-logo--pastille img, :root[data-theme="dark"] .p-logo img { background: var(--couleur-pastille-logo); border-radius: var(--rayon-petit); padding: 2px 6px; box-sizing: content-box; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .p-logo img { background: var(--couleur-pastille-logo); border-radius: var(--rayon-petit); padding: 2px 6px; box-sizing: content-box; }
}

/* ─────────────────────────────── Bouton de thème clair / sombre ───────────────────────────────
   <button class="p-bouton-theme" type="button" data-patro-theme-bouton>…deux <svg>…</button> (commun/scripts/theme.js) */
.p-bouton-theme {
  position: relative; display: inline-grid; place-items: center;
  width: 2.25rem; height: 2.25rem; padding: 0;
  border: 1px solid transparent; border-radius: var(--rayon);
  background: transparent; color: var(--couleur-texte-doux); cursor: pointer; touch-action: manipulation;
  transition: background-color var(--duree-rapide) ease, color var(--duree-rapide) ease;
}
@media (pointer: coarse) { .p-bouton-theme { width: var(--cible-min); height: var(--cible-min); } }
@media (hover: hover) { .p-bouton-theme:hover { background: var(--couleur-surface-2); color: var(--couleur-texte); } }
.p-bouton-theme svg { grid-area: 1 / 1; width: 1.125rem; height: 1.125rem; transition: opacity var(--duree) var(--courbe-sortie), transform var(--duree-lente) var(--courbe-sortie); }
.p-bouton-theme:not([data-theme-actuel]) { visibility: hidden; }
.p-bouton-theme .p-icone-soleil { opacity: 0; transform: rotate(-90deg) scale(0.6); }
.p-bouton-theme .p-icone-lune { opacity: 1; transform: none; }
.p-bouton-theme[data-theme-actuel="dark"] .p-icone-soleil { opacity: 1; transform: none; }
.p-bouton-theme[data-theme-actuel="dark"] .p-icone-lune { opacity: 0; transform: rotate(90deg) scale(0.6); }

/* ─────────────────────────────── Divers ─────────────────────────────── */
.p-separateur { height: 1px; margin: var(--espace-5) 0; border: 0; background: var(--couleur-bordure); }
.p-kbd { padding: 0.05rem 0.35rem; border: 1px solid var(--couleur-bordure-forte); border-bottom-width: 2px; border-radius: var(--rayon-petit); font-family: var(--police-mono); font-size: var(--taille-xs); color: var(--couleur-texte-doux); }
.p-texte-doux { color: var(--couleur-texte-doux); }
.p-petit { font-size: var(--taille-sm); }