/* Sereina — disposition de la référence de l'utilisateur (fenêtre pleine, sans cadre autour depuis le 27/10/2026, dock en bas,
   pilules, grille de cartes). Identité du kit de marque SEREINA (30/10/2026), accent terracotta : Nuit #0B2229 domine
   (fonds sombres, textes), Clair #F4F1EC pour les fonds, un seul accent, Terracotta #E9805A (sur fond foncé) ou
   Terracotta profond #AD5332 (sur fond clair) ; neutres Ardoise #203A42, Pierre #4A5D62, Brume #9FB3B8, Sable #CFC9BF.
   États : réussi Teal profond #007A88 (Teal #2FB6C6 sur fond foncé), erreur Rose profond #C33B5E (Rose clair #E05676). */

/* kit de marque SEREINA : Nexora pour les titres de page, Inter pour le texte (auto-hébergées) */
@font-face { font-family: "Nexora"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/nexora.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/inter-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/inter-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  color-scheme: light;
  --nuit: #0b2229; --clair: #f4f1ec; --terracotta: #e9805a; --terracotta-profond: #ad5332; --ardoise-marque: #203a42;
  --pierre: #4a5d62; --brume: #9fb3b8; --sable: #cfc9bf;
  --petrole: var(--nuit); --framboise: var(--terracotta); --bleu-gris: var(--brume); --ardoise: var(--ardoise-marque);
  --mauve: var(--pierre); --prune: var(--terracotta-profond);
  --logo-lettres: var(--nuit); --logo-accent: var(--terracotta-profond);
  --succes: #007a88; --danger: #c33b5e; --attente: #9a4a2c;
  --ombre: 11, 34, 41;  /* teinte des ombres portées : Nuit sur fond clair, noir neutre sur fond sombre */
  --fond: #f4f1ec;
  --fenetre: rgba(244, 241, 236, 0.86);
  --fenetre-bord: rgba(255, 255, 255, 0.85);
  --carte: rgba(255, 255, 255, 0.80);
  --carte-bord: rgba(255, 255, 255, 0.95);
  --carte-ombre: 0 1px 2px rgba(var(--ombre), 0.04), 0 10px 30px rgba(var(--ombre), 0.05);
  --interne-bord: #e6e0d6;
  --ligne: #ede8e0;
  --piste: #eae5dc;
  --champ: #f0ece5;
  --survol: rgba(11, 34, 41, 0.045);
  --encre: #0b2229;
  --encre-2: #4a5d62;
  --encre-3: rgba(11, 34, 41, 0.62);
  --sombre: #0b2229;
  --sur-sombre: #f4f1ec;
  --accent: #ad5332;
  --rouge: #c33b5e;
  --mauve-texte: #9a4a2c;
  --pastel-1: #f6e1e6; --pastel-2: #dcedef; --pastel-3: #f6e5dc; --pastel-4: #e5eaeb; --pastel-5: #ece6dc;
  --interrupteur: #e2dcd2;
  --option: #ffffff;
  --dock: #0b2229;
  --dock-icone: rgba(244, 241, 236, 0.86);
  --dock-actif: #e9805a;
  --halo: rgba(255, 255, 255, 0.62);
  --verre-popup: rgba(255, 255, 255, 0.52);
  --verre-popup-bord: rgba(255, 255, 255, 0.78);
  --verre-popup-champ: rgba(255, 255, 255, 0.55);
  --etoile: #d99a1e;
  --verre-popup-reflet: inset 0 1px 0 rgba(255, 255, 255, 0.85);
  --rayon: 22px;
  --nav-actif: #0b2229; --nav-actif-texte: #f4f1ec; --bulle: #0b2229; --bulle-texte: #f4f1ec;
  --defil: rgba(11, 34, 41, 0.14); --defil-survol: rgba(11, 34, 41, 0.26); --defil-fort: rgba(11, 34, 41, 0.42);
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.75 6 6.25l4.5-4.5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --calendrier: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='4' y='5.5' width='16' height='14.5' rx='2.5'/%3E%3Cpath d='M4 10h16M8.5 3.5v4M15.5 3.5v4'/%3E%3C/g%3E%3C/svg%3E");
  --horloge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.25'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/g%3E%3C/svg%3E");
}
:root[data-theme="sombre"] {
  color-scheme: dark;
  --fond: #0b2229;
  --ombre: 0, 0, 0;
  --logo-lettres: #ffffff; --logo-accent: var(--terracotta);
  --succes: #2fb6c6; --danger: #e05676; --attente: #e9805a;
  --fenetre: rgba(11, 34, 41, 0.86);
  --fenetre-bord: rgba(255, 255, 255, 0.08);
  --carte: rgba(255, 255, 255, 0.055);
  --carte-bord: rgba(255, 255, 255, 0.07);
  --carte-ombre: 0 1px 2px rgba(0, 0, 0, 0.2), 0 10px 30px rgba(0, 0, 0, 0.18);
  --interne-bord: rgba(255, 255, 255, 0.09);
  --ligne: rgba(255, 255, 255, 0.07);
  --piste: rgba(255, 255, 255, 0.08);
  --champ: rgba(255, 255, 255, 0.06);
  --survol: rgba(255, 255, 255, 0.05);
  --encre: #f4f1ec;
  --encre-2: #9fb3b8;
  --encre-3: rgba(244, 241, 236, 0.62);
  --sombre: #f4f1ec;
  --sur-sombre: #0b2229;
  --accent: #e9805a;
  --rouge: #e05676;
  --mauve-texte: #e9805a;
  --pastel-1: rgba(212, 71, 106, 0.16); --pastel-2: rgba(47, 182, 198, 0.14); --pastel-3: rgba(233, 128, 90, 0.16); --pastel-4: rgba(32, 58, 66, 0.60); --pastel-5: rgba(159, 179, 184, 0.12);
  --interrupteur: rgba(255, 255, 255, 0.16);
  --option: #203a42;
  --dock: #071a1f;
  --halo: rgba(159, 179, 184, 0.35);
  --verre-popup: rgba(32, 58, 66, 0.58);
  --verre-popup-bord: rgba(255, 255, 255, 0.12);
  --verre-popup-champ: rgba(255, 255, 255, 0.07);
  --etoile: #e8b04a;
  --verre-popup-reflet: inset 0 1px 0 rgba(255, 255, 255, 0.10);
  --nav-actif: #e9805a; --nav-actif-texte: #0b2229; --bulle: #f4f1ec; --bulle-texte: #0b2229;
  --defil: rgba(244, 241, 236, 0.13); --defil-survol: rgba(244, 241, 236, 0.24); --defil-fort: rgba(244, 241, 236, 0.40);
}

/* ---------- base */
* { box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; }
/* ordinateur : affichage à 80 % par défaut (Réglages → Taille sur ordinateur : variable --zoom posée par app.js) */
@media (min-width: 861px) { body { zoom: var(--zoom, .8); } }
@media (max-width: 860px) { .seulement-pc { display: none !important; } }
html { background: var(--fond); accent-color: var(--sombre); }
/* barres de défilement à la Sereina (01/11) : une fine pilule qui flotte dans sa piste, discrète au repos, plus nette
   au survol de la zone qui défile, terracotta quand on la tire ; pas de flèches aux bouts, piste invisible, un peu de
   marge en haut et en bas pour ne pas toucher les coins arrondis des cartes. Chrome et Edge (la fenêtre de l'app) :
   pseudo-éléments ::-webkit-scrollbar, donc AUCUN scrollbar-color / scrollbar-width ailleurs (ils les désactivent) ;
   Firefox : les couleurs standard, plus bas. */
