/* =========================================================================
   Application des couples : gabarit et pont vers le design system
   -------------------------------------------------------------------------
   Chargée après ds/tokens.css, ds/composants.css et ds/logo/logo-anime.css.
   Aucune valeur en dur : couleurs, tailles, espacements et durées viennent
   des jetons (seules exceptions : les dessins encodés en data: des contrôles).

   1. Socle de page         5. Champs (form-*)       9. Listes
   2. Gabarit : menu         6. Cartes (card)         10. Menus et dialogues
   3. En-tête de page        7. Tableaux (table)      11. Utilitaires de texte
   4. Boutons (btn-*)        8. Badges et messages    12. Composants de l'outil

   Les sections 4 à 11 sont un PONT : les vues écrites pour Bootstrap gardent
   leurs classes (btn-primary, form-control, card…), redessinées ici avec les
   jetons. Une vue récrite utilise directement les classes du design system
   (btn-primaire, champ, carte…) ; le pont disparaîtra avec la dernière.
   De Bootstrap ne restent que bootstrap-grid et bootstrap-utilities (grille,
   flex, marges), dont les couleurs sont neutralisées en section 11.
   ========================================================================= */

/* ---------- 1. Socle de page -------------------------------------------- */
html { scroll-padding-top: var(--esp-24); }
body { min-height: 100vh; padding-inline: env(safe-area-inset-left) env(safe-area-inset-right); }

/* Les vues comptent sur un rythme vertical entre paragraphes et titres : il est posé ici,
   avec la spécificité d'un élément seul, pour que tout composant du design system
   (carte-tete, vide, message…) garde la main sur ses propres marges. */
:where(.page, .page-publique) :is(p, ul, ol, dl, address, table, pre) { margin: 0 0 var(--esp-4); }
:where(.page, .page-publique) :is(h1, h2, h3, h4, h5, h6) { margin: 0 0 var(--esp-2); }
:is(.carte-tete, .tableau-tete, .message-corps, .moment-texte, .page-tete, .liste-texte) :is(h1, h2, h3, h4, h5, h6, p) { margin-bottom: 0; }
:where(.page) :is(ul, ol) { padding-left: var(--esp-6); }
:where(.page) :is(ul.liste, ul.list-unstyled, ul.list-group, ul.nav, ol.liste) { padding-left: 0; }
:where(.page) dt { font-weight: var(--graisse-moyenne); }
:where(.page) dd { margin: 0 0 var(--esp-2); }
:where(.page) hr { border: 0; border-top: var(--bordure-fine); margin: var(--esp-6) 0; }
:where(.page) label { display: inline-block; }
:where(.page) table { border-collapse: collapse; }
:where(.page) th { text-align: inherit; }
:where(.page) fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
:where(.page) legend { float: none; width: auto; margin: 0 0 var(--esp-2); padding: 0; font-size: var(--taille-sec); font-weight: var(--graisse-moyenne); }

h1, .h1 { font-size: var(--taille-4); }
h2, .h2 { font-size: var(--taille-3); }
h3, .h3 { font-size: var(--taille-3); }
h4, .h4 { font-size: var(--taille-2); }
h5, .h5 { font-size: var(--taille-1); letter-spacing: 0; }
h6, .h6 { font-size: var(--taille-corps); letter-spacing: 0; }
.h1, .h2, .h3, .h4, .h5, .h6 { font-weight: var(--graisse-forte); line-height: var(--interligne-titre); }
.display-6 { font-size: var(--taille-5); font-weight: var(--graisse-forte); line-height: var(--interligne-serre); letter-spacing: var(--approche-affiche); }
small, .small { font-size: var(--taille-sec); }
.lead { font-size: var(--taille-1); }

/* Lien d'évitement : premier élément focalisable, visible au clavier seulement. */
.evitement {
  position: absolute; left: var(--esp-4); top: var(--esp-2); z-index: var(--z-dialogue);
  padding: var(--esp-2) var(--esp-4); border-radius: var(--r-rond);
  background: var(--action); color: var(--texte-sur-action); font-weight: var(--graisse-moyenne);
  transform: translateY(-200%);
}
.evitement:focus { transform: none; color: var(--texte-sur-action); }

/* ---------- 2. Gabarit : rail, colonne contextuelle, barre basse -------- */
/* Navigation B (décision du CEO du 25/10/2026) : niveau 1 dans un rail étroit d'icônes à libellé court, niveaux 2 et 3
   dans la colonne contextuelle à côté, aucune rangée d'onglets dans la page. Trois largeurs :
   - 1 100 px et plus : rail (80 px), colonne ouverte (248 px), repliable en bande (56 px) ;
   - 1 024 à 1 099 px : rail, colonne repliée, ouverte par-dessus le contenu à la demande ;
   - sous 1 024 px : barre du haut, barre basse au pouce ; la colonne devient l'écran de menu de la section. */
.nav-app-tete { min-height: var(--cible-min); }
.marque-nom { white-space: nowrap; }
.nav-app .nav-app-liens { display: block; margin: 0; }
.nav-app-liens ul { list-style: none; margin: 0; padding: 0; }
.nav-app-liens a[aria-current] .icone { color: var(--action); }
.nav-app .nav-app-couple { display: none; }

/* La pastille des épingles non lues du plan (ATL-499) : le nombre de fils où un autre membre a écrit depuis la dernière lecture. */
.nav-app-liens a:has(.nav-badge) { position: relative; }
.nav-badge {
  display: inline-grid; place-items: center; min-width: 1.25rem; height: 1.25rem; margin-left: auto; padding: 0 var(--esp-2);
  border-radius: var(--r-rond); background: var(--action); color: var(--texte-sur-action);
  font-size: var(--taille-meta); font-weight: 600; line-height: 1;
}
.nav-badge[hidden] { display: none; }
/* Sur le rail comme sur la barre basse, la pastille se pose sur l'angle de l'icône. */
.nav-app-liens .nav-badge { position: absolute; top: var(--esp-1); left: calc(50% + .45rem); margin: 0; }

/* Téléphone : le nom de la célébration courante, pour qui en gère plusieurs (la pastille du couple est sur le rail). */
.nav-app-celebration {
  flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--taille-meta); color: var(--texte-sec); text-align: right;
}
.menu-compte-qui .meta { display: block; }
.menu-compte-panneau a[aria-current="true"] { background: var(--prune-pale); color: var(--action); font-weight: var(--graisse-moyenne); }

/* Menu du compte (details natif) */
.menu-compte { position: relative; }
.menu-compte > summary {
  display: inline-flex; align-items: center; gap: var(--esp-2);
  min-height: var(--cible-min); padding: 0 var(--esp-2) 0 var(--esp-1);
  border: 1px solid transparent; border-radius: var(--r-rond);
  list-style: none; cursor: pointer; font-weight: var(--graisse-moyenne);
  transition: background-color var(--duree-150) var(--courbe-douce);
}
.menu-compte > summary::-webkit-details-marker { display: none; }
.menu-compte > summary:hover, .menu-compte[open] > summary { background: var(--surface); border-color: var(--bordure); }
.menu-compte[open] > summary .icone { transform: rotate(180deg); }
.menu-compte-nom { max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-compte-panneau {
  position: absolute; right: 0; top: calc(100% + var(--esp-2)); z-index: var(--z-menu);
  width: min(280px, calc(100vw - 2 * var(--esp-4)));
  padding: var(--esp-2);
  background: var(--surface); border: var(--bordure-fine); border-radius: var(--r-m); box-shadow: var(--ombre-2);
  animation: menu-entre var(--duree-150) var(--courbe-entree);
}
@keyframes menu-entre { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.menu-compte-panneau ul { list-style: none; margin: 0; padding: 0 0 var(--esp-2); border-bottom: var(--bordure-fine); margin-bottom: var(--esp-2); }
.menu-compte-panneau a {
  display: flex; align-items: center; gap: var(--esp-2); min-height: var(--cible-min); padding: 0 var(--esp-3);
  border-radius: var(--r-s); color: var(--texte); text-decoration: none;
}
.menu-compte-panneau a:hover { background: var(--sable); color: var(--texte); }
.menu-compte-panneau a[aria-current="page"] { background: var(--prune-pale); color: var(--action); font-weight: var(--graisse-moyenne); }
.menu-compte-qui { padding: var(--esp-2) var(--esp-3) var(--esp-3); margin: 0; }
.menu-compte-qui b { display: block; font-weight: var(--graisse-forte); }
.menu-compte-titre { margin: 0; padding: var(--esp-2) var(--esp-3) var(--esp-1); font-size: var(--taille-meta); color: var(--texte-sec); }
.menu-compte-panneau form { margin: 0; }
.menu-compte-panneau .btn-lien { width: 100%; justify-content: flex-start; text-decoration: none; }

/* Hauteur de la barre basse du téléphone : ce qui est fixé en bas de l'écran (bouton Aide,
   bandeaux du support) se pose au-dessus d'elle, jamais dessus. */
:root { --barre-basse: 0px; }

/* La colonne contextuelle, commune à toutes les largeurs : le titre de la section, ses pages, les vues de la page. */
.colonne { background: var(--surface); }
.colonne:focus { outline: none; }
.colonne-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--esp-2); padding: 0 0 var(--esp-4) var(--esp-3); }
.colonne-titres { min-width: 0; }
.colonne-couple { margin: 0 0 var(--esp-1); font-size: var(--taille-meta); line-height: var(--interligne-meta); color: var(--texte-sec); }
.colonne-couple b { display: block; color: var(--texte); font-weight: var(--graisse-moyenne); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.colonne-tete h2 { margin: 0; font-size: var(--taille-1); line-height: var(--interligne-titre); }
.colonne-bascule { flex: none; background: transparent; border-color: transparent; }
.colonne-bascule .icone { transform: rotate(90deg); }
.colonne-bascule[aria-expanded="false"] .icone { transform: rotate(-90deg); }
/* L'infobulle s'ouvre vers la droite, vers le contenu : repliée, la colonne est trop étroite pour la porter à gauche. */
.colonne-bascule[data-infobulle]::after { left: 0; right: auto; }
/* La prochaine étape du guide, en tête de la colonne de l'accueil (ATL-557) : une ligne, sur le prune pâle de l'élément actif. */
.colonne-prochaine { display: grid; gap: var(--esp-1); margin: 0 0 var(--esp-3); padding: var(--esp-3); border-radius: var(--r-s); background: var(--action-pale); }
.colonne-prochaine .surtitre { margin: 0; }
.colonne-prochaine a { color: var(--action); font-weight: var(--graisse-moyenne); text-decoration: none; min-height: var(--cible-min); display: flex; align-items: center; }
.colonne-prochaine a:hover { text-decoration: underline; }
.colonne-pages, .colonne-vues { list-style: none; margin: 0; padding: 0; }
.colonne-pages > li { position: relative; }
.colonne-pages > li > a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--esp-2);
  min-height: var(--cible-min); padding: 0 var(--esp-3); border-radius: var(--r-s);
  color: var(--texte-sec); text-decoration: none; font-weight: var(--graisse-moyenne);
}
.colonne-pages > li > a .icone { flex: none; color: var(--texte-sec); transform: rotate(-90deg); }
.colonne-pages > li > a:hover { background: var(--sable); color: var(--texte); }
.colonne-pages > li > a[aria-current] { background: var(--prune-pale); color: var(--action); font-weight: var(--graisse-forte); }
/* La pastille des épingles à droite de la ligne « Plan de table », hors du lien. */
.colonne-pages > li > .nav-badge { position: absolute; top: calc(var(--cible-min) / 2); right: var(--esp-3); margin: 0; transform: translateY(-50%); }
/* Les vues sous leur page : un retrait et un filet à gauche, la vue affichée en prune sur crème. */
.colonne-vues { margin: var(--esp-1) 0 var(--esp-2) var(--esp-4); padding-left: var(--esp-2); border-left: 1px solid var(--trait); }
.colonne-vues a, .colonne-vues .vue-bientot {
  display: flex; align-items: center; gap: var(--esp-2); min-height: var(--cible-min); padding: 0 var(--esp-3);
  border-radius: var(--r-s); font-size: var(--taille-sec); color: var(--texte-sec); text-decoration: none;
}
.colonne-vues a:hover { background: var(--sable); color: var(--texte); }
.colonne-vues a[aria-current="page"] { background: var(--fond); color: var(--action); font-weight: var(--graisse-forte); }
.colonne-vues .meta { margin-left: auto; }
.vue-bientot { color: var(--texte-sec); cursor: not-allowed; }

/* La vue d'ensemble d'une fête (demande du CEO du 15/11/2026) : au plus cinq tuiles qui mènent chacune à leur page, puis
   qui organise et ce qui reste à suivre. Lecture seule. */
