/* Composants. Angles adoucis et relief léger (voir jetons.css), états de survol et de focus en 120 ms
   (spécification 19.1), cibles d'au moins 44 px pour tout ce qui se touche au doigt. */

/* ---------- Boutons ---------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  min-height: var(--cible-tactile);
  padding: 0 var(--e-5);
  border: var(--trait) solid var(--action);
  border-radius: var(--rayon-m);
  background: var(--action); color: var(--sur-action);
  box-shadow: var(--ombre-bouton);
  font-weight: var(--poids-fort); font-size: var(--t-base); line-height: 1;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--duree-survol) ease-out, color var(--duree-survol) ease-out,
              border-color var(--duree-survol) ease-out, box-shadow var(--duree-survol) ease-out,
              transform var(--duree-survol) ease-out;
}
.bouton:active { transform: translateY(1px); box-shadow: none; }
.bouton:hover { background: var(--action-survol); border-color: var(--action-survol); color: var(--sur-action); }
.bouton--secondaire { background: var(--fond); color: var(--texte); border-color: var(--bordure-bouton); }
.bouton--secondaire:hover { background: var(--fond-survol); color: var(--texte); border-color: var(--bordure-controle); }
.bouton--discret { background: transparent; color: var(--texte); border-color: transparent; box-shadow: none; }
.bouton--discret:hover { background: var(--fond-survol); color: var(--texte); border-color: transparent; }
.bouton--danger { background: var(--marque); border-color: var(--marque); color: var(--sur-marque); }
.bouton--danger:hover { background: var(--alerte-texte); border-color: var(--alerte-texte); color: var(--sur-marque); }
.bouton--compact { min-height: 36px; padding: 0 var(--e-3); font-size: var(--t-m); border-radius: var(--rayon); }
.bouton--icone { width: var(--cible-tactile); padding: 0; }
.bouton--plein { width: 100%; }
.bouton[disabled], .bouton[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

/* ---------- Champs ---------- */
.champ { display: flex; flex-direction: column; gap: var(--e-2); }
.champ + .champ { margin-top: var(--e-5); }
.champ__libelle { font-weight: var(--poids-moyen); font-size: var(--t-m); }
.champ__aide { font-size: var(--t-s); color: var(--texte-discret); }
.champ__erreur { display: flex; gap: var(--e-2); align-items: flex-start; font-size: var(--t-s); color: var(--alerte-texte); font-weight: var(--poids-fort); }
.champ input:not([type="checkbox"]):not([type="radio"]), .champ select, .champ textarea {
  width: 100%;
  min-height: var(--cible-tactile);
  padding: var(--e-2) var(--e-3);
  border: var(--trait) solid var(--bordure-controle);
  border-radius: var(--rayon);
  background: var(--fond); color: var(--texte);
  transition: border-color var(--duree-survol) ease-out, box-shadow var(--duree-survol) ease-out;
}
.champ input:hover, .champ select:hover, .champ textarea:hover { border-color: var(--texte); }
.champ input:focus-visible, .champ select:focus-visible, .champ textarea:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--focus);
}
.champ--erreur input, .champ--erreur select, .champ--erreur textarea { border-color: var(--alerte-texte); border-width: 2px; }
.champ ul.errorlist { list-style: none; margin: 0; padding: 0; color: var(--alerte-texte); font-weight: var(--poids-fort); font-size: var(--t-s); }

/* Champ avec un bouton intégré (afficher le mot de passe) : le bouton garde une cible de 44 px */
.champ__groupe { position: relative; display: flex; }
.champ__groupe input:not([type="checkbox"]):not([type="radio"]) { padding-right: calc(var(--cible-tactile) + var(--e-1)); }
.champ__bouton {
  position: absolute; top: 0; right: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--cible-tactile); height: var(--cible-tactile);
  border: 0; border-radius: var(--rayon); background: transparent; color: var(--texte-discret); cursor: pointer;
  transition: color var(--duree-survol) ease-out, background-color var(--duree-survol) ease-out;
}
.champ__bouton:hover { color: var(--texte); background: var(--fond-survol); }
.champ__bouton:focus-visible { outline-offset: -4px; }
.champ__bouton[aria-pressed="true"] { color: var(--texte); }
.champ__bouton-masquer, .champ__bouton[aria-pressed="true"] .champ__bouton-afficher { display: none; }
.champ__bouton[aria-pressed="true"] .champ__bouton-masquer { display: block; }

