:root{
  --canvas:oklch(97% 0.012 85);
  --canvas-2:oklch(95.5% 0.02 60);
  --surface:oklch(100% 0 0);
  --surface-2:oklch(97.5% 0.006 80);
  --fg:oklch(18% 0.01 60);
  --fg-2:oklch(45% 0.01 60);
  --fg-3:oklch(60% 0.01 60);
  --line:oklch(89% 0.008 80);
  --sun:oklch(91% 0.19 100);      --sun-deep:oklch(84% 0.19 98);   --on-sun:oklch(18% 0.02 100);
  --mand:oklch(73% 0.17 48);      --mand-deep:oklch(66% 0.18 45);  --on-mand:oklch(16% 0.03 48);
  --ink:oklch(17% 0.01 60);       --ink-2:oklch(24% 0.012 60);     --on-ink:oklch(97% 0.005 80);
  --ok:oklch(60% 0.15 150); --ok-soft:oklch(93% 0.06 150);
  --no:oklch(58% 0.19 25);  --no-soft:oklch(93% 0.06 25);
  --info:oklch(62% 0.13 240); --info-soft:oklch(93% 0.04 240);
  /* Versions encre : le vert, le rouge et le bleu vifs posés sur leur fond doux
     ne donnaient que 3 pour 1, sous le seuil de 4,5 exigé pour du texte de
     14 px. Ces trois-là servent uniquement de couleur de texte. */
  --ok-ink:oklch(40% 0.12 150); --no-ink:oklch(42% 0.17 25); --info-ink:oklch(40% 0.14 240);
  --shadow:0 1px 2px oklch(20% 0.02 60/.05),0 14px 36px oklch(20% 0.03 60/.08);
  --r:22px; --rc:14px;
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:light;
}
:root[data-theme="dark"]{
  --canvas:oklch(13% 0.008 60); --canvas-2:oklch(16% 0.012 50);
  --surface:oklch(19% 0.008 60); --surface-2:oklch(23% 0.008 60);
  --fg:oklch(95% 0.005 80); --fg-2:oklch(72% 0.008 80); --fg-3:oklch(56% 0.008 80);
  --line:oklch(28% 0.01 60);
  --sun:oklch(86% 0.18 100); --sun-deep:oklch(78% 0.18 98);
  --mand:oklch(70% 0.17 48); --mand-deep:oklch(62% 0.18 45);
  --ink:oklch(9% 0.01 60); --ink-2:oklch(15% 0.012 60);
  --ok-soft:oklch(26% 0.06 150); --no-soft:oklch(26% 0.06 25); --info-soft:oklch(26% 0.05 240);
  --ok-ink:oklch(84% 0.14 150); --no-ink:oklch(80% 0.13 25); --info-ink:oklch(82% 0.10 240);
  --shadow:0 1px 2px oklch(0% 0 0/.5),0 14px 36px oklch(0% 0 0/.5);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0;color:var(--fg);font:17px/1.5 Manrope,"Segoe UI",system-ui,sans-serif;-webkit-font-smoothing:antialiased;
  background:radial-gradient(1200px 700px at 12% -10%,var(--canvas-2),transparent 60%),radial-gradient(900px 600px at 100% 0%,color-mix(in oklch,var(--sun) 22%,var(--canvas)),transparent 55%),var(--canvas);
  background-attachment:fixed;transition:background .2s var(--ease),color .2s var(--ease)}
h1,h2,h3{margin:0;font-weight:500;letter-spacing:-0.03em;line-height:1.08;text-wrap:balance}
h1{font-size:44px}h2{font-size:26px}h3{font-size:19px;letter-spacing:-0.015em;font-weight:600}
p{margin:0;text-wrap:pretty}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--fg);outline-offset:2px;border-radius:8px}
.small{font-size:15px;color:var(--fg-2)}.tiny{font-size:14px;color:var(--fg-3)}
.num{font-variant-numeric:tabular-nums}

/* Textures */
.hatch{background-image:repeating-linear-gradient(135deg,currentColor 0 1.5px,transparent 1.5px 9px);opacity:.9}
.stripes{background-image:repeating-linear-gradient(90deg,currentColor 0 3px,transparent 3px 8px)}
.dots{background-image:radial-gradient(currentColor 1.4px,transparent 1.6px);background-size:10px 10px}