.tableau-fete { display: grid; gap: var(--esp-4); }
.tableau-fete-intro { margin: 0; color: var(--texte-sec); }
.tuiles-fete { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--esp-3); }
.tuile-fete { display: grid; align-content: start; gap: var(--esp-1); min-height: 112px; }
.tuile-libelle { color: var(--texte-sec); font-size: var(--taille-sec); font-weight: var(--graisse-moyenne); }
.tuile-valeur { font-size: var(--taille-2); font-weight: var(--graisse-forte); line-height: 1.25; }
.tuile-detail { color: var(--texte-sec); font-size: var(--taille-sec); }
.tableau-fete-bas { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--esp-3); align-items: start; }
.organisateurs-fete, .a-suivre-fete { display: grid; gap: var(--esp-2); margin: 0; padding: 0; list-style: none; }
.organisateurs-fete li { display: flex; align-items: center; gap: var(--esp-3); min-height: var(--cible-min); }
.organisateurs-fete small { display: block; color: var(--texte-sec); font-size: var(--taille-sec); }
.organisateurs-fete li > span:nth-of-type(2) { flex: 1; min-width: 0; }
.organisateur-ajouter { display: grid; gap: var(--esp-1); margin-top: var(--esp-3); padding-top: var(--esp-3); border-top: var(--bordure-fine); }
.organisateur-ajouter-ligne { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
.organisateur-ajouter-ligne .champ { flex: 1 1 180px; }
.a-suivre-fete li { display: grid; gap: 2px; }
.a-suivre-fete a { font-weight: var(--graisse-moyenne); }
.a-suivre-fete span { color: var(--texte-sec); font-size: var(--taille-sec); }
@media (max-width: 767.98px) {
  .tuiles-fete { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tuile-fete { min-height: 0; }
  .tuile-valeur { font-size: var(--taille-1); }
}

/* Une carte entière qui mène à sa page (vue d'ensemble de l'organisation EVG / EVJF). */
.lien-carte { color: inherit; text-decoration: none; transition: border-color var(--duree-150) var(--courbe-douce); }
.lien-carte:hover { border-color: var(--action); }
.lien-carte:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }

/* Les vues de la page au téléphone : un contrôle segmenté qui passe à la ligne plutôt que de cacher la suite (REM-06). */
.segments {
  display: flex; flex-wrap: wrap; gap: var(--esp-1); width: fit-content; max-width: 100%;
  margin: 0 0 var(--esp-6); padding: var(--esp-1); border-radius: var(--r-m); background: var(--sable);
}
.segments a {
  display: inline-flex; align-items: center; gap: var(--esp-2); min-height: var(--cible-min); padding: 0 var(--esp-4);
  border-radius: var(--r-rond); color: var(--texte-sec); font-weight: var(--graisse-moyenne); text-decoration: none; white-space: nowrap;
}
.segments a:hover { color: var(--texte); }
.segments a[aria-current="page"] { background: var(--surface); color: var(--action); box-shadow: var(--ombre-1); }
.segments .meta { color: inherit; }
.retour-section {
  display: inline-flex; align-items: center; gap: var(--esp-1); min-height: var(--cible-min); margin-bottom: var(--esp-2);
  color: var(--action); font-weight: var(--graisse-moyenne); text-decoration: none;
}
.retour-section .icone { transform: rotate(90deg); }

/* Les vues de la page au téléphone (navigation B, « un menu burger », retour du CEO du 11/11/2026) : une barre compacte,
   « ‹ Page » à gauche, la vue courante à droite ; ses sœurs dans une feuille qui monte du bas, chaque ligne à 44 px. */
.barre-vues { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); margin-bottom: var(--esp-4); }
.barre-vues .retour-section { min-width: 0; margin: 0; }
.retour-libelle, .bouton-vues-libelle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bouton-vues { display: inline-flex; align-items: center; gap: var(--esp-2); flex: none; max-width: 60%; min-height: var(--cible-min); }
.feuille-vues {
  position: fixed; inset: auto 0 0 0; width: 100vw; max-width: none; max-height: min(80dvh, 640px); margin: 0;
  padding: var(--esp-4) var(--esp-4) calc(var(--esp-4) + env(safe-area-inset-bottom)); border: 0;
  border-radius: var(--r-l) var(--r-l) 0 0; background: var(--surface); color: var(--texte); box-shadow: var(--ombre-2);
  overflow-y: auto; overscroll-behavior: contain;
}
.feuille-vues::backdrop { background: var(--voile); }
.feuille-tete { display: flex; justify-content: space-between; align-items: center; gap: var(--esp-3); margin-bottom: var(--esp-2); }
.feuille-tete h2 { margin: 0; font-size: var(--taille-2); }
.feuille-liste { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.feuille-liste a {
  display: flex; align-items: center; gap: var(--esp-2); min-height: var(--cible-min); padding: 0 var(--esp-3);
  border-radius: var(--r-s); color: var(--texte); text-decoration: none;
}
.feuille-liste a:hover { background: var(--creme); }
.feuille-liste a .meta { margin-left: auto; color: var(--texte-sec); }
.feuille-liste a[aria-current="page"] { background: var(--prune-pale); color: var(--action); font-weight: var(--graisse-forte); }
.feuille-liste a[aria-current="page"] .meta { color: var(--action); }
.feuille-liste a > .icone { margin-left: auto; }
.feuille-liste a .meta + .icone { margin-left: 0; }
.feuille-liste a:focus-visible { outline: 2px solid var(--action); outline-offset: -2px; }
@media (prefers-reduced-motion: no-preference) {
  .feuille-vues[open] { animation: feuille-monte var(--duree-200) var(--courbe-entree); }
  @keyframes feuille-monte { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
}

/* Téléphone et tablette : barre du haut collante, six entrées dans une barre basse au pouce. */
@media (max-width: 1023.98px) {
  :root:has(.nav-app-liens) { --barre-basse: calc(65px + env(safe-area-inset-bottom)); }
  /* La bulle Aide flottante recouvrait la barre basse et des actions de la page : avec la
     barre basse, l'aide passe par le menu du compte (barre du haut), sans bulle. */
  :root:has(.nav-app-liens) .aide-bulle { display: none !important; }
  .nav-app {
    position: sticky; top: 0; z-index: var(--z-menu); display: flex; align-items: center; gap: var(--esp-3);
    padding: var(--esp-2) var(--gouttiere); padding-top: max(var(--esp-2), env(safe-area-inset-top));
  }
  .nav-app-tete { flex: 1 1 auto; min-width: 0; }
  .nav-app .nav-app-liens {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-menu);
    padding: var(--esp-1) max(var(--esp-1), env(safe-area-inset-right)) max(var(--esp-1), env(safe-area-inset-bottom)) max(var(--esp-1), env(safe-area-inset-left));
    background: var(--surface); border-top: var(--bordure-fine);
  }
  .nav-app-liens ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
  .nav-app-liens a {
    flex-direction: column; justify-content: center; gap: var(--esp-1);
    min-height: 56px; padding: var(--esp-1) 0; border-radius: var(--r-s);
    font-size: var(--taille-meta); line-height: var(--interligne-meta); text-align: center;
  }
  .nav-app-liens a[aria-current] { background: var(--prune-pale); border-color: transparent; color: var(--action); }
  /* Sept entrées (« EVG / EVJF » au premier niveau, recette du CEO du 11/11/2026, quand le module Impression est ouvert) :
     les libellés courts se resserrent pour ne pas mordre sur le voisin à 375 px. */
  .nav-app-liens ul:has(> li:nth-child(7)) a { font-size: .625rem; letter-spacing: -.02em; }
  .nav-app-liens ul:has(> li:nth-child(7)) .lib-court { display: block; max-width: 100%; overflow: hidden; white-space: nowrap; }
  .appli-contenu { padding-bottom: calc(var(--esp-24) + env(safe-area-inset-bottom)); }

  /* L'écran de menu de la section : la colonne, ouverte par « ‹ Section » (ancre #colonne), prend la place de la page ;
     la barre basse reste. Le retour en arrière du navigateur ramène la page. */
  .colonne { display: none; }
  /* Une page courte (l'écran de menu) n'étire pas la barre du haut sur la hauteur de la fenêtre. */
  .appli { align-content: start; }
  .colonne:target { display: block; padding: var(--esp-6) var(--gouttiere) calc(var(--esp-24) + env(safe-area-inset-bottom)); background: var(--fond); }
  .appli:has(.colonne:target) .appli-contenu { display: none; }
  .colonne-bascule, .colonne-couple { display: none; }
  .colonne-tete { padding: 0 0 var(--esp-4); }
  .colonne-tete h2 { font-size: var(--taille-3); }
  .colonne-pages > li { border-bottom: var(--bordure-fine); padding: var(--esp-1) 0 var(--esp-2); }
  .colonne-pages > li > a { min-height: 48px; padding: 0; color: var(--texte); background: none; }
  .colonne-pages > li > a[aria-current] { background: none; }
  .colonne-pages > li > .nav-badge { top: calc(var(--esp-1) + 24px); right: var(--esp-8); }
  .colonne-vues { margin: 0 0 var(--esp-1); padding-left: var(--esp-4); border-left: 0; }
  .colonne-vues a { padding: 0; }
  .colonne-vues a[aria-current="page"] { background: none; }
}
@media (max-width: 479.98px) { .menu-compte-nom { display: none; } }

/* Ordinateur : le rail sable fixé à la hauteur de la fenêtre, quelle que soit la longueur de la page. Le design system
   donne au menu min-height: 100% (la hauteur de la page) : on l'annule, sinon le rail s'étire jusqu'en bas de la page et
   le compte avec lui. Le rail défile seul si la fenêtre est trop basse ; le compte reste collé en bas. */
@media (min-width: 1024px) {
  .appli { grid-template-columns: 80px minmax(0, 1fr); }
  .appli.avec-colonne { grid-template-columns: 80px 56px minmax(0, 1fr); }
  .tete-telephone { display: none; }
  .nav-app {
    position: sticky; top: 0; align-self: start;
    /* Le rail est son propre contexte d'empilement (collant + défilement) : le panneau du menu du compte, fixé à sa droite, ne
       peut pas en sortir. Sans z-index il passait sous la colonne (z-collant), puis sous la colonne déployée (z-menu, plus bas
       dans la page) : son bord gauche était coupé. Un cran au-dessus du menu : le panneau recouvre la colonne, déployée ou non. */
    z-index: calc(var(--z-menu) + 1);
    height: 100vh; height: 100dvh; min-height: 0;
    overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
    display: flex; flex-direction: column; align-items: center; gap: var(--esp-4);
    padding: var(--esp-4) var(--esp-2) 0;
  }
  .nav-app-tete { display: contents; }
  .nav-app-celebration { display: none; }
  .nav-app .marque { order: 0; justify-content: center; }
  .nav-app .marque .logo-infini { width: 40px; }
  .nav-app .marque-nom { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .nav-app .nav-app-couple { order: 1; display: inline-grid; width: 40px; height: 40px; font-size: var(--taille-meta); }
  .nav-app .nav-app-liens { order: 2; width: 100%; }
  .nav-app-liens ul { display: grid; gap: var(--esp-1); }
  .nav-app-liens a {
    flex-direction: column; justify-content: center; gap: var(--esp-1);
    min-height: 56px; padding: var(--esp-2) 0; border-radius: var(--r-s);
    font-size: var(--taille-meta); line-height: var(--interligne-meta); text-align: center;
  }
  .nav-app-liens a[aria-current] { background: var(--prune-pale); border-color: transparent; color: var(--action); font-weight: var(--graisse-forte); }
  .menu-compte {
    order: 3; margin-top: auto;
    position: sticky; bottom: 0; z-index: var(--z-collant);
    padding: var(--esp-2) 0 var(--esp-4); background: var(--fond-structure);
  }
  .menu-compte > summary { padding: 0 var(--esp-1); }
  .menu-compte > summary .menu-compte-nom, .menu-compte > summary .icone { display: none; }
  /* Le panneau s'ouvre à droite du rail, fixé à la fenêtre : le rail défile, il le couperait. */
  .menu-compte-panneau { position: fixed; top: auto; right: auto; bottom: var(--esp-4); left: calc(80px + var(--esp-2)); width: 280px; }

  /* La colonne, repliée en bande de 56 px qui ne garde que son bouton. Seule la liste des pages défile : l'infobulle du
     bouton déborde de la colonne sans être coupée. */
  .colonne {
    position: sticky; top: 0; align-self: start; z-index: var(--z-collant);
    display: flex; flex-direction: column;
    height: 100vh; height: 100dvh;
    padding: var(--esp-6) var(--esp-1); border-right: var(--bordure-fine);
  }
  .colonne-pages {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
    /* La marge garde l'anneau de focus des liens dans la zone qui défile. */
    margin: 0 calc(-1 * var(--esp-1)); padding: var(--esp-1);
  }
  .colonne-tete { justify-content: center; padding: 0; }
  .colonne-titres, .colonne-pages, .colonne-prochaine { display: none; }
  /* Seules les vues de la page courante sont listées ; l'écran de menu du téléphone les montre toutes. */
  .colonne-pages > li:not(.est-courante) > .colonne-vues { display: none; }
  .colonne-pages > li > a .icone { display: none; }

  /* De 1 024 à 1 099 px, la colonne s'ouvre par-dessus le contenu : la piste de la grille reste à 56 px, rien ne bouge. */
  .appli.colonne-deployee .colonne {
    width: 248px; z-index: var(--z-menu); padding: var(--esp-6) var(--esp-4);
    box-shadow: var(--ombre-2); animation: colonne-entre var(--duree-200) var(--courbe-entree);
  }
  .appli.colonne-deployee .colonne-tete { justify-content: space-between; padding: 0 0 var(--esp-4) var(--esp-3); }
  .appli.colonne-deployee .colonne-titres, .appli.colonne-deployee .colonne-pages { display: block; }
  .appli.colonne-deployee .colonne-prochaine { display: grid; }
}
@keyframes colonne-entre { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  @keyframes colonne-entre { from { opacity: 0; } to { opacity: 1; } }
}

/* 1 100 px et plus : la colonne ouverte à côté du rail, sauf si le couple l'a repliée (cookie lu par le gabarit). */
@media (min-width: 1100px) {
  .appli.avec-colonne[data-colonne="ouverte"] { grid-template-columns: 80px 248px minmax(0, 1fr); }
  .appli[data-colonne="ouverte"] .colonne { padding: var(--esp-6) var(--esp-4); }
  .appli[data-colonne="ouverte"] .colonne-tete { justify-content: space-between; padding: 0 0 var(--esp-4) var(--esp-3); }
  .appli[data-colonne="ouverte"] .colonne-titres, .appli[data-colonne="ouverte"] .colonne-pages { display: block; }
  .appli[data-colonne="ouverte"] .colonne-prochaine { display: grid; }
  /* La colonne ouverte porte la pastille des épingles sur « Plan de table » : pas deux fois. */
  .appli[data-colonne="ouverte"] .nav-app-liens a[aria-current] > .nav-badge { display: none; }
}

/* Écrans hors connexion : le logo, puis une carte centrée (patron « formulaire d'accès »). */
.appli.appli-seule { grid-template-columns: minmax(0, 1fr); }
.appli-seule .nav-app { position: static; height: auto; display: flex; justify-content: center; padding: var(--esp-12) var(--gouttiere) var(--esp-6); background: transparent; border: 0; --logo-fond: var(--fond); }
.appli-seule .nav-app-tete { display: flex; justify-content: center; width: 100%; }
.appli-seule .marque .logo-infini { width: 64px; }
.appli-seule .marque-nom { position: static; width: auto; height: auto; clip: auto; }
.appli-seule .appli-contenu { padding-top: 0; }
.appli-seule .page { max-width: 440px; padding: var(--esp-8) var(--esp-6); background: var(--surface); border: var(--bordure-fine); border-radius: var(--r-l); box-shadow: var(--ombre-1); }
.appli-seule .pied-app { max-width: 440px; border-top: 0; margin-top: var(--esp-6); }

/* Contenu : largeur plafonnée et centrée (le plan de table demande toute la largeur). */
.page, .tete-telephone, .pied-app { width: 100%; max-width: 1200px; margin-inline: auto; }
.page.page-large { max-width: none; }
.page:focus { outline: none; }
.pied-app {
  display: flex; flex-wrap: wrap; gap: var(--esp-2); justify-content: center;
  margin-top: var(--esp-12); padding-top: var(--esp-6); border-top: var(--bordure-fine);
  color: var(--texte-sec); font-size: var(--taille-meta);
}
.message-flash { margin-bottom: var(--esp-6); align-items: center; }
.message-flash .btn-icone { background: transparent; border-color: transparent; }

/* ---------- 3. En-tête de page ----------------------------------------- */
/* Les vues anciennes posent leur titre en <h1 class="h3"> : c'est le titre de page outil. */
.page > h1, .page > div > h1, .page > div > div > h1, .page > header h1 { font-size: var(--taille-4); }
/* ATL-883 : l'introduction d'une page suit la largeur du contenu de la page, jusqu'au bord des cartes ; --mesure ne borne que le texte
   de lecture (réponses, notes de version, site des invités). */
@media (max-width: 639.98px) { .page > h1, .page > div > h1, .page > div > div > h1, .page > header h1 { font-size: var(--taille-3); } }
/* Patron commun : titre, une phrase, actions à droite (repliées dessous au téléphone). */
.page-tete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--esp-4); margin-bottom: var(--esp-8); }
.page-tete h1 { font-size: var(--taille-4); }
.page-tete p { margin-top: var(--esp-2); color: var(--texte-sec); }
/* Le bloc titre + phrase prend toute la place que laissent les actions : sans cela, il ne serait large que de son texte et l'introduction
   s'arrêterait bien avant le bord des cartes. Replié sous les actions quand la ligne est trop étroite. */
