/* Suivi data. Charte Cerfrance 2026 : Nexa, jaune, orange, vert, gris, fond chaud.
   Un fond clair, le noir pour ce qui compte, le jaune pour l'action, le vert pour ce qui est fait. La navigation est un dock, en bas, partout. */
@font-face { font-family: "Nexa"; font-weight: 400; font-display: swap; src: url(../polices/nexa-400.woff2) format("woff2"); }
@font-face { font-family: "Nexa"; font-weight: 700; font-display: swap; src: url(../polices/nexa-700.woff2) format("woff2"); }
@font-face { font-family: "Nexa"; font-weight: 900; font-display: swap; src: url(../polices/nexa-900.woff2) format("woff2"); }

:root {
  --fond: #F5F3F0; --carte: #FFFFFF; --trait: #E6E2DC; --gris-c: #EDEAE5; --gris-m: #A39D94;
  --noir: #1C1C1C; --gris: #55585A;
  --j: #F8B334; --jf: #8F5F00; --jp: #FDF1D6;
  --o: #E7511E; --of: #A63311; --op: #FBE7DD;
  --v: #00A096; --vf: #00534C; --vp: #E2F2F0; --vn: #003F3A;
  --r-xl: 26px; --r-l: 18px; --r-m: 12px; --r-s: 8px;
  --ombre: 0 1px 2px rgba(28, 28, 28, .04), 0 14px 34px -18px rgba(28, 28, 28, .2);
  --ombre-h: 0 2px 6px rgba(28, 28, 28, .06), 0 24px 60px -20px rgba(28, 28, 28, .32);
  --barre: 72px; --marge: clamp(16px, 3.2vw, 44px);
  --hachures: repeating-linear-gradient(135deg, transparent 0 5px, rgba(28, 28, 28, .09) 5px 6.5px);
}
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--barre) + 20px); }
body { font-family: "Nexa", "Segoe UI", Arial, sans-serif; background: var(--fond); color: var(--noir); font-size: 15.5px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; min-height: 100dvh; display: flex; flex-direction: column; }
a { color: inherit; text-decoration: none; }
a, button, summary, label { -webkit-tap-highlight-color: transparent; }
img, svg { max-width: 100%; }
h1, h2, h3 { line-height: 1.15; letter-spacing: -.015em; text-wrap: balance; font-weight: 700; }
p { text-wrap: pretty; }
ul, ol { list-style: none; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
:focus-visible { outline: 3px solid var(--j); outline-offset: 2px; border-radius: 6px; }
::selection { background: var(--j); color: var(--noir); }
.ic { flex: none; display: block; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.evitement { position: fixed; left: 12px; top: -60px; z-index: 100; background: var(--noir); color: #fff; padding: 10px 16px; border-radius: 10px; }
.evitement:focus { top: 12px; }
kbd { font: inherit; font-size: 11.5px; color: var(--gris); border: 1px solid var(--trait); border-radius: 6px; padding: 1px 6px; background: var(--fond); white-space: nowrap; }

/* ---------- la barre : le logo, la recherche, le dépôt, le compte */
.barre { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--carte) 92%, transparent); border-bottom: 1px solid var(--trait);
  backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); }
.barre .dedans { max-width: 1320px; margin: 0 auto; height: var(--barre); display: flex; align-items: center; gap: 12px; padding: 0 var(--marge); }
.barre-marque { display: inline-flex; align-items: center; gap: 16px; margin-right: auto; font-size: 17px; letter-spacing: -.01em; min-width: 0; }
.barre-marque img { height: 44px; width: auto; display: block; flex: none; }
.barre-marque b { padding-left: 16px; border-left: 1px solid var(--trait); line-height: 28px; white-space: nowrap; }
.chercher { display: inline-flex; align-items: center; gap: 10px; height: 44px; width: min(300px, 30vw); padding: 0 12px 0 14px; border-radius: 22px; background: var(--fond);
  color: var(--gris); font-size: 14.5px; flex: none; transition: background .15s, color .15s; }
.chercher:hover { background: var(--gris-c); color: var(--noir); }
.chercher kbd { margin-left: auto; background: var(--carte); }
.moi { position: relative; flex: none; }
.moi summary { list-style: none; cursor: pointer; border-radius: 50%; display: block; }
.moi summary::-webkit-details-marker { display: none; }
.volet { position: absolute; right: 0; top: calc(100% + 10px); background: var(--carte); color: var(--noir); border-radius: var(--r-l);
  box-shadow: var(--ombre-h); border: 1px solid var(--trait); padding: 8px; min-width: 260px; display: grid; gap: 2px; z-index: 40; }
.volet p { padding: 10px 12px 12px; font-size: 13.5px; color: var(--gris); border-bottom: 1px solid var(--trait); margin-bottom: 6px; }
.volet p b { display: block; color: var(--noir); font-size: 15px; }
.volet a, .volet button { display: flex; align-items: center; gap: 10px; text-align: left; width: 100%; padding: 10px 12px; border-radius: 10px; font-size: 14.5px; }
.volet a:hover, .volet button:hover { background: var(--fond); }

/* ---------- le dock : la même navigation, en bas, sur tous les écrans */
.dock { position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 30; display: flex; gap: 2px; padding: 6px;
  background: color-mix(in srgb, var(--carte) 94%, transparent); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid var(--trait); border-radius: 24px; box-shadow: var(--ombre-h); max-width: calc(100vw - 20px); }
.dock a, .dock button { display: grid; justify-items: center; align-content: center; gap: 4px; min-width: 92px; height: 58px; padding: 0 10px; border-radius: 18px;
  font-size: 11.5px; color: var(--gris); white-space: nowrap; transition: background .15s, color .15s; }
