/* =========================================================================
   [Nom] · Design system « Lumière Soleil · Infini » — composants
   -------------------------------------------------------------------------
   Dépend de tokens.css (à charger avant). CSS sans framework, sans valeur en
   dur : couleurs, tailles, espacements et durées viennent des jetons.
   Sommaire :
     1. Utilitaires          7. Tableaux
     2. Icônes et tuiles     8. Navigation
     3. Boutons              9. États vides
     4. Champs               10. Messages
     5. Cartes               11. Pastilles d'invités et places
     6. Badges               12. Compte à rebours
     7 bis. Listes
                             13. Dialogue de confirmation
                             14. Illustrations et soleil
   ========================================================================= */

/* ---------- 1. Utilitaires ---------------------------------------------- */
.conteneur { width: 100%; max-width: var(--largeur-max); margin-inline: auto; padding-inline: var(--gouttiere); }
.lecture { max-width: var(--mesure); }
.texte-sec { color: var(--texte-sec); font-size: var(--taille-sec); }
.meta { color: var(--texte-sec); font-size: var(--taille-meta); line-height: var(--interligne-meta); }
.surtitre { font-size: var(--taille-sec); font-weight: var(--graisse-moyenne); color: var(--action); }
.vis { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.chiffres { font-variant-numeric: tabular-nums; }

/* ---------- 2. Icônes et tuiles ----------------------------------------- */
/* Icônes au trait 1,75 px, 24 × 24, couleur du texte. */
.icone { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.icone-16 { width: 16px; height: 16px; }
.tuile {
  width: 40px; height: 40px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-rond);
  background: var(--peche-pale); color: var(--cacao);
}
.tuile-prune { background: var(--prune-pale); color: var(--prune); }
.tuile-ok { background: var(--ok-pale); color: var(--ok); }
.tuile-blanche { background: var(--surface); }

/* ---------- 3. Boutons --------------------------------------------------- */
/* Libellé toujours un verbe (« Ajouter un invité », jamais « OK »).
   Jamais désactivé : un clic sur un formulaire incomplet montre les erreurs. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-2);
  min-height: var(--hauteur-controle);
  padding: 0 var(--esp-6);
  border: 1px solid transparent; border-radius: var(--r-rond);
  font: var(--graisse-moyenne) var(--taille-corps)/1.2 var(--police);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition:
    background-color var(--duree-150) var(--courbe-douce),
    border-color var(--duree-150) var(--courbe-douce),
    color var(--duree-150) var(--courbe-douce),
    transform var(--duree-100) var(--courbe-entree);
}
.btn:active { transform: scale(.98); }
.btn .icone { width: 18px; height: 18px; }

.btn-primaire { background: var(--action); color: var(--texte-sur-action); }
.btn-primaire:hover, .btn-primaire:active { background: var(--action-survol); color: var(--texte-sur-action); }

.btn-secondaire { background: var(--surface); color: var(--texte); border-color: var(--bordure-controle); }
.btn-secondaire:hover { background: var(--sable); color: var(--texte); }

/* Doux : action secondaire sur une surface chaude (vitrine, page invité). */
.btn-doux { background: var(--peche); color: var(--cacao); }
.btn-doux:hover { background: var(--mandarine-claire); color: var(--cacao); }

.btn-danger { background: var(--danger); color: #FFFFFF; }
.btn-danger:hover { background: var(--alerte); color: #FFFFFF; }

/* Lien d'action : même hauteur de cible, sans fond. */
.btn-lien { background: none; color: var(--action); padding-inline: var(--esp-2); text-decoration: underline; text-underline-offset: .2em; }
.btn-lien:hover { color: var(--action-survol); }

.btn-petit { min-height: var(--hauteur-controle-petit); padding: 0 var(--esp-4); font-size: var(--taille-sec); }
.btn-bloc { width: 100%; }

/* Bouton icône : carré rond de 44 px, aria-label ET infobulle obligatoires. */
.btn-icone {
  width: var(--cible-min); min-height: var(--cible-min); padding: 0;
  background: var(--surface); color: var(--texte); border-color: var(--bordure);
}
.btn-icone:hover { border-color: var(--bordure-controle); }

/* Infobulle (pas d'attribut title) : au survol ET au focus clavier.
   Même texte que l'aria-label, commençant par un verbe. Ancrée à droite du
   bouton pour ne jamais faire déborder la page. */
[data-infobulle] { position: relative; }
[data-infobulle]::after {
  content: attr(data-infobulle);
  position: absolute; top: calc(100% + var(--esp-2)); right: 0; z-index: var(--z-menu);
  display: none;
  padding: var(--esp-1) var(--esp-2); border-radius: var(--r-xs);
  background: var(--cacao); color: #FFFFFF;
  font: var(--graisse-moyenne) var(--taille-meta)/var(--interligne-meta) var(--police);
  white-space: nowrap; pointer-events: none;
}
@media (hover: hover) { [data-infobulle]:hover::after { display: block; } }
[data-infobulle]:focus-visible::after { display: block; }

/* Chargement : le bouton garde sa taille, un indicateur remplace l'icône.
   Poser aria-busy="true" seulement si l'attente dépasse 100 ms (pas de clignotement). */
.btn[aria-busy="true"] { cursor: progress; }
.btn[aria-busy="true"]::before {
  content: ""; width: 16px; height: 16px; flex: none;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: var(--r-rond);
  animation: tourne 800ms linear infinite; /* boucle fonctionnelle : travail en cours */
}
@keyframes tourne { to { transform: rotate(1turn); } }

.actions { display: flex; flex-wrap: wrap; gap: var(--esp-3); align-items: center; }

/* ---------- 4. Champs ---------------------------------------------------- */
/* Étiquette visible au-dessus de chaque champ ; le texte d'exemple ne sert
   qu'au format. Validation à la première sortie du champ, erreur effacée dès
   qu'on y revient (voir README, « Formulaires »). */
.champ-groupe { display: grid; gap: var(--esp-2); max-width: 480px; }
.champ-groupe + .champ-groupe { margin-top: var(--esp-6); }
.etiquette { font-size: var(--taille-sec); font-weight: var(--graisse-moyenne); color: var(--texte); }
.etiquette .facultatif { font-weight: var(--graisse-normale); color: var(--texte-sec); }

.champ {
  width: 100%; min-height: var(--hauteur-controle);
  padding: var(--esp-2) var(--esp-4);
  background: 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);
}
.champ::placeholder { color: var(--texte-sec); opacity: 1; }
.champ:hover { border-color: var(--cacao); }
.champ:focus, .champ:focus-visible { outline: none; border-color: var(--focus); box-shadow: var(--anneau); }
.champ[aria-invalid="true"] { border-color: var(--danger); }
.champ[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px var(--alerte-pale); }
.champ:disabled, .champ[readonly] { background: var(--sable); color: var(--texte-sec); }
textarea.champ { min-height: 120px; resize: vertical; }
select.champ {
  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;
}

/* L'aide et l'erreur occupent la même place : l'erreur remplace l'aide. */
.aide { font-size: var(--taille-sec); color: var(--texte-sec); }
.aide-erreur { display: flex; gap: var(--esp-2); align-items: flex-start; font-size: var(--taille-sec); color: var(--danger); }
.aide-erreur .icone { width: 16px; height: 16px; margin-top: var(--esp-1); }
.aide-erreur[hidden], .aide[hidden] { display: none; }

/* Case à cocher et bouton radio natifs, zone cliquable de 44 px. */
.option { display: flex; gap: var(--esp-3); align-items: center; min-height: var(--cible-min); cursor: pointer; }
.option input {
  appearance: none; margin: 0; flex: none;
  width: 22px; height: 22px;
  border: 2px solid var(--bordure-controle); border-radius: 6px; background: var(--surface);
  display: grid; place-content: center; cursor: pointer;
  transition: background-color var(--duree-150) var(--courbe-douce), border-color var(--duree-150) var(--courbe-douce);
}
.option input[type="radio"] { border-radius: var(--r-rond); }
.option input:checked { background: var(--action); border-color: var(--action); }
.option input[type="checkbox"]: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%);
}
.option input[type="radio"]:checked::after { content: ""; width: 8px; height: 8px; border-radius: var(--r-rond); background: var(--texte-sur-action); }

