/* ==========================================================================
   K2T — composants partagés (site + application). Dépend de tokens.css et base.css.
   Chaque état a sa pseudo-classe ET une classe de démonstration (.est-survol,
   .est-focus, .est-actif) utilisée par composants.html pour figer l'état.
   ========================================================================== */

/* ---------- Boutons ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--cible); padding: 0 18px; border: 1px solid transparent; border-radius: var(--r-2);
  font-size: .9375rem; font-weight: 600; line-height: 1.1; white-space: nowrap; cursor: pointer;
  transition: background-color var(--duree-1) var(--courbe), border-color var(--duree-1) var(--courbe), color var(--duree-1) var(--courbe), transform var(--duree-1) var(--courbe), box-shadow var(--duree-1) var(--courbe);
}
.btn .ico { width: 18px; height: 18px; }
.btn:active, .btn.est-actif { transform: translateY(1px); }
.btn.est-focus { outline: 2px solid var(--anneau); outline-offset: 2px; }
.btn--grand { min-height: 52px; padding: 0 26px; font-size: 1rem; }
.btn--petit { min-height: 36px; padding: 0 12px; font-size: var(--a-petit); }
.btn--bloc { width: 100%; }
/* Plein : encre. L'or n'y entre qu'en filet au survol et dans le compteur. */
.btn--plein { background: var(--bouton-fond); color: var(--bouton-texte); }
.btn--plein::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: 8px; height: 1px; background: var(--or-300); transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--duree-2) var(--courbe); }
.btn--plein:hover, .btn--plein.est-survol { background: var(--noir-marque); }
.btn--plein:hover::after, .btn--plein.est-survol::after { transform: scaleX(1); }
[data-theme="dark"] .btn--plein:hover { background: #FFFFFF; }
.btn--contour { border-color: var(--texte); color: var(--texte); background: transparent; }
.btn--contour:hover, .btn--contour.est-survol { background: var(--texte); color: var(--fond); }
.btn--doux { background: var(--surface); border-color: var(--bordure-forte); color: var(--texte); }
.btn--doux .ico { color: var(--texte-2); }
.btn--doux:hover, .btn--doux.est-survol { background: var(--fond-3); border-color: var(--bordure-champ); }
.btn--nu { background: transparent; color: var(--texte); }
.btn--nu:hover, .btn--nu.est-survol { background: var(--fond-3); }
.btn--danger { background: transparent; color: var(--erreur-700); border-color: transparent; }
.btn--danger:hover, .btn--danger.est-survol { background: var(--erreur-fond); }
.btn--clair { background: var(--blanc); color: var(--encre-900); }
.btn--clair:hover, .btn--clair.est-survol { background: var(--or-100); }
.btn:disabled, .btn[aria-disabled="true"] { cursor: not-allowed; background: var(--fond-3); border-color: var(--bordure); color: var(--texte-3); transform: none; }
.btn:disabled::after, .btn[aria-disabled="true"]::after { display: none; }
.btn[aria-busy="true"] { color: transparent !important; pointer-events: none; }
.btn[aria-busy="true"]::before { content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; border-color: var(--bouton-texte) var(--bouton-texte) transparent transparent; animation: tourne 700ms linear infinite; }
.btn--doux[aria-busy="true"]::before, .btn--contour[aria-busy="true"]::before { border-color: var(--texte) var(--texte) transparent transparent; }
@keyframes tourne { to { transform: rotate(360deg); } }
.btn__compte { min-width: 22px; padding: 0 7px; border-radius: var(--r-plein); background: var(--or-300); color: var(--encre-900); font-size: var(--t-mini); line-height: 22px; text-align: center; font-variant-numeric: tabular-nums; }
.b-icone { position: relative; display: inline-grid; place-items: center; width: var(--cible); height: var(--cible); border-radius: var(--r-2); color: var(--texte-2); transition: background-color var(--duree-1) var(--courbe); }
.b-icone:hover, .b-icone.est-survol { background: var(--fond-3); color: var(--texte); }
.b-icone--bord { border: 1px solid var(--bordure-forte); }

/* Lien souligné d'or */
.lien { display: inline-flex; align-items: center; gap: 8px; min-height: var(--cible); font-weight: 600; color: var(--texte); background: linear-gradient(var(--accent-trait), var(--accent-trait)) 0 calc(100% - 10px) / 100% 1px no-repeat; transition: color var(--duree-1) var(--courbe); }
.lien .ico { width: 18px; height: 18px; transition: transform var(--duree-2) var(--courbe); }
.lien:hover, .lien.est-survol { color: var(--accent-texte); }
.lien:hover .ico, .lien.est-survol .ico { transform: translateX(4px); }

/* ---------- Champs ---------- */
.champ { display: grid; gap: 6px; min-width: 0; }
.champ__label { font-size: var(--a-petit); font-weight: 600; color: var(--texte); }
.champ__saisie {
  width: 100%; min-height: var(--cible); padding: 0 12px; border: 1px solid var(--bordure-champ); border-radius: var(--r-2);
  background: var(--surface); color: var(--texte); font-size: .9375rem; font-variant-numeric: tabular-nums;
  transition: border-color var(--duree-1) var(--courbe), box-shadow var(--duree-1) var(--courbe);
}
select.champ__saisie { appearance: none; padding-right: 36px; background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A5146' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center / 16px; }
textarea.champ__saisie { min-height: 72px; padding: 10px 12px; line-height: 1.45; resize: vertical; }
.champ__saisie::placeholder { color: var(--texte-3); opacity: 1; }
.champ__saisie:hover, .champ__saisie.est-survol { border-color: var(--texte-2); }
.champ__saisie:focus, .champ__saisie.est-focus { outline: none; border-color: var(--anneau); box-shadow: 0 0 0 3px color-mix(in srgb, var(--anneau) 22%, transparent); }
.champ__saisie:disabled { background: var(--fond-3); border-color: var(--bordure); color: var(--texte-3); cursor: not-allowed; }
.champ__aide { font-size: var(--a-mini); color: var(--texte-3); line-height: 1.4; }
.champ__erreur { display: flex; gap: 6px; font-size: var(--a-mini); font-weight: 600; line-height: 1.4; color: var(--erreur-700); }
.champ__erreur .ico { width: 14px; height: 14px; margin-top: 1px; }
.champ--erreur .champ__saisie { border-color: var(--erreur-700); box-shadow: 0 0 0 1px var(--erreur-700); background: var(--surface); }
.champ--erreur .champ__label { color: var(--erreur-700); }
.recherche { display: flex; align-items: center; gap: 8px; height: var(--cible); padding: 0 12px; border: 1px solid var(--bordure-forte); border-radius: var(--r-2); background: var(--fond-2); color: var(--texte-3); }
.recherche input { flex: 1; min-width: 0; border: 0; background: none; outline: 0; color: var(--texte); font-size: var(--a-corps); }
.recherche input::placeholder { color: var(--texte-3); opacity: 1; }
.recherche:focus-within { border-color: var(--anneau); box-shadow: 0 0 0 3px color-mix(in srgb, var(--anneau) 22%, transparent); }
.recherche kbd { font: 600 var(--t-mini)/1 var(--font-texte); padding: 4px 6px; border: 1px solid var(--bordure-forte); border-radius: var(--r-1); background: var(--surface); color: var(--texte-2); }

/* ---------- Pastilles, puces, codes, présence, avatars ---------- */
.pastille { min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-plein); background: var(--accent-aplat); color: var(--encre-900); font-size: var(--t-mini); font-weight: 700; line-height: 20px; text-align: center; font-variant-numeric: tabular-nums; }
.b-icone .pastille { position: absolute; top: 2px; right: 0; box-shadow: 0 0 0 2px var(--fond); }
.puce { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 10px; border-radius: var(--r-plein); font-size: var(--a-mini); font-weight: 600; white-space: nowrap; }
.puce .ico { width: 14px; height: 14px; }
.puce--erreur { background: var(--erreur-fond); color: var(--erreur-700); }
.puce--alerte { background: var(--alerte-fond); color: var(--alerte-700); }
.puce--succes { background: var(--succes-fond); color: var(--succes-700); }
.puce--info { background: var(--info-fond); color: var(--info-700); }
.puce--neutre { background: var(--fond-3); color: var(--texte-2); }
.puce--or { background: var(--accent-fond); color: var(--accent-texte); box-shadow: inset 0 0 0 1px var(--accent-trait); }

/* Code de poste : 4 lettres, doublent la couleur (daltoniens, impression) */
.code { display: inline-flex; align-items: center; min-height: 20px; padding: 0 6px; border-radius: var(--r-1); background: var(--pf, var(--fond-3)); color: var(--pc, var(--texte-2)); font-size: var(--t-mini); font-weight: 700; letter-spacing: .06em; font-stretch: 90%; white-space: nowrap; }
.p1 { --pc: var(--poste-1); --pf: var(--poste-1-fond); } .p2 { --pc: var(--poste-2); --pf: var(--poste-2-fond); }
.p3 { --pc: var(--poste-3); --pf: var(--poste-3-fond); } .p4 { --pc: var(--poste-4); --pf: var(--poste-4-fond); }
.p5 { --pc: var(--poste-5); --pf: var(--poste-5-fond); } .p6 { --pc: var(--poste-6); --pf: var(--poste-6-fond); }
.p7 { --pc: var(--poste-7); --pf: var(--poste-7-fond); } .p8 { --pc: var(--poste-8); --pf: var(--poste-8-fond); }
.p9 { --pc: var(--poste-9); --pf: var(--poste-9-fond); }

/* Présence : la forme change avec l'état (rond plein, losange, carré, cercle vide) */
.presence { display: inline-flex; align-items: center; gap: 8px; font-size: var(--a-petit); color: var(--texte-2); white-space: nowrap; }
.presence::before { content: ""; width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--non-textuel); }
.presence--present { color: var(--succes-700); } .presence--present::before { background: var(--succes-700); }
.presence--retard { color: var(--alerte-700); font-weight: 600; } .presence--retard::before { background: var(--alerte-700); border-radius: 1px; transform: rotate(45deg) scale(.9); }
.presence--absent { color: var(--erreur-700); font-weight: 600; } .presence--absent::before { background: var(--erreur-700); border-radius: 1px; }
.presence--attendu::before { background: none; box-shadow: inset 0 0 0 2px var(--non-textuel); }
.avatar { position: relative; display: inline-grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--fond-3); color: var(--texte); font-size: var(--t-mini); font-weight: 700; letter-spacing: .02em; }
.avatar--petit { width: 28px; height: 28px; }
.avatar--or { background: var(--accent-aplat); color: var(--encre-900); }
.avatar--vide { background: none; border: 1px dashed var(--bordure-champ); color: var(--texte-3); }
.avatar[data-presence]::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 2px var(--surface); background: var(--non-textuel); }
.avatar[data-presence="present"]::after { background: var(--succes-700); }
.avatar[data-presence="retard"]::after { background: var(--alerte-700); border-radius: 2px; transform: rotate(45deg); }
.avatar[data-presence="absent"]::after { background: var(--erreur-700); border-radius: 2px; }

