/* Kénéya — feuille de style
   Système de couleurs « santé » accordé à l'icône (vert-bleu soignant), thème clair / sombre,
   police Fira Sans (texte) et Fira Code (chiffres), hébergées sur le serveur : rien ne dépend d'internet. */

@font-face { font-family: "Fira Sans"; font-weight: 400; font-display: swap; src: url("polices/fira-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Fira Sans"; font-weight: 500; font-display: swap; src: url("polices/fira-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Fira Sans"; font-weight: 600; font-display: swap; src: url("polices/fira-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Fira Sans"; font-weight: 700 800; font-display: swap; src: url("polices/fira-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Fira Code"; font-weight: 400 700; font-display: swap; src: url("polices/fira-code-latin-500-normal.woff2") format("woff2"); }

/* ------------------------------------------------------------------ couleurs : thème clair */
:root {
  color-scheme: light;
  --fond: #f2f7f6;
  --surface: #ffffff;
  --surface-2: #eef5f3;        /* en-têtes de tableaux */
  --surface-3: #e3eeeb;        /* lignes de titre */
  --texte: #12302b;
  --doux: #52645f;
  --bord: #d5e2de;
  --bord-fort: #a9bcb7;
  --champ: #ffffff;
  --accent: #0f766e;
  --accent-fonce: #0a5247;
  --accent-clair: #e0f2ef;
  --accent-vif: #16a085;
  --focus: #5eead4;
  --saisie: #ffffff;
  --saisie-focus: #fffbe6;
  --calcul: #eaf2fb;
  --calcul-texte: #1f4570;
  --vide: repeating-linear-gradient(135deg, #e9edec 0 6px, #dfe4e3 6px 12px);
  --ok: #17703a;
  --ok-fond: #e2f5e8;
  --ok-bord: #b5dfc2;
  --alerte: #8a5200;
  --alerte-fond: #fff3dc;
  --alerte-bord: #f1d49a;
  --alerte-vif: #e0a100;
  --erreur: #b42318;
  --erreur-fond: #fdeceb;
  --erreur-bord: #f3b8b2;
  --info: #2457a6;
  --info-fond: #e6efff;
  --info-vif: #3d7bd9;
  --ombre: 0 1px 2px rgba(10, 60, 50, .06), 0 2px 8px rgba(10, 60, 50, .05);
  --ombre-haute: 0 6px 20px rgba(10, 60, 50, .12);
  --barre: linear-gradient(120deg, #0a5247 0%, #0f766e 55%, #16a085 100%);
  --rayon: 12px;
  --rayon-petit: 8px;
  --vite: 160ms;
  --moyen: 240ms;
  font-family: "Fira Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--texte);
}

/* ------------------------------------------------------------------ couleurs : thème sombre */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --fond: #0b1715; --surface: #12221f; --surface-2: #172b27; --surface-3: #1d3530;
    --texte: #e3f0ed; --doux: #9db3ad; --bord: #27403a; --bord-fort: #3b5a53; --champ: #0f1d1a;
    --accent: #2dd4bf; --accent-fonce: #0a5247; --accent-clair: #123a34; --accent-vif: #14b8a6; --focus: #2dd4bf;
    --saisie: #0f1d1a; --saisie-focus: #2a2a14; --calcul: #142a3d; --calcul-texte: #a9cdf5;
    --vide: repeating-linear-gradient(135deg, #1a2826 0 6px, #22312e 6px 12px);
    --ok: #6ee7a0; --ok-fond: #12301f; --ok-bord: #1f5a37;
    --alerte: #fbbf24; --alerte-fond: #33270c; --alerte-bord: #6b4f12; --alerte-vif: #f59e0b;
    --erreur: #fca5a5; --erreur-fond: #3a1513; --erreur-bord: #7a2a24;
    --info: #93c5fd; --info-fond: #13284a; --info-vif: #60a5fa;
    --ombre: 0 1px 2px rgba(0, 0, 0, .4); --ombre-haute: 0 8px 24px rgba(0, 0, 0, .5);
    --barre: linear-gradient(120deg, #06302a 0%, #0a5247 60%, #0f766e 100%);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --fond: #0b1715; --surface: #12221f; --surface-2: #172b27; --surface-3: #1d3530;
  --texte: #e3f0ed; --doux: #9db3ad; --bord: #27403a; --bord-fort: #3b5a53; --champ: #0f1d1a;
  --accent: #2dd4bf; --accent-fonce: #0a5247; --accent-clair: #123a34; --accent-vif: #14b8a6; --focus: #2dd4bf;
  --saisie: #0f1d1a; --saisie-focus: #2a2a14; --calcul: #142a3d; --calcul-texte: #a9cdf5;
  --vide: repeating-linear-gradient(135deg, #1a2826 0 6px, #22312e 6px 12px);
  --ok: #6ee7a0; --ok-fond: #12301f; --ok-bord: #1f5a37;
  --alerte: #fbbf24; --alerte-fond: #33270c; --alerte-bord: #6b4f12; --alerte-vif: #f59e0b;
  --erreur: #fca5a5; --erreur-fond: #3a1513; --erreur-bord: #7a2a24;
  --info: #93c5fd; --info-fond: #13284a; --info-vif: #60a5fa;
  --ombre: 0 1px 2px rgba(0, 0, 0, .4); --ombre-haute: 0 8px 24px rgba(0, 0, 0, .5);
  --barre: linear-gradient(120deg, #06302a 0%, #0a5247 60%, #0f766e 100%);
}

/* ------------------------------------------------------------------ autres couleurs (menu « Couleurs ») */
:root[data-theme="bleu"] {
  --fond: #f3f6fc; --surface-2: #eef3fb; --surface-3: #e2eaf7; --bord: #d6dfee; --bord-fort: #a8b8d4; --texte: #0f1f3d; --doux: #4f5f7d;
  --accent: #1d4ed8; --accent-fonce: #1e3a8a; --accent-clair: #e0eaff; --accent-vif: #3b82f6; --focus: #93c5fd;
  --barre: linear-gradient(120deg, #1e3a8a 0%, #1d4ed8 55%, #3b82f6 100%);
}
:root[data-theme="violet"] {
  --fond: #f6f4fc; --surface-2: #f1ecfb; --surface-3: #e7def8; --bord: #ddd5ee; --bord-fort: #b9aed3; --texte: #24133f; --doux: #5f5478;
  --accent: #6d28d9; --accent-fonce: #4c1d95; --accent-clair: #efe7ff; --accent-vif: #8b5cf6; --focus: #c4b5fd;
  --barre: linear-gradient(120deg, #4c1d95 0%, #6d28d9 55%, #8b5cf6 100%);
}
:root[data-theme="terre"] {
  --fond: #fbf7f2; --surface-2: #f8f0e6; --surface-3: #f1e4d3; --bord: #ead9c6; --bord-fort: #cfb79c; --texte: #3a2210; --doux: #6e5641;
  --accent: #b45309; --accent-fonce: #7c2d12; --accent-clair: #fdf0e1; --accent-vif: #ea580c; --focus: #fdba74;
  --barre: linear-gradient(120deg, #7c2d12 0%, #b45309 55%, #ea580c 100%);
}
:root[data-theme="contraste"] {   /* noir sur blanc : contraste maximal */
  --fond: #ffffff; --surface: #ffffff; --surface-2: #f0f0f0; --surface-3: #e2e2e2; --texte: #000000; --doux: #2b2b2b;
  --bord: #6b6b6b; --bord-fort: #000000; --champ: #ffffff; --accent: #000000; --accent-fonce: #000000; --accent-clair: #ececec;
  --accent-vif: #000000; --focus: #005fcc; --calcul: #eeeeee; --calcul-texte: #000000;
  --barre: #000000; --ombre: none; --ombre-haute: 0 0 0 2px #000;
}
:root[data-theme="contraste"] .grille th, :root[data-theme="contraste"] .grille td { border-color: #555; }
:root[data-theme="marine"] {   /* bleu nuit : thème sombre */
  color-scheme: dark;
  --fond: #0b1220; --surface: #111a2e; --surface-2: #16213a; --surface-3: #1c2a48;
  --texte: #e5ecfa; --doux: #9fb0cf; --bord: #26365a; --bord-fort: #3a4f7d; --champ: #0d1527;
  --accent: #60a5fa; --accent-fonce: #1e3a8a; --accent-clair: #172a4d; --accent-vif: #3b82f6; --focus: #60a5fa;
  --saisie: #0d1527; --saisie-focus: #2a2a14; --calcul: #14284a; --calcul-texte: #bcd4ff;
  --vide: repeating-linear-gradient(135deg, #18233a 0 6px, #1f2c47 6px 12px);
  --ok: #6ee7a0; --ok-fond: #12301f; --ok-bord: #1f5a37;
  --alerte: #fbbf24; --alerte-fond: #33270c; --alerte-bord: #6b4f12; --alerte-vif: #f59e0b;
  --erreur: #fca5a5; --erreur-fond: #3a1513; --erreur-bord: #7a2a24;
  --info: #93c5fd; --info-fond: #13284a; --info-vif: #60a5fa;
  --ombre: 0 1px 2px rgba(0, 0, 0, .4); --ombre-haute: 0 8px 24px rgba(0, 0, 0, .5);
  --barre: linear-gradient(120deg, #0b1a3a 0%, #1e3a8a 60%, #1d4ed8 100%);
}

/* ------------------------------------------------------------------ bases */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fond); color: var(--texte); line-height: 1.5;
  transition: background-color var(--moyen), color var(--moyen); }
a { color: var(--accent); text-underline-offset: 2px; transition: color var(--vite); }
h1 { font-size: 1.5rem; font-weight: 700; margin: .2rem 0 .6rem; line-height: 1.25; letter-spacing: -.01em; }
h2 { font-size: 1.12rem; font-weight: 600; margin: 1.6rem 0 .6rem; }
small { display: block; color: var(--doux); font-size: .8em; font-weight: 400; }
code, .chiffre { font-family: "Fira Code", ui-monospace, Consolas, monospace; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--accent-clair); }
.ico { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* lien d'accès direct au contenu (clavier, lecteurs d'écran) */
.lien-evitement { position: absolute; left: .8rem; top: -3rem; z-index: 50; background: var(--surface); color: var(--accent);
  padding: .5rem .9rem; border-radius: var(--rayon-petit); box-shadow: var(--ombre-haute); font-weight: 600; transition: top var(--vite); }
.lien-evitement:focus { top: .6rem; }

.lien-admin { text-align: center; margin: 1rem 0 0; font-size: .9rem; }
.lien-admin a { color: var(--doux); }
.lien-admin a:hover { color: var(--accent); }
.cadre-mdp { position: relative; display: block; }
.cadre-mdp input { padding-right: 5.5rem; }
.afficher-mdp { position: absolute; right: .35rem; top: 50%; transform: translateY(-50%); font: inherit; font-size: .8rem;
  font-weight: 600; color: var(--accent); background: var(--accent-clair); border: 0; border-radius: 6px; padding: .35rem .65rem;
  cursor: pointer; transition: filter var(--vite); }
.afficher-mdp:hover { filter: brightness(.95); }
.ligne-formulaire .cadre-mdp { flex: 1; }
.bandeau-serveur { position: sticky; top: 0; z-index: 30; background: var(--erreur-fond); color: var(--erreur);
  border-bottom: 2px solid var(--erreur); padding: .6rem 1rem; text-align: center; font-weight: 600;
  animation: descendre var(--moyen) ease-out; }
.bandeau-serveur[hidden] { display: none; }
.installer[hidden] { display: none; }
.ligne-formulaire { display: flex; gap: .5rem; align-items: flex-end; flex-wrap: wrap; }
.ligne-formulaire label { flex: 1; min-width: 12rem; }
.ligne-formulaire input { min-width: 8rem; }
.bandeau-demo { background: var(--alerte-fond); color: var(--alerte); text-align: center; font-size: .85rem; font-weight: 600; padding: .3rem 1rem; }

/* ------------------------------------------------------------------ barre du haut */
.barre { display: flex; align-items: center; justify-content: space-between; gap: .6rem 1rem; flex-wrap: wrap;
  background: var(--barre); color: #fff; padding: .55rem 1rem; box-shadow: 0 2px 10px rgba(6, 48, 42, .18); }
.marque { display: flex; align-items: center; gap: .65rem; color: #fff; text-decoration: none; font-weight: 700; font-size: 1.08rem;
  letter-spacing: .01em; min-height: 44px; }
.marque small { color: #cdeee7; letter-spacing: 0; }
.logo { display: block; width: 2.5rem; height: 2.5rem; border-radius: 11px; background: #fff; object-fit: cover;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .18); transition: transform var(--moyen); }
.marque:hover .logo { transform: scale(1.05) rotate(-3deg); }
.outils-barre { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.menu { display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; }
.menu a { display: inline-flex; align-items: center; gap: .4rem; color: #fff; text-decoration: none; font-weight: 600;
  padding: .45rem .7rem; border-radius: 999px; min-height: 40px; transition: background-color var(--vite); }
.menu a:hover { background: rgba(255, 255, 255, .14); }
.menu a.actif { background: rgba(255, 255, 255, .22); }
.lien-discussion { position: relative; }
.non-lus { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: #e63946; color: #fff; font-size: .68rem; font-weight: 700; line-height: 18px; text-align: center;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .15); animation: apparaitre var(--moyen) ease-out; }
.non-lus[hidden] { display: none; }
.qui { font-size: .9rem; text-align: right; padding: 0 .5rem; line-height: 1.25; }
.qui small { color: #cdeee7; }
.sortir { opacity: .92; font-weight: 500 !important; }
.bouton-theme { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .35);
  background: rgba(255, 255, 255, .08); color: #fff; cursor: pointer; transition: background-color var(--vite), transform var(--moyen); }
.bouton-theme:hover { background: rgba(255, 255, 255, .2); }
.bouton-theme:active { transform: rotate(-20deg) scale(.95); }
.bouton-theme .ico { width: 20px; height: 20px; }
.choix-theme { position: relative; }
.menu-theme { position: absolute; right: 0; top: calc(100% + 8px); z-index: 45; min-width: 260px; padding: .4rem;
  background: var(--surface); color: var(--texte); border: 1px solid var(--bord); border-radius: var(--rayon);
  box-shadow: var(--ombre-haute); animation: apparaitre var(--vite) ease-out; }
.menu-theme[hidden] { display: none; }
.menu-theme .titre-menu { margin: .2rem .5rem .4rem; font-size: .78rem; font-weight: 600; color: var(--doux); text-transform: uppercase; letter-spacing: .05em; }
.menu-theme button { display: flex; align-items: center; gap: .65rem; width: 100%; min-height: 44px; padding: .45rem .6rem; border: 0;
  border-radius: var(--rayon-petit); background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
  transition: background-color var(--vite); }
.menu-theme button:hover, .menu-theme button:focus-visible { background: var(--surface-2); }
.menu-theme button[aria-checked="true"] { background: var(--accent-clair); font-weight: 600; }
.menu-theme button[aria-checked="true"]::after { content: "\2713"; margin-left: auto; color: var(--accent); }
.echantillon { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .25);
  background: linear-gradient(135deg, var(--c1) 50%, var(--c2) 50%); }

/* ------------------------------------------------------------------ mise en page */
.page { max-width: 1100px; margin: 0 auto; padding: 1.4rem 1rem 3rem; animation: apparaitre var(--moyen) ease-out; }
.page.etroite { max-width: 480px; }
.page.moyenne { max-width: 760px; }
.page.large { max-width: 1400px; }
.page.etroite { padding-top: 2.4rem; }
.carte { background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 1.35rem; box-shadow: var(--ombre); }
.etape { margin: 0; color: var(--accent); font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }
.aide { color: var(--doux); margin: .3rem 0 1rem; }
.bas { margin: 1.2rem 0 0; text-align: center; color: var(--doux); }
.entete-page { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
.actions { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.fil { display: flex; justify-content: space-between; color: var(--doux); font-size: .9rem; margin-bottom: .4rem; }
.num { color: var(--accent); font-weight: 700; }

/* ------------------------------------------------------------------ formulaires */
.formulaire { display: grid; gap: .95rem; }
.formulaire fieldset { border: 1px solid var(--bord); border-radius: var(--rayon); padding: 1rem; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .8rem; margin: 0; }
.formulaire legend { font-weight: 700; padding: 0 .4rem; }
.formulaire .large { grid-column: 1 / -1; }
label { display: grid; gap: .3rem; font-weight: 600; font-size: .92rem; }
input, select, textarea { font: inherit; font-weight: 400; color: var(--texte); padding: .62rem .75rem; border: 1px solid var(--bord-fort);
  border-radius: var(--rayon-petit); background: var(--champ); min-width: 0; width: 100%; min-height: 44px;
  transition: border-color var(--vite), box-shadow var(--vite); }
input:hover, select:hover { border-color: var(--accent); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 45%, transparent); }
input[aria-invalid="true"] { border-color: var(--erreur); }
.grille td:focus { outline: 3px solid var(--focus); outline-offset: -2px; }
.info-tableaux { color: var(--accent); font-weight: 600; }
.choix-mois label { font-size: .85rem; }
.choix-mois select { width: auto; }

/* ------------------------------------------------------------------ boutons */
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; font: inherit; font-weight: 600;
  padding: .6rem 1.05rem; min-height: 44px; border-radius: var(--rayon-petit); border: 1px solid var(--accent); background: var(--surface);
  color: var(--accent); cursor: pointer; text-decoration: none; position: relative;
  transition: background-color var(--vite), color var(--vite), box-shadow var(--vite), transform var(--vite); }
.bouton:hover { background: var(--accent-clair); }
.bouton:active { transform: translateY(1px); }
.bouton.principal { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 1px 2px rgba(10, 82, 71, .25); }
.bouton.principal:hover { background: var(--accent-fonce); border-color: var(--accent-fonce); box-shadow: 0 4px 12px rgba(10, 82, 71, .25); }
:root[data-sombre] .bouton.principal { color: #04131a; }
:root[data-sombre] .bouton.principal:hover { background: var(--accent); border-color: var(--accent); filter: brightness(1.12); }
.bouton.petit { padding: .32rem .75rem; font-size: .86rem; min-height: 36px; }
.bouton.installer { background: #fff; color: #0a5247; border-color: #fff; }
.bouton.installer:hover { background: #e0f2ef; }
.bouton:disabled, .bouton[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
/* bouton qui travaille : roue + texte d'attente, et pas de second clic */
.bouton.en-cours { pointer-events: none; opacity: .85; }
.bouton.en-cours::before { content: ""; width: 1em; height: 1em; border-radius: 50%; border: 2px solid currentColor;
  border-right-color: transparent; animation: tourner .7s linear infinite; }

.message { padding: .75rem 1rem; border-radius: var(--rayon-petit); margin-bottom: 1rem; border: 1px solid; animation: apparaitre var(--moyen) ease-out; }
.message.erreur { background: var(--erreur-fond); color: var(--erreur); border-color: var(--erreur-bord); }
.message.ok { background: var(--ok-fond); color: var(--ok); border-color: var(--ok-bord); }
.message.info { background: var(--alerte-fond); color: var(--alerte); border-color: var(--alerte-bord); }

/* notifications éphémères (« Enregistré », « Saisie envoyée »…) */
.toasts { position: fixed; z-index: 60; right: 1rem; bottom: 1rem; display: grid; gap: .5rem; max-width: min(380px, calc(100vw - 2rem)); }
.toast { display: flex; align-items: center; gap: .6rem; padding: .75rem 1rem; border-radius: var(--rayon-petit); background: var(--surface);
  color: var(--texte); border: 1px solid var(--bord); border-left: 4px solid var(--ok); box-shadow: var(--ombre-haute); font-weight: 500;
  animation: glisser var(--moyen) ease-out; }
.toast.erreur { border-left-color: var(--erreur); }
.toast.info { border-left-color: var(--info-vif); }
.toast .ico { color: var(--ok); }
.toast.erreur .ico { color: var(--erreur); }
.toast.info .ico { color: var(--info-vif); }
.toast.sortie { opacity: 0; transform: translateY(8px); transition: opacity var(--moyen), transform var(--moyen); }

/* ------------------------------------------------------------------ listes de tableaux */
.liste-tableaux { list-style: none; padding: 0; margin: 0 0 1.2rem; display: grid; gap: .55rem;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.liste-tableaux a { display: flex; align-items: center; gap: .8rem; padding: .85rem 1rem; background: var(--surface);
  border: 1px solid var(--bord); border-radius: var(--rayon); text-decoration: none; color: inherit; height: 100%; min-height: 56px;
  box-shadow: var(--ombre); transition: border-color var(--vite), box-shadow var(--vite), transform var(--vite); }
.liste-tableaux a:hover { border-color: var(--accent); box-shadow: var(--ombre-haute); transform: translateY(-1px); }
.liste-tableaux .num { min-width: 3.4rem; }
.liste-tableaux .num small { color: var(--doux); font-weight: 600; font-size: .72rem; white-space: nowrap; }
.liste-tableaux .intitule { flex: 1; font-weight: 600; }
.liste-tableaux.compacte a { padding: .55rem .8rem; min-height: 48px; }
.titre-section { font-size: .95rem; color: var(--doux); margin: 1.2rem 0 .5rem; }
.pastille { font-size: .78rem; font-weight: 700; padding: .2rem .6rem; border-radius: 999px; white-space: nowrap; }
.pastille.ok { background: var(--ok-fond); color: var(--ok); }
.pastille.vide { background: var(--surface-2); color: var(--doux); }
.pastille.alerte { background: var(--alerte-fond); color: var(--alerte); }
.soumission { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.soumission p { margin: 0; }

/* ------------------------------------------------------------------ grille de saisie */
.consigne { background: var(--accent-clair); border-left: 4px solid var(--accent); padding: .65rem .95rem; border-radius: 0 var(--rayon-petit) var(--rayon-petit) 0; }
.grille-cadre { overflow-x: auto; background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); box-shadow: var(--ombre); }
.grille { border-collapse: collapse; width: 100%; font-size: .9rem; }
.grille th, .grille td { border: 1px solid var(--bord); padding: 0; }
.grille thead th { background: var(--surface-2); font-size: .8rem; font-weight: 600; padding: .45rem .35rem; text-align: center; vertical-align: bottom; }
.grille thead th.col-total { background: var(--calcul); color: var(--calcul-texte); }
.grille tbody th { text-align: left; font-weight: 500; padding: .4rem .6rem; min-width: 14rem; max-width: 26rem; background: var(--surface);
  position: sticky; left: 0; z-index: 1; }
.grille tbody tr:hover th { background: var(--surface-2); }
.grille td { min-width: 3.6rem; height: 2.5rem; text-align: right; font-family: "Fira Code", ui-monospace, Consolas, monospace; font-size: .88rem; }
.grille td.saisie { background: var(--saisie); }
.grille td.calcul { background: var(--calcul); color: var(--calcul-texte); font-weight: 700; padding: 0 .5rem; cursor: help; }
.grille td.valeur { padding: 0 .5rem; font-weight: 600; }
.grille td.vide { background: var(--vide); }
.grille .ligne-total th { font-weight: 700; }
.grille .ligne-titre td { background: var(--surface-3); font-family: inherit; font-weight: 700; text-align: left; padding: .35rem .6rem; height: auto; }
.grille input.case { border: 0; border-radius: 0; width: 100%; height: 100%; min-height: 2.5rem; text-align: right; color: inherit;
  padding: 0 .5rem; font-family: inherit; font-size: inherit; font-variant-numeric: tabular-nums; background: transparent; box-shadow: none;
  transition: background-color var(--vite); }
.grille input.case:hover { background: var(--accent-clair); }
.grille input.case:focus { background: var(--saisie-focus); outline: 2px solid var(--accent); outline-offset: -2px; box-shadow: none; }
.grille.lecture td.valeur, .grille.lecture td.calcul { cursor: pointer; }
.grille.lecture td.valeur:hover, .grille.lecture td.calcul:hover { filter: brightness(.96); }
.grille td.a-contrib { box-shadow: inset 3px 0 0 var(--accent-vif); }
.grille td.flash { animation: flash 1.2s ease-out; }
@keyframes flash { from { background: #fff1a8; } }
.legende { color: var(--doux); font-size: .85rem; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.legende strong { color: var(--texte); font-weight: 600; }
.case-ex { display: inline-block; width: 1.8rem; height: 1rem; border: 1px solid var(--bord-fort); border-radius: 0; margin-left: .8rem;
  vertical-align: -.15em; pointer-events: none; }
.case-ex.saisie { background: var(--saisie); } .case-ex.calcul { background: var(--calcul); } .case-ex.vide { background: var(--vide); }
.etat-enregistrement { margin: 0; font-weight: 600; color: var(--ok); display: inline-flex; align-items: center; gap: .35rem; transition: color var(--vite); }
.etats { display: flex; flex-direction: column; align-items: flex-end; gap: .35rem; }
.resume-controles { text-decoration: none; display: inline-flex; gap: .3rem; align-items: center; font-size: .85rem; color: var(--doux); }
.etat-enregistrement.alerte { color: var(--erreur); }
.pagination { display: flex; justify-content: space-between; gap: .6rem; margin-top: 1rem; }

/* ------------------------------------------------------------------ centrale */
.direct { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; color: var(--ok); font-size: .9rem; }
.direct .point { width: .6rem; height: .6rem; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 0 currentColor; animation: pouls 2s infinite; }
.direct.coupe { color: var(--erreur); }
.direct.coupe .point { animation: none; }
@keyframes pouls { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 55%, transparent); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.alerte-comptes { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  background: var(--alerte-fond); border: 1px solid var(--alerte-bord); color: var(--alerte); padding: .75rem 1rem; border-radius: var(--rayon); margin: 1rem 0; }
.alerte-comptes[hidden] { display: none; }
.tableau-simple { border-collapse: collapse; width: 100%; font-size: .92rem; }
.tableau-simple th, .tableau-simple td { padding: .6rem .75rem; border-bottom: 1px solid var(--bord); text-align: left; vertical-align: middle; }
.tableau-simple thead th { background: var(--surface-2); font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--doux); }
.tableau-simple tbody th { font-weight: 600; }
.tableau-simple tbody tr { transition: background-color var(--vite); }
.tableau-simple tbody tr:hover { background: var(--surface-2); }
.tableau-simple tr.en_attente { background: var(--alerte-fond); }
.actions-ligne { display: flex; gap: .4rem; flex-wrap: wrap; }
.barre-progres { display: inline-block; width: 5rem; height: .5rem; border-radius: 99px; vertical-align: middle;
  background: linear-gradient(90deg, var(--accent-vif) var(--p), var(--surface-3) var(--p)); }
.disposition-compilation { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 1rem; align-items: start; }
.detail { position: sticky; top: 1rem; }
.detail h2 { margin-top: 0; font-size: 1rem; }
.detail .gros { font-size: 2rem; font-weight: 800; margin: .2rem 0 .6rem; color: var(--calcul-texte); font-family: "Fira Code", ui-monospace, monospace; }
.contribs { list-style: none; padding: 0; margin: 0; }
.contribs li { display: flex; justify-content: space-between; gap: .5rem; padding: .4rem 0; border-top: 1px solid var(--bord); }

.premiere-fois { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--bord); color: var(--doux); font-size: .92rem; }
.premiere-fois p { margin: 0 0 .7rem; }
.premiere-fois .bouton { width: 100%; text-align: center; }
.invitation { margin: 1rem 0; }
.invitation summary { cursor: pointer; font-weight: 600; min-height: 32px; }
.invitation ol { margin: .8rem 0 0; padding-left: 1.3rem; }
.invitation li { margin: .35rem 0; }
.invitation code { background: var(--surface-2); padding: .05rem .4rem; border-radius: 4px; font-weight: 700; }
.tableau-simple tr.courant { background: var(--accent-clair); }
.tableau-simple .sans-coupure { white-space: nowrap; }
.tableau-simple th a { font-weight: 700; }

/* ------------------------------------------------------------------ contrôles de cohérence */
.badge { display: inline-block; font-size: .75rem; font-weight: 700; padding: .14rem .55rem; border-radius: 999px; white-space: nowrap; }
.badge.erreur { background: var(--erreur-fond); color: var(--erreur); }
.badge.alerte { background: var(--alerte-fond); color: var(--alerte); }
.badge.ok { background: var(--ok-fond); color: var(--ok); }
.badges-controle { display: inline-flex; gap: .25rem; }
.panneau-controles { margin-top: 1rem; }
.panneau-controles h2 { margin-top: 0; }
.controles-ok { color: var(--ok); font-weight: 600; margin: .3rem 0; }
.controles-resume { display: flex; gap: .4rem; margin: 0 0 .6rem; }
.regle { border: 1px solid var(--bord); border-left: 4px solid var(--erreur); border-radius: var(--rayon-petit); padding: .65rem .85rem; margin-bottom: .6rem;
  background: var(--surface); transition: box-shadow var(--vite); }
.regle:hover { box-shadow: var(--ombre); }
.regle.alerte { border-left-color: var(--alerte-vif); }
.regle header { display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; }
.regle .meta { margin: .25rem 0 .3rem; font-size: .82rem; color: var(--doux); display: flex; gap: .6rem; flex-wrap: wrap; }
.regle .meta a { font-weight: 700; }
.regle ul { margin: 0; padding-left: 1.1rem; }
.regle li { margin: .2rem 0; }
.regle .quoi { font-weight: 600; margin-right: .4rem; }
.regle .valeurs { font-family: "Fira Code", ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.regle .attendu { color: var(--doux); font-size: .85rem; margin-left: .4rem; }
.regle .bouton { margin-left: .4rem; }
.regle .correction { display: inline-flex; align-items: center; flex-wrap: wrap; gap: .2rem .4rem; }
.corriger-tout { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem .8rem; margin: 0 0 .8rem; padding: .7rem .9rem;
  border: 1px dashed var(--accent); border-radius: var(--rayon-petit); background: var(--accent-clair); }
.corriger-tout small { color: var(--doux); }
.choix-correction { margin: .35rem 0 .2rem; }
.choix-correction summary { cursor: pointer; color: var(--accent); font-weight: 600; min-height: 32px; display: inline-flex; align-items: center; }
.choix-correction .aide { margin: .2rem 0 .4rem; font-size: .85rem; }
.choix-correction .bouton { display: flex; width: 100%; justify-content: flex-start; text-align: left; margin: 0 0 .35rem; height: auto; }
.regle .plus { list-style: none; color: var(--doux); }
.grille td.en-erreur { box-shadow: inset 0 0 0 2px var(--erreur); }
.grille td.en-alerte { box-shadow: inset 0 0 0 2px var(--alerte-vif); }
.grille td.en-erreur input.case, .grille td.en-alerte input.case { background: color-mix(in srgb, var(--alerte-fond) 60%, transparent); }
.grille td.en-a-completer { box-shadow: inset 0 0 0 2px var(--info-vif);
  background-image: repeating-linear-gradient(135deg, color-mix(in srgb, var(--info-vif) 9%, transparent) 0 6px, transparent 6px 12px); }
.badge.a-completer { background: var(--info-fond); color: var(--info); }
.regle.a-completer { border-left-color: var(--info-vif); }
.grille td.corrigee { animation: corrigee 1.6s ease-out; }
@keyframes corrigee { from { box-shadow: inset 0 0 0 3px var(--ok); background: var(--ok-fond); } }
.bandeau-controles { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  text-decoration: none; color: inherit; margin: 1rem 0; padding: .85rem 1rem; transition: border-color var(--vite), box-shadow var(--vite); }
.bandeau-controles:hover { border-color: var(--accent); box-shadow: var(--ombre-haute); }
.bandeau-controles .lien { color: var(--accent); font-weight: 600; }

.impression-carte { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin: 1rem 0; }
.impression-carte h2 { margin: 0 0 .2rem; font-size: 1.05rem; }
.impression-carte .aide { margin: 0; }

/* ------------------------------------------------------------------ statut du mois, import */
.statut-mois { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.2rem; margin: 1rem 0; }
.statut-bloc h2 { display: flex; align-items: center; gap: .45rem; margin: 0 0 .4rem; font-size: 1.02rem; }
.statut-bloc p { margin: .3rem 0 .7rem; }
.statut-bloc + .statut-bloc { border-left: 1px solid var(--bord); padding-left: 1.2rem; }
.case-a-cocher { display: flex; align-items: flex-start; gap: .55rem; font-weight: 600; cursor: pointer; }
.case-a-cocher input { width: 20px; height: 20px; min-height: 0; margin: .1rem 0 0; flex: none; accent-color: var(--accent); }
input[type="file"] { padding: .5rem; cursor: pointer; }
.etapes-liste { margin: 0; padding-left: 1.3rem; }
.etapes-liste li { margin: .35rem 0; }
.chiffres-cles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .7rem; margin: 1rem 0; }
.chiffres-cles .carte { padding: .9rem 1rem; }
.chiffres-cles .gros { display: block; font-family: "Fira Code", ui-monospace, monospace; font-size: 1.8rem; font-weight: 700; color: var(--accent); }
.chiffres-cles .gros.rouge { color: var(--erreur); }
.chiffres-cles .gros.orange { color: var(--alerte); }

/* ------------------------------------------------------------------ discussion */
.fil-discussion { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.messages { height: min(62vh, 640px); overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .45rem;
  background: var(--fond); overscroll-behavior: contain; }
.messages::before { content: ""; margin-top: auto; }   /* messages collés en bas, comme une messagerie */
.vide-discussion { text-align: center; margin: auto; }
.jour { align-self: center; margin: .6rem 0 .2rem; padding: .2rem .7rem; border-radius: 999px; background: var(--surface-2);
  color: var(--doux); font-size: .78rem; font-weight: 600; }
.bulle { max-width: min(78%, 520px); align-self: flex-start; padding: .5rem .75rem .35rem; border-radius: 14px 14px 14px 4px;
  background: var(--surface); border: 1px solid var(--bord); box-shadow: var(--ombre); animation: apparaitre var(--vite) ease-out; }
.bulle.moi { align-self: flex-end; border-radius: 14px 14px 4px 14px; background: var(--accent-clair); border-color: transparent; }
.bulle.centrale .auteur { color: var(--accent); }
.bulle .auteur { font-weight: 700; font-size: .85rem; color: var(--texte); }
.bulle .auteur small { display: inline; margin-left: .4rem; font-weight: 500; }
.bulle .texte { white-space: pre-wrap; overflow-wrap: anywhere; margin: .1rem 0; }
.bulle.supprime .texte { font-style: italic; color: var(--doux); }
.bulle .pied { display: flex; justify-content: flex-end; align-items: center; gap: .6rem; font-size: .72rem; color: var(--doux); }
.bulle .retirer { border: 0; background: none; color: var(--doux); font: inherit; text-decoration: underline; cursor: pointer; padding: .2rem 0;
  opacity: 0; transition: opacity var(--vite); }
.bulle:hover .retirer, .bulle .retirer:focus-visible { opacity: 1; }
@media (hover: none) { .bulle .retirer { opacity: .8; } }
.saisie-message { display: flex; gap: .5rem; align-items: flex-end; padding: .75rem; border-top: 1px solid var(--bord); background: var(--surface); }
.saisie-message textarea { flex: 1; resize: none; max-height: 160px; line-height: 1.4; }
.saisie-message .envoyer { width: 48px; height: 44px; padding: 0; flex: none; }
.saisie-message .envoyer .ico { width: 20px; height: 20px; }
.fil-discussion .indication { margin: 0; padding: 0 .9rem .6rem; font-size: .78rem; background: var(--surface); }

/* ------------------------------------------------------------------ animations */
@keyframes apparaitre { from { opacity: 0; transform: translateY(6px); } }
@keyframes glisser { from { opacity: 0; transform: translateY(12px); } }
@keyframes descendre { from { transform: translateY(-100%); } }
@keyframes tourner { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .bouton.en-cours::before { animation: tourner 1.5s linear infinite !important; }
}

/* ------------------------------------------------------------------ impression */
.barre-impression { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.entete-rapport { text-align: center; margin-bottom: 1.2rem; }
.entete-rapport h1 { font-size: 1.3rem; margin: .3rem 0; }
.entete-rapport .sous-titre { font-size: 1.05rem; }
.identite { margin: .6rem auto; border-collapse: collapse; font-size: .85rem; text-align: left; }
.identite th, .identite td { border: 1px solid var(--bord-fort); padding: .25rem .5rem; }
.identite th { background: var(--surface-2); }
.tableau-imprime { margin-bottom: 1.4rem; break-inside: avoid; }
.tableau-imprime h2 { font-size: 1rem; margin: .8rem 0 .3rem; }
.tableau-imprime h2 small { display: inline; margin-left: .5rem; }
.consigne-imprimee { font-size: .8rem; color: var(--doux); margin: 0 0 .4rem; }
.page-impression .grille tbody th { position: static; }
@media print {
  :root, :root[data-theme] { color-scheme: light; --fond: #fff; --surface: #fff; --surface-2: #f0f0f0; --surface-3: #e8e8e8;
    --texte: #000; --doux: #444; --bord: #999; --bord-fort: #777; --calcul: #eee; --calcul-texte: #000; }
  .barre, .ne-pas-imprimer, .bandeau-demo, .message, .bandeau-serveur, .toasts, .lien-evitement { display: none !important; }
  body { background: #fff; color: #000; }
  .page { max-width: none; padding: 0; animation: none; }
  .carte, .grille-cadre { box-shadow: none; }
  .grille { font-size: 8pt; }
  .grille td, .grille th { height: auto !important; min-width: 0 !important; padding: 1px 3px !important; }
  .grille td.calcul { background: #eee !important; color: #000; }
  .grille td.vide { background: #999 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .tableau-imprime { break-inside: avoid; }
}

/* ------------------------------------------------------------------ petits écrans (téléphone) */
@media (max-width: 760px) {
  .disposition-compilation { grid-template-columns: 1fr; }
  .detail { position: static; }
  .grille tbody th { min-width: 10rem; max-width: 14rem; font-size: .82rem; }
  .qui { display: none; }
  .liste-tableaux { grid-template-columns: 1fr; }
  h1 { font-size: 1.28rem; }
  input, select, textarea { font-size: 16px; }   /* évite le zoom automatique du téléphone */
  .barre { padding: .5rem .75rem; }
  .menu a { padding: .45rem .55rem; }
  .menu .texte-menu { display: none; }            /* icônes seules dans le menu */
  .menu a .ico { width: 20px; height: 20px; }
  .page { padding: 1rem .9rem 3rem; }
  .carte { padding: 1.1rem; }
  .toasts { left: 1rem; right: 1rem; max-width: none; }
  .statut-mois { grid-template-columns: 1fr; }
  .statut-bloc + .statut-bloc { border-left: 0; padding-left: 0; border-top: 1px solid var(--bord); padding-top: 1rem; }
  .messages { height: calc(100vh - 330px); min-height: 300px; }
  .fil-discussion .indication { display: none; }
  .menu-theme { position: fixed; left: .75rem; right: .75rem; top: auto; bottom: .75rem; min-width: 0; }
}
@media (max-width: 420px) {
  .marque small { display: none; }
}

/* ================================================================== modules ajoutés (oct. 2026) */
.petit-texte { font-size: .82rem; margin-top: .3rem; }
.bouton.grand { padding: .8rem 1.4rem; font-size: 1.05rem; min-height: 52px; }
.unite { font-size: 1rem; margin-left: .1rem; }
.deux-colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 1rem; }
.titre-carte { margin: 0 0 .6rem; font-size: 1.05rem; }
.bas-gauche { margin-top: .6rem; }
.chiffres-cles a.carte { text-decoration: none; color: inherit; transition: box-shadow var(--vite), border-color var(--vite); }
.chiffres-cles a.carte:hover { border-color: var(--accent); box-shadow: var(--ombre-haute); }
.chiffres-cles small { display: block; }

/* onglets et sous-menus */
.onglets { display: inline-flex; flex-wrap: wrap; gap: .25rem; padding: .25rem; border-radius: 999px; background: var(--surface-2); }
.onglet { padding: .45rem .95rem; border-radius: 999px; text-decoration: none; color: var(--doux); font-weight: 600; min-height: 40px;
  display: inline-flex; align-items: center; transition: background-color var(--vite), color var(--vite); }
.onglet:hover { color: var(--texte); }
.onglet.actif { background: var(--surface); color: var(--accent); box-shadow: var(--ombre); }
.sous-menu { display: flex; flex-wrap: wrap; gap: .3rem; margin: .4rem 0 1.2rem; border-bottom: 1px solid var(--bord); }
.sous-menu a { padding: .55rem .9rem; text-decoration: none; color: var(--doux); font-weight: 600; border-bottom: 3px solid transparent;
  margin-bottom: -1px; transition: color var(--vite), border-color var(--vite); }
.sous-menu a:hover { color: var(--texte); }
.sous-menu a.actif { color: var(--accent); border-bottom-color: var(--accent); }
.barre-filtres { display: flex; justify-content: space-between; align-items: center; gap: .8rem; flex-wrap: wrap; margin-bottom: .8rem; }
.barre-filtres .recherche { flex: 1; max-width: 420px; }

/* saisie jour par jour */
.mode-saisie { margin: 1rem 0; display: grid; gap: .6rem; }
.mode-saisie .aide { margin: 0; }
.choix-jour label { display: inline-grid; }
.choix-jour input { width: auto; }
.jours-saisis { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: 0; font-size: .88rem; color: var(--doux); }
.jours-saisis a.pastille { text-decoration: none; }

/* photo de profil */
.avatar { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: none;
  background: rgba(255, 255, 255, .22); color: #fff; font-weight: 700; font-size: .8rem; letter-spacing: .02em; border: 2px solid rgba(255, 255, 255, .55); }
.avatar.petit { width: 28px; height: 28px; font-size: .7rem; border: 0; background: var(--accent-clair); color: var(--accent); }
.avatar.grand { width: 120px; height: 120px; font-size: 2.4rem; border: 3px solid var(--accent-clair); background: var(--accent-clair); color: var(--accent); }
.qui-lien { display: inline-flex; align-items: center; gap: .5rem; color: #fff; text-decoration: none; padding: .2rem .5rem .2rem .2rem;
  border-radius: 999px; transition: background-color var(--vite); }
.qui-lien:hover, .qui-lien.actif { background: rgba(255, 255, 255, .14); }
.qui-lien .qui { padding: 0; text-align: left; }
.profil-carte { display: flex; gap: 1.4rem; align-items: flex-start; flex-wrap: wrap; }
.profil-infos { flex: 1; min-width: 260px; }
.profil-infos h2 { margin: 0; }
.profil-infos p { margin: .2rem 0 .8rem; }
.ligne-auteur { display: flex; align-items: center; gap: .45rem; margin-bottom: .15rem; }

/* ressources humaines */
.liste-rh { list-style: none; padding: 0; margin: 0; }
.liste-rh li { display: flex; justify-content: space-between; align-items: center; gap: .8rem; padding: .55rem 0; border-top: 1px solid var(--bord); }
.liste-rh li:first-child { border-top: 0; }
.liste-rh small { display: block; }
.barres { list-style: none; padding: 0; margin: 0 0 .8rem; display: grid; gap: .45rem; }
.barres li { display: grid; grid-template-columns: minmax(110px, 38%) 1fr auto; align-items: center; gap: .6rem; font-size: .92rem; }
.barre-horiz { height: .6rem; border-radius: 99px; background: linear-gradient(90deg, var(--accent-vif) var(--p), var(--surface-3) var(--p)); }
.alertes-rh { margin: 1rem 0; border-left: 4px solid var(--alerte-vif); }
.alertes-rh h2 { margin-top: 0; }
.alertes-rh ul { margin: 0; padding-left: 1.1rem; }
.alerte-ligne { margin: .35rem 0; }
.alerte-ligne.erreur { color: var(--erreur); }
.vide-rh { margin-bottom: 1rem; border: 2px dashed var(--accent); }
.tableau-evaluation input, .tableau-evaluation select { min-height: 38px; padding: .3rem .45rem; }
.tableau-evaluation input[type="number"] { width: 4.6rem; }
.ligne-formulaire.compacte { gap: .3rem; flex-wrap: nowrap; }
.ligne-formulaire.compacte input { min-width: 0; width: 9.5rem; min-height: 36px; padding: .25rem .4rem; }

/* assistance */
.choix-assistance { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .8rem; margin: 1rem 0; }
.choix { display: grid; gap: .3rem; text-decoration: none; color: inherit; border-left: 4px solid var(--accent);
  transition: box-shadow var(--vite), transform var(--vite); }
.choix:hover { box-shadow: var(--ombre-haute); transform: translateY(-1px); }
.choix strong { color: var(--accent); font-size: 1.05rem; }
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lien-suivi { display: block; margin: .4rem 0; padding: .4rem .6rem; background: var(--surface); border: 1px solid var(--bord);
  border-radius: var(--rayon-petit); word-break: break-all; font-size: .85rem; }
.bulle.systeme { align-self: center; max-width: 90%; background: var(--surface-2); border: 0; box-shadow: none; font-size: .88rem; color: var(--doux); text-align: center; }
.liste-dossiers { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.dossier { display: grid; gap: .3rem; text-decoration: none; color: inherit; transition: box-shadow var(--vite), border-color var(--vite); }
.dossier:hover { border-color: var(--accent); box-shadow: var(--ombre-haute); }
.dossier.a-repondre { border-left: 4px solid var(--alerte-vif); }
.dossier-tete { display: flex; justify-content: space-between; gap: .6rem; align-items: center; flex-wrap: wrap; }
.dossier-texte { color: var(--doux); }
.lien-pastille { position: relative; }

/* site public */
.page.site { max-width: 1100px; }
.heros { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 2rem 0 1.5rem; flex-wrap: wrap; }
.heros-texte { flex: 1; min-width: 280px; }
.heros h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: .3rem 0 .8rem; }
.accroche { font-size: 1.12rem; color: var(--doux); max-width: 58ch; }
.heros-logo { width: min(220px, 40vw); height: auto; border-radius: 48px; box-shadow: var(--ombre-haute); }
.grille-atouts { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; margin: 1rem 0 1.5rem; }
.atout h2 { display: flex; align-items: center; gap: .5rem; margin: 0 0 .5rem; font-size: 1.08rem; color: var(--accent); }
.atout p { margin: 0; color: var(--doux); }
.contact-site { border-left: 4px solid var(--accent); }
.contact-site h2 { margin-top: 0; }
.liste-protections { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; }

@media (max-width: 760px) {
  .barres li { grid-template-columns: 1fr auto; }
  .barres .barre-horiz { grid-column: 1 / -1; grid-row: 2; }
  .qui-lien { padding: .15rem; }
  .heros { padding-top: .6rem; }
  .heros-logo { display: none; }
  .sous-menu { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .sous-menu::-webkit-scrollbar { display: none; }
  .sous-menu a { white-space: nowrap; }
}

.carte > h2:first-child, .carte > h2.titre-carte { margin-top: 0; }

/* licence, pied de page légal, pages juridiques */
.bandeau-licence { background: var(--alerte-fond); color: var(--alerte); border-bottom: 1px solid var(--alerte-bord);
  padding: .5rem 1rem; text-align: center; font-weight: 600; font-size: .92rem; }
.bandeau-licence.expiree { background: var(--erreur-fond); color: var(--erreur); border-bottom-color: var(--erreur-bord); }
.bandeau-licence a { color: inherit; }
.licence-etat { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: 0 0 .6rem; font-size: 1.05rem; }
.pied-site { display: flex; justify-content: space-between; gap: .6rem 1.2rem; flex-wrap: wrap; max-width: 1400px; margin: 0 auto;
  padding: 1.2rem 1rem 2rem; color: var(--doux); font-size: .82rem; border-top: 1px solid var(--bord); }
.pied-site a { color: var(--doux); }
.texte-juridique h2 { font-size: 1.05rem; margin: 1.4rem 0 .4rem; }
.texte-juridique p, .texte-juridique li { line-height: 1.6; }
.acceptation { margin-top: 1.5rem; border: 2px solid var(--accent); }
a.pastille { text-decoration: none; }
@media print { .pied-site, .bandeau-licence { display: none !important; } }