/* Case ronde de tâche (bouton role="checkbox") : le cœur monte via animations.js. */
.case-ronde {
  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: var(--texte-sur-action); cursor: pointer;
  transition: background-color var(--duree-150) var(--courbe-douce), border-color var(--duree-150) var(--courbe-douce);
}
.case-ronde::before { content: ""; position: absolute; inset: -10px; } /* cible de 44 px */
.case-ronde .icone { width: 14px; height: 14px; stroke-width: 2.5; opacity: 0; }
.case-ronde[aria-checked="true"] { background: var(--action); border-color: var(--action); }
.case-ronde[aria-checked="true"] .icone { opacity: 1; }

/* Choix Oui / Non (page invité). Boutons à aria-pressed ; le « Oui » est plein prune. */
.segment {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--esp-1);
  padding: var(--esp-1); border-radius: var(--r-rond); background: var(--sable);
}
.segment button {
  position: relative;
  min-height: var(--cible-min);
  display: flex; align-items: center; justify-content: center; gap: var(--esp-1);
  border: 0; border-radius: var(--r-rond); background: none; cursor: pointer;
  font-size: var(--taille-sec); font-weight: var(--graisse-moyenne); color: var(--texte-sec);
  transition: background-color var(--duree-150) var(--courbe-douce), color var(--duree-150) var(--courbe-douce);
}
.segment button .icone { width: 16px; height: 16px; stroke-width: 2.25; display: none; }
.segment button[aria-pressed="true"] .icone { display: block; }
.segment button[aria-pressed="true"].oui { background: var(--action); color: var(--texte-sur-action); }
.segment button[aria-pressed="true"].non { background: var(--surface); color: var(--texte); box-shadow: inset 0 0 0 1px var(--bordure-controle); }