.page-tete > :first-child:not(.actions) { flex: 1 1 18rem; min-width: 0; }
.page-tete .actions { flex: none; }
/* Téléphone : les actions de l'en-tête passent sous le titre et prennent la largeur, leurs boutons à la ligne
   (livre d'or, cadeaux, campagnes) ; sans ça, la rangée garde sa largeur de bureau et élargit toute la page. */
@media (max-width: 639.98px) {
  .page-tete .actions { flex: 1 1 100%; width: 100%; }
  .page-tete .actions .btn { flex: 1 1 auto; justify-content: center; }
}
/* Un libellé de bouton plus long que l'écran (« Demander la suppression de mon compte ») passe à la ligne. */
@media (max-width: 639.98px) {
  .page .btn:not(.btn-icone) { max-width: 100%; white-space: normal; text-align: center; padding-block: var(--esp-2); }
}
@media (max-width: 639.98px) { .page-tete h1 { font-size: var(--taille-3); } }
.section-titre { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); margin: var(--esp-8) 0 var(--esp-4); }
.section-titre h2 { font-size: var(--taille-2); margin: 0; }

/* ---------- 4. Boutons -------------------------------------------------- */
.btn-primary { background: var(--action); color: var(--texte-sur-action); }
.btn-primary:hover, .btn-primary:active, .btn-primary:focus-visible { background: var(--action-survol); color: var(--texte-sur-action); }
.btn-outline-secondary, .btn-outline-primary, .btn-secondary, .btn-outline-success, .btn-warning, .btn-light {
  background: var(--surface); color: var(--texte); border-color: var(--bordure-controle);
}
.btn-outline-secondary:hover, .btn-outline-primary:hover, .btn-secondary:hover, .btn-outline-success:hover, .btn-warning:hover, .btn-light:hover {
  background: var(--sable); color: var(--texte);
}
/* Le rouge plein reste au dialogue de confirmation ; ailleurs, un contour au texte rouge. */
.btn-outline-danger { background: var(--surface); color: var(--danger); border-color: var(--bordure-controle); }
.btn-outline-danger:hover { background: var(--alerte-pale); color: var(--danger); border-color: var(--danger); }
.btn-danger { background: var(--danger); color: var(--texte-sur-action); }
.btn-danger:hover { background: var(--alerte); color: var(--texte-sur-action); }
.btn-link { background: none; color: var(--action); padding-inline: var(--esp-2); text-decoration: underline; text-underline-offset: .2em; }
.btn-link:hover { color: var(--action-survol); }
.btn-sm { min-height: var(--hauteur-controle-petit); padding: 0 var(--esp-4); font-size: var(--taille-sec); }
.btn-sm.btn-link { padding-inline: var(--esp-2); }
.btn-lg { min-height: 56px; padding: 0 var(--esp-8); }
.btn.w-100, .btn.d-block { display: flex; }
.btn-group { display: inline-flex; flex-wrap: wrap; gap: var(--esp-1); }
.btn-close {
  width: var(--cible-min); height: var(--cible-min); flex: none; padding: 0;
  border: 0; border-radius: var(--r-rond); cursor: pointer;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232A1F2D' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / 20px no-repeat;
}
.btn-close:hover { background-color: var(--sable); }
.btn-cible-tactile { min-width: var(--cible-min); min-height: var(--cible-min); }
@media (max-width: 639.98px) {
  .actions-formulaire { display: flex; flex-direction: column-reverse; gap: var(--esp-2); }
  .actions-formulaire .btn, .btn-pleine-largeur-mobile { width: 100%; }
}

/* ---------- 5. Champs ---------------------------------------------------- */
.form-label { display: block; margin-bottom: var(--esp-2); font-size: var(--taille-sec); font-weight: var(--graisse-moyenne); color: var(--texte); }
.form-control, .form-select {
  display: block; width: 100%; min-height: var(--hauteur-controle);
  padding: var(--esp-2) var(--esp-4);
  background-color: var(--surface); color: var(--texte);
  border: var(--bordure-champ); border-radius: var(--r-s);
  font: var(--graisse-normale) var(--taille-corps)/var(--interligne-corps) var(--police);
  transition: border-color var(--duree-150) var(--courbe-douce), box-shadow var(--duree-150) var(--courbe-douce);
}
.form-control::placeholder { color: var(--texte-sec); opacity: 1; }
.form-control:hover, .form-select:hover { border-color: var(--cacao); }
.form-control:focus, .form-select:focus { outline: none; border-color: var(--focus); box-shadow: var(--anneau); }
.form-control:disabled, .form-control[readonly], .form-select:disabled { background-color: var(--sable); color: var(--texte-sec); }
textarea.form-control { min-height: 120px; resize: vertical; }
textarea.form-control[rows="2"], textarea.form-control[rows="1"] { min-height: 80px; }
.form-select {
  appearance: none; padding-right: var(--esp-12);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232A1F2D' 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 var(--esp-4) center; background-size: 18px;
}
.form-select[multiple], .form-select[size]:not([size="1"]) { padding-right: var(--esp-4); background-image: none; }
.form-control-sm, .form-select-sm { min-height: var(--hauteur-controle-petit); padding: var(--esp-1) var(--esp-2); }
.form-select-sm { padding-right: var(--esp-8); background-position: right var(--esp-2) center; }
/* Dans les grilles serrées (déroulé, menu, formulaires en ligne), le texte garde sa place. */
.row .form-control, .row .form-select { padding-left: var(--esp-3); }
.row .form-select { padding-right: var(--esp-8); background-position: right var(--esp-3) center; }
input[type="time"].form-control, input[type="date"].form-control, input[type="number"].form-control { padding-inline: var(--esp-2); }
input[type="color"].form-control { padding: var(--esp-1); width: var(--esp-16); }
input[type="file"].form-control { padding: var(--esp-2); }
.form-control-plaintext { padding: var(--esp-2) 0; }
.form-text { display: block; margin-top: var(--esp-1); font-size: var(--taille-sec); color: var(--texte-sec); }

