/* Coquille commune de l'application (brique 6a).
   Variables de la charte Espace K Dentaire, recopiées de planning/static/planning/styles.css ;
   chargée par le bloc `style_base` de socle/base.html — la page planning ne charge que barre.css
   (brique 6d), qui porte la barre haute, l'avatar, le menu et les sous-onglets.
   Une seule requête de largeur, en fin de fichier (brique 6b, D6b.9) : la page planning ne charge pas cette feuille. */

:root {
  color-scheme: light;
  --fond: #E4EEFB; /* correctif 10a-bis-r1 (R4) : fond de page, plus bleu ; --bg reste la surface claire des listes */
  --bg: #F8FEFF; --card: #FFFFFF; --card-2: #EEF8FA; --ink: #141717; --ink-2: #5C6B70; --ink-3: #93A1A6;
  --line: #D9E6EA; --line-2: #E9F1F4; --outside: #F1F6F8;
  --accent: #1764D8; --accent-soft: #E4EEFB; --accent-ink: #0F4FAE;
  --alert: #D92124; --alert-bg: #FDECEC; --warn: #B86E00; --warn-bg: #FFF3DF; --ok: #1E8A4C; --ok-bg: #E6F5EC;
  --font: "Satoshi", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --r-card: 12px; --r-slot: 8px; --r-pill: 999px;
  --shadow: 0 1px 2px rgba(20,23,23,.04), 0 6px 18px rgba(23,100,216,.06);
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--fond); color: var(--ink); font-family: var(--font); font-size: 14px; line-height: 1.45; }
a { color: var(--accent); }
a:hover { color: var(--accent-ink); }
button, input, select, textarea { font: inherit; }
h1 { font-size: 20px; font-weight: 700; margin: 0; letter-spacing: -.01em; }
h2 { font-size: 16px; font-weight: 700; margin: 0 0 .5rem; }
h3 { font-size: 12px; font-weight: 700; margin: .75rem 0 .35rem; color: var(--ink-3); letter-spacing: .04em; text-transform: uppercase; }

/* ---------- onglets bas (salariée) ---------- */
.onglets-bas { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; height: 60px; display: flex; background: var(--card); border-top: 1px solid var(--line-2); }
.onglets-bas a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; font-size: 12px; color: var(--ink-2); text-decoration: none; }
.onglets-bas a::before { content: ""; width: 22px; height: 3px; border-radius: 2px; }
.onglets-bas a[aria-current="page"] { color: var(--accent); font-weight: 700; }
.onglets-bas a[aria-current="page"]::before { background: var(--accent); }
.onglets-bas ~ main { padding-bottom: 4rem; }

/* ---------- corps de page : la largeur de lecture est celle de <main>, la barre prend tout ---------- */
.titre-page, main, body > nav:last-of-type { max-width: 40rem; margin-left: auto; margin-right: auto; padding-left: 1.25rem; padding-right: 1.25rem; }
body.large > .titre-page, body.large > main, body.large > nav:last-of-type { max-width: 90rem; }
.titre-page { margin-top: 1.5rem; }
main { margin-top: 1rem; margin-bottom: 1.5rem; }
body > nav:last-of-type { margin-top: 2.5rem; margin-bottom: 1.5rem; font-size: .85rem; color: var(--ink-3); }
body > nav:last-of-type button { min-height: 32px; padding: 0 12px; font-weight: 500; }

/* ---------- formulaires et boutons ---------- */
form p { margin: 0 0 .9rem; }
label { display: block; font-weight: 500; color: var(--ink-2); font-size: 13px; margin-bottom: .35rem; }
input[type="email"], input[type="text"], input[type="date"], input[type="number"], input[type="file"], select, textarea { width: 100%; min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--r-slot); background: var(--card); color: var(--ink); font-size: 15px; }
textarea { padding: 10px 12px; }
input[type="number"], input[type="file"] { width: auto; }
/* Brique 5a : le champ des heures sans solde suit la largeur des autres champs du formulaire d'absence ; l'aide passe dessous. */
.formulaire-absence input[type="number"] { width: 100%; }
.formulaire-absence .aide { display: block; }
button { font: inherit; cursor: pointer; }
.bouton { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 18px; border-radius: var(--r-pill); border: 1px solid var(--accent); background: var(--accent); color: #fff; font-weight: 700; text-decoration: none; cursor: pointer; }
.bouton:hover { background: var(--accent-ink); border-color: var(--accent-ink); color: #fff; }
.bouton.contour { background: var(--card); color: var(--ink); border-color: var(--line); font-weight: 500; }
.bouton.contour:hover { background: var(--card-2); color: var(--ink); border-color: var(--line); }
button:disabled { background: var(--line-2); border-color: var(--line); color: var(--ink-3); cursor: not-allowed; }
.aide { color: var(--ink-2); font-size: 13px; margin: .5rem 0 0; }
.errorlist { color: var(--alert); margin: 0 0 .5rem; padding-left: 1.1rem; }

/* ---------- messages Django (quatre niveaux) et bandeaux statiques ---------- */
.messages { list-style: none; padding: 0; margin: 0 0 1.25rem; }
.messages li, .message, .bandeau { border-radius: var(--r-slot); padding: 12px 14px; margin: 0 0 .6rem; background: var(--accent-soft); color: var(--accent-ink); line-height: 1.4; border: 1px solid color-mix(in srgb, currentColor 22%, transparent); }
.messages li.success { background: var(--ok-bg); color: var(--ok); }
.messages li.info, .messages li.debug { background: var(--accent-soft); color: var(--accent-ink); }
.messages li.warning, .bandeau.avertissement { background: var(--warn-bg); color: var(--warn); }
.messages li.error, .bandeau.erreur { background: var(--alert-bg); color: var(--alert); }

/* ---------- cartes, pastilles et listes (tableau de bord) ---------- */
.cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: start; }
.carte { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: 18px 20px; }
.carte .sous { margin: -.25rem 0 .75rem; color: var(--ink-2); font-size: 13px; }
.carte p { margin: .35rem 0; }
.carte ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.carte li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--r-slot); }
.carte li.demande { flex-direction: column; align-items: flex-start; gap: 3px; }
.carte .nom { font-weight: 500; }
.carte .detail, .carte .vide { color: var(--ink-2); font-size: 13px; }
.carte .reserve { color: var(--warn); font-size: 12px; }
.carte details summary { cursor: pointer; color: var(--ink-2); font-size: 13px; margin: .75rem 0 .35rem; }
.carte .bouton, .carte > a { display: inline-flex; margin-top: .9rem; }
.pastille { display: inline-block; padding: 3px 10px; border-radius: var(--r-pill); font-size: 12.5px; font-weight: 500; background: var(--line-2); color: var(--ink-2); white-space: nowrap; }
.pastille.ok { background: var(--ok-bg); color: var(--ok); }
.pastille.attente { background: var(--warn-bg); color: var(--warn); }
.pastille.refuse { background: var(--alert-bg); color: var(--alert); }
.pastille.neutre { background: var(--line-2); color: var(--ink-2); }
.code-etat { color: var(--ink-3); font-weight: 700; letter-spacing: .06em; margin: 0 0 .5rem; }
/* Brique notifications-1a : carte « Aussi par mail » — la case est un bouton de formulaire (sans script). */
.carte.mails form { margin: 0; min-width: 0; }
.carte.mails .case { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--ink); text-align: left; cursor: pointer; }
.carte.mails .case .boite { width: 20px; height: 20px; flex-shrink: 0; border: 2px solid var(--ink-3); border-radius: 5px; background: var(--card); display: flex; align-items: center; justify-content: center; }
.carte.mails .case.cochee .boite { background: var(--accent); border-color: var(--accent); }
.carte.mails .case.cochee .boite::after { content: ""; width: 5px; height: 10px; margin-top: -2px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.carte.mails .case:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-slot); }
.carte.mails .qui { display: flex; flex-direction: column; min-width: 0; }
.carte.mails .qui strong { font-weight: 500; }
.carte.mails .qui span { font-size: 12px; color: var(--ink-2); }
.carte.mails .note { margin-top: .75rem; font-size: 12px; color: var(--ink-2); }