/* ---------- 5. Cartes ---------------------------------------------------- */
.carte {
  background: var(--fond-carte);
  border: var(--bordure-fine); border-radius: var(--r-m);
  box-shadow: var(--ombre-1);
  padding: var(--esp-6);
  min-width: 0;
}
.carte-compacte { padding: var(--esp-4); }
.carte-plate { box-shadow: none; }
.carte-tete { display: flex; align-items: center; gap: var(--esp-3); margin-bottom: var(--esp-4); }
.carte-tete h2, .carte-tete h3, .carte-tete h4 { font-size: var(--taille-1); letter-spacing: 0; }
.carte-tete > a { margin-left: auto; min-height: var(--cible-min); display: inline-flex; align-items: center; font-size: var(--taille-sec); font-weight: var(--graisse-moyenne); text-decoration: none; }
.carte-tete > a:hover { text-decoration: underline; }
/* Surfaces de marque : au plus UNE par écran de travail (règle 60/30/10). */
.carte-douce { background: var(--peche); border-color: var(--peche); }
.carte-marque { --logo-fond: var(--mandarine); background: var(--mandarine); border-color: var(--mandarine); color: var(--texte-sur-marque); }
.carte-douce .tuile, .carte-marque .tuile { background: var(--surface); }
.carte-marque .texte-sec, .carte-douce .texte-sec { color: var(--cacao); } /* jamais de taupe sur mandarine (2,7:1) */

