/* =========================================================================
   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, onglets
   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 : menu latéral, barre basse ---------------------- */
.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="page"] .icone { color: var(--action); }

.nav-app-couple { display: none; align-items: center; gap: var(--esp-3); }
.nav-app-couple b { display: block; font-weight: var(--graisse-forte); line-height: var(--interligne-titre); }
.nav-app-couple .pastille { font-size: var(--taille-meta); }

/* 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; }

/* 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); padding: var(--esp-2) var(--gouttiere); padding-top: max(var(--esp-2), env(safe-area-inset-top)); }
  .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="page"] { background: var(--prune-pale); border-color: transparent; }
  .nav-app-liens .lib-long { display: none; }
  .appli-contenu { padding-bottom: calc(var(--esp-24) + env(safe-area-inset-bottom)); }
}
@media (max-width: 479.98px) { .menu-compte-nom { display: none; } }

/* Ordinateur : colonne sable fixée à la hauteur de la fenêtre, quelle que soit la longueur
   de la page. Le design system lui donne min-height: 100% (la hauteur de la page) : on
   l'annule, sinon la colonne s'étire jusqu'en bas de la page et le compte avec elle.
   La colonne défile seule si son contenu dépasse ; le compte reste collé en bas. */
@media (min-width: 1024px) {
  .nav-app {
    position: sticky; top: 0; align-self: start;
    height: 100vh; height: 100dvh; min-height: 0;
    overflow-y: auto; overscroll-behavior: contain;
    display: flex; flex-direction: column; gap: var(--esp-6);
    padding-bottom: 0;
  }
  .nav-app-tete { display: contents; }
  .nav-app .marque { order: 0; }
  .nav-app-couple { order: 1; display: flex; padding: var(--esp-3); background: var(--surface); border: var(--bordure-fine); border-radius: var(--r-m); }
  .nav-app .nav-app-liens { order: 2; }
  .nav-app-liens ul { display: grid; gap: var(--esp-1); }
  .nav-app-liens .lib-court { display: none; }
  .menu-compte {
    order: 3; margin-top: auto;
    position: sticky; bottom: 0; z-index: var(--z-collant);
    padding: var(--esp-2) 0 var(--esp-6); background: var(--fond-structure);
  }
  .menu-compte > summary { width: 100%; }
  .menu-compte-nom { max-width: none; flex: 1; }
  /* Le panneau s'ouvre vers le haut, dans la largeur de la colonne (qui défile : il
     n'en déborde pas sur le côté). */
  .menu-compte-panneau { top: auto; bottom: calc(100% - var(--esp-1)); left: 0; right: 0; width: auto; }
}

/* É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 .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, .onglets-section, .pied-app { width: 100%; max-width: 1200px; margin-inline: auto; }
.page.page-large { max-width: none; }
.page:focus { outline: none; }
.onglets-section { margin-bottom: var(--esp-6); scrollbar-width: none; }
.onglets-section::-webkit-scrollbar { display: none; }
/* Second niveau d'onglets : collé sous le premier, qui perd sa marge basse. */
.onglets-section:has(+ .onglets-module) { margin-bottom: var(--esp-2); }
.onglets-module { margin-bottom: var(--esp-6); scrollbar-width: none; }
.onglets-module::-webkit-scrollbar { display: none; }
.onglets-module a .meta { margin-left: var(--esp-1); }
.onglet-bientot {
  display: inline-flex; align-items: center; gap: var(--esp-2); min-height: var(--cible-min);
  padding: 0 var(--esp-4); white-space: nowrap; color: var(--texte-sec); cursor: not-allowed;
}
.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); }
.page > h1 + p.text-muted, .page > div > h1 + p.text-muted, .page > div > div > h1 + p.text-muted { max-width: var(--mesure); }
@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); max-width: var(--mesure); }
.page-tete .actions { flex: none; }
@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. */
.formulaire { max-width: 640px; }
.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). */
.table-responsive { 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, onglets ----------------------------------------- */
.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; }
.nav-tabs { gap: var(--esp-1); overflow-x: auto; flex-wrap: nowrap; border-bottom: var(--bordure-fine); margin-bottom: var(--esp-6); }
.nav-tabs .nav-link {
  display: inline-flex; align-items: center; min-height: var(--cible-min); padding: 0 var(--esp-4);
  border: 0; border-bottom: 2px solid transparent; background: none; white-space: nowrap; cursor: pointer;
  color: var(--texte-sec); text-decoration: none; font-weight: var(--graisse-moyenne);
}
.nav-tabs .nav-link:hover { color: var(--texte); }
.nav-tabs .nav-link.active, .nav-tabs .nav-link[aria-selected="true"] { color: var(--action); border-bottom-color: var(--action); }
.tab-content > .tab-pane { display: none; }
.tab-content > .tab-pane.active { display: block; }

/* ---------- 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); }
}

/* ---------- 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; }
.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 { 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 { 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); }

/* 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 groupée par enveloppe */
.liste-invites .entete-foyer > td { background: var(--creme); border-top: 2px solid var(--bordure); }
.liste-invites .entete-foyer strong { font-weight: var(--graisse-forte); }
.liste-invites .nom-foyer { width: auto; max-width: 240px; font-weight: var(--graisse-moyenne); }
.liste-invites .poignee-foyer { display: inline-flex; align-items: center; justify-content: center; width: 24px; min-height: var(--cible-min); color: var(--texte-sec); cursor: grab; vertical-align: middle; }
.liste-invites td:first-child { white-space: nowrap; }
.liste-invites .cellule-nom { white-space: nowrap; }
.cellule-nom small { display: block; font-size: var(--taille-sec); font-weight: var(--graisse-normale); color: var(--texte-sec); }
/* Largeurs fixées par l'en-tête : l'en-tête d'enveloppe (colspan) ne déforme plus les colonnes. */
@media (min-width: 768px) {
  .liste-invites { table-layout: fixed; }
  .liste-invites > thead th:first-child { width: 88px; }
  .liste-invites > thead th:nth-child(2) { width: 26%; }
  .liste-invites > thead th:nth-child(3) { width: 18%; }
  .liste-invites > thead th:nth-child(4) { width: 12%; }
  .liste-invites > thead th:last-child { width: 72px; }
  .liste-invites td { overflow-wrap: anywhere; }
}
.liste-invites td[data-libelle="Participe à"] .bulle-invitation { margin: 2px 0; }
.liste-invites .bulle-invitation { min-height: 32px; cursor: pointer; }
.liste-invites .bulle-invitation:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.bulle-eteinte { background: transparent !important; color: var(--texte-sec) !important; box-shadow: inset 0 0 0 1px var(--bordure-controle); }
.bulle-partielle { background: var(--surface) !important; color: var(--texte) !important; box-shadow: inset 0 0 0 1px var(--bordure-controle); }

/* Actions groupées : collées en bas de l'écran, sous la liste, tant qu'une ligne est cochée.
   Placées après le tableau, elles n'en décalent jamais les lignes. */
#formMasse { display: flex; flex-direction: column; }
#formMasse > .barre-selection { order: 3; }
#formMasse > .tableau-cadre { order: 2; }
.barre-selection {
  position: sticky; bottom: var(--esp-4); z-index: var(--z-collant);
  margin-top: var(--esp-4); padding: var(--esp-4); border: var(--bordure-fine); border-radius: var(--r-m);
  background: var(--surface); box-shadow: var(--ombre-2);
}
@media (max-width: 1023.98px) { .barre-selection { bottom: calc(80px + env(safe-area-inset-bottom)); } }

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