/* ---------- Cartes ---------- */
.carte {
  background: var(--fond); border: var(--trait) solid var(--bordure); border-radius: var(--rayon-l);
  box-shadow: var(--ombre-carte);
  display: flex; flex-direction: column; min-width: 0; overflow: clip;
}
.carte__entete {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-3);
  padding: var(--e-4) var(--e-6);
  border-bottom: var(--trait) solid var(--bordure);
}
.carte__entete h2 { font-size: var(--t-xl); }
.carte__corps { padding: var(--e-6); display: flex; flex-direction: column; gap: var(--e-4); }
.carte__pied { padding: var(--e-3) var(--e-6); border-top: var(--trait) solid var(--bordure); font-size: var(--t-m); background: var(--fond-retrait); }
.carte--lien { text-decoration: none; transition: border-color var(--duree-survol) ease-out, transform var(--duree-survol) ease-out; }
.carte--lien:hover { border-color: var(--bordure-controle); color: inherit; transform: translateY(-1px); }

.grille { display: grid; gap: var(--e-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grille--2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
@media (max-width: 1100px) { .grille--2-1 { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Étiquettes de statut : texte toujours présent, la couleur ne fait que le doubler ---------- */
.etiquette {
  display: inline-flex; align-items: center; gap: var(--e-1);
  padding: 2px var(--e-3);
  border: var(--trait) solid var(--texte);
  border-radius: var(--rayon-pilule);
  font-size: var(--t-xs); font-weight: var(--poids-fort); line-height: 1.5; white-space: nowrap;
}
.etiquette--rouge { background: var(--statut-rouge); border-color: var(--statut-rouge); color: var(--sur-statut); }
.etiquette--orange { background: var(--statut-orange); border-color: var(--statut-orange); color: var(--sur-statut); }
.etiquette--vert { background: var(--statut-vert); border-color: var(--statut-vert); color: var(--sur-statut); }
.etiquette--neutre { border-color: transparent; background: var(--fond-survol); color: var(--texte-discret); }
.etiquette--plein { background: var(--texte); border-color: var(--texte); color: var(--fond); }

/* ---------- Avancement : élément <progress> natif, lisible par les lecteurs d'écran.
   (Une largeur calculée ne peut pas passer par un attribut style : la politique de contenu l'interdit.) */
.avancement { display: flex; align-items: center; gap: var(--e-3); }
progress.avancement__piste {
  flex: 1; height: 8px; appearance: none; -webkit-appearance: none;
  border: 0; border-radius: var(--rayon-pilule); background: var(--fond-survol); color: var(--texte); overflow: hidden;
}
progress.avancement__piste::-webkit-progress-bar { background: var(--fond-survol); }
progress.avancement__piste::-webkit-progress-value { background: var(--texte); transition: width var(--duree-remplissage) var(--courbe); }
progress.avancement__piste::-moz-progress-bar { background: var(--texte); }
.avancement__valeur { min-width: 3.5em; text-align: right; font-weight: var(--poids-fort); font-variant-numeric: tabular-nums; }

/* ---------- Squelettes (attente de 300 ms à 1 s) : pulsation d'opacité, sans dégradé ---------- */
.squelette { display: block; border-radius: var(--rayon); background: var(--fond-survol); animation: pulsation 1.4s ease-in-out infinite; }
@keyframes pulsation { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

/* ---------- États vides : ce qui manque et quoi faire ensuite ---------- */
.vide {
  display: flex; flex-direction: column; align-items: center; gap: var(--e-3); text-align: center;
  padding: var(--e-8) var(--e-6);
}
.vide__icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: var(--rayon-rond);
  background: var(--fond-retrait); color: var(--texte-discret);
}
.vide__titre { font-family: var(--police-titre); font-weight: var(--poids-titre); font-size: var(--t-l); }
.vide__texte { color: var(--texte-discret); max-width: 52ch; }

/* ---------- Indicateurs ---------- */
.indicateur { display: flex; flex-direction: column; gap: var(--e-2); padding: var(--e-5) var(--e-6); border: var(--trait) solid var(--bordure); border-radius: var(--rayon-l); background: var(--fond); box-shadow: var(--ombre-carte); }
.indicateur__libelle { font-size: var(--t-m); color: var(--texte-discret); }
.indicateur__valeur { font-family: var(--police-titre); font-size: var(--t-5xl); font-weight: var(--poids-titre); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }

/* ---------- Listes de définitions (fiche) ----------
   Règles contre les mots coupés : (1) la colonne des libellés ne dépasse jamais 40 % de la largeur ;
   (2) quand la carte est étroite, libellé et valeur s'empilent (requête de conteneur : c'est la largeur
   de la carte qui compte, pas celle de l'écran) ; (3) une valeur ne se coupe qu'en dernier recours,
   pour un texte sans espace (adresse, code), jamais au milieu d'un mot ordinaire. */
.carte__corps { container-type: inline-size; }
.fiche { display: grid; grid-template-columns: fit-content(40%) minmax(0, 1fr); gap: var(--e-3) var(--e-6); margin: 0; }
.fiche dt { color: var(--texte-discret); font-size: var(--t-m); text-wrap: pretty; }
.fiche dd { margin: 0; font-weight: var(--poids-fort); min-width: 0; overflow-wrap: break-word; hyphens: manual; }
@container (max-width: 22rem) { .fiche { grid-template-columns: minmax(0, 1fr); gap: var(--e-1); } .fiche dd { margin-bottom: var(--e-3); } .fiche dd:last-child { margin-bottom: 0; } }
@media (max-width: 560px) { .fiche { grid-template-columns: minmax(0, 1fr); gap: var(--e-1); } .fiche dd { margin-bottom: var(--e-3); } }

/* ---------- Liste à cocher de mise en route ---------- */
.etapes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.etape { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: var(--e-3); align-items: center; padding: var(--e-3) 0; border-top: var(--trait) solid var(--bordure); }
.etape:first-child { border-top: 0; }
.etape__puce { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--bordure-controle); border-radius: var(--rayon-rond); }
.etape--faite .etape__puce { background: var(--statut-vert); border-color: var(--statut-vert); color: var(--sur-statut); }
.etape__texte strong { display: block; }
.etape__texte span { font-size: var(--t-s); color: var(--texte-discret); }

/* ---------- Fil d'activité ---------- */
.fil { list-style: none; margin: 0; padding: 0; }
.fil li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--e-1) var(--e-3); padding: var(--e-3) 0; border-top: var(--trait) solid var(--bordure); font-size: var(--t-m); }
.fil li:first-child { border-top: 0; padding-top: 0; }
.fil time { color: var(--texte-discret); font-size: var(--t-s); white-space: nowrap; }

/* ---------- Bandeaux d'information ---------- */
.bandeau { display: flex; gap: var(--e-3); align-items: flex-start; padding: var(--e-3) var(--e-4); border: var(--trait) solid var(--bordure); border-radius: var(--rayon-m); background: var(--fond); box-shadow: var(--ombre-carte); }
.bandeau--alerte { border-color: var(--alerte-texte); background: var(--fond-alerte); }
.bandeau--succes { border-color: var(--statut-vert); background: var(--fond-succes); }

/* ---------- Touches clavier ---------- */
.touche {
  display: inline-block; min-width: 1.6em; padding: 0 var(--e-1);
  border: var(--trait) solid var(--bordure-bouton); border-bottom-width: 2px; border-radius: 6px;
  font-family: var(--police-texte); font-size: var(--t-xs); font-weight: var(--poids-fort); text-align: center; line-height: 1.6;
  color: var(--texte-discret); background: var(--fond);
}

/* ---------- Avatar ---------- */
.avatar {
  width: 34px; height: 34px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--rayon-rond);
  background: var(--texte); color: var(--fond);
  font-family: var(--police-titre); font-weight: var(--poids-titre); font-size: var(--t-s);
}