/* Grille de cartes responsive */
.grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--esp-4); }
@media (min-width: 768px) { .grille-2, .grille-3, .grille-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .grille-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grille-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- 6. Badges ---------------------------------------------------- */
/* Pour un STATUT uniquement (réponse, échéance, priorité) ; jamais pour une
   métadonnée statique (date, auteur), qui reste du texte secondaire. */
.badge {
  display: inline-flex; align-items: center; gap: var(--esp-1);
  padding: var(--esp-1) var(--esp-3);
  border-radius: var(--r-rond);
  font: var(--graisse-moyenne) var(--taille-sec)/1.3 var(--police);
  white-space: nowrap;
  background: var(--sable); color: var(--texte);
}
.badge .icone { width: 14px; height: 14px; stroke-width: 2.25; }
.badge-oui { background: var(--ok-pale); color: var(--ok); }
.badge-att { background: var(--att-pale); color: var(--att); }
.badge-non { background: var(--alerte-pale); color: var(--alerte); }
.badge-info { background: var(--prune-pale); color: var(--prune); }
.badge-peps { background: var(--mandarine); color: var(--cacao); }

/* ---------- 7. Tableaux -------------------------------------------------- */
/* Toujours dans un cadre L1 (filet + fond blanc) avec des filets entre lignes. */
.tableau-cadre { background: var(--surface); border: var(--bordure-fine); border-radius: var(--r-m); overflow: hidden; }
.tableau-tete { display: flex; flex-wrap: wrap; gap: var(--esp-3); align-items: center; justify-content: space-between; padding: var(--esp-4) var(--esp-6); border-bottom: var(--bordure-fine); }
.tableau-tete h2, .tableau-tete h3 { font-size: var(--taille-1); letter-spacing: 0; }
.tableau-defile { overflow-x: auto; }
.tableau { width: 100%; border-collapse: collapse; font-size: var(--taille-corps); }
.tableau caption { text-align: left; padding: var(--esp-4) var(--esp-6) 0; font-weight: var(--graisse-forte); }
.tableau th {
  text-align: left; white-space: nowrap;
  padding: var(--esp-3) var(--esp-4);
  background: var(--sable); color: var(--texte-sec);
  font-size: var(--taille-sec); font-weight: var(--graisse-moyenne);
}
.tableau td { padding: var(--esp-3) var(--esp-4); border-top: var(--bordure-fine); vertical-align: middle; }
.tableau th:first-child, .tableau td:first-child { padding-left: var(--esp-6); }
.tableau th:last-child, .tableau td:last-child { padding-right: var(--esp-6); }
.tableau tbody tr { transition: background-color var(--duree-150) var(--courbe-douce); }
.tableau tbody tr:hover { background: var(--creme); }
.tableau .nombre { text-align: right; font-variant-numeric: tabular-nums; }
.tableau .cellule-nom { display: flex; align-items: center; gap: var(--esp-3); }
.tableau-dense { font-size: var(--taille-sec); }

/* Sous 640 px, chaque ligne devient une carte : <td data-label="Statut">. */
@media (max-width: 639.98px) {
  .tableau-cartes thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tableau-cartes, .tableau-cartes tbody, .tableau-cartes tr, .tableau-cartes td { display: block; width: 100%; }
  .tableau-cartes tr { padding: var(--esp-3) var(--esp-4); border-top: var(--bordure-fine); }
  .tableau-cartes tr:first-child { border-top: 0; }
  .tableau-cartes td { border: 0; padding: var(--esp-1) 0 !important; display: flex; justify-content: space-between; gap: var(--esp-4); text-align: right; }
  .tableau-cartes td::before { content: attr(data-label); color: var(--texte-sec); font-size: var(--taille-sec); text-align: left; }
  .tableau-cartes td:first-child { text-align: left; font-weight: var(--graisse-moyenne); }
  .tableau-cartes td:first-child::before { content: none; }
}

/* ---------- 7 bis. Listes ------------------------------------------------ */
/* Liste de travail (invités en attente, tâches) : cadre L1 et filets. */
.liste { list-style: none; margin: 0; padding: 0; background: var(--surface); border: var(--bordure-fine); border-radius: var(--r-m); overflow: hidden; }
.liste > li { display: flex; align-items: center; gap: var(--esp-3); min-height: 64px; padding: var(--esp-3) var(--esp-4); border-top: var(--bordure-fine); transition: opacity var(--duree-150) var(--courbe-douce); }
.liste > li:first-child { border-top: 0; }
.liste-texte { flex: 1; min-width: 0; }
.liste-texte b { display: block; font-weight: var(--graisse-moyenne); }
.liste-texte small { display: block; font-size: var(--taille-sec); color: var(--texte-sec); }
.liste > li.fait .liste-texte b { text-decoration: line-through; color: var(--texte-sec); }
.liste > li.partie { opacity: 0; }
@media (max-width: 639.98px) { .liste > li { flex-wrap: wrap; } .liste > li > .badge { margin-left: calc(24px + var(--esp-3)); } }

/* ---------- 8. Navigation ------------------------------------------------ */
/* Marque : logo animé + nom. */
.marque { display: inline-flex; align-items: center; gap: var(--esp-2); color: var(--texte); text-decoration: none; font-size: var(--taille-1); font-weight: var(--graisse-forte); letter-spacing: -.02em; min-height: var(--cible-min); }
.marque:hover { color: var(--texte); }
.marque .logo-infini { width: 48px; height: auto; }

/* Barre de la vitrine */
.nav-vitrine { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); padding: var(--esp-4) var(--gouttiere); }
.nav-vitrine-liens { display: none; gap: var(--esp-1); padding: var(--esp-1); list-style: none; margin: 0; background: var(--surface); border: var(--bordure-fine); border-radius: var(--r-rond); }
.nav-vitrine-liens a { display: flex; align-items: center; min-height: var(--cible-min); padding: 0 var(--esp-4); border-radius: var(--r-rond); color: var(--texte-sec); text-decoration: none; font-size: var(--taille-sec); font-weight: var(--graisse-moyenne); }
.nav-vitrine-liens a:hover { color: var(--texte); }
.nav-vitrine-liens a[aria-current="page"] { background: var(--peche-pale); color: var(--texte); }
.nav-vitrine-actions { display: flex; gap: var(--esp-2); align-items: center; }
.nav-vitrine-actions .btn-secondaire { display: none; }
@media (min-width: 1024px) {
  .nav-vitrine-liens { display: flex; }
  .nav-vitrine-actions .btn-secondaire { display: inline-flex; }
  .nav-vitrine .btn-menu { display: none; }
}