/* ---------- Cartes ---------- */
.carte { min-width: 0; border: 1px solid var(--bordure-forte); border-radius: var(--r-3); background: var(--surface); }
.carte__tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px 0; }
.carte__tete h2, .carte__tete h3 { font-size: var(--a-h2); font-weight: 500; line-height: 1.3; display: flex; align-items: center; gap: 10px; }
.carte__tete a { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; font-size: var(--a-petit); font-weight: 600; color: var(--accent-texte); white-space: nowrap; }
.carte__corps { padding: 12px 20px 20px; }
.carte__pied { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--bordure); font-size: var(--a-petit); color: var(--texte-2); }
.carte--active { border-color: var(--texte); box-shadow: 0 0 0 1px var(--texte); }
a.carte:hover, .carte.est-survol { border-color: var(--bordure-champ); box-shadow: var(--ombre-2); }

/* ---------- Tableaux ---------- */
.tableau { width: 100%; font-size: var(--a-corps); }
.tableau th { padding: 10px 12px; text-align: left; font-size: var(--t-mini); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--texte-3); border-bottom: 1px solid var(--texte); }
.tableau td { padding: 12px; border-bottom: 1px solid var(--bordure); vertical-align: top; }
.tableau .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tableau tbody tr { transition: background-color var(--duree-1) var(--courbe); }
.tableau tbody tr:hover { background: var(--fond-2); }
.tableau .est-surligne td { background: var(--accent-surligne); box-shadow: inset 0 1px 0 var(--accent-trait), inset 0 -1px 0 var(--accent-trait); font-weight: 600; }
.tableau .est-surligne td:first-child { box-shadow: inset 3px 0 0 var(--accent-trait), inset 0 1px 0 var(--accent-trait), inset 0 -1px 0 var(--accent-trait); }