/* Cases et boutons radio : zone cliquable de 44 px, comme .option du design system. */
.form-check { display: flex; align-items: center; gap: var(--esp-3); min-height: var(--cible-min); }
.form-check-label { cursor: pointer; }
.form-check-input, .option-case {
  appearance: none; margin: 0; flex: none;
  width: 22px; height: 22px;
  border: 2px solid var(--bordure-controle); border-radius: 6px; background: var(--surface);
  display: inline-grid; place-content: center; cursor: pointer; vertical-align: middle;
  transition: background-color var(--duree-150) var(--courbe-douce), border-color var(--duree-150) var(--courbe-douce);
}
.form-check-input[type="radio"] { border-radius: var(--r-rond); }
.form-check-input:checked, .option-case:checked { background: var(--action); border-color: var(--action); }
.form-check-input[type="checkbox"]:checked::after, .option-case:checked::after {
  content: ""; width: 12px; height: 12px; background: var(--texte-sur-action);
  clip-path: polygon(14% 52%, 0 66%, 38% 100%, 100% 22%, 86% 8%, 38% 72%);
}
.form-check-input[type="radio"]:checked::after { content: ""; width: 8px; height: 8px; border-radius: var(--r-rond); background: var(--texte-sur-action); }
.form-check-input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.input-group { display: flex; align-items: stretch; width: 100%; }
.input-group > .form-control, .input-group > .form-select { flex: 1 1 auto; width: 1%; min-width: 0; }
.input-group > :not(:first-child) { margin-left: -1.5px; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group > :not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group > .btn { border-radius: var(--r-s); }
.input-group > .btn:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group > .btn:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group-text {
  display: flex; align-items: center; padding: 0 var(--esp-3);
  background: var(--sable); color: var(--texte-sec); border: var(--bordure-champ); border-radius: var(--r-s);
  font-size: var(--taille-sec); white-space: nowrap;
}
.input-group-sm > .form-control, .input-group-sm > .form-select, .input-group-sm > .btn { min-height: var(--hauteur-controle-petit); }

/* Validation serveur (ASP.NET) : mêmes signes que le design system. */
.input-validation-error, .form-control[aria-invalid="true"], .form-select[aria-invalid="true"] { border-color: var(--danger); }
.input-validation-error:focus { box-shadow: 0 0 0 4px var(--alerte-pale); }
.field-validation-error, .text-danger.small, span.text-danger {
  display: flex; gap: var(--esp-2); margin-top: var(--esp-1); font-size: var(--taille-sec); color: var(--danger);
}
.field-validation-valid { display: none; }
.validation-summary-errors {
  margin-bottom: var(--esp-6); padding: var(--esp-4); border-radius: var(--r-m);
  background: var(--alerte-pale); color: var(--cacao);
}
.validation-summary-errors ul { margin: 0; padding-left: var(--esp-6); }
.validation-summary-valid { display: none; }

/* Formulaire de page : colonne étroite, étiquettes au-dessus. */
/* Page de formulaire : une colonne de lecture centrée. Un bloc .formulaire reste lisible (720 px), mais une page qui ne contient QUE
   des blocs de formulaire autour de sa tête (titre, introduction, fil d'Ariane, messages) se resserre tout entière sur cette
   colonne, centrée comme le reste du site : la tête et la carte s'alignent, au lieu de laisser la carte collée à gauche d'une
   page de 1200 px. Une page qui mêle formulaire et contenu large (tableau, grille, liste) garde toute sa largeur. */
:root { --largeur-formulaire: 720px; }
.formulaire { max-width: var(--largeur-formulaire); }
/* Dans une carte de formulaire, les champs suivent la largeur de la carte : le plafond de 480 px des champs isolés (ds/composants.css)
   laissait un tiers de la carte vide à droite du champ. */
.formulaire .champ-groupe { max-width: none; }
/* Un « formulaire » qui est en fait une grille de saisie (tableau de champs) prend toute la largeur de la page. */
.formulaire:has(table) { max-width: none; }
.page:has(> .formulaire):not(:has(table)):not(:has(> :not(.formulaire, .page-tete, header, nav, h1, p, .surtitre, .lm-message, .alerte, .alert, [class*="progression"], [class*="etape"], script, style, template))) { max-width: var(--largeur-formulaire); }
.formulaire-pied { display: flex; flex-wrap: wrap; gap: var(--esp-3); margin-top: var(--esp-8); padding-top: var(--esp-6); border-top: var(--bordure-fine); }

/* ---------- 6. Cartes --------------------------------------------------- */
.card {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  background: var(--fond-carte); border: var(--bordure-fine); border-radius: var(--r-m);
  box-shadow: var(--ombre-1);
}
.card-body { flex: 1 1 auto; padding: var(--esp-6); min-width: 0; }
@media (max-width: 639.98px) { .card-body { padding: var(--esp-4); } }
.card-header, .card-footer { padding: var(--esp-4) var(--esp-6); background: transparent; }
.card-header { border-bottom: var(--bordure-fine); font-weight: var(--graisse-moyenne); }
.card-footer { border-top: var(--bordure-fine); }
.card-title { font-size: var(--taille-1); letter-spacing: 0; margin-bottom: var(--esp-2); }
.card > .list-group { border: 0; border-radius: 0; }
.card > .table-responsive, .card-body > .table-responsive { border: 0; border-radius: 0; box-shadow: none; }

/* ---------- 7. Tableaux -------------------------------------------------- */
/* Toujours dans un cadre blanc à filets (règle du design system). */
/* position: relative : les libellés réservés aux lecteurs d'écran (.visually-hidden, positionnés en absolu) se calent sur le
   cadre ; sans lui ils s'échappent du défilement et élargissent toute la page à 375 px (cadeaux, moments : NAV-09). */
.table-responsive { position: relative; overflow-x: auto; background: var(--surface); border: var(--bordure-fine); border-radius: var(--r-m); }
.table-responsive > .table { margin: 0; }
.table { width: 100%; border-collapse: collapse; font-size: var(--taille-corps); color: var(--texte); background: transparent; }
.table > thead th, .table > thead td {
  padding: var(--esp-3) var(--esp-4);
  background: var(--sable); color: var(--texte-sec);
  font-size: var(--taille-sec); font-weight: var(--graisse-moyenne); text-align: left; white-space: nowrap; vertical-align: bottom;
}
.table > tbody > tr > *, .table > tfoot > tr > * { padding: var(--esp-3) var(--esp-4); border-top: var(--bordure-fine); vertical-align: middle; }
.table > tfoot > tr > * { font-weight: var(--graisse-moyenne); background: var(--creme); }
.table > :is(thead, tbody, tfoot) > tr > :first-child { padding-left: var(--esp-6); }
.table > :is(thead, tbody, tfoot) > tr > :last-child { padding-right: var(--esp-6); }
.table-sm > :is(thead, tbody, tfoot) > tr > * { padding-block: var(--esp-2); }
.table-hover > tbody > tr { transition: background-color var(--duree-150) var(--courbe-douce); }
.table-hover > tbody > tr:hover { background: var(--creme); }
.table-light, .table > thead.table-light th { background: var(--sable); }
.table .text-end, .table .nombre { font-variant-numeric: tabular-nums; white-space: nowrap; }
.card .table > :is(thead, tbody, tfoot) > tr > :first-child { padding-left: var(--esp-4); }
.card .table > :is(thead, tbody, tfoot) > tr > :last-child { padding-right: var(--esp-4); }

/* ---------- 8. Badges et messages -------------------------------------- */
/* Les couleurs Bootstrap deviennent les états du design system : texte foncé sur fond pâle. */
.badge { font-weight: var(--graisse-moyenne); }
.badge.bg-success, .text-bg-success { background: var(--ok-pale) !important; color: var(--ok) !important; }
.badge.bg-danger, .text-bg-danger { background: var(--alerte-pale) !important; color: var(--alerte) !important; }
.badge.bg-warning { background: var(--att-pale) !important; color: var(--att) !important; }
.badge.bg-info, .badge.bg-primary { background: var(--prune-pale) !important; color: var(--prune) !important; }
.badge.bg-secondary, .badge.bg-light { background: var(--sable) !important; color: var(--texte) !important; }
.badge.bg-dark { background: var(--cacao) !important; color: var(--texte-sur-action) !important; }

.alert {
  position: relative; margin-bottom: var(--esp-6); padding: var(--esp-4);
  border-radius: var(--r-m); background: var(--prune-pale); color: var(--cacao);
}
.alert-success { background: var(--ok-pale); }
.alert-danger { background: var(--alerte-pale); }
.alert-warning { background: var(--att-pale); }
.alert-secondary, .alert-light { background: var(--sable); }
.alert-link, .alert a { color: var(--cacao); font-weight: var(--graisse-moyenne); }
.alert > :last-child { margin-bottom: 0; }

.progress { display: flex; height: 8px; overflow: hidden; border-radius: var(--r-rond); background: var(--sable); }
.progress-bar { display: flex; justify-content: center; overflow: hidden; height: 100%; background: var(--action); color: var(--texte-sur-action); font-size: var(--taille-meta); }
.progress-bar.bg-success { background: var(--ok) !important; }
.progress-bar.bg-warning { background: var(--mandarine) !important; }
.progress-bar.bg-danger { background: var(--alerte) !important; }

/* ---------- 9. Listes ------------------------------------------------- */
.list-group { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; background: var(--surface); border: var(--bordure-fine); border-radius: var(--r-m); overflow: hidden; }
.list-group-item { display: block; padding: var(--esp-3) var(--esp-4); border-top: var(--bordure-fine); color: var(--texte); text-decoration: none; }
.list-group-item:first-child { border-top: 0; }
.list-group-item-action:hover { background: var(--creme); color: var(--texte); }
.list-group-item.active { background: var(--prune-pale); color: var(--action); }

.nav { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }

/* ---------- 10. Menus déroulants et dialogues -------------------------- */
/* Menu déroulant : <details class="deroulant"> + .dropdown-menu (sans script). */
.deroulant { position: relative; display: inline-block; }
.deroulant > summary { list-style: none; }
.deroulant > summary::-webkit-details-marker { display: none; }
.dropdown-toggle::after { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; }
.dropdown-menu {
  display: none; position: absolute; left: 0; top: calc(100% + var(--esp-2)); z-index: var(--z-menu);
  min-width: 260px; max-width: calc(100vw - 2 * var(--esp-4)); max-height: 70vh; overflow-y: auto;
  margin: 0; padding: var(--esp-2); list-style: none;
  background: var(--surface); border: var(--bordure-fine); border-radius: var(--r-m); box-shadow: var(--ombre-2);
}
.deroulant[open] > .dropdown-menu { display: block; animation: menu-entre var(--duree-150) var(--courbe-entree); }
.dropdown-item {
  display: flex; align-items: center; gap: var(--esp-2); width: 100%; min-height: var(--cible-min);
  padding: var(--esp-2) var(--esp-3); border: 0; border-radius: var(--r-s);
  background: none; color: var(--texte); text-align: left; text-decoration: none; cursor: pointer;
}
.dropdown-item:hover { background: var(--sable); color: var(--texte); }
.dropdown-item.active { background: var(--prune-pale); color: var(--action); }
.dropdown-divider { height: 0; margin: var(--esp-2) 0; border: 0; border-top: var(--bordure-fine); }
.dropdown-header { padding: var(--esp-2) var(--esp-3) var(--esp-1); font-size: var(--taille-meta); color: var(--texte-sec); }

/* Dialogue de formulaire (plus large que la confirmation du design system). */
.dialogue-large { width: min(640px, calc(100% - 2 * var(--esp-4))); max-height: calc(100vh - 2 * var(--esp-4)); }
.dialogue .modal-header { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); }
.dialogue .modal-title { font-size: var(--taille-2); margin: 0; }
.dialogue .modal-body { margin-top: var(--esp-4); }
.dialogue .modal-footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--esp-3); margin-top: var(--esp-6); }
@media (max-width: 575.98px) {
  .dialogue-large { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; border-radius: 0; }
  .dialogue .modal-footer { padding-bottom: env(safe-area-inset-bottom); }
}

/* Fenêtre de confirmation d'une sortie des invités (ATL-790) : centrée au bureau, feuille ancrée en bas au téléphone. */
.dialogue-statut { width: min(560px, calc(100% - 2 * var(--esp-4))); }
.dialogue-statut .situations-statut, .dialogue-statut .situations-statut ul { list-style: none; margin: 0; padding: 0; }
.dialogue-statut .situations-statut > li + li { margin-top: var(--esp-3); }
.dialogue-statut .situations-statut ul li { padding-left: var(--esp-3); border-left: 2px solid var(--prune-pale, var(--sable)); margin-top: var(--esp-1); }
.dialogue-statut .prevenir-statut { margin-top: var(--esp-4); }
.dialogue-statut .modal-footer form { display: inline-flex; margin: 0; }
@media (max-width: 575.98px) {
  .dialogue-statut { width: 100%; max-width: none; height: auto; max-height: 88vh; margin: auto 0 0; border-radius: var(--r-l, 16px) var(--r-l, 16px) 0 0; overflow-y: auto; }
  .dialogue-statut .modal-footer { flex-direction: column-reverse; align-items: stretch; }
  .dialogue-statut .modal-footer form, .dialogue-statut .modal-footer .btn { width: 100%; min-height: var(--cible-min, 44px); justify-content: center; }
}