/* Coque */
.app{display:grid;grid-template-columns:96px 1fr;min-height:100vh}
.app[data-screen="connexion"]{grid-template-columns:1fr}
.app[data-screen="connexion"] .rail,.app[data-screen="connexion"] .top{display:none}
.app[data-screen="connexion"] .content{padding:0;max-width:none}
.rail{position:sticky;top:0;height:100vh;padding:22px 12px;display:flex;flex-direction:column;align-items:center;gap:6px}
.mark{width:48px;height:48px;border-radius:16px;background:var(--ink);color:var(--on-ink);display:grid;place-items:center;margin-bottom:18px;font-weight:700;font-size:22px;letter-spacing:-0.05em;flex:none}
.nav{width:72px;min-height:64px;border:0;border-radius:18px;background:transparent;cursor:pointer;display:grid;place-items:center;gap:3px;padding:8px 4px;color:var(--fg-2);font-size:12px;font-weight:600;letter-spacing:-0.01em;transition:background .2s var(--ease),color .2s var(--ease)}
.nav svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nav:hover{background:var(--surface);color:var(--fg)}
.nav[aria-current="page"]{background:var(--surface);color:var(--fg);box-shadow:var(--shadow)}
.rail .me{margin-top:auto;display:grid;gap:12px;place-items:center}
.avatar{width:44px;height:44px;border-radius:50%;background:var(--surface);border:1px solid var(--line);display:grid;place-items:center;font-weight:700;font-size:14px;color:var(--fg-2)}
main{min-width:0}
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:26px 32px 8px;flex-wrap:wrap}
.top .right{display:flex;gap:10px;align-items:center;flex-wrap:wrap;min-width:0}
.chip{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 16px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-size:15px;font-weight:500;color:var(--fg-2);cursor:pointer;white-space:nowrap}
.chip b{color:var(--fg);font-weight:600}
.chip svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8}
/* Sur téléphone, le nom de l'organisme est plus long que l'écran. Une pastille
   qui refuse de revenir à la ligne poussait toute la page en défilement
   horizontal, donc elle se replie ici au lieu de déborder. Cette requête doit
   rester APRÈS la règle .chip ci-dessus, sinon nowrap l'emporte. */
@media (max-width:560px){
  .top{padding:20px 18px 8px}
  .top .right{width:100%}
  .chip{white-space:normal;text-align:left;min-height:44px;padding:9px 14px;max-width:100%}
}
.icon-btn{width:46px;height:46px;border-radius:999px;background:var(--surface);border:1px solid var(--line);display:grid;place-items:center;cursor:pointer;flex:none}
.icon-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round}
.icon-btn.sun{background:var(--sun);border-color:transparent;color:var(--on-sun)}
.seg{display:inline-flex;padding:4px;gap:2px;border:1px solid var(--line);border-radius:999px;background:var(--surface)}
.seg button{min-height:38px;padding:0 12px;border:0;border-radius:999px;background:transparent;cursor:pointer;font-size:14px;font-weight:600;color:var(--fg-2);display:inline-flex;align-items:center;gap:6px}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--on-ink)}
.seg svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}
.content{padding:16px 32px 48px;max-width:1360px}
.screen{display:none;animation:fade .28s var(--ease)}.screen.on{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Cartes */
.card{border-radius:var(--r);background:var(--surface);position:relative;overflow:hidden;box-shadow:var(--shadow)}
.card.sun{background:var(--sun);color:var(--on-sun)}
.card.mand{background:var(--mand);color:var(--on-mand)}
.card.ink{background:var(--ink);color:var(--on-ink)}
.card.soft{background:color-mix(in oklch,var(--surface) 70%,var(--canvas))}
.card .head{display:flex;justify-content:space-between;align-items:center;padding:20px 22px 0;gap:12px}
.card .head h3{font-size:18px}
.corner{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;border:0;cursor:pointer;background:color-mix(in oklch,currentColor 12%,transparent);color:inherit;flex:none}
.corner svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.card.ink .corner{background:var(--ink-2)}
.card.ink .small{color:var(--on-ink);opacity:.7}
.pad{padding:18px 22px 22px}
.big{font-size:56px;font-weight:600;letter-spacing:-0.04em;line-height:.95}
.lbl{font-size:14px;font-weight:600;opacity:.75;text-transform:uppercase;letter-spacing:.06em}
.stat-row{display:flex;gap:26px;align-items:end;flex-wrap:wrap}
.hero{display:grid;grid-template-columns:1.1fr 1.1fr 1fr;gap:16px;margin-bottom:18px}
/* Zones nommées : un enfant avec grid-row explicite serait placé AVANT les
   auto-placés et volerait la première colonne. Les aires évitent ce piège. */
.hero.accueil{grid-template-areas:"next quo doc" "vote vote doc"}
.hero.accueil .c-next{grid-area:next}
.hero.accueil .c-quo{grid-area:quo}
.hero.accueil .c-doc{grid-area:doc}
.hero.accueil .c-vote{grid-area:vote}
/* Une première carte plus large. En classe et non en style en ligne : un style
   en ligne gagne contre les requêtes média ci-dessous, et les cartes restaient
   à trois colonnes sur écran étroit, ce qui coupait le texte. */
.hero.lead3{grid-template-columns:1.4fr 1fr 1fr}
@media (max-width:1180px){
  .hero{grid-template-columns:1fr 1fr}
  .hero.lead3{grid-template-columns:1fr 1fr}
  .hero.accueil{grid-template-areas:"next quo" "doc doc" "vote vote"}
}
@media (max-width:820px){
  .hero{grid-template-columns:1fr}
  .hero.lead3{grid-template-columns:1fr}
  .hero.accueil{grid-template-areas:"next" "quo" "doc" "vote"}
}

/* Boutons */
.btn{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 18px;border-radius:999px;border:1px solid var(--line);background:var(--surface);cursor:pointer;font-weight:600;font-size:15px;white-space:nowrap;transition:transform .12s var(--ease),filter .2s var(--ease)}
.btn:hover{filter:brightness(.97)}.btn:active{transform:translateY(1px)}
.btn.ink{background:var(--ink);color:var(--on-ink);border-color:transparent}
.btn.sun{background:var(--sun);color:var(--on-sun);border-color:transparent}
.btn.mand{background:var(--mand);color:var(--on-mand);border-color:transparent}
.btn.ghost{background:transparent;border-color:color-mix(in oklch,currentColor 25%,transparent);color:inherit}
.btn.big{min-height:54px;font-size:17px;padding:0 22px}
.btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.btns{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap;position:relative;z-index:1}

/* Bloc jaune : prochaine réunion */
.c-next .art{position:absolute;right:-10px;bottom:-30px;width:46%;height:72%;pointer-events:none}
.c-next .art .h{position:absolute;inset:0 40% 0 0;border-radius:20px 20px 0 0;color:var(--on-sun)}
.c-next .art .g{position:absolute;right:18px;bottom:10px;width:34%;height:88%;border-radius:18px 18px 0 0;background:linear-gradient(180deg,var(--sun) 0%,var(--ink) 55%)}
.c-next .when{font-size:22px;font-weight:600;letter-spacing:-0.02em;margin-top:6px}
.c-next .meta{display:flex;gap:16px;flex-wrap:wrap;font-size:15px;opacity:.8;margin-top:4px}

/* Bloc orange : présences et quorum.
   Anneau et pastille dans le FLUX, pas en absolu : en absolu la pastille
   passait par-dessus « 12 présences confirmées » et les boutons dépassaient
   du bas de la carte. */
.c-quo .quo-grid{display:grid;grid-template-columns:1fr auto;gap:20px;padding:16px 22px 22px;align-items:start;position:relative;z-index:1}
@media (max-width:520px){.c-quo .quo-grid{grid-template-columns:1fr}}
.c-quo .legend{display:grid;gap:10px;font-size:15px;font-weight:500}
.c-quo .legend span::before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:10px;background:var(--on-mand)}
.c-quo .legend .away::before{background:color-mix(in oklch,var(--on-mand) 45%,transparent)}
.c-quo .legend .none::before{background:transparent;box-shadow:inset 0 0 0 2px var(--on-mand)}
.c-quo .ring-wrap{display:grid;justify-items:center;gap:12px}
.c-quo .ring{width:150px;height:150px;position:relative}
.c-quo .ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.c-quo .ring circle{fill:none;stroke-width:16;stroke-linecap:round}
.c-quo .ring .t{stroke:color-mix(in oklch,var(--on-mand) 18%,transparent)}
.c-quo .ring .v{stroke:var(--on-mand);stroke-dasharray:396;stroke-dashoffset:calc(396 - 396*.8)}
.c-quo .ring .lbl2{position:absolute;inset:0;display:grid;place-content:center;text-align:center;font-weight:700;font-size:26px;letter-spacing:-0.03em;line-height:1}
.c-quo .ring .lbl2 small{display:block;font-size:14px;font-weight:600;opacity:.8;letter-spacing:.04em;text-transform:uppercase;margin-top:4px}
.c-quo .badge{background:var(--sun);color:var(--on-sun);border-radius:999px;padding:8px 16px;font-weight:700;font-size:15px;box-shadow:var(--shadow);white-space:nowrap}
.c-quo .art{position:absolute;right:-20px;bottom:-40px;width:52%;height:60%;color:var(--on-mand);opacity:.28;border-radius:50% 50% 0 0;z-index:0}