/* ---------- Menus flottants (API Popover du navigateur : fermeture au clic extérieur et à Échap) ---------- */
.flottant {
  margin: 0; padding: var(--e-2);
  min-width: 260px; max-width: min(92vw, 360px);
  border: var(--trait) solid var(--bordure); border-radius: var(--rayon-l);
  background: var(--fond-flottant); color: var(--texte);
  box-shadow: var(--ombre-flottant);
  inset: auto;
  position-try-fallbacks: flip-inline;
}
.flottant:popover-open { animation: entree var(--duree-entree) var(--courbe) both; }
.flottant__titre { padding: var(--e-2) var(--e-3); font-size: var(--t-xs); font-weight: var(--poids-fort); color: var(--texte-discret); text-transform: uppercase; letter-spacing: 0.06em; }
.flottant__separateur { height: 1px; margin: var(--e-2) calc(-1 * var(--e-2)); background: var(--bordure); border: 0; }
.flottant__element {
  display: flex; align-items: center; gap: var(--e-3);
  width: 100%; min-height: var(--cible-tactile); padding: 0 var(--e-3);
  border: 0; border-radius: var(--rayon); background: transparent; text-align: left; text-decoration: none; cursor: pointer;
  transition: background-color var(--duree-survol) ease-out;
}
.flottant__element:hover, .flottant__element:focus-visible { background: var(--fond-survol); color: var(--texte); outline-offset: -2px; }
.flottant__element[aria-pressed="true"] { font-weight: var(--poids-fort); }
.flottant__element[aria-pressed="true"]::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-radius: var(--rayon-rond); background: var(--marque); }