.dock a:hover, .dock button:hover { background: var(--fond); color: var(--noir); }
.dock [aria-current] { background: var(--noir); color: #fff; font-weight: 700; }
.dock [aria-current]:hover { background: var(--noir); color: #fff; }
.dock .plus { display: none; }

/* ---------- les boutons */
.bt { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 22px; background: var(--noir); color: #fff;
  font-weight: 700; font-size: 14.5px; white-space: nowrap; border: 0; flex: none; transition: background .15s, transform .08s; }
.bt:hover { background: #000; }
.bt:active { transform: translateY(1px); }
.bt.jaune { background: var(--j); color: var(--noir); }
.bt.jaune:hover { background: #F0A517; }
.bt.clair { background: var(--carte); color: var(--noir); box-shadow: inset 0 0 0 1px var(--trait); }
.bt.clair:hover { background: var(--fond); box-shadow: inset 0 0 0 1px var(--gris-m); }
.bt.petit { height: 36px; padding: 0 14px; font-size: 13.5px; border-radius: 18px; }
.bt.danger { background: var(--carte); color: var(--of); box-shadow: inset 0 0 0 1px var(--op); }
.bt.danger:hover { background: var(--op); }
.bt-icone { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--gris); flex: none; transition: background .15s, color .15s; }
.bt-icone:hover { background: var(--gris-c); color: var(--noir); }
.bt-icone.discret { color: var(--gris-m); width: 34px; height: 34px; }

/* ---------- la frise de l'accueil */
.frise { padding: 0; overflow: hidden; }
.frise-defile { overflow-x: auto; scrollbar-width: none; padding: 28px clamp(22px, 3vw, 40px) 20px; }
.frise-defile::-webkit-scrollbar { display: none; }
.frise-piste { position: relative; height: 146px; min-width: 1040px; }
.frise-piste > * { position: absolute; }
.frise-nom { display: grid; gap: 1px; padding: 7px 10px 8px; border-radius: 12px; background: var(--fond); text-align: center; height: 44px; align-content: center;
  transition: background .15s; }
.frise-nom:hover { background: var(--gris-c); }
.frise-nom b { font-size: 12.5px; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.frise-nom span { font-size: 11.5px; color: var(--gris); line-height: 1.15; }
.frise-nom.jalon { background: var(--jp); }
.frise-nom.jalon:hover { background: #FBE6B4; }
.frise-nom.jalon span { color: var(--jf); }
.frise-nom.echeance, .frise-nom.depart { background: var(--op); }
.frise-nom.echeance span, .frise-nom.depart span { color: var(--of); }
.frise-nom.n0 { top: 48px; } .frise-nom.n1 { top: 0; }
.frise-tige { width: 1.5px; background: var(--trait); transform: translateX(-50%); bottom: 44px; }
.frise-tige.n0 { top: 92px; } .frise-tige.n1 { top: 44px; }
.frise-nom { z-index: 1; }
.frise-trait { left: 0; right: 0; top: 104px; height: 8px; background: var(--gris-c); border-radius: 4px; }
.frise-fait { left: 0; top: 104px; height: 8px; background: var(--v); border-radius: 4px; }
.frise-date { top: 128px; font-size: 11.5px; color: var(--gris-m); transform: translateX(-50%); white-space: nowrap; }
.frise-date.mois { color: var(--gris); }
.frise-repere { top: 108px; transform: translate(-50%, -50%); border-radius: 50%; z-index: 2; }
.frise-repere::after { content: ""; position: absolute; inset: -12px; }
.frise-repere.seance { width: 14px; height: 14px; background: var(--carte); border: 3px solid var(--noir); }
.frise-repere.seance.tenue { background: var(--v); border-color: var(--carte); box-shadow: 0 0 0 1px var(--v); }
.frise-repere.seance.passe { width: 8px; height: 8px; border-width: 0; background: var(--v); }
.frise-repere.jalon { width: 30px; height: 28px; border-radius: 9px; background: var(--j); color: var(--noir); font-size: 11.5px; font-weight: 900; display: grid; place-items: center;
  box-shadow: 0 0 0 3px var(--carte); }
.frise-repere.jalon.atteint { background: var(--v); color: #fff; }
.frise-repere.jalon.passe { width: 12px; height: 12px; border-radius: 4px; box-shadow: 0 0 0 2px var(--carte); }
.frise-repere.echeance { width: 14px; height: 14px; background: var(--o); box-shadow: 0 0 0 3px var(--carte); }
.frise-repere.depart { width: 15px; height: 15px; border-radius: 4px; background: var(--carte); border: 3px solid var(--o); transform: translate(-50%, -50%) rotate(45deg); }
.frise-repere.depart.passe { display: none; }
.frise-repere:hover, .frise-repere:focus-visible { box-shadow: 0 0 0 5px rgba(248, 179, 52, .5); }
.frise-jour { top: 96px; height: 24px; width: 3px; border-radius: 2px; background: var(--noir); transform: translateX(-50%); z-index: 3; pointer-events: none; }
.frise-jour b { position: absolute; top: 30px; left: 50%; transform: translateX(-50%); background: var(--noir); color: #fff; font-size: 11px; font-weight: 700; font-style: normal;
  padding: 3px 9px; border-radius: 9px; white-space: nowrap; line-height: 1.3; }
.bulle { position: fixed; z-index: 90; background: var(--noir); color: #fff; border-radius: 10px; padding: 8px 12px; font-size: 13px; line-height: 1.35; max-width: 280px;
  pointer-events: none; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .5); }
.bulle b { display: block; }
.bulle span { color: rgba(255, 255, 255, .72); }

/* ---------- la page */
.page { flex: 1; width: 100%; max-width: 1320px; margin: 0 auto; padding: 14px var(--marge) 56px; display: grid; gap: 22px; align-content: start; }
.page.etroite { max-width: 820px; }
.page.moyenne { max-width: 1080px; }
.tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px 28px; flex-wrap: wrap; padding: 10px 2px 4px; }
.tete h1 { font-size: clamp(27px, 3.4vw, 40px); letter-spacing: -.025em; }
.tete .faits { display: flex; gap: 26px; flex-wrap: wrap; }
.fait { display: grid; gap: 1px; }
.fait b { font-size: 24px; font-weight: 900; line-height: 1.1; letter-spacing: -.02em; }
.fait b small { font-size: 14px; font-weight: 400; color: var(--gris); letter-spacing: 0; }
.fait span { font-size: 13px; color: var(--gris); }
.retour { display: inline-flex; align-items: center; gap: 4px; color: var(--gris); font-size: 14px; margin-bottom: 8px; margin-left: -6px; padding: 4px 8px 4px 2px; border-radius: 8px; }
.retour:hover { color: var(--noir); background: var(--gris-c); }
.carte { background: var(--carte); border-radius: var(--r-xl); padding: clamp(18px, 2.4vw, 30px); min-width: 0; }
.carte > h2, .bloc > h2 { font-size: 19px; display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.carte > h2 .compte, .bloc > h2 .compte { font-size: 13px; font-weight: 700; color: var(--gris); background: var(--fond); border-radius: 10px; padding: 2px 9px; }
.carte > h2 .droite, .bloc > h2 .droite { margin-left: auto; font-size: 14px; font-weight: 400; color: var(--gris); display: inline-flex; align-items: center; gap: 4px; }
.carte > h2 a.droite:hover { color: var(--noir); }
.grille { display: grid; gap: 22px; }
.g-2 { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
.g-egal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-fiche { grid-template-columns: minmax(0, 1fr) 300px; }
.g-fiche.large { grid-template-columns: minmax(0, 1fr) 340px; }
.meta { font-size: 13px; color: var(--gris); }
.meta .ic { display: inline-block; vertical-align: -3px; margin-right: 6px; }
.meta .pers { vertical-align: middle; }
.sep { display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: var(--gris-m); margin: 0 8px; vertical-align: middle; }
.annonces { display: grid; gap: 8px; }
.annonce { display: flex; align-items: center; gap: 10px; background: var(--vp); color: var(--vf); border-radius: var(--r-m); padding: 12px 16px; font-weight: 700; font-size: 14.5px; }
.annonce.erreur { background: var(--op); color: var(--of); }
.vide { border: 1.5px dashed var(--trait); border-radius: var(--r-l); padding: 26px 20px; text-align: center; color: var(--gris); display: grid; gap: 12px; justify-items: center; font-size: 14.5px; }

/* ---------- les personnes, les états, les types de fichier */
.pers { display: inline-grid; place-items: center; width: var(--t); height: var(--t); border-radius: 50%; font-size: calc(var(--t) * .38); font-weight: 700; flex: none;
  letter-spacing: 0; line-height: 1; }
.t-vert { background: var(--vp); color: var(--vf); } .t-jaune { background: var(--jp); color: var(--jf); } .t-orange { background: var(--op); color: var(--of); }
.t-sombre { background: #E4E4E3; color: #3A3D3B; } .t-vert-f { background: var(--noir); color: #fff; } .t-jaune-f { background: var(--j); color: var(--noir); }
.t-orange-f { background: var(--o); color: #fff; }
.groupe-pers { display: inline-flex; }
.groupe-pers .pers + .pers { margin-left: -8px; box-shadow: 0 0 0 2px var(--carte); }
.etat { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px; border-radius: 13px; font-size: 12.5px; font-weight: 700; white-space: nowrap; flex: none; }
.etat::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.e-fait, .e-tenue, .e-ouvert, .e-atteint, .e-validee, .e-repondue { background: var(--vp); color: var(--vf); }
.e-en_cours, .e-documentee, .e-prevue { background: var(--jp); color: var(--jf); }
.e-demande, .e-abordee { background: var(--op); color: var(--of); }
.e-a_faire, .e-non_abordee, .e-plus_tard, .e-a_venir, .e-ouverte { background: var(--gris-c); color: var(--gris); }
.e-a_confirmer, .e-a_caler, .e-brouillon { background: var(--hachures), var(--fond); color: var(--gris); box-shadow: inset 0 0 0 1px var(--trait); }
.ext { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 11px; font-size: 10.5px; font-weight: 900; text-transform: uppercase; letter-spacing: .02em;
  flex: none; background: var(--gris-c); color: var(--gris); }
.x-pdf { background: var(--op); color: var(--of); } .x-tableur { background: var(--vp); color: var(--vf); } .x-diapo { background: var(--jp); color: var(--jf); }
.x-texte { background: #E3EAF3; color: #24466E; } .x-flux { background: #DDEBF7; color: #0B4A7A; } .x-code { background: var(--noir); color: #fff; }
.jauge { display: block; height: 8px; border-radius: 4px; background: var(--gris-c); overflow: hidden; }
.jauge i { display: block; height: 100%; background: var(--v); border-radius: 4px; min-width: 0; }
.jauge.jaune i { background: var(--j); }
.crans { display: inline-flex; gap: 3px; vertical-align: middle; }
.crans i { width: 18px; height: 8px; border-radius: 3px; background: var(--gris-c); }
.crans i.plein { background: var(--v); }
.outil { display: inline-grid; place-items: center; height: 40px; min-width: 40px; padding: 0 8px; border-radius: 11px; background: var(--carte); box-shadow: inset 0 0 0 1px var(--trait);
  flex: none; }
.outil img { height: 22px; width: auto; max-width: 64px; object-fit: contain; display: block; }
.outil.nomme { font-size: 11.5px; font-weight: 900; padding: 0 10px; letter-spacing: -.01em; white-space: nowrap; }
.cal { display: inline-grid; grid-template-rows: 18px 1fr auto; justify-items: center; width: 54px; height: 62px; border-radius: 13px; background: var(--carte); overflow: hidden; flex: none;
  box-shadow: inset 0 0 0 1px var(--trait); text-align: center; }
.cal span { width: 100%; background: var(--o); color: #fff; font-size: 10.5px; font-weight: 700; line-height: 18px; letter-spacing: .03em; }
.cal b { font-size: 23px; font-weight: 900; line-height: 1; align-self: center; letter-spacing: -.03em; }
.cal i { font-style: normal; font-size: 10.5px; color: var(--gris); padding-bottom: 5px; line-height: 1; }
.cal.passe span { background: var(--gris-m); }
.cal.vide { box-shadow: inset 0 0 0 1.5px var(--trait); background: var(--hachures), var(--fond); display: inline-grid; grid-template-rows: none; place-items: center;
  font-size: 11.5px; line-height: 1.2; color: var(--gris); font-weight: 700; }
.num { font-weight: 900; font-size: 13px; color: var(--noir); background: var(--fond); border-radius: 8px; min-width: 38px; height: 26px; display: inline-grid; place-items: center;
  padding: 0 7px; flex: none; letter-spacing: -.01em; }

/* ---------- l'accueil */
.salut { padding-top: 14px; }
.salut .jour { font-size: 14px; color: var(--gris); margin-bottom: 2px; }
.salut h1 { font-size: clamp(32px, 4vw, 50px); letter-spacing: -.03em; }
.essentiel { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 22px; }
.mesure { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 26px 40px; align-items: center; align-content: space-between; }
.mesure .grand { font-size: clamp(72px, 9vw, 124px); font-weight: 900; line-height: .86; letter-spacing: -.05em; }
.mesure .grand small { font-size: .34em; letter-spacing: -.02em; margin-left: 4px; color: var(--v); }
.mesure h2 { font-size: 17px; margin-bottom: 14px; }
.reglettes { display: grid; gap: 12px; }
.reglette { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; gap: 14px; align-items: start; font-size: 13.5px; }
.reglette > span:first-child, .reglette > b { line-height: 22px; }
.reglette > span { color: var(--gris); }
.reglette > b { font-size: 13.5px; white-space: nowrap; }
.cases { display: flex; gap: 5px; }
.cases a { flex: 1; min-width: 0; display: grid; gap: 5px; justify-items: center; font-size: 11px; color: var(--gris); white-space: nowrap; }
.cases i, .cases a.seance-case::before { content: ""; display: block; width: 100%; height: 22px; border-radius: 6px; background: var(--gris-c); position: relative; overflow: hidden; }
.cases i.plein, .cases a.plein::before { background: var(--v); }
.cases a.prevue::before { background: var(--carte); box-shadow: inset 0 0 0 2px var(--noir); }
.cases a.a_caler::before { background: var(--hachures), var(--fond); box-shadow: inset 0 0 0 1.5px var(--trait); }
.cases a:hover { color: var(--noir); }
.cases a:hover i, .cases a:hover::before { filter: brightness(.94); }
.cases i.tiers::after, .cases i.deux-tiers::after { content: ""; position: absolute; inset: 0 auto 0 0; background: var(--v); }
.cases i.tiers::after { width: 34%; } .cases i.deux-tiers::after { width: 67%; }
.mesure .faits { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding-top: 20px; border-top: 1px solid var(--trait); }
.mesure .faits a { display: grid; gap: 2px; padding: 0 16px; border-left: 1px solid var(--trait); }
.mesure .faits a:first-child { padding-left: 0; border-left: 0; }
.mesure .faits b { font-size: 26px; font-weight: 900; letter-spacing: -.03em; line-height: 1.1; }
.mesure .faits b small { font-size: 14px; font-weight: 400; color: var(--gris); letter-spacing: 0; }
.mesure .faits span { font-size: 13px; color: var(--gris); line-height: 1.3; }
.mesure .faits a:hover span { color: var(--noir); text-decoration: underline; text-underline-offset: 3px; }
.rdv { display: grid; gap: 16px; align-content: start; }
.rdv > h2 { margin-bottom: 0; }
.rdv-un { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; background: var(--jp); border-radius: var(--r-l); padding: 16px; transition: background .15s; }
.rdv-un:hover { background: #FBE6B4; }
.rdv-un .cal { width: 62px; height: 72px; border-radius: 15px; box-shadow: none; }
.rdv-un .cal b { font-size: 28px; }
.rdv-un h3 { font-size: 18px; line-height: 1.2; }
.rdv-un p { font-size: 13.5px; color: var(--gris); margin-top: 4px; }
.rdv-un .quand { display: inline-flex; margin-top: 10px; height: 26px; align-items: center; padding: 0 11px; border-radius: 13px; background: var(--noir); color: #fff; font-weight: 700; font-size: 12.5px; }
.rdv-suite { display: grid; }
.rdv-suite a { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--trait); font-size: 14.5px; }
.rdv-suite a:last-child { border-bottom: 0; padding-bottom: 0; }
.rdv-suite a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.rdv-suite time { color: var(--jf); font-weight: 700; font-size: 13px; }
.rdv-suite b { font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rdv-suite .ic { color: var(--gris-m); }
.compteurs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.compteur { background: var(--carte); border-radius: var(--r-l); padding: 16px 18px 18px; display: grid; gap: 10px; transition: box-shadow .2s, transform .2s; }
.compteur:hover { box-shadow: var(--ombre); transform: translateY(-1px); }
.compteur .haut { display: flex; align-items: center; justify-content: space-between; color: var(--gris); font-size: 13.5px; }
.compteur b { font-size: 30px; font-weight: 900; letter-spacing: -.03em; line-height: 1; }
.compteur b small { font-size: 15px; font-weight: 400; color: var(--gris); letter-spacing: 0; margin-left: 2px; }
.flux { display: grid; }
.flux li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--trait); align-items: start; }
.flux li:last-child { border-bottom: 0; padding-bottom: 0; }
.flux li:first-child { padding-top: 0; }
.flux a:hover { text-decoration: underline; text-underline-offset: 3px; }
.flux p { font-size: 14.5px; line-height: 1.4; }
.flux .quand { font-size: 12.5px; color: var(--gris); display: block; margin-top: 2px; }

/* ---------- les listes : actions, documents, questions, séances */
.liste { display: grid; }
.action { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 12px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--trait); scroll-margin-top: 90px; }
.action:first-child { padding-top: 2px; } .action:last-child { border-bottom: 0; padding-bottom: 2px; }
.action-corps > p:first-child { font-size: 15px; line-height: 1.4; }
.action .meta { margin-top: 4px; }
.action .note { font-size: 13px; color: var(--jf); margin-top: 3px; }
.action.faite .action-corps > p:first-child { color: var(--gris); }
.action:target, .question:target, .decision:target { background: var(--jp); border-radius: var(--r-m); box-shadow: 0 0 0 10px var(--jp); border-color: transparent; }
.choix-etat { position: relative; display: inline-flex; align-items: center; height: 30px; border-radius: 15px; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.choix-etat select { appearance: none; -webkit-appearance: none; background: none; border: 0; height: 30px; padding: 0 28px 0 13px; font-weight: 700; border-radius: 15px; cursor: pointer;
  color: inherit; max-width: 130px; }
.choix-etat .ic { position: absolute; right: 10px; pointer-events: none; }
.choix-etat option { color: var(--noir); background: #fff; font-weight: 400; }
.doc { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--trait); }
.doc:first-child { padding-top: 0; } .doc:last-child { border-bottom: 0; padding-bottom: 0; }
.doc-lien { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; min-width: 0; }
.doc-titre { display: grid; min-width: 0; }
.doc-titre b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.doc-lien:hover b { text-decoration: underline; text-underline-offset: 3px; }
.doc-titre span { font-size: 13px; color: var(--gris); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-qui { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--gris); white-space: nowrap; }
.question { padding: 16px 0; border-bottom: 1px solid var(--trait); display: grid; gap: 12px; scroll-margin-top: 90px; }
.question:first-child { padding-top: 2px; } .question:last-child { border-bottom: 0; padding-bottom: 2px; }
.question-tete { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start; }
.question-tete p { font-size: 15.5px; line-height: 1.42; padding-top: 3px; }
.question .etiquettes, .etiquettes { display: flex; gap: 6px; flex-wrap: wrap; }
.question > .etiquettes, .question > .repondre, .question > .reponse { margin-left: 42px; }
.etiquette { font-size: 12.5px; color: var(--gris); background: var(--fond); border-radius: 8px; padding: 3px 9px; display: inline-flex; align-items: center; gap: 6px; }
a.etiquette:hover { background: var(--gris-c); color: var(--noir); }
.repondre summary { list-style: none; cursor: pointer; width: max-content; }
.repondre summary::-webkit-details-marker { display: none; }
.repondre[open] summary { display: none; }
.repondre form { display: grid; gap: 10px; justify-items: start; }
.reponse { background: var(--vp); border-radius: 4px var(--r-m) var(--r-m) var(--r-m); padding: 14px 16px; display: grid; gap: 8px; font-size: 15px; }
.reponse .meta { gap: 6px 0; }
.reponse .meta .pers { margin-right: 8px; }
.prose p + p, .prose ul + p, .prose p + ul { margin-top: 10px; }
.prose ul { display: grid; gap: 8px; }
.prose li { padding-left: 18px; position: relative; }
.prose li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px; border-radius: 2px; background: var(--j); }
.seance-ligne { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--trait); }
.seance-ligne:first-child { padding-top: 2px; } .seance-ligne:last-child { border-bottom: 0; padding-bottom: 2px; }
.seance-ligne h3 { font-size: 16px; }
.seance-ligne:hover h3 { text-decoration: underline; text-underline-offset: 3px; }
.seance-ligne .meta { margin-top: 3px; }
.seance-ligne > .ic { color: var(--gris-m); }
.decision { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--trait); align-items: start; scroll-margin-top: 90px; }
.decision:first-child { padding-top: 2px; } .decision:last-child { border-bottom: 0; padding-bottom: 2px; }
.decision p { font-size: 15px; line-height: 1.42; }
.decision .num { background: var(--jp); color: var(--jf); }

/* ---------- filtres et champs */
.filtres { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.puce { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 18px; background: var(--carte); font-size: 13.5px; color: var(--gris);
  box-shadow: inset 0 0 0 1px var(--trait); white-space: nowrap; }
.puce:hover { color: var(--noir); box-shadow: inset 0 0 0 1px var(--gris-m); }
.puce[aria-current] { background: var(--noir); color: #fff; box-shadow: none; font-weight: 700; }
.puce i { font-style: normal; font-size: 12px; opacity: .7; }
.puce .pers { margin-left: -8px; }
.champ { display: grid; gap: 6px; }
.champ > label, .champ > span { font-size: 13.5px; font-weight: 700; }
input[type=text], input[type=email], input[type=password], input[type=search], input[type=date], input[type=time], select, textarea {
  width: 100%; min-height: 44px; border: 1px solid var(--trait); border-radius: var(--r-m); padding: 10px 14px; background: var(--carte); font-size: 15px;
  transition: border-color .15s, box-shadow .15s; }
textarea { resize: vertical; line-height: 1.45; min-height: 88px; }
input:hover, select:hover, textarea:hover { border-color: var(--gris-m); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 0; border-color: var(--noir); box-shadow: 0 0 0 3px var(--jp); border-radius: var(--r-m); }
select { appearance: none; -webkit-appearance: none; padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2355585A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5.500 9.500 6.500 6.500 6.500-6.500'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; }
.choix-etat select { min-height: 0; background-image: none; width: auto; font-size: 12.5px; }
.recherche { position: relative; flex: 1; min-width: 200px; max-width: 340px; }
.recherche .ic { position: absolute; left: 14px; top: 12px; color: var(--gris-m); pointer-events: none; }
.recherche input { padding-left: 42px; border-radius: 22px; height: 44px; }
.formulaire { display: grid; gap: 18px; }
.rang { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.coche { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; font-size: 14.5px; cursor: pointer; line-height: 1.4; }
.coche input { width: 22px; height: 22px; accent-color: var(--noir); margin-top: 1px; }
.engagement { background: var(--jp); border-radius: var(--r-m); padding: 14px 16px; }
.erreur-champ { background: var(--op); color: var(--of); border-radius: var(--r-m); padding: 12px 16px; font-weight: 700; font-size: 14.5px; }
.actions-bas { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.actions-bas .droite { margin-left: auto; }

/* ---------- la feuille de route */
.gantt-cadre { overflow-x: auto; margin: 0 calc(-1 * clamp(18px, 2.4vw, 30px)); padding: 0 clamp(18px, 2.4vw, 30px); scrollbar-width: thin; }
.gantt { --col: 190px; min-width: 860px; display: grid; grid-template-columns: var(--col) minmax(0, 1fr); position: relative; }
.gantt-mois { grid-column: 2; display: flex; height: 40px; border-radius: 12px; overflow: hidden; background: var(--fond); color: var(--noir); margin-bottom: 6px; }
.gantt-mois span { display: grid; place-items: center; font-size: 12.5px; font-weight: 700; letter-spacing: .02em; text-transform: capitalize; border-right: 1px solid var(--carte); }
.gantt-nom { grid-column: 1; padding: 11px 14px 11px 0; border-bottom: 1px solid var(--trait); display: grid; align-content: center; position: sticky; left: 0; background: var(--carte); z-index: 2; }
.gantt-nom b { font-size: 14.5px; line-height: 1.25; }
.gantt-nom span { font-size: 12.5px; color: var(--gris); }
.gantt-ligne { grid-column: 2; position: relative; height: 58px; border-bottom: 1px solid var(--trait); }
.gantt-barre { position: absolute; top: 12px; height: 34px; border-radius: 10px; display: flex; align-items: center; padding: 0 9px; font-size: 12px; font-weight: 700; color: #fff;
  white-space: nowrap; overflow: hidden; z-index: 2; }
.gantt-barre.sombre { background: var(--noir); } .gantt-barre.vert { background: var(--v); } .gantt-barre.jaune { background: var(--j); color: var(--noir); }
.gantt-barre.orange { background: var(--o); }
.gantt-barre.indicatif { background: var(--hachures), var(--vp); color: var(--vf); box-shadow: inset 0 0 0 1.5px var(--v); }
.gantt-barre.indicatif.jaune { background: var(--hachures), var(--jp); color: var(--jf); box-shadow: inset 0 0 0 1.5px var(--j); }
.gantt-fond { position: absolute; left: var(--col); right: 0; top: 46px; bottom: 0; pointer-events: none; z-index: 0; }
.gantt-fond i { position: absolute; top: 0; bottom: 0; }
.gantt-fond .conges { background: var(--hachures), rgba(237, 234, 229, .6); border-radius: 6px; display: grid; align-content: end; justify-items: center; padding-bottom: 8px; font-size: 11px; color: var(--gris);
  font-style: normal; }
.gantt-fond .jour { width: 2px; background: var(--noir); transform: translateX(-50%); }
.gantt-fond .jour b { position: absolute; top: -4px; left: 6px; font-size: 11px; color: var(--o); white-space: nowrap; font-style: normal; background: var(--carte); padding: 0 4px; border-radius: 4px; }
.gantt-jalon { z-index: 2; position: absolute; top: 15px; transform: translateX(-50%); width: 30px; height: 28px; border-radius: 9px; background: var(--j); color: var(--noir); display: grid; place-items: center;
  font-size: 11.5px; font-weight: 900; }
.gantt-jalon.atteint { background: var(--v); color: #fff; }
.legende { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; color: var(--gris); margin-top: 16px; }
.legende span { display: inline-flex; align-items: center; gap: 8px; }
.legende i { width: 26px; height: 12px; border-radius: 4px; background: var(--noir); }
.legende i.indicatif { background: var(--hachures), var(--vp); box-shadow: inset 0 0 0 1.5px var(--v); }
.legende i.trait { width: 2px; height: 16px; background: var(--noir); border-radius: 1px; }
.bornes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.borne { background: var(--carte); border-radius: var(--r-l); padding: 16px 16px 18px; display: grid; gap: 6px; align-content: start; position: relative; }
.borne .lettre { width: 36px; height: 32px; border-radius: 10px; background: var(--j); display: grid; place-items: center; font-weight: 900; font-size: 13px; margin-bottom: 6px; }
.borne.atteint .lettre { background: var(--v); color: #fff; }
.borne h3 { font-size: 15.5px; }
.borne p { font-size: 13.5px; color: var(--gris); }
.borne time { font-size: 13.5px; font-weight: 700; color: var(--jf); }
.borne .bt-icone { position: absolute; top: 10px; right: 10px; }
.axes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; counter-reset: axe; border-radius: var(--r-xl); overflow: hidden; background: var(--carte); }
.axe { padding: 22px 24px 24px; border-right: 1px solid var(--trait); border-bottom: 1px solid var(--trait); display: grid; gap: 8px; align-content: start; counter-increment: axe; }
.axe:nth-child(3n) { border-right: 0; } .axe:nth-last-child(-n+3) { border-bottom: 0; }
.axe::before { content: counter(axe); font-weight: 900; font-size: 34px; line-height: 1; color: var(--j); letter-spacing: -.04em; }
.axe h3 { font-size: 16px; }
.axe p { font-size: 14px; }
.axe .livrables { font-size: 13px; color: var(--gris); padding-top: 8px; border-top: 1px solid var(--trait); margin-top: 4px; }

/* ---------- la transmission : séances et études */
.etudes { width: 100%; border-collapse: collapse; }
.etudes th { text-align: left; font-size: 12.5px; font-weight: 400; color: var(--gris); padding: 0 12px 10px 0; border-bottom: 1px solid var(--trait); white-space: nowrap; }
.etudes td { padding: 13px 12px 13px 0; border-bottom: 1px solid var(--trait); vertical-align: middle; font-size: 14.5px; }
.etudes tr:last-child td { border-bottom: 0; padding-bottom: 2px; }
.etudes td:last-child, .etudes th:last-child { padding-right: 0; text-align: right; }
.etudes a.nom { font-weight: 700; display: inline-flex; align-items: center; gap: 8px; }
.etudes a.nom:hover { text-decoration: underline; text-underline-offset: 3px; }
.etudes .prio { width: 8px; height: 8px; border-radius: 50%; background: var(--o); flex: none; }
.etudes .couv { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; font-size: 13px; color: var(--gris); }
.etudes .ech { white-space: nowrap; }
.etudes .ech small { display: block; font-size: 12.5px; color: var(--gris); }
.etudes .ech.proche small { color: var(--of); font-weight: 700; }
.fiche-tete { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 20px; align-items: center; }
.fiche-tete h1 { font-size: clamp(24px, 3vw, 34px); letter-spacing: -.02em; }
.fiche-tete .meta { margin-top: 8px; font-size: 14px; gap: 6px 0; }
.fiche-tete .meta .ic { margin-right: 6px; }
.fiche-tete .cal { width: 70px; height: 82px; border-radius: 17px; }
.fiche-tete .cal b { font-size: 32px; }
.proprietes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; background: var(--fond); border-radius: var(--r-l); }
.proprietes div { padding: 14px 18px; border-right: 1px solid var(--trait); display: grid; gap: 2px; align-content: start; min-width: 0; }
.proprietes div:last-child { border-right: 0; }
.proprietes dt { font-size: 12.5px; color: var(--gris); }
.proprietes dd { font-weight: 700; font-size: 15px; margin: 0; }
.proprietes dd small { display: block; font-weight: 400; font-size: 13px; color: var(--gris); }
.proprietes dd.manque { color: var(--of); }
.etapes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.etapes li { font-size: 13px; color: var(--gris-m); padding-top: 12px; border-top: 5px solid var(--gris-c); border-radius: 2px; }
.etapes li.fait { border-color: var(--v); color: var(--noir); }
.etapes li.ici { font-weight: 700; }
.voisins { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.voisins a { display: inline-flex; align-items: center; gap: 8px; color: var(--gris); font-size: 14px; padding: 8px 12px; border-radius: 12px; max-width: 48%; }
.voisins a:hover { background: var(--gris-c); color: var(--noir); }
.voisins a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voisins a:only-child.suivant { margin-left: auto; }
.liste-etudes { display: grid; gap: 2px; }
.liste-etudes a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border-radius: 10px; font-size: 14px; color: var(--gris); }
.liste-etudes a:hover { background: var(--fond); color: var(--noir); }
.liste-etudes a[aria-current] { background: var(--fond); color: var(--noir); font-weight: 700; }

/* ---------- les documents */
.apercu { background: var(--gris-c); border-radius: var(--r-l); overflow: hidden; min-height: 300px; display: grid; }
.apercu iframe { width: 100%; height: min(78vh, 900px); border: 0; display: block; }
.apercu img { width: 100%; height: auto; display: block; }
.apercu .sans { display: grid; place-items: center; gap: 14px; align-content: center; padding: 40px 20px; color: var(--gris); text-align: center; }
.apercu .sans .ext { width: 72px; height: 72px; border-radius: 18px; font-size: 16px; }
.versions li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--trait); }
.versions li:last-child { border-bottom: 0; padding-bottom: 0; } .versions li:first-child { padding-top: 0; }
.versions .v { width: 36px; height: 36px; border-radius: 10px; background: var(--fond); display: grid; place-items: center; font-weight: 900; font-size: 13px; }
.versions li:first-child .v { background: var(--noir); color: #fff; }
.versions b { font-size: 14px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.versions span { font-size: 12.5px; color: var(--gris); }
.plie summary { cursor: pointer; list-style: none; display: inline-flex; }
.plie summary::-webkit-details-marker { display: none; }
.plie[open] > summary { margin-bottom: 16px; }
.zone { border: 2px dashed var(--gris-m); border-radius: var(--r-l); padding: 34px 20px; display: grid; justify-items: center; gap: 10px; text-align: center; cursor: pointer; position: relative;
  transition: border-color .15s, background .15s; background: var(--fond); }
.zone:hover, .zone.dessus { border-color: var(--noir); background: var(--jp); }
.zone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.zone > .ic { color: var(--noir); }
.zone b { font-size: 17px; }
.zone span { font-size: 13px; color: var(--gris); max-width: 46ch; }
.zone.choisi { border-style: solid; border-color: var(--v); background: var(--vp); }
.alerte { background: var(--op); border-radius: var(--r-l); padding: 20px 22px; display: grid; gap: 14px; }
.alerte h2 { display: flex; gap: 10px; align-items: center; color: var(--of); font-size: 18px; }
.alerte ul { display: flex; gap: 6px; flex-wrap: wrap; }
.alerte li { background: var(--carte); border-radius: 8px; padding: 4px 10px; font-size: 13.5px; font-weight: 700; }

/* ---------- les accès */
.acces { display: grid; grid-template-columns: 172px minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--trait); scroll-margin-top: 90px; }
.acces:first-child { padding-top: 2px; } .acces:last-child { border-bottom: 0; padding-bottom: 2px; }
.acces .logos { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.acces h3 { font-size: 16px; }
.acces .contenu { font-size: 13.5px; color: var(--gris); margin-top: 2px; }
.acces .cote { font-size: 13.5px; }
.acces .cote small { display: block; color: var(--gris); font-size: 12.5px; }
.acces form { display: flex; gap: 8px; align-items: center; }
.acces form { grid-column: 2 / -1; display: grid; grid-template-columns: 170px minmax(0, 1fr) auto; }
.acces form[hidden] { display: none; }

/* ---------- la recherche, la feuille du téléphone, le dépôt par glisser */
dialog { border: 0; padding: 0; color: inherit; max-width: none; max-height: none; }
dialog::backdrop { background: rgba(28, 28, 28, .45); backdrop-filter: blur(1.5px); }
.palette { width: min(640px, calc(100vw - 24px)); margin: 12vh auto 0; border-radius: 22px; background: var(--carte); box-shadow: var(--ombre-h); overflow: hidden; }
.palette-champ { display: flex; align-items: center; gap: 12px; padding: 6px 18px; border-bottom: 1px solid var(--trait); color: var(--gris); }
.palette-champ input { border: 0; min-height: 56px; padding: 0; font-size: 17px; box-shadow: none !important; background: none; }
.palette-champ input::-webkit-search-cancel-button { display: none; }
.palette-liste { max-height: min(56vh, 460px); overflow-y: auto; padding: 8px; }
.palette-liste a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; }
.palette-liste a .ic { color: var(--gris); }
.palette-liste a b { font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.palette-liste a i { font-style: normal; font-size: 12.5px; color: var(--gris); white-space: nowrap; }
.palette-liste a[aria-selected=true], .palette-liste a:hover { background: var(--fond); }
.palette-liste a[aria-selected=true] { box-shadow: inset 3px 0 0 var(--j); }
.palette-liste .rien { padding: 22px 12px; color: var(--gris); text-align: center; font-size: 14.5px; }
.feuille { position: fixed; inset: auto 0 0 0; width: 100%; margin: 0; border-radius: 24px 24px 0 0; background: var(--carte); padding: 18px 14px calc(18px + env(safe-area-inset-bottom)); }
.feuille[open] { display: grid; gap: 2px; }
.feuille a, .feuille form > button:not(.fermer) { display: flex; align-items: center; gap: 14px; padding: 14px 12px; border-radius: 14px; font-size: 16px; width: 100%; text-align: left; }
.feuille a:active { background: var(--fond); }
.feuille .fermer { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 50%; background: var(--fond); display: grid; place-items: center; }
.feuille-moi { display: flex; align-items: center; gap: 12px; padding: 4px 12px 14px; border-bottom: 1px solid var(--trait); margin-bottom: 6px; font-size: 13.5px; color: var(--gris); }
.feuille-moi b { display: block; color: var(--noir); font-size: 16px; }
.lacher { position: fixed; inset: 0; z-index: 80; background: rgba(28, 28, 28, .88); display: grid; place-items: center; color: #fff; }
.lacher[hidden] { display: none; }
.lacher div { display: grid; justify-items: center; gap: 14px; border: 3px dashed rgba(255, 255, 255, .7); border-radius: 30px; padding: 60px 80px; font-size: 24px; }

/* ---------- le pied */
.pied { display: flex; align-items: center; gap: 14px 26px; flex-wrap: wrap; padding: 22px var(--marge) 124px; border-top: 1px solid var(--trait); font-size: 13px; color: var(--gris);
  max-width: 1320px; width: 100%; margin: 0 auto; }
.pied img { height: 40px; width: auto; }
.pied .ingeline { height: 24px; margin-left: auto; opacity: .85; }
.pied .confidentiel { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- la porte : connexion, activation */
.porte { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); background: var(--carte); }
.porte-image { background: var(--fond); position: relative; overflow: hidden; display: grid; align-content: end; padding: clamp(28px, 5vw, 64px); color: var(--noir); }
.porte-image .mosaique { position: absolute; inset: 0; width: 100%; height: 100%; }
.porte-image h1 { position: relative; font-size: clamp(34px, 4.4vw, 60px); letter-spacing: -.035em; line-height: 1.02; max-width: 11ch; }
.porte-image p { position: relative; margin-top: 16px; font-size: 16px; color: rgba(255, 255, 255, .84); }
.porte-boite { display: grid; align-content: center; justify-items: center; padding: 40px 24px; }
.porte-dedans { width: min(400px, 100%); display: grid; gap: 22px; }
.porte-dedans > img { height: 58px; width: auto; margin-bottom: 14px; }
.porte-dedans h2 { font-size: 28px; letter-spacing: -.025em; }
.porte-dedans .bt { width: 100%; height: 50px; border-radius: 25px; font-size: 15.5px; }
.porte-dedans .liens { font-size: 14px; color: var(--gris); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.porte-dedans .liens a { text-decoration: underline; text-underline-offset: 3px; }
.porte-pied { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--gris); margin-top: 18px; }
.porte-pied img { height: 20px; }

/* ---------- la régie */
.tableau { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.tableau th { text-align: left; font-size: 12.5px; font-weight: 400; color: var(--gris); padding: 0 12px 10px 0; border-bottom: 1px solid var(--trait); white-space: nowrap; }
.tableau td { padding: 11px 12px 11px 0; border-bottom: 1px solid var(--trait); vertical-align: middle; }
.tableau tr:last-child td { border-bottom: 0; }
.tableau td:last-child { padding-right: 0; text-align: right; white-space: nowrap; }
.tableau .gestes { display: inline-flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.tableau-cadre { overflow-x: auto; }
.lien-copie { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; background: var(--jp); border-radius: var(--r-m); padding: 12px; align-items: center; margin-bottom: 16px; }
.lien-copie input { font-size: 13.5px; background: var(--carte); }
.lien-copie p { grid-column: 1 / -1; font-size: 14px; font-weight: 700; }
.objets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.objets a { background: var(--fond); border-radius: var(--r-m); padding: 14px 16px; display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 14.5px; }
.objets a:hover { background: var(--gris-c); }
.objets a i { font-style: normal; font-weight: 400; color: var(--gris); }
.a-verifier li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--trait); font-size: 14.5px; }
.a-verifier li:last-child { border-bottom: 0; }
.a-verifier li > span:nth-child(2) { flex: 1; min-width: 0; }
.journal { font-size: 13px; color: var(--gris); display: grid; gap: 6px; max-height: 320px; overflow-y: auto; }
.journal time { color: var(--noir); margin-right: 8px; font-variant-numeric: tabular-nums; }

/* ---------- écrans moyens */
@media (max-width: 1240px) {
  .compteurs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bornes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .objets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .dock a, .dock button { min-width: 0; flex: 1; padding: 0 12px; }
  .dock a.long span { display: none; }
  .dock a.long { min-width: 54px; }
}
@media (max-width: 1020px) {
  .essentiel, .g-2, .g-egal, .g-fiche, .g-fiche.large { grid-template-columns: minmax(0, 1fr); }
  .axes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .axe:nth-child(3n) { border-right: 1px solid var(--trait); } .axe:nth-child(2n) { border-right: 0; }
  .axe:nth-last-child(-n+3) { border-bottom: 1px solid var(--trait); } .axe:nth-last-child(-n+2) { border-bottom: 0; }
  .proprietes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proprietes div:nth-child(2n) { border-right: 0; } .proprietes div:nth-child(-n+2) { border-bottom: 1px solid var(--trait); }
  .acces { grid-template-columns: 132px minmax(0, 1fr) auto; }
  .acces .cote { display: none; }
}
/* ---------- téléphone : barre du bas */
@media (max-width: 760px) {
  :root { --barre: 60px; }
  body { font-size: 15px; }
  .barre .dedans { gap: 8px; }
  .barre-marque img { height: 36px; }
  .barre-marque b { display: none; }
  .chercher { width: 44px; padding: 0; justify-content: center; background: var(--fond); }
  .chercher span, .chercher kbd, .deposer span { display: none; }
  .deposer { width: 44px; padding: 0; }
  .moi { display: none; }
  .dock { left: 10px; right: 10px; transform: none; bottom: max(10px, env(safe-area-inset-bottom)); border-radius: 22px; }
  .dock a.long { display: none; }
  .dock .plus { display: grid; }
  .dock a, .dock button { height: 54px; font-size: 10.5px; padding: 0 2px; letter-spacing: -.01em; }
  .page { gap: 16px; }
  .grille, .essentiel, .compteurs { gap: 14px; }
  .carte { border-radius: 22px; }
  .pied { padding-bottom: 104px; }
  .pied .ingeline { margin-left: 0; }
  .mesure { grid-template-columns: minmax(0, 1fr); }
  .cases a { pointer-events: none; font-size: 0; gap: 0; }
  .reglette { grid-template-columns: 58px minmax(0, 1fr) auto; gap: 10px; }
  .mesure .faits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 0; }
  .mesure .faits a:nth-child(odd) { padding-left: 0; border-left: 0; }
  .reglette { grid-template-columns: 78px minmax(0, 1fr) auto; }
  .bornes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .axes { grid-template-columns: minmax(0, 1fr); }
  .axe { border-right: 0 !important; border-bottom: 1px solid var(--trait) !important; } .axe:last-child { border-bottom: 0 !important; }
  .gantt { --col: 116px; min-width: 940px; }
  .gantt-nom span { display: none; }
  .gantt-ligne { height: 52px; } .gantt-barre { top: 9px; } .gantt-jalon { top: 12px; }
  .apercu.pdf { display: none; }
  .seance-ligne .sec { display: none; }
  .action { grid-template-columns: auto minmax(0, 1fr) auto; }
  .action > .bt-icone { display: none; }
  .action form { grid-column: 2 / -1; grid-row: 2; justify-self: start; }
  .action .num { grid-row: 1; }
  .doc { grid-template-columns: minmax(0, 1fr) auto; }
  .doc .etat { grid-column: 1; grid-row: 2; justify-self: start; margin-left: 56px; margin-top: -4px; }
  .doc .bt-icone { grid-column: 2; grid-row: 1; }
  .doc-qui { display: none; }
  .seance-ligne { grid-template-columns: auto minmax(0, 1fr) auto; }
  .seance-ligne .etat { grid-column: 2; grid-row: 2; justify-self: start; margin-top: -6px; }
  .seance-ligne > .ic { grid-row: 1 / 3; grid-column: 3; }
  .etudes thead { display: none; }
  .etudes tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 13px 0; border-bottom: 1px solid var(--trait); }
  .etudes tr:last-child { border-bottom: 0; }
  .etudes td { padding: 0 !important; border: 0; text-align: left !important; }
  .etudes td.t-nom { grid-column: 1 / -1; }
  .etudes td.t-dem, .etudes td.t-docs { display: none; }
  .fiche-tete { grid-template-columns: auto minmax(0, 1fr); }
  .fiche-tete > :last-child:not(:nth-child(2)) { grid-column: 1 / -1; justify-self: start; }
  .rang { grid-template-columns: minmax(0, 1fr); }
  .acces { grid-template-columns: minmax(0, 1fr) auto; gap: 10px 14px; }
  .acces .logos { grid-column: 1 / -1; }
  .acces form { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr); }
  .question > .etiquettes, .question > .repondre, .question > .reponse { margin-left: 0; }
  .porte { grid-template-columns: minmax(0, 1fr); }
  .porte-image { min-height: 230px; padding-bottom: 28px; }
  .porte-boite { padding: 32px 20px 40px; align-content: start; }
  .objets { grid-template-columns: minmax(0, 1fr); }
  .palette { margin-top: 12px; }
  .lacher div { padding: 40px 30px; }
  .etapes li { font-size: 11.5px; }
}
@media (max-width: 420px) {
  .compteurs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .compteur { padding: 14px; }
  .compteur b { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
@media print {
  .barre, .dock, .pied, .bt, .bt-icone, form { display: none !important; }
  body { background: #fff; }
}