/* ---------- 11. Utilitaires de texte et de fond ------------------------ */
/* bootstrap-utilities porte ses propres couleurs : elles sont remises sur les jetons. */
.text-muted, .text-secondary, .text-body-secondary { color: var(--texte-sec) !important; }
.text-danger { color: var(--danger) !important; }
.text-success { color: var(--ok) !important; }
.text-warning { color: var(--att) !important; }
.text-info, .text-primary { color: var(--action) !important; }
.text-dark, .text-body { color: var(--texte) !important; }
.text-white { color: var(--texte-sur-action) !important; }
.bg-light { background-color: var(--sable) !important; }
.bg-white { background-color: var(--surface) !important; }
.bg-success:not(.badge) { background-color: var(--ok-pale) !important; }
.bg-warning:not(.badge) { background-color: var(--att-pale) !important; }
.bg-danger:not(.badge) { background-color: var(--alerte-pale) !important; }
.bg-secondary:not(.badge) { background-color: var(--sable) !important; }
.fw-bold, .fw-bolder, .fw-semibold { font-weight: var(--graisse-forte) !important; }
.fw-medium { font-weight: var(--graisse-moyenne) !important; }
.fs-4 { font-size: var(--taille-2) !important; }
.border, .border-top, .border-bottom, .border-start, .border-end { border-color: var(--bordure) !important; }
.rounded { border-radius: var(--r-s) !important; }
.rounded-3 { border-radius: var(--r-m) !important; }
.shadow-sm { box-shadow: var(--ombre-1) !important; }
.list-unstyled { list-style: none; padding-left: 0; }
.text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.visually-hidden, .visually-hidden-focusable:not(:focus) { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- 12. Composants propres à l'outil --------------------------- */

/* Graphiques en barres (budget) : prune pour le payé, abricot pour le reste. */
.graphe { display: flex; flex-direction: column; gap: var(--esp-2); }
.graphe-ligne { display: grid; align-items: center; gap: var(--esp-3); grid-template-columns: minmax(0, 9rem) 1fr 6rem; }
.graphe-libelle { overflow: hidden; font-size: var(--taille-sec); text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.graphe-piste { height: 16px; border-radius: var(--r-rond); background: var(--sable); }
.graphe-barre { position: relative; display: block; height: 100%; min-width: 4px; border-radius: var(--r-rond); background: var(--abricot); }
.graphe-part.paye { position: absolute; top: 0; left: 0; height: 100%; border-radius: var(--r-rond); background: var(--prune); }
.graphe-valeur { font-size: var(--taille-sec); font-variant-numeric: tabular-nums; }
.legende { color: var(--texte-sec); font-size: var(--taille-meta); }
.puce-legende { display: inline-block; width: 12px; height: 12px; border-radius: 4px; vertical-align: middle; }
.puce-legende.paye { background: var(--prune); }
.puce-legende.reste { background: var(--abricot); }
.puce-legende.libre { background: var(--sable); box-shadow: inset 0 0 0 1px var(--trait); }

/* Barre empilée : payé / à payer / libre (tableau de bord, budget). */
.pile { display: flex; gap: 2px; height: 12px; margin: var(--esp-4) 0; border-radius: var(--r-rond); overflow: hidden; background: var(--sable); }
.pile i { display: block; height: 100%; }
.pile .paye { background: var(--prune); }
.pile .reste { background: var(--abricot); }
.kv { display: grid; gap: var(--esp-2); }
.kv > div { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); font-size: var(--taille-sec); }
.kv > div > span { display: inline-flex; align-items: center; gap: var(--esp-2); color: var(--texte-sec); }
.kv b { font-weight: var(--graisse-moyenne); font-variant-numeric: tabular-nums; }

/* Journal de démarchage : ce qu'on envoie et ce qui revient ne se lisent pas pareil. */
.journal { margin: 0; padding: 0; list-style: none; }
.journal-entree { margin-bottom: var(--esp-2); padding: var(--esp-3) var(--esp-4); border: var(--bordure-fine); border-left-width: 3px; border-radius: var(--r-s); background: var(--surface); }
.journal-entree.envoye { border-left-color: var(--prune); }
.journal-entree.recu { border-left-color: var(--mandarine); }

/* Calendrier : grille à filets, le jour J en pêche. */
.calendrier { display: grid; gap: 1px; grid-template-columns: repeat(7, minmax(0, 1fr)); border: var(--bordure-fine); border-radius: var(--r-m); background: var(--bordure); overflow: hidden; }
.calendrier-entete { padding: var(--esp-2); background: var(--sable); color: var(--texte-sec); font-size: var(--taille-meta); font-weight: var(--graisse-moyenne); text-align: center; }
.calendrier-jour { display: flex; flex-direction: column; gap: var(--esp-1); min-height: 104px; padding: var(--esp-1); background: var(--surface); min-width: 0; }
.calendrier-jour.hors-mois { background: var(--creme); }
.calendrier-jour.hors-mois .calendrier-numero { color: var(--texte-sec); }
.calendrier-jour.aujourdhui { box-shadow: inset 0 0 0 2px var(--action); }
.calendrier-jour.jour-j { background: var(--peche-pale); }
.calendrier-numero { color: var(--texte-sec); font-size: var(--taille-meta); text-align: right; }
.jalon {
  display: block; overflow: hidden; padding: 2px var(--esp-1);
  border-left: 3px solid var(--trait); border-radius: 4px; background: var(--sable);
  color: var(--texte); font-size: var(--taille-meta); line-height: var(--interligne-meta);
  text-decoration: none; text-overflow: ellipsis; white-space: nowrap;
}
a.jalon:hover { background: var(--filet); color: var(--texte); }
.jalon.alerte { font-weight: var(--graisse-forte); text-decoration: underline wavy currentColor 1px; }
.jalon-evenement { border-left-color: var(--prune); background: var(--prune-pale); }
.jalon-tache { border-left-color: var(--mandarine); background: var(--mandarine-pale); }
.jalon-relance { border-left-color: var(--att); background: var(--att-pale); }
.jalon-paiement { border-left-color: var(--ok); background: var(--ok-pale); }
.jalon-dispo { border-left-color: var(--abricot); background: transparent; color: var(--texte-sec); }
.puce-jalon { display: inline-block; width: 12px; height: 12px; border-left: 3px solid; border-radius: 4px; vertical-align: middle; }
@media (max-width: 639.98px) {
  .calendrier-jour { min-height: 72px; }
  .calendrier-entete { padding: var(--esp-1) 0; }
}

/* Une liste vide reste dans son cadre (patron « liste ») : même place, une phrase. */
.liste-vide { padding: var(--esp-6); margin: 0; background: var(--surface); border: var(--bordure-fine); border-radius: var(--r-m); color: var(--texte-sec); text-align: center; }

/* Listes de tâches (accueil, prestataires, onglets) : case ronde, texte barré une fois faite. */
.liste-taches { margin: 0; padding: 0; list-style: none; background: var(--surface); border: var(--bordure-fine); border-radius: var(--r-m); overflow: hidden; }
.tache { display: flex; align-items: center; gap: var(--esp-3); min-height: 64px; padding: var(--esp-3) var(--esp-4); border-top: var(--bordure-fine); }
.tache:first-child { border-top: 0; }
.tache.faite .tache-corps a { color: var(--texte-sec); text-decoration: line-through; }
.tache.en-retard .tache-meta { color: var(--alerte); font-weight: var(--graisse-moyenne); }
.tache-corps { flex: 1; min-width: 0; }
.tache-corps a { color: var(--texte); font-weight: var(--graisse-moyenne); text-decoration: none; }
.tache-corps a:hover { color: var(--action); text-decoration: underline; }
.tache-meta { display: flex; flex-wrap: wrap; gap: var(--esp-1) var(--esp-3); color: var(--texte-sec); font-size: var(--taille-sec); }
.btn-case {
  position: relative; flex: none; width: 24px; height: 24px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--bordure-controle); border-radius: var(--r-rond);
  background: var(--surface); color: transparent; font-size: var(--taille-meta); line-height: 1; cursor: pointer;
  transition: background-color var(--duree-150) var(--courbe-douce), border-color var(--duree-150) var(--courbe-douce);
}
.btn-case::before { content: ""; position: absolute; inset: -10px; }
.btn-case:hover { border-color: var(--action); }
.tache.faite .btn-case { background: var(--action); border-color: var(--action); color: var(--texte-sur-action); }

/* Déroulé du jour J : une ligne de temps, l'heure à gauche. */
.deroule { position: relative; margin: 0 0 var(--esp-6); padding: 0 0 0 var(--esp-6); border-left: 2px solid var(--filet); list-style: none; }
.deroule-etape { position: relative; display: grid; align-items: start; gap: var(--esp-3); grid-template-columns: 7rem 1fr auto; margin-bottom: var(--esp-3); }
.deroule-etape::before {
  content: ""; position: absolute; top: var(--esp-6); left: calc(-1 * var(--esp-6) - 7px);
  width: 12px; height: 12px; border: 2px solid var(--surface); border-radius: var(--r-rond); background: var(--mandarine);
  box-shadow: 0 0 0 1px var(--mandarine-claire);
}
.deroule-heure { padding-top: var(--esp-4); font-weight: var(--graisse-forte); font-variant-numeric: tabular-nums; }
.deroule-heure .text-muted { display: block; font-size: var(--taille-meta); font-weight: var(--graisse-normale); }
.deroule-actions { padding-top: var(--esp-3); }
@media (max-width: 767.98px) { .deroule-etape { grid-template-columns: 1fr; gap: var(--esp-1); } .deroule-heure { padding-top: 0; } }

/* Barre d'outils au-dessus d'une liste : recherche, un bouton Filtres, export. */
.recherche { position: relative; flex: 1 1 240px; min-width: 0; }
.recherche .icone { position: absolute; left: var(--esp-4); top: 50%; transform: translateY(-50%); color: var(--texte-sec); pointer-events: none; }
.recherche .champ, .recherche .form-control { padding-left: var(--esp-12); }

/* Petites statistiques (tuiles chiffrées) */
.chiffre-cle { display: flex; flex-direction: column; gap: var(--esp-1); }
.chiffre-cle b { font-size: var(--taille-5); font-weight: var(--graisse-forte); line-height: var(--interligne-serre); letter-spacing: var(--approche-affiche); font-variant-numeric: tabular-nums; }
.chiffre-cle span { color: var(--texte-sec); font-size: var(--taille-sec); }

/* ---------- 13. Accueil du couple (planche Soleil · Infini, 04) ---------- */
.accueil-tete { align-items: center; }

/* La photo du couple (ATL-623) : ronde, à gauche du « Bonjour » (placement de la variante B choisie par le CEO, rond demandé à
   la place de l'arche) ; le salut prend la largeur, l'état de la semaine reste à droite. C'est le carré de 512 px tel que le
   cadrage l'a découpé : le rond de l'accueil montre exactement celui des Paramètres. Au téléphone il est plus petit ; le
   raccourci « Ajouter une photo » est alors une ligne à part, sous le salut. */
.accueil-tete { gap: var(--esp-6); }
.accueil-photo { flex: none; margin: 0; }
.accueil-photo + div { flex: 1 1 0; min-width: 0; }
.accueil-photo img {
  display: block; width: 120px; height: 120px; object-fit: cover; border-radius: var(--r-rond);
  border: 3px solid var(--surface); box-shadow: 0 0 0 1px var(--bordure), var(--ombre-1);
}
.accueil-photo-ajout {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--esp-1);
  width: 120px; height: 120px; padding: 0 var(--esp-3); border: 2px dashed var(--bordure-controle);
  border-radius: var(--r-rond); color: var(--action); text-decoration: none;
  font-size: var(--taille-meta); line-height: var(--interligne-meta); font-weight: var(--graisse-moyenne); text-align: center;
  transition: background-color .15s, border-color .15s;
}
.accueil-photo-ajout:hover, .accueil-photo-ajout:focus-visible { background: var(--prune-pale); border-color: var(--action); }
.accueil-photo-vide { display: grid; place-items: center; }
@media (max-width: 639.98px) {
  .accueil-tete { gap: var(--esp-4); }
  .accueil-photo + div { flex: 1 1 12rem; }
  .accueil-photo img { width: 80px; height: 80px; border-width: 2px; }
  /* Sans photo : une ligne à part (un rond pointillé et son libellé), pas un grand rond de plus dans l'en-tête. */
  .accueil-photo-ajout {
    order: 3; flex-direction: row; justify-content: flex-start; gap: var(--esp-3); width: auto; height: auto; min-height: var(--cible-min);
    padding: 0; border: 0; border-radius: 0; background: none; font-size: var(--taille-sec); text-align: left;
  }
  .accueil-photo-vide { width: 40px; height: 40px; border: 2px dashed var(--bordure-controle); border-radius: var(--r-rond); }
  .accueil-photo-ajout:hover .accueil-photo-vide, .accueil-photo-ajout:focus-visible .accueil-photo-vide { background: var(--prune-pale); border-color: var(--action); }
}

/* Dans le rail, la photo du couple remplace les initiales ; pour les mariés c'est un lien vers sa section des Paramètres. */
a.pastille-photo { color: inherit; text-decoration: none; }
a.pastille-photo:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Paramètres : la section de la photo du couple. L'aperçu est le rond tel qu'il paraîtra ; il cadre la photo entière
   avec object-position, comme le serveur la découpe. */
.photo-couple { margin-bottom: var(--esp-6); scroll-margin-top: var(--esp-6); }
.photo-couple-vide { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--esp-4) 0; }
.photo-couple-vide h3 { font-size: var(--taille-1); letter-spacing: 0; }
.photo-couple-vide p { color: var(--texte-sec); max-width: 44ch; margin: var(--esp-2) 0 var(--esp-6); }
.photo-couple-vide .champ-groupe { text-align: left; margin-inline: auto; }
.photo-couple-vide .actions { justify-content: center; margin-top: var(--esp-4); }
.photo-couple-corps { display: flex; flex-wrap: wrap; gap: var(--esp-6); align-items: flex-start; }
.photo-couple-apercu {
  position: relative; flex: none; width: 160px; height: 160px; overflow: hidden; border-radius: var(--r-rond);
  border: 3px solid var(--surface); box-shadow: 0 0 0 1px var(--bordure), var(--ombre-1); background: var(--sable);
}
.photo-couple-apercu img { position: absolute; max-width: none; display: block; user-select: none; -webkit-user-drag: none; }
/* Glissable à la souris et au doigt, sur les deux axes (le défilement de la page ne vole pas le geste). */
.photo-couple-apercu.glissable { cursor: grab; touch-action: none; }
.photo-couple-apercu.glissable.sans-jeu { cursor: default; }
.photo-couple-apercu.en-glisse { cursor: grabbing; }
.photo-couple-curseurs { display: grid; grid-template-columns: minmax(7rem, auto) minmax(0, 1fr); align-items: center; gap: var(--esp-1) var(--esp-4); max-width: 30rem; margin-top: var(--esp-3); }
.photo-couple-curseurs input[type="range"]:disabled { opacity: .4; }
.photo-couple-reglages { flex: 1 1 18rem; min-width: 0; display: grid; gap: var(--esp-6); }
.photo-couple-reglages .actions { margin-top: var(--esp-3); }
.photo-couple-reglages input[type="range"] { width: 100%; min-height: var(--cible-min); accent-color: var(--action); }
.photo-couple-retirer { justify-self: start; color: var(--danger); }
@media (max-width: 639.98px) {
  .photo-couple-corps { justify-content: center; }
  .photo-couple-curseurs { grid-template-columns: minmax(0, 1fr); }
  .photo-couple-apercu { width: 128px; height: 128px; }
  .photo-couple .champ-groupe, .photo-couple .actions .btn { max-width: none; }
}
.etat-rails { align-self: center; padding: var(--esp-2) var(--esp-4); }
.accueil { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--esp-4); }
.accueil > * { min-width: 0; }
.accueil-titre { font-size: var(--taille-1); letter-spacing: 0; margin-bottom: var(--esp-3); }
@media (min-width: 768px) {
  .accueil { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-6); }
  .accueil-qui, .accueil-journee, .accueil-fetes, .accueil-plan { grid-column: 1 / -1; }
}
@media (min-width: 1180px) {
  .accueil { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .accueil-jour { grid-column: span 4; }
  .accueil-qui { grid-column: span 8; }
  .accueil-actions, .accueil-taches { grid-column: span 7; }
  .accueil-budget, .accueil-invites { grid-column: span 5; }
  .accueil-journee, .accueil-fetes, .accueil-plan { grid-column: 1 / -1; }
}

/* Bienvenue (arrivée d'un membre) : deux cartes, l'une sous l'autre au téléphone, côte à côte et de même largeur
   au-delà. Pas la grille du tableau de bord : à 12 colonnes, un bloc sans classe accueil-* n'en prend qu'une. */
.bienvenue { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--esp-4); }
.bienvenue > * { min-width: 0; }
@media (min-width: 768px) {
  .bienvenue { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-6); }
  /* L'EVG ou l'EVJF que prépare le témoin passe devant, sur toute la largeur. */
  .bienvenue .accueil-fetes { grid-column: 1 / -1; }
}