/* Bloc noir : document à lire */
.c-doc{display:flex;flex-direction:column;min-height:420px}
.c-doc .pager{display:flex;gap:6px;align-items:center}
.c-doc .pager i{width:22px;height:3px;border-radius:2px;background:var(--on-ink);opacity:.35}
.c-doc .pager i.on{opacity:1}
.c-doc .cover{margin:14px 22px 0;flex:1;border-radius:18px;background:linear-gradient(180deg,var(--ink-2),oklch(30% 0.02 60));position:relative;overflow:hidden;display:grid;place-items:center;min-height:210px;cursor:pointer}
.c-doc .cover .sheet{width:62%;aspect-ratio:8.5/11;background:oklch(97% 0.004 80);border-radius:6px;box-shadow:0 30px 50px oklch(0% 0 0/.5);padding:12% 10%;color:oklch(20% 0 0);transform:rotate(-3deg) translateY(6%);transition:transform .4s var(--ease)}
.c-doc:hover .cover .sheet{transform:rotate(-1.5deg) translateY(3%)}
/* La vignette de document est décorative et étroite. Sans coupure de mot,
   « Priorités d'investissement » dépassait sa boîte et se faisait rogner. */
.c-doc .cover .sheet b{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:oklch(45% 0 0);margin-bottom:8px;overflow-wrap:anywhere}
.c-doc .cover .sheet h4{margin:0 0 10px;font-size:15px;line-height:1.2;font-weight:700;letter-spacing:-0.01em;overflow-wrap:anywhere}
.c-doc .cover .sheet i{display:block;height:5px;border-radius:3px;background:oklch(85% 0 0);margin:6px 0}
.c-doc .cover .sheet mark{display:block;height:5px;border-radius:3px;background:var(--sun);margin:6px 0;width:70%}
.c-doc .cover .star{position:absolute;right:14px;top:14px;width:38px;height:38px;border-radius:50%;background:oklch(30% 0.02 60);display:grid;place-items:center;color:var(--on-ink)}
.c-doc .cover .star svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
.c-doc .foot{padding:18px 22px 22px;display:flex;justify-content:space-between;align-items:end;gap:12px}
.c-doc .foot h2{font-size:24px;letter-spacing:-0.025em}
.c-doc .tag{display:inline-flex;align-items:center;gap:8px;background:var(--mand);color:var(--on-mand);border-radius:999px;padding:6px 12px;font-size:14px;font-weight:700;margin-bottom:10px}
.c-doc .tag svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2}
.c-doc .go{width:56px;height:56px;border-radius:18px;background:var(--sun);color:var(--on-sun);display:grid;place-items:center;border:0;cursor:pointer;flex:none}
.c-doc .go svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round}