/* Menu latéral de l'outil : colonne sable ≥ 1024 px, barre repliable dessous. */
.nav-app { --logo-fond: var(--fond-structure); background: var(--fond-structure); border-bottom: var(--bordure-fine); padding: var(--esp-3) var(--esp-4); }
.nav-app-tete { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); }
.nav-app-liens { list-style: none; margin: var(--esp-4) 0 0; padding: 0; display: none; gap: var(--esp-1); }
.nav-app[data-ouvert] .nav-app-liens { display: grid; }
.nav-app-liens a {
  display: flex; align-items: center; gap: var(--esp-3);
  min-height: var(--cible-min); padding: var(--esp-2) var(--esp-3);
  border: 1px solid transparent; border-radius: var(--r-rond);
  color: var(--texte-sec); text-decoration: none; font-weight: var(--graisse-moyenne);
  transition: background-color var(--duree-150) var(--courbe-douce), color var(--duree-150) var(--courbe-douce);
}
.nav-app-liens a:hover { background: var(--surface); color: var(--texte); }
.nav-app-liens a[aria-current="page"] { background: var(--surface); color: var(--action); border-color: var(--bordure); font-weight: var(--graisse-forte); }
.nav-app-liens .nb { margin-left: auto; padding: 0 var(--esp-2); border-radius: var(--r-rond); background: var(--surface); color: var(--texte-sec); font-size: var(--taille-meta); font-weight: var(--graisse-moyenne); }
@media (min-width: 1024px) {
  .nav-app { border-bottom: 0; border-right: var(--bordure-fine); padding: var(--esp-6) var(--esp-4); min-height: 100%; }
  .nav-app .nav-app-liens { display: grid; margin-top: var(--esp-6); }
  .nav-app .btn-menu { display: none; }
}
/* Gabarit de l'outil : menu + contenu */
.appli { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 100vh; background: var(--fond); }
@media (min-width: 1024px) { .appli { grid-template-columns: 248px minmax(0, 1fr); } }
.appli-contenu { padding: var(--esp-6) var(--esp-4) var(--esp-8); min-width: 0; }
@media (min-width: 768px) { .appli-contenu { padding: var(--esp-8) var(--esp-10) var(--esp-10); } }

/* Onglets */
.onglets { display: flex; gap: var(--esp-1); overflow-x: auto; border-bottom: var(--bordure-fine); }
.onglets a, .onglets button {
  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);
}
.onglets a:hover, .onglets button:hover { color: var(--texte); }
.onglets [aria-current="page"], .onglets [aria-selected="true"] { color: var(--action); border-bottom-color: var(--action); }

/* ---------- 9. États vides ---------------------------------------------- */
/* Toujours : ce qui va ici, pourquoi le remplir, UNE action. Illustration
   d'un lieu ou d'un objet (jamais de personnage). */