/* ---------- Messages temporaires ---------- */
.notifications {
  position: fixed; right: var(--e-6); bottom: var(--e-6); z-index: 60;
  display: flex; flex-direction: column; gap: var(--e-2); align-items: flex-end;
  max-width: min(92vw, 440px);
}
.toast {
  display: flex; align-items: center; gap: var(--e-3);
  padding: var(--e-3) var(--e-3) var(--e-3) var(--e-4);
  background: var(--texte); color: var(--fond);
  border-radius: var(--rayon-m); box-shadow: var(--ombre-flottant);
  font-size: var(--t-m);
  animation: toast-entree var(--duree-panneau) var(--courbe) both;
}
.toast--erreur { box-shadow: inset 4px 0 0 var(--marque), var(--ombre-flottant); }
.toast__fermer { color: inherit; border-color: transparent; background: transparent; }
.toast__fermer:hover { background: rgba(127, 127, 127, 0.25); color: inherit; border-color: transparent; }
.toast[data-sortie] { opacity: 0; transform: translateY(8px); transition: opacity var(--duree-entree) ease-out, transform var(--duree-entree) ease-out; }
@keyframes toast-entree { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) { .notifications { left: var(--e-4); right: var(--e-4); bottom: var(--e-4); max-width: none; align-items: stretch; } }

/* ---------- Fenêtre de dialogue (palette de commandes) ---------- */
.dialogue {
  width: min(640px, calc(100vw - 32px));
  margin: 12vh auto auto; padding: 0;
  border: var(--trait) solid var(--bordure); border-radius: var(--rayon-l); overflow: hidden;
  background: var(--fond-flottant); color: var(--texte);
  box-shadow: var(--ombre-flottant);
}
.dialogue[open] { animation: entree var(--duree-entree) var(--courbe) both; }
.dialogue::backdrop { background: rgba(22, 20, 21, 0.45); backdrop-filter: blur(2px); }