/* Bloc clair : votes et sondages */
.c-vote .lane{display:flex;align-items:center;gap:14px;margin-top:14px;flex-wrap:wrap}
.c-vote .lane .dash{flex:1;min-width:40px;border-top:2px dashed var(--fg-3);opacity:.6}
.c-vote .lane .step{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-size:14px;font-weight:600}
.c-vote .lane .step.mand{background:var(--mand);color:var(--on-mand);border-color:transparent}
.c-vote .lane .step.sun{background:var(--sun);color:var(--on-sun);border-color:transparent}
.c-vote .stack{display:flex;align-items:center;gap:8px;margin-top:16px;flex-wrap:wrap}
.c-vote .stack .tile{width:52px;height:52px;border-radius:14px;background:var(--surface);border:1px solid var(--line);display:grid;place-items:center;font-size:14px;font-weight:700;flex:none}
.c-vote .stack .tile.ink{background:var(--ink);color:var(--on-ink);border-color:transparent}

/* Barre de filtres et tableau */
.filters{display:flex;gap:10px;align-items:center;margin:8px 0 12px;flex-wrap:wrap}
.search{flex:1;min-width:220px;display:flex;align-items:center;gap:10px;min-height:48px;padding:0 16px;border-radius:999px;background:var(--surface);border:1px solid var(--line);color:var(--fg-3)}
.search input{border:0;background:transparent;font:inherit;color:var(--fg);flex:1;min-width:0;outline:none}
.search svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;flex:none}
.table{border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow);overflow:hidden}
.tbl{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:14px;font-weight:600;color:var(--fg-3);padding:18px 18px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:14px 18px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:0}
tbody tr:hover td{background:var(--surface-2)}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums}
.thumb{width:52px;height:52px;border-radius:14px;background:var(--surface-2);border:1px solid var(--line);display:grid;place-items:center;font-size:12px;font-weight:700;letter-spacing:.02em;color:var(--fg-2);flex:none}
.thumb.pdf{color:var(--no)}.thumb.xls{color:var(--ok)}.thumb.ppt{color:var(--mand-deep)}.thumb.docx{color:var(--info)}
.thumb.date{font-size:18px;letter-spacing:-0.02em;background:var(--sun);color:var(--on-sun);border-color:transparent}
.thumb.dark{background:var(--ink);color:var(--on-ink);border-color:transparent}
.cell{display:flex;align-items:center;gap:14px}
.cell b{font-weight:600;display:block}
.pill{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;font-size:14px;font-weight:700;white-space:nowrap}
.pill svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round}
.pill.mand{background:var(--mand);color:var(--on-mand)}.pill.sun{background:var(--sun);color:var(--on-sun)}.pill.info{background:var(--info-soft);color:var(--info-ink)}.pill.ok{background:var(--ok-soft);color:var(--ok-ink)}.pill.no{background:var(--no-soft);color:var(--no-ink)}.pill.ink{background:var(--ink);color:var(--on-ink)}.pill.line{border:1px solid var(--line);color:var(--fg-2)}
.more{width:44px;height:44px;border-radius:14px;border:0;background:transparent;cursor:pointer;color:var(--fg-3);font-size:20px;line-height:1}
.more:hover{background:var(--surface-2)}