/* ---------- espace salariée : « Mes jours » en grille (brique 6b, C6.8 / C6.9) ---------- */
.titre-page.chevrons { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.titre-page.chevrons h1 { flex: 1; text-align: center; font-size: 18px; }
.chevron { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--card); color: var(--ink); font-size: 22px; line-height: 1; text-decoration: none; }
.chevron:hover { background: var(--card-2); color: var(--ink); }
.version { color: var(--ink-2); font-size: 13px; margin: 0 0 .75rem; }
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.grille-mois { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 4px; margin: 0 -4px; }
.grille-mois th { padding: 0 0 4px; font-size: 12px; font-weight: 500; color: var(--ink-3); }
.grille-mois td { padding: 0; vertical-align: top; }
.case { display: flex; flex-direction: column; align-items: center; justify-content: space-between; width: 100%; min-height: 3rem; padding: 4px 2px; border: 1px solid var(--line); border-radius: var(--r-slot); background: var(--card); color: var(--ink); font: inherit; font-size: 12px; line-height: 1.2; cursor: pointer; }
.case .num { font-weight: 700; }
.case .code { font-size: 11px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.case .marqueurs { display: flex; gap: 4px; min-height: 1em; font-size: 14px; font-weight: 700; line-height: 1; }
.moins { color: var(--alert); }
.plus { color: var(--ok); }
.case.brique { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 35%, transparent); color: var(--accent-ink); } /* correctif 10a-bis-r1 : même bleu que le fond de page, d'où le contour */
.case.absence-bloquante { background: var(--alert-bg); border-color: var(--alert-bg); color: var(--alert); }
.case.absence-partielle { background: var(--warn-bg); border-color: var(--warn-bg); color: var(--warn); }
.case.attente { background: var(--card); border: 1px dashed var(--accent); color: var(--accent-ink); }
.case.ecole { background: var(--card-2); border-color: var(--line); color: var(--ink-2); }
.case.ferie, .case.ferme { background: var(--card-2); border-color: var(--line); color: var(--ink-3); }
.case.vide { color: var(--ink-2); }
td.voisin .case { opacity: .55; border-style: dashed; }
.case[aria-current="date"] { box-shadow: 0 0 0 2px var(--accent); }
.case[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--ink); }
.fiche { margin: 1rem 0 0; padding: 14px 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); }
.fiche h2 { margin: 0 0 .5rem; font-size: 15px; }
.fiche p { margin: .25rem 0; }
.fiche .absence-bloquante { color: var(--alert); }
.fiche .absence-partielle { color: var(--warn); }
.fiche .raison { color: var(--ink-2); font-size: 13px; }
.note { color: var(--ink-2); font-size: 13px; margin: .75rem 0 0; }
.legende { display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 6px 10px; align-items: center; margin: 1.25rem 0 0; font-size: 13px; color: var(--ink-2); }
.legende dt, .legende dd { margin: 0; }
.legende .case { width: 36px; min-height: 0; padding: 3px 0; font-size: 11px; cursor: default; }
.legende .moins, .legende .plus { display: inline-block; width: 36px; text-align: center; font-size: 16px; font-weight: 700; }