/* ---------- Onglets et segments ---------- */
.onglets { display: flex; gap: 4px; border-bottom: 1px solid var(--bordure-forte); overflow-x: auto; scrollbar-width: none; }
.onglets [role="tab"] { min-height: var(--cible); padding: 0 14px; font-weight: 600; color: var(--texte-2); white-space: nowrap; box-shadow: inset 0 -2px 0 transparent; transition: color var(--duree-1) var(--courbe), box-shadow var(--duree-1) var(--courbe); }
.onglets [role="tab"]:hover, .onglets .est-survol { color: var(--texte); box-shadow: inset 0 -2px 0 var(--bordure-champ); }
.onglets [aria-selected="true"] { color: var(--texte); box-shadow: inset 0 -2px 0 var(--accent-trait); }
.onglets [aria-disabled="true"] { color: var(--texte-3); cursor: not-allowed; box-shadow: none; }
.segments { display: inline-flex; padding: 3px; border: 1px solid var(--bordure-forte); border-radius: var(--r-2); background: var(--fond-2); }
.segments button { min-height: 34px; padding: 0 14px; border-radius: 3px; font-weight: 600; font-size: var(--a-corps); color: var(--texte-2); transition: background-color var(--duree-1) var(--courbe); }
.segments button:hover { color: var(--texte); }
.segments [aria-pressed="true"] { background: var(--surface); color: var(--texte); box-shadow: var(--ombre-1), inset 0 -2px 0 var(--accent-trait); }

/* ---------- Menu déroulant (établissement, profil) ---------- */
.deroulant { position: relative; }
.menu { position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; min-width: 300px; padding: 6px; border: 1px solid var(--bordure-forte); border-radius: var(--r-3); background: var(--surface); box-shadow: var(--ombre-3); }
.menu__titre { padding: 8px 10px 4px; }
.menu a, .menu button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: var(--cible); padding: 6px 10px; border-radius: var(--r-2); font-size: var(--a-corps); }
.menu a:hover, .menu button:hover { background: var(--fond-3); }
.menu [aria-current="true"] { background: var(--accent-fond); font-weight: 600; }
.menu small { display: block; font-size: var(--a-mini); color: var(--texte-3); }
.menu hr { border: 0; border-top: 1px solid var(--bordure); margin: 6px 0; }