/* Écran Réunion */
.two{display:grid;grid-template-columns:1.5fr 1fr;gap:16px}
.two.lead{grid-template-columns:1.2fr 1fr}
@media (max-width:1100px){.two,.two.lead{grid-template-columns:1fr}}
.agenda{margin:0;padding:6px 0 0;list-style:none}
.agenda li{display:grid;grid-template-columns:52px 1fr auto;gap:14px;align-items:start;padding:16px 22px;border-top:1px solid var(--line);cursor:pointer}
.agenda li:hover{background:var(--surface-2)}
.agenda li.now{background:var(--sun);color:var(--on-sun)}
.agenda li.now:hover{background:var(--sun)}
.agenda li.now .small{color:inherit;opacity:.75}
.agenda .n{width:40px;height:40px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line);display:grid;place-items:center;font-weight:700;font-size:16px}
.agenda li.now .n{background:var(--ink);color:var(--on-ink);border-color:transparent}
.agenda li.done .n{color:var(--fg-3)}
.agenda .t b{font-weight:600;display:block;font-size:17px}
.files{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.file{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 8px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-size:14px;font-weight:600;color:var(--fg)}
.file i{width:10px;height:10px;border-radius:3px;background:var(--no);flex:none}.file i.xls{background:var(--ok)}.file i.ppt{background:var(--mand)}
.members{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;padding:16px 22px 22px}
.member{display:flex;align-items:center;gap:10px;font-size:15px;line-height:1.25}
.member .avatar{width:36px;height:36px;font-size:12px;flex:none}
.member .avatar.here{background:var(--ok-soft);color:var(--ok);border-color:transparent}
.member .avatar.away{background:var(--no-soft);color:var(--no);border-color:transparent}
.audio{display:flex;align-items:center;gap:14px;padding:18px 22px 0}
.wave{flex:1;height:36px;color:var(--on-ink);opacity:.8;border-radius:8px}

/* Écran Document */
.reader{display:grid;grid-template-columns:160px 1fr 320px;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);background:var(--surface);min-height:720px}
@media (max-width:1100px){.reader{grid-template-columns:1fr}.thumbs,.side{display:none}}
.thumbs{background:var(--surface-2);padding:16px;display:flex;flex-direction:column;gap:12px;overflow:auto}
.pg{aspect-ratio:8.5/11;background:var(--surface);border-radius:10px;border:1px solid var(--line);display:grid;place-items:end center;padding:8px;font-size:13px;font-weight:700;color:var(--fg-3);cursor:pointer;position:relative}
.pg.on{outline:3px solid var(--sun-deep);outline-offset:1px}
.pg i{position:absolute;left:12px;right:12px;height:4px;border-radius:2px;background:var(--line)}
.pg i:nth-child(1){top:12px}.pg i:nth-child(2){top:22px;right:40%}.pg i:nth-child(3){top:32px;right:55%}
.page-wrap{padding:28px;overflow:auto;display:grid;place-items:start center;background:color-mix(in oklch,var(--surface-2) 60%,var(--canvas))}
.page{width:100%;max-width:640px;background:white;color:oklch(20% 0 0);padding:56px 60px;border-radius:10px;box-shadow:var(--shadow);font-size:15.5px;line-height:1.6;position:relative}
:root[data-theme="dark"] .page{background:oklch(96% 0.004 80)}
.page h4{margin:0 0 4px;font-size:20px;font-weight:700;letter-spacing:-0.01em}
.page .sub{color:oklch(48% 0 0);font-size:13.5px;margin-bottom:22px}
.page p{margin:0 0 14px}
.page mark{background:var(--sun);color:inherit;padding:1px 3px;border-radius:4px}
.page mark.other{background:oklch(90% 0.05 48)}
.page .pin{position:absolute;right:-16px;width:32px;height:32px;border-radius:50%;background:var(--ink);color:var(--on-ink);display:grid;place-items:center;font-size:13px;font-weight:700;box-shadow:var(--shadow);cursor:pointer}
.page .pin.other{background:var(--mand);color:var(--on-mand)}
.page table{width:100%;border-collapse:collapse;font-size:14px;margin:6px 0 16px}
.page td,.page th{border-bottom:1px solid oklch(88% 0 0);padding:6px 4px;text-align:left}
.page th{font-weight:700}.page td.n,.page th.n{text-align:right;font-variant-numeric:tabular-nums}
.side{display:flex;flex-direction:column;border-left:1px solid var(--line)}
.side header{padding:18px 20px 12px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.tools{display:flex;gap:8px;padding:0 20px 14px;flex-wrap:wrap;border-bottom:1px solid var(--line)}
.tool{min-height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);cursor:pointer;font-size:14px;font-weight:600;display:inline-flex;align-items:center;gap:8px}
.tool.on{background:var(--ink);color:var(--on-ink);border-color:transparent}
.tool .sw{width:12px;height:12px;border-radius:4px;background:var(--sun)}
.notes{padding:14px 20px;display:flex;flex-direction:column;gap:10px;overflow:auto}
.note{border-radius:16px;padding:14px 16px;font-size:15px;background:var(--surface-2)}
.note.mine{background:var(--sun);color:var(--on-sun)}
.note.other{background:color-mix(in oklch,var(--mand) 35%,var(--surface))}
.note .who{display:flex;justify-content:space-between;gap:8px;font-size:14px;font-weight:700;opacity:.75;margin-bottom:6px;flex-wrap:wrap}
.reader-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.reader-bar .title{display:flex;align-items:center;gap:14px;min-width:0}

/* Écran Vote */
.ballot{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:0 22px 22px}
@media (max-width:700px){.ballot{grid-template-columns:1fr}}
.ballot .btn{min-height:72px;font-size:20px;justify-content:center;border-radius:20px}
.ballot .btn.on{outline:3px solid var(--fg);outline-offset:2px}
.bars{display:grid;gap:14px;padding:6px 22px 22px}
.bar{display:grid;grid-template-columns:120px 1fr 56px;align-items:center;gap:14px;font-size:15px;font-weight:600}
.bar .track{height:18px;border-radius:9px;background:var(--surface-2);overflow:hidden}
.bar .fill{height:100%;border-radius:9px}
.bar.pour .fill{background:var(--ok)}.bar.contre .fill{background:var(--no)}.bar.abst .fill{background:var(--fg-3)}.bar.rest .fill{background:var(--line)}
.bar .v{text-align:right}
.hist{padding:6px 0 10px}
.hist .row{display:grid;grid-template-columns:80px 1fr auto;gap:14px;align-items:center;padding:12px 22px;border-top:1px solid var(--line)}
.hist .when{font-size:14px;font-weight:700;color:var(--fg-3);font-variant-numeric:tabular-nums}
.quo-big{display:grid;grid-template-columns:200px 1fr;gap:20px;align-items:center;padding:6px 22px 22px}
@media (max-width:520px){.quo-big{grid-template-columns:1fr}}
.ring2{width:190px;height:190px;position:relative}
.ring2 svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring2 circle{fill:none;stroke-width:18;stroke-linecap:round}
.ring2 .t{stroke:color-mix(in oklch,currentColor 15%,transparent)}
.ring2 .v{stroke:currentColor;stroke-dasharray:502;stroke-dashoffset:calc(502 - 502*.8)}
.ring2 .m{stroke:var(--ink);stroke-dasharray:4 498;stroke-dashoffset:calc(502 - 502*.533);stroke-width:28}
.ring2 .lbl2{position:absolute;inset:0;display:grid;place-content:center;text-align:center;font-weight:700;font-size:40px;letter-spacing:-0.04em;line-height:1}
.ring2 .lbl2 small{display:block;font-size:14px;font-weight:600;opacity:.8;text-transform:uppercase;letter-spacing:.05em;margin-top:6px}