.vide {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: var(--esp-8) var(--esp-6);
  background: var(--surface); border: var(--bordure-fine); border-radius: var(--r-m);
}
.vide-illu { width: min(200px, 60%); height: auto; margin-bottom: var(--esp-4); }
.vide h2, .vide h3 { font-size: var(--taille-1); letter-spacing: 0; }
.vide p { color: var(--texte-sec); max-width: 44ch; margin: var(--esp-2) 0 var(--esp-6); }
.vide .actions { justify-content: center; }
/* Variante filtrée : sans illustration, plus compacte. */
.vide-filtre { padding: var(--esp-6); background: var(--creme); }

/* ---------- 10. Messages ------------------------------------------------- */
/* Jamais de reproche, toujours une issue : « On n'a pas pu… Réessayer ». */
.message {
  display: flex; gap: var(--esp-3); align-items: flex-start; flex-wrap: wrap;
  padding: var(--esp-4); border-radius: var(--r-m);
  background: var(--prune-pale); color: var(--cacao);
}
.message .tuile { background: var(--surface); color: var(--prune); }
.message-corps { flex: 1; min-width: 200px; }
.message-corps b { display: block; }
.message-corps p { margin-top: var(--esp-1); font-size: var(--taille-sec); }
.message .actions { margin-top: var(--esp-3); }
.message-erreur { background: var(--alerte-pale); }
.message-erreur .tuile { color: var(--alerte); }
.message-succes { background: var(--ok-pale); }
.message-succes .tuile { color: var(--ok); }
.message-att { background: var(--att-pale); }
.message-att .tuile { color: var(--att); }
/* Annonce discrète (aria-live) sous un élément vivant */
.annonce { min-height: 1.55em; font-size: var(--taille-sec); font-weight: var(--graisse-moyenne); color: var(--ok); }

/* ---------- 11. Pastilles d'invités et places --------------------------- */
/* Un invité = ses initiales (ou sa photo). Jamais de personnage dessiné. */
.pastille {
  width: 40px; height: 40px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--surface); border-radius: var(--r-rond);
  box-shadow: 0 0 0 1px var(--bordure);
  background: var(--peche-pale); color: var(--cacao);
  font-size: var(--taille-sec); font-weight: var(--graisse-forte); line-height: 1;
  overflow: hidden;
}
.pastille img { width: 100%; height: 100%; object-fit: cover; }
.pastille-prune { background: var(--prune-pale); color: var(--prune); }
.pastille-mandarine { background: var(--mandarine-pale); }
.pastille-petite { width: 32px; height: 32px; font-size: var(--taille-meta); }
.pastille-grande { width: 56px; height: 56px; font-size: var(--taille-corps); }
/* Groupe qui se chevauche : « +12 » en dernier */
.pastilles { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
.pastilles-serrees { gap: 0; flex-wrap: nowrap; }
.pastilles-serrees .pastille + .pastille { margin-left: calc(var(--esp-2) * -1); }
.pastille-plus { background: var(--sable); color: var(--texte-sec); }

/* Place à la cérémonie : pointillés vides, puis occupée par une pastille. */
.places { display: grid; grid-template-columns: repeat(auto-fill, 32px); gap: var(--esp-2); justify-content: center; }
.place {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px dashed var(--bordure-controle); border-radius: var(--r-rond);
  background: var(--surface); color: var(--cacao);
  font-size: var(--taille-meta); font-weight: var(--graisse-forte);
  transition: background-color var(--duree-150) var(--courbe-douce), border-color var(--duree-150) var(--courbe-douce);
}
.place.occupee { border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--bordure); background: var(--peche-pale); }
.place.nouvelle { background: var(--mandarine); }

/* ---------- 12. Compte à rebours ---------------------------------------- */
/* Carte de marque : le soleil monte quand le mariage approche.
   --avancement : 0 (début) → 100 (jour J), calculé par le serveur. */