/* ---------- espace salariée : « Mes absences », « Nouvelle absence », profil (brique 6b, C6.19) ---------- */
.actions { margin: 0 0 1rem; }
details.mois { margin: 0 0 .75rem; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--card); }
details.mois > summary { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; font-weight: 700; cursor: pointer; list-style: none; }
details.mois > summary::-webkit-details-marker { display: none; }
details.mois > summary::after { content: "›"; color: var(--ink-3); font-size: 20px; line-height: 1; transform: rotate(90deg); transition: transform .15s; }
details.mois[open] > summary::after { transform: rotate(-90deg); }
article.absence { margin: 0 8px 8px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--r-slot); background: var(--bg); }
article.absence p { margin: 0 0 .35rem; }
article.absence .dates { font-weight: 700; }
article.absence .etat { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
article.absence .detail { color: var(--ink-2); font-size: 13px; }
article.absence .vide { color: var(--ink-3); }
article.absence form { margin: .5rem 0 0; }
dialog { width: min(92vw, 24rem); padding: 20px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--card); color: var(--ink); box-shadow: var(--shadow); }
dialog::backdrop { background: rgba(20, 23, 23, .45); }
dialog p { margin: 0 0 1rem; font-weight: 700; }
dialog form { display: flex; flex-direction: column; gap: 8px; }
optgroup { font-weight: 700; color: var(--ink-2); }
option { color: var(--ink); font-weight: 400; }
.retour { margin-top: 1.25rem; }
.carte h2 { margin: 0 0 .25rem; }

/* 6b-ter — accueil de l'espace */
.espace-entete { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.portrait { width: 128px; height: 128px; border-radius: var(--r-pill); object-fit: cover; }
.portrait.initiales { display: grid; place-items: center; background: var(--card); color: var(--accent-ink); font-weight: 700; font-size: 40px; }
.tuiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 30rem; margin: 0 auto; }
.tuile { display: grid; place-items: center; min-height: 96px; padding: 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); color: var(--ink); font-weight: 700; text-decoration: none; }
/* brique 10a-bis (D5, D13) : tuiles d'accueil en objets dessinés, icône seule */
.tuile { min-height: 132px; }
.tuile svg { display: block; width: 88px; height: 88px; }