::-webkit-scrollbar { width: 12px; height: 12px; background: transparent; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-track:vertical { margin-block: 6px; }
::-webkit-scrollbar-track:horizontal { margin-inline: 6px; }
::-webkit-scrollbar-thumb { min-height: 44px; min-width: 44px; border: 3.5px solid transparent; border-radius: 999px; background: var(--defil) padding-box; }
:hover::-webkit-scrollbar-thumb { background-color: var(--defil-survol); }
::-webkit-scrollbar-thumb:hover { border-width: 2.5px; background-color: var(--defil-fort); }
::-webkit-scrollbar-thumb:active { border-width: 2.5px; background-color: var(--accent); }
::-webkit-scrollbar-button, ::-webkit-scrollbar-corner { display: none; width: 0; height: 0; background: transparent; }
@supports not selector(::-webkit-scrollbar) { html { scrollbar-width: thin; scrollbar-color: var(--defil-fort) transparent; } }
body {
  margin: 0; overflow: hidden; color: var(--encre);
  font: 14.5px/1.55 "Inter", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  font-feature-settings: "cv11" 1;  /* « a » à un étage d'Inter : plus calme en interface */
  -webkit-font-smoothing: antialiased; caret-color: var(--accent);
}
::selection { background: color-mix(in srgb, var(--terracotta) 26%, transparent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
input, select { font: inherit; color: var(--encre); }
select option { background: var(--option); color: var(--encre); }

/* ---------- fenêtre : l'app occupe toute la fenêtre Windows, sans cadre autour */
.cadre { position: fixed; inset: 0; }
.fenetre {
  position: relative; height: 100%; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr);
  background: var(--fond); overflow: hidden;
}

/* ---------- en-tête */
.haut { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; padding: 12px 22px 6px; }
.marque { display: inline-flex; align-items: center; gap: 8px; color: var(--encre); text-decoration: none; justify-self: start; }
.marque:hover { text-decoration: none; }
.marque-signe { display: none; }
.marque-logo { display: block; height: 19px; width: auto; aspect-ratio: 4377 / 710; flex: none; }
.marque-nom { font-size: 22px; font-weight: 700; letter-spacing: -0.05em; line-height: 1; }
.connexion-marque .marque-logo { height: 28px; }
.marque-sous { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--encre-2); }
.mois-pilules { display: flex; align-items: center; gap: 6px; }
.mois-liste { display: flex; gap: 6px; }
.pilule {
  height: 32px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--interne-bord); background: var(--carte);
  font-size: 13px; font-weight: 500; color: var(--encre); cursor: pointer; white-space: nowrap;
  transition: background-color .2s ease-out, color .2s ease-out, border-color .2s ease-out, transform .12s ease-out;
}
.pilule:hover { border-color: var(--encre-3); }
.pilule:active { transform: scale(.97); }
.pilule.actif { background: var(--sombre); border-color: var(--sombre); color: var(--sur-sombre); }
.pas { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--interne-bord); background: var(--carte); color: var(--encre-2); display: grid; place-items: center; cursor: pointer; transition: transform .12s ease-out; }
.pas svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pas:active { transform: scale(.94); }
.pas:disabled { opacity: .35; cursor: default; transform: none; }
.haut-droite { display: flex; align-items: center; gap: 10px; justify-self: end; min-width: 0; }
.rond, .rond-petit {
  position: relative; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--interne-bord);
  background: var(--carte); color: var(--encre); cursor: pointer; flex: none; transition: transform .12s ease-out, background-color .15s ease-out;
}
.rond { width: 36px; height: 36px; }
.rond-petit { width: 30px; height: 30px; }
.rond svg, .rond-petit svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rond-petit svg { width: 14px; height: 14px; }
.rond:hover, .rond-petit:hover { background: var(--survol); }
.rond:active, .rond-petit:active { transform: scale(.94); }
.rond.tourne svg { animation: tourner 1s linear infinite; }
@keyframes tourner { to { transform: rotate(360deg); } }
.point { position: absolute; top: 7px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--framboise); box-shadow: 0 0 0 2px var(--carte); }
.profil { position: relative; display: flex; align-items: center; gap: 10px; padding-left: 4px; cursor: pointer; min-width: 0; }
.profil select { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }
.monogramme { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; color: var(--clair); background: var(--ardoise-marque); }
.monogramme.image { background: #fff; border: 1px solid var(--interne-bord); overflow: hidden; }
.monogramme.image img { width: 64%; height: 64%; object-fit: contain; }
.profil-texte { display: grid; line-height: 1.25; min-width: 0; }
.profil-texte strong { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.profil-texte small { font-size: 12px; color: var(--encre-2); white-space: nowrap; }
.enregistrer-barre, .titre-compact { display: none; }

/* ---------- barre de menu (photo de l'utilisateur) : barre sombre, onglet actif soulevé dans une bulle,
   encoche creusée autour d'elle. Rien ne se redessine pendant le mouvement : la piste (qui porte l'encoche)
   glisse sous un cadre arrondi fixe et la bulle glisse au-dessus, en transform seulement. */
.rail {
  position: absolute; left: 50%; bottom: 14px; z-index: 8; transform: translateX(-50%);
  display: flex; align-items: center; gap: 2px; height: 54px; padding: 0 12px;
}
.dock-fond { position: absolute; inset: 0; border-radius: 20px; overflow: hidden; box-shadow: 0 16px 28px -8px rgba(8, 24, 26, 0.34); }
.dock-piste {
  position: absolute; top: 0; bottom: 0; left: 0; width: 200%; background: var(--dock);
  -webkit-mask: radial-gradient(circle at 50% 0, transparent 29px, #000 30px);
  mask: radial-gradient(circle at 50% 0, transparent 29px, #000 30px);
}
.bulle-dock {
  position: absolute; top: -24px; left: 0; width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center; background: var(--dock); color: var(--dock-actif);
  box-shadow: 0 0 0 5px var(--halo), 0 0 22px 8px var(--halo);
}
.dock-piste, .bulle-dock { will-change: transform; transition: transform .42s cubic-bezier(.22, 1, .36, 1); }
.rail.fige .dock-piste, .rail.fige .bulle-dock { transition: none; }
.bulle-icone { display: grid; place-items: center; }
.bulle-icone svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.bulle-dock.pop .bulle-icone { animation: pop-icone .3s cubic-bezier(.2, .8, .2, 1); }
@keyframes pop-icone { from { opacity: 0; transform: scale(.6); } }
.rail button { position: relative; width: 50px; height: 54px; border: 0; padding: 0; background: none; cursor: pointer; display: grid; place-items: center; color: var(--dock-icone); }
.rail .icone { display: grid; place-items: center; transition: opacity .18s ease-out, transform .18s ease-out; }
.rail svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.rail .libelle { display: none; }
.rail button:hover .icone { transform: translateY(-2px); color: #fff; }
.rail button:focus-visible { outline: 2px solid var(--dock-actif); outline-offset: -6px; border-radius: 14px; }
.rail button.actif .icone { opacity: 0; transform: translateY(6px); }

/* ---------- contenu (défile dans la fenêtre) */
/* une seule zone défile : le contenu ; la page elle-même ne bouge pas, la place de la barre de défilement est gardée */
main { grid-column: 1; grid-row: 2; overflow-y: auto; overflow-x: hidden; padding: 6px 20px 96px; scrollbar-gutter: stable; overscroll-behavior: contain; }
.onglet { display: none; }
.onglet.actif { display: block; }
.entete { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px 20px; flex-wrap: wrap; margin: 8px 0 22px; }
.entete > div:first-child { display: flex; flex-direction: column-reverse; gap: 6px; min-width: 0; }
h1 { margin: 0; font-family: "Nexora", "Inter", ui-sans-serif, sans-serif; font-size: clamp(24px, 2vw, 30px); line-height: 1.15; font-weight: 400; letter-spacing: -0.01em; text-wrap: balance; }
.sous-titre { margin: 0; font-size: 13.5px; color: var(--encre-2); }
.actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.actions.fin { justify-content: flex-end; }
.titre-groupe { margin: 22px 4px 10px; font-size: 16px; font-weight: 500; letter-spacing: -0.015em; display: flex; align-items: baseline; gap: 8px; }
.compte { color: var(--mauve-texte); font-weight: 600; }
.pied { margin: 12px 22px 0; font-size: 12.5px; line-height: 1.55; color: var(--encre-2); max-width: 75ch; }
.bienvenue { max-width: 560px; margin: 14vh auto 0; text-align: center; }
.bienvenue h1 { font-size: 48px; }
.bienvenue .sous-titre { margin: 14px auto 28px; }
body.sans-societe .avec-societe { display: none; }
body.sans-societe main { grid-column: 1 / -1; }

/* recherche (pilule comme la référence) */
.recherche { display: flex; align-items: center; gap: 9px; height: 38px; min-width: 260px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--interne-bord); background: var(--carte); color: var(--encre-3); }
.recherche svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; flex: none; }
.recherche input { border: 0; background: none; outline: none; width: 100%; font-size: 13.5px; color: var(--encre); }
.recherche:focus-within { border-color: var(--accent); }

/* ---------- cartes */
.carte, .surface, .groupe, .liste { background: var(--carte); border: 1px solid var(--carte-bord); border-radius: var(--rayon); box-shadow: var(--carte-ombre); }
.carte { padding: 18px 20px 20px; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.carte > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex: none; flex-wrap: wrap; }
.carte h2 { margin: 0; font-size: 15.5px; font-weight: 600; letter-spacing: -0.012em; }
.carte-actions { display: flex; gap: 8px; }
.liste { overflow: hidden; }
.defile { overflow-x: auto; }
.groupe.interieur { padding: 16px 18px; }

/* ---------- grille du tableau de bord (comme la référence) */
#tableau.actif { display: flex; flex-direction: column; height: 100%; }  /* tient dans l'écran : la grille partage la hauteur restante */
.bento { flex: 1; min-height: 0; display: grid; gap: 14px; grid-template-columns: minmax(232px, 1fr) minmax(0, 1.06fr) minmax(0, 1.02fr) minmax(232px, 1fr); grid-template-rows: minmax(190px, 1.12fr) minmax(165px, 1fr); grid-template-areas: "verif meilleur masse exc" "verif barres barres direct"; }
.bento > .carte { overflow: hidden; }
#tableau [data-reste] { flex: 1 1 0; min-height: 0; overflow: hidden; contain: size; align-content: start; }  /* ce qui dépasse devient « +N » */
.carte > header .reste { margin-left: auto; height: 24px; padding: 0 9px; border: 0; border-radius: 999px; background: var(--champ); font-size: 12px; font-weight: 600; color: var(--encre-2); cursor: pointer; font-variant-numeric: tabular-nums; }
.carte > header .reste:hover { color: var(--encre); }
.b-verif { grid-area: verif; }
.b-meilleur { grid-area: meilleur; }
.b-masse { grid-area: masse; }
.b-barres { grid-area: barres; }
.b-exc { grid-area: exc; }
.b-direct { grid-area: direct; }
.pilules-mini { display: flex; gap: 6px; margin-bottom: 10px; flex: none; }
.pilules-mini .pilule { height: 28px; padding: 0 12px; font-size: 12.5px; }
.pilules-mini .nb { margin-left: 4px; font-weight: 600; font-variant-numeric: tabular-nums; opacity: .7; }
.pilules-mini .pilule.actif .nb { opacity: .85; }
.b-verif { min-height: 0; }
.cartes-pastel { display: grid; gap: 6px; }
.pastel { display: grid; grid-template-columns: 26px minmax(0, 1fr); grid-template-areas: "av nom" "av desc"; column-gap: 9px; row-gap: 1px; align-items: center; padding: 7px 10px 7px 8px; border-radius: 12px; background: var(--pastel-1); cursor: pointer; text-align: left; border: 0; width: 100%; transition: transform .15s ease-out; }
.pastel:hover { transform: translateX(2px); }
.pastel:nth-child(5n+2) { background: var(--pastel-2); }
.pastel:nth-child(5n+3) { background: var(--pastel-3); }
.pastel:nth-child(5n+4) { background: var(--pastel-4); }
.pastel:nth-child(5n+5) { background: var(--pastel-5); }
.pastel .initiales { grid-area: av; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 700; color: #fff; }
.pastel strong { grid-area: nom; font-size: 13px; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pastel .desc { grid-area: desc; font-size: 11.5px; color: var(--encre-2); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pastel .desc b { font-weight: 600; color: var(--encre); font-variant-numeric: tabular-nums; }
.pastel .desc b.action-txt { color: var(--rouge); }

/* meilleure assiduité */
.meilleur { display: grid; align-content: start; gap: 9px; flex: 1; min-height: 0; grid-template-rows: auto auto minmax(0, 1fr); }
.meilleur-une { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 12px 9px 10px; border-radius: 14px; background: var(--pastel-2); }
.meilleur-une .initiales { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: #fff; }
.meilleur-nom { display: grid; min-width: 0; }
.meilleur-nom strong { font-size: 14px; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meilleur-nom small { font-size: 11.5px; color: var(--encre-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.medaille { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--sombre); color: var(--sur-sombre); font-size: 12px; font-weight: 700; }
.meilleur-suite { list-style: none; margin: 0; padding: 0; display: grid; align-content: start; gap: 6px; overflow: hidden; }
.meilleur-suite li { display: grid; grid-template-columns: 16px 26px minmax(0, 1fr); grid-template-areas: "rang av nom" "rang av sous"; column-gap: 8px; row-gap: 1px; align-items: center; padding: 6px 10px 6px 8px; border-radius: 12px; border: 1px solid var(--interne-bord); }
.meilleur-suite .rang { grid-area: rang; font-size: 12px; font-weight: 700; color: var(--encre-3); text-align: center; font-variant-numeric: tabular-nums; }
.meilleur-suite .initiales { grid-area: av; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 700; color: #fff; }
.meilleur-suite strong { grid-area: nom; font-size: 13px; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meilleur-suite small { grid-area: sous; font-size: 11.5px; color: var(--encre-2); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* masse salariale : net, cotisations, IR, charges patronales, coût employeur */
.masse { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 7px; flex: 1; min-height: 0; }
.masse-tete { display: grid; gap: 1px; }
.masse-tete span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--encre-2); }
.masse-tete b { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.masse-tete b small, .masse-total small { font-size: 12px; font-weight: 500; color: var(--encre-2); }
.masse-barre { display: flex; gap: 2px; height: 9px; border-radius: 999px; overflow: hidden; }
.masse-barre i { min-width: 3px; transform-origin: left; }
.dessin .masse-barre i { animation: pousser .6s cubic-bezier(.2, .8, .2, 1) both; }
.masse i { display: inline-block; }
.masse-lignes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; margin: 0; }
.masse-lignes div { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 12.5px; }
.masse-lignes dt { flex: 1 1 auto; min-width: 0; color: var(--encre-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.masse-lignes dd { flex: none; margin: 0; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.masse-lignes dt i, .masse-tete span i { flex: none; width: 8px; height: 8px; border-radius: 50%; }
.masse-lignes dt i { margin-right: 7px; vertical-align: 1px; }
.masse-lignes .masse-total { padding-top: 5px; border-top: 1px solid var(--interne-bord); font-size: 13.5px; }
.masse-total dt { color: var(--encre); font-weight: 600; }
.masse-total dd { font-weight: 600; }
.m-net { background: var(--sombre); }
.m-avance { background: var(--prune); }
.m-cotis { background: var(--bleu-gris); }
.m-ir { background: var(--mauve); }
.m-patronal { background: var(--framboise); }

/* barres rayées */
.barres { display: grid; gap: 11px; }
.barre-ligne { display: grid; gap: 5px; }
.barre-ligne header { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; }
.barre-ligne header span:last-child { color: var(--encre-2); white-space: nowrap; }
.barre-ligne header b { color: var(--rouge); font-weight: 600; }
.piste { height: 13px; border-radius: 999px; background: var(--piste); overflow: hidden; }
.remplissage { height: 100%; border-radius: 999px; transform-origin: left; background-image: repeating-linear-gradient(-55deg, rgba(255, 255, 255, .22) 0 3px, transparent 3px 8px); }
.dessin .remplissage { animation: pousser .6s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes pousser { from { transform: scaleX(0); } }

/* barres du tableau de bord : une ligne par salarié (nom, barre, détail, montant) */
.barre-mini { display: grid; grid-template-columns: minmax(84px, 9.5em) minmax(48px, 1fr) auto minmax(72px, auto); align-items: center; gap: 12px; font-size: 12.5px; }
.barres:has(.barre-mini) { gap: 9px; }
.barre-mini .piste { height: 10px; }
.barre-nom { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barre-info { font-size: 11.5px; color: var(--encre-2); white-space: nowrap; }
.barre-mini > b { text-align: right; color: var(--rouge); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.barre-mini > b.neutre { color: var(--encre); }

/* lignes compactes du tableau de bord (exceptions récentes, absences) */
.listes-mini { display: grid; gap: 6px; }
.ligne-mini { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; grid-template-areas: "marque nom nom" "marque sous fin"; column-gap: 9px; row-gap: 1px; align-items: center; width: 100%; padding: 7px 10px 7px 8px; border-radius: 12px; border: 1px solid var(--interne-bord); background: var(--carte); text-align: left; cursor: pointer; transition: border-color .15s ease-out; }
.ligne-mini:hover { border-color: var(--encre-3); }
.ligne-mini > .initiales { grid-area: marque; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 700; color: #fff; }
.ligne-mini > .point { grid-area: marque; justify-self: center; width: 9px; height: 9px; border-radius: 50%; }
.ligne-mini strong { grid-area: nom; font-size: 13px; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ligne-mini .fin { grid-area: fin; font-size: 11.5px; color: var(--encre-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ligne-mini .mini-bouton { grid-area: fin; height: 20px; padding: 0 8px; font-size: 11px; }
.ligne-mini .sous { grid-area: sous; display: flex; align-items: center; gap: 4px; min-width: 0; font-size: 11.5px; color: var(--encre-2); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ligne-mini .clip { display: inline-grid; color: var(--encre-2); }
.ligne-mini .clip svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; transform: rotate(-45deg); }
.ligne-mini:disabled, .pastel:disabled { cursor: default; }

/* en direct sur le tableau de bord */
.b-direct .titre-direct { display: inline-flex; align-items: center; gap: 9px; }
.b-direct[data-etat="connecte"] .point-direct { background: var(--framboise); }
.b-direct[data-etat="connecte"] .point-direct::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--framboise); animation: pouls 2.2s ease-out infinite; }
.b-direct[data-etat="connexion"] .point-direct { background: var(--bleu-gris); }
.b-direct[data-etat="erreur"] .point-direct { background: var(--danger); }
.tb-direct-etat { display: grid; gap: 7px; margin-bottom: 8px; flex: none; }
.tb-statut { font-size: 12px; color: var(--encre-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b-direct[data-etat="erreur"] .tb-statut { color: var(--rouge); }
.tb-compteurs { display: flex; flex-wrap: wrap; gap: 5px; }
.tb-compteurs span { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px; border-radius: 999px; background: var(--champ); font-size: 11.5px; color: var(--encre-2); white-space: nowrap; }
.tb-compteurs b { color: var(--encre); font-weight: 600; font-variant-numeric: tabular-nums; }
.fil-mini-liste { display: grid; gap: 6px; }
.fil-mini { display: grid; grid-template-columns: 40px 26px minmax(0, 1fr); grid-template-areas: "heure av nom" "heure av sous"; column-gap: 8px; row-gap: 1px; align-items: center; padding: 6px 10px 6px 9px; border-radius: 12px; border: 1px solid var(--interne-bord); }
.fil-mini time { grid-area: heure; font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.fil-mini .initiales { grid-area: av; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 700; color: #fff; }
.fil-mini strong { grid-area: nom; font-size: 13px; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fil-mini small { grid-area: sous; font-size: 11.5px; color: var(--encre-2); line-height: 1.35; }
.fil-mini.nouveau { animation: fil-nouveau 2.4s ease-out; }
@keyframes fil-nouveau { from { background: var(--pastel-2); } }

/* cartes internes (exceptions récentes, absences) */
.internes { display: grid; gap: 8px; }
.interne .entete-interne { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; font-size: 11.5px; color: var(--encre-2); }
.interne .corps-interne { grid-column: 1 / -1; min-width: 0; }
.interne { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--interne-bord); background: var(--carte); text-align: left; cursor: pointer; width: 100%; transition: border-color .15s ease-out; }
.interne:hover { border-color: var(--encre-3); }
.interne .petit { font-size: 11.5px; color: var(--encre-2); }
.interne strong { display: block; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.interne .quand { display: grid; gap: 2px; }
.interne .quand b { font-size: 13px; font-weight: 600; }
.interne .type { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--encre-2); }
.interne .type i { width: 8px; height: 8px; border-radius: 50%; }
.interne svg.fleche-coin { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; color: var(--encre-2); }
.interne .initiales { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff; }
.interne .texte { font-size: 12px; color: var(--encre-2); line-height: 1.4; }
.mini-bouton { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 10px; border-radius: 999px; background: var(--champ); font-size: 12px; font-weight: 600; color: var(--encre); }
.lien-fleche { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; flex: none; border: 0; background: none; padding: 0; font-size: 13.5px; font-weight: 500; color: var(--encre); cursor: pointer; align-self: flex-start; }
.lien-fleche:hover { color: var(--accent); }

/* ---------- boutons */
.bouton, .bouton-teinte, .bouton-texte { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; border: 0; cursor: pointer; font-weight: 500; font-size: 14px; white-space: nowrap; border-radius: 999px; transition: transform .12s ease-out, background-color .15s ease-out, opacity .15s; }
.bouton { background: var(--sombre); color: var(--sur-sombre); padding: 0 20px; }
.bouton:hover { filter: brightness(1.12); }
.bouton-teinte { background: var(--carte); color: var(--encre); padding: 0 18px; border: 1px solid var(--interne-bord); }
.bouton-teinte:hover { border-color: var(--encre-3); }
.bouton-texte { background: none; color: var(--accent); padding: 0 12px; }
.bouton-texte:hover { background: var(--survol); }
.bouton-texte.danger { color: var(--rouge); }
.bouton:active, .bouton-teinte:active, .bouton-texte:active { transform: scale(.97); }
.bouton:disabled, .bouton-teinte:disabled, .bouton-texte:disabled { opacity: .4; cursor: default; transform: none; filter: none; }
.grand { height: 48px; padding: 0 28px; font-size: 15.5px; }
a, .lien-accent { color: var(--accent); font-weight: 500; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
.lien { border: 0; background: none; padding: 0; color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ---------- réglages (lignes libellé → valeur) */
.groupe .champ { display: grid; grid-template-columns: minmax(170px, 1fr) minmax(0, 1.35fr); align-items: center; gap: 14px; min-height: 50px; padding: 7px 18px; position: relative; font-size: 14px; }
.groupe > .champ:not(:first-child), .contenu-groupe > .champ, .groupe > .contenu-groupe:not(:first-child) > .champ:first-child { border-top: 1px solid var(--ligne); }
.champ > input:not([type="checkbox"]), .champ > select, .unite input, .pauses input, .ajout-ferie input, .saisie input, .saisie-montants input, .ajout-colonne input, .ajout-colonne select, .en-ligne input {
  width: 100%; border: 1px solid transparent; border-radius: 12px; background: var(--champ); padding: 9px 12px; font-size: 14.5px; transition: border-color .15s ease-out;
}
.champ > input:focus, .champ > select:focus, .unite input:focus, .saisie input:focus, .saisie-montants input:focus, .pauses input:focus, :is(dialog, feuille-doc) input:focus, :is(dialog, feuille-doc) select:focus { outline: none; border-color: var(--accent); }
.champ > select, :is(dialog, feuille-doc) select, .menu select { appearance: none; -webkit-appearance: none; padding-right: 34px !important; }
.champ:has(> select)::after, .menu::after, :is(dialog, feuille-doc) label:has(> select)::after { content: ""; position: absolute; width: 10px; height: 7px; pointer-events: none; background: var(--encre-2); -webkit-mask: var(--chevron) center / contain no-repeat; mask: var(--chevron) center / contain no-repeat; }
.champ:has(> select)::after { right: 32px; top: 50%; margin-top: -3px; }
.unite { display: flex; align-items: center; gap: 8px; color: var(--encre-2); }
.champ > input[type="checkbox"], .champ > .segment, .champ > button, .champ > span:last-child:not(.unite) { justify-self: end; }
.resultat-test { color: var(--encre-2); font-size: 13.5px; }
.resultat-test.ok { color: var(--succes); }
.resultat-test.ko { color: var(--rouge); }
.sous-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 8px 6px 0; }
.en-ligne { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--encre-2); }
.en-ligne input { width: 150px; }
input::-webkit-calendar-picker-indicator { width: 16px; height: 16px; cursor: pointer; opacity: 1; background: var(--encre-2); -webkit-mask: var(--calendrier) center / contain no-repeat; mask: var(--calendrier) center / contain no-repeat; }
input[type="time"]::-webkit-calendar-picker-indicator { -webkit-mask-image: var(--horloge); mask-image: var(--horloge); }
input[role="switch"] { appearance: none; -webkit-appearance: none; position: relative; flex: none; margin: 0; cursor: pointer; width: 48px; height: 28px; border-radius: 999px; background: var(--interrupteur); transition: background-color .2s ease-out; }
input[role="switch"]::before { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .18); transition: transform .25s cubic-bezier(.2, .9, .3, 1); }
input[role="switch"]:checked { background: var(--sombre); }
input[role="switch"]:checked::before { transform: translateX(20px); }
.segment { display: inline-flex; gap: 4px; }
.segment button { height: 34px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--interne-bord); background: var(--carte); font-size: 13px; font-weight: 500; cursor: pointer; transition: background-color .2s ease-out, color .2s ease-out; }
.segment button.actif { background: var(--sombre); border-color: var(--sombre); color: var(--sur-sombre); }
.puces { display: flex; flex-wrap: wrap; gap: 8px; }
.puce { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border: 1px solid var(--interne-bord); border-radius: 999px; background: var(--carte); font-size: 13.5px; font-weight: 500; cursor: pointer; user-select: none; transition: background-color .15s ease-out; }
.puce input { position: absolute; opacity: 0; pointer-events: none; }
.puce:has(input:checked) { background: var(--sombre); border-color: var(--sombre); color: var(--sur-sombre); }
.puce:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.puce button { border: 0; background: none; padding: 0; margin-right: -6px; width: 20px; height: 20px; display: grid; place-items: center; color: var(--encre-2); cursor: pointer; border-radius: 50%; }
.puce button svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.ajout-ferie { display: flex; gap: 8px; margin-top: 14px; }
.ajout-ferie input { width: auto; }
.pauses { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.pauses label { display: grid; gap: 6px; font-size: 12px; color: var(--encre-2); }
.logos { margin-top: 12px; }
.vignette { display: grid; grid-template-columns: 100px 1fr auto; align-items: center; gap: 16px; padding: 12px 20px; }
.vignette + .vignette { border-top: 1px solid var(--ligne); }
.apercu { width: 100px; height: 54px; padding: 4px; border-radius: 12px; background: #fff; border: 1px solid var(--interne-bord); display: grid; place-items: center; overflow: hidden; }
.apercu.carre { width: 54px; }
.apercu img { display: none; max-width: 86%; max-height: 78%; }
.apercu.plein img { display: block; }
.apercu.plein span { display: none; }
.apercu span { font-size: 11px; color: #4a5d62; }
.vignette-texte { display: grid; gap: 2px; }
.vignette-texte strong { font-weight: 600; }
.vignette-texte span { font-size: 12.5px; color: var(--encre-2); }

/* ---------- tableaux */
table { width: 100%; border-collapse: collapse; }
.donnees { font-size: 13.5px; }
.donnees th, .saisie th, table.jours th { text-align: left; font-size: 11.5px; font-weight: 600; letter-spacing: .02em; color: var(--encre-3); white-space: nowrap; border-bottom: 1px solid var(--ligne); }
.donnees th, .saisie th { padding: 14px 12px 10px; }
.donnees td { padding: 12px 12px; border-bottom: 1px solid var(--ligne); vertical-align: middle; line-height: 1.45; white-space: nowrap; }
/* les libellés longs (classe « long », libellé du grand livre) passent à la ligne au lieu d'élargir le tableau */
.donnees td.gl-libelle { white-space: normal; min-width: 220px; }
.donnees td { font-variant-numeric: tabular-nums; }
.donnees tr > :first-child { padding-left: 22px; }
.donnees tr > :last-child { padding-right: 22px; }
.donnees tbody tr:last-child > td { border-bottom: 0; }
.donnees tfoot td { border-top: 1px solid var(--interne-bord); border-bottom: 0; font-weight: 600; }
.num { text-align: right !important; }
.fort { font-weight: 600; }
.long { white-space: normal !important; min-width: 150px; }
.rouge { color: var(--rouge); }
.orange { color: var(--mauve-texte); }
.vert { color: var(--succes); }
.secondaire { color: var(--encre-2); }
.nom { display: grid; gap: 2px; }
.nom strong { font-size: 14.5px; font-weight: 500; }
.nom span { font-size: 12.5px; color: var(--encre-2); }
tr.salarie { cursor: pointer; }
tr.salarie:hover > td { background: var(--survol); }
tr.salarie:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.chevron { display: inline-block; width: 7px; height: 7px; margin: 0 10px 2px 0; border: solid var(--encre-3); border-width: 0 2px 2px 0; transform: rotate(-45deg); transition: transform .2s ease-out; }
tr.ouvert .chevron { transform: rotate(45deg); }
tr.detail > td { padding: 0 20px 18px 40px; background: var(--champ); white-space: normal; }
table.jours { font-size: 13.5px; }
table.jours th { padding: 12px 8px 8px; }
table.jours td { padding: 8px; border-bottom: 1px solid var(--ligne); }
table.jours tbody tr:last-child td { border-bottom: 0; }
tr.absent > td { background: rgba(198, 74, 96, 0.08); }
tr.repos > td { color: var(--encre-3); }
.detail .pied { margin: 12px 0 0; }
.saisie { font-size: 13.5px; }
.saisie td { padding: 6px 5px; }
.saisie tr > :first-child { padding-left: 14px; }
.saisie input { padding: 8px 10px; font-size: 13.5px; border-radius: 10px; }
.etiquette-info { font-size: 12px; color: var(--encre-2); white-space: nowrap; }
.saisie-montants input { width: 116px; padding: 8px 10px; text-align: right; border-radius: 10px; }
.ajout-colonne { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0 0; }
.ajout-colonne input { width: 280px; background: var(--carte); border-color: var(--interne-bord); }
.menu { position: relative; display: inline-flex; }
.menu::after { right: 14px; top: 50%; margin-top: -3px; }
.menu select { background: var(--carte); border: 1px solid var(--interne-bord); border-radius: 999px; padding: 9px 14px; }

/* liste « À vérifier » de la page Pointage */
.ligne { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 16px; padding: 11px 14px 11px 18px; }
.ligne + .ligne { border-top: 1px solid var(--ligne); }
.ligne-texte { display: grid; gap: 3px; min-width: 0; }
.ligne-titre { font-weight: 500; font-size: 14px; }
.ligne-sous { font-size: 13px; color: var(--encre-2); }
.ligne-montant { color: var(--rouge); font-weight: 600; }
.ligne-salarie { cursor: pointer; grid-template-columns: minmax(0, 1fr) auto 20px; transition: background-color .15s ease-out; }
.ligne-salarie:hover { background: var(--survol); }
.ligne-salarie .chevron { margin: 0; justify-self: center; }
.ligne-salarie[aria-expanded="true"] .chevron { transform: rotate(45deg); }
.ligne-salarie[aria-expanded="true"] { background: var(--pastel-3); }
.heures { display: inline-flex; flex-wrap: wrap; gap: 4px 6px; font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--encre); }
.heures .manquant { color: var(--mauve-texte); }
.vide { margin: 0; padding: 18px 20px; color: var(--encre-2); }
.avis { margin: -4px 0 10px; font-size: 12.5px; }
.avis.avert { color: var(--mauve-texte); }
.avis.erreur { color: var(--rouge); }

/* barre d'enregistrement */
.barre-enregistrer { position: sticky; bottom: 4px; z-index: 4; margin-top: 26px; padding: 8px 8px 8px 22px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-radius: 999px; border: 1px solid var(--interne-bord); background: var(--carte); box-shadow: 0 16px 40px rgba(var(--ombre), 0.16); font-size: 13.5px; color: var(--encre-2); animation: apparaitre .22s cubic-bezier(.2, .9, .3, 1); background: var(--option); }
.barre-enregistrer span { margin-right: auto; }

/* feuilles */
dialog.feuille { width: min(500px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--verre-popup-bord); border-radius: 28px; color: var(--encre); background: var(--verre-popup); -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%); box-shadow: var(--verre-popup-reflet), 0 30px 80px rgba(var(--ombre), .28); }
dialog.feuille[open] { animation: apparaitre .22s cubic-bezier(.2, .9, .3, 1); }
@keyframes apparaitre { from { opacity: 0; transform: translateY(8px); } }
dialog::backdrop { background: rgba(14, 40, 44, .26); }
:is(dialog, feuille-doc) form, :is(dialog, feuille-doc) .feuille-corps { padding: 26px 26px 22px; display: grid; gap: 15px; }
:is(dialog, feuille-doc) h2 { margin: 0; font-size: 24px; font-weight: 500; letter-spacing: -0.025em; }
:is(dialog, feuille-doc) label { display: grid; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--encre-2); position: relative; }
:is(dialog, feuille-doc) input, :is(dialog, feuille-doc) select { width: 100%; min-width: 0; border: 1px solid var(--verre-popup-bord); border-radius: 12px; background: var(--verre-popup-champ); padding: 11px 13px; font-size: 14.5px; }
:is(dialog, feuille-doc) label:has(> select)::after { right: 15px; bottom: 18px; }
:is(dialog, feuille-doc) form > *, :is(dialog, feuille-doc) .feuille-corps > *, :is(dialog, feuille-doc) .deux > * { min-width: 0; }
:is(dialog, feuille-doc) .deux { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.poignee { display: none; }
.aide { margin: -4px 0 0; font-size: 13px; color: var(--encre-2); }
.erreur { margin: 0; min-height: 1.2em; font-size: 13px; color: var(--rouge); }

#toast { position: fixed; left: 50%; bottom: 96px; z-index: 20; max-width: min(560px, calc(100vw - 32px)); padding: 12px 20px; border-radius: 999px; background: var(--sombre); color: var(--sur-sombre); font-size: 13.5px; font-weight: 500; box-shadow: 0 16px 40px rgba(var(--ombre), .25); opacity: 0; transform: translate(-50%, 10px); pointer-events: none; transition: opacity .22s ease-out, transform .22s ease-out; }
#toast.visible { opacity: 1; transform: translate(-50%, 0); }
#toast.erreur { background: var(--danger); color: #fff; }
.ferme { max-width: 520px; margin: 22vh auto; text-align: center; color: var(--encre-2); font-size: 17px; }

/* ---------- pages : la langue du tableau de bord (chiffres clés, cartes à en-tête, pastilles, puces colorées) */
.initiales { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff; }
.onglet > .carte, .onglet > .chiffres, .exc-grille, #bulletins-resultat > * { margin-bottom: 20px; }
.compte-gris { margin-left: 2px; color: var(--encre-3); font-size: 13px; font-weight: 500; }
.carte h2 .compte { margin-left: 2px; font-size: 14px; }
a.rond-petit:hover { text-decoration: none; }
.rond-petit.danger { color: var(--rouge); }
.rond-petit.danger:hover { background: var(--pastel-1); }
.bouton-teinte.danger { color: var(--rouge); }
.petit { font-size: 12.5px; }

/* chiffres clés */
.chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
/* Présences → Pointage (02/11) : une carte par salarié, retards, retenue et absences en minutes et en jours */
.pt-personnes { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-bottom: 16px; }
.pt-personne { display: grid; align-content: start; gap: 10px; padding: 14px 16px; color: var(--encre); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s ease-out; }
.pt-personne:hover { border-color: var(--interne-bord); }
.pt-personne:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pt-tete { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pt-tete .initiales { flex: none; }
.pt-nom { display: grid; min-width: 0; line-height: 1.3; }
.pt-nom strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.pt-nom small { overflow: hidden; color: var(--encre-2); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.pt-valeurs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding-top: 10px; border-top: 1px solid var(--ligne); }
.pt-valeurs dt { color: var(--encre-2); font-size: 11.5px; }
.pt-valeurs dd { margin: 2px 0 0; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pt-valeurs dd small { font-size: 11.5px; font-weight: 500; }
.pt-valeurs dd .secondaire { font-weight: 400; }
.pt-valeurs .pt-sous { display: block; color: var(--encre-2); font-weight: 400; }
.pt-puces { display: flex; flex-wrap: wrap; gap: 6px; }
.pt-puces .etat-chip { font-size: 11.5px; }
.carte.chiffre { flex-direction: row; align-items: center; gap: 14px; padding: 16px 18px; }
.chiffre-icone { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 13%, transparent); }
:root[data-theme="sombre"] .chiffre-icone { color: color-mix(in srgb, var(--c) 45%, #fff); background: color-mix(in srgb, var(--c) 30%, transparent); }
.chiffre-icone svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.chiffre-texte { display: grid; gap: 1px; min-width: 0; }
.chiffre-libelle { font-size: 12.5px; color: var(--encre-2); }
.chiffre b { font-size: 22px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.2; white-space: nowrap; }
.chiffre b small, .bulletin-net b small { font-size: 12.5px; font-weight: 500; letter-spacing: 0; color: var(--encre-2); }
.chiffre-sous { font-size: 12px; line-height: 1.4; color: var(--encre-3); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }

/* cartes qui portent un tableau : l'en-tête garde sa marge, le tableau va d'un bord à l'autre */
.carte.carte-table { padding: 18px 0 0; overflow: hidden; }
.carte-table > header { padding: 0 22px; flex-wrap: wrap; }
.carte-table .donnees thead th { padding-top: 10px; padding-bottom: 10px; background: var(--champ); border-bottom: 0; }
.carte-pied { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 22px 16px; border-top: 1px solid var(--ligne); }
.carte-pied .ajout-colonne, .carte-pied .pied { margin: 0; }
.nom-avatar { display: flex; align-items: center; gap: 10px; min-width: 0; }
.nom-avatar strong { font-weight: 500; }
.nom-avatar .chevron { flex: none; margin: 0 2px 2px 0; }
.etat-chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; background: var(--champ); color: var(--encre-2); font-size: 12px; font-weight: 600; white-space: nowrap; align-self: flex-start; }
.etat-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.etat-chip.ok { background: var(--pastel-2); color: var(--succes); }
.etat-chip.ko { background: var(--pastel-1); color: var(--rouge); }
.action-requise { height: 20px; padding: 0 8px; font-size: 11px; vertical-align: middle; }
.nom .action-requise { margin-left: 8px; }
.total-pill { display: inline-flex; align-items: center; height: 30px; padding: 0 14px; border-radius: 999px; background: var(--sombre); color: var(--sur-sombre); font-weight: 600; }
.etat-sync { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--encre-2); }
.etat-sync:empty { display: none; }
.etat-sync::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--encre-3); }
.etat-sync.ok::before { background: var(--succes); box-shadow: 0 0 0 3px var(--pastel-2); }
.etat-sync.ko::before { background: var(--danger); box-shadow: 0 0 0 3px var(--pastel-1); }
.heures span { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; border: 1px solid var(--interne-bord); background: var(--carte); font-size: 12px; }
.heures .manquant { border-style: dashed; border-color: var(--mauve); }
.heures .ajoute { border-style: dashed; border-color: var(--accent); color: var(--accent); font-weight: 600; }
.heures .ignore { border-style: dashed; color: var(--encre-3); text-decoration: line-through; }

/* À vérifier : cartes pastel comme le tableau de bord ; la carte ouverte prend toute la ligne */
.grille-verif { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 10px; }
.verif-carte { border-radius: 16px; background: var(--pastel-1); }
.verif-carte:nth-child(5n+2) { background: var(--pastel-2); }
.verif-carte:nth-child(5n+3) { background: var(--pastel-3); }
.verif-carte:nth-child(5n+4) { background: var(--pastel-4); }
.verif-carte:nth-child(5n+5) { background: var(--pastel-5); }
.verif-carte.ouvert { grid-column: 1 / -1; }
.verif-tete { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 12px 12px 12px 14px; border-radius: 16px; cursor: pointer; }
.verif-tete:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.verif-nom { display: grid; gap: 1px; min-width: 0; }
.verif-nom strong { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.verif-nom span { font-size: 12px; color: var(--encre-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chevron-rond { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--encre-3); display: grid; place-items: center; transition: transform .2s ease-out; }
.chevron-rond .chevron { margin: 0 2px 0 0; }
.verif-tete:hover .chevron-rond { transform: translateX(2px); }
.ouvert .chevron-rond { transform: rotate(90deg); }
.ouvert .verif-tete:hover .chevron-rond { transform: rotate(90deg); }
.jours-verif { display: grid; gap: 6px; padding: 0 10px 10px; }
.jour-verif { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: 14px; padding: 10px 12px 10px 14px; border-radius: 12px; background: var(--carte); }
.jour-texte { display: grid; gap: 2px; min-width: 0; }
.jour-texte b { font-size: 13px; font-weight: 600; }
.jour-texte span { font-size: 12.5px; color: var(--encre-2); }
.jour-verif .bouton-texte { height: 30px; padding: 0 14px; font-size: 13px; background: var(--sombre); color: var(--sur-sombre); }
.jour-verif .bouton-texte:hover { background: var(--sombre); filter: brightness(1.12); }

/* exceptions */
.filtres { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.filtres:empty { display: none; }
/* page Devis : devis, bons de commande, bons de livraison (petits restes n° 6) */
.types-pieces { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.types-pieces .pilule { height: 34px; padding: 0 14px; }
/* bon de livraison : quantités seulement (prix, remise, TVA et total cachés) */
.saisie-lignes.sans-prix th:nth-child(n+4):nth-child(-n+7), .saisie-lignes.sans-prix td:nth-child(n+4):nth-child(-n+7) { display: none; }
.filtres .pilule { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 8px 0 14px; }
.filtres .pilule i { width: 8px; height: 8px; border-radius: 50%; }
.filtres .nb { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center; background: var(--champ); color: var(--encre-2); font-size: 11.5px; font-weight: 600; }
.filtres .pilule.actif .nb { background: rgba(255, 255, 255, 0.2); color: var(--sur-sombre); }
.exc-grille { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; align-items: start; }
.exc-grille > .carte, .exc-cote > .carte { margin: 0; }
.exc-cote { display: grid; gap: 14px; }
.date-bloc { display: inline-grid; justify-items: center; min-width: 46px; padding: 4px 6px; border-radius: 12px; background: var(--champ); line-height: 1.15; }
.date-bloc b { font-size: 16px; font-weight: 600; }
.date-bloc span { font-size: 11px; color: var(--encre-2); }
.type-chip { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 12px; border-radius: 999px; background: color-mix(in srgb, var(--c) 15%, transparent); font-size: 12.5px; font-weight: 500; }
.type-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
:root[data-theme="sombre"] .type-chip { background: color-mix(in srgb, var(--c) 32%, transparent); }
:root[data-theme="sombre"] .type-chip i { background: color-mix(in srgb, var(--c) 55%, #fff); }
.interne.statique { cursor: default; }
.interne.statique:hover { border-color: var(--interne-bord); }
.barre-ligne header b.neutre { color: var(--encre); }

/* primes et avances */
.carte.fixes-carte { flex-direction: row; align-items: flex-start; gap: 14px; padding: 16px 18px; }
.fixes-corps { flex: 1; min-width: 0; }
.fixes-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.fixes-carte h2 { margin: 2px 0 0; }
button.puce-info { font: inherit; cursor: pointer; transition: border-color .15s ease-out; }
button.puce-info:hover { border-color: var(--encre-3); }
.puces-info { display: flex; flex-wrap: wrap; gap: 8px; }
.puce-info { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 3px 14px 3px 4px; border-radius: 999px; border: 1px solid var(--interne-bord); background: var(--carte); font-size: 13px; color: var(--encre-2); }
.puce-info b { margin-right: 6px; color: var(--encre); font-weight: 600; }
.puce-info .initiales, .puce-info .chiffre-icone { width: 28px; height: 28px; font-size: 10px; }
.puce-info .chiffre-icone svg { width: 15px; height: 15px; }
.legende-signes { display: flex; gap: 14px; font-size: 12.5px; color: var(--encre-2); }
.legende-signes span { display: inline-flex; align-items: center; gap: 6px; }
.signe { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font-style: normal; font-size: 12px; font-weight: 700; line-height: 1; }
.signe.plus { background: var(--pastel-2); color: var(--succes); }
.signe.moins { background: var(--pastel-1); color: var(--rouge); }
.col-tete { display: inline-flex; align-items: center; gap: 6px; }
.saisie-dh { position: relative; display: inline-flex; align-items: center; }
.saisie-montants td { padding-left: 6px; padding-right: 6px; }
.saisie-montants .saisie-dh input { width: 100px; padding-right: 32px; border-color: var(--interne-bord); }
.saisie-montants .saisie-dh input:not(:placeholder-shown) { background: var(--carte); border-color: var(--encre-3); font-weight: 600; }
.saisie-montants input::-webkit-inner-spin-button, .saisie-montants input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.saisie-dh span { position: absolute; right: 11px; font-size: 11.5px; color: var(--encre-3); pointer-events: none; }
.total-ligne { font-weight: 600; }
.badge-ae { display: inline-flex; align-items: center; height: 20px; margin-left: 8px; padding: 0 8px; border-radius: 999px; background: var(--pastel-3); color: var(--mauve-texte); font-size: 11px; font-weight: 600; vertical-align: 1px; }
.saisie select { width: 100%; border: 1px solid transparent; border-radius: 10px; background: var(--champ); padding: 8px 10px; font-size: 13.5px; }
.saisie select:focus { outline: none; border-color: var(--accent); }
.en-ligne .unite input { width: 84px; }

/* bulletins */
.etapes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.carte.etape { gap: 6px; padding: 18px; align-items: flex-start; }
.etape h2 { font-size: 16px; }
.etape p { flex: 1; margin: 0 0 6px; font-size: 13px; color: var(--encre-2); }
.etape-num { width: 36px; height: 36px; margin-bottom: 6px; border-radius: 50%; display: grid; place-items: center; background: var(--champ); color: var(--encre-2); font-size: 14px; font-weight: 600; }
.etape-num svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.etape.fait .etape-num { background: var(--pastel-2); color: var(--succes); }
.etape.attente .etape-num { background: var(--pastel-1); color: var(--rouge); }
.etape .lien-fleche { margin-top: 0; }
.carte.etape.prochaine { background: var(--sombre); border-color: transparent; color: var(--sur-sombre); }
.etape.prochaine p { color: color-mix(in srgb, var(--sur-sombre) 72%, transparent); }
.etape.prochaine .etape-num { background: rgba(255, 255, 255, 0.16); color: var(--sur-sombre); }
.etape.prochaine .bouton { background: var(--sur-sombre); color: var(--sombre); }
.grille-bulletins { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.carte.bulletin-carte { gap: 12px; }
.bulletin-carte > header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; margin: 0; }
.bulletin-net { display: grid; padding: 11px 14px; border-radius: 14px; background: var(--pastel-2); }
.bulletin-carte:nth-child(5n+2) .bulletin-net { background: var(--pastel-1); }
.bulletin-carte:nth-child(5n+3) .bulletin-net { background: var(--pastel-3); }
.bulletin-carte:nth-child(5n+4) .bulletin-net { background: var(--pastel-4); }
.bulletin-carte:nth-child(5n+5) .bulletin-net { background: var(--pastel-5); }
.bulletin-net span { font-size: 12px; color: var(--encre-2); }
.bulletin-net b { font-size: 21px; font-weight: 600; letter-spacing: -0.02em; }
.bulletin-lignes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.bulletin-lignes:has(> :nth-child(4)) { grid-template-columns: repeat(4, auto); justify-content: space-between; column-gap: 10px; }
.carte.bulletin-carte { container-type: inline-size; }
@container (max-width: 255px) { .bulletin-lignes:has(> :nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; } }  /* carte étroite : 2 × 2 */
.bulletin-lignes div { display: grid; gap: 1px; min-width: 0; }
.bulletin-lignes dt { font-size: 11.5px; color: var(--encre-3); }
.bulletin-lignes dd { margin: 0; font-size: 13px; font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bulletin-lignes dt { white-space: nowrap; }
.avertissements ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 13.5px; }
.note-info { display: flex; align-items: center; gap: 10px; margin: 0; padding: 12px 16px; border-radius: 16px; border: 1px dashed var(--encre-3); font-size: 13px; color: var(--encre-2); }
.note-info svg { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; }

/* société : fiche et sommaire à gauche, formulaire à droite */
.params-grille { display: grid; grid-template-columns: 270px minmax(0, 820px); gap: 22px; align-items: start; }
.params-cote { position: sticky; top: 8px; display: grid; gap: 14px; }
.carte.fiche-societe { align-items: center; gap: 3px; padding: 22px 18px 16px; text-align: center; }
.fiche-symbole { width: 72px; height: 72px; margin-bottom: 10px; border-radius: 50%; display: grid; place-items: center; background: var(--terracotta); color: var(--nuit); font-size: 22px; font-weight: 700; }
.fiche-symbole.image { background: #fff; border: 1px solid var(--interne-bord); box-shadow: 0 0 0 6px var(--pastel-2); }
.fiche-symbole img { width: 60%; height: 60%; object-fit: contain; }
.fiche-societe strong { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
#fiche-raison { font-size: 12.5px; color: var(--encre-2); }
.fiche-infos { width: 100%; margin-top: 12px; border-top: 1px solid var(--ligne); }
.fiche-infos div { display: flex; justify-content: space-between; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--ligne); font-size: 13px; }
.fiche-infos div:last-child { border-bottom: 0; padding-bottom: 0; }
.fiche-infos span { color: var(--encre-2); }
.fiche-infos b { font-weight: 600; }
.carte.params-nav { gap: 2px; padding: 8px; }
.params-nav button { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 12px; border: 0; border-radius: 12px; background: none; color: var(--encre-2); font-size: 13.5px; text-align: left; cursor: pointer; }
.params-nav button::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--encre-3); }
.params-nav button:hover { background: var(--survol); color: var(--encre); }
.params-corps > .titre-groupe:first-child { margin-top: 4px; }
.titre-groupe { scroll-margin-top: 10px; }

/* réglages : trois cartes */
.reglages-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 14px; }
.carte.reglage { gap: 12px; padding: 18px; }
.carte.reglage > header { margin-bottom: 0; }
.reglage .etat-chip { max-width: 100%; height: auto; min-height: 24px; padding-block: 3px; white-space: normal; }
.reglage-texte { flex: 1; margin: 0; font-size: 13.5px; color: var(--encre-2); }
.reglage-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.themes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.theme-choix { display: grid; gap: 8px; padding: 8px 8px 10px; border: 1px solid var(--interne-bord); border-radius: 16px; background: var(--carte); font-size: 13.5px; font-weight: 500; text-align: center; cursor: pointer; transition: border-color .15s ease-out; }
.theme-choix:hover { border-color: var(--encre-3); }
.theme-choix.actif { border-color: var(--sombre); box-shadow: 0 0 0 1px var(--sombre); }
.apercu-theme { display: grid; grid-template-columns: 1fr 1.4fr; grid-template-rows: 8px 1fr; gap: 5px; height: 78px; padding: 8px; border-radius: 10px; }
.apercu-theme i { border-radius: 5px; }
.apercu-theme i:first-child { grid-column: 1 / -1; border-radius: 4px; }
.apercu-theme.clair { background: #f4f1ec; box-shadow: inset 0 0 0 1px #e6e0d6; }
.apercu-theme.clair i { background: #fff; box-shadow: 0 1px 3px rgba(var(--ombre), 0.08); }
.apercu-theme.sombre { background: #0b2229; }
.apercu-theme.sombre i { background: rgba(255, 255, 255, 0.08); }

@media (max-width: 1400px) {
  .exc-grille { grid-template-columns: minmax(0, 1fr); }
  .exc-cote { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; }
}
@media (max-width: 1100px) {
  .params-grille { grid-template-columns: 230px minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  /* 01/11 : deux cartes par ligne, le montant sortait de la sienne (« 212 493,91 DH » : 4 px à 390 px de large, 19 px à
     360) ; petite icône à côté du libellé, montant sur toute la largeur à une taille qui suit l'écran, « DH » à la ligne
     seulement s'il ne tient pas (les chiffres sont liés par des espaces insécables, mad()) */
  .carte.chiffre { display: grid; grid-template-columns: 28px minmax(0, 1fr); grid-template-areas: "icone libelle" "valeur valeur" "sous sous";
    align-items: center; column-gap: 8px; row-gap: 3px; padding: 12px 12px 13px; }
  .carte.chiffre .chiffre-texte { display: contents; }
  .chiffre-icone { grid-area: icone; width: 28px; height: 28px; }
  .chiffre-icone svg { width: 15px; height: 15px; }
  .chiffre-libelle { grid-area: libelle; min-width: 0; font-size: 12px; line-height: 1.25; }
  .chiffre b { grid-area: valeur; margin-top: 3px; font-size: clamp(16px, 5vw, 20px); white-space: normal; overflow-wrap: anywhere; }
  .chiffre-sous { grid-area: sous; font-size: 11.5px; }
  .grille-verif, .etapes, .params-grille { grid-template-columns: minmax(0, 1fr); }
  .jour-verif { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; }
  .jour-verif > :nth-child(1) { grid-area: 1 / 1; }
  .jour-verif > :nth-child(2) { grid-area: 2 / 1; }
  .jour-verif > :nth-child(3) { grid-area: 2 / 2; justify-self: end; }
  .jour-verif > :nth-child(4) { grid-area: 1 / 2; }
  .params-cote { position: static; }
  dialog.feuille.confirmation { width: min(360px, calc(100vw - 32px)); margin: auto; border-radius: 24px; padding-bottom: 0; }
  dialog.feuille.confirmation[open] { animation: apparaitre .2s cubic-bezier(.2, .9, .3, 1); }
  .params-nav, .fixes-carte > .chiffre-icone { display: none; }
}

/* justificatifs des exceptions */
.motif { display: grid; gap: 2px; }
.motif span { font-size: 12px; color: var(--encre-3); }
.pieces { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.piece { display: inline-flex; align-items: center; height: 28px; max-width: 200px; border-radius: 999px; border: 1px solid var(--interne-bord); background: var(--carte); font-size: 12px; }
.piece-lien { display: inline-flex; align-items: center; gap: 6px; min-width: 0; padding: 0 2px 0 10px; color: var(--encre); font-weight: 500; }
a.piece-lien:hover { text-decoration: none; color: var(--accent); }
.piece-lien span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.piece svg { flex: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.piece-lien svg { color: var(--accent); }
.piece button { flex: none; width: 22px; height: 22px; margin: 0 3px 0 2px; border: 0; border-radius: 50%; background: none; display: grid; place-items: center; color: var(--encre-3); cursor: pointer; }
.piece button:hover { background: var(--pastel-1); color: var(--rouge); }
.piece button svg { width: 10px; height: 10px; stroke-width: 2.4; }
.rond-petit.joindre svg { transform: rotate(-45deg); }
.champ-pieces { display: grid; gap: 6px; min-width: 0; }
.etiquette-pieces { font-size: 12.5px; font-weight: 500; color: var(--encre-2); }
.etiquette-pieces small { margin-left: 4px; font-size: 12px; font-weight: 400; color: var(--encre-3); }
:is(dialog, feuille-doc) label.zone-pieces { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 54px; padding: 10px 14px; border: 1.5px dashed var(--encre-3); border-radius: 14px; background: var(--verre-popup-champ); font-size: 13.5px; color: var(--encre-2); cursor: pointer; text-align: center; transition: border-color .15s ease-out, color .15s ease-out; }
:is(dialog, feuille-doc) label.zone-pieces:hover, :is(dialog, feuille-doc) label.zone-pieces.survol { border-color: var(--accent); color: var(--accent); }
:is(dialog, feuille-doc) label.zone-pieces:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.zone-pieces svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transform: rotate(-45deg); }
#exc-pieces-liste:empty { display: none; }
.interne .clip { display: inline-grid; margin-left: 4px; color: var(--encre-2); }
.interne .clip svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; transform: rotate(-45deg); }

/* lignes d'exception : une saisie = une ligne, qui s'ouvre */
.ligne-exc { cursor: pointer; }
.ligne-exc:hover > td { background: var(--survol); }
.ligne-exc:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.plage { display: flex; align-items: center; gap: 8px; }
.plage > span { display: grid; font-size: 11.5px; line-height: 1.25; color: var(--encre-2); white-space: nowrap; }
.plage b { font-size: 13px; font-weight: 600; color: var(--encre); }
.motif .hors { justify-self: start; margin-top: 3px; padding: 1px 9px; border-radius: 999px; background: var(--pastel-3); color: var(--mauve-texte); font-size: 11.5px; font-style: normal; font-weight: 500; }
.chevron-ligne { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--interne-bord); }
.chevron-ligne .chevron { margin: 0 2px 0 0; }
.ligne-exc:hover .chevron-ligne { border-color: var(--encre-3); }
#btn-suppr-exc { margin-right: auto; }

/* en direct : qui est là, qui est sorti, derniers pointages */
.carte-direct > header { justify-content: flex-start; flex-wrap: wrap; gap: 8px 14px; }
.titre-direct { display: inline-flex; align-items: center; gap: 9px; }
.point-direct { position: relative; width: 9px; height: 9px; border-radius: 50%; background: var(--encre-3); }
.carte-direct[data-etat="connecte"] .point-direct { background: var(--framboise); }
.carte-direct[data-etat="connecte"] .point-direct::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--framboise); animation: pouls 2.2s ease-out infinite; }
@keyframes pouls { from { transform: scale(1); opacity: .55; } to { transform: scale(2.8); opacity: 0; } }
.carte-direct[data-etat="connexion"] .point-direct { background: var(--bleu-gris); }
.carte-direct[data-etat="erreur"] .point-direct { background: var(--danger); }
.direct-etat { flex: 1; min-width: 220px; font-size: 12.5px; color: var(--encre-2); }
.carte-direct[data-etat="erreur"] .direct-etat { color: var(--rouge); }
.direct-etat .lien { color: var(--accent); }
.bascule-direct { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: var(--encre-2); cursor: pointer; }
.direct-resume { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.puce-etat { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: 999px; background: var(--champ); font-size: 13px; color: var(--encre-2); }
.puce-etat b { font-size: 14px; color: var(--encre); }
.puce-etat::before, .voyant { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--encre-3); }
.puce-etat.present::before, .tuile-direct.present .voyant { background: var(--accent); }
.puce-etat.sorti::before, .tuile-direct.sorti .voyant { background: var(--mauve); }
.direct-grille { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; align-items: start; }
.direct-tuiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.tuile-direct { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--interne-bord); background: var(--carte); }
.tuile-direct.absent { background: transparent; border-style: dashed; }
.tuile-direct.absent .initiales { filter: grayscale(1); opacity: .55; }
.tuile-direct.excuse { background: var(--pastel-3); border-color: transparent; }
.puce-etat.excuse::before, .tuile-direct.excuse .voyant { background: var(--prune); }
.tuile-texte { display: grid; min-width: 0; padding-right: 12px; }
.tuile-texte strong { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tuile-texte small { font-size: 12px; color: var(--encre-2); }
.tuile-direct .retard { color: var(--rouge); font-weight: 600; }
.tuile-direct .voyant { position: absolute; top: 10px; right: 10px; }
.direct-fil { padding: 12px 12px 10px; border-radius: 16px; background: var(--champ); }
.direct-fil h3 { margin: 0 4px 8px; font-size: 13px; font-weight: 600; }
.direct-fil ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 268px; overflow-y: auto; }
.direct-fil li { position: relative; isolation: isolate; display: grid; grid-template-columns: 42px auto minmax(0, 1fr); align-items: center; gap: 10px; padding: 6px 8px; border-radius: 12px; }
.direct-fil li.nouveau::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 12px; background: var(--pastel-2); animation: eteindre 2.4s ease-out forwards; }
@keyframes eteindre { from { opacity: 1; } to { opacity: 0; } }
.direct-fil time { font-size: 13px; font-weight: 600; }
.direct-fil .initiales { width: 26px; height: 26px; font-size: 10px; }
.direct-fil li > span { display: grid; min-width: 0; }
.direct-fil li strong { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.direct-fil li small { font-size: 11.5px; color: var(--encre-2); }
@media (max-width: 860px) {
  .direct-grille { grid-template-columns: minmax(0, 1fr); }
  .direct-etat { flex-basis: 100%; min-width: 0; order: 3; }
}

/* menus déroulants : un bouton à la place du select, une liste en verre à la place de la liste de Windows */
.choix-natif { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; border: 0 !important; opacity: 0; pointer-events: none; clip-path: inset(50%); }
.champ:has(> select)::after, .menu::after, :is(dialog, feuille-doc) label:has(> select)::after { display: none; }
.choix { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-width: 0; text-align: left; cursor: pointer; color: var(--encre); font: inherit; border: 1px solid transparent; border-radius: 12px; background: var(--champ); padding: 9px 12px; font-size: 14.5px; white-space: nowrap; transition: border-color .15s ease-out; }
.choix-texte { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.choix::after { content: ""; flex: none; width: 10px; height: 7px; background: var(--encre-2); -webkit-mask: var(--chevron) center / contain no-repeat; mask: var(--chevron) center / contain no-repeat; transition: transform .15s ease-out; }
.choix[aria-expanded="true"]::after { transform: rotate(180deg); }
.choix:hover { border-color: var(--interne-bord); }
.choix:focus-visible, .choix[aria-expanded="true"] { outline: none; border-color: var(--accent); }
.choix:disabled { opacity: .5; cursor: default; }
:is(dialog, feuille-doc) .choix { border-color: var(--verre-popup-bord); background: var(--verre-popup-champ); padding: 11px 13px; }
.menu .choix { width: auto; border-color: var(--interne-bord); background: var(--carte); border-radius: 999px; padding: 9px 14px; font-size: 14px; }
.saisie .choix { padding: 8px 10px; border-radius: 10px; font-size: 13.5px; }
.choix-liste { position: fixed; inset: auto; margin: 0; min-width: 160px; max-width: min(460px, calc(100vw - 16px)); max-height: min(320px, 60vh); overflow-y: auto; padding: 6px; border: 1px solid var(--verre-popup-bord); border-radius: 16px; color: var(--encre); background: var(--verre-popup); -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%); box-shadow: var(--verre-popup-reflet), 0 18px 50px rgba(var(--ombre), .24); }
.choix-liste:popover-open { animation: deplier .14s ease-out; }
@keyframes deplier { from { opacity: 0; transform: translateY(-4px); } }
.choix-option { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 12px; border-radius: 10px; font-size: 14px; cursor: pointer; white-space: nowrap; }
.choix-option.actif { background: var(--survol); }
.choix-option[aria-selected="true"] { font-weight: 600; }
.choix-option[aria-selected="true"]::after { content: ""; width: 12px; height: 9px; border: solid var(--accent); border-width: 0 0 2px 2px; transform: translateY(-2px) rotate(-45deg) scale(.8); }
.choix-option[aria-disabled="true"] { opacity: .45; cursor: default; }
.choix-groupe { padding: 10px 12px 4px; color: var(--encre-3); font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.choix-groupe:first-child { padding-top: 4px; }
.profil { border-radius: 999px; }
.profil:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* confirmation : pop-up en verre au centre */
dialog.feuille.confirmation { width: min(400px, calc(100vw - 32px)); text-align: center; }
.confirmation form { justify-items: center; gap: 10px; padding: 26px 24px 20px; }
.confirmation h2 { font-size: 19px; letter-spacing: -0.015em; }
.confirmation .aide { margin: 0; max-width: 34ch; }
.confirmation-icone { width: 48px; height: 48px; margin-bottom: 2px; border-radius: 50%; display: grid; place-items: center; background: var(--pastel-1); color: var(--rouge); }
.confirmation-icone svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.confirmation .actions { width: 100%; margin-top: 10px; justify-content: center; }
.confirmation .actions button { flex: 1; }
.bouton.danger { background: var(--danger); color: #fff; }

/* ---------- menu latéral (ordinateur), refait le 01/11 d'après la référence de l'utilisateur : carte pleine hauteur,
   symbole + nom en tête avec le bouton qui replie, page active pleine (Nuit ; Terracotta en sombre) avec sa flèche,
   pastilles de ce qui attend, applications en pied. Replié : icônes seules, libellé en bulle au survol. Le menu glisse
   (largeur animée) sans que les icônes bougent : même retrait à gauche dans les deux états. Le dock reste au téléphone. */
.menu-lateral, .lat-bulle { display: none; }
@media (min-width: 861px) {
  .fenetre { grid-template-columns: 248px minmax(0, 1fr); }
  body.menu-anime .fenetre { transition: grid-template-columns .24s cubic-bezier(.2, .8, .2, 1); }  /* au clic seulement, pas au chargement */
  body.menu-replie .fenetre { grid-template-columns: 78px minmax(0, 1fr); }  /* 40 px pour les icônes, centrées */
  body.sans-societe .fenetre { grid-template-columns: minmax(0, 1fr); }
  .haut, main { grid-column: 2; }
  body.sans-societe .haut, body.sans-societe main { grid-column: 1; }
  .haut .marque, .rail { display: none; }
  body.sans-societe .haut .marque { display: inline-flex; }
  main { padding: 4px 24px 28px 20px; }
  /* la tête et le pied restent ; seule la liste des pages défile (barre cachée, fondu en bas quand il en reste) */
  .menu-lateral {
    grid-column: 1; grid-row: 1 / -1; position: relative; z-index: 6; display: flex; flex-direction: column; min-width: 0; min-height: 0;
    margin: 12px 0 12px 12px; padding: 14px 12px 12px; border-radius: 22px; border: 1px solid var(--carte-bord); background: var(--carte); box-shadow: var(--carte-ombre);
    overflow: hidden;
  }
  .lat-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; margin: 0 -12px; padding: 0 12px 6px; scrollbar-width: none; overscroll-behavior: contain; }
  .lat-nav::-webkit-scrollbar { display: none; }
  .lat-nav.deborde { -webkit-mask: linear-gradient(#000 calc(100% - 36px), transparent); mask: linear-gradient(#000 calc(100% - 36px), transparent); }
  .lat-bulle:not([hidden]) { display: block; }
  body.sans-societe .menu-lateral { display: none; }
}
.lat-tete { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; margin-bottom: 14px; padding-left: 3px; }
.lat-marque { min-width: 0; gap: 10px; }
.marque-icone { flex: none; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--nuit); --logo-accent: var(--terracotta); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), 0 6px 14px -8px rgba(var(--ombre), .6); }
.marque-icone svg { display: block; width: 16px; height: 17px; }
:root[data-theme="sombre"] .marque-icone { background: var(--ardoise-marque); }
.marque-bloc { display: grid; gap: 4px; min-width: 0; justify-items: start; }
/* 01/11 (2) : le logo complet seul et assez grand pour que ses ligatures se lisent (kit : 120 px réels au moins ;
   25 px de haut à 80 % = 123 px) ; la flèche est déjà son A, son symbole seul ne sert qu'au menu replié */
.marque .marque-icone { display: none; }
body.menu-replie .lat-marque .marque-icone { display: grid; }
.lat-tete .marque-logo { height: 25px; }
@media (min-width: 861px) { .haut .marque-logo { height: 25px; } }
@media (max-width: 860px) { .haut .marque-logo { height: 20px; } }
.lat-tete .marque-sous { font-size: 10px; line-height: 1; letter-spacing: .14em; white-space: nowrap; }
.lat-replier { flex: none; width: 34px; height: 34px; padding: 0; border-radius: 11px; border: 1px solid var(--interne-bord); background: var(--option); color: var(--encre-2); display: grid; place-items: center; cursor: pointer; transition: color .15s ease-out, border-color .15s ease-out, transform .12s ease-out; }
.lat-replier:hover { color: var(--encre); border-color: var(--encre-3); }
.lat-replier:active { transform: scale(.94); }
.lat-replier svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.replier-fleche { transform-origin: 14.5px 12px; transition: transform .24s cubic-bezier(.2, .8, .2, 1); }
body.menu-replie .replier-fleche { transform: scaleX(-1); }

.lat-nav { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 1px; }  /* colonne à la largeur du menu, même replié */
/* titre de rubrique : un clic la replie (01/11, la liste de la comptabilité est longue) ; la page active reste visible */
.lat-titre { position: relative; display: flex; align-items: center; width: 100%; height: 22px; margin: 8px 0 2px; padding: 0 10px; border: 0; border-radius: 8px; background: none; overflow: hidden; font: 600 10.5px/1 "Inter", ui-sans-serif, sans-serif; letter-spacing: .09em; text-transform: uppercase; text-align: left; white-space: nowrap; color: var(--encre-3); transition: height .24s ease-out, margin .24s ease-out, color .15s ease-out; }
button.lat-titre { cursor: pointer; }
button.lat-titre:hover { color: var(--encre); }
button.lat-titre::after { content: ""; flex: none; margin: -2px 4px 0 auto; width: 5px; height: 5px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); opacity: 0; transition: opacity .15s ease-out, transform .2s ease-out; }
button.lat-titre:hover::after, button.lat-titre:focus-visible::after, button.lat-titre[aria-expanded="false"]::after { opacity: .8; }
button.lat-titre[aria-expanded="false"]::after { margin-top: 0; transform: rotate(-45deg); }
body:not(.menu-replie) .lat-groupe.plie:not(:has(.lat-item.actif)) { display: none; }
body.menu-replie button.lat-titre { pointer-events: none; }
body.menu-replie button.lat-titre::after { display: none; }
.lat-nav > .lat-titre:first-child { margin-top: 0; }
.lat-titre span { transition: opacity .15s ease-out; }
.lat-groupe { position: relative; }
.lat-item { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; height: 37px; padding: 0 10px; border: 0; border-radius: 11px; background: none; color: var(--encre-2); font-size: 13.5px; font-weight: 500; text-align: left; white-space: nowrap; overflow: hidden; cursor: pointer; transition: background-color .15s ease-out, color .15s ease-out, box-shadow .15s ease-out; }
.lat-item .icone { flex: none; width: 20px; display: grid; place-items: center; }
.lat-item .libelle { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; transition: opacity .15s ease-out; }
.lat-item svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.lat-item:hover { background: var(--survol); color: var(--encre); }
.lat-item.actif { background: var(--nav-actif); color: var(--nav-actif-texte); font-weight: 600; box-shadow: 0 10px 20px -12px rgba(var(--ombre), .7); }
.lat-item.actif::after { content: ""; flex: none; width: 6px; height: 6px; margin-right: 4px; border: solid currentColor; border-width: 1.7px 1.7px 0 0; transform: rotate(45deg); opacity: .8; transition: opacity .15s ease-out; }
.lat-item.actif:is(:has(.lat-chevron), :has(.lat-badge:not([hidden])))::after { display: none; }
.lat-badge { flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center; font-size: 11px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; background: var(--pastel-3); color: var(--mauve-texte); }
.lat-badge.danger { background: var(--rouge); color: #fff; }
.lat-item.actif .lat-badge { background: color-mix(in srgb, var(--nav-actif-texte) 22%, transparent); color: var(--nav-actif-texte); }
.lat-chevron { margin-left: auto; width: 7px; height: 7px; border: solid var(--encre-3); border-width: 0 1.6px 1.6px 0; transform: translateY(-2px) rotate(45deg); transition: transform .2s ease-out, opacity .15s ease-out; }
.lat-item .lat-chevron { flex: none; margin-right: 3px; }
.lat-item.actif .lat-chevron { border-color: currentColor; }
.lat-groupe.ouvert .lat-chevron { transform: translateY(2px) rotate(-135deg); }
.lat-sous { display: none; position: relative; margin: 2px 0 6px 19px; padding-left: 16px; }
.lat-groupe.ouvert .lat-sous { display: grid; gap: 2px; }
.lat-sous::before { content: ""; position: absolute; left: 0; top: -2px; bottom: 17px; border-left: 1.5px solid var(--interne-bord); }
.lat-sous button { position: relative; height: 32px; padding: 0 12px; border: 0; border-radius: 10px; background: none; color: var(--encre-2); font-size: 13px; text-align: left; white-space: nowrap; cursor: pointer; }
.lat-sous button::before { content: ""; position: absolute; left: -16px; top: 5px; width: 11px; height: 11px; border: solid var(--interne-bord); border-width: 0 0 1.5px 1.5px; border-bottom-left-radius: 8px; }
.lat-sous button:hover { background: var(--survol); color: var(--encre); }
.lat-sous-titre { display: none; }

/* pied : les applications ouvertes au compte, un clic pour passer de l'une à l'autre */
.lat-pied { flex: none; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--ligne); }
.lat-apps { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 4px; }
.lat-app { min-width: 0; display: grid; justify-items: center; gap: 4px; padding: 6px 2px 5px; border: 1px solid transparent; border-radius: 13px; background: none; color: var(--encre-2); font-size: 11px; font-weight: 600; cursor: pointer; transition: background-color .15s ease-out, border-color .15s ease-out, color .15s ease-out; }
.lat-app:hover { background: var(--survol); color: var(--encre); }
.lat-app.actif { background: var(--option); border-color: var(--interne-bord); color: var(--encre); box-shadow: 0 6px 14px -10px rgba(var(--ombre), .5); }
.lat-app-icone { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 13%, transparent); }
.lat-app-icone svg { width: 18px; height: 18px; }
:root[data-theme="sombre"] .lat-app-icone { color: color-mix(in srgb, var(--c) 45%, #fff); background: color-mix(in srgb, var(--c) 30%, transparent); }
.lat-app-nom { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body:not(.menu-tel) .lat-apps.icones-seules .lat-app-nom { display: none; }
/* 03/11 : 8 apps dans 168 px faisaient des colonnes de 18 px pour des icônes de 30 : icônes qui se chevauchent et case
   active tirée en pilule étroite ; maintenant 4 cases au plus par rangée, rangées égales (--rangee, posé par le JS) */
body:not(.menu-tel) .lat-apps.icones-seules { grid-template-columns: repeat(var(--rangee, 4), minmax(0, 1fr)); }
body:not(.menu-tel) .lat-apps.icones-seules .lat-app { padding: 3px; }
.lat-pied .lat-toutes { display: none; }
.menu-lateral button:focus-visible, .menu-lateral a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* replié : la tête passe en colonne (bouton au-dessus du symbole), libellés et titres s'effacent */
body.menu-replie .lat-tete { flex-direction: column-reverse; align-items: flex-start; gap: 12px; }
body.menu-replie :is(.marque-bloc, .lat-apps) { display: none; }
body.menu-replie :is(.lat-item .libelle, .lat-chevron, .lat-titre span) { opacity: 0; }
body.menu-replie .lat-item.actif::after { opacity: 0; }
body.menu-replie .lat-titre { height: 9px; margin: 4px 0; }
body.menu-replie .lat-titre::before { content: ""; position: absolute; left: 10px; right: 10px; top: 4px; border-top: 1px solid var(--ligne); }
body.menu-replie .lat-nav > .lat-titre:first-child { height: 0; margin: 0; }
body.menu-replie .lat-nav > .lat-titre:first-child::before { display: none; }
body.menu-replie :is(.lat-groupe .lat-sous, .lat-groupe.ouvert .lat-sous) { display: none; }
body.menu-replie .lat-badge { position: absolute; top: 2px; left: 23px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 9.5px; box-shadow: 0 0 0 2px var(--option); }
body.menu-replie .lat-item.actif .lat-badge { background: var(--option); color: var(--encre); }
body.menu-replie .lat-pied { border-top: 0; }
body.menu-replie .lat-pied .lat-toutes { display: flex; }
/* bulle du menu replié (libellé de l'icône survolée), placée par app.js hors du menu pour ne pas être coupée */
.lat-bulle { position: fixed; z-index: 30; left: 0; top: 0; padding: 6px 11px; border-radius: 9px; background: var(--bulle); color: var(--bulle-texte); font-size: 12.5px; font-weight: 500; white-space: nowrap; pointer-events: none; box-shadow: 0 10px 24px -10px rgba(var(--ombre), .55); animation: bulle .12s ease-out; }
.lat-bulle::before { content: ""; position: absolute; left: -4px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 1.5px; background: inherit; transform: rotate(45deg); }
.lat-bulle b { margin-left: 6px; padding: 0 6px; border-radius: 999px; background: color-mix(in srgb, var(--bulle-texte) 20%, transparent); font-size: 11px; }
@keyframes bulle { from { opacity: 0; translate: -4px 0; } }

/* ---------- barre du haut (ordinateur, 01/11) : recherche (pages, actions, salariés, sociétés), mois de paie,
   « Nouveau », pointeuse, alertes, thème, société, compte */
.haut-recherche { display: none; }
@media (min-width: 861px) {
  .haut { display: flex; align-items: center; gap: 14px; padding: 12px 24px 10px 20px; }
  .haut-droite { margin-left: auto; gap: 8px; }
  .haut .profil { display: flex; }
  .haut-recherche { position: relative; flex: 0 1 400px; min-width: 220px; display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 8px 0 14px; border-radius: 999px; border: 1px solid var(--interne-bord); background: var(--carte); color: var(--encre-3); cursor: text; transition: border-color .15s ease-out, box-shadow .15s ease-out; }
  .haut-recherche:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); }
  .haut-recherche > svg { flex: none; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
  .haut-recherche input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: none; outline: none; font-size: 13.5px; color: var(--encre); }
  .haut-recherche input:focus-visible { outline: none; }
  .haut-recherche kbd { flex: none; padding: 2px 7px; border-radius: 7px; border: 1px solid var(--interne-bord); background: var(--option); color: var(--encre-3); font: 600 11px/1.4 "Inter", ui-sans-serif, sans-serif; }
  .haut-recherche:focus-within kbd { display: none; }
  .haut-nouveau { height: 38px; padding: 0 16px 0 12px; gap: 6px; }
  .haut-nouveau svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; }
  .profil { height: 40px; padding: 0 10px 0 4px; gap: 9px; border-radius: 999px; border: 1px solid var(--interne-bord); background: var(--carte); transition: border-color .15s ease-out; }
  .profil:hover, .profil[aria-expanded="true"] { border-color: var(--encre-3); }
  .profil .monogramme { width: 30px; height: 30px; font-size: 11px; }
  .profil .profil-texte strong { font-size: 13px; max-width: 190px; }
  .profil .profil-texte small { font-size: 11px; }
  .profil-fleches { display: block; flex: none; width: 14px; height: 14px; fill: none; stroke: var(--encre-3); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
  .moi { height: 40px; padding-left: 5px; }
  .entete { margin: 2px 0 16px; }
}
@media (min-width: 861px) and (max-width: 1500px) { .moi-nom { display: none; } .moi { padding-right: 5px; } }
/* 01/11 : hors de la paie, les mois et la pointeuse ne gardent pas leur place (ils serraient la société contre le compte
   vers 1500 px) ; à droite, rien ne rétrécit : c'est la recherche qui cède */
@media (min-width: 861px) {
  body:not([data-app="paie"]):not([data-app="presences"]) :is(.mois-pilules, #btn-sync-haut) { display: none; }
  .haut-droite > * { flex-shrink: 0; }
  .profil .profil-texte small { overflow: hidden; text-overflow: ellipsis; }
}
.profil-fleches { display: none; }
.theme-soleil { display: none; }
:root[data-theme="sombre"] .theme-lune { display: none; }
:root[data-theme="sombre"] .theme-soleil { display: block; }
.choix-liste.liste-nouveau { max-height: min(520px, 80vh); }
/* liste de la recherche du haut : celle des listes de choix, avec une ligne de détail sous chaque résultat */
.recherche-liste { width: 440px; max-height: min(440px, 70vh); }
.recherche-liste .choix-option { justify-content: flex-start; gap: 12px; white-space: normal; }
.recherche-liste .choix-option[aria-selected="true"] { font-weight: inherit; }
.recherche-liste .choix-option::after { display: none; }
.recherche-liste .ro-icone { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--champ); color: var(--encre-2); }
.recherche-liste .ro-icone svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.recherche-liste .ro-texte { display: grid; min-width: 0; line-height: 1.3; }
.recherche-liste .ro-texte small { color: var(--encre-3); font-size: 11.5px; }
.recherche-liste mark { background: none; color: var(--accent); font-weight: 650; }
.recherche-liste .vide-recherche { padding: 12px; color: var(--encre-3); font-size: 13px; }

/* alertes du jour (direct), avances, congés */
.direct-alertes { display: flex; flex-wrap: wrap; gap: 6px; margin: -2px 0 12px; }
.alerte-direct { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 3px 12px; border-radius: 999px; background: var(--pastel-1); color: var(--rouge); font-size: 12.5px; }
.alerte-direct b { font-weight: 700; }
.alerte-direct.matin { background: var(--pastel-3); color: var(--mauve-texte); }
.reste-chip { display: inline-flex; align-items: center; height: 22px; margin-left: 8px; padding: 0 9px; border-radius: 999px; background: var(--pastel-3); color: var(--mauve-texte); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.avances-detail { display: flex; flex-wrap: wrap; gap: 6px; }
.pointeuse-ligne { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 0; cursor: pointer; }
.pointeuse-ligne input { width: 18px; height: 18px; accent-color: var(--nuit); }
.sous-titre-groupe { margin: 14px 0 6px; font-size: 13px; font-weight: 600; color: var(--encre-2); }
.avance-puce { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 4px 0 10px; border-radius: 999px; border: 1px solid var(--interne-bord); background: var(--carte); font-size: 12px; color: var(--encre-2); }
.avance-puce b { color: var(--encre); font-weight: 600; }
.avance-puce button { width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--encre-3); display: grid; place-items: center; cursor: pointer; }
.avance-puce button:hover { background: var(--pastel-1); color: var(--rouge); }
.avance-puce button svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.solde-conge { margin: -6px 0 0; padding: 8px 12px; border-radius: 12px; background: var(--verre-popup-champ); }
.conge-ligne { grid-template-columns: auto minmax(0, 1fr) auto; }
.conge-ligne small { display: block; font-size: 11.5px; color: var(--encre-2); }
.conge-ligne .mini-bouton.negatif { background: var(--pastel-1); color: var(--rouge); }

/* comptes : écran de connexion, droits, montants cachés, page Utilisateurs */
body.ecran-login .cadre { display: none; }
body.ecran-bloque .cadre { display: none; }
.ecran-connexion { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 16px; background: var(--fond); overflow-y: auto; }
.carte.connexion { width: min(400px, 100%); gap: 14px; padding: 30px 28px 26px; }
.connexion-marque { margin-bottom: 8px; }
.connexion h1 { font-size: 26px; }
.connexion .sous-titre:empty { display: none; }
.connexion label { display: grid; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--encre-2); }
.connexion input, .connexion select { width: 100%; padding: 11px 13px; border: 1px solid var(--interne-bord); border-radius: 12px; background: var(--champ); font-size: 14.5px; }
.connexion input:focus { outline: none; border-color: var(--accent); }
.connexion .bouton { width: 100%; margin-top: 4px; }
/* 04/11 : bascule « Créer un compte », œil du mot de passe, « Mot de passe oublié ? », aide du bas */
.connexion-bascule { margin: -6px 0 0; font-size: 13.5px; color: var(--encre-2); }
.connexion-bascule .lien { color: var(--accent); text-decoration: none; }
.connexion-bascule .lien:hover { text-decoration: underline; }
.champ-mdp { position: relative; display: block; }
.champ-mdp input { padding-right: 44px; }
.oeil { position: absolute; top: 50%; right: 6px; translate: 0 -50%; width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 10px; background: none; color: var(--encre-3); cursor: pointer; }
.oeil:hover { color: var(--encre); background: var(--survol); }
.oeil svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.connexion-oubli { margin: -6px 0 0; font-size: 13px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; }
.connexion-oubli .lien { text-decoration: none; }
.connexion-oubli .lien:hover { text-decoration: underline; }
.connexion-bas { margin: 4px 0 0; text-align: center; font-size: 12.5px; color: var(--encre-3); }
/* étape 2 : « Continuer avec Google » et le séparateur « ou » */
.connexion-sociaux { display: grid; gap: 8px; }
.bouton-social { display: flex; align-items: center; justify-content: center; gap: 10px; height: 46px; border: 1px solid var(--interne-bord); border-radius: 12px;
  background: var(--carte); color: var(--encre); font-size: 14.5px; font-weight: 600; text-decoration: none; transition: background-color .15s ease-out, border-color .15s ease-out; }
.bouton-social:hover { background: var(--survol); border-color: var(--encre-3); }
.bouton-social svg { width: 18px; height: 18px; }
.connexion-ou { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 12.5px; color: var(--encre-3); }
.connexion-ou::before, .connexion-ou::after { content: ""; flex: 1; height: 1px; background: var(--interne-bord); }
/* une base par client (04/11) : apps de l'espace, adresse, écran de création */
.connexion-apps { border: 0; margin: 0; padding: 0; display: grid; gap: 6px; }
.connexion-apps legend { font-size: 12.5px; font-weight: 500; color: var(--encre-2); margin-bottom: 6px; }
.connexion-apps .ligne-coche { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--encre); }
.connexion-apps input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--accent); }
.champ-adresse { display: flex; align-items: center; border: 1px solid var(--interne-bord); border-radius: 12px; background: var(--champ); }
.champ-adresse:focus-within { border-color: var(--accent); }
.champ-adresse input { border: 0 !important; background: transparent !important; padding-right: 4px; min-width: 0; flex: 1; }
.champ-adresse span { padding-right: 13px; color: var(--encre-3); font-size: 14px; white-space: nowrap; }
.adresse-etat { font-size: 12.5px; min-height: 1em; }
.adresse-etat.libre { color: var(--succes); }
.adresse-etat.prise { color: var(--rouge); }
.creation-etapes { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; }
.creation-etapes li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--encre-3); }
.creation-etapes li::before { content: ""; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--interne-bord); border-top-color: var(--accent); animation: tourner .8s linear infinite; }
.creation-etapes li.fait { color: var(--encre); }
.creation-etapes li.fait::before { content: "✓"; border: 0; animation: none; display: grid; place-items: center; background: var(--succes); color: #fff; font-size: 11px; }
.creation-pret { margin: 14px 0 0; font-weight: 600; color: var(--encre); }
.moi { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px 0 4px; border: 1px solid var(--interne-bord); border-radius: 999px; background: var(--carte); color: var(--encre); font-size: 13px; font-weight: 500; cursor: pointer; }
.moi:hover { border-color: var(--encre-3); }
.moi .initiales { width: 28px; height: 28px; font-size: 10px; background: var(--prune); }
.moi-nom { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body:not(.peut-exceptions) [data-perm~="exceptions"], body:not(.peut-primes) [data-perm~="primes"],
body:not(.peut-bulletins) [data-perm~="bulletins"], body:not(.peut-pointeuse) [data-perm~="pointeuse"],
body:not(.peut-societe) [data-perm~="societe"], body:not(.peut-utilisateurs) [data-perm~="utilisateurs"],
body.poste-distant .seulement-local { display: none !important; }
/* Paramètres (31/10), à la manière d'Odoo : colonne des apps, bandeaux de rubrique, blocs sur deux colonnes */
.reglages-cadre { display: grid; grid-template-columns: 224px minmax(0, 1fr); gap: 24px; align-items: start; }
.reglages-apps { position: sticky; top: 8px; display: grid; gap: 2px; padding: 8px; border: 1px solid var(--carte-bord); border-radius: 18px;
  background: var(--carte); box-shadow: var(--carte-ombre); }
.reglages-apps button { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 10px; border: 0; border-radius: 11px; background: none;
  color: var(--encre-2); font: inherit; font-size: 13.5px; font-weight: 500; text-align: left; cursor: pointer; transition: background-color .15s ease-out, color .15s ease-out; }
.reglages-apps button:hover, .reglages-apps button.actif { background: var(--survol); color: var(--encre); }
.reglages-apps button.actif { font-weight: 600; }
.reg-ico { flex: none; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: var(--c); background: var(--option);
  border: 1px solid var(--interne-bord); }
.reg-ico svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
:root[data-theme="sombre"] .reg-ico { color: #fff; }
.reglages-corps { min-width: 0; border: 1px solid var(--carte-bord); border-radius: 18px; background: var(--carte); box-shadow: var(--carte-ombre); overflow: hidden; }
.reg-app { scroll-margin-top: 12px; }
.reg-bande { margin: 0; padding: 11px 24px; font-family: inherit; font-size: 13.5px; font-weight: 600; letter-spacing: 0; background: var(--champ);
  border-block: 1px solid var(--ligne); }
.reg-app:first-child > .reg-bande:first-child { border-top: 0; }
.reg-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 40px; padding: 22px 24px 26px; }
.reg-bloc { display: grid; gap: 6px; align-content: start; min-width: 0; padding-left: 16px; border-left: 2px solid var(--ligne); }
.reg-bloc > strong { font-size: 13.5px; font-weight: 600; }
.reg-texte { margin: 0; max-width: 54ch; font-size: 12.5px; line-height: 1.45; color: var(--encre-2); }
.reg-valeur { margin: 2px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; }
.reg-valeur:empty { display: none; }
.reg-pastilles { display: inline-flex; gap: 4px; }
.reg-pastilles i { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.reg-liens { display: grid; justify-items: start; gap: 2px; margin-top: 4px; }
.reg-lien { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 0; border: 0; background: none; color: var(--accent);
  font: inherit; font-size: 13px; font-weight: 500; text-align: left; cursor: pointer; }
.reg-lien::before { content: '→'; }
.reg-lien:hover { text-decoration: underline; text-underline-offset: 3px; }
.reg-lien.danger { color: var(--rouge); }
.reg-cache { display: none !important; }
.reg-bloc .themes { max-width: 340px; margin-top: 6px; }
.reg-bloc .filtres { margin: 6px 0 0; }
.reg-bloc .filtres .pilule { padding: 0 14px; }
.reglages-corps > .vide { padding: 24px; }
.reglages-corps > .reglages-grille { padding: 16px; }
@media (max-width: 860px) {
  .reglages-cadre { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .reglages-apps { position: static; display: flex; gap: 4px; overflow-x: auto; padding: 6px; }
  .reglages-apps button { flex: none; white-space: nowrap; }
  .reg-grille { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 18px 16px 20px; }
  .reg-bande { padding: 10px 16px; }
}
body.sans-montants .b-masse { display: none; }
body.sans-montants .bento { grid-template-areas: "verif meilleur barres exc" "verif meilleur barres direct"; }
.puce-mini { display: inline-flex; align-items: center; height: 22px; margin: 2px 4px 2px 0; padding: 0 9px; border-radius: 999px; background: var(--champ); font-size: 11.5px; color: var(--encre-2); white-space: nowrap; }
.champ-coches { display: grid; gap: 8px; }
:is(dialog, feuille-doc) label.ligne-switch { display: flex; align-items: center; justify-content: space-between; gap: 14px; font-size: 13.5px; color: var(--encre); }
:is(dialog, feuille-doc) input[role="switch"] { flex: none; width: 48px; padding: 0; border: 0; }
:is(dialog, feuille-doc) .puce input { width: auto; }
:is(dialog, feuille-doc) .puce:has(input:disabled) { opacity: .45; cursor: default; }
@media (max-width: 1260px) {
  body.sans-montants .bento { grid-template-rows: 300px 300px 280px; grid-template-areas: "verif barres" "meilleur barres" "exc direct"; }
}
@media (max-width: 860px) {
  body.sans-montants .bento { grid-template-rows: 380px 280px auto 300px 300px; grid-template-areas: "verif" "meilleur" "barres" "exc" "direct"; }
  .moi-nom { display: none; }
  .moi { padding-right: 4px; }
}

/* ---------- mouvement : la page qui arrive monte légèrement en fondu (une seule couche, transform/opacity) */
.onglet.actif { animation: page-entre .24s cubic-bezier(.2, .8, .2, 1); }
@keyframes page-entre { from { opacity: 0; transform: translateY(8px); } }

/* ---------- écrans moyens : la grille passe sur deux colonnes */
@media (max-width: 1260px) {
  #tableau.actif { display: block; height: auto; }
  .bento { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 300px 300px auto 280px; grid-template-areas: "verif meilleur" "verif masse" "barres barres" "exc direct"; }
  .b-barres .barres { contain: none; }
  .profil-texte { display: none; }
}

/* ---------- téléphone : plein écran, rail en barre d'onglets en bas */
@media (max-width: 860px) {
  body { overflow: auto; }
  .cadre { padding: 0; height: auto; min-height: 100%; }
  .fenetre { height: auto; min-height: 100vh; display: block; }
  .haut { grid-template-columns: 1fr auto; padding: 12px 16px 6px; }
  .mois-pilules { grid-column: 1 / -1; grid-row: 2; overflow-x: auto; padding-bottom: 4px; }
  .haut-droite .rond { display: none; }
  .rail { position: fixed; left: 12px; right: 12px; bottom: calc(14px + env(safe-area-inset-bottom)); transform: none; justify-content: space-around; padding: 0 6px; }
  .rail button { flex: 1; }
  main { overflow: visible; padding: 4px 16px 120px; }
  .bento { grid-template-columns: minmax(0, 1fr); grid-template-rows: 380px 320px 280px auto 300px 300px; grid-template-areas: "verif" "meilleur" "masse" "barres" "exc" "direct"; }
  .barre-mini { grid-template-columns: minmax(84px, 9.5em) minmax(48px, 1fr) minmax(72px, auto); }
  .barre-info { display: none; }
  .cadre { position: static; }
  .recherche { min-width: 0; width: 100%; }
  .groupe .champ { grid-template-columns: minmax(0, 1fr); gap: 7px; padding: 12px 16px; }
  .groupe .champ:has(> input[role="switch"]), .groupe .champ:has(> .segment), .groupe .champ:has(> button) { grid-template-columns: minmax(0, 1fr) auto; }
  .champ:has(> select)::after { right: 30px; top: auto; bottom: 27px; margin-top: 0; }
  .pauses { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ligne { grid-template-columns: minmax(0, 1fr) auto; padding-left: 16px; }
  .ligne .ligne-texte { grid-row: 1 / span 2; }
  .ligne .ligne-montant { grid-row: 1; grid-column: 2; justify-self: end; padding-right: 10px; }
  .ligne .bouton-texte { grid-row: 2; grid-column: 2; justify-self: end; }
  .ligne.ligne-salarie { grid-template-columns: minmax(0, 1fr) auto 16px; }
  .ligne-salarie .chevron { grid-row: 1; grid-column: 3; }
  .ligne-salarie .ligne-texte { grid-row: 1; }
  #toast { bottom: calc(96px + env(safe-area-inset-bottom)); }
  .enregistrer-barre:not([hidden]) { display: inline-flex; height: 38px; padding: 0 16px; }
  .barre-enregistrer { display: none !important; }
  dialog.feuille { width: 100%; max-width: 100%; margin: auto 0 0; border-radius: 28px 28px 0 0; padding-bottom: env(safe-area-inset-bottom); }
  dialog.feuille[open] { animation: monter .28s cubic-bezier(.2, .9, .3, 1); }
  @keyframes monter { from { transform: translateY(100%); } }
  .poignee { display: block; width: 38px; height: 5px; margin: -10px auto 2px; border-radius: 3px; background: var(--encre-3); }
  :is(dialog, feuille-doc) .deux { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* page Société : actions à droite d'un titre de groupe (import des salariés) */
.titre-avec-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.actions-titre { display: inline-flex; gap: 6px; font-size: 13px; font-weight: 500; }
.actions-titre label { cursor: pointer; }

/* fiche salarié : historique sur plusieurs mois */
dialog.fiche-salarie { width: min(860px, calc(100vw - 32px)); padding: 24px 26px 20px; }
.fiche-salarie .tb-compteurs { margin: 4px 0 12px; }
.fiche-salarie table.donnees td, .fiche-salarie table.donnees th { white-space: nowrap; }
.fiche-h3 { margin: 16px 0 8px; font-size: 13px; font-weight: 600; letter-spacing: 0; }
.fiche-salarie .ligne-mini { margin-bottom: 6px; cursor: default; }
/* fiche salarié : contrat (imprimé sur les attestations) */
:is(dialog, feuille-doc) .fiche-contrat { padding: 0 0 16px; gap: 10px; }
.fiche-contrat .fiche-h3 { margin: 0; }
.contrat-champs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.contrat-champs > * { min-width: 0; }
.contrat-champs .large { grid-column: span 2; }
.fiche-contrat .actions { justify-content: flex-end; }
@media (max-width: 700px) { .contrat-champs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* page « Documents » : un salarié par ligne (attestations en un clic, envois dépliés), puis tous les envois */
#documents .carte > header { display: grid; gap: 4px; }
#documents .carte > header .aide { margin: 0; }
.liste-attestations { display: grid; border-top: 1px solid var(--ligne); }
.ligne-attestation { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; padding: 6px 2px; border-bottom: 1px solid var(--ligne); }
.att-deplier { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; min-width: 0; padding: 6px 10px 6px 4px; border: 0; border-radius: 10px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.att-deplier:hover { background: var(--champ); }
.att-deplier:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.att-nom { display: grid; gap: 2px; min-width: 0; }
.att-nom strong { font-size: 14px; font-weight: 600; }
.att-nom .sous { font-size: 12.5px; color: var(--encre-2); }
.att-nom .sous.rouge { color: var(--rouge); }
.att-resume { display: inline-flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--encre-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.att-resume.attente { color: var(--attente); }
.ligne-attestation.ouvert .lat-chevron { transform: translateY(2px) rotate(-135deg); }
.att-dossier { grid-column: 1 / -1; margin: 0 0 8px 48px; padding-left: 14px; border-left: 2px solid var(--ligne); }
.att-dossier .ligne-signature:last-child { border-bottom: 0; }
.att-dossier .vide { padding: 8px 0; }
.att-boutons { display: flex; align-items: center; gap: 2px; }
.att-boutons .bouton-texte { height: 32px; padding: 0 10px; font-size: 13px; }
.att-boutons .refuse { color: var(--encre-2); opacity: .55; }
/* documents envoyés pour signature */
.liste-signatures { display: grid; border-top: 1px solid var(--ligne); }
.ligne-signature { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--ligne); }
.ligne-signature .sous { display: block; font-size: 12.5px; color: var(--encre-2); }
.ligne-signature .etat-chip { align-self: center; }
.etat-chip.attente { background: var(--pastel-3); color: var(--attente); }
.lien-signature { display: flex; gap: 6px; align-items: center; }
/* mise en page des documents (fenêtre comme celle d'Odoo) : réglages à gauche, petite facture à droite selon le modèle */
dialog.mise-en-page { width: min(920px, calc(100vw - 32px)); padding: 24px 26px 20px; }
.mep-corps { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 26px; align-items: start; margin-top: 14px; }
.mep-champs { display: grid; gap: 14px; }
.mep-ligne { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; align-items: start; }
.mep-lib { padding-top: 7px; font-size: 13px; font-weight: 600; }
.mep-ligne .filtres { margin: 0; }
.mep-ligne .filtres .pilule { padding: 0 14px; }
.mep-ligne input:not([type="color"]) { width: 100%; }
.mep-logo { display: grid; justify-items: start; gap: 4px; padding-top: 6px; font-size: 12.5px; color: var(--encre-2); }
.mep-logo img { display: block; max-width: 180px; max-height: 40px; }
.mise-en-page .aide { margin: 2px 0 0; }
.ca-gauche { display: grid; gap: 2px; min-width: 0; max-width: 52%; }
.ca-slogan { font-size: 6.5px; color: #8a8698; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ca-slogan:empty { display: none; }
.ca-pied { display: grid; gap: 3px; margin-top: auto; padding-top: 6px; border-top: 1px solid #e3e1ea; }
.ca-pied i { display: block; width: 80%; height: 2px; border-radius: 2px; background: #d5d3dc; }
.ca-pied span { font-size: 5.5px; color: #8a8698; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ca-pied span:empty { display: none; }
@media (max-width: 760px) { .mep-corps { grid-template-columns: minmax(0, 1fr); } .mep-ligne { grid-template-columns: minmax(0, 1fr); gap: 6px; } .mep-lib { padding-top: 0; } }

.charte-couleur { display: grid; gap: 8px; padding-top: 2px; }
.charte-nuancier { display: flex; flex-wrap: wrap; gap: 8px; }
.charte-pastille { width: 30px; height: 30px; border: 0; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); cursor: pointer; }
.charte-pastille.actif { box-shadow: 0 0 0 2px var(--fond), 0 0 0 4px var(--encre); }
.charte-pastille:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.charte-perso { display: inline-flex; align-items: center; gap: 8px; width: max-content; font-size: 12.5px; color: var(--encre-2); cursor: pointer; }
.charte-perso input { width: 30px; height: 26px; padding: 0; border: 1px solid var(--ligne); border-radius: 8px; background: none; cursor: pointer; }
.charte-apercu { --ch-p: #433d77; --ch-a: #c64a60; position: relative; overflow: hidden; display: grid; gap: 10px; aspect-ratio: 1 / 1.25; padding: 16px 14px;
  border: 1px solid var(--ligne); border-radius: 10px; background: #fff; color: #1e1b33; box-shadow: 0 6px 18px rgba(var(--ombre), .08); align-content: start;
  grid-template-rows: auto auto auto auto 1fr; }
.ca-tete { display: flex; justify-content: space-between; align-items: center; padding-bottom: 8px; border-bottom: 1px solid #e3e1ea; }
.ca-logo { max-width: 100%; font-size: 11px; font-weight: 700; color: var(--ch-p); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ca-logo img { display: block; max-width: 100%; max-height: 22px; }
.ca-soc { display: grid; justify-items: end; gap: 3px; font-size: 7px; }
.ca-soc i, .ca-titre i, .ca-client i { display: block; height: 3px; border-radius: 2px; background: #d5d3dc; }
.ca-soc i { width: 50px; }
.ca-milieu { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
.ca-titre { display: grid; gap: 4px; }
.ca-titre b { font-size: 15px; font-weight: 700; color: var(--ch-p); letter-spacing: .01em; }
.ca-titre i { width: 40px; }
.ca-client { display: grid; gap: 4px; padding: 6px 8px; border-left: 2px solid var(--ch-p); background: color-mix(in srgb, var(--ch-p) 6%, #fff); }
.ca-client i:nth-child(2) { width: 70%; }
.ca-client i:nth-child(3) { width: 50%; }
.ca-table { display: grid; }
.ca-table span { height: 11px; background: linear-gradient(#d5d3dc, #d5d3dc) 3px center / 70% 3px no-repeat; border-bottom: 1px solid #ecebf0; }
.ca-table span:nth-child(3) { background-size: 52% 3px; }
.ca-table span:nth-child(4) { background-size: 62% 3px; }
.ca-table .ca-entete { height: 7px; background: none; border-bottom: 1.5px solid var(--ch-p); }
/* les quatre modèles de ventes/generateur/document.js */
.charte-apercu[data-modele="epure"] .ca-client { padding-left: 0; border-left: 0; border-top: 1px solid #e3e1ea; background: none; }
.charte-apercu[data-modele="epure"] .ca-entete { border-bottom: 1px solid #e3e1ea; }
.charte-apercu[data-modele="epure"] .ca-total { padding-inline: 2px; color: var(--ch-p); background: none; border-top: 1.5px solid var(--ch-p); clip-path: none; }
.charte-apercu[data-modele="epure"] .ca-total span { color: #1e1b33; }
.charte-apercu[data-modele="encadre"] .ca-client { border: 1px solid #e3e1ea; background: none; }
.charte-apercu[data-modele="encadre"] .ca-entete { height: 10px; background: var(--ch-p); border: 0; }
.charte-apercu[data-modele="encadre"] .ca-total { clip-path: none; }
.charte-apercu[data-modele="raye"] .ca-client { border-left: 0; }
.charte-apercu[data-modele="raye"] .ca-entete { height: 10px; background: color-mix(in srgb, var(--ch-p) 6%, #fff); border: 0; }
.charte-apercu[data-modele="raye"] .ca-table span { border-bottom: 0; }
.charte-apercu[data-modele="raye"] .ca-table span:nth-child(3) { background-color: color-mix(in srgb, var(--ch-p) 6%, #fff); }
.ca-total { justify-self: end; display: flex; align-items: center; gap: 12px; padding: 7px 10px 7px 12px; color: #fff; font-size: 8px; background: var(--ch-p);
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px)); }
.ca-total span { color: color-mix(in srgb, var(--ch-p) 30%, #fff); }
.ca-total b { font-size: 11px; font-weight: 600; }
.charte-apercu::after { content: 'EXEMPLE'; position: absolute; left: 50%; top: 60%; transform: translate(-50%, -50%) rotate(-32deg); font-size: 34px; font-weight: 800; letter-spacing: .04em;
  color: color-mix(in srgb, var(--ch-a) 16%, transparent); pointer-events: none; }
@media (max-width: 760px) { .charte-apercu { max-width: 260px; } }
/* page d'un document (31/10, comme Odoo) : fil d'Ariane, le document à gauche, sa discussion à droite ; dessous sur
   un écran étroit. <feuille-doc> reprend les règles des fenêtres (:is(dialog, feuille-doc)) sans changer leur poids */
feuille-doc { display: block; }
.doc-fil { display: flex; align-items: center; gap: 8px; margin: 4px 0 14px; font-size: 13.5px; color: var(--encre-2); }
.doc-fil .lien { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-weight: 600; cursor: pointer; }
.doc-fil .lien:hover { text-decoration: underline; text-underline-offset: 3px; }
.doc-fil > span:last-child { color: var(--encre); font-weight: 600; }
.doc-cadre { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); gap: 20px; align-items: start; }
.carte.doc-feuille { display: block; padding: 0; }
.doc-cadre:has(> .doc-chatter[hidden]) { grid-template-columns: minmax(0, 1fr); }  /* nouvelle pièce : pas encore de discussion */
.doc-feuille h1 { font-size: clamp(22px, 1.8vw, 28px); }
.carte.doc-chatter { padding: 18px 20px 20px; }
.doc-chatter .chatter { margin: 0; padding: 0; border: 0; }
.doc-apercu { overflow: hidden; border: 1px solid var(--interne-bord); border-radius: 14px; background: var(--option); }
.doc-apercu iframe { display: block; width: 100%; height: min(78vh, 980px); border: 0; }
.doc-apercu img { display: block; max-width: 100%; margin: 0 auto; }
.doc-apercu .vide-mini { padding: 18px; }
@media (max-width: 1100px) {
  .doc-cadre { grid-template-columns: minmax(0, 1fr); }
  .doc-apercu iframe { height: 70vh; }
}
/* chatter (31/10, comme celui d'Odoo) : barre d'actions, saisie, puis le fil du plus récent au plus ancien */
.chatter { display: grid; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--ligne); }
.chatter-titre { margin: 0; }
.chatter-barre { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.chatter-barre .actif { background: var(--survol); }
.chat-joindre { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.chat-joindre svg, .chat-pj svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.chatter-boite { margin-left: auto; font-size: 12px; color: var(--encre-2); }
[data-chat-relever].tourne svg { animation: tourner .9s linear infinite; }
@keyframes tourner { to { transform: rotate(360deg); } }
.chatter-saisie { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--interne-bord); border-radius: 14px; background: var(--champ); }
.chat-email { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 8px; }
.chat-email label { display: grid; gap: 4px; font-size: 12.5px; color: var(--encre-2); }
.chatter-saisie textarea { width: 100%; min-height: 84px; resize: vertical; }
.chat-fichiers, .chat-pjs { display: flex; flex-wrap: wrap; gap: 6px; }
.chat-fichiers:empty { display: none; }
.chat-pj { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 6px 4px 10px; border: 1px solid var(--interne-bord); border-radius: 999px;
  background: var(--option); color: var(--encre); font-size: 12.5px; text-decoration: none; }
a.chat-pj { padding-right: 10px; }
a.chat-pj:hover { border-color: var(--encre-3); }
.chat-pj small { color: var(--encre-2); }
.chat-pj button { display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--encre-2); cursor: pointer; }
.chat-pj button svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; }
.chat-bas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.chat-pdf, :is(dialog, feuille-doc) label.chat-pdf { display: inline-flex; align-items: center; gap: 8px; margin-right: auto; font-size: 13px; color: var(--encre); }
.chat-pdf input { flex: none; width: auto; margin: 0; }
:is(dialog, feuille-doc) label.chat-joindre { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; }
.chatter-saisie .erreur:empty { display: none; }
.chatter-fil { display: grid; gap: 10px; }
.chat-jour { display: flex; align-items: center; gap: 10px; margin-top: 4px; font-size: 11.5px; font-weight: 600; color: var(--encre-2); }
.chat-jour::before, .chat-jour::after { content: ""; flex: 1; height: 1px; background: var(--ligne); }
.chat-msg { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; }
.chat-msg > .initiales { width: 30px; height: 30px; font-size: 10.5px; }
.chat-contenu { display: grid; gap: 4px; min-width: 0; }
.chat-contenu header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 13px; }
.chat-genre { font-size: 12px; color: var(--encre-2); }
.chat-genre.recu { color: var(--succes); font-weight: 600; }
.chat-contenu time { font-size: 11.5px; color: var(--encre-3); }
.chat-action { margin-left: auto; height: 26px; padding: 0 8px; font-size: 12.5px; }
.chat-action + .chat-action { margin-left: 0; }
.chat-sujet { margin: 0; font-size: 12.5px; font-weight: 600; }
.chat-corps { padding: 9px 12px; border-radius: 4px 14px 14px 14px; background: var(--champ); font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-msg.note .chat-corps { background: color-mix(in srgb, var(--attente) 9%, var(--carte)); }
.chat-msg.recu .chat-corps { background: color-mix(in srgb, var(--succes) 9%, var(--carte)); }
.chat-erreur { margin: 0; font-size: 12.5px; color: var(--rouge); }
.chat-suivi { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: 10px; padding-left: 11px; font-size: 12.5px; color: var(--encre-2); }
.chat-point { width: 8px; height: 8px; border-radius: 50%; background: var(--encre-3); }
.chat-qui { color: var(--encre-3); }
.chat-suivi time { font-size: 11.5px; color: var(--encre-3); }
@media (max-width: 700px) { .chat-email { grid-template-columns: minmax(0, 1fr); } .chatter-boite { flex-basis: 100%; margin-left: 0; } }
/* page Société : boîte d'envoi des e-mails */
.aide-groupe { margin: 0; padding: 12px 18px; font-size: 13px; color: var(--encre-2); }
/* « Recevoir les réponses dans Sereina » : libellé et explication à gauche, interrupteur à droite */
.groupe .champ-bascule { grid-template-columns: minmax(0, 1fr) auto; padding-block: 12px; }
.groupe .champ-bascule .secondaire { grid-column: 1; grid-row: 2; max-width: 70ch; font-size: 12.5px; }
.groupe .champ-bascule input[role="switch"] { grid-column: 2; grid-row: 1 / span 2; }
.email-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 18px 12px; border-top: 1px solid var(--ligne); }
.email-actions .secondaire { flex: 1 1 200px; font-size: 13px; }
.lien-signature input { font-size: 13px; }
@media (max-width: 600px) {
  .ligne-signature { grid-template-columns: minmax(0, 1fr) auto; }
  .ligne-signature .att-boutons { grid-column: 1 / -1; justify-content: flex-end; }
}
@media (max-width: 600px) {
  .ligne-attestation { grid-template-columns: minmax(0, 1fr); }
  .att-deplier .att-resume { grid-column: 2; }
  .att-deplier { grid-template-columns: auto minmax(0, 1fr); }
  .att-boutons { justify-content: flex-end; flex-wrap: wrap; }
  .att-dossier { margin-left: 0; }
}

/* page Société : connecteurs de pointeuse */
.connecteur-ligne { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--interne-bord); font-size: 13px; }
.connecteur-ligne:last-child { border-bottom: 0; }
.connecteur-ligne strong { min-width: 140px; }
.connecteur-ligne .secondaire { margin-left: auto; text-align: right; }

/* connexion : bascule vers l'inscription ; accueil ; code à 6 chiffres */
.bascule-inscription { margin: 10px 0 0; text-align: center; font-size: 13px; }
.etapes-accueil { max-width: 520px; margin: 0 auto 24px; padding-left: 22px; text-align: left; line-height: 1.7; color: var(--encre-2); }
.cle-2fa { display: block; margin: 8px 0; padding: 10px 12px; border-radius: 12px; background: var(--champ); font: 600 15px/1.4 ui-monospace, monospace; letter-spacing: .04em; word-break: break-all; }
.ligne-2fa { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.ligne-2fa input { width: 140px; }

/* ---------- ventes : devis, factures, clients, articles */
@media (min-width: 861px) { .entete .recherche:is(.recherche-ventes, .recherche-compta) { display: flex; } }
body:is([data-onglet="devis"], [data-onglet="factures"], [data-onglet="tiers"], [data-onglet="articles"], [data-onglet="surveillance"], [data-onglet="externes"], [data-onglet="ecritures"], [data-onglet="balance"], [data-onglet="plan"], [data-onglet="exercices"], [data-onglet="salaires"]) :is(.mois-pilules, #btn-sync-haut) { visibility: hidden; }
/* comptabilité générale */
.compta-table { width: 100%; }
.compta-table tr.tete-ecriture td, .compta-table tr.ligne-ecriture td:nth-child(2) { white-space: normal; }
.periode-compta input { height: 36px; border: 1px solid var(--ligne); border-radius: 999px; padding: 0 12px; background: var(--champ); font: inherit; font-size: 13.5px; color: var(--encre); }
.periode-compta { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--encre-2); }
.compta-table td.num, .compta-table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.compta-table tr.tete-ecriture td { padding-top: 12px; font-weight: 600; border-top: 1px solid var(--ligne); }
.compta-table tr.tete-ecriture .secondaire { font-weight: 400; }
.compta-table tr.ligne-ecriture td { color: var(--encre); font-size: 13px; }
.compta-table tr.ligne-ecriture td:first-child { padding-left: 22px; }
.compta-table tr.annulee td { color: var(--encre-2); text-decoration: line-through; text-decoration-color: rgba(0, 0, 0, .25); }
.compta-table tr.sous-total td { font-weight: 600; background: var(--pastel-2); }
.compta-table tr.total td { font-weight: 700; border-top: 2px solid var(--accent); }
.compta-table tr.cliquable { cursor: pointer; }
.compta-table tr.cliquable:hover td { background: var(--survol); }
.lettrage { display: inline-block; min-width: 22px; padding: 1px 6px; border-radius: 6px; background: var(--pastel-2); color: var(--accent); font-size: 11.5px; font-weight: 700; text-align: center; }
.lettrage.partiel { background: var(--pastel-3); color: var(--attente); }

/* ---------- tout relié : comptes, tiers, écritures et pièces s'ouvrent d'un clic */
.lien-compta { border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; text-decoration-color: var(--interne-bord); text-underline-offset: 3px; }
.lien-compta:hover, .lien-compta:focus-visible { color: var(--accent); text-decoration-color: currentColor; }
.ecriture-liens { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }
.ecriture-liens > p { margin: 0; font-size: 13px; }
.ecriture-lien { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 4px 12px; border: 1px solid var(--interne-bord); border-radius: 999px; background: var(--champ); font: inherit; font-size: 13px; color: var(--encre); text-align: left; }
button.ecriture-lien { cursor: pointer; }
button.ecriture-lien:hover { border-color: var(--accent); }
.ecriture-lien > span { color: var(--encre-3); font-size: 12px; font-weight: 600; }
.ed-trace { margin: 10px 0 0; font-size: 12px; }
/* le grand livre et l'écriture s'ouvrent l'un sur l'autre (et sur une pièce) : fond plein, sinon les textes se mêlent */
#dlg-grand-livre, #dlg-ecriture-detail { background: var(--fond); }

/* ---------- tableau de bord de la comptabilité : une carte par journal, comme celui d'Odoo */
.cartes-journaux { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 14px; }
#journaux-sante:not([hidden]) { margin-bottom: 14px; }
.chiffre[data-lien] { cursor: pointer; }
.chiffre[data-lien]:hover, .chiffre[data-lien]:focus-visible { border-color: var(--accent); }
.carte-journal { gap: 2px; }
.carte-journal > header h2 { font-size: 16px; font-weight: 600; }
.jc-code { padding: 2px 8px; border-radius: 6px; background: var(--champ); color: var(--encre-2); font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; }
.jc-lignes { display: grid; gap: 2px; margin: 0 -10px; }
.jc-ligne { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; padding: 6px 10px; border: 0; border-radius: 12px; background: none; font: inherit; color: var(--encre); text-align: left; }
button.jc-ligne { cursor: pointer; }
button.jc-ligne:hover, button.jc-ligne:focus-visible { background: var(--survol); }
.jc-lib { display: flex; flex-direction: column; min-width: 0; font-size: 13.5px; color: var(--encre-2); }
.jc-lib small { font-size: 11.5px; color: var(--encre-3); }
.jc-val { display: flex; align-items: center; gap: 10px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.jc-val b { font-size: 14.5px; font-weight: 600; }
.jc-nb { display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--champ); color: var(--encre-2); font-size: 12px; font-weight: 700; }
.ton-attente .jc-nb { background: var(--pastel-3); color: var(--attente); }
.ton-danger .jc-nb { background: var(--pastel-1); color: var(--danger); }
.ton-danger .jc-val b { color: var(--danger); }
.jc-echeancier { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; height: 136px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--ligne); }
.jc-barre { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.jc-barre em { min-height: 14px; font-style: normal; font-size: 11px; color: var(--encre-2); font-variant-numeric: tabular-nums; }
.jc-col { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.jc-col i { display: block; width: min(100%, 34px); border-radius: 6px 6px 2px 2px; background: var(--brume); }
.jc-barre.echu .jc-col i { background: var(--danger); }
.jc-barre small { max-width: 100%; min-height: 2.4em; font-size: 10.5px; line-height: 1.2; text-align: center; color: var(--encre-3); }
.jc-vide { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--ligne); font-size: 13px; }
.jc-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 12px; }
.journaux-pied { margin: 14px 4px 0; }

/* ---------- en-tête : le mois, la pointeuse et les jours à vérifier sont des commandes de la paie */
body:not([data-app="paie"]):not([data-app="presences"]) :is(.mois-pilules, #btn-sync-haut) { visibility: hidden; }
@media (max-width: 860px) { body:not([data-app="paie"]):not([data-app="presences"]) :is(.mois-pilules, #btn-sync-haut) { display: none; } }
/* 01/11 : la cloche sert aussi la comptabilité (contrôles à corriger ou à voir) */
body:not([data-app="paie"]):not([data-app="presences"]):not([data-app="compta"]) #btn-alertes { display: none; }

/* ---------- caisse : billetage de l'arrêté, solde négatif */
.billetage { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px 10px; }
.billetage label { font-size: 12.5px; }
#caisse-chiffres { margin-bottom: 14px; }
td.negatif { color: var(--danger); font-weight: 600; }

/* ---------- actifs : plan d'amortissement et échéancier dépliés sous leur ligne */
tr.plan-immo > td { padding: 4px 8px 12px 28px; background: var(--survol); }
tr.plan-immo table { width: auto; min-width: 360px; }
button.lettrage { border: 0; font-family: inherit; line-height: inherit; cursor: pointer; }
button.lettrage:hover { box-shadow: 0 0 0 2px currentColor; }
.reglages-compta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 14px; padding: 4px 18px 16px; }
.reglages-compta label { display: grid; gap: 5px; font-size: 12.5px; color: var(--encre-2); }
.reglages-compta select { height: 36px; border: 1px solid var(--ligne); border-radius: 10px; padding: 0 10px; background: var(--champ); font: inherit; font-size: 13px; }
.reglages-compta small { color: var(--accent); font-size: 11.5px; }
.roles-aide { margin: -4px 0 10px; }
.compta-table tr.inactif td { color: var(--encre-2); }
.compta-table td .bouton-texte { height: 30px; padding: 0 10px; font-size: 13px; }
body:not(.peut-externes) [data-perm~="externes"], body:not(.peut-ecritures) [data-perm~="ecritures"],
body:not(.peut-plan) [data-perm~="plan"], body:not(.peut-cloture) [data-perm~="cloture"] { display: none !important; }
/* exercices : mois verrouillés, balance d'ouverture, paramètres fiscaux */
.grille-exercices { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 14px; margin-bottom: 14px; }
.mois-compta { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.mois-compta-btn { display: grid; place-items: center; gap: 2px; min-height: 56px; padding: 8px 4px; border: 1px solid var(--ligne); border-radius: 14px; background: var(--champ); color: var(--encre); font: inherit; cursor: pointer; transition: background-color .15s ease-out, transform .12s ease-out; }
.mois-compta-btn span { font-size: 14px; font-weight: 600; }
.mois-compta-btn small { font-size: 11px; color: var(--encre-2); }
.mois-compta-btn:hover:not(:disabled) { background: var(--survol); }
.mois-compta-btn:active:not(:disabled) { transform: scale(.97); }
.mois-compta-btn:disabled { cursor: default; }
.mois-compta-btn.verrouille { border-color: transparent; background: var(--sombre); color: var(--sur-sombre); }
.mois-compta-btn.verrouille small { color: inherit; opacity: .8; }
#mois-compta-aide { margin: 12px 0 0; }
.ouverture-compta { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 10px; align-items: end; }
.ouverture-compta label { display: grid; gap: 5px; font-size: 12.5px; color: var(--encre-2); }
.ouverture-compta input[type="number"] { height: 36px; min-width: 0; border: 1px solid var(--ligne); border-radius: 10px; padding: 0 10px; background: var(--champ); font: inherit; font-size: 13.5px; color: var(--encre); }
.ouverture-compta input[type="file"] { min-width: 0; font-size: 13px; color: var(--encre-2); }
.ouverture-compta input[type="file"]::file-selector-button { height: 32px; margin-right: 10px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--champ); color: var(--accent); font: inherit; font-weight: 500; cursor: pointer; }
.liste-ouvertures { margin: 10px 0 0; padding: 0; list-style: none; }
.liste-ouvertures li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--ligne); font-size: 13px; }
#liste-ouvertures > p { margin: 10px 0 0; font-size: 13px; }
.parametres-compta td { white-space: normal; vertical-align: top; }
.parametres-compta td:first-child { min-width: 200px; }
.parametres-compta td:nth-child(2) { min-width: 220px; max-width: 360px; }
.gl-selection { margin-right: auto; }
/* états : contrôles, tableaux du bilan, du CPC, des balances */
.controles-etats { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.controles-etats:empty { display: none; }
#etats-tableaux > .carte { margin-bottom: 14px; }
#etats-notes { margin: 0 0 14px; }
.etat-table td:first-child { white-space: normal; min-width: 260px; }
.etat-table.premiere-courte td:first-child { min-width: 0; white-space: nowrap; }
.etat-table td.large { white-space: normal; min-width: 240px; }
.etat-table tr.total td { color: var(--sur-sombre); background: var(--sombre); border-top: 0; }
.etat-table tr.cliquable:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.etats-options { display: contents; }
a.desactive { opacity: .45; cursor: not-allowed; }
body:is([data-onglet="etats"], [data-onglet="sante"], [data-onglet="clotures"]) :is(.mois-pilules, #btn-sync-haut) { visibility: hidden; }
/* banque : relevés, rapprochement, opérations */
body[data-onglet="banque"] :is(.mois-pilules, #btn-sync-haut) { visibility: hidden; }
.fichier-bouton { cursor: pointer; }
.compta-table tr.choisie td { background: var(--champ); }
#banque > .grille-exercices { margin-bottom: 14px; }
.operations-banque td { vertical-align: top; }
.operations-banque td.operation-banque { white-space: normal; min-width: 320px; }
.operations-banque td.ecriture-banque { white-space: normal; min-width: 180px; }
#carte-operations .carte-pied .bouton-texte.danger { margin-left: auto; }
.table-is.rapprochement-banque td.num { width: auto; white-space: nowrap; }
#table-releves td:first-child { white-space: normal; }
/* clôtures : contrôles du mois, étapes de l'exercice, calcul de l'IS, affectation */
#clotures > .grille-exercices:last-of-type { margin-top: 14px; }
#clotures > .note-info { margin-top: 14px; }
#table-clot-mois td { white-space: normal; }
#table-clot-mois td:nth-child(3) { min-width: 0; }
#clot-mois { height: 36px; border: 1px solid var(--ligne); border-radius: 10px; padding: 0 10px; background: var(--champ); font: inherit; font-size: 13.5px; color: var(--encre); }
.etapes-cloture { margin: 0; padding: 0; list-style: none; }
.etapes-cloture li { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--ligne); font-size: 13.5px; }
.etapes-cloture li:first-child { border-top: 0; padding-top: 2px; }
.etapes-cloture .etape-num { width: 28px; height: 28px; margin: 0; font-size: 12.5px; }
.etapes-cloture li.fait .etape-num { background: var(--pastel-2); color: var(--succes); }
.etapes-cloture li.prochaine .etape-num { background: var(--sombre); color: var(--sur-sombre); }
.etapes-cloture small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--encre-2); }
.table-is td:first-child { white-space: normal; }
.table-is td.num { width: 190px; }
.table-is tr.total-is td { font-weight: 600; background: var(--champ); }
.table-is .saisie-is { width: 130px; height: 32px; border: 1px solid var(--ligne); border-radius: 10px; padding: 0 10px; background: var(--champ); font: inherit; font-size: 13.5px; text-align: right; color: var(--encre); }
.table-is .saisie-is:disabled { border-color: transparent; background: none; }
.actions-cloture { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap; margin-top: auto; padding-top: 10px; }
.actions-cloture .ligne-coche { margin-right: auto; }
.form-cloture { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 10px; align-items: end; margin-top: auto; }
.form-cloture label { display: grid; gap: 5px; font-size: 12.5px; color: var(--encre-2); }
.form-cloture input { height: 36px; min-width: 0; border: 1px solid var(--ligne); border-radius: 10px; padding: 0 10px; background: var(--champ); font: inherit; font-size: 13.5px; color: var(--encre); }
@media (max-width: 760px) { .form-cloture { grid-template-columns: minmax(0, 1fr); } }
#sante > .chiffres { margin-bottom: 14px; }
.sante-table td:nth-child(3) { white-space: normal; min-width: 280px; }
.retard-chip.bientot { background: var(--pastel-3); color: var(--attente); }
#table-echeances td { vertical-align: top; }
#table-echeances td.echeance-obligation { white-space: normal; min-width: 300px; }
#table-echeances .retard-chip { margin: 4px 0 0; }
/* salaires : ce qui reste à payer de chaque mois de paie */
.salaires-compta td { vertical-align: top; }
.salaires-compta td:nth-child(5) { white-space: normal; min-width: 130px; }
.salaires-compta td:nth-child(5) .bouton-teinte { margin-top: 6px; }
.restes-paie { min-width: 230px; }
.reste-paie { display: grid; grid-template-columns: 64px minmax(70px, 1fr) auto; align-items: center; gap: 6px; padding: 1px 0; font-size: 13px; }
.reste-paie .bouton-texte { height: 26px; padding: 0 8px; }
.reste-paie b { text-align: right; }
.reste-paie b { font-variant-numeric: tabular-nums; }
@media (max-width: 860px) {
  .grille-exercices { grid-template-columns: minmax(0, 1fr); }
  .mois-compta { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ouverture-compta { grid-template-columns: minmax(0, 1fr); }
}
dialog.ecriture-feuille { width: min(820px, calc(100vw - 32px)); }
.lignes-ecriture input { width: 100%; min-width: 0; padding: 8px 10px; border-radius: 10px; font-size: 13.5px; }
.lignes-ecriture td { padding: 4px; }
.lignes-ecriture .num input { text-align: right; }
dialog.grand-livre { width: min(900px, calc(100vw - 32px)); padding: 24px 26px 20px; }
.grand-livre td.gl-libelle { white-space: normal; min-width: 220px; }
.grand-livre td:has(> [data-gl-coche]) { width: 28px; padding-right: 0; }
@media (max-width: 760px) { .reglages-compta { grid-template-columns: minmax(0, 1fr); } }
body:not(.peut-devis) [data-perm~="devis"], body:not(.peut-factures) [data-perm~="factures"],
body:not(.peut-reglements) [data-perm~="reglements"], body:not(.peut-tiers) [data-perm~="tiers"],
body:not(.peut-articles) [data-perm~="articles"], body:not(.peut-ventes_reglages) [data-perm~="ventes_reglages"],
body:not(.peut-crm) [data-perm~="crm"], body:not(.peut-crm_config) [data-perm~="crm_config"],
body:not(.peut-calendrier) [data-perm~="calendrier"] { display: none !important; }
.onglet.ventes > .chiffres { margin-bottom: 14px; }
.onglet.ventes > .note-info, .ventes-essai .note-info { margin: 14px 0; }
.ventes-essai:empty { display: none; }
.carte-table > header .lien-fleche { margin: 0; }
.retard-chip { display: inline-flex; align-items: center; height: 20px; margin-left: 6px; padding: 0 7px; border-radius: 999px; background: var(--pastel-1); color: var(--rouge); font-size: 11px; font-weight: 600; }
.ligne-coche { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--encre-2); cursor: pointer; }
.ligne-coche > input[type="checkbox"] { width: auto; flex: none; margin: 0; }  /* 03/11 : dans une fenêtre, une case ne prend pas toute la largeur */
.retard { color: var(--rouge); font-weight: 600; }
.rail button { width: min(50px, calc((100vw - 56px) / var(--n, 7))); }

/* fenêtre d'une pièce : large, lignes éditables */
dialog.feuille.feuille-piece { width: min(1060px, calc(100vw - 32px)); }
dialog.feuille.large { width: min(720px, calc(100vw - 32px)); }
/* page d'une pièce (02/11, comme Odoo) : barre (boutons à gauche, étapes à droite), champs sur deux colonnes, onglets */
.piece-barre { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--verre-popup-bord); }
.piece-barre .piece-outils { justify-content: flex-start; }
ol.etapes { display: flex; margin: 0 0 0 auto; padding: 0; list-style: none; }  /* la barre d'étapes d'un document (pas les cartes .etapes de la paie, 04/11) */
.etapes li { display: flex; align-items: center; height: 30px; margin-left: -6px; padding: 0 16px 0 20px; font-size: 12.5px; font-weight: 600; color: var(--encre-3); background: var(--champ); clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 0 100%, 9px 50%); white-space: nowrap; }
.etapes li:first-child { margin-left: 0; padding-left: 14px; border-radius: 8px 0 0 8px; clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 0 100%); }
.etapes li.actuelle { color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--carte)); }
.etapes li.faite { color: var(--encre-2); }
.piece-genre { margin: 0 0 2px; font-size: 12.5px; font-weight: 600; color: var(--encre-3); text-transform: uppercase; letter-spacing: 0.04em; }
.piece-tete h1#piece-titre { font-size: clamp(26px, 2.2vw, 34px); }
.piece-champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 32px; }
.piece-col { display: grid; gap: 8px; align-content: start; }
.piece-col > label, .piece-col .champ-tiers > label, .piece-info { display: grid; grid-template-columns: 160px minmax(0, 1fr); align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; color: var(--encre); }
.piece-info p { margin: 0; font-weight: 400; color: var(--encre-2); line-height: 1.45; }
.piece-col label[hidden], .piece-info[hidden] { display: none; }
.piece-onglets { display: flex; gap: 2px; margin-top: 4px; overflow-x: auto; border-bottom: 1px solid var(--verre-popup-bord); }
.piece-onglet { flex: none; white-space: nowrap; margin-bottom: -1px; padding: 9px 16px; border: 1px solid transparent; border-bottom: 0; border-radius: 10px 10px 0 0; background: none; font: inherit; font-size: 13.5px; color: var(--encre-2); cursor: pointer; }
.piece-onglet.actif { border-color: var(--verre-popup-bord); background: var(--carte); color: var(--encre); font-weight: 600; }
.piece-panneau { display: grid; gap: 12px; }
.piece-ajouts { display: flex; flex-wrap: wrap; gap: 6px 20px; padding: 0 6px; }
.piece-ajouts .lien { color: var(--accent); font-size: 13.5px; text-decoration: none; }
.piece-ajouts .lien:hover { text-decoration: underline; }
.piece-conditions { flex: 1 1 320px; min-height: 84px; resize: vertical; }
.piece-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 18px; flex-wrap: wrap; }
.piece-tete :is(h1, h2) { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.piece-tete .sous-titre { margin-top: 4px; }
.piece-outils { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.piece-outils :is(.bouton, .bouton-teinte).petit { height: 32px; padding: 0 14px; font-size: 13px; text-decoration: none; }
.piece-outils a svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
:is(dialog, feuille-doc) .trois { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: end; }
:is(dialog, feuille-doc) .trois-egaux { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
:is(dialog, feuille-doc) .trois > *, :is(dialog, feuille-doc) .trois-egaux > * { min-width: 0; }
.champ-tiers { display: flex; align-items: flex-end; gap: 8px; min-width: 0; }
.champ-tiers label { flex: 1; min-width: 0; }
.champ-tiers .rond-petit { flex: none; width: 42px; height: 42px; }
:is(dialog, feuille-doc) textarea { width: 100%; min-width: 0; border: 1px solid var(--verre-popup-bord); border-radius: 12px; background: var(--verre-popup-champ); padding: 11px 13px; font: inherit; font-size: 14px; color: var(--encre); resize: vertical; }
:is(dialog, feuille-doc) textarea:disabled, :is(dialog, feuille-doc) input:disabled { opacity: .7; }
.lignes-piece { margin: 0 -6px; border: 1px solid var(--verre-popup-bord); border-radius: 16px; background: var(--verre-popup-champ); }
.saisie-lignes { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.saisie-lignes th { padding: 10px 6px 6px; font-size: 11.5px; font-weight: 500; color: var(--encre-3); text-align: left; white-space: nowrap; }
.saisie-lignes td { padding: 5px 4px; vertical-align: top; border-top: 1px solid var(--verre-popup-bord); }
.saisie-lignes tr > :first-child { padding-left: 12px; }
.saisie-lignes tr > :last-child { padding-right: 10px; width: 38px; }
.saisie-lignes input, .saisie-lignes .choix { padding: 8px 9px; border-radius: 10px; font-size: 13.5px; background: var(--carte); }
.saisie-lignes input[type="number"] { text-align: right; }
.saisie-lignes input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.saisie-lignes .col-des { min-width: 250px; width: 40%; }
.saisie-lignes .col-des input { display: block; }
.saisie-lignes .ligne-desc { margin-top: 4px; padding: 6px 9px; font-size: 12.5px; color: var(--encre-2); }
.saisie-lignes td:nth-child(2) { width: 78px; } .saisie-lignes td:nth-child(3) { width: 84px; }
.saisie-lignes td:nth-child(4) { width: 108px; } .saisie-lignes td:nth-child(5) { width: 92px; }
.saisie-lignes td:nth-child(6) { width: 76px; }
/* section (titre) et note (texte libre) d'une pièce, comme Odoo */
.saisie-lignes tr.ligne-section td { background: var(--champ); }
.saisie-lignes tr.ligne-section input { font-weight: 700; background: transparent; }
.saisie-lignes tr.ligne-note input { font-style: italic; color: var(--encre-2); background: transparent; }
.saisie-lignes .total-ligne { width: 110px; padding-top: 14px; font-weight: 600; white-space: nowrap; }
/* déduction d'une facture d'acompte (petits restes n° 4) : montant fixé par l'acompte, en retrait */
.saisie-lignes tr.ligne-acompte input, .saisie-lignes tr.ligne-acompte select, .saisie-lignes tr.ligne-acompte .total-ligne { color: var(--encre-2); font-style: italic; }
.saisie-lignes .rond-petit { margin-top: 4px; }
.piece-bas { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.piece-totaux { display: grid; gap: 5px; min-width: min(300px, 100%); margin-left: auto; padding: 12px 16px; border-radius: 16px; background: var(--verre-popup-champ); border: 1px solid var(--verre-popup-bord); }
.tot-ligne { display: flex; justify-content: space-between; gap: 18px; font-size: 13.5px; color: var(--encre-2); }
.tot-ligne b { color: var(--encre); font-weight: 600; white-space: nowrap; }
.tot-ligne.fort { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--verre-popup-bord); font-size: 16px; color: var(--encre); }
.tot-ligne.reste b { color: var(--accent); }
.piece-suivi { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 4px 20px; }
.piece-suivi:empty { display: none; }
.suivi-bloc .fiche-h3 { margin-top: 4px; }
.suivi-liste { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.suivi-liste li { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--encre-2); }
.suivi-liste li > span:first-child { flex: 1; min-width: 0; }
.suivi-liste b { color: var(--encre); white-space: nowrap; }
.vide-mini { margin: 0; font-size: 13px; color: var(--encre-3); }
/* clôtures : cours du 31/12 des devises (écarts de conversion) */
.conv-taux { display: flex; flex-wrap: wrap; gap: 10px 18px; padding: 4px 22px 12px; }
.conv-taux label { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--encre); }
.conv-taux input { width: 110px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--verre-popup-bord); background: var(--champ); font: inherit; text-align: right; }
/* 02/11 : compte sans le droit de supprimer : les boutons qui suppriment sont cachés (le serveur refuse aussi) */
body.sans-suppression :is(#btn-suppr-piece, #btn-banque-supprimer, #btn-suppr-exc, #btn-suppr-compte, #btn-suppr-role, #btn-suppr-tiers,
  #btn-suppr-article, #btn-suppr-prime-fixe, [data-suppr-ligne="salaries"], [data-suppr-reglement], [data-suppr-compte-banque],
  [data-suppr-paiement-pdf], #btn-retirer-salarie, [data-suppr-doc], #btn-suppr-crm, [data-crm-suppr], #btn-cal-suppr, #btn-cal-d-suppr,
  .temps-retirer) { display: none !important; }
/* app Société (02/11) : une page par partie ; fiche salarié en onglets, dossier de documents */
.params-corps.seul { max-width: 860px; }
.fiche-onglets { margin: 4px 0 14px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.fiche-onglets .pilule { flex: none; }
.fiche-documents .doc-ajout { align-items: end; padding-bottom: 14px; margin-bottom: 6px; border-bottom: 1px solid var(--ligne); }
#doc-fichier-lib { justify-self: start; display: inline-flex; align-items: center; cursor: pointer; }
#fiche-docs .vide { margin: 10px 0 4px; }
.fiche-suivi .tb-compteurs { margin-top: 0; }
/* réglages des ventes : aperçu des relances automatiques (petits restes n° 5) */
.rv-relances { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--verre-popup-bord); border-radius: 14px; background: var(--verre-popup-champ); }
.rv-relances-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 13.5px; }
.rv-relances .aide { margin: 0; }
.rv-relances .retard { color: var(--rouge); }
.champ-logo { display: grid; gap: 6px; align-content: end; }
:is(dialog, feuille-doc) label.bouton-teinte { display: inline-flex; justify-self: start; height: 42px; font-size: 13.5px; color: var(--encre); cursor: pointer; }
@media (max-width: 860px) {
  :is(dialog, feuille-doc) .trois, :is(dialog, feuille-doc) .trois-egaux { grid-template-columns: minmax(0, 1fr); }
  .piece-outils { justify-content: flex-start; }
  .piece-champs { grid-template-columns: minmax(0, 1fr); }
  .piece-col > label, .piece-col .champ-tiers > label, .piece-info { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  ol.etapes { margin-left: 0; }
  dialog.feuille.feuille-piece { max-height: 92vh; }
}
.saisie-lignes input[list]::-webkit-calendar-picker-indicator, :is(dialog, feuille-doc) input[list]::-webkit-calendar-picker-indicator { display: none !important; }
@media (max-width: 1260px) { #factures-chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { #factures-chiffres { grid-template-columns: minmax(0, 1fr); } }

/* ---------- écran des applications (comme un bureau : une tuile par app, chacune ouvre sa propre fenêtre) */
body.ecran-apps :is(.mois-pilules, #btn-sync-haut, #btn-alertes, #btn-nouveau, .rail, .enregistrer-barre) { display: none !important; }
body.ecran-apps .haut { grid-template-columns: 1fr auto; }
@media (min-width: 861px) {
  body.ecran-apps .fenetre { grid-template-columns: minmax(0, 1fr); }
  body.ecran-apps .menu-lateral { display: none; }
  body.ecran-apps .haut, body.ecran-apps main { grid-column: 1; }
  body.ecran-apps .haut .marque, body.ecran-apps .haut .profil { display: inline-flex; }
}
.apps-accueil { max-width: 900px; margin: clamp(18px, 7vh, 72px) auto 40px; padding: 0 4px; }
.apps-tete { display: grid; gap: 4px; margin-bottom: 28px; text-align: center; }
.apps-tete h1 { font-size: clamp(32px, 4vw, 46px); }
#apps-date::first-letter { text-transform: uppercase; }
/* lanceur à la manière d'Odoo (31/10) : carrés d'icône blancs et nom dessous, six par ligne au plus, sans carte */
.apps-grille { display: grid; grid-template-columns: repeat(auto-fit, 112px); justify-content: center; gap: 30px 26px; max-width: 812px; margin: 0 auto; }
.app-tuile {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 6px 0 4px;
  border: 0; border-radius: 16px; background: none; color: var(--encre); text-align: center; cursor: pointer;
  animation: monter-tuile .38s cubic-bezier(.2, .8, .2, 1) both;
}
.app-tuile:nth-child(2) { animation-delay: 40ms; } .app-tuile:nth-child(3) { animation-delay: 80ms; }
.app-tuile:nth-child(4) { animation-delay: 120ms; } .app-tuile:nth-child(5) { animation-delay: 160ms; }
@keyframes monter-tuile { from { opacity: 0; transform: translateY(10px); } }
.app-tuile:hover .app-icone { transform: translateY(-2px); box-shadow: 0 1px 2px rgba(var(--ombre), .06), 0 14px 26px -12px color-mix(in srgb, var(--c) 45%, transparent); }
.app-tuile:active .app-icone { transform: scale(.96); }
.app-tuile:focus-visible { outline: none; }
.app-tuile:focus-visible .app-icone { outline: 2px solid var(--c); outline-offset: 3px; }
/* tuile « claire » du pack d'icônes SEREINA : fond blanc, pictogramme au trait de la couleur de la famille */
.app-icone { width: 72px; height: 72px; border-radius: 16px; display: grid; place-items: center; color: var(--c);
  background: var(--option); border: 1px solid var(--interne-bord);
  box-shadow: 0 1px 2px rgba(var(--ombre), .05), 0 10px 22px -14px rgba(var(--ombre), .3);
  transition: transform .18s cubic-bezier(.2, .8, .2, 1), box-shadow .18s ease-out; }
.app-icone svg { width: 38px; height: 38px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.app-nom { font-size: 13.5px; font-weight: 600; letter-spacing: -0.005em; }
.app-puce { height: 18px; margin-top: -6px; padding: 0 7px; display: inline-flex; align-items: center; border-radius: 999px; font-size: 10.5px; font-weight: 600; background: var(--pastel-3); color: var(--mauve-texte); }
.app-puce.rappel { background: var(--pastel-2); color: var(--accent); }
.app-puce.grace { background: var(--pastel-1); color: var(--rouge); }
/* apps créées vides (02/11) : page « En préparation » */
.carte.app-vide { max-width: 560px; align-items: center; gap: 6px; padding: 40px 28px; text-align: center; }
.app-vide-icone { width: 56px; height: 56px; margin-bottom: 8px; display: grid; place-items: center; border-radius: 18px; background: var(--pastel-2); color: var(--encre); }
.app-vide-icone svg { width: 28px; height: 28px; }
.app-vide h2 { margin: 0; font-size: 17px; font-weight: 600; }
.app-vide p { margin: 0; max-width: 42ch; font-size: 14px; color: var(--encre-2); }
:root[data-theme="sombre"] .app-icone { color: #fff; }
.rail .rail-apps svg { fill: currentColor; stroke: none; }
@media (max-width: 860px) {
  .apps-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 8px; }
  .app-icone { width: 62px; height: 62px; border-radius: 15px; }
  .app-icone svg { width: 32px; height: 32px; }
}
.apps-tete .installer { justify-self: center; margin-top: 12px; gap: 8px; }
.apps-tete .installer svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.installer-aide { max-width: 60ch; justify-self: center; margin: 10px 0 0; padding: 10px 14px; border-radius: 14px; border: 1px dashed var(--encre-3); font-size: 12.5px; color: var(--encre-2); }

/* ---------- surveillance : grille des caméras, lecteur en direct */
.cam-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-bottom: 16px; }
.cam-carte { display: grid; padding: 0; overflow: hidden; border: 1px solid var(--carte-bord); border-radius: 22px; background: var(--carte); box-shadow: var(--carte-ombre); cursor: pointer; text-align: left; transition: transform .18s cubic-bezier(.2, .8, .2, 1), border-color .18s ease-out; }
.cam-carte:hover { transform: translateY(-2px); border-color: var(--encre-3); }
.cam-carte:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.cam-image { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; background: #0b1416; }
.cam-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .25s ease-out; }
.cam-image.chargee img { opacity: 1; }
.cam-attente { font-size: 12.5px; color: #9fb4b8; }
.cam-image.chargee .cam-attente { display: none; }
.cam-legende { display: flex; align-items: center; gap: 8px; padding: 11px 14px; min-width: 0; }
.cam-legende strong { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cam-legende small { margin-left: auto; font-size: 12px; color: var(--encre-3); white-space: nowrap; }
.cam-point { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--encre-3); }
.cam-point.ok { background: #2f9e6e; box-shadow: 0 0 0 3px color-mix(in srgb, #2f9e6e 22%, transparent); }
.note-info.alerte-cam svg { stroke: var(--rouge); }
#cam-etat .note-info { margin-bottom: 14px; }
dialog.feuille.feuille-camera { width: min(1100px, calc(100vw - 32px)); }
.cam-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cam-tete > div:first-child { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cam-tete h2 { font-size: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cam-tete .petit { height: 32px; padding: 0 14px; font-size: 13px; }
.cam-tete .bouton-teinte.actif { background: var(--sombre); color: var(--sur-sombre); border-color: var(--sombre); }
.cam-video { position: relative; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: #000; display: grid; place-items: center; }
.cam-video video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.cam-message { position: absolute; margin: 0; padding: 8px 14px; border-radius: 999px; background: rgba(0, 0, 0, .55); color: #e6eef0; font-size: 13px; }
.cam-video:fullscreen { border-radius: 0; aspect-ratio: auto; }
@media (max-width: 860px) {
  .cam-grille { grid-template-columns: minmax(0, 1fr); }
  dialog.feuille.feuille-camera .feuille-corps { padding: 18px 14px 16px; }
}

/* factures PDF : aperçu du fichier à côté des champs, paiements dans le détail */
dialog.facture-pdf-feuille { width: min(620px, calc(100vw - 32px)); }
dialog.facture-pdf-feuille.avec-apercu { width: min(1120px, calc(100vw - 32px)); }
.facture-pdf-corps { display: grid; gap: 15px; }
.facture-pdf-champs, .facture-pdf-apercu { display: grid; gap: 15px; align-content: start; min-width: 0; }
.facture-pdf-apercu { gap: 8px; }
.avec-apercu .facture-pdf-corps { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; }
#facture-pdf-cadre, #facture-pdf-image { display: block; width: 100%; height: min(64vh, 620px); border: 1px solid var(--verre-popup-bord); border-radius: 14px; background: #fff; }
#facture-pdf-image { object-fit: contain; }
:is(dialog, feuille-doc) label.zone-facture { min-height: 92px; }
.zone-facture small { display: block; margin-top: 3px; font-size: 12px; color: var(--encre-3); }
.fichier-choisi { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--encre-2); }
.fichier-choisi span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.roles-tiers { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.fpd-montants { display: grid; gap: 6px; }
:is(dialog, feuille-doc) form.fpd-payer { padding: 0; gap: 10px; }
.fpd-payer-bas { display: flex; align-items: end; gap: 12px; }
.fpd-payer-bas label { flex: 1; }
#fpd-ecritures .suivi-liste .secondaire { flex: none; }
@media (max-width: 760px) {
  .avec-apercu .facture-pdf-corps { grid-template-columns: minmax(0, 1fr); }
  #facture-pdf-cadre, #facture-pdf-image { height: 300px; }
  .fpd-payer-bas { flex-direction: column; align-items: stretch; }
}

/* analytique et budget : actions dans l'en-tête des cartes, fenêtre de saisie, répartition en % */
#analytique .carte > header .actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.champs-analytique { display: grid; gap: 12px; }
.repartition-ana { display: grid; gap: 8px; margin: 0; padding: 10px 12px; border: 1px solid var(--ligne); border-radius: 10px; }
.repartition-ana legend { padding: 0 4px; font-size: 13px; font-weight: 600; }
.ligne-repartition { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.pct-ana { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.pct-ana input { width: 76px; text-align: right; }

/* liasse fiscale : fenêtre de saisie (cases et lignes variables) */
@media (min-width: 861px) { dialog.feuille.feuille-liasse { width: min(1000px, calc(100vw - 32px)); } }  /* téléphone : feuille pleine largeur */
.liasse-saisie { display: grid; gap: 14px; max-height: min(62vh, 640px); overflow: auto; }
.liasse-saisie h3 { margin: 4px 0 6px; font-size: 14px; }
.liasse-grille input { width: 100%; min-width: 92px; }
.liasse-grille input.num { text-align: right; }
.liasse-grille td.large { min-width: 200px; }
.liasse-bloc .aide { margin: 0 0 6px; }

/* ---------- téléphone, refait le 01/11 : dock à libellés (quatre pages de l'app + Menu), menu entier en feuille qui
   monte du bas, en-tête plus clair (la société en toutes lettres ; le compte passe dans le menu), un seul mois en
   pilule. Remplace la bulle à encoche (elle restait collée à gauche sur les pages hors du dock). */
.lat-tel-outils, .icone-fermer, .voile-tel { display: none; }
@keyframes monter-menu { from { transform: translateY(100%); } }
@keyframes fondu { from { opacity: 0; } }
@media (max-width: 860px) {
  .rail {
    position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 30; transform: none;
    display: flex; align-items: stretch; gap: 4px; height: 66px; padding: 6px; border-radius: 24px; background: var(--dock);
    box-shadow: 0 18px 34px -14px rgba(8, 24, 26, .55), inset 0 1px 0 rgba(255, 255, 255, .06);
  }
  .rail :is(.dock-fond, .bulle-dock) { display: none; }
  .rail .rail-menu { order: 99; }  /* toujours au bout, après les pages (rangées par app.js) */
  .rail button {
    flex: 1 1 0; min-width: 0; width: auto; height: auto; padding: 0 2px; border-radius: 18px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--dock-icone);
    transition: background-color .2s ease-out, color .2s ease-out, transform .12s ease-out;
  }
  .rail button .icone, .rail button.actif .icone, .rail button:hover .icone { position: relative; opacity: 1; transform: none; color: inherit; }
  .rail svg { width: 22px; height: 22px; }
  .rail .libelle { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; font-weight: 600; line-height: 1.1; }
  .rail button.actif { background: color-mix(in srgb, var(--dock-actif) 17%, transparent); color: var(--dock-actif); }
  .rail button:active { transform: scale(.95); }
  .rail button:focus-visible { outline: 2px solid var(--dock-actif); outline-offset: -2px; border-radius: 18px; }
  .pastille-dock { position: absolute; top: -6px; right: -10px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; display: grid; place-items: center;
    font-size: 9.5px; font-weight: 700; line-height: 1; background: var(--terracotta); color: var(--nuit); box-shadow: 0 0 0 2px var(--dock); }
  .pastille-dock.danger { background: #e05676; color: #fff; }
  .pastille-dock.point { top: -2px; right: -4px; min-width: 9px; width: 9px; height: 9px; padding: 0; }
  main { padding-bottom: 104px; }
  #toast { bottom: calc(92px + env(safe-area-inset-bottom)); }

  /* la feuille du menu : le menu de l'ordinateur, en grand, au-dessus d'un voile */
  body.menu-tel { overflow: hidden; }
  .voile-tel:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 40; background: rgba(5, 15, 18, .45);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: fondu .2s ease-out; }
  body.menu-tel .menu-lateral {
    display: flex; flex-direction: column; position: fixed; left: 0; right: 0; bottom: 0; z-index: 41; min-height: 0;
    max-height: min(88vh, 860px); padding: 24px 16px calc(14px + env(safe-area-inset-bottom));
    border-radius: 26px 26px 0 0; background: var(--fond); box-shadow: 0 -20px 50px rgba(var(--ombre), .3); animation: monter-menu .3s cubic-bezier(.2, .9, .3, 1);
  }
  body.menu-tel .menu-lateral::before { content: ""; position: absolute; top: 9px; left: 50%; width: 40px; height: 5px; margin-left: -20px; border-radius: 3px; background: var(--encre-3); opacity: .45; }
  body.menu-tel .lat-tete { margin-bottom: 10px; }
  body.menu-tel .lat-replier .replier-fleche, body.menu-tel .lat-replier svg:first-child { display: none; }
  body.menu-tel .lat-replier .icone-fermer { display: block; }
  body.menu-tel .lat-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0 -16px; padding: 0 16px 8px; }
  body.menu-tel .lat-nav.deborde { -webkit-mask: linear-gradient(#000 calc(100% - 36px), transparent); mask: linear-gradient(#000 calc(100% - 36px), transparent); }
  body.menu-tel .lat-item { height: 46px; font-size: 15px; border-radius: 14px; }
  body.menu-tel .lat-titre { height: 26px; font-size: 11px; }
  body.menu-tel .lat-sous button { height: 40px; font-size: 14px; }
  body.menu-tel .lat-pied { margin-top: 8px; }
  body.menu-tel .lat-app { padding: 8px 2px 7px; font-size: 12px; }
  body.menu-tel .lat-app-icone { width: 36px; height: 36px; }
  body.menu-tel .lat-tel-outils { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
  .lat-tel-outils button { display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px; border: 1px solid var(--interne-bord); border-radius: 14px;
    background: var(--carte); color: var(--encre); font-size: 14px; font-weight: 500; cursor: pointer; }
  .lat-tel-outils svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

  /* en-tête : la marque, puis la société en toutes lettres ; un seul mois en pilule, entre ses flèches */
  .haut-droite .moi { display: none; }
  .haut .profil { gap: 8px; padding: 3px 10px 3px 3px; border: 1px solid var(--interne-bord); border-radius: 999px; background: var(--carte); }
  .haut .profil .monogramme { width: 32px; height: 32px; font-size: 11px; }
  .haut .profil .profil-texte { display: grid; }
  .haut .profil .profil-texte strong { max-width: 34vw; font-size: 13px; }
  .haut .profil .profil-texte small { display: none; }
  .mois-pilules { justify-content: space-between; overflow: visible; }
  .mois-liste { flex: 1; justify-content: center; }
  .mois-liste .pilule:not(.actif) { display: none; }
  .mois-liste .pilule.actif { flex: 1; max-width: 240px; height: 38px; font-size: 14px; }
  .mois-pilules .pas { width: 38px; height: 38px; }

  /* tableau de bord de la paie : une carte vide ne garde pas sa grande hauteur ; les listes restent coupées à la
     hauteur d'avant (tenir() dans app.js), avec leur « +N » */
  .bento { grid-template-rows: auto 320px 280px auto auto auto; }
  .bento :is(.b-verif, .b-exc, .b-direct) { min-height: 150px; }
  .bento .b-verif { max-height: 380px; }
  #tableau .bento :is(.b-verif, .b-exc, .b-direct, .b-barres) [data-reste] { contain: none; flex: 0 1 auto; }  /* la liste donne sa hauteur à la carte (les barres des retenues étaient cachées) */
  .bento :is(.b-exc, .b-direct) { max-height: 300px; }

  /* journal sur trois colonnes */
  .journal-tel .tete-ecriture td { padding-top: 14px; white-space: normal; }
  .journal-tel .ecr-numero { font-weight: 600; }
  .journal-tel .ecr-libelle { display: block; margin-top: 3px; font-size: 13px; color: var(--encre-2); white-space: normal; }
  .journal-tel .tete-ecriture .bouton-texte { margin-top: 6px; padding: 0; height: auto; }
  .journal-tel .ligne-ecriture td:first-child { white-space: normal; }
  .journal-tel .ecr-tiers { display: block; margin-top: 2px; font-size: 12.5px; }
  .journal-tel td.num { white-space: nowrap; }
  .journal-tel.donnees { font-size: 13px; }
  .journal-tel.donnees tr > :is(th, td) { padding-left: 8px; padding-right: 8px; }
  .journal-tel.donnees tr > :first-child { padding-left: 14px; }
  .journal-tel.donnees tr > :last-child { padding-right: 14px; }
  .journal-tel td:first-child { width: 100%; overflow-wrap: anywhere; }
  .journal-tel tfoot td { font-size: 12px; }
}

/* tableau plus large que sa carte : fondu du côté où il reste des colonnes (app.js, majFonduDefile) */
:is(.defile, .reglages-apps).reste-droite { -webkit-mask: linear-gradient(to left, transparent, #000 40px); mask: linear-gradient(to left, transparent, #000 40px); }
:is(.defile, .reglages-apps).reste-gauche { -webkit-mask: linear-gradient(to right, transparent, #000 40px); mask: linear-gradient(to right, transparent, #000 40px); }
:is(.defile, .reglages-apps).reste-gauche.reste-droite {
  -webkit-mask: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent);
  mask: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent);
}

/* page en chargement (enChargement dans app.js) : un petit cercle tourne à côté du titre (01/11) */
.onglet.en-chargement .entete h1::after {
  content: ""; display: inline-block; width: .6em; height: .6em; margin-left: .45em; vertical-align: .05em;
  border: 2px solid var(--interne-bord); border-top-color: var(--accent); border-radius: 50%; animation: tourner .8s linear infinite;
}

/* facture PDF sur plusieurs comptes ou taux (01/11) : une ligne en plus = compte, libellé, HT, taux, TVA, retirer */
.pdf-lignes { display: grid; gap: 10px; }
.pdf-lignes:empty { display: none; }
.pdf-ligne { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 30px;
  gap: 10px; align-items: end; padding: 12px 12px 12px 14px; border: 1px dashed var(--interne-bord); border-radius: 14px; }
.pdf-ligne .pdf-l-compte { grid-column: 1 / span 2; }
.pdf-ligne .pdf-l-lib { grid-column: 3 / span 2; }
.pdf-ligne .pdf-l-retirer { margin-bottom: 6px; }
.ajout-ligne-pdf { justify-self: start; gap: 6px; padding: 0; height: auto; }
.ajout-ligne-pdf svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; }
.fpd-objet { margin: 0 0 6px; font-weight: 600; }
@media (max-width: 860px) {
  .pdf-ligne { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding-right: 44px; }
  .pdf-ligne .pdf-l-compte, .pdf-ligne .pdf-l-lib { grid-column: 1 / -1; }
  .pdf-ligne .pdf-l-retirer { position: absolute; top: 10px; right: 10px; margin: 0; }
}

/* CRM (02/11, comme Odoo) : pipeline en colonnes, cartes glissées d'une étape à l'autre, fiche, configuration */
.crm-barre { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 16px; }
.crm-colonnes { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 14px; align-items: start; overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x proximity; }
.crm-colonne { display: grid; align-content: start; gap: 10px; min-height: 180px; padding: 12px; border: 1px solid var(--carte-bord); border-radius: 18px; background: color-mix(in srgb, var(--carte) 55%, transparent); scroll-snap-align: start; transition: background-color .15s ease-out, border-color .15s ease-out; }
.crm-colonne.survol { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--carte)); }
.crm-colonne > header { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 8px; padding: 0 2px; }
.crm-col-titre { display: flex; align-items: center; gap: 8px; min-width: 0; }
.crm-col-titre strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.crm-nb { flex: none; min-width: 22px; height: 20px; padding: 0 7px; display: inline-grid; place-items: center; border-radius: 999px; background: var(--champ); color: var(--encre-2); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.crm-colonne .rond-petit { width: 28px; height: 28px; }
.crm-somme { grid-column: 1 / -1; font-size: 12.5px; color: var(--encre-2); font-variant-numeric: tabular-nums; }
.crm-cartes { display: grid; gap: 8px; }
.crm-carte { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid var(--carte-bord); border-radius: 14px; background: var(--carte); box-shadow: 0 6px 16px -12px rgba(var(--ombre), .45); font-size: 13.5px; cursor: pointer; }
.crm-carte:hover { border-color: var(--interne-bord); }
.crm-carte:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.crm-carte.glisse { opacity: .45; }
.crm-revenu { font-weight: 600; font-variant-numeric: tabular-nums; }
.crm-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.crm-tag { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--t) 15%, transparent); color: var(--t); font: inherit; font-size: 11.5px; font-weight: 600; }
:root[data-theme="sombre"] .crm-tag { color: color-mix(in srgb, var(--t) 50%, #fff); }
.crm-carte-pied { display: flex; align-items: center; gap: 8px; margin-top: 2px; font-size: 12px; }
.crm-etoiles-carte { display: inline-flex; gap: 1px; }
.crm-etoiles-carte svg { width: 13px; height: 13px; fill: var(--etoile); }
.crm-avatar { width: 24px; height: 24px; margin-left: auto; display: grid; place-items: center; border-radius: 50%; background: var(--pastel-2); color: var(--encre); font-size: 10.5px; font-weight: 700; }
.crm-vide { margin: 0; padding: 22px 8px; border: 1.5px dashed var(--interne-bord); border-radius: 12px; color: var(--encre-3); font-size: 12.5px; text-align: center; }
/* fiche : le titre souligné comme dans Odoo, les deux chiffres de l'affaire, puis les champs sur deux colonnes de même pas */
feuille-doc .crm-titre { width: 100%; margin: 22px 0 18px; padding: 2px 0 10px; border: 0; border-bottom: 2px solid var(--interne-bord); border-radius: 0; background: none; color: var(--encre); font: inherit; font-size: clamp(24px, 2vw, 32px); font-weight: 600; letter-spacing: -0.015em; }
feuille-doc .crm-titre:hover:not(:focus) { border-color: transparent; border-bottom-color: var(--encre-3); }
feuille-doc .crm-titre:focus { outline: none; border-bottom-color: var(--accent); }
.crm-titre::placeholder { color: var(--encre-3); font-weight: 500; }
.crm-ruban:not([hidden]) + .crm-titre { margin-top: 18px; }
.crm-chiffres { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 150px); gap: 12px 24px; margin-bottom: 24px; }
.crm-chiffres label { display: grid; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--encre-2); }
.crm-chiffres input { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
#form-crm .piece-champs { gap: 10px 36px; margin-bottom: 22px; }
#form-crm .piece-col { gap: 10px; }
#form-crm .piece-col > label, #form-crm .piece-info { grid-template-columns: 124px minmax(0, 1fr); min-height: 44px; font-weight: 500; color: var(--encre-2); }
#form-crm .piece-info > span { align-self: center; }
#form-crm textarea { width: 100%; min-height: 128px; font: inherit; font-size: 14px; line-height: 1.5; resize: vertical; }
#form-crm .piece-panneau { padding-top: 14px; }
#form-crm .piece-panneau > label { display: grid; grid-template-columns: 180px minmax(0, 1fr); align-items: center; gap: 10px; font-size: 13.5px; font-weight: 500; color: var(--encre-2); }
.crm-ruban { margin: 12px 0 0; padding: 8px 14px; border-radius: 12px; font-size: 13.5px; font-weight: 600; }
.crm-ruban.gagne { background: var(--pastel-2); color: var(--succes); }
.crm-ruban.perdu { background: var(--pastel-1); color: var(--rouge); }
.etapes li button { all: unset; cursor: pointer; }
.etapes li:has(button):hover { color: var(--encre); }
.crm-etoiles { display: flex; gap: 2px; }
.crm-etoiles button { width: 30px; height: 30px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 8px; background: none; cursor: pointer; }
.crm-etoiles button:hover:not(:disabled) { background: var(--survol); }
.crm-etoiles button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
#form-crm .crm-etoiles svg { width: 22px; height: 22px; fill: var(--interne-bord); stroke: none; transition: fill .15s ease-out; }
#form-crm .crm-etoiles button.pleine svg { fill: var(--etoile); }
.crm-etiquettes { display: flex; flex-wrap: wrap; gap: 6px; }
.crm-etiquettes .crm-tag { height: 26px; padding: 0 10px; background: none; color: var(--encre-2); box-shadow: inset 0 0 0 1px var(--interne-bord); cursor: pointer; }
.crm-etiquettes .crm-tag.choisie { background: color-mix(in srgb, var(--t) 15%, transparent); color: var(--t); box-shadow: none; }
.crm-config { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; max-width: 1100px; }
.crm-config > article:first-child { grid-column: 1 / -1; }
.crm-config input:not([type="checkbox"]) { padding: 8px 10px; border: 1px solid var(--verre-popup-bord); border-radius: 10px; background: var(--champ); color: var(--encre); font: inherit; font-size: 13.5px; }
#crm-etapes { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.crm-cfg-ligne { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-top: 1px solid var(--ligne); }
.crm-cfg-ligne:first-child { border-top: 0; }
.crm-cfg-ligne > input { flex: 1; min-width: 0; }
.crm-cfg-ligne .unite input { width: 64px; }
.crm-cfg-outils { display: flex; align-items: center; gap: 4px; }
.crm-cfg-outils .rond-petit { width: 28px; height: 28px; }
.crm-gagnee { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; white-space: nowrap; }
.crm-gagnee input { accent-color: var(--sombre); }
.crm-cfg-ajout { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.crm-cfg-ajout input[name="nom"] { flex: 1; min-width: 0; }
.crm-cfg-ajout .unite input { width: 64px; }
#crm-cfg-etiquettes { margin-bottom: 4px; }
.crm-tag.grand { height: 28px; padding: 0 6px 0 4px; font-size: 12.5px; }
.crm-couleur { width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%; background: var(--t); cursor: pointer; }
.crm-tag-x { width: 18px; height: 18px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer; }
.crm-tag-x:hover { background: color-mix(in srgb, var(--t) 18%, transparent); }
.crm-tag-x svg, .crm-cfg-outils svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.crm-cfg-outils .rond-petit:disabled { opacity: .35; cursor: default; }
/* CRM étape 3 : analyse */
.crm-ana-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 16px 0; }
#crm-rapports .carte-table { margin-bottom: 16px; }
#crm-rapports .barre-ligne header b.neutre { font-variant-numeric: tabular-nums; }
#table-crm-mois tr.vide-ligne td { color: var(--encre-3); }
#table-crm-mois tfoot td { font-weight: 600; border-top: 1px solid var(--interne-bord); }
#crm-rapports .actions .en-ligne { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; }
#crm-rapports .actions .choix { min-width: 120px; }
@media (max-width: 860px) { .crm-ana-grille { grid-template-columns: minmax(0, 1fr); } }
/* CRM étape 2 : la prochaine activité sur la carte, les activités prévues de la fiche, la fenêtre « Planifier » */
.crm-act { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; }
.crm-act svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
.crm-act.retard { color: var(--rouge); } .crm-act.aujourdhui { color: #c77a12; } .crm-act.prevue { color: var(--succes); }
.crm-carte-pied .crm-act { margin-left: auto; }
.crm-carte-pied .crm-act + .crm-avatar { margin-left: 0; }
.crm-activites { display: grid; gap: 8px; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--ligne); }
.crm-activites > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.crm-activites h2 { margin: 0; font-size: 15px; font-weight: 600; }
.crm-activites .bouton-texte { height: 30px; padding: 0 8px; }
.crm-activite { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 4px 10px; align-items: start; padding: 8px 0; border-top: 1px solid var(--ligne); font-size: 13.5px; }
.crm-activite:first-child { border-top: 0; }
.crm-act-icone { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--champ); color: var(--encre-2); }
.crm-act-icone svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.crm-activite.retard .crm-act-icone { background: var(--pastel-1); color: var(--rouge); }
.crm-activite.aujourdhui .crm-act-icone { background: color-mix(in srgb, #c77a12 16%, transparent); color: #c77a12; }
.crm-activite.retard strong { color: var(--rouge); }
.crm-activite.aujourdhui strong { color: #c77a12; }
.crm-act-texte { line-height: 1.4; }
.crm-act-texte .sous { display: block; font-size: 12.5px; color: var(--encre-2); }
.crm-act-boutons { grid-column: 2; display: flex; gap: 2px; margin-left: -8px; }
.crm-act-boutons .bouton-texte { height: 26px; padding: 0 8px; font-size: 12.5px; }
.crm-genres { margin: 0; }
.crm-genres .pilule { display: inline-flex; align-items: center; gap: 6px; }
.crm-genres .pilule svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#crm-devis .donnees { width: 100%; }
.tiers-crm { margin: -4px 0 4px; }
@media (max-width: 700px) {
  .crm-config { grid-template-columns: minmax(0, 1fr); }
  .crm-colonnes { grid-auto-columns: 82%; }
  .crm-chiffres { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 12px; }
  #form-crm .piece-col > label, #form-crm .piece-info { grid-template-columns: minmax(0, 1fr); gap: 6px; min-height: 0; }
  #form-crm .piece-panneau > label { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .crm-cfg-ligne { flex-wrap: wrap; }
}

/* ---------- pages de document à la manière d'Odoo (02/11 ; devis, factures, factures PDF, fiche CRM, document à
   signer) : sa demande, « je préfère l'interface d'Odoo, pas de décoration dans les fiches », puis « un peu quand même ».
   La disposition d'Odoo (libellés gris à gauche, valeurs sombres, onglets à bord, étapes en chevrons) avec la touche de
   Sereina : feuille arrondie à ombre douce, champs à voile léger soulignés d'un trait, coins doux, terracotta pour
   l'étape en cours, l'onglet ouvert et le champ actif. */
.page-doc .carte.doc-feuille, .page-doc .carte.doc-chatter { border: 1px solid var(--interne-bord); border-radius: 14px; background: var(--option); box-shadow: 0 1px 2px rgba(var(--ombre), .04), 0 10px 28px -14px rgba(var(--ombre), .16); -webkit-backdrop-filter: none; backdrop-filter: none; }
.page-doc feuille-doc form, .page-doc feuille-doc .feuille-corps { padding: 22px 28px 24px; gap: 14px; }
/* champs : une ligne, pas une boîte */
.page-doc feuille-doc :is(input, select, textarea, .choix) { border: 0; border-bottom: 1px solid var(--interne-bord); border-radius: 8px 8px 0 0; background: color-mix(in srgb, var(--champ) 45%, transparent); padding: 8px 10px; font-size: 14.5px; box-shadow: none; transition: border-color .15s ease-out, background-color .15s ease-out, box-shadow .15s ease-out; }
.page-doc feuille-doc :is(input, select, .choix):hover:not(:disabled) { border-bottom-color: var(--encre-3); background: color-mix(in srgb, var(--champ) 80%, transparent); }
.page-doc feuille-doc :is(input, select, textarea):focus, .page-doc feuille-doc .choix:focus-visible, .page-doc feuille-doc .choix[aria-expanded="true"] { outline: none; border-bottom-color: var(--accent); box-shadow: inset 0 -1px 0 var(--accent); }
.page-doc feuille-doc .choix { padding-right: 10px; }
.page-doc feuille-doc :is(input, textarea)::placeholder { color: var(--encre-3); }
.page-doc feuille-doc input[type="checkbox"], .page-doc feuille-doc input[type="radio"] { border: 0; padding: 0; width: auto; }
.page-doc feuille-doc input[role="switch"] { border: 0; padding: 0; border-radius: 999px; background: var(--interrupteur); }
.page-doc feuille-doc input[role="switch"]:checked { background: var(--sombre); }
/* zones de texte (notes, conditions) : un cadre fin, sans fond */
.page-doc feuille-doc textarea { padding: 10px 12px; border: 1px solid var(--ligne); border-radius: 10px; }
.page-doc feuille-doc textarea:hover:not(:disabled):not(:focus) { border-color: var(--interne-bord); }
.page-doc feuille-doc textarea:focus { border-color: var(--accent); }
/* libellés : gris, en regard de la valeur */
.page-doc .piece-col > label, .page-doc .piece-col .champ-tiers > label, .page-doc .piece-info { grid-template-columns: 150px minmax(0, 1fr); font-size: 14px; font-weight: 400; color: var(--encre-2); }
.page-doc .piece-col :is(input, select, .choix) { color: var(--encre); }
.page-doc .piece-champs { gap: 4px 48px; }
.page-doc .piece-col { gap: 6px; }
/* titre : la nature du document en petit, le numéro en grand */
.page-doc .piece-genre { margin: 0 0 2px; font-size: 14px; font-weight: 500; color: var(--encre); letter-spacing: 0; text-transform: none; }
/* le numéro en lettres ordinaires (Inter), comme dans Odoo : la police de la marque reste aux titres des pages */
.page-doc .doc-feuille h1 { font-family: "Inter", ui-sans-serif, sans-serif; }
.page-doc .piece-tete h1#piece-titre { font-size: clamp(28px, 2.4vw, 36px); font-weight: 600; letter-spacing: -0.02em; }
/* boutons de la barre : rectangulaires, le premier plein, les autres gris */
.page-doc .piece-outils { gap: 6px; }
.page-doc .piece-outils :is(.bouton, .bouton-teinte, .bouton-texte) { height: 34px; padding: 0 15px; border-radius: 10px; font-size: 14px; font-weight: 500; }
.page-doc .piece-outils .bouton-teinte, .page-doc .piece-outils .bouton-texte { border: 0; background: var(--champ); color: var(--encre); }
.page-doc .piece-outils .bouton-teinte:hover, .page-doc .piece-outils .bouton-texte:hover { background: var(--interne-bord); }
.page-doc .piece-outils .bouton-texte.danger { color: var(--rouge); }
.page-doc .actions.fin :is(.bouton, .bouton-teinte) { border-radius: 10px; }
/* barre des étapes : chevrons gris, l'étape en cours blanche et bordée */
.page-doc .etapes li { height: 34px; margin-left: -1px; padding: 0 18px 0 22px; background: var(--champ); color: var(--encre-2); font-size: 13.5px; font-weight: 500; }
.page-doc .etapes li:first-child { padding-left: 16px; border-radius: 10px 0 0 10px; }
.page-doc .etapes li:last-child { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 9px 50%); border-radius: 0 10px 10px 0; padding-right: 16px; }
.page-doc .etapes li:only-child { clip-path: none; border-radius: 10px; }
.page-doc .etapes li.actuelle { background: color-mix(in srgb, var(--accent) 16%, var(--option)); color: var(--accent); font-weight: 600; }
.page-doc .etapes li.faite { color: var(--encre-2); }
.page-doc .etapes li:has(button):hover { background: var(--interne-bord); color: var(--encre); }
.page-doc .piece-barre { padding-bottom: 12px; border-bottom: 1px solid var(--ligne); }
/* onglets à bord */
.page-doc .piece-onglets { gap: 0; margin-top: 8px; border-bottom: 1px solid var(--interne-bord); }
.page-doc .piece-onglet { padding: 10px 18px; border: 1px solid transparent; border-bottom: 0; border-radius: 10px 10px 0 0; font-size: 14px; color: var(--encre-2); }
.page-doc .piece-onglet:hover:not(.actif) { color: var(--encre); }
.page-doc .piece-onglet.actif { border-color: var(--interne-bord); background: var(--option); color: var(--encre); font-weight: 600; box-shadow: inset 0 2px 0 var(--accent); }
/* lignes d'une pièce : un tableau, pas des boîtes */
.page-doc .saisie-lignes th { padding: 10px 8px; border-bottom: 1px solid var(--interne-bord); font-size: 13px; font-weight: 600; color: var(--encre); }
.page-doc .saisie-lignes td { border-top: 0; border-bottom: 1px solid var(--ligne); }
.page-doc .saisie-lignes :is(input, .choix) { border-bottom-color: transparent; background: transparent; padding: 7px 6px; font-size: 14px; }
.page-doc .saisie-lignes tr:hover :is(input, .choix) { border-bottom-color: var(--interne-bord); background: color-mix(in srgb, var(--champ) 45%, transparent); }
.page-doc .saisie-lignes tr.ligne-section td { background: var(--champ); }
/* totaux : alignés à droite, sans cadre */
.page-doc .piece-totaux { padding: 12px 16px; border: 0; border-radius: 12px; background: color-mix(in srgb, var(--champ) 55%, transparent); }
.page-doc .tot-ligne { font-size: 14px; }
.page-doc .tot-ligne.fort { border-top-color: var(--interne-bord); font-size: 17px; }
/* fiche CRM : le titre garde son trait, sans fond */
.page-doc feuille-doc .crm-titre { padding: 2px 0 8px; border-bottom: 1px solid var(--interne-bord); border-radius: 0; background: none; font-size: clamp(26px, 2.2vw, 34px); font-weight: 600; }
.page-doc feuille-doc .crm-titre:focus { box-shadow: none; }
.page-doc feuille-doc .crm-titre:hover:not(:focus) { border-bottom-color: var(--encre-3); }
.page-doc .crm-chiffres label { font-size: 14px; font-weight: 400; color: var(--encre-2); }
.page-doc .crm-chiffres input { font-size: 20px; font-weight: 600; }
.page-doc .crm-ruban { border-radius: 10px; }
.page-doc #form-crm .piece-col > label, .page-doc #form-crm .piece-info { grid-template-columns: 130px minmax(0, 1fr); min-height: 40px; font-weight: 400; }
.page-doc .crm-etiquettes .crm-tag { border-radius: 999px; }
@media (max-width: 700px) {
  .page-doc feuille-doc form, .page-doc feuille-doc .feuille-corps { padding: 16px 16px 18px; }
  .page-doc .piece-col > label, .page-doc .piece-col .champ-tiers > label, .page-doc .piece-info { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* ---------- Calendrier (02/11, comme Google Agenda) : petit mois et agendas à gauche ; vue jour, semaine, mois ou liste.
   Les événements : fond léger de leur couleur et fin contour (journée entière : plein) ; passés plus pâles ;
   invitation sans réponse : contour seul ; refusée : barrée ; « Occupé » (privé d'un autre) : gris. */
.cal-outils { gap: 10px; }
.cal-pas { display: inline-flex; gap: 6px; }
.cal-vues { margin: 0; gap: 6px; }
.cal-vues .pilule { height: 32px; padding: 0 14px; }
.cal-corps { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 16px; align-items: start; }
.cal-cote { display: grid; gap: 14px; }
.cal-mini { padding: 14px 14px 12px; }
.cal-mini header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 8px; font-size: 14px; }
.cal-mini header span { display: flex; gap: 4px; }
.cal-mini .rond-petit { width: 26px; height: 26px; }
.cal-mini-grille { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; text-align: center; }
.cal-mini-grille > span { padding: 2px 0 4px; font-size: 11px; font-weight: 600; color: var(--encre-3); }
.cal-mini-grille button { aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--encre); font-size: 12.5px; font-variant-numeric: tabular-nums; cursor: pointer; }
.cal-mini-grille button:hover { background: var(--survol); }
.cal-mini-grille button.hors { color: var(--encre-3); }
.cal-mini-grille button.periode { border-radius: 8px; background: color-mix(in srgb, var(--accent) 10%, transparent); }
.cal-mini-grille button.auj { color: var(--accent); font-weight: 700; }
.cal-mini-grille button.choisi { border-radius: 50%; background: var(--sombre); color: var(--sur-sombre); }
.cal-agendas { padding: 14px 16px; gap: 2px; }
.cal-agendas h2 { margin: 10px 0 4px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--encre-2); }
.cal-agendas h2:first-child { margin-top: 0; }
.cal-agenda { position: relative; display: flex; align-items: center; gap: 10px; min-height: 32px; margin: 0 -6px; padding: 0 6px; border-radius: 8px; font-size: 13.5px; cursor: pointer; }
.cal-agenda:hover { background: var(--survol); }
.cal-agenda > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-agenda input { position: absolute; opacity: 0; pointer-events: none; }
.cal-coche { flex: none; width: 17px; height: 17px; display: grid; place-items: center; border: 2px solid var(--t); border-radius: 5px; }
.cal-agenda input:checked + .cal-coche { background: var(--t); }
.cal-agenda input:checked + .cal-coche::after { content: ""; width: 8px; height: 4px; border: solid #fff; border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg); }
.cal-agenda input:focus-visible + .cal-coche { outline: 2px solid var(--accent); outline-offset: 2px; }
.cal-vue { padding: 0; overflow: hidden; }
/* jour et semaine : la grille défile dans sa carte, l'en-tête des jours reste en haut */
.cal-grille { --heure: 48px; --gauche: 58px; }
.cal-defile { height: max(440px, calc(100vh / var(--zoom, .8) - 250px)); overflow-y: auto; overscroll-behavior: contain; }
.cal-haut { position: sticky; top: 0; z-index: 3; border-bottom: 1px solid var(--interne-bord); background: linear-gradient(var(--carte), var(--carte)), var(--fond); }
.cal-tete, .cal-corps-grille { display: grid; grid-template-columns: var(--gauche) repeat(var(--jours), minmax(0, 1fr)); }
.cal-longs { display: grid; grid-template-columns: var(--gauche) minmax(0, 1fr); border-top: 1px solid var(--ligne); }
.cal-coin { align-self: center; padding-right: 8px; font-size: 11px; color: var(--encre-3); text-align: right; }
.cal-tj { display: grid; justify-items: center; gap: 2px; padding: 10px 0 8px; border: 0; background: none; color: var(--encre-2); cursor: pointer; }
.cal-tj span { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.cal-tj b { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: var(--encre); font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; transition: background-color .15s ease-out; }
.cal-tj:hover b { background: var(--survol); }
.cal-tj.auj span { color: var(--accent); }
.cal-tj.auj b { background: var(--accent); color: #fff; }
.cal-longs-zone { display: grid; grid-template-columns: repeat(var(--jours), minmax(0, 1fr)); grid-auto-flow: row dense; gap: 3px 0; padding: 4px 0 6px; }
.cal-heures { position: relative; height: calc(24 * var(--heure)); }
.cal-heures span { position: absolute; right: 8px; top: calc(var(--h) * var(--heure) - 8px); font-size: 11px; color: var(--encre-3); font-variant-numeric: tabular-nums; }
.cal-col { position: relative; height: calc(24 * var(--heure)); border-left: 1px solid var(--ligne); background-image: repeating-linear-gradient(to bottom, var(--ligne) 0 1px, transparent 1px var(--heure)); }
.cal-col.weekend { background-color: color-mix(in srgb, var(--champ) 45%, transparent); }
.cal-creneau { height: calc(var(--heure) / 2); }
body.peut-calendrier .cal-creneau { cursor: pointer; }
body.peut-calendrier .cal-creneau:hover { background: var(--survol); }
.cal-maintenant { position: absolute; z-index: 2; left: 0; right: 0; top: calc(var(--a) * var(--heure) / 60); height: 2px; background: var(--rouge); pointer-events: none; }
.cal-maintenant::before { content: ""; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--rouge); }
/* un événement */
.cal-evt { all: unset; box-sizing: border-box; display: block; min-width: 0; overflow: hidden; border-radius: 8px; background: color-mix(in srgb, var(--t) 15%, var(--option)); color: var(--encre); font-size: 12px; line-height: 1.3; cursor: pointer; transition: background-color .15s ease-out; }
.cal-evt:hover { background: color-mix(in srgb, var(--t) 24%, var(--option)); }
.cal-evt:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.cal-evt svg { width: 12px; height: 12px; margin-right: 4px; vertical-align: -1px; fill: none; stroke: currentColor; stroke-width: 2; }
.cal-evt .cal-t { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-evt small { font-size: 11px; opacity: .85; }
.cal-evt.cal-bloc { position: absolute; z-index: 1; top: calc(var(--a) * var(--heure) / 60 + 1px); height: max(20px, calc(var(--d) * var(--heure) / 60 - 2px));
  left: calc(var(--c) / var(--nc) * (100% - 6px) + 2px); width: calc((100% - 6px) / var(--nc) - 2px); padding: 3px 7px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t) 38%, transparent); }
.cal-evt.cal-bloc strong, .cal-evt.cal-bloc span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-evt.cal-bloc strong { font-weight: 600; }
.cal-evt.cal-bloc span { color: var(--encre-2); font-size: 11.5px; }
.cal-evt.cal-bloc.court { display: flex; align-items: center; gap: 6px; padding-block: 0; }
.cal-evt.cal-bloc.court strong { min-width: 0; }
.cal-evt.cal-bloc.court span { flex: none; }
.cal-evt.cal-bande { margin: 0 3px; padding: 3px 8px; background: var(--t); color: #fff; font-weight: 600; }
.cal-evt.cal-bande:hover { background: color-mix(in srgb, var(--t) 86%, #000); }
.cal-ferie { display: block; min-width: 0; padding: 2px 8px; overflow: hidden; border-radius: 6px; background: var(--pastel-2); color: var(--succes); font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.cal-ferie.cal-bande { margin: 0 3px; padding: 3px 8px; }
.cal-evt.passe { opacity: .6; }
.cal-evt.attente:not(.cal-puce, .cal-ligne) { background: var(--option); box-shadow: inset 0 0 0 1px var(--t); }
.cal-evt.cal-bande.attente { color: var(--encre); }
.cal-evt.refuse { opacity: .5; text-decoration: line-through; }
.cal-evt.masque { font-style: italic; }
/* mois */
.cal-mois-tete { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-bottom: 1px solid var(--interne-bord); }
.cal-mois-tete span { padding: 10px 0 8px; color: var(--encre-2); font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-align: center; text-transform: uppercase; }
.cal-mois-grille { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: repeat(var(--lignes), minmax(120px, auto)); }
.cal-case { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 4px 4px 6px; border-right: 1px solid var(--ligne); border-bottom: 1px solid var(--ligne); }
.cal-case:nth-child(7n) { border-right: 0; }
.cal-case:nth-last-child(-n + 7) { border-bottom: 0; }
.cal-case.hors { background: color-mix(in srgb, var(--champ) 45%, transparent); }
.cal-case.hors .cal-num { color: var(--encre-3); }
body.peut-calendrier .cal-case { cursor: pointer; }
.cal-num { align-self: center; min-width: 26px; height: 26px; padding: 0 7px; border: 0; border-radius: 999px; background: none; color: var(--encre); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; }
.cal-num:hover { background: var(--survol); }
.cal-case.auj .cal-num { background: var(--accent); color: #fff; }
.cal-evt.cal-puce { display: flex; align-items: center; gap: 5px; padding: 2px 6px; border-radius: 6px; background: none; white-space: nowrap; }
.cal-evt.cal-puce:hover { background: var(--survol); }
.cal-evt.cal-puce.plein { background: var(--t); color: #fff; font-weight: 600; }
.cal-evt.cal-puce.plein.attente { background: none; box-shadow: inset 0 0 0 1px var(--t); color: var(--encre); }
.cal-point { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--t); }
.cal-puce .cal-h { flex: none; color: var(--encre-2); font-variant-numeric: tabular-nums; }
.cal-puce .cal-t { min-width: 0; }
.cal-plus { align-self: flex-start; padding: 2px 6px; border: 0; border-radius: 6px; background: none; color: var(--encre-2); font-size: 12px; font-weight: 600; cursor: pointer; }
.cal-plus:hover { background: var(--survol); color: var(--encre); }
/* liste */
.cal-liste { padding: 6px 0; }
.cal-l-jour { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 0 12px; padding: 8px 20px; border-top: 1px solid var(--ligne); }
.cal-l-jour:first-child { border-top: 0; }
.cal-l-jour h3 { margin: 0; padding-top: 6px; display: flex; align-items: baseline; gap: 8px; color: var(--encre-2); font-size: 12.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .03em; }
.cal-l-jour h3 b { min-width: 28px; color: var(--encre); font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cal-l-jour.auj h3, .cal-l-jour.auj h3 b { color: var(--accent); }
.cal-l-evts { display: grid; gap: 2px; min-width: 0; }
.cal-evt.cal-ligne { display: grid; grid-template-columns: 120px 10px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 10px; background: none; font-size: 13.5px; }
.cal-evt.cal-ligne:hover { background: var(--survol); }
.cal-l-ferie { cursor: default; }
.cal-l-ferie:hover { background: none !important; }
.cal-l-quand { color: var(--encre-2); font-variant-numeric: tabular-nums; }
.cal-l-titre { overflow: hidden; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.cal-l-lieu { max-width: 260px; overflow: hidden; color: var(--encre-2); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.cal-vide { padding: 48px 20px; }
/* fenêtres */
dialog.cal-feuille { width: min(620px, calc(100vw - 32px)); }
#form-cal .cal-titre { padding: 4px 0 8px; border: 0; border-bottom: 2px solid var(--interne-bord); border-radius: 0; background: none; font-size: 22px; font-weight: 600; letter-spacing: -0.015em; }
#form-cal .cal-titre:hover:not(:focus) { border-bottom-color: var(--encre-3); }
#form-cal .cal-titre:focus { border-bottom-color: var(--accent); outline: none; }
.cal-quand { display: grid; grid-template-columns: minmax(0, 1fr) 132px; gap: 6px; }
.cal-quand:has(input[hidden]) { grid-template-columns: minmax(0, 1fr); }
#form-cal .unite input { width: 76px; }
.cal-couleurs-champ { display: grid; align-content: start; gap: 6px; }
.cal-couleurs { display: flex; flex-wrap: wrap; gap: 7px; padding-top: 6px; }
.cal-couleur { width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: var(--t); cursor: pointer; transition: box-shadow .12s ease-out, transform .12s ease-out; }
.cal-couleur:hover { transform: scale(1.1); }
.cal-couleur.auto { background: none; box-shadow: inset 0 0 0 2px var(--t); }
.cal-couleur[aria-checked="true"] { box-shadow: 0 0 0 2px var(--option), 0 0 0 4px var(--t); }
.cal-couleur.auto[aria-checked="true"] { box-shadow: inset 0 0 0 2px var(--t), 0 0 0 2px var(--option), 0 0 0 4px var(--t); }
dialog.cal-detail { width: min(470px, calc(100vw - 32px)); }
.cal-d-tete { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 14px; align-items: start; }
.cal-d-pastille { width: 14px; height: 14px; margin-top: 8px; border-radius: 4px; }
.cal-d-tete h2 { font-size: 21px; overflow-wrap: anywhere; }
.cal-d-tete p { margin: 4px 0 0; color: var(--encre-2); font-size: 13.5px; }
.cal-d-infos { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 8px 12px; margin: 0; font-size: 13.5px; }
.cal-d-infos:empty { display: none; }
.cal-d-infos dt { color: var(--encre-2); }
.cal-d-infos dd { margin: 0; color: var(--encre); overflow-wrap: anywhere; }
.cal-d-texte { white-space: pre-wrap; }
.cal-rep { margin-left: 4px; color: var(--encre-2); font-size: 12.5px; }
.cal-rep.oui { color: var(--succes); } .cal-rep.non { color: var(--rouge); }
.cal-d-reponse { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid var(--ligne); font-size: 13.5px; }
.cal-d-reponse .types-pieces { margin: 0; gap: 6px; }
.cal-d-reponse .pilule { height: 32px; }
dialog.cal-portee { width: min(420px, calc(100vw - 32px)); }
.cal-portees { display: grid; gap: 2px; }
#dlg-cal-portee .cal-portees label { display: flex; align-items: center; gap: 12px; padding: 9px 4px; color: var(--encre); font-size: 14.5px; cursor: pointer; }
#dlg-cal-portee input[type="radio"] { width: 18px; height: 18px; margin: 0; padding: 0; accent-color: var(--sombre); }
/* rappels : en bas à droite, jusqu'à « OK » */
.cal-rappels { position: fixed; z-index: 30; right: 20px; bottom: 96px; display: grid; gap: 10px; width: min(380px, calc(100vw - 32px)); pointer-events: none; }
.cal-rappel { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 6px 12px; padding: 14px 16px 10px; border: 1px solid var(--verre-popup-bord); border-radius: 18px; background: var(--verre-popup); -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%); box-shadow: var(--verre-popup-reflet), 0 18px 50px rgba(var(--ombre), .25); pointer-events: auto; animation: apparaitre .22s cubic-bezier(.2, .9, .3, 1); }
.cal-rappel-icone { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 12px; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.cal-rappel-icone svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cal-rappel strong { display: block; overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.cal-rappel small { display: block; color: var(--encre-2); font-size: 12.5px; }
.cal-rappel-boutons { grid-column: 2; display: flex; justify-content: flex-end; gap: 6px; }
@media (max-width: 860px) {
  .cal-outils { width: 100%; }
  .cal-vues { flex: 1 1 100%; flex-wrap: nowrap; order: 2; }
  .cal-vues .pilule { flex: 1; padding: 0 8px; }
  .cal-outils [data-cal-nouveau] { width: 100%; order: 3; }
  .cal-corps { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .cal-mini { display: none; }
  .cal-agendas { flex-direction: row; flex-wrap: wrap; gap: 0 14px; padding: 8px 14px; }
  .cal-agendas h2 { display: none; }
  .cal-agenda { margin: 0; font-size: 13px; }
  .cal-grille { --gauche: 40px; }
  .cal-defile { height: max(400px, calc(100dvh - 330px)); }
  .cal-coin { padding-right: 4px; font-size: 11px; }
  .cal-heures span { right: 4px; font-size: 11px; }
  .cal-tj { padding: 8px 0 6px; }
  .cal-tj span { font-size: 11px; letter-spacing: 0; }
  .cal-tj b { width: 28px; height: 28px; font-size: 15px; }
  .cal-evt.cal-bloc { padding: 2px 3px; font-size: 11px; }
  .cal-vue[data-vue="semaine"] .cal-evt.cal-bloc span { display: none; }
  .cal-evt.cal-bande { margin: 0 1px; padding: 2px 4px; font-size: 11px; }
  .cal-mois-grille { grid-template-rows: repeat(var(--lignes), minmax(76px, auto)); }
  .cal-case { padding: 2px 1px 4px; }
  .cal-num { min-width: 22px; height: 22px; padding: 0 4px; font-size: 11.5px; }
  .cal-evt.cal-puce { padding: 1px 3px; font-size: 11px; }
  .cal-evt.cal-puce .cal-h, .cal-evt.cal-puce .cal-point { display: none; }
  .cal-ferie { padding: 1px 3px; font-size: 11px; }
  .cal-l-jour { grid-template-columns: minmax(0, 1fr); padding: 8px 10px; }
  .cal-evt.cal-ligne { grid-template-columns: 96px 8px minmax(0, 1fr); gap: 10px; padding: 8px 6px; }
  .cal-l-lieu { display: none; }
  .cal-rappels { right: 16px; bottom: 88px; }
}
/* ---------- Cabinet comptable (03/11) : tableau des dossiers */
#table-cabinet .cab-resp { min-width: 170px; }
#table-cabinet .cab-resp .choix { min-width: 150px; }
#table-cabinet td, #table-cab-echeances td { vertical-align: middle; }
/* étape 2 : pièces déposées (espace du client, boîte du cabinet) */
.depot-envoi { display: grid; gap: 12px; margin-bottom: 16px; }
.depot-envoi .types-pieces { margin: 0; }
.depot-zone { position: relative; display: grid; place-items: center; min-height: 140px; padding: 20px; border: 2px dashed var(--interne-bord); border-radius: 18px; background: color-mix(in srgb, var(--champ) 50%, transparent); text-align: center; cursor: pointer; transition: border-color .15s ease-out; }
.depot-zone:hover, .depot-zone:focus-within { border-color: var(--accent); }
.depot-zone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.depot-zone-texte { display: grid; gap: 4px; }
.depot-zone-texte strong { font-size: 15px; }
.depot-zone-texte small { color: var(--encre-2); font-size: 12.5px; }
.depot-note { display: grid; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--encre-2); }
.depot-note input { padding: 10px 12px; border: 1px solid var(--interne-bord); border-radius: 12px; background: var(--champ); color: var(--encre); font: inherit; font-size: 14px; }
.depot-note input:focus { outline: none; border-color: var(--accent); }
.cab-piece-actions { white-space: nowrap; }
/* étape 3 : honoraires et temps passé */
#cabinet-honoraires .carte-table { margin-bottom: 16px; }
.hon-rentabilite > header .unite input { width: 90px; padding: 6px 8px; border: 1px solid var(--interne-bord); border-radius: 10px; background: var(--champ); color: var(--encre); font: inherit; }
.temps-saisie { margin-bottom: 14px; }
.temps-ligne { display: grid; grid-template-columns: minmax(160px, 1.4fr) 150px 110px minmax(140px, 1fr) minmax(160px, 2fr) auto; align-items: end; gap: 10px; }
.temps-ligne label { display: grid; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--encre-2); min-width: 0; }
.temps-ligne input { padding: 9px 11px; border: 1px solid var(--interne-bord); border-radius: 12px; background: var(--champ); color: var(--encre); font: inherit; font-size: 14px; min-width: 0; }
.temps-ligne input:focus { outline: none; border-color: var(--accent); }
@media (max-width: 860px) { .temps-ligne { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .temps-ligne .temps-note { grid-column: 1 / -1; } }

/* ------------------------------------------------------------ Restaurant (03/11, étape 1 : la caisse) */
.rv-ouvrir { max-width: 520px; padding: 22px; display: grid; gap: 10px; }
.rv-ouvrir-form { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; }
.rv-ouvrir-form label { display: grid; gap: 4px; }
.rv-cadre { display: grid; grid-template-columns: minmax(180px, 220px) minmax(0, 1fr) minmax(280px, 340px); gap: 14px; align-items: start; }
.rv-salle, .rv-menu, .rv-ticket { padding: 14px; min-width: 0; }
.rv-titre { margin: 14px 0 8px; font-size: 12px; font-weight: 600; color: var(--encre-2); text-transform: uppercase; letter-spacing: .04em; }
.rv-types { flex-wrap: wrap; }
.rv-tables { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; }
.rv-table { display: grid; gap: 2px; padding: 10px 6px; border: 1px solid var(--interne-bord); border-radius: 12px; background: var(--champ); color: var(--encre); cursor: pointer; text-align: center; font: inherit; }
.rv-table span { font-size: 12px; color: var(--encre-2); }
.rv-table:hover { background: var(--survol); }
.rv-table.occupee { background: color-mix(in srgb, var(--accent) 14%, var(--champ)); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.rv-table.occupee span { color: var(--encre); font-weight: 600; }
.rv-table.actif { outline: 2px solid var(--encre); outline-offset: 1px; }
.rv-table.hors-service { opacity: .55; }
.rv-en-cours { display: grid; gap: 6px; }
.rv-encours { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px; padding: 8px 10px; border: 1px solid var(--interne-bord); border-radius: 10px; background: var(--champ); color: var(--encre); cursor: pointer; font: inherit; text-align: left; }
.rv-encours.actif { outline: 2px solid var(--encre); outline-offset: 1px; }
.rv-cats { flex-wrap: wrap; margin-bottom: 12px; }
.rv-produits { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.rv-produit { display: grid; grid-template-rows: auto 1fr auto; gap: 6px; padding: 8px; border: 1px solid var(--interne-bord); border-radius: 14px; background: var(--champ); color: var(--encre); cursor: pointer; font: inherit; text-align: left; min-height: 150px; }
.rv-produit:hover { background: var(--survol); }
.rv-produit:active { transform: scale(.98); }
.rv-produit img, .rv-initiale { width: 100%; aspect-ratio: 4 / 3; border-radius: 10px; object-fit: cover; }
.rv-initiale { display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 22px; }
.rv-initiale.petite { width: 40px; aspect-ratio: 1; font-size: 13px; border-radius: 8px; }
.rm-vignette { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; display: block; }
.rv-nom { font-weight: 600; line-height: 1.25; }
.rv-prix { color: var(--encre-2); font-variant-numeric: tabular-nums; }
.rv-ticket { position: sticky; top: 12px; display: grid; gap: 10px; }
.rv-ticket-tete { display: grid; gap: 2px; }
.rv-client { display: grid; gap: 6px; }
.rv-lignes { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 46vh; overflow: auto; }
.rv-ligne { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--ligne); }
.rv-ligne-nom { display: grid; gap: 3px; min-width: 0; }
.rv-ligne-nom input { font-size: 12px; padding: 3px 6px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--encre-2); }
.rv-ligne-nom input:focus, .rv-ligne-nom input:hover { border-color: var(--interne-bord); background: var(--champ); }
.rv-qte { display: flex; align-items: center; gap: 6px; }
.rv-qte strong { min-width: 18px; text-align: center; font-variant-numeric: tabular-nums; }
.rv-montant { min-width: 64px; text-align: right; font-variant-numeric: tabular-nums; }
.rv-vide { padding: 18px 0; text-align: center; }
.rv-total { display: flex; justify-content: space-between; align-items: baseline; font-size: 18px; padding-top: 4px; }
.rv-total strong { font-size: 22px; font-variant-numeric: tabular-nums; }
.rv-boutons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rv-boutons button { min-height: 46px; }
.rv-annuler { justify-self: center; }
.rv-a-payer { display: flex; justify-content: space-between; align-items: baseline; font-size: 18px; margin: 4px 0 10px; }
.rv-a-payer strong { font-size: 24px; font-variant-numeric: tabular-nums; }
.rv-rendu { font-weight: 600; min-height: 1.4em; }
.rj-chiffres { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin-bottom: 18px; }
.rj-chiffre { padding: 14px; display: grid; gap: 4px; }
.rj-chiffre strong { font-size: 20px; font-variant-numeric: tabular-nums; }
.rm-tables { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
@media (max-width: 1180px) {
  .rv-cadre { grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); }
  .rv-salle { grid-column: 1 / -1; }
  .rv-salle .rv-plan { max-width: 560px; }
}
@media (max-width: 760px) {
  .rv-cadre { grid-template-columns: minmax(0, 1fr); }
  .rv-ticket { position: static; }
  .rv-produits { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
}
/* étape 2 (03/11) : la cuisine, et le QR de l'appel du client */
.rk-commandes { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; align-items: start; }
.rk-commande { padding: 14px; display: grid; gap: 10px; }
.rk-commande header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.rk-commande header strong { font-size: 22px; font-variant-numeric: tabular-nums; }
.rk-commande header span:not(.etat-chip) { color: var(--encre-2); flex: 1; min-width: 0; }
.rk-commande ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 15px; }
.rk-commande em { display: block; font-size: 13px; color: var(--accent); font-style: normal; }
.rk-commande footer { display: flex; flex-wrap: wrap; gap: 8px; }
.rk-commande footer .bouton { flex: 1; min-height: 44px; }
.rk-commande.prete { box-shadow: inset 0 0 0 2px var(--succes); }
.rv-cuisine { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rv-qr { display: block; width: 220px; height: 220px; margin: 8px auto; background: #fff; border-radius: 12px; }
.rv-qr-lien { text-align: center; word-break: break-all; font-size: 12px; }
/* point de vente, étape 1 (03/11) : recherche, ruptures, options, partage, argent de la caisse, groupes, serveurs */
.rv-outils { display: flex; gap: 8px; margin-bottom: 10px; }
.rv-outils input { flex: 1; min-width: 0; }
.rv-produit.rupture { opacity: .45; }
.rv-produit.rupture .rv-prix { color: var(--rouge); font-weight: 600; }
.rv-produits.mode-rupture .rv-produit { outline: 2px dashed var(--rouge); outline-offset: -4px; opacity: 1; }
.rv-prix small { color: var(--accent); }
.rv-ligne-options { font-size: 12px; color: var(--accent); }
.rv-options-groupes { display: grid; gap: 14px; margin: 6px 0 12px; }
.rv-groupe { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; }
.rv-groupe legend { font-weight: 650; padding: 0; margin-bottom: 6px; }
.rv-groupe legend small { font-weight: 400; color: var(--encre-2); }
.rv-choix { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.rv-option { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--interne-bord); border-radius: 12px; background: var(--champ); cursor: pointer; }
.rv-option input { position: absolute; opacity: 0; pointer-events: none; }
.rv-option small { color: var(--encre-2); }
.rv-option:has(input:checked) { border-color: var(--encre); box-shadow: inset 0 0 0 1px var(--encre); background: var(--option); }
.rv-option:has(input:focus-visible) { outline: 2px solid var(--encre); outline-offset: 2px; }
.rv-parts { margin: 4px 0 8px; }
.rj-mouvements { list-style: none; margin: -6px 0 18px; padding: 0; display: grid; gap: 6px; }
.rj-mouvements li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.rm-groupes { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin-bottom: 18px; }
.rm-groupe { display: grid; gap: 4px; padding: 12px 14px; text-align: left; color: var(--encre); font: inherit; cursor: pointer; }
.rm-groupe.hors-service { opacity: .55; }
.rm-options { display: grid; gap: 6px; margin: 8px 0 4px; }
.rm-option { display: grid; grid-template-columns: minmax(0, 1fr) 90px auto; gap: 6px; align-items: center; }
.rm-produit-groupes { border: 0; padding: 0; margin: 4px 0; }
.rm-produit-groupes legend { font-weight: 600; margin-bottom: 4px; }
.rk-commande small { display: block; font-size: 13px; color: var(--encre-2); }
/* point de vente, étape 2 (03/11) : plan de salle, tables à leur place, suite, postes de la cuisine */
@media (min-width: 1181px) { .rv-cadre { grid-template-columns: minmax(240px, 300px) minmax(0, 1fr) minmax(280px, 340px); } }
.rv-zones { flex-wrap: wrap; margin-bottom: 8px; }
.rv-plan { position: relative; aspect-ratio: 4 / 3; border-radius: 14px; border: 1px dashed var(--interne-bord);
  background: radial-gradient(circle, color-mix(in srgb, var(--encre) 10%, transparent) 1px, transparent 1.5px) 0 0 / 16px 16px; overflow: hidden; }
.rv-plan > p { padding: 12px; }
.rv-table.plan { position: absolute; width: 21%; min-height: 0; aspect-ratio: 1; padding: 4px; gap: 0; align-content: center; font-size: 11px; line-height: 1.2; touch-action: none; }
.rv-table.plan strong { font-size: 13px; }
.rv-table.plan small { font-size: 10px; color: var(--encre-2); }
.rv-table.plan.ronde { border-radius: 50%; }
.rv-table.plan.longue { width: 30%; aspect-ratio: 2 / 1; }
.rv-table.plan.grande:not(.longue) { width: 25%; }
.rv-table.prete { background: color-mix(in srgb, var(--succes) 22%, var(--champ)); border-color: var(--succes); }
.rv-plan.edition .rv-table { cursor: grab; }
.rv-plan.edition .rv-table.prise { cursor: grabbing; z-index: 2; box-shadow: 0 10px 24px -12px rgba(var(--ombre), .6); }
#rm-plan { max-width: 720px; margin-bottom: 18px; }
#rm-plan-enregistrer.a-enregistrer { color: var(--rouge); font-weight: 700; }
.rv-actions-table { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rv-plus-tard { justify-self: start; font: inherit; font-size: 11px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--interne-bord); background: transparent; color: var(--encre-2); cursor: pointer; }
.rv-plus-tard.actif { background: var(--encre); color: var(--fond); border-color: var(--encre); }
.rk-postes { flex-wrap: wrap; margin-bottom: 12px; }
.rk-commande header .rond-petit { margin-left: auto; }
.rk-attente { margin: 0; font-size: 13px; }
.rv-choix-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; margin: 8px 0; }
#ticket-impression .t-bon td { font-size: 15px; padding: 4px 0; border-bottom: 1px dashed #000; }
/* point de vente, étape 3 (03/11) : client fidèle, dernière commande payée, fidélité */
.rv-fidele { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; }
.rv-fidele-chip { font-size: 13px; color: var(--encre-2); }
.rv-fidele-chip strong { color: var(--encre); }
.rv-derniere { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 8px 10px; border-radius: 12px; background: color-mix(in srgb, var(--succes) 14%, var(--champ)); font-size: 13px; }
.rv-derniere span { flex: 1 0 100%; font-weight: 600; }
.rcl-fidelite { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 10px 18px; padding: 14px 16px; margin-bottom: 18px; }
.rcl-fidelite label:not(.ligne-coche) { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.rcl-fidelite input[inputmode] { width: 70px; }
/* le ticket de caisse : seul imprimé, à la largeur d'un rouleau de 80 mm */
#ticket-impression { display: none; }
/* app Stock (03/11) */
.st-outils { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.st-outils input[type=search] { flex: 1 1 260px; }
.st-outils select { width: auto; }
.st-fiche-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px 14px; align-items: end; }
.st-code { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; margin-bottom: 6px; }
.st-code label { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.st-code label input { width: 70px; }
.st-etiquettes { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; margin: 10px 0; }
.st-etiquettes label input { width: 80px; }
.st-histo { max-height: 260px; }
.sm-entete { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px 14px; margin: 10px 0; }
.sm-scan { display: flex; gap: 8px; margin-bottom: 8px; }
.sm-scan input { flex: 1; }
.sm-q { width: 90px; text-align: right; }
.sm-nouveaux { flex-wrap: wrap; }
.sd-reglages { display: grid; gap: 10px; padding: 14px; max-width: 640px; }
.scan-video { width: 100%; max-height: 50vh; border-radius: 12px; background: #000; object-fit: cover; }
/* étape 5 (03/11) : rapports et stock ; bandeau de la caisse hors ligne */
.rv-hors-ligne { padding: 10px 14px; margin-bottom: 12px; display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; border-left: 4px solid var(--ok, #1f7a4d); }
.rv-hors-ligne.coupe { border-left-color: var(--accent, #c2571a); }
.rv-hors-ligne p { margin: 0; }
.rr-periode { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.rr-periode label { display: grid; gap: 2px; font-size: 13px; }
.rr-heures-carte { padding: 14px 14px 8px; }
.rr-heures { display: flex; align-items: flex-end; gap: 4px; height: 160px; }
.rr-barre { flex: 1; min-width: 0; height: 100%; display: grid; grid-template-rows: 1fr auto; gap: 4px; }
.rr-barre span { align-self: end; display: block; min-height: 2px; border-radius: 4px 4px 0 0; background: var(--accent, #c2571a); }
.rr-barre small { text-align: center; font-size: 11px; color: var(--encre-2, inherit); font-variant-numeric: tabular-nums; }
.rr-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 0 18px; }
.rs-recette-ligne { display: grid; grid-template-columns: 1fr 110px auto; gap: 8px; align-items: center; margin-bottom: 8px; }
.rs-inventaire { display: grid; gap: 8px; max-height: 50vh; overflow: auto; }
@media (max-width: 600px) { .rr-grille { grid-template-columns: 1fr; } .rr-barre small { font-size: 9px; } }
/* étape 4 (03/11) : commandes QR à confirmer et appels, en haut de la salle */
.rv-attente { display: grid; gap: 6px; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--interne-bord); }
.rv-attente-liste { display: grid; gap: 6px; }
.rv-qr-cmd { display: grid; gap: 4px; padding: 6px; border-radius: 12px; background: color-mix(in srgb, var(--accent, #c2571a) 10%, transparent); }
.rv-qr-cmd .rv-encours small { flex-basis: 100%; color: var(--encre-2, inherit); }
.rv-qr-actions { display: flex; justify-content: flex-end; gap: 8px; }
.rv-qr-appel { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 10px; border: 1px dashed var(--interne-bord); }
.rv-table.appelle { box-shadow: 0 0 0 3px var(--accent, #c2571a); }
@media print {
  body.impression-ticket > *:not(#ticket-impression) { display: none !important; }
  body.impression-ticket { background: #fff; }
  body.impression-ticket #ticket-impression { display: block; width: 72mm; margin: 0 auto; color: #000; font: 12px/1.35 system-ui, sans-serif; }
  #ticket-impression h1 { font-size: 16px; margin: 0 0 4px; text-align: center; }
  #ticket-impression p { margin: 0; text-align: center; }
  #ticket-impression .t-sep { margin: 8px 0; padding: 6px 0; border-top: 1px dashed #000; border-bottom: 1px dashed #000; }
  #ticket-impression table { width: 100%; border-collapse: collapse; margin-bottom: 6px; }
  #ticket-impression td { padding: 2px 0; vertical-align: top; }
  #ticket-impression td:last-child { text-align: right; white-space: nowrap; padding-left: 8px; }
  #ticket-impression .t-ligne, #ticket-impression .t-total { display: flex; justify-content: space-between; text-align: left; }
  #ticket-impression .t-total { font-size: 15px; font-weight: 700; border-top: 1px dashed #000; padding-top: 4px; margin-top: 4px; }
  #ticket-impression .t-merci { margin-top: 10px; }
  #ticket-impression .t-qr { display: block; width: 34mm; height: 34mm; margin: 8px auto 4px; }
  #ticket-impression .t-code { font: 700 22px/1.2 ui-monospace, monospace; letter-spacing: .12em; margin: 10px 0; }
  body.impression-facture #ticket-impression { width: 180mm; font-size: 12px; }
  body.impression-qr #ticket-impression { width: 190mm; }
  #ticket-impression .t-qr-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 8mm; }
  #ticket-impression .t-qr-carte { border: 1px dashed #000; padding: 6mm; break-inside: avoid; display: grid; gap: 2mm; justify-items: center; }
  #ticket-impression .t-qr-carte img { width: 55mm; height: 55mm; }
  #ticket-impression .t-qr-nom { font-size: 20px; font-weight: 700; }
  #ticket-impression .t-etiquettes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4mm; }
  #ticket-impression .t-etiquette { border: 1px dashed #999; padding: 2mm 3mm; break-inside: avoid; text-align: center; }
  #ticket-impression .t-etiquette svg { width: 48mm; height: auto; display: block; margin: 0 auto; }
  #ticket-impression .t-etiq-nom { font-size: 10px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #ticket-impression .t-etiq-prix { font-size: 12px; font-weight: 700; }
  .t-facture header { display: flex; justify-content: space-between; gap: 20px; border-bottom: 2px solid #000; padding-bottom: 10px; margin-bottom: 14px; }
  .t-facture header p, .t-facture h1, .t-facture h2 { text-align: left; margin: 0 0 3px; }
  .t-facture .t-fac-num { text-align: right; }
  .t-facture .t-fac-num p, .t-facture .t-fac-num h2 { text-align: right; }
  .t-facture .t-acheteur { border: 1px solid #000; padding: 8px 10px; margin: 0 0 14px auto; width: 45%; }
  .t-facture table { width: 100%; border-collapse: collapse; margin-bottom: 10px; }
  .t-facture th, .t-facture td { border-bottom: 1px solid #999; padding: 5px 4px; text-align: left; }
  .t-facture td:not(:first-child), .t-facture th:not(:first-child) { text-align: right; }
  .t-facture .t-totaux { width: 50%; margin-left: auto; }
  .t-facture .t-ttc td { font-weight: 700; border-top: 2px solid #000; }
  .t-facture > p { text-align: left; }
}

/* ---------- Magasin d'apps et factures Sereina (04/11) */
.magasin-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.magasin-app { gap: 12px; }
.magasin-tete { display: flex; align-items: center; gap: 12px; }
.magasin-tete .app-icone { width: 44px; height: 44px; flex: none; border-radius: 14px; display: grid; place-items: center; background: var(--c); color: #fff; }
.magasin-tete .app-icone svg { width: 24px; height: 24px; }
.magasin-tete h2 { margin: 0; font-size: 16px; }
.magasin-tete p { margin: 2px 0 0; font-size: 13px; color: var(--encre-2); }
.magasin-app ul { margin: 0; padding-left: 18px; font-size: 13.5px; color: var(--encre-2); display: grid; gap: 3px; }
.magasin-prix { margin: 0; font-size: 15px; font-weight: 600; }
.magasin-prix small { font-weight: 400; color: var(--encre-2); font-size: 12.5px; }
.magasin-etat { margin: 0; font-size: 13px; color: var(--encre-2); }
.magasin-etat.ok { color: var(--succes); font-weight: 600; }
.magasin-etat.attention { color: var(--attente); }
.magasin-pied { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.bandeau-factures { margin: 0 0 14px; padding: 10px 16px; border-radius: 16px; background: var(--pastel-3); color: var(--attente); font-size: 13.5px; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.bandeau-factures p { margin: 0; }
.bandeau-factures.retard { background: var(--pastel-1); color: var(--rouge); }
body.ecran-apps .bandeau-factures { margin: 10px 16px 0; }
.blocage { width: min(460px, 100%); }
.blocage h1 { margin: 0; }
.blocage p { margin: 0; }
.blocage-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.connexion .blocage-actions .bouton { width: auto; margin-top: 0; }
.blocage-ecrire { display: grid; gap: 8px; padding-top: 6px; border-top: 1px solid var(--ligne); }
.blocage-ecrire label { font-weight: 600; font-size: 14px; }
.blocage-ecrire textarea { width: 100%; border: 1px solid transparent; border-radius: 12px; background: var(--champ); padding: 9px 12px; font: inherit; font-size: 14px; resize: vertical; }
.blocage-ecrire textarea:focus { outline: none; border-color: var(--accent); }
.blocage-ecrire .bouton-teinte { justify-self: start; }
.blocage-sortir { justify-self: center; align-self: center; font-size: 13px; color: var(--encre-2); }

/* « Votre espace » sur l'adresse centrale (04/11, E) */
.ecran-connexion:has(.connexion-espace:not([hidden])) { align-content: center; gap: 16px; }
.connexion-espace h2 { margin: 0; font-size: 17px; }
.connexion-espace .aide { margin: 0; }
.connexion-espace .bouton-teinte { justify-self: start; }
.espace-oubli summary { cursor: pointer; font-size: 13.5px; color: var(--encre-2); }
.espace-oubli[open] { display: grid; gap: 8px; }
.espace-oubli .lien { justify-self: start; font-size: 13.5px; }

/* Droits d'accès app par app (04/11, comme Odoo) : familles en deux colonnes, une ligne par app installée */
dialog.feuille.feuille-acces { width: min(920px, calc(100vw - 32px)); }
.acces { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 14px 28px; }
.acces-vide { margin: 0; color: var(--encre-2); font-size: 13.5px; }
.acces-famille { display: grid; gap: 8px; align-content: start; }
.acces-famille h3 { margin: 0; padding-bottom: 6px; border-bottom: 1px solid var(--ligne); font-size: 13px; font-weight: 600; color: var(--encre-2); }
.acces-app { display: grid; grid-template-columns: minmax(110px, 0.8fr) minmax(0, 1.6fr); align-items: center; gap: 4px 10px; }
.acces-app > span { font-size: 14px; font-weight: 500; }
.acces-app select { width: 100%; }
.acces-app details { grid-column: 2; }
.acces-app summary { cursor: pointer; font-size: 12.5px; color: var(--encre-2); }
.acces-app details .puces { margin-top: 6px; gap: 6px; }
.acces-montants { grid-column: 1 / -1; }
.acces-tout { margin: 0; padding: 12px 14px; border-radius: 14px; background: var(--pastel-2); font-size: 13.5px; }

/* Fiche d'un utilisateur en page entière (04/11, comme Odoo) */
#compte-fiche .doc-cadre { grid-template-columns: minmax(0, 1fr); }
.compte-nav { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--encre-2); }
.compte-tete { align-items: center; }
.compte-identite { display: grid; gap: 6px; flex: 1; min-width: 0; }
.compte-libelle { font-size: 13px; font-weight: 600; color: var(--encre-2); }
.page-doc feuille-doc input.compte-nom { font-size: clamp(24px, 2.2vw, 32px); font-weight: 600; letter-spacing: -0.015em; padding: 4px 8px; }
.compte-ligne { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 28px; }
.compte-ligne label, .compte-champ { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; }
.compte-avatar { width: 84px; height: 84px; flex: none; border-radius: 16px; display: grid; place-items: center; font-size: 28px; font-weight: 700; color: #fff; }
.compte-rubrique { margin: 10px 0 0; padding-bottom: 6px; border-bottom: 1px solid var(--ligne); font-size: 13px; font-weight: 600; color: var(--encre-2); }
#compte-panneau-acces .acces { margin-top: 4px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 40px; }
@media (max-width: 760px) {
  .compte-ligne { grid-template-columns: minmax(0, 1fr); }
  .compte-ligne label, .compte-champ { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .compte-avatar { display: none; }
  #compte-panneau-acces .acces { grid-template-columns: minmax(0, 1fr); }
}