/* ---------- Panneau latéral ---------- */
.panneau { display: flex; flex-direction: column; background: var(--surface); border-left: 1px solid var(--bordure); min-width: 0; }
.panneau__tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 14px; border-bottom: 1px solid var(--bordure); }
.panneau__tete h2 { font-size: 1.25rem; font-weight: 500; line-height: 1.2; }
.panneau__corps { flex: 1; overflow-y: auto; padding: 16px 20px; display: grid; gap: 18px; align-content: start; }
.panneau__pied { display: flex; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--bordure); background: var(--surface); }
.panneau--flottant { position: absolute; z-index: 70; width: min(400px, calc(100vw - 16px)); border: 1px solid var(--bordure-forte); border-radius: var(--r-3); box-shadow: var(--ombre-3); }

/* ---------- Infobulle ancrée ---------- */
.ancre { position: relative; }
.infobulle { position: absolute; z-index: 40; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); width: max-content; max-width: 240px; padding: 10px 12px; border-radius: var(--r-2); background: var(--encre-900); color: #F3EEE6; font-size: var(--a-mini); line-height: 1.4; box-shadow: var(--ombre-2); pointer-events: none; }
.infobulle b { display: flex; align-items: center; gap: 6px; color: #FFD35C; font-size: var(--a-petit); }
.infobulle b .ico { width: 14px; height: 14px; }
.infobulle::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -6px; border: 6px solid transparent; border-top-color: var(--encre-900); }
.infobulle--droite { left: auto; right: -4px; transform: none; }
.infobulle--droite::after { left: auto; right: 24px; }
[data-theme="dark"] .infobulle { background: #F3EEE6; color: #15120E; }
[data-theme="dark"] .infobulle b { color: #8A5606; }
[data-theme="dark"] .infobulle::after { border-top-color: #F3EEE6; }

/* ---------- Réglette à tickets (passe de cuisine) ---------- */
.reglette { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 16px; padding: 14px 12px 0; }
.reglette::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; border-radius: 2px; background: linear-gradient(var(--texte), var(--texte)) 0 0 / 100% 6px no-repeat; box-shadow: 0 2px 0 var(--bordure-forte); }
.ticket { position: relative; min-width: 0; padding: 18px 18px 26px; background: var(--surface); border: 1px solid var(--bordure-forte); border-top: 0; box-shadow: var(--ombre-2);
  --dent: 8px; -webkit-mask: radial-gradient(circle at 50% 100%, transparent 4.5px, #000 5px) 0 100% / 12px var(--dent) repeat-x, linear-gradient(#000, #000) 0 0 / 100% calc(100% - var(--dent)) no-repeat; mask: radial-gradient(circle at 50% 100%, transparent 4.5px, #000 5px) 0 100% / 12px var(--dent) repeat-x, linear-gradient(#000, #000) 0 0 / 100% calc(100% - var(--dent)) no-repeat; }
.ticket::before { content: ""; position: absolute; top: -14px; left: 50%; width: 36px; height: 12px; margin-left: -18px; border-radius: 0 0 3px 3px; background: var(--texte); }
.ticket--actif { box-shadow: var(--ombre-3), inset 0 3px 0 var(--accent-trait); }
.ticket--attente { background: var(--fond-2); box-shadow: var(--ombre-1); }
.ticket__tete { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ticket__tete h3 { font-size: 1.1875rem; font-weight: 500; }
.ticket__heure { font-size: var(--a-petit); font-weight: 600; color: var(--texte-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ticket__filet { margin-block: 12px; border: 0; border-top: 1px dashed var(--bordure-champ); }

/* ---------- Étiquette DLC (impression thermique 60 x 40 mm) ---------- */
.dlc { width: 280px; padding: 14px 14px 10px; background: #FFFFFF; color: #111; border: 1px solid #1B1712; border-radius: var(--r-2); font-size: .8125rem; line-height: 1.3; font-stretch: 90%; box-shadow: var(--ombre-3); }
.dlc__tete { display: flex; justify-content: space-between; gap: 8px; font-size: var(--t-mini); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.dlc__nom { margin-top: 6px; font: 600 1.375rem/1.1 var(--font-titre); font-variation-settings: var(--titre-axes); font-stretch: 100%; }
.dlc__corps { display: grid; grid-template-columns: 1fr 92px; gap: 10px; margin-top: 10px; }
.dlc dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; align-content: start; }
.dlc dt { color: #4A4238; }
.dlc dd { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.dlc__jour { display: grid; align-content: center; justify-items: center; padding: 8px 4px; border-radius: var(--r-1); background: var(--or-300); color: #111; text-align: center; line-height: 1.05; }
.dlc__jour small { font-size: var(--t-mini); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.dlc__jour b { font-size: 1.75rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.dlc__jour span { font-size: var(--t-mini); font-weight: 700; }
.dlc__code { height: 30px; margin-top: 10px; background: repeating-linear-gradient(90deg, #111 0 2px, transparent 2px 4px, #111 4px 5px, transparent 5px 8px, #111 8px 11px, transparent 11px 12px, #111 12px 13px, transparent 13px 16px); }
.dlc__lot { display: flex; justify-content: space-between; margin-top: 4px; font-size: var(--t-mini); font-variant-numeric: tabular-nums; }

/* ---------- Bandeaux d'alerte (toujours une action) ---------- */
.bandeau { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border: 1px solid; border-radius: var(--r-2); font-size: var(--a-corps); line-height: 1.45; color: var(--texte); }
.bandeau > .ico { margin-top: 1px; }
.bandeau__texte { flex: 1 1 240px; min-width: 0; }
.bandeau__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.bandeau--erreur { background: var(--erreur-fond); border-color: var(--erreur-700); } .bandeau--erreur > .ico, .bandeau--erreur b { color: var(--erreur-700); }
.bandeau--alerte { background: var(--alerte-fond); border-color: var(--alerte-700); } .bandeau--alerte > .ico, .bandeau--alerte b { color: var(--alerte-700); }
.bandeau--info { background: var(--info-fond); border-color: var(--info-700); } .bandeau--info > .ico, .bandeau--info b { color: var(--info-700); }
.bandeau--succes { background: var(--succes-fond); border-color: var(--succes-700); } .bandeau--succes > .ico, .bandeau--succes b { color: var(--succes-700); }

/* Frise du repos : deux services et l'écart entre eux */
.frise-repos { display: grid; grid-template-columns: 2fr 3fr 2fr; height: 22px; margin-top: 10px; border-radius: var(--r-1); overflow: hidden; background: var(--surface); box-shadow: inset 0 0 0 1px var(--bordure-forte); }
.frise-repos i { display: block; background: var(--pc, var(--texte-2)); }
.frise-repos em { display: grid; place-items: center; font-style: normal; font-size: var(--t-mini); font-weight: 700; color: var(--erreur-700); background: repeating-linear-gradient(135deg, var(--erreur-fond) 0 5px, color-mix(in srgb, var(--erreur-700) 22%, var(--erreur-fond)) 5px 7px); }
.frise-repos__legende { display: flex; justify-content: space-between; margin-top: 4px; font-size: var(--t-mini); color: var(--texte-2); font-variant-numeric: tabular-nums; }

/* ---------- Squelette de chargement ---------- */
.sq { display: block; border-radius: var(--r-2); background: linear-gradient(90deg, var(--squelette) 0 40%, var(--squelette-reflet) 50%, var(--squelette) 60% 100%) 0 0 / 300% 100%; animation: reflet 1.4s linear infinite; }
.sq--ligne { height: 12px; } .sq--titre { height: 22px; width: 40%; } .sq--bloc { height: 38px; } .sq--rond { width: 32px; height: 32px; border-radius: 50%; }
@keyframes reflet { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* ---------- État vide ---------- */
.vide { display: grid; justify-items: center; gap: 12px; padding: 48px 24px; text-align: center; }
.vide svg.dessin { width: 120px; height: 96px; }
.vide h2, .vide h3 { font-size: 1.375rem; font-weight: 500; }
.vide p { max-width: 44ch; color: var(--texte-2); font-size: var(--a-corps); line-height: 1.5; }
.vide__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 4px; }

/* ---------- Barres de progression ---------- */
.progression { position: relative; height: 6px; border-radius: 3px; background: var(--fond-3); overflow: hidden; }
.progression > i { display: block; height: 100%; width: var(--v, 0%); border-radius: 3px; background: var(--texte); transition: width var(--duree-3) var(--courbe); }
.progression--or > i { background: var(--accent-trait); }
.progression--succes > i { background: var(--succes-700); }
.progression--alerte > i { background: var(--alerte-700); }
.progression--repere { overflow: visible; }
.progression--repere > em { position: absolute; top: -4px; bottom: -4px; left: var(--r); width: 2px; background: var(--accent-trait); }

/* ---------- Notifications ---------- */
.notif { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; column-gap: 12px; align-items: start; padding: 12px 14px; background: var(--surface); border: 1px solid var(--bordure-forte); border-radius: var(--r-3); box-shadow: var(--ombre-2); font-size: var(--a-petit); line-height: 1.4; color: var(--texte-2); }
.notif__picto { width: 36px; height: 36px; border-radius: var(--r-2); border: 1px solid var(--bordure); background: #fff; display: grid; place-items: center; }
.notif__picto img { width: 26px; height: 26px; }
.notif strong { display: block; color: var(--texte); font-size: var(--a-corps); }
.notif time { font-size: var(--t-mini); color: var(--texte-3); white-space: nowrap; }
.liste-notifs li { position: relative; display: grid; grid-template-columns: 10px minmax(0, 1fr); column-gap: 12px; padding: 12px 16px; border-top: 1px solid var(--bordure); font-size: var(--a-petit); line-height: 1.4; color: var(--texte-2); }
.liste-notifs li::before { content: ""; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--or-500); }
.liste-notifs li.lue::before { background: none; box-shadow: inset 0 0 0 1.5px var(--non-textuel); }
.liste-notifs b { display: block; color: var(--texte); font-weight: 600; font-size: var(--a-corps); }
.liste-notifs time { display: block; margin-top: 2px; font-size: var(--t-mini); color: var(--texte-3); }
.liste-notifs .lien-action { display: inline-flex; align-items: center; min-height: 32px; font-weight: 600; color: var(--texte); background: linear-gradient(var(--accent-trait), var(--accent-trait)) 0 calc(100% - 6px) / 100% 1px no-repeat; }

/* Confirmation après action */
.toast { display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 16px; border-radius: var(--r-3); background: var(--encre-900); color: #F3EEE6; font-size: var(--a-corps); box-shadow: var(--ombre-3); max-width: min(640px, calc(100vw - 32px)); }
.toast .ico { color: #6FD3A0; }
.toast b { color: #FFFFFF; }
.toast a, .toast button { margin-left: auto; min-height: 36px; padding: 0 10px; font-weight: 600; color: #FFD35C; white-space: nowrap; display: inline-flex; align-items: center; }
.toast--flottant { position: fixed; z-index: 90; left: 50%; bottom: 24px; transform: translateX(-50%); animation: monte var(--duree-2) var(--courbe) both; }
[data-theme="dark"] .toast { background: #F3EEE6; color: #2B251E; } [data-theme="dark"] .toast b { color: #15120E; } [data-theme="dark"] .toast a, [data-theme="dark"] .toast button { color: #8A5606; } [data-theme="dark"] .toast .ico { color: #17693F; }

@media (pointer: coarse), (max-width: 1023px) {
  .btn--petit { min-height: var(--cible); }
  .segments button { min-height: var(--cible); }
  .carte__tete a { min-height: var(--cible); }
}

/* ==========================================================================
   AJOUTS DU 10/11/2026 (écrans planning mois / jour, publication, notifications,
   équipe, incident, établissements, abonnement, hygiène, états). Aucune règle
   au-dessus n'a été modifiée. Planche : app-etats.html.
   ========================================================================== */
/* Segments en liens (bascule de vue entre pages) */
.segments a { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 0 14px; border-radius: 3px; font-weight: 600; font-size: var(--a-corps); color: var(--texte-2); white-space: nowrap; }
.segments a:hover { color: var(--texte); }
.segments a[aria-current="page"] { background: var(--surface); color: var(--texte); box-shadow: var(--ombre-1), inset 0 -2px 0 var(--accent-trait); }

/* Fenêtre modale : voile + fenêtre ; plein écran sous 768 px */
.voile-fond { position: fixed; inset: 0; z-index: 80; display: grid; place-items: start center; padding: 40px 24px; overflow-y: auto; background: var(--voile); }
.fenetre { width: min(1080px, 100%); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--bordure-forte); border-radius: var(--r-3); box-shadow: var(--ombre-3); animation: monte var(--duree-2) var(--courbe) both; }
.fenetre--etroite { width: min(520px, 100%); }
.fenetre__tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 24px 16px; border-bottom: 1px solid var(--bordure); }
.fenetre__tete h2 { font-size: 1.5rem; font-weight: 500; line-height: 1.15; letter-spacing: -0.01em; }
.fenetre__tete p { margin-top: 4px; color: var(--texte-2); }
.fenetre__corps { padding: 20px 24px 24px; }
.fenetre__pied { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; padding: 14px 24px; border-top: 1px solid var(--bordure); background: var(--fond-2); border-radius: 0 0 var(--r-3) var(--r-3); }
.fenetre__pied .pousse { margin-left: auto; }

/* Interrupteur (input checkbox role="switch") */
.interrupteur { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: var(--cible); min-height: var(--cible); cursor: pointer; }
.interrupteur input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: inherit; }
.interrupteur i { position: relative; width: 38px; height: 22px; border-radius: 11px; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--bordure-champ); transition: background-color var(--duree-1) var(--courbe); }
.interrupteur i::after { content: ""; position: absolute; top: 4px; left: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--texte-2); transition: transform var(--duree-2) var(--courbe), background-color var(--duree-1) var(--courbe); }
.interrupteur input:checked + i { background: var(--bouton-fond); box-shadow: none; }
.interrupteur input:checked + i::after { transform: translateX(16px); background: var(--or-300); }
.interrupteur input:focus-visible + i { outline: 2px solid var(--anneau); outline-offset: 2px; }
.interrupteur input:disabled { cursor: not-allowed; }
.interrupteur input:disabled + i { opacity: .5; }
.interrupteur .ico { position: absolute; right: -4px; top: 2px; width: 14px; height: 14px; color: var(--texte-3); }

/* Case à cocher et bouton radio (natifs, agrandis) */
.coche { display: flex; align-items: flex-start; gap: 10px; min-height: var(--cible); padding-block: 10px; cursor: pointer; line-height: 1.4; }
.coche input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--encre-900); cursor: inherit; }
[data-theme="dark"] .coche input { accent-color: var(--or-300); }
.coche small { display: block; color: var(--texte-3); font-size: var(--a-mini); }
.coche--carte { padding: 12px 14px; border: 1px solid var(--bordure-forte); border-radius: var(--r-2); }
.coche--carte:has(input:checked) { border-color: var(--texte); box-shadow: inset 0 0 0 1px var(--texte); background: var(--fond-2); }
.coche--carte:has(input:disabled) { cursor: not-allowed; color: var(--texte-3); background: var(--fond-2); }

/* Étapes d'un parcours */
.etapes { display: flex; flex-wrap: wrap; gap: 4px 24px; counter-reset: etape; }
.etapes li { display: flex; align-items: center; gap: 8px; min-height: 32px; font-size: var(--a-petit); font-weight: 600; color: var(--texte-3); counter-increment: etape; }
.etapes li::before { content: counter(etape); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--bordure-champ); font-size: var(--t-mini); }
.etapes .fait { color: var(--texte-2); } .etapes .fait::before { content: "\2713"; background: var(--succes-fond); color: var(--succes-700); box-shadow: none; }
.etapes [aria-current="step"] { color: var(--texte); } .etapes [aria-current="step"]::before { background: var(--bouton-fond); color: var(--bouton-texte); box-shadow: inset 0 -2px 0 var(--or-300); }

/* Suivi d'un envoi : envoyé, remis, ouvert, bien reçu */
.suivi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); min-width: 0; }
.suivi li { position: relative; display: grid; justify-items: start; align-content: start; gap: 0; padding-top: 16px; font-size: var(--a-mini); color: var(--texte-3); font-variant-numeric: tabular-nums; line-height: 1.35; }
.suivi li::before { content: ""; position: absolute; top: 0; left: 0; width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--non-textuel); background: var(--surface); z-index: 1; }
.suivi li::after { content: ""; position: absolute; top: 4px; left: 10px; right: 0; height: 2px; background: var(--bordure); }
.suivi li:last-child::after { display: none; }
.suivi b { color: var(--texte-2); font-weight: 600; }
.suivi .ok::before { background: var(--succes-700); box-shadow: none; } .suivi .ok::after { background: var(--succes-700); }
.suivi .ok b { color: var(--texte); }
.suivi .attente::before { box-shadow: inset 0 0 0 2px var(--alerte-700); }
.suivi .attente b { color: var(--alerte-700); }

/* Clé de licence masquée */
.cle { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 10px; border: 1px dashed var(--bordure-champ); border-radius: var(--r-1); background: var(--fond-2); font: 600 var(--a-petit)/1 ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .02em; color: var(--texte); white-space: nowrap; }
.cle .ico { width: 16px; height: 16px; color: var(--accent-trait); }

/* Bande de chiffres (en-tête de page) */
.chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border: 1px solid var(--bordure-forte); border-radius: var(--r-3); background: var(--surface); }
.chiffres > div { padding: 12px 16px; min-width: 0; }
.chiffres > div + div { border-left: 1px solid var(--bordure); }
.chiffres dt { font-size: var(--t-mini); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--texte-3); }
.chiffres dd { margin-top: 2px; font: 400 1.625rem/1.15 var(--font-titre); font-variation-settings: var(--titre-axes); letter-spacing: -0.015em; font-variant-numeric: tabular-nums; }
.chiffres dd small { display: block; font: 400 var(--a-mini)/1.35 var(--font-texte); color: var(--texte-2); letter-spacing: 0; }
.chiffres .alerte dd { color: var(--alerte-700); } .chiffres .erreur dd { color: var(--erreur-700); }

/* Aperçu d'e-mail (le corps reste clair, comme dans la boîte du salarié) */
.courriel { border: 1px solid var(--bordure-forte); border-radius: var(--r-3); background: var(--fond-2); overflow: hidden; }
.courriel__entete { display: grid; gap: 2px; padding: 12px 16px; border-bottom: 1px solid var(--bordure); font-size: var(--a-mini); color: var(--texte-3); }
.courriel__entete b { color: var(--texte); font-weight: 600; font-size: var(--a-petit); }
.courriel__corps { margin: 12px; padding: 20px; border-radius: var(--r-2); background: #FFFFFF; color: #1B1712; box-shadow: var(--ombre-1); font-size: var(--a-petit); line-height: 1.5; }
.courriel__corps h3 { font-size: 1.25rem; font-weight: 500; line-height: 1.2; margin: 14px 0 6px; color: #1B1712; }
.courriel__corps .ligne-j { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 8px; padding: 6px 8px; border-top: 1px solid #E8E2D6; font-variant-numeric: tabular-nums; }
.courriel__corps .ligne-j.change { background: #FFF1CC; box-shadow: inset 3px 0 0 #AA6B09; }
.tableau-defile { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
.tableau-defile > .tableau { min-width: 100%; }
.tableau-defile > .tableau th, .tableau-defile > .tableau td { white-space: nowrap; }
.carte__corps { min-width: 0; }
.courriel__corps .ligne-j small { display: block; font-size: var(--a-mini); color: #5A5146; }
.courriel__corps del { color: #72685B; }
.courriel__corps .btn--plein { background: #1B1712; color: #FFFEFC; }

/* Lettre (aperçu papier A4) */
.lettre { padding: 40px 44px; background: #FFFFFF; color: #1B1712; border: 1px solid var(--bordure-forte); border-radius: var(--r-1); box-shadow: var(--ombre-2); font: 400 .9375rem/1.6 var(--font-titre); font-variation-settings: var(--titre-axes); }
.lettre p + p { margin-top: 12px; }
.lettre .lettre__exp { font-family: var(--font-texte); font-size: var(--a-petit); line-height: 1.45; color: #3B342B; }
.lettre .lettre__dest { margin: 18px 0 18px auto; width: max-content; max-width: 60%; font-family: var(--font-texte); font-size: var(--a-petit); line-height: 1.45; }
.lettre .lettre__objet { font-family: var(--font-texte); font-weight: 700; }
.lettre .lettre__decharge { margin-top: 26px; padding: 14px 16px; border: 1px dashed #8F8474; font-family: var(--font-texte); font-size: var(--a-mini); color: #3B342B; }
.lettre .lettre__modele { margin-top: 16px; font-family: var(--font-texte); font-size: var(--a-mini); color: #72685B; }

/* Chronologie */
.chrono { position: relative; display: grid; }
.chrono li { position: relative; display: grid; grid-template-columns: 88px minmax(0, 1fr); column-gap: 20px; padding: 0 0 18px; }
.chrono li::before { content: ""; position: absolute; left: 97px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 2px var(--non-textuel); z-index: 1; }
.chrono li::after { content: ""; position: absolute; left: 101px; top: 17px; bottom: 0; width: 2px; background: var(--bordure); }
.chrono li:last-child::after { display: none; }
.chrono time { font-size: var(--a-mini); font-weight: 600; color: var(--texte-3); text-align: right; font-variant-numeric: tabular-nums; padding-top: 1px; }
.chrono .chrono__c { padding-left: 14px; min-width: 0; }
.chrono b { display: block; font-weight: 600; }
.chrono p { color: var(--texte-2); font-size: var(--a-petit); }
.chrono .erreur::before { box-shadow: none; background: var(--erreur-700); border-radius: 2px; }
.chrono .alerte::before { box-shadow: none; background: var(--alerte-700); transform: rotate(45deg) scale(.85); border-radius: 1px; }
.chrono .succes::before { box-shadow: none; background: var(--succes-700); }
.chrono .or::before { box-shadow: inset 0 0 0 2px var(--accent-trait); }

/* Puces de filtre (pressables ; elles passent à la ligne : pas de défilement horizontal) */
.filtres-puces { display: flex; flex-wrap: wrap; gap: 6px; }
.filtres-puces button { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 1px solid var(--bordure-forte); border-radius: var(--r-plein); background: var(--surface); font-size: var(--a-petit); font-weight: 600; color: var(--texte-2); }
.filtres-puces button:hover { border-color: var(--bordure-champ); color: var(--texte); }
.filtres-puces [aria-pressed="true"] { background: var(--bouton-fond); border-color: var(--bouton-fond); color: var(--bouton-texte); }
.filtres-puces span { font-variant-numeric: tabular-nums; opacity: .85; }

/* Compteur moins / plus */
.compteur { display: inline-flex; align-items: center; border: 1px solid var(--bordure-champ); border-radius: var(--r-2); background: var(--surface); }
.compteur button { width: var(--cible); height: var(--cible); display: grid; place-items: center; color: var(--texte); border-radius: var(--r-2); }
.compteur button:hover { background: var(--fond-3); }
.compteur output { min-width: 40px; text-align: center; font: 500 1.25rem/1 var(--font-titre); font-variant-numeric: tabular-nums; }

/* Fil d'Ariane */
.ariane { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--a-petit); color: var(--texte-3); }
.ariane a { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; color: var(--texte-2); font-weight: 600; }
.ariane a:hover { color: var(--accent-texte); }
.ariane .ico { width: 14px; height: 14px; }

@media (pointer: coarse), (max-width: 1023px) {
  .filtres-puces button, .ariane a { min-height: var(--cible); }
  .segments a { min-height: var(--cible); }
  .filtre, .filtre select { min-height: var(--cible); }
}
@media (max-width: 767px) {
  .voile-fond { padding: 0; place-items: stretch; }
  .fenetre { width: 100%; min-height: 100%; border-radius: 0; border: 0; }
  .fenetre__tete, .fenetre__corps, .fenetre__pied { padding-inline: 16px; }
  .fenetre__pied { position: sticky; bottom: 0; border-radius: 0; }
  .fenetre__pied .btn { flex: 1 1 auto; }
  .lettre { padding: 24px 20px; }
  .chrono li { grid-template-columns: 64px minmax(0, 1fr); column-gap: 14px; }
  .chrono li::before { left: 69px; } .chrono li::after { left: 73px; }
  .chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chiffres > div + div { border-left: 0; }
  .chiffres > div:nth-child(even) { border-left: 1px solid var(--bordure); }
  .chiffres > div:nth-child(n+3) { border-top: 1px solid var(--bordure); }
}