.compte-a-rebours {
  --avancement: 0;
  position: relative; overflow: hidden; isolation: isolate;
  padding: var(--esp-6); border-radius: var(--r-m);
  background: var(--mandarine); color: var(--cacao);
  min-height: 248px;
}
.compte-a-rebours::after {
  content: ""; position: absolute; z-index: -1;
  right: -64px; bottom: -96px; width: 200px; height: 200px;
  border-radius: var(--r-rond);
  background: var(--mandarine-claire);
  box-shadow: 0 0 0 24px var(--mandarine-pale);
  transform: translateY(calc((100 - var(--avancement)) * 1px));
  animation: soleil-apparait var(--duree-300) var(--courbe-entree) both;
}
@keyframes soleil-apparait { from { opacity: 0; } to { opacity: 1; } }
.compte-a-rebours .tuile { background: var(--surface); }
.car-titre { font-size: var(--taille-1); letter-spacing: 0; }
.car-chiffre { font-size: var(--taille-geant); font-weight: var(--graisse-forte); letter-spacing: var(--approche-affiche); line-height: var(--interligne-serre); margin-top: var(--esp-4); }
.car-unite { font-size: var(--taille-2); font-weight: var(--graisse-moyenne); letter-spacing: 0; margin-left: var(--esp-2); }
.car-date { margin-top: var(--esp-2); font-size: var(--taille-sec); }
.jalons { display: flex; gap: var(--esp-1); margin-top: var(--esp-6); }
.jalons i { flex: 1; height: 8px; border-radius: var(--r-rond); background: var(--mandarine-pale); }
.jalons i.fait { background: var(--cacao); }

/* ---------- 13. Dialogue de confirmation -------------------------------- */
/* <dialog> natif. Titre qui NOMME l'élément (« Supprimer l'invité Pierre
   Martin ? »), bouton de destruction rouge au verbe explicite, « Annuler »
   avec autofocus ; Échap ferme sans rien faire. */
.dialogue {
  width: min(440px, calc(100% - 2 * var(--esp-4)));
  padding: var(--esp-6);
  border: var(--bordure-fine); border-radius: var(--r-l);
  background: var(--surface); color: var(--texte);
  box-shadow: var(--ombre-2);
}
.dialogue::backdrop { background: var(--voile); }
.dialogue[open] { animation: dialogue-entre var(--duree-200) var(--courbe-entree); }
@keyframes dialogue-entre { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.dialogue h2 { font-size: var(--taille-2); }
.dialogue p { color: var(--texte-sec); margin-top: var(--esp-2); }
.dialogue .actions { justify-content: flex-end; margin-top: var(--esp-6); }

/* ---------- 14. Illustrations et soleil ---------------------------------- */
/* Les illustrations décorent (en-têtes, vitrine, vignettes, états vides,
   e-mails) ; jamais dans un tableau de travail. */
.illu { display: block; width: 100%; height: auto; }
.illu-cadre { background: var(--creme); border-radius: var(--r-s); padding: var(--esp-2) var(--esp-2) 0; }
.vignette { width: 48px; height: 36px; flex: none; border-radius: var(--r-s); background: var(--creme); overflow: hidden; }
.moment { background: var(--surface); border: var(--bordure-fine); border-radius: var(--r-m); overflow: hidden; }
.moment .illu-cadre { border-radius: 0; }
.moment-texte { padding: var(--esp-4); }
.moment-texte b { display: block; font-size: var(--taille-1); }
.moment-texte span { font-size: var(--taille-sec); color: var(--texte-sec); }

/* Soleil levant décoratif (héros de vitrine, couverture, merci) :
   aplats d'une seule famille de teinte, jamais de dégradé multicolore. */
.soleil-levant {
  position: absolute; left: 50%; bottom: calc(var(--taille-soleil, 320px) / -2);
  width: var(--taille-soleil, 320px); aspect-ratio: 1; margin-left: calc(var(--taille-soleil, 320px) / -2);
  border-radius: var(--r-rond); background: var(--mandarine);
  box-shadow: 0 0 0 calc(var(--taille-soleil, 320px) / 10) var(--mandarine-claire),
              0 0 0 calc(var(--taille-soleil, 320px) / 5) var(--mandarine-pale);
  pointer-events: none;
}

/* ---------- Moins d'animations ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .btn:active { transform: none; }
  .btn[aria-busy="true"]::before { animation: none; border-right-color: currentColor; opacity: .5; }
  .compte-a-rebours::after { animation: none; }
  .dialogue[open] { animation: dialogue-fondu var(--duree-100) ease; }
  @keyframes dialogue-fondu { from { opacity: 0; } to { opacity: 1; } }
}