/* Le grand jour : surface de marque. Sur la mandarine, tout le texte est cacao (6,7:1). */
.accueil-jour { display: flex; flex-direction: column; }
.accueil-jour a { color: var(--cacao); font-weight: var(--graisse-moyenne); }
.accueil-jour .car-chiffre { margin-top: var(--esp-2); }
.car-sans-date { font-size: var(--taille-4); }
.car-etape { margin-top: var(--esp-3); font-size: var(--taille-sec); max-width: 32ch; }
.accueil-jour .jalons { margin-top: auto; padding-top: var(--esp-6); }

/* Où en êtes-vous : le plan en huit étapes du guide d'organisation (ATL-556). Une étape est un <details> : l'accordéon
   natif se replie au clavier comme au doigt ; l'étape en cours arrive ouverte. */
.accueil-plan { scroll-margin-top: var(--esp-8); }
.plan-resume { margin: 0 0 var(--esp-4); }
.plan-encart {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-4);
  margin-bottom: var(--esp-4); padding: var(--esp-4); border-radius: var(--r-m); background: var(--action-pale);
}
.plan-encart p { margin: var(--esp-1) 0 0; }
.plan-changes { margin-bottom: var(--esp-4); }
.plan-changes form { margin: 0; }
.plan-etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--esp-2); }
.plan-etape details { border: var(--bordure-fine); border-radius: var(--r-m); background: var(--surface); }
.plan-etape details[open] { border-color: var(--action); }
.plan-etape summary {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--esp-3);
  min-height: var(--cible-min); padding: var(--esp-3) var(--esp-4); cursor: pointer; list-style: none; border-radius: var(--r-m);
}
.plan-etape summary::-webkit-details-marker { display: none; }
.plan-etape summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.plan-numero {
  display: inline-grid; place-content: center; width: 32px; height: 32px; border-radius: var(--r-rond);
  background: var(--sable); font-weight: var(--graisse-forte); font-variant-numeric: tabular-nums;
}
.plan-encours .plan-numero { background: var(--action); color: var(--texte-sur-action); }
.plan-faite .plan-numero, .plan-ignoree .plan-numero { background: var(--ok-pale); color: var(--ok); }
.plan-titre { min-width: 0; display: grid; gap: var(--esp-1); }
.plan-titre small { color: var(--texte-sec); font-size: var(--taille-sec); }
.plan-faite .plan-titre b, .plan-ignoree .plan-titre b, .plan-plustard .plan-titre b, .plan-avenir .plan-titre b { font-weight: var(--graisse-moyenne); }
.plan-barre { display: block; height: 4px; border-radius: var(--r-rond); background: var(--sable); overflow: hidden; max-width: 320px; }
.plan-barre i { display: block; height: 100%; background: var(--action); }
.plan-chevron { color: var(--texte-sec); transition: transform var(--duree-150) var(--courbe-douce); }
.plan-etape details[open] .plan-chevron { transform: rotate(180deg); }
.plan-corps { padding: 0 var(--esp-4) var(--esp-4); display: grid; gap: var(--esp-3); }
.plan-question {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2) var(--esp-3);
  padding: var(--esp-3); border-radius: var(--r-m); background: var(--mandarine-pale);
}
.plan-question span { flex: 1 1 220px; }
.plan-taches { list-style: none; margin: 0; padding: 0; display: grid; }
.plan-taches li { display: flex; align-items: center; gap: var(--esp-3); min-height: var(--cible-min); padding: var(--esp-1) 0; border-top: var(--bordure-fine); }
.plan-taches li:first-child { border-top: 0; }
.plan-taches a { color: var(--texte); }
.plan-taches a:hover { color: var(--action); }
.plan-taches li.fait a { color: var(--texte-sec); text-decoration: line-through; }
.plan-tache { flex: 1; min-width: 0; display: grid; }
.plan-tache b { font-weight: var(--graisse-normale); }
.plan-tache small { color: var(--ok); font-size: var(--taille-sec); }
.plan-case { flex: none; display: inline-grid; place-content: center; width: 22px; height: 22px; border: 2px solid var(--bordure-controle); border-radius: 6px; }
.plan-case.cochee { background: var(--ok); border-color: var(--ok); color: var(--texte-sur-action); }
.plan-case .icone { width: 14px; height: 14px; }
.accueil-plan .annonce { margin: var(--esp-3) 0 0; }
.etape-choix form { display: flex; flex-wrap: wrap; gap: var(--esp-2); margin: 0; }
@media (max-width: 767.98px) {
  .plan-etape summary { grid-template-columns: auto minmax(0, 1fr) auto; }
  .plan-etape summary .badge { display: none; }
  .plan-taches li { flex-wrap: wrap; }
  /* Le titre prend la ligne, l'échéance passe dessous : pas de colonne de deux mots. */
  .plan-taches .plan-tache { flex: 1 1 calc(100% - 24px - 2 * var(--esp-3)); }
  .plan-taches .badge { margin-left: calc(24px + var(--esp-3)); }
}

/* Le bandeau d'étape, en tête d'une page ouverte depuis le plan : discret, la mandarine des encarts de marque. */
.bandeau-etape {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-3) var(--esp-4);
  margin-bottom: var(--esp-6); padding: var(--esp-3) var(--esp-4); border-radius: var(--r-m); background: var(--mandarine-pale);
}
.bandeau-etape-texte { display: grid; gap: var(--esp-1); min-width: 0; flex: 1 1 260px; }
.bandeau-etape-texte small { color: var(--texte-sec); font-size: var(--taille-sec); }
.bandeau-etape-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); }
.bandeau-etape-actions form { margin: 0; }

/* Le guide : les moments proposés avec leur heure, et les boutons du pied. */
.guide-moment { justify-content: flex-start; padding: var(--esp-2) 0; border-top: var(--bordure-fine); }
.guide-moment:first-of-type { border-top: 0; }
.guide-moment-texte { flex: 1; min-width: 0; display: grid; }
.guide-moment-texte small { color: var(--texte-sec); font-size: var(--taille-sec); }
.guide-moment-heure { color: var(--texte-sec); font-size: var(--taille-sec); font-variant-numeric: tabular-nums; white-space: nowrap; }
.guide-actions { display: flex; flex-wrap: wrap; gap: var(--esp-2); margin-top: var(--esp-8); }

/* Les blocs « on propose » des pages Moments, Prestataires et Budget (ATL-555) : une ligne par suggestion, sur toute la
   largeur de la carte, le champ libre et le lien vers la fiche vide en dernier. */
.bloc-propose { margin-bottom: var(--esp-6); max-width: 720px; }
.bloc-propose .texte-sec { margin: var(--esp-1) 0 var(--esp-4); }
.bloc-propose-lignes { display: grid; }
.bloc-propose .guide-actions { margin-top: var(--esp-4); }
.avis-brouillon { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); margin: 0; }
/* Au doigt, les petits boutons du plan, du bandeau et des blocs gardent une cible de 44 px. */
@media (max-width: 767.98px) {
  .accueil-plan .btn-petit, .bandeau-etape .btn-petit, .bloc-propose .btn-petit, .avis-brouillon .btn-petit { min-height: var(--cible-min); }
}

/* Qui vient ? */
.qui-vient { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--esp-6); }
@media (min-width: 640px) { .qui-vient { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.qui-vient h3 {
  display: flex; align-items: center; justify-content: space-between; gap: var(--esp-2); flex-wrap: wrap;
  margin-bottom: var(--esp-3); font-size: var(--taille-sec); font-weight: var(--graisse-moyenne); letter-spacing: 0; color: var(--texte-sec);
}
.qui-file { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--esp-1); }
.qui-file li { display: flex; align-items: center; gap: var(--esp-3); min-height: 52px; transition: opacity var(--duree-200) var(--courbe-douce); }
.qui-file li > div { min-width: 0; }
.qui-file b { display: block; font-weight: var(--graisse-moyenne); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qui-file small { display: block; font-size: var(--taille-sec); color: var(--texte-sec); }
.qui-file li.partie { opacity: 0; }
.qui-suite { margin: var(--esp-3) 0 0; font-size: var(--taille-sec); color: var(--texte-sec); }
.qui-ceremonie { padding: var(--esp-4); border-radius: var(--r-m); background: var(--creme); text-align: center; }
.qui-ceremonie h3 { text-align: left; }
.qui-illu { width: min(176px, 70%); margin: 0 auto var(--esp-4); }
.qui-ceremonie .annonce { margin: var(--esp-3) 0 0; }

/* À voir cette semaine : toute la ligne est cliquable, la flèche le dit au repos. */
.liste-actions li { position: relative; transition: background-color var(--duree-150) var(--courbe-douce); }
.liste-actions li:hover { background: var(--creme); }
.liste-actions a { color: var(--texte); text-decoration: none; }
.liste-actions a::after { content: ""; position: absolute; inset: 0; }
.liste-actions a:focus-visible { outline: none; }
.liste-actions li:focus-within { box-shadow: inset 0 0 0 2px var(--focus); }
.liste-actions .chevron { color: var(--action); }
.tuile-alerte { background: var(--alerte-pale); color: var(--alerte); }

/* Budget en bref */
.gros { margin: 0; font-size: var(--taille-4); font-weight: var(--graisse-forte); letter-spacing: var(--approche-titre); line-height: var(--interligne-titre); font-variant-numeric: tabular-nums; }
.gros small { font-size: var(--taille-sec); font-weight: var(--graisse-normale); letter-spacing: 0; color: var(--texte-sec); }

/* La journée : une vignette illustrée par moment. */
.journee { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--esp-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.journee .moment-texte .progress { margin-top: var(--esp-3); }
@media (max-width: 479.98px) { .journee { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-3); } .journee .moment-texte { padding: var(--esp-3); } .journee .moment-texte b { font-size: var(--taille-corps); } }

/* Prochaines tâches */
.liste-taches-accueil .liste-texte b a { color: var(--texte); text-decoration: none; }
.liste-taches-accueil .liste-texte b a:hover { color: var(--action); text-decoration: underline; }
.liste-taches-accueil li.fait .liste-texte b a { color: var(--texte-sec); }
.accueil-taches .annonce { margin: var(--esp-3) 0 0; }

/* Les invités en bref */
.chiffres-invites { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-4); margin: 0; }
.chiffres-invites .chiffre-cle { flex-direction: column-reverse; }
.chiffres-invites dt { color: var(--texte-sec); font-size: var(--taille-sec); font-weight: var(--graisse-normale); }
.chiffres-invites dd { margin: 0; }

/* ---------- 14. Listes : barre d'outils, filtres, puces (patron « liste ») ---------- */
.barre-outils { position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--esp-3); margin-bottom: var(--esp-4); }
.champ-recherche { display: grid; gap: var(--esp-2); flex: 1 1 280px; min-width: 0; max-width: 480px; }
.barre-outils .option-vue { min-height: var(--hauteur-controle); }
@media (max-width: 639.98px) {
  .champ-recherche { flex-basis: 100%; max-width: none; }
  .champ-recherche .etiquette { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
/* Un seul bouton Filtres : tous les critères dans son panneau. */
.filtres-panneau {
  position: absolute; right: 0; top: calc(100% + var(--esp-2)); z-index: var(--z-menu);
  display: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-4); align-items: start;
  width: min(560px, calc(100vw - 2 * var(--gouttiere)));
  padding: var(--esp-6); background: var(--surface); border: var(--bordure-fine); border-radius: var(--r-m); box-shadow: var(--ombre-2);
}
.filtres[open] > .filtres-panneau { display: grid; animation: menu-entre var(--duree-150) var(--courbe-entree); }
.filtres-panneau .champ-groupe { max-width: none; }
.filtres-panneau .champ-groupe + .champ-groupe { margin-top: 0; }
.filtres-panneau .option, .filtres-pied { grid-column: 1 / -1; }
.filtres-pied { display: flex; justify-content: flex-end; }
@media (max-width: 639.98px) {
  .filtres { position: static; }
  .filtres-panneau { left: 0; right: 0; width: auto; grid-template-columns: minmax(0, 1fr); padding: var(--esp-4); }
}
.puces-filtres { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); list-style: none; margin: 0 0 var(--esp-4); padding: 0; }
.puce-filtre {
  display: inline-flex; align-items: center; gap: var(--esp-1); min-height: 36px; padding: 0 var(--esp-2) 0 var(--esp-3);
  border-radius: var(--r-rond); background: var(--prune-pale); color: var(--action);
  font-size: var(--taille-sec); font-weight: var(--graisse-moyenne); text-decoration: none;
}
.puce-filtre:hover { background: var(--action); color: var(--texte-sur-action); }
.resume-liste { color: var(--texte-sec); font-size: var(--taille-sec); }
.resume-liste b { color: var(--texte); }
.aide-liste { margin-bottom: var(--esp-3); }
@media (max-width: 767.98px) { .aide-liste { display: none; } }