/* Écran Comités */
.seatbar{display:flex;height:28px;border-radius:14px;overflow:hidden;margin-top:14px}
.seatbar .u{background:var(--sun);width:80%}
.seatbar .f{flex:1;background:var(--ink-2)}
.stepper{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:var(--surface)}
.stepper button{width:44px;height:44px;border:0;background:transparent;cursor:pointer;font-size:18px}
.stepper button:hover{background:var(--surface-2)}
.stepper span{min-width:40px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
.comites-hero{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:16px;margin-bottom:18px}
@media (max-width:1100px){.comites-hero{grid-template-columns:1fr}}

/* Écran Connexion */
.login{min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr}
@media (max-width:1000px){.login{grid-template-columns:1fr}}
.login .brand{margin:24px;border-radius:32px;background:var(--ink);color:var(--on-ink);padding:56px;display:flex;flex-direction:column;justify-content:space-between;gap:40px;position:relative;overflow:hidden}
.login .brand h1{font-size:60px;letter-spacing:-0.04em;max-width:13ch;line-height:1.02;position:relative;z-index:1}
.login .brand h1 em{font-style:normal;color:var(--sun)}
.login .brand .foot{display:flex;gap:12px;flex-wrap:wrap;position:relative;z-index:1}
.login .brand .foot span{padding:8px 14px;border-radius:999px;background:var(--ink-2);font-size:14px;font-weight:600}
.login .brand .blob{position:absolute;right:-60px;bottom:-80px;width:420px;height:420px;border-radius:50%;background:var(--mand);color:var(--ink)}
.login .brand .blob2{position:absolute;right:120px;bottom:60px;width:220px;height:220px;border-radius:40px;background:var(--sun);color:var(--on-sun);transform:rotate(12deg)}
.login .form{display:grid;place-items:center;padding:48px}
.login .card2{width:100%;max-width:440px;display:grid;gap:18px}
.login h2{font-size:34px}
.login .btn{justify-content:center;min-height:56px;font-size:18px;white-space:normal}
.login .or{display:flex;align-items:center;gap:14px;color:var(--fg-3);font-size:14px;font-weight:600}
.login .or::before,.login .or::after{content:"";flex:1;height:1px;background:var(--line)}
.field{display:grid;gap:6px}
.field label{font-size:15px;font-weight:600;color:var(--fg-2)}
.field input{min-height:54px;border-radius:999px;border:1px solid var(--line);background:var(--surface);padding:0 18px;font:inherit;color:inherit;width:100%}
.field input:focus{outline:3px solid var(--sun-deep);outline-offset:0}
.field textarea{border-radius:var(--rc);border:1px solid var(--line);background:var(--surface);padding:14px 16px;font:inherit;color:inherit;width:100%;resize:vertical;line-height:1.5}
.field textarea:focus{outline:3px solid var(--sun-deep);outline-offset:0}

/* Réglages */
.tweaks{position:fixed;right:20px;bottom:20px;z-index:50}
.tweaks details{background:var(--surface);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);width:320px}
.tweaks summary{list-style:none;cursor:pointer;padding:12px 18px;font-weight:700;min-height:46px;display:flex;align-items:center;justify-content:space-between}
.tweaks summary::-webkit-details-marker{display:none}
.tweaks .opt{padding:4px 18px 16px}
.tabs{display:flex;gap:6px;flex-wrap:wrap}
.tabs .btn{min-height:38px;font-size:14px;padding:0 12px}

/* Écran Recherche et archives */
.hits{display:grid;gap:12px}
.hit{border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow);padding:20px 22px;display:grid;grid-template-columns:52px 1fr auto;gap:16px;align-items:start;cursor:pointer}
.hit:hover{background:var(--surface-2)}
.hit .q{font-size:15.5px;line-height:1.55;color:var(--fg-2);margin-top:8px}
.hit .q mark{background:var(--sun);color:var(--on-sun);padding:1px 4px;border-radius:5px;font-weight:600}
.hit .meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.hit .where{text-align:right;font-size:14px;color:var(--fg-3)}
/* La colonne de droite ne se comprime pas d'elle-même. Sous 900 px elle passe
   sous l'extrait au lieu d'élargir la page. Le seuil est à 900 et non à 700
   parce qu'avec le texte agrandi au maximum, trois colonnes ne tiennent plus
   dès 760 px. */
@media (max-width:900px){
  .hit{grid-template-columns:52px minmax(0,1fr)}
  .hit .where{grid-column:2;text-align:left;margin-top:12px}
}