/* --- 6c : écrans de gestion (absences, présences, personnes) --- */
table.tableau { border-collapse: collapse; width: 100%; font-size: 13px; margin-bottom: 2rem; }
table.tableau th, table.tableau td { border: 1px solid var(--line); padding: 0.35rem 0.5rem; text-align: left; vertical-align: top; }
table.tableau th { background: rgba(0,0,0,.04); }
table.tableau td.vide { color: #888; }
.corrigee { font-weight: 600; }
form.enligne { display: inline; }
.conflit { display: block; margin-top: 0.25rem; font-size: 0.82rem; font-weight: 600; color: #a8342e; }
.pastille.signal { background: transparent; border: 1px solid var(--alert); color: var(--alert); }
body.ecran-presences table.tableau { font-size: 0.82rem; table-layout: fixed; margin: 0 0 2rem; }
body.ecran-presences caption { text-align: left; font-weight: 600; padding: 0.4rem 0; }
body.ecran-presences table.tableau th, body.ecran-presences table.tableau td { border: 1px solid rgba(128,128,128,.35); padding: 0.35rem 0.4rem; vertical-align: top; overflow-wrap: anywhere; }
body.ecran-presences thead th { text-align: center; font-weight: 600; }
body.ecran-presences thead th .compte { font-weight: 400; color: #666; font-size: 0.78rem; }
body.ecran-presences tbody th { text-align: left; width: 9rem; font-weight: 600; }
body.ecran-presences table.tableau th.coin { border: 0; }
body.ecran-presences .we { background: rgba(128,128,128,.06); }
body.ecran-presences .present { background: rgba(68,170,119,.16); }
body.ecran-presences .present-atypique { background: rgba(68,170,119,.16); border-left: 3px solid #c93; }
body.ecran-presences .atypique { background: rgba(204,153,51,.14); }
body.ecran-presences .ferme { background: rgba(128,128,128,.16); color: #555; }
body.ecran-presences td.nonplan { color: #999; text-align: center; }
body.ecran-presences td.inconnu { color: #999; text-align: center; }
body.ecran-presences .noncouvert {
  background: repeating-linear-gradient(45deg, #eee, #eee 4px, #fff 4px, #fff 8px);
}
body.ecran-presences td.noncouvert, body.ecran-presences th.noncouvert { color: #888; font-size: 0.74rem; text-align: center; }
body.ecran-presences .legende-presences { font-size: 0.8rem; color: #555; display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
body.ecran-presences .case-legende { display: inline-block; width: 0.85rem; height: 0.85rem; border: 1px solid rgba(128,128,128,.5); vertical-align: -2px; margin-right: 0.25rem; }
body.ecran-presences .sources { font-size: 0.85rem; }
body.ecran-personnes td.change { font-weight: 600; }

/* --- 6b-bis : justificatifs (dépôt replié, nom tronqué) --- */
details.piece { margin: .5rem 0 0; }
details.piece > summary { cursor: pointer; color: var(--accent); font-size: 13px; font-weight: 500; }
details.piece form { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: .5rem 0 0; }
.nom-piece { display: inline-block; max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
body.ecran-absences table.tableau td.piece { min-width: 10rem; }
body.ecran-absences table.tableau td.piece > a, body.ecran-absences table.tableau td.piece > .bouton { margin: 0 6px 4px 0; }
body.ecran-absences table.tableau td.piece .bouton { min-height: 32px; padding: 0 10px; }
/* Brique note-1 (E1, E2, E3) : la carte « Mémos pour l'envoi » (44 rem), les lignes automatiques sur fond ambre pâle,
   l'encart de la fenêtre d'envoi, qui s'élargit à 30 rem quand elle porte des mémos. Aucune @media. */
body.ecran-absences .carte.memos { max-width: 44rem; margin: 0 0 1.5rem; }
body.ecran-absences .carte.memos ul { margin: 0 0 .25rem; }
body.ecran-absences .carte.memos li.auto { background: #FFFBF3; border-color: color-mix(in srgb, var(--warn) 35%, transparent); }
body.ecran-absences .carte.memos .texte { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
body.ecran-absences .carte.memos .bouton { margin-top: 0; }
body.ecran-absences .carte.memos .bouton.petit { min-height: 32px; padding: 0 10px; flex: none; }
body.ecran-absences .carte.memos details form { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 0; }
body.ecran-absences .carte.memos details form input[type="text"] { max-width: 100%; }
body.ecran-absences .carte.memos details form .aide { margin: 0; }
#dlg-envoi.avec-memos { width: min(92vw, 30rem); }
.memos-encart { margin: 0 0 1rem; padding: 12px 14px; border-radius: var(--r-slot); background: var(--warn-bg); color: var(--warn); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); }
.memos-encart p { margin: 0 0 .5rem; }
.memos-encart ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.memos-encart li { display: flex; flex-direction: column; gap: 1px; color: var(--ink); font-weight: 400; font-size: 13.5px; }
.memos-encart .detail, .memos-encart .rappel { color: var(--ink-2); font-size: 12px; font-weight: 400; }
.memos-encart .rappel { margin: .6rem 0 0; }
.memos-encart p.suite { margin-top: .75rem; }

/* ---------- vaisselle-1 : couverts dans la case et la fiche de « Mes jours », légende derrière « i » ---------- */
.version-ligne { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 .75rem; }
.version-ligne .version { margin: 0; }
.version-ligne .info { flex: none; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--card); color: var(--ink-2); font-family: Georgia, "Times New Roman", serif; font-style: italic; font-weight: 700; font-size: 17px; line-height: 1; cursor: pointer; }
.version-ligne .info:hover { background: var(--card-2); color: var(--ink); }
.case .marqueurs .vaisselle, .legende .vaisselle { display: inline-flex; align-items: center; justify-content: center; }
.case .marqueurs .vaisselle svg, .legende .vaisselle svg { width: 12px; height: 12px; stroke: var(--accent); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.legende .vaisselle { width: 36px; }
.legende .vaisselle svg { width: 14px; height: 14px; }
dialog.feuillet { width: 100%; max-width: 40rem; margin: auto auto 0; padding: 14px 20px 24px; border-radius: 16px 16px 0 0; }
dialog.feuillet h2 { margin: 0 0 .75rem; font-size: 16px; }
dialog.feuillet .legende { margin: 0 0 1rem; }
dialog.feuillet form { margin: 0; }

/* ---------- la seule requête de largeur de la coquille (brique 6b, D6b.9) ---------- */
@media (min-width: 48rem) {
  .case { min-height: 4.25rem; }
  .fiche { padding: 18px 20px; }
  .titre-page.chevrons h1 { font-size: 20px; }
}

/* ---------- accueil-2 (D-esp.4) : « Bonjour » et la date, visages sans carte, frise du jour ---------- */
.accueil-entete { flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; text-align: left; }
.accueil-entete h1 { margin: 0; }
.accueil-entete .date { margin: 0; color: var(--ink-2); font-size: 13px; }
.prochain { margin: 0 0 .5rem; color: var(--accent-ink); font-weight: 700; }
.visages { list-style: none; margin: 0 0 1rem; padding: 6px 0; display: flex; flex-wrap: wrap; justify-content: space-around; gap: 12px 6px; }
.visage { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 72px; }
.visage .rond { position: relative; width: 52px; height: 52px; border-radius: var(--r-pill); display: grid; place-items: center; background: var(--card); color: var(--accent-ink); font-weight: 700; font-size: 17px; box-shadow: 0 0 0 3px var(--card); }
.visage .rond img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.visage.praticien .rond { color: #fff; }
.visage.absente .rond { color: var(--ink-3); }
.visage.absente .rond img { opacity: .6; filter: grayscale(1); }
.visage .badge { position: absolute; right: -4px; bottom: -4px; width: 20px; height: 20px; border-radius: var(--r-pill); border: 2px solid var(--fond); display: grid; place-items: center; color: #fff; font-size: 15px; font-weight: 700; line-height: 1; }
.visage .badge svg { width: 12px; height: 12px; stroke: #fff; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.visage.renfort .badge { background: var(--ok); }
.visage.administratif .badge { background: var(--accent-ink); }
.visage.absente .badge { background: var(--alert); }
.visage .nom { font-size: 11.5px; color: var(--ink-2); white-space: nowrap; }
.visage.praticien .nom { color: var(--ink); font-weight: 700; }
.frise { margin: 0 0 1rem; padding: 14px 18px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); }
.frise ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.frise .moment { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: 10px; align-items: baseline; } /* 5rem : « 9h – 9h30 » (correctif consignes-1-r1) */
.frise .heure { font-weight: 700; color: var(--ink-2); font-size: 13px; }
.frise .debut .texte { font-weight: 700; }
.frise .vaisselle .heure, .frise .vaisselle .texte { color: var(--accent-ink); font-weight: 700; }
.frise .qui { display: inline-block; padding: 1px 9px; border-radius: var(--r-pill); background: var(--accent); color: #fff; font-size: 12px; }
.frise .fin .texte { color: var(--ink-2); }
/* consignes-1 (D, E2) : routines et consignes dans la frise, rond à cocher (bouton de formulaire, aucun script) */
.frise .element { grid-template-columns: 5rem minmax(0, 1fr) auto; align-items: center; }
.frise .element .corps { display: flex; flex-direction: column; min-width: 0; }
.frise .element .texte { overflow-wrap: anywhere; }
.frise .element .sous-titre { color: var(--ink-3); font-size: 12px; }
.frise .element.fait .texte { color: var(--ink-2); text-decoration: line-through; text-decoration-color: var(--ink-3); }
.frise .element.fait .sous-titre { color: var(--ok); }
.frise .coche { margin: 0; }
.frise .coche button { position: relative; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 2px solid var(--line); border-radius: var(--r-pill); background: var(--card); color: transparent; cursor: pointer; }
.frise .coche button::after { content: ""; position: absolute; inset: -9px; border-radius: var(--r-pill); } /* 48 px au doigt : 30 px intérieurs + 2 × 9 (relecture L6) */
.frise .coche button:hover { border-color: var(--ok); color: var(--ok-bg); }
.frise .coche button[aria-pressed="true"] { border-color: var(--ok); background: var(--ok); color: #fff; }
.frise .coche svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
/* correctif consignes-1-r1 (Dr1.1, Dr1.4, E6, R10, R11) : « 9h – 9h30 » sur une ligne ; arrivée du praticien ; rond coché =
   <summary> d'un <details> qui s'ouvre sous la ligne (« Décocher ? … Oui, décocher »), aucun script */
.frise .heure { white-space: nowrap; }
.frise .arrivee .texte { font-weight: 700; color: var(--accent-ink); }
.frise .element { position: relative; }
.frise .decocher > summary { position: relative; display: grid; place-items: center; width: 34px; height: 34px; border: 2px solid var(--ok); border-radius: var(--r-pill); background: var(--ok); color: #fff; cursor: pointer; list-style: none; }
.frise .decocher > summary::-webkit-details-marker { display: none; }
.frise .decocher > summary::after { content: ""; position: absolute; inset: -9px; border-radius: var(--r-pill); }
.frise .decocher > summary svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.frise .decocher[open] > summary { box-shadow: 0 0 0 3px var(--ok-bg); }
.frise .decocher .confirmer { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px 12px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-slot); box-shadow: var(--shadow); }
.frise .decocher .confirmer p { margin: 0; }
.frise .decocher .confirmer form { margin: 0; }
.frise .decocher .confirmer .aide { flex-basis: 100%; margin: 0; font-size: 12px; }

/* ---------- correctif accueil-2-r1 : la fiche du jour en signes (maquette A), et leur légende ---------- */
.fiche .ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; min-height: 24px; }
.signe { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; }
.signe svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.signe-binome { color: var(--accent-ink); }
.signe-vaisselle { color: var(--accent); }
.signe-renfort { color: var(--ok); font-size: 20px; font-weight: 700; line-height: 1; }
.signe-administratif { color: var(--ink-2); }
.signe-absente { color: var(--alert); }
.signe-consigne { color: var(--warn); } /* consignes-1 (G) */
/* consignes-1 (G, relecture L6) : signe, moment, texte ; l'auteur sous le texte ; un mot long passe à la ligne. */
.fiche .ligne-consigne { display: grid; grid-template-columns: auto 4.8rem minmax(0, 1fr); align-items: baseline; gap: 2px 10px; }
.fiche .ligne-consigne .signe { align-self: start; }
.fiche .ligne-consigne > span:not(.signe) { min-width: 0; overflow-wrap: anywhere; }
.fiche .ligne-consigne .precision { grid-column: 3; }
.fiche .quand { font-weight: 700; color: var(--ink-2); font-size: 13px; white-space: nowrap; }
.fiche .vous { padding: 1px 9px; border-radius: var(--r-pill); background: var(--accent); color: #fff; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.fiche .precision { color: var(--ink-2); font-size: 13px; }
.legende .signe { width: 36px; }
dialog.feuillet h3 { margin: 0 0 .5rem; font-size: 14px; }

/* ---------- protheses-1 (Dp.8, annexe A de la fiche) : « Prothèses à sortir » dans la frise — volet <details> sans script,
   petites coches (formulaires POST, 48 px au doigt), grand rond en reflet (jamais un bouton, deux états : vide / coché) ;
   la même ligne sert la carte du tableau de bord (`.carte.protheses`). Aucune requête de média. ---------- */
.frise .moment.protheses { display: block; }
.frise .moment.protheses > .heure { display: inline-block; width: 5rem; }
.frise .moment.protheses > .texte { color: var(--ink-2); }
.frise details.pc > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 5rem minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.frise details.pc > summary::-webkit-details-marker { display: none; }
.frise details.pc .corps { display: flex; flex-direction: column; min-width: 0; }
.frise details.pc .texte { font-weight: 700; overflow-wrap: anywhere; }
.frise details.pc .texte .chev { display: inline-block; margin-left: 6px; color: var(--ink-3); font-weight: 400; font-size: 16px; line-height: 1; transform: rotate(90deg); }
.frise details.pc[open] .texte .chev { transform: rotate(-90deg); }
.frise details.pc .sous-titre { color: var(--ink-3); font-size: 12px; }
.frise details.pc.fait .texte { color: var(--ink-2); text-decoration: line-through; text-decoration-color: var(--ink-3); }
.frise details.pc.fait .sous-titre { color: var(--ok); }
.frise details.pc .grande { position: relative; display: grid; place-items: center; width: 34px; height: 34px; border: 2px solid var(--line); border-radius: var(--r-pill); background: var(--card); color: transparent; }
.frise details.pc .grande.ok { border-color: var(--ok); background: var(--ok); color: #fff; }
.frise details.pc .grande svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.frise details.pc .liste { list-style: none; margin: 10px 0 2px 5rem; padding: 0 0 0 10px; display: flex; flex-direction: column; gap: 9px; }
.frise details.pc .liste li { display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.frise details.pc .liste .heure { font-size: 12px; }
.frise details.pc .liste .patient { font-weight: 600; overflow-wrap: anywhere; }
.frise details.pc .liste li.sortie .patient { color: var(--ink-2); text-decoration: line-through; text-decoration-color: var(--ink-3); font-weight: 500; }
.frise details.pc .petite { margin: 0; }
.frise details.pc .petite button { position: relative; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 2px solid var(--line); border-radius: var(--r-pill); background: var(--card); color: transparent; cursor: pointer; }
.frise details.pc .petite button::after { content: ""; position: absolute; inset: -11px; border-radius: var(--r-pill); } /* 48 px au doigt : 26 + 2 × 11 */
.frise details.pc .petite button:hover { border-color: var(--ok); color: var(--ok-bg); }
.frise details.pc .petite button[aria-pressed="true"] { border-color: var(--ok); background: var(--ok); color: #fff; }
.frise details.pc .petite svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.frise details.pc .praticien-titre { margin: 4px 0 0; font-size: 11.5px; font-weight: 700; color: var(--ink-3); letter-spacing: .04em; text-transform: uppercase; grid-column: 1 / -1; }
.frise details.pc .phrase { margin: 0; color: var(--ink-2); grid-column: 1 / -1; }
.frise details.pc .provenance { margin: 8px 0 0; font-size: 11.5px; color: var(--ink-3); grid-column: 1 / -1; }
.carte.protheses .frise { margin: 0; padding: 0; background: none; border: 0; }
.carte.protheses .frise li { padding: 0; background: none; border: 0; border-radius: 0; } /* pas les boîtes des cartes (`.carte li`) */
.carte.protheses .frise details.pc > summary { margin: 0; color: inherit; font-size: inherit; } /* ni le résumé des cartes */
.carte.protheses .sous { margin: 0 0 8px; }

/* ---------- consignes-1 : page « Consignes » (principale, cabinet) — formulaires en <details>, aucun script (E1) ----------
   Toutes les règles sont sous `.ecran-consignes` : l'accueil porte aussi des `li.routine` (frise) — relecture L6. */
.ecran-consignes .titre-consignes { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; scroll-margin-top: calc(var(--barre-h) + 12px); }
.ecran-consignes .titre-consignes h1 { margin: 0; }
.ecran-consignes .titre-consignes .date { margin: 0; color: var(--ink-2); }
.ecran-consignes .actions-consignes { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; margin: 0 0 16px; }
.ecran-consignes .actions-consignes > details { flex: 1 1 22rem; max-width: 40rem; }
.ecran-consignes .actions-consignes > details:not([open]) { flex: 0 0 auto; }
.ecran-consignes details.formulaire { scroll-margin-top: calc(var(--barre-h) + 12px); }
.ecran-consignes details.formulaire > summary { list-style: none; cursor: pointer; }
.ecran-consignes details.formulaire > summary::-webkit-details-marker { display: none; }
.ecran-consignes details.formulaire[open] > summary { margin-bottom: 8px; }
.ecran-consignes .bouton.petit { min-height: 32px; padding: 0 12px; font-size: 13px; }
.ecran-consignes .bouton.danger { background: var(--alert); border-color: var(--alert); }
.ecran-consignes .formulaire-consigne { display: flex; flex-direction: column; gap: 12px; }
.ecran-consignes .formulaire-consigne .champ { display: flex; flex-direction: column; gap: 4px; }
.ecran-consignes .formulaire-consigne fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.ecran-consignes .formulaire-consigne legend { padding: 0; margin: 0 0 .35rem; font-weight: 500; color: var(--ink-2); font-size: 13px; }
.ecran-consignes .formulaire-consigne fieldset > div { display: flex; flex-wrap: wrap; gap: 8px; }
.ecran-consignes .formulaire-consigne fieldset > div > div { display: contents; }
.ecran-consignes .formulaire-consigne fieldset label { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; margin: 0; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--card); color: var(--ink); font-size: 13.5px; cursor: pointer; }
.ecran-consignes .formulaire-consigne fieldset label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); font-weight: 700; }
.ecran-consignes .formulaire-consigne fieldset input { accent-color: var(--accent); margin: 0; }
.ecran-consignes .formulaire-consigne input[type="time"] { width: auto; min-height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-slot); background: var(--card); }
.ecran-consignes .formulaire-consigne .champ-tous_praticiens { flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 8px; }
.ecran-consignes .formulaire-consigne .champ-tous_praticiens label { margin: 0; }
.ecran-consignes .formulaire-consigne .champ-tous_praticiens input { width: auto; margin: 0; accent-color: var(--accent); }
.ecran-consignes .formulaire-consigne .aide-patient { color: var(--warn); font-weight: 700; margin: 0; }
.ecran-consignes .formulaire-consigne .erreur { margin: 0; color: var(--alert); font-size: 13px; font-weight: 700; }
.ecran-consignes .colonnes-consignes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); gap: 16px; align-items: start; }
.ecran-consignes .colonne-principale { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ecran-consignes .carte h2 { margin: 0; font-size: 17px; }
.ecran-consignes .entete-carte { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-bottom: 10px; }
.ecran-consignes .compte { color: var(--ink-2); font-size: 12.5px; font-weight: 700; }
.ecran-consignes .vide { color: var(--ink-3); font-size: 13px; }
/* Les listes de la page ne sont pas les pastilles de `.carte li` (tableau de bord) : lignes à filet, alignées à gauche. */
.ecran-consignes .carte li { display: block; padding: 0; background: none; border: 0; border-radius: 0; }
.ecran-consignes .salariees-du-jour { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 12px; }
.ecran-consignes .salariee-du-jour { border: 1px solid var(--line-2); border-radius: var(--r-slot); padding: 10px 12px; background: var(--bg); min-width: 0; }
.ecran-consignes .salariee-du-jour h3 { margin: 0 0 6px; font-size: 14px; display: flex; flex-wrap: wrap; gap: 0 6px; align-items: baseline; }
.ecran-consignes .salariee-du-jour h3 .compte { margin-left: auto; }
.ecran-consignes .poste { color: var(--ink-2); font-weight: 400; }
.ecran-consignes .salariee-du-jour ul, .ecran-consignes .liste-consignes, .ecran-consignes .liste-routines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.ecran-consignes .salariee-du-jour ul { gap: 6px; }
.ecran-consignes .salariee-du-jour li.element { display: grid; grid-template-columns: 14px 5.2rem minmax(0, 1fr) auto; column-gap: 8px; align-items: baseline; font-size: 13px; }
.ecran-consignes .salariee-du-jour .etat { width: 14px; height: 14px; align-self: center; border-radius: var(--r-pill); border: 2px solid var(--ink-3); box-sizing: border-box; }
.ecran-consignes .salariee-du-jour .fait .etat { border-color: var(--ok); background: var(--ok); }
.ecran-consignes .salariee-du-jour .heure-faite, .ecran-consignes .salariee-du-jour .decoche { grid-column: 3; white-space: normal; } /* sous le texte : la colonne du texte garde sa largeur */
.ecran-consignes .quand { color: var(--ink-2); font-weight: 700; font-size: 13px; white-space: nowrap; }
.ecran-consignes .texte { min-width: 0; overflow-wrap: anywhere; }
.ecran-consignes .heure-faite { color: var(--ok); font-weight: 700; white-space: nowrap; font-size: 12.5px; }
.ecran-consignes .pastille-consigne { display: inline-block; white-space: nowrap; padding: 0 6px; border-radius: var(--r-pill); background: var(--warn-bg); color: var(--warn); font-size: 11.5px; font-weight: 700; }
.ecran-consignes .jour-a-venir { margin: 14px 0 6px; font-size: 14px; }
.ecran-consignes .liste-consignes > li, .ecran-consignes .liste-routines > li { display: grid; grid-template-columns: 5.2rem minmax(0, 1fr); column-gap: 10px; row-gap: 4px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--line-2); font-size: 13.5px; }
.ecran-consignes .ligne-bas { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.ecran-consignes .consigne-a-venir .pour { font-weight: 700; }
.ecran-consignes .consigne-a-venir .auteur { color: var(--ink-2); }
.ecran-consignes .consigne-a-venir .drapeau { padding: 1px 8px; border-radius: var(--r-pill); background: var(--warn-bg); color: var(--warn); font-size: 12px; font-weight: 700; }
.ecran-consignes .actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px; margin-left: auto; }
.ecran-consignes .actions:has(details[open]) { flex: 1 1 100%; margin-left: 0; }
.ecran-consignes .actions details[open] { flex: 1 1 100%; }
.ecran-consignes li:has(details.formulaire[open]) > .ligne-bas { grid-column: 1 / -1; }
.ecran-consignes .decoche { color: var(--warn); font-size: 12.5px; white-space: nowrap; }
.ecran-consignes .cible { color: var(--accent-ink); font-weight: 700; font-size: 12.5px; }
.ecran-consignes .poste-titre { margin: 14px 0 4px; font-size: 13px; font-weight: 700; color: var(--accent-ink); text-transform: uppercase; letter-spacing: .04em; }

@media print {
  .onglets-bas, body > nav:last-of-type { display: none; }
}

/* ---------- brique pointage-1a : les écrans de la pointeuse ---------- */
/* Placés après le bloc d'impression : les tests des blocs consignes-1 et protheses-1 lisent leurs tranches (A2). Aucune
   requête de largeur. Écrans du téléphone (1, 2, 11, 13, 14) : une carte, l'heure en grand, deux grands boutons. */
body.ecran-pointeuse .pointeuse-carte { background: var(--card); border-radius: var(--r-card); box-shadow: var(--shadow); padding: 20px 18px; text-align: center; }
body.ecran-pointeuse .pointeuse-carte p { margin: .35rem 0; }
body.ecran-pointeuse .pointeuse-carte .libelle { color: var(--ink-2); font-size: 13px; }
body.ecran-pointeuse .heure-pointee { font-size: 40px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; color: var(--ink); }
body.ecran-pointeuse .pointeuse-carte .detail, body.ecran-pointeuse .pointeuse-carte .journee { color: var(--ink-2); }
body.ecran-pointeuse .pointeuse-carte .bravo { color: var(--ok); font-weight: 700; }
body.ecran-pointeuse .pointeuse-carte .remplace, body.ecran-pointeuse .pointeuse-carte .note { color: var(--ink-3); font-size: 13px; }
body.ecran-pointeuse .pointeuse-carte .nom { font-size: 18px; font-weight: 700; }
body.ecran-pointeuse .pointeuse-choix { margin-top: 1.25rem; text-align: center; }
body.ecran-pointeuse .pointeuse-choix .boutons { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
body.ecran-pointeuse .pointeuse-choix .boutons .bouton { min-height: 64px; font-size: 18px; }
body.ecran-pointeuse .pointeuse-choix .annuler { margin-top: 1rem; }
body.ecran-pointeuse .pointeuse-resume { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 1rem 0 0; }
body.ecran-pointeuse .pointeuse-resume div { background: var(--card); border-radius: var(--r-card); padding: 12px 14px; }
body.ecran-pointeuse .pointeuse-resume dt { color: var(--ink-2); font-size: 13px; }
body.ecran-pointeuse .pointeuse-resume dd { margin: .2rem 0 0; }
body.ecran-pointeuse .pointeuse-resume .heure { font-weight: 700; }
body.ecran-pointeuse .pointeuse-resume .etat { color: var(--ink-2); font-size: 13px; }
body.ecran-pointeuse .pointeuse-retour { margin-top: 1.25rem; text-align: center; }
/* Écran 12 : le bandeau du contact sur la page de connexion. */
.bandeau-pointeuse { margin: 0 0 1rem; padding: 12px 14px; border-radius: var(--r-card); background: var(--accent-soft); color: var(--accent-ink); }
.bandeau-pointeuse p { margin: .15rem 0; }
/* Écrans 9, 15 et 16 : « Pointages du jour », « Cartes », la boîte de saisie — principale et cabinet. Aucune requête de
   largeur : la table défile dans sa carte, les deux cartes de « Cartes » passent l'une sous l'autre d'elles-mêmes. */
body.ecran-pointages .sous-titre { margin: .25rem 0 0; color: var(--ink-2); font-size: 13px; text-align: center; }
body.ecran-pointages .pointages-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 1.25rem 0 1rem; }
body.ecran-pointages .pointages-tete .bouton { margin-left: auto; }
body.ecran-pointages .pastille.bleu { background: var(--accent-soft); color: var(--accent-ink); }
body.ecran-pointages .pointages-tete .pastille.bleu { background: var(--card); } /* le bleu pâle est celui du fond de page */
body.ecran-pointages .carte { margin: 0 0 1rem; }
body.ecran-pointages .carte .bouton { margin-top: 0; }
body.ecran-pointages .defile { position: relative; overflow-x: auto; } /* relative : l'en-tête caché (position absolue) défile avec la table, la page ne s'élargit pas */
body.ecran-pointages table.tableau { margin: .75rem 0 0; }
body.ecran-pointages table.tableau td.num, body.ecran-pointages table.tableau th.num { white-space: nowrap; }
body.ecran-pointages table.tableau td.etats { min-width: 12rem; }
body.ecran-pointages table.tableau td.etats .pastille { margin: 0 4px 4px 0; }
body.ecran-pointages table.tableau td.gestes { white-space: nowrap; }
body.ecran-pointages table.tableau td.gestes .bouton { min-height: 32px; padding: 0 10px; margin: 0 4px 4px 0; }
body.ecran-pointages .verrou { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); font-size: 12.5px; }
body.ecran-pointages .verrou svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body.ecran-pointages dialog.saisie { width: min(92vw, 32rem); white-space: normal; }
body.ecran-pointages dialog.saisie h2 { margin: 0; font-size: 18px; }
body.ecran-pointages dialog.saisie p.contexte { margin: .25rem 0 .75rem; color: var(--ink-2); font-size: 13px; font-weight: 400; }
body.ecran-pointages dialog.saisie .heures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
body.ecran-pointages dialog.saisie input[type="time"] { display: block; width: 100%; min-height: 44px; padding: 0 12px; margin-top: .35rem; border: 1px solid var(--line); border-radius: var(--r-slot); background: var(--card); color: var(--ink); font: inherit; font-size: 15px; }
body.ecran-pointages dialog.saisie input[type="text"] { margin-top: .35rem; }
body.ecran-pointages dialog.saisie p.badgees { margin: 0; padding: 8px 12px; border: 1px solid var(--line-2); border-radius: var(--r-slot); background: var(--bg); font-size: 13px; font-weight: 400; }
body.ecran-pointages dialog.saisie .muet { color: var(--ink-3); font-weight: 400; }
body.ecran-pointages dialog.saisie .aide { margin: 0; font-weight: 400; }
body.ecran-pointages dialog.saisie .actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
body.ecran-pointages .carte.heures, body.ecran-pointages .carte.reprogrammation { max-width: 44rem; }
body.ecran-pointages .carte.heures ul { margin-top: .75rem; }
body.ecran-pointages .carte.heures li .texte { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
body.ecran-pointages .carte.heures form.decision { display: flex; gap: 6px; flex: none; margin: 0; }
body.ecran-pointages .carte.heures form.decision .bouton { min-height: 36px; padding: 0 12px; }
body.ecran-pointages .cartes-et-mot-de-passe { display: flex; flex-wrap: wrap; gap: 0 1rem; margin-top: 1.25rem; }
body.ecran-pointages .cartes-et-mot-de-passe .liste-cartes { flex: 3 1 34rem; min-width: 0; }
body.ecran-pointages .cartes-et-mot-de-passe .mot-de-passe { flex: 1 1 16rem; }
body.ecran-pointages .mot-de-passe .libelle { margin: .6rem 0 0; color: var(--ink-2); font-size: 13px; }
body.ecran-pointages .mot-de-passe .empreinte { font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: 30px; font-weight: 700; letter-spacing: .12em; }
body.ecran-pointages .mot-de-passe .fort { font-weight: 700; }
body.ecran-pointages .chevron-vide { width: 40px; flex: none; }
/* Écran 3 : la tête de frise de l'accueil (aujourd'hui, en service) — au-dessus des moments, qu'elle ne touche pas. */
.frise .tete-pointage { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 0 12px; margin: 0 0 12px; border-bottom: 1px solid var(--line-2); }
.frise .tete-pointage.pas-encore { padding: 10px 12px; border-bottom: 0; border-radius: var(--r-slot); background: var(--warn-bg); }
.frise .tete-pointage p { display: flex; flex-direction: column; margin: 0; }
.frise .tete-pointage .titre { font-size: 17px; font-weight: 700; }
.frise .tete-pointage .comment { color: var(--ok); font-size: 12.5px; font-weight: 700; }
.frise .tete-pointage.pas-encore .titre, .frise .tete-pointage.pas-encore .comment { color: var(--warn); font-weight: 700; }
.frise .tete-pointage.pas-encore .comment { font-weight: 400; }
.frise .tete-pointage .depart { text-align: right; }
.frise .tete-pointage .libelle { color: var(--ink-2); font-size: 12.5px; }
.frise .tete-pointage .valeur { font-weight: 700; }
/* Écrans 4 et 5 : les petits R et D de « Mes jours », dans le coin haut droit de la case (sans changer ni le code ni la
   couleur), dans la légende et sur les heures pointées de la fiche du jour. */
.grille-mois .case { position: relative; }
.grille-mois .case .pts { position: absolute; top: 2px; right: 2px; display: flex; flex-direction: column; gap: 1px; color: var(--ink-2); font-size: 9.5px; font-weight: 700; line-height: 1; } /* l'un sous l'autre : à 320 px, côte à côte, R et D touchent le numéro */
.legende .pt, .fiche .pt { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 5px; background: var(--line-2); color: var(--ink-2); font-size: 11px; font-weight: 700; line-height: 1; }
.legende .pt { min-width: 36px; }
.fiche .ligne-pointage { font-weight: 500; }