/* Tableau dans un cadre : les filets du cadre suffisent. */
.tableau-cadre > .vide { border: 0; border-radius: 0; }
/* Sous 768 px, un tableau en cartes (cartes-mobile) n'a plus besoin du cadre : chaque ligne est sa carte. */
@media (max-width: 767.98px) {
  .tableau-cadre:has(.cartes-mobile), .table-responsive:has(.cartes-mobile) { background: transparent; border: 0; border-radius: 0; overflow: visible; }
  .tableau-cadre:has(.cartes-mobile) .tableau-defile { overflow: visible; }
}
.tableau-cadre .table { margin: 0; }
.tableau-cadre .table > thead th { position: sticky; top: 0; z-index: 1; }
.cellule-nom { display: inline-flex; align-items: center; gap: var(--esp-3); font-weight: var(--graisse-moyenne); }
.groupe { display: inline-flex; align-items: center; gap: var(--esp-2); white-space: nowrap; }
.puce-groupe { width: 10px; height: 10px; flex: none; border-radius: var(--r-rond); background: var(--couleur-groupe, var(--trait)); box-shadow: 0 0 0 1px var(--bordure); }
.btn.btn-icone { width: var(--cible-min); min-height: var(--cible-min); padding: 0; background: var(--surface); color: var(--texte); border-color: var(--bordure); }
.btn.btn-icone:hover { border-color: var(--bordure-controle); background: var(--sable); }

/* Liste des invités (approche D de l'étude d'ergonomie, ATL-611) : une ligne de 48 px par personne sous une ligne de
   foyer, le statut en pastille avec son texte, les réponses en une ligne de texte. */
.segments-statut { margin-bottom: var(--esp-3); }
.segments-statut b { font-variant-numeric: tabular-nums; }
.point { width: 8px; height: 8px; flex: none; border-radius: var(--r-rond); }
.point-atrier { background: var(--mandarine); }
.point-invite { background: var(--prune); }
.point-nonretenu { background: var(--trait); }

.compteurs-liste { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); margin: 0 0 var(--esp-4); }
.compteur {
  display: inline-flex; align-items: center; gap: var(--esp-1); min-height: 36px; padding: 0 var(--esp-3);
  border: var(--bordure-fine); border-radius: var(--r-s); background: var(--surface);
  color: var(--texte-sec); font-size: var(--taille-sec); text-decoration: none; white-space: nowrap;
}
.compteur b { color: var(--texte); font-variant-numeric: tabular-nums; }
.compteur:hover { border-color: var(--bordure-controle); color: var(--texte); }
.compteur[aria-current="true"] { border-color: var(--action); background: var(--prune-pale); color: var(--action); }
.compteur[aria-current="true"] b { color: var(--action); }
.compteur-alerte { border-color: var(--mandarine-claire); background: var(--mandarine-pale); color: var(--mandarine-fonce); }
.compteur-alerte b { color: var(--mandarine-fonce); }
.compteurs-separation { width: 1px; height: 24px; background: var(--filet); }

.statut-pastille {
  display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 10px; border-radius: var(--r-rond);
  font-size: var(--taille-sec); font-weight: var(--graisse-moyenne); white-space: nowrap;
}
.statut-pastille::before { content: ""; width: 8px; height: 8px; border-radius: var(--r-rond); background: currentColor; }
.statut-pastille.statut-atrier { background: var(--mandarine-pale); color: var(--mandarine-fonce); }
.statut-pastille.statut-invite { background: var(--prune-pale); color: var(--prune); }
.statut-pastille.statut-nonretenu { background: var(--sable); color: var(--texte-sec); }
.resume-reponses { display: inline-flex; align-items: center; gap: 6px; font-size: var(--taille-sec); }
.resume-reponses::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: var(--r-rond); }
.rep-ok::before { background: var(--ok); }
.rep-att::before { background: var(--att); }
.rep-non::before { background: var(--alerte); }

.liste-invites > :is(thead, tbody) > tr > :is(th, td) { padding: var(--esp-1) var(--esp-3); vertical-align: middle; }
.liste-invites .ligne-personne > td { height: 44px; }
.liste-invites .entete-foyer > td { height: 36px; background: var(--creme); border-top: 2px solid var(--bordure); }
.entete-foyer-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-1) var(--esp-3); }
.liste-invites .entete-foyer strong { font-weight: var(--graisse-forte); }
.meta-foyer { color: var(--texte-sec); font-size: var(--taille-sec); }
.lien-foyer {
  display: inline-flex; align-items: center; gap: var(--esp-1); min-height: 32px; margin-left: auto;
  color: var(--action); font-size: var(--taille-sec); font-weight: var(--graisse-moyenne); text-decoration: none;
}
.lien-foyer .icone { transform: rotate(-90deg); }
.lien-foyer:hover { text-decoration: underline; }
.liste-invites .col-case { width: 48px; white-space: nowrap; }
.liste-invites .cellule-nom { color: var(--texte); text-decoration: none; white-space: normal; overflow-wrap: anywhere; }
.liste-invites .cellule-nom:hover > span:last-child { text-decoration: underline; }
.cellule-nom small { display: block; font-size: var(--taille-sec); font-weight: var(--graisse-normale); color: var(--texte-sec); }
.liste-invites .vide-cellule { color: var(--texte-sec); }
/* Une personne non retenue reste lisible, en retrait : ses chiffres ne comptent pas. */
.liste-invites .statut-nonretenu .cellule-nom,
.liste-invites .statut-nonretenu .groupe { color: var(--texte-sec); }
.liste-invites .selectionnee > td { background: var(--prune-pale); }
@media (min-width: 768px) {
  .liste-invites { table-layout: fixed; }
  .liste-invites > thead th:nth-child(2) { width: 30%; }
  .liste-invites > thead th:nth-child(3) { width: 18%; }
  .liste-invites > thead th:nth-child(4) { width: 15%; }
  .liste-invites > thead th:last-child { width: 15%; }
  .liste-invites td { overflow-wrap: anywhere; }
}
.resume-liste .statut-compte { white-space: nowrap; }

/* Les participants d'un EVG / EVJF (retour du CEO du 11/11/2026, « fais un tableau propre ») : un tableau compact comme la
   liste des invités, une ligne de 44 px ; au téléphone, chaque ligne se replie en nom, réponse et boutons pour joindre. */
.participants-fete { margin-bottom: var(--esp-6); }
.participants-tete, .participants-outils {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--esp-3); margin-bottom: var(--esp-3);
}
.participants-resume { color: var(--texte-sec); font-size: var(--taille-sec); }
.participants-resume b { color: var(--texte); font-variant-numeric: tabular-nums; }
.participants-ajouts, .participants-exports { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); }
.participants-ajouts .btn, .participants-exports .btn-petit { display: inline-flex; align-items: center; gap: var(--esp-1); }
.participants-recherche { display: grid; gap: var(--esp-1); flex: 1 1 240px; max-width: 360px; }
.participants-recherche .etiquette { display: inline-flex; align-items: center; gap: var(--esp-1); margin: 0; }
.liste-participants > :is(thead, tbody) > tr > :is(th, td) { padding: var(--esp-1) var(--esp-3); vertical-align: middle; }
.liste-participants .ligne-participant > td { height: 44px; overflow-wrap: anywhere; }
.liste-participants .ligne-participant[hidden] { display: none !important; }
.liste-participants .col-actions { width: 1%; white-space: nowrap; text-align: right; padding-block: 0 !important; }
.liste-participants .col-actions .btn-icone { flex: none; }
.liste-participants .col-origine { color: var(--texte-sec); font-size: var(--taille-sec); white-space: nowrap; }
.liste-participants .vide-cellule { color: var(--texte-sec); font-size: var(--taille-sec); }
.liste-participants .contact-telephone { display: none; }
.cellule-nom-bouton {
  padding: 0; border: 0; background: none; color: var(--texte); font: inherit; font-weight: var(--graisse-moyenne);
  text-align: left; cursor: pointer;
}
.cellule-nom-bouton:hover > span:last-child, .cellule-nom-bouton:focus-visible > span:last-child { color: var(--action); text-decoration: underline; }
.liste-cases-invites { display: grid; margin: 0; padding: 0; list-style: none; }
/* Dans la grille du panneau, l'écart vient de la grille, pas des marges entre groupes de champs. */
.participants-fete .panneau-champs > .champ-groupe { margin: 0; }
@media (max-width: 767.98px) {
  .liste-participants thead { display: none; }
  .liste-participants, .liste-participants > tbody { display: block; }
  .liste-participants .ligne-participant {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nom actions" "reponse actions";
    align-items: center; column-gap: var(--esp-2); padding: var(--esp-2) var(--esp-3); border-bottom: var(--bordure-fine);
  }
  .liste-participants .ligne-participant:last-child { border-bottom: 0; }
  .liste-participants .ligne-participant > td { display: block; height: auto; padding: 0 !important; border: 0; }
  .liste-participants .col-nom { grid-area: nom; }
  .liste-participants .col-reponse { grid-area: reponse; }
  .liste-participants .col-actions { grid-area: actions; display: flex !important; width: auto; }
  .liste-participants :is(.col-email, .col-telephone, .col-origine) { display: none !important; }
  .liste-participants .contact-telephone { display: inline-flex; }
  .liste-participants .col-actions { gap: 0; }
  /* Une ligne compacte : le nom sans pastille ni note (la note reste dans le panneau). */
  .liste-participants .col-nom .pastille, .liste-participants .col-nom small { display: none; }
  .participants-recherche { max-width: none; }
}
.accueil-invites .rappel-a-trier { margin: var(--esp-4) 0 0; }

/* Actions groupées : une barre de hauteur fixe collée au haut de la liste. Sans sélection elle explique, avec une
   sélection elle agit ; elle ne s'ouvre ni ne se ferme, les lignes ne bougent donc jamais. */
.barre-selection {
  position: sticky; top: 0; z-index: var(--z-collant);
  display: flex; align-items: center; gap: var(--esp-2) var(--esp-3); min-height: 56px; padding: var(--esp-2) var(--esp-3);
  border: var(--bordure-fine); border-bottom: 0; border-radius: var(--r-m) var(--r-m) 0 0; background: var(--sable);
}
.barre-selection + .tableau-cadre { border-top-left-radius: 0; border-top-right-radius: 0; }
.barre-selection .tout-cocher { min-height: var(--cible-min); }
.barre-selection-aide { color: var(--texte-sec); font-size: var(--taille-sec); }
.barre-selection-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); flex: 1; }
.barre-selection-actions > b { margin-right: var(--esp-2); white-space: nowrap; }
.btn-selection {
  display: inline-flex; align-items: center; gap: var(--esp-1); min-height: 36px; padding: 0 var(--esp-3);
  border: 1.5px solid var(--bordure-controle); border-radius: var(--r-rond); background: var(--surface);
  color: var(--action); font-weight: var(--graisse-moyenne); white-space: nowrap; cursor: pointer; list-style: none;
}
.btn-selection::-webkit-details-marker { display: none; }
.btn-selection:hover { border-color: var(--action); background: var(--prune-pale); }
.btn-deselection { margin-left: auto; width: 36px; padding: 0; justify-content: center; color: var(--texte-sec); }
.autres-actions { position: relative; }
.autres-actions-panneau {
  position: absolute; top: calc(100% + var(--esp-2)); left: 0; z-index: var(--z-menu);
  display: grid; gap: var(--esp-3); width: min(360px, calc(100vw - 2 * var(--esp-4))); padding: var(--esp-4);
  border: var(--bordure-fine); border-radius: var(--r-m); background: var(--surface); box-shadow: var(--ombre-2);
}

/* Le tri des pressentis : le rappel des touches reste sous les yeux, la ligne active est cerclée. */
.bandeau-tri {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2) var(--esp-4); margin: 0 0 var(--esp-4);
  padding: var(--esp-3) var(--esp-4); border: 1px solid var(--mandarine-claire); border-radius: var(--r-m); background: var(--mandarine-pale);
}
.bandeau-tri-aide, .bandeau-tri-etat { display: none; margin: 0; }
.bandeau-tri.tri-en-cours .bandeau-tri-aide { display: flex; flex-wrap: wrap; gap: var(--esp-2) var(--esp-4); font-size: var(--taille-sec); }
.bandeau-tri.tri-en-cours .bandeau-tri-etat { display: block; flex-basis: 100%; font-weight: var(--graisse-moyenne); color: var(--mandarine-fonce); }
.bandeau-tri kbd, .btn-tri kbd, .recherche .raccourci {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px;
  border: 1px solid var(--bordure-controle); border-bottom-width: 2px; border-radius: var(--r-xs);
  background: var(--surface); color: var(--texte); font: var(--graisse-moyenne) var(--taille-meta)/1 var(--police);
}
.recherche { position: relative; }
.recherche .raccourci { position: absolute; right: var(--esp-3); top: 50%; transform: translateY(-50%); pointer-events: none; }
.recherche .champ:focus ~ .raccourci, .recherche .champ:not(:placeholder-shown) ~ .raccourci { display: none; }
.liste-invites.mode-tri .ligne-personne { cursor: pointer; }
.liste-invites .ligne-active { outline: 2px solid var(--action); outline-offset: -2px; }
.liste-invites .ligne-active > td { background: var(--surface); }
.liste-invites .triee .cellule-nom { color: var(--texte-sec); }
.boutons-tri { display: inline-flex; flex-wrap: nowrap; gap: var(--esp-1); vertical-align: middle; }
.btn-tri {
  display: inline-flex; align-items: center; gap: var(--esp-1); min-height: 32px; padding: 0 var(--esp-2);
  border: 1.5px solid var(--bordure-controle); border-radius: var(--r-rond); background: var(--surface);
  color: var(--action); font-size: var(--taille-sec); font-weight: var(--graisse-moyenne); cursor: pointer;
}
.btn-tri-principal { border-color: var(--action); background: var(--action); color: var(--texte-sur-action); }
.btn-tri-principal kbd { background: var(--surface); }
.liste-invites .ligne-active .col-reponses { white-space: nowrap; overflow: visible; }