/* Écran Sondage */
.q-item{padding:20px 22px;border-top:1px solid var(--line)}
.q-item:first-of-type{border-top:0}
.q-item b{display:block;font-size:17px;font-weight:600;margin-bottom:14px}
.opts{display:grid;gap:10px}
.opt-row{display:flex;align-items:center;gap:12px;min-height:50px;padding:0 16px;border-radius:var(--rc);border:1px solid var(--line);background:var(--surface);cursor:pointer;font-size:15.5px;font-weight:500}
.opt-row:hover{background:var(--surface-2)}
.opt-row.on{background:var(--sun);color:var(--on-sun);border-color:transparent;font-weight:600}
.opt-row .dot{width:20px;height:20px;border-radius:50%;border:2px solid var(--fg-3);flex:none}
.opt-row.on .dot{border-color:var(--on-sun);background:var(--on-sun);box-shadow:inset 0 0 0 4px var(--sun)}
.scale{display:flex;gap:8px;flex-wrap:wrap}
.scale button{width:52px;height:52px;border-radius:var(--rc);border:1px solid var(--line);background:var(--surface);font-weight:700;font-size:17px;cursor:pointer}
.scale button.on{background:var(--mand);color:var(--on-mand);border-color:transparent}
.res-row{padding:14px 22px;border-top:1px solid var(--line)}
.res-row:first-of-type{border-top:0}
.res-head{display:flex;justify-content:space-between;gap:12px;font-size:15px;font-weight:600;margin-bottom:8px}
.qbar{height:14px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.qbar span{display:block;height:100%;border-radius:999px;background:var(--mand)}
.qbar.alt span{background:var(--sun)}
.qbar.calm span{background:var(--info)}

/* Écran Procès-verbal */
.pv{display:grid;grid-template-columns:1fr 340px;gap:16px;align-items:start}
@media (max-width:1100px){.pv{grid-template-columns:1fr}}
.pv-wrap{display:grid;place-items:start center;padding:26px;border-radius:var(--r);background:var(--canvas-2);box-shadow:var(--shadow)}
:root[data-theme="dark"] .pv-wrap{background:oklch(24% 0.01 60)}
.feeds{display:grid;gap:12px}
.feed{padding:16px 18px;border-radius:var(--rc);background:var(--surface-2);border:1px solid var(--line)}
.feed .lbl{margin-bottom:6px}
.feed b{font-size:19px;font-weight:700}
.res-line{display:flex;align-items:center;gap:10px;font-size:15px;margin-top:8px}
.res-line i{width:9px;height:9px;border-radius:50%;background:var(--ok);flex:none}
.res-line i.no{background:var(--no)}.res-line i.ab{background:var(--fg-3)}

/* Écran Centre documentaire */
.docs-split{display:grid;grid-template-columns:300px 1fr;gap:16px;align-items:start}
@media (max-width:1000px){.docs-split{grid-template-columns:1fr}}
.tree{border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow);padding:12px}
.tree button{display:flex;align-items:center;gap:10px;width:100%;min-height:46px;padding:0 12px;border:0;border-radius:var(--rc);background:transparent;cursor:pointer;font-size:15.5px;font-weight:500;text-align:left}
.tree button:hover{background:var(--surface-2)}
.tree button.on{background:var(--ink);color:var(--on-ink);font-weight:600}
.tree button .grip{color:var(--fg-3);font-size:15px;letter-spacing:-2px;flex:none;cursor:grab}
.tree button.on .grip{color:var(--on-ink);opacity:.6}
.tree button .cnt{margin-left:auto;font-size:14px;font-variant-numeric:tabular-nums;opacity:.6}
.tree .lvl2{padding-left:22px}
.tree svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.9;flex:none}

/* Écran Utilisateurs */
.vswitch{width:52px;height:30px;border-radius:999px;border:1px solid var(--line);background:var(--surface-2);position:relative;cursor:pointer;flex:none;transition:background .18s var(--ease)}
.vswitch::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:var(--surface);box-shadow:0 1px 3px oklch(20% 0 0/.25);transition:transform .18s var(--ease)}
.vswitch[aria-pressed="true"]{background:var(--ok);border-color:transparent}
.vswitch[aria-pressed="true"]::after{transform:translateX(22px)}
.transfer{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:center;padding:18px 22px 22px}
@media (max-width:800px){.transfer{grid-template-columns:1fr}}
.transfer .who{padding:14px 16px;border-radius:var(--rc);background:var(--ink-2);display:flex;align-items:center;gap:12px;opacity:1;margin:0;font-size:16px;font-weight:400}
.transfer .who .avatar{width:40px;height:40px;font-size:13px;flex:none}
.transfer .who small{display:block;opacity:.65;font-size:14px}
.arrow{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--sun);color:var(--on-sun)}
.arrow svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round}

/* Écran Dépôt et contrôle */
.drop{border-radius:var(--r);border:2px dashed color-mix(in oklch,var(--mand) 55%,var(--line));background:color-mix(in oklch,var(--mand) 8%,var(--surface));padding:34px;display:grid;place-items:center;gap:10px;text-align:center}
.drop .ic{width:60px;height:60px;border-radius:20px;background:var(--mand);color:var(--on-mand);display:grid;place-items:center}
.drop .ic svg{width:28px;height:28px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.conv{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--fg-2)}
.conv .ring{width:18px;height:18px;border-radius:50%;border:2.5px solid var(--line);border-top-color:var(--mand);flex:none}
.check{display:grid;grid-template-columns:1fr 380px;gap:16px;align-items:start}
@media (max-width:1100px){.check{grid-template-columns:1fr}}
.prev{border-radius:var(--r);background:var(--canvas-2);box-shadow:var(--shadow);padding:24px;display:grid;place-items:start center}
:root[data-theme="dark"] .prev{background:oklch(24% 0.01 60)}

/* Écran Conformité */
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;padding:18px 22px 22px;font-size:15.5px}
.kv dt{color:var(--fg-3);white-space:nowrap}
.kv dd{margin:0;font-weight:600}
.card.ink .kv dt{color:var(--on-ink);opacity:.6}
.steps{margin:0;padding:0;list-style:none}
.steps li{display:grid;grid-template-columns:34px 1fr;gap:14px;padding:16px 22px;border-top:1px solid var(--line);align-items:start}
.steps li:first-child{border-top:0}
.steps .num2{width:34px;height:34px;border-radius:11px;background:var(--surface-2);border:1px solid var(--line);display:grid;place-items:center;font-weight:700;font-size:15px}
.steps li.done .num2{background:var(--ok);color:var(--surface);border-color:transparent}
.steps b{display:block;font-weight:600;font-size:16.5px;margin-bottom:2px}

/* Annotations versionnées */
.ver{display:flex;align-items:center;gap:8px;padding:12px 16px;border-radius:var(--rc);background:var(--info-soft);color:var(--info-ink);font-size:14px;font-weight:600;line-height:1.4}
.ver svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;flex:none}

/* Taille du texte. Réponse directe à la plainte la plus citée chez Diligent :
   « Difficult to see small fonts. I wish I could zoom ». Les membres d'un
   conseil ont souvent entre 50 et 70 ans. Le réglage agrandit toute la zone de
   contenu, pas seulement un bloc, et se retient d'une session à l'autre. */
:root[data-size="grand"] .content{zoom:1.15}
:root[data-size="tres-grand"] .content{zoom:1.32}
#size-seg button{min-width:40px;justify-content:center}
#size-seg button:nth-child(1){font-size:13px}
#size-seg button:nth-child(2){font-size:15px}
#size-seg button:nth-child(3){font-size:18px}

/* Écran Cahier de réunion */
.book{display:grid;grid-template-columns:1fr 340px;gap:16px;align-items:start}
@media (max-width:1100px){.book{grid-template-columns:1fr}}
.toc{margin:0;padding:0;list-style:none}
.toc li{display:grid;grid-template-columns:44px 1fr auto;gap:14px;align-items:center;padding:14px 22px;border-top:1px solid var(--line)}
.toc li:first-child{border-top:0}
.toc li:hover{background:var(--surface-2)}
.toc .n3{width:44px;height:44px;border-radius:13px;background:var(--surface-2);border:1px solid var(--line);display:grid;place-items:center;font-weight:700;font-size:15px}
.toc b{display:block;font-weight:600;font-size:16.5px}
.toc .pgs{font-size:14px;color:var(--fg-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.spine{display:flex;gap:3px;padding:16px 22px 0}
.spine i{flex:1;height:34px;border-radius:5px;background:var(--surface-2);border:1px solid var(--line)}
.spine i.f{background:var(--sun);border-color:transparent}
.spine i.d{background:var(--info-soft);border-color:transparent}
.spine i.x{background:var(--mand);border-color:transparent}

/* Écran Mise en service */
.tl{margin:0;padding:0;list-style:none;position:relative}
.tl::before{content:"";position:absolute;left:53px;top:26px;bottom:26px;width:2px;background:var(--line)}
.tl li{display:grid;grid-template-columns:64px 1fr;gap:16px;padding:16px 22px;align-items:start;position:relative}
.tl .day{width:64px;text-align:center}
.tl .day b{display:grid;place-items:center;width:44px;height:44px;margin:0 auto;border-radius:14px;background:var(--ink);color:var(--on-ink);font-size:15px;font-weight:700;position:relative;z-index:1}
.tl li.hi .day b{background:var(--sun);color:var(--on-sun)}
.tl .day span{display:block;font-size:12.5px;color:var(--fg-3);margin-top:5px}
.tl h4{margin:0 0 4px;font-size:17px;font-weight:600}
.tl p{font-size:15px;color:var(--fg-2);line-height:1.5}

/* Téléphone. Ce bloc est volontairement le dernier de la feuille : plusieurs de
   ces règles annulent un white-space:nowrap défini plus haut, et à specificité
   égale c'est la dernière déclaration qui gagne. Le but est simple, aucune page
   ne doit défiler horizontalement et aucun texte ne doit être rogné. */
@media (max-width:700px){
  .content{padding:12px 18px 40px}
  .pill{white-space:normal;text-align:left}
  .page{padding:30px 24px;font-size:14.5px}
  .pv-wrap{padding:14px}
  .prev{padding:14px}
  .hit{padding:18px}
  h1{font-size:34px}
  /* L'agrandissement du texte est plafonné ici. À 1,32 sur un écran de 430 px,
     deux écrans partaient en défilement horizontal. La mise en page est déjà
     sur une colonne à cette largeur, donc un agrandissement plus doux suffit. */
  :root[data-size="grand"] .content{zoom:1.06}
  :root[data-size="tres-grand"] .content{zoom:1.14}
}