/* La vue Foyers (lot 3, ATL-613) : le gabarit de la liste des personnes, une ligne par foyer avec ses membres. */
.compteur-oui { color: var(--ok); font-weight: var(--graisse-moyenne); }
.liste-foyers > :is(thead, tbody) > tr > :is(th, td) { padding: var(--esp-2) var(--esp-3); vertical-align: middle; }
.liste-foyers .cellule-nom { color: var(--texte); text-decoration: none; }
.liste-foyers .cellule-nom:hover > span { text-decoration: underline; }
@media (max-width: 767.98px) {
  .liste-foyers, .liste-foyers > tbody { display: block; }
  .liste-foyers > thead { display: none; }
  .liste-foyers > tbody > tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--esp-2); align-items: center;
    padding: var(--esp-2) var(--esp-3); border-top: var(--bordure-fine);
  }
  .liste-foyers > tbody > tr > td { display: block; padding: 0; border: 0; }
  .liste-foyers > tbody > tr > td:first-child { grid-column: 1; }
  .liste-foyers > tbody > tr > td:nth-child(n+2) { display: none; }
  .liste-foyers > tbody > tr > td:nth-child(3):has(.statut-pastille) { display: block; grid-column: 2; grid-row: 1; }
}

/* Le tri en cartes au téléphone (lot 4, ATL-614) : une personne à la fois, trois boutons de 56 px. */
.tri-cartes {
  width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: var(--esp-4);
  border: 0; background: var(--creme); color: var(--texte);
}
.tri-cartes[open] { display: flex; flex-direction: column; gap: var(--esp-4); }
.tri-cartes-tete { display: flex; justify-content: space-between; align-items: center; }
.tri-cartes-progression { display: flex; align-items: center; gap: var(--esp-3); }
.tri-cartes-barre { flex: 1; height: 8px; border-radius: var(--r-rond); background: var(--sable); overflow: hidden; }
.tri-cartes-barre i { display: block; height: 100%; border-radius: var(--r-rond); background: var(--mandarine); }
.tri-carte {
  display: flex; flex-direction: column; gap: var(--esp-2); padding: var(--esp-6) var(--esp-4);
  border: var(--bordure-fine); border-radius: var(--r-l); background: var(--surface); box-shadow: var(--ombre-2);
}
.tri-carte h2 { margin: 0; font-size: var(--taille-4); }
.tri-carte-foyer { margin: 0; color: var(--texte-sec); }
.tri-carte-note { margin: 0; padding: var(--esp-2) var(--esp-3); border-radius: var(--r-s); background: var(--sable); }
.tri-carte-boutons { display: grid; gap: var(--esp-2); margin-top: var(--esp-4); }
.tri-carte-boutons .btn { min-height: 56px; justify-content: center; font-size: var(--taille-1); }
.tri-cartes-annuler { display: flex; align-items: center; gap: var(--esp-2); margin: 0; color: var(--texte-sec); font-size: var(--taille-sec); }
.tri-cartes-annuler[hidden], .tri-cartes-fin[hidden], .tri-carte[hidden] { display: none; }
.tri-cartes-fin { margin: 0; font-weight: var(--graisse-moyenne); }
@media (prefers-reduced-motion: no-preference) {
  .tri-carte { animation: carte-entree var(--duree-200) var(--courbe-entree); }
  @keyframes carte-entree { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
}

/* La tête de la page Invités : titre et actions sur une ligne, la liste commence haut. */
.tete-invites { margin-bottom: var(--esp-4); }

/* Le panneau latéral de la liste (lot 2, ATL-612) : 480 px à droite, la liste reste dessous ; au téléphone, une feuille
   plein écran qui monte. Un dialogue natif : focus piégé, Échap, fond qui ferme. */
.panneau-lateral {
  position: fixed; inset: 0 0 0 auto; width: min(480px, 100vw); height: 100dvh; max-height: none; max-width: none; margin: 0;
  padding: 0; border: 0; border-left: var(--bordure-fine); background: var(--surface); color: var(--texte); box-shadow: var(--ombre-2);
  overflow-y: auto; overscroll-behavior: contain;
}
.panneau-lateral::backdrop { background: var(--voile); }
.panneau-contenu { display: flex; flex-direction: column; gap: var(--esp-4); min-height: 100%; padding: var(--esp-6); }
.panneau-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--esp-4); }
.panneau-tete h2 { margin: var(--esp-1) 0 0; font-size: var(--taille-3); }
.panneau-parcours {
  margin: 0; padding: var(--esp-2) var(--esp-3); border-radius: var(--r-s);
  background: var(--mandarine-pale); color: var(--mandarine-fonce); font-size: var(--taille-sec); font-weight: var(--graisse-moyenne);
}
.panneau-bloc { display: grid; gap: var(--esp-3); margin: 0; padding: var(--esp-4); border: var(--bordure-fine); border-radius: var(--r-m); }
.panneau-bloc h3 { display: flex; justify-content: space-between; align-items: baseline; gap: var(--esp-2); margin: 0; font-size: var(--taille-1); }
.panneau-champs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--esp-3); }
.panneau-champs .panneau-large { grid-column: 1 / -1; }
.panneau-actions { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
.panneau-personnes { display: grid; gap: var(--esp-3); margin: 0; padding: 0; list-style: none; }
.panneau-personne { display: grid; gap: var(--esp-2); padding: var(--esp-3); border: var(--bordure-fine); border-radius: var(--r-s); }
.panneau-nom, .panneau-reglages { display: grid; grid-template-columns: 1fr 1fr; gap: var(--esp-2); }
.champ.champ-petit { min-height: 40px; padding-block: 0; font-size: var(--taille-sec); }
.segments.segments-mini { margin: 0; padding: 3px; }
.segment-statut {
  min-height: 36px; padding: 0 var(--esp-3); border: 0; border-radius: var(--r-rond); background: transparent;
  color: var(--texte-sec); font-size: var(--taille-sec); font-weight: var(--graisse-moyenne); cursor: pointer;
}
.segment-statut[aria-pressed="true"] { background: var(--surface); color: var(--action); box-shadow: var(--ombre-1); }
.panneau-moments { display: flex; flex-wrap: wrap; gap: var(--esp-1); margin: 0; padding: 0; border: 0; min-width: 0; }
.moment-case {
  display: inline-flex; align-items: center; gap: var(--esp-1); min-height: 36px; padding: 0 var(--esp-2);
  border: var(--bordure-fine); border-radius: var(--r-s); font-size: var(--taille-sec); cursor: pointer;
}
.moment-case:has(input:checked) { border-color: var(--action); background: var(--prune-pale); color: var(--action); }
.moment-case small { color: var(--texte-sec); }
.panneau-lecture { display: flex; justify-content: space-between; align-items: center; gap: var(--esp-2); margin: 0; }
.lien-discret { font-size: var(--taille-sec); color: var(--action); }
.panneau-ajout { display: grid; gap: var(--esp-2); }
.panneau-ajout-ligne, .ajout-rapide-ligne { display: flex; gap: var(--esp-2); }
.panneau-ajout-ligne .champ, .ajout-rapide-ligne .champ { flex: 1; min-width: 0; }
.panneau-pied { margin-top: auto; padding-top: var(--esp-3); border-top: var(--bordure-fine); }
.ajout-rapide { display: grid; gap: var(--esp-2); max-width: 640px; margin: var(--esp-4) 0 0; }
.parcours-adresses { margin: 0 0 var(--esp-4); }
@media (max-width: 767.98px) {
  .panneau-lateral { inset: auto 0 0 0; width: 100vw; height: calc(100dvh - 48px); border-left: 0; border-radius: var(--r-l) var(--r-l) 0 0; }
  .panneau-contenu { padding: var(--esp-4); }
  .panneau-champs, .panneau-nom, .panneau-reglages { grid-template-columns: 1fr; }
  .segment-statut, .moment-case { min-height: var(--cible-min); }
}
@media (prefers-reduced-motion: no-preference) {
  .panneau-lateral[open] { animation: panneau-entree var(--duree-200) var(--courbe-entree); }
  @keyframes panneau-entree { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
}

/* Au téléphone : une ligne compacte par personne (nom, réponses, statut), la recherche, les statuts et les compteurs
   dans le premier écran ; les compteurs défilent de côté dans leur bande plutôt que d'empiler trois lignes. */
@media (max-width: 767.98px) {
  /* Statut et compteurs : une seule bande qui défile de côté, la liste commence au premier écran. */
  .tete-liste { display: flex; align-items: center; gap: var(--esp-2); overflow-x: auto; margin-bottom: var(--esp-3); scrollbar-width: none; }
  .tete-liste .segments-statut { flex: none; flex-wrap: nowrap; margin: 0; }
  .tete-liste .compteurs-liste { flex: none; flex-wrap: nowrap; margin: 0; }
  .tete-invites { margin-bottom: var(--esp-3); }
  .compteur { min-height: var(--cible-min); }
  .resume-liste { display: none; }
  .liste-invites, .liste-invites > tbody { display: block; }
  .liste-invites > thead { display: none; }
  .liste-invites .ligne-personne {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "case nom statut" "case reponses statut";
    align-items: center; gap: 2px var(--esp-2); padding: var(--esp-2) var(--esp-3); border-top: var(--bordure-fine);
  }
  .liste-invites .ligne-personne > td { display: block; height: auto; padding: 0; border: 0; }
  .liste-invites .ligne-personne > .col-case { grid-area: case; width: auto; }
  .liste-invites .ligne-personne > .col-nom { grid-area: nom; }
  .liste-invites .ligne-personne > .col-statut { grid-area: statut; text-align: right; }
  .liste-invites .ligne-personne > .col-reponses { grid-area: reponses; }
  .liste-invites .ligne-personne > :is(.col-groupe, .col-table) { display: none; }
  .liste-invites .ligne-personne .pastille { display: none; }
  .liste-invites .entete-foyer { display: block; }
  .liste-invites .entete-foyer > td { display: block; height: auto; padding: var(--esp-2) var(--esp-3); }
  .liste-invites .entete-foyer > td.col-case { display: none; }
  .liste-invites .entete-foyer .meta-foyer, .liste-invites .vide-cellule { display: none; }
  .entete-foyer-ligne { flex-wrap: nowrap; }
  .entete-foyer-ligne strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Au doigt, la barre n'apparaît qu'avec une sélection, posée au-dessus de la barre basse : la liste ne bouge pas. */
  .barre-selection:has(#actionsSelection[hidden]) { display: none; }
  .barre-selection {
    position: fixed; top: auto; left: var(--esp-3); right: var(--esp-3); bottom: calc(76px + env(safe-area-inset-bottom));
    flex-wrap: wrap; border: var(--bordure-fine); border-radius: var(--r-m); box-shadow: var(--ombre-2);
  }
  .barre-selection-aide { flex: 1; }
  /* Une seule rangée de 56 px qui défile de côté ; « Autres actions » s'ouvre en feuille au-dessus. */
  .barre-selection { flex-wrap: nowrap; min-height: 56px; padding-block: var(--esp-1); overflow-x: auto; scrollbar-width: none; }
  .barre-selection-actions { flex-wrap: nowrap; }
  .autres-actions-panneau {
    position: fixed; left: var(--esp-3); right: var(--esp-3); top: auto; bottom: calc(144px + env(safe-area-inset-bottom)); width: auto;
  }
  .tete-invites { flex-wrap: nowrap; align-items: center; }
  .tete-invites p, .tete-invites .btn-importer { display: none; }
  .tete-invites .actions { flex: none; width: auto; }
  :is(#filtreInvites, #filtreFoyers) { flex-wrap: nowrap; align-items: center; gap: var(--esp-2); margin-bottom: var(--esp-3); }
  :is(#filtreInvites, #filtreFoyers) .champ-recherche { flex: 1 1 0; }
  :is(#filtreInvites, #filtreFoyers) :is(.grouper-foyer, .export-invites) { display: none; }
  #filtreInvites .recherche .raccourci { display: none; }
  .liste-invites .ligne-personne { padding: 6px var(--esp-3); }
  .boutons-tri { flex-wrap: wrap; margin: var(--esp-1) 0 0; }
  .btn-tri, .btn-selection { min-height: var(--cible-min); }
  .liste-invites .ligne-active .col-reponses { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  .menu-compte-panneau, .deroulant[open] > .dropdown-menu { animation: none; }
  .menu-compte[open] > summary .icone { transform: none; }
}

/* Un formulaire figé pour qui ne fait que lire la page (BalisesEcriture, décision du CEO du 25/10/2026) : le cadre
   ne compte pas dans la mise en page, les champs se lisent sans se modifier. */
fieldset.fige { display: contents; }

/* La ligne du Pack sous le plafond de moments de Découverte (ATL-140) : le chemin, pas une impasse. */
.guide-pack { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-3);
  margin-top: var(--esp-4); padding: var(--esp-3) var(--esp-4); border-radius: var(--r-m); background: var(--action-pale); }
.guide-pack p { margin: 0; flex: 1 1 260px; }

/* Modèles de textes à trous (ATL-398) : « Partir d'un modèle », un bouton par ton, au-dessus du champ visé. */
.modeles-textes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2) var(--esp-3); margin: 0 0 var(--esp-2); }
.modeles-textes-titre { font-weight: var(--graisse-moyenne); color: var(--texte-sec); }
.modeles-textes-aide { flex-basis: 100%; margin: 0; color: var(--texte-sec); font-size: var(--taille-meta); }