/* ═══════════════════════════════════════════════════════════════════════════
   SOCLE DES PAGES DU BOOK — polices, jetons, barre du haut, boutons, sections.

   POURQUOI IL EXISTE (11/09). Chaque page fabriquee portait sa propre copie de
   ce socle : trois copies pour trois pages, et j'etais sur le point d'en ecrire
   six de plus. Trois copies d'une meme regle, ce sont trois verites — la
   quatrieme divergence serait passee inapercue jusqu'a ce qu'une page n'ait
   plus tout a fait la meme barre que les autres.

   Il est desormais UNE source, assemblee par `scripts/construire-pro.py` devant
   la feuille propre a chaque page, avec le menu du compte extrait d'index.html.
   Une page n'ecrit donc plus que ce qu'elle a de particulier.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face{font-family:'Bricolage';src:url('/fonts/bricolage-800.woff2') format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:'Bricolage';src:url('/fonts/bricolage-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'PJS';src:url('/fonts/pjs-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'PJS';src:url('/fonts/pjs-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'PJS';src:url('/fonts/pjs-800.woff2') format('woff2');font-weight:800;font-display:swap}

:root{
  --lagoon:#0E8C99;--lagoonDeep:#075E66;--lagoonDark:#064E55;--soft:#D6F1F2;--tint:#EAF8F8;
  --ocean:#062534;--titre:#062534;--coral:#FF6F59;--coralSoft:#FFE2DC;--coralInk:#7a2418;
  --gold:#F4B740;--goldSoft:#FCEFCD;--goldInk:#7A5300;--tropic:#E9A93A;--tropicDeep:#A66A0C;--tropicSoft:#FCEFCD;
  --sand:#F8F4EC;--sandDeep:#F0E9DC;--shell:#FFF;--cloud:#FBFAF7;
  --ink:#1B2A33;--inkSoft:#3A4A54;--muted:#5A6A75;--faint:#9AA7B0;
  --line:#E6DFD3;--lineCool:#DDE7EA;
  --oceanDeep:#03161F;--oceanMid:#0B3A4D;
  --hibiscus:#E8407A;--azure:#1C6FB8;--azureDeep:#13548F;--flame:#E63A2B;--flameDeep:#C42A1E;
  --r:14px;--r-lg:22px;--r-xl:22px;
  --sh:0 1px 4px rgba(59,42,24,.06),0 3px 12px rgba(59,42,24,.07);
  --sh-hi:0 7px 22px rgba(59,42,24,.11),0 1px 3px rgba(59,42,24,.06);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--sand);color:var(--ink);
  background-image:
    radial-gradient(70rem 40rem at 88% -10%, rgba(14,140,153,.09), transparent 62%),
    radial-gradient(52rem 34rem at -8% 6%, rgba(244,183,64,.10), transparent 60%),
    linear-gradient(var(--sand) 0%, var(--cloud) 46%, var(--sand) 100%);
  background-attachment:fixed;background-repeat:no-repeat;
  font-family:'PJS',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif,
    'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji';
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility}
a{color:var(--lagoon);text-underline-offset:3px}
h1,h2,h3,.chif b{font-family:'Bricolage','PJS',system-ui,sans-serif;letter-spacing:-.022em;
  text-wrap:balance;margin:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--lagoon);outline-offset:2px;border-radius:14px}

/* ── barre du haut ───────────────────────────────────────────────────────── */
.top{position:sticky;top:0;z-index:20;background:rgba(251,250,247,.88);
  backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.wrap{max-width:1220px;margin:0 auto;padding:0 24px}
.top .wrap{display:flex;align-items:center;gap:16px;height:64px}
.marque{display:flex;align-items:baseline;gap:9px;text-decoration:none;color:var(--titre);
  font-family:'Bricolage',sans-serif;font-weight:800;font-size:17px;letter-spacing:-.02em}
.marque em{font-style:normal;font-family:'PJS',sans-serif;font-weight:600;font-size:13.5px;
  color:var(--muted);letter-spacing:0}
.tact{display:flex;align-items:center;gap:9px;margin-left:auto}
.btn{display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:14px;font-weight:700;
  padding:9px 15px;border-radius:14px;border:1.5px solid var(--line);background:var(--shell);
  color:var(--ink);cursor:pointer;text-decoration:none;transition:border-color .15s,color .15s,box-shadow .15s;
  white-space:nowrap}
.btn:hover{border-color:var(--lagoon);color:var(--lagoonDeep);box-shadow:var(--sh)}

/* ── chiffres du haut ────────────────────────────────────────────────────── */
.chifs{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(184px,1fr));margin:0 0 26px}
.chif{background:var(--shell);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:18px 20px;box-shadow:var(--sh)}
.chif span{display:block;font-size:12px;letter-spacing:.085em;text-transform:uppercase;
  font-weight:800;color:var(--faint)}
.chif b{display:block;margin-top:7px;font-size:28px;line-height:1.05;font-weight:800;
  color:var(--ocean);font-variant-numeric:tabular-nums}
.chif small{display:block;margin-top:4px;font-size:13px;color:var(--muted);font-weight:500}
.chif.attention{border-color:var(--gold);background:linear-gradient(180deg,var(--goldSoft) 0%,var(--shell) 62%)}
.chif.attention b{color:var(--goldInk)}

/* ── sections ────────────────────────────────────────────────────────────── */
.sec{background:var(--shell);border:1px solid var(--line);border-radius:var(--r-xl);
  box-shadow:var(--sh);padding:22px 24px;margin:0 0 16px}
.sec>h2{font-size:12px;letter-spacing:.09em;text-transform:uppercase;font-weight:800;
  color:var(--faint);margin:0 0 4px}
.sec-sub{margin:0 0 16px;font-size:13.5px;color:var(--muted)}
.sec.urgent{border-color:var(--gold);box-shadow:var(--sh-hi)}
.sec.urgent>h2{color:var(--goldInk)}

/* ── une reservation ─────────────────────────────────────────────────────── */
.rc{display:grid;grid-template-columns:1fr auto;gap:4px 18px;align-items:start;
  padding:15px 0;border-bottom:1px solid var(--lineCool)}
.rc:last-child{border-bottom:0;padding-bottom:2px}
.rc-t{font-size:15.5px;font-weight:700;line-height:1.35;min-width:0}
.rc-m{grid-column:1;font-size:13.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.rc-e{grid-column:2;grid-row:1;justify-self:end;font-size:12px;font-weight:800;padding:4px 11px;
  border-radius:999px;background:var(--sandDeep);color:var(--inkSoft);white-space:nowrap}
.rc-e.confirmed,.rc-e.paid{background:var(--tint);color:var(--lagoonDark)}
.rc-e.completed{background:var(--tropicSoft);color:var(--tropicDeep)}
.rc-e.cancelled,.rc-e.rejected,.rc-e.declined{background:var(--coralSoft);color:var(--coralInk)}
.rc-e.requested{background:var(--goldSoft);color:var(--goldInk)}
.rc-a{grid-column:1/-1;display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.ab{font:inherit;font-size:13.5px;font-weight:700;padding:8px 15px;border-radius:14px;cursor:pointer;
  border:1.5px solid var(--line);background:var(--shell);color:var(--ink);transition:.15s}
.ab:hover{border-color:var(--lagoon);color:var(--lagoonDeep)}
.ab.pri{border-color:var(--lagoon);background:var(--lagoon);color:#fff}
.ab.pri:hover{background:var(--lagoonDeep);border-color:var(--lagoonDeep);color:#fff}
.ab[disabled]{opacity:.55;cursor:progress}

/* ── finances ────────────────────────────────────────────────────────────── */
.mois{display:grid;gap:9px;margin:4px 0 0}
.mo{display:grid;grid-template-columns:78px 1fr auto;gap:12px;align-items:center;font-size:14px}
.mo-l{color:var(--muted);font-variant-numeric:tabular-nums}
.mo-b{height:9px;border-radius:999px;background:var(--sandDeep);overflow:hidden}
.mo-b i{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--lagoon),var(--lagoonDeep))}
.mo-v{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.note-reg{margin:16px 0 0;padding:12px 14px;border-radius:var(--r);background:var(--tint);
  border:1px solid var(--soft);font-size:13.5px;line-height:1.55;color:var(--lagoonDark)}

/* ── notes ───────────────────────────────────────────────────────────────── */
.nt{display:flex;align-items:baseline;gap:10px}
.nt b{font-family:'Bricolage',sans-serif;font-size:34px;font-weight:800;color:var(--ocean);
  line-height:1;font-variant-numeric:tabular-nums}
.nt span{font-size:14px;color:var(--muted)}

/* ── pieces ──────────────────────────────────────────────────────────────── */
.pcs{display:flex;flex-wrap:wrap;gap:8px}
.pc{font-size:13px;font-weight:700;padding:7px 13px;border-radius:999px;
  background:var(--sand);border:1px solid var(--line);color:var(--inkSoft)}
.doc-note{margin:14px 0 0;font-size:13.5px;line-height:1.6;color:var(--muted)}

/* ── etats vides et erreurs ──────────────────────────────────────────────── */
.vide{padding:8px 0 4px;color:var(--muted);font-size:14.5px;line-height:1.6}
.grand-vide{max-width:52ch;margin:60px auto;text-align:center}
.grand-vide h2{font-size:22px;font-weight:800;color:var(--titre);margin:0 0 10px;
  letter-spacing:-.02em;text-transform:none}
.grand-vide p{margin:0;color:var(--muted);line-height:1.65}
.err{display:none;margin:16px 0 0;padding:12px 14px;border-radius:var(--r);font-size:14.5px;
  background:var(--coralSoft);color:var(--coralInk);border:1px solid #f6c4ba}
.err.on{display:block}
.chargement{padding:40px 0;text-align:center;color:var(--faint);font-size:14.5px}

@media (max-width:620px){
  .wrap{padding:0 16px}
  main{padding:24px 0 70px}
  .sec{padding:18px 17px;border-radius:var(--r-lg)}
  .rc{grid-template-columns:1fr}
  .rc-e{grid-column:1;grid-row:auto;justify-self:start;margin-top:6px}
  .mo{grid-template-columns:64px 1fr auto;gap:9px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ── conversation ────────────────────────────────────────────────────────── */
.fil{max-height:min(46vh,420px);overflow-y:auto;padding:16px 0 6px;margin:12px 0 0;
  border-top:1px solid var(--lineCool)}
.bulle{max-width:76%;margin:0 0 10px;padding:11px 14px;border-radius:14px;background:var(--sand);
  border:1px solid var(--line)}
.bulle.moi{margin-left:auto;background:var(--tint);border-color:var(--soft)}
.bulle p{margin:0;font-size:14.5px;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere}
.bulle span{display:block;margin-top:5px;font-size:11.5px;color:var(--muted)}
.fil-w{display:flex;gap:9px;align-items:flex-end;padding-top:12px;border-top:1px solid var(--lineCool)}
.fil-w textarea{flex:1;min-height:44px;max-height:130px;padding:11px 13px;font:inherit;font-size:15px;
  color:var(--ink);background:var(--shell);border:1.5px solid var(--line);border-radius:14px;resize:vertical}
.fil-w textarea:focus{outline:none;border-color:var(--lagoon);box-shadow:0 0 0 3px var(--tint)}
.fil-w .ab{padding:12px 18px}
.pj-att{margin:0;font-size:13.5px;color:var(--muted);font-style:italic}
.pj{margin:6px 0 0}
.pj-img{display:block;border-radius:14px;overflow:hidden;line-height:0;
  border:1px solid var(--line);max-width:280px}
.pj-img img{width:100%;height:auto;display:block;max-height:260px;object-fit:cover}
.pj-lien{display:inline-block;margin:6px 0 0;font-size:14px;font-weight:700}
/* Une bulle qui ne porte qu'un fichier epouse sa vignette : a 76 % de large elle
   laissait un grand vide a droite de l'image. */
.bulle.avec-pj{width:fit-content;max-width:min(76%,320px)}

/* ── choix de la langue ──────────────────────────────────────────────────── */
.lang{display:flex;gap:2px;padding:3px;border-radius:14px;background:var(--sandDeep)}
.lang button{font:inherit;font-size:12.5px;font-weight:800;padding:6px 10px;border:0;border-radius:14px;
  background:none;color:var(--muted);cursor:pointer;transition:background .15s,color .15s}
.lang button:hover{color:var(--ink)}
.lang button.on{background:var(--shell);color:var(--titre);box-shadow:var(--sh)}
@media (max-width:620px){
  .top .wrap{height:auto;padding-top:12px;padding-bottom:12px;flex-wrap:wrap}
  .tact{width:100%;margin-left:0}
  .lang{margin-right:auto}
}


/* ── champs de formulaire ────────────────────────────────────────────────
   Ils vivaient dans la feuille de /compte/ seulement : sur /reglages/, les
   trois champs du mot de passe s'affichaient cote a cote, en ligne, sans
   etiquette lisible. Un composant utilise par deux pages appartient au
   socle — c'est la meme lecon que le socle lui-meme (11/09). */
.cp-f{display:block;margin:0 0 16px;max-width:460px}
.cp-f>span{display:block;font-size:11px;letter-spacing:.09em;font-weight:800;color:var(--faint);
  text-transform:uppercase;margin:0 0 6px}
.cp-f input,.cp-f select{width:100%;padding:12px 13px;font:inherit;font-size:15px;color:var(--ink);
  background:var(--shell);border:1.5px solid var(--line);border-radius:14px;
  transition:border-color .15s,box-shadow .15s}
.cp-f input:focus,.cp-f select:focus{outline:none;border-color:var(--lagoon);box-shadow:0 0 0 3px var(--tint)}
.cp-hint{margin:6px 0 0;font-size:12.5px;color:var(--muted);line-height:1.5}

/* ═══ COMPOSANTS PARTAGES PAR LES PAGES DU COMPTE ═══════════════════════
   Onglets, cartes, etat vide, fenetre d'action, reçu. Ecrits d'abord pour
   /reservations/, ils servent aujourd'hui a /avis/, /favoris/, /messages/,
   /notifications/ et /reglages/. Cinq copies auraient diverge ; il n'y en a
   qu'une (11/09, meme lecon que le socle lui-meme). */
/* ── onglets ─────────────────────────────────────────────────────────────── */
.ongs{display:flex;gap:6px;margin:0 0 22px;padding:5px;background:var(--sand);
  border:1px solid var(--line);border-radius:14px;width:fit-content;max-width:100%;
  overflow-x:auto}
.ongs .ong-b{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border:0;border-radius:14px;
  background:transparent;color:var(--muted);cursor:pointer;white-space:nowrap;
  font:700 14px/1 'PJS',system-ui,sans-serif}
.ongs .ong-b:hover{color:var(--ink)}
.ongs .ong-b.on{background:var(--shell);color:var(--ink);box-shadow:var(--sh)}
.ong-n{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;
  border-radius:999px;background:var(--sandDeep);color:var(--inkSoft);
  font:800 11.5px/1 'PJS',system-ui,sans-serif}
.ongs .ong-b.on .ong-n{background:var(--tint);color:var(--lagoonDeep)}


/* ── cartes ──────────────────────────────────────────────────────────────── */
.re-g{display:grid;gap:14px}
.re-c{background:var(--shell);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:18px 20px;box-shadow:var(--sh)}
.re-h{display:flex;align-items:flex-start;gap:14px;justify-content:space-between}
.re-ti{min-width:0}
.re-ti b{display:block;font-family:'Bricolage','PJS',sans-serif;font-weight:700;font-size:18px;
  line-height:1.25;color:var(--titre);letter-spacing:-.015em}
.re-ti span{display:block;margin-top:2px;font-size:13.5px;color:var(--muted)}
.re-f{display:flex;flex-wrap:wrap;gap:8px 26px;margin:14px 0 0;padding:14px 0 0;
  border-top:1px solid var(--lineCool)}
.re-f>div{min-width:0}
.re-f span{display:block;font-size:10.5px;letter-spacing:.09em;font-weight:800;color:var(--faint);
  text-transform:uppercase}
.re-f b{display:block;font-size:14.5px;font-weight:600;color:var(--ink);
  font-variant-numeric:tabular-nums}
.re-a{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0}
.re-ok{display:inline-flex;align-items:center;padding:9px 14px;border-radius:14px;
  background:var(--tropicSoft);color:var(--tropicDeep);font:700 13.5px/1 'PJS',sans-serif}
.ab.dang{border-color:var(--coralSoft);color:var(--coralInk)}
.ab.dang:hover{border-color:var(--coral);background:var(--coralSoft)}
.ab.dang.pri{background:var(--coral);border-color:var(--coral);color:#fff}
.ab.dang.pri:hover{filter:brightness(.94)}


/* ── état vide ───────────────────────────────────────────────────────────── */
.grand-vide{padding:56px 24px;text-align:center;background:var(--shell);
  border:1px solid var(--line);border-radius:var(--r-lg)}
.grand-vide .gv-t{margin:0 0 6px;font-family:'Bricolage','PJS',sans-serif;font-weight:700;
  font-size:19px;color:var(--titre)}
.grand-vide p{margin:0 0 18px;color:var(--muted);font-size:14.5px}


/* ── fenêtre d'action (annuler, noter, reçu) ─────────────────────────────── */
.fp-scrim{position:fixed;inset:0;background:rgba(6,37,52,.44);z-index:88}
.fp-scrim[hidden]{display:none}
.fp-pan{position:fixed;z-index:89;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(520px,calc(100vw - 32px));max-height:86vh;overflow-y:auto;
  background:var(--shell);border-radius:22px;padding:26px 26px 24px;
  box-shadow:0 30px 80px rgba(6,37,52,.32)}
.fp-pan[hidden]{display:none}
.fp-pan h2{font-size:21px;font-weight:800;color:var(--titre);margin:0 0 8px;padding-right:34px}
.fp-x{position:absolute;top:16px;right:16px;width:32px;height:32px;border-radius:50%;
  border:1px solid var(--line);background:var(--shell);color:var(--muted);cursor:pointer;
  font-size:13px;line-height:1}
.fp-x:hover{color:var(--ink);border-color:var(--lineCool)}
.dl-p{margin:0 0 18px;color:var(--muted);font-size:14.5px;line-height:1.55}
.dl-lbl{font-size:11px;letter-spacing:.09em;font-weight:800;color:var(--faint);
  text-transform:uppercase;margin:0 0 8px}
.dl-ch{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
.dl-o{padding:9px 14px;border-radius:999px;border:1.5px solid var(--line);background:var(--shell);
  color:var(--inkSoft);cursor:pointer;font:600 13.5px/1 'PJS',sans-serif}
.dl-o:hover{border-color:var(--lagoon)}
.dl-o.on{border-color:var(--lagoon);background:var(--tint);color:var(--lagoonDark)}
.dl-et{display:flex;gap:6px;margin:0 0 20px}
.dl-e{width:44px;height:44px;border-radius:14px;border:1.5px solid var(--line);
  background:var(--shell);cursor:pointer;display:grid;place-items:center;padding:0}
.dl-e svg{width:24px;height:24px;fill:none;stroke:var(--faint);stroke-width:1.6;
  stroke-linejoin:round}
.dl-e.on svg{fill:var(--gold);stroke:var(--goldDeep)}
.dl-e:hover{border-color:var(--gold)}
.dl-ta{width:100%;padding:12px 13px;font:inherit;font-size:15px;color:var(--ink);
  background:var(--shell);border:1.5px solid var(--line);border-radius:14px;resize:vertical}
.dl-ta:focus{outline:none;border-color:var(--lagoon);box-shadow:0 0 0 3px var(--tint)}
.dl-err{margin:14px 0 0;padding:11px 13px;border-radius:14px;background:var(--coralSoft);
  color:var(--coralInk);font-size:14px}
.dl-err[hidden]{display:none}
.dl-a{display:flex;gap:9px;justify-content:flex-end;margin:22px 0 0;flex-wrap:wrap}


/* ── reçu ────────────────────────────────────────────────────────────────── */
.rec{border:1px solid var(--line);border-radius:14px;overflow:hidden}
.rec-l{display:flex;justify-content:space-between;gap:18px;padding:11px 15px;
  border-bottom:1px solid var(--lineCool);font-size:14.5px}
.rec-l:last-child{border-bottom:0;background:var(--sand)}
.rec-l span{color:var(--muted)}
.rec-l b{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;text-align:right}
@media print{
  .top,.ong,.re-a,.dl-a,.fp-x,.fp-scrim{display:none!important}
  .fp-pan{position:static;transform:none;box-shadow:none;max-height:none;width:auto}
}
.err.ok{background:var(--tropicSoft);color:var(--tropicDeep)}
@media (max-width:640px){
  .re-h{flex-direction:column;gap:10px}
  .re-a .ab{flex:1 1 auto;justify-content:center}
}


/* ── LA BANDE D'IDENTITE ──────────────────────────────────────────────────
   Elle ouvre toutes les pages du compte : qui l'on est, ce que l'on regarde,
   et la frise niho qui la referme — la meme que sur le catalogue. C'est ce qui
   fait que ces pages appartiennent au meme site, au lieu de flotter en blanc. */
.pg-b{background:linear-gradient(158deg,var(--ocean) 0%,var(--lagoonDark) 72%,var(--lagoonDeep) 100%);
  color:#E9F7F8;position:relative;overflow:hidden}
/* Deux halos et un voile : la profondeur vient de la lumiere posee sur le
   degrade, pas d'une deuxieme couleur. Ils sont DERRIERE le contenu. */
.pg-b::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(38rem 22rem at 82% -30%, rgba(255,255,255,.20), transparent 64%),
    radial-gradient(30rem 20rem at 6% 118%, rgba(14,140,153,.42), transparent 66%)}
.pg-b>*{position:relative}
.pg-w{padding:30px 24px 26px}
.pg-qui{display:flex;align-items:center;gap:12px;margin:0 0 18px}
.pg-av{width:40px;height:40px;flex:0 0 40px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.16);color:#fff;font:800 15px/1 'PJS',system-ui,sans-serif;
  background-size:cover;background-position:50% 50%;
  box-shadow:0 0 0 2px rgba(255,255,255,.22)}
.pg-av.ph{color:transparent}
.pg-ident{min-width:0;display:flex;flex-direction:column;gap:1px}
.pg-ident b{font:700 15px/1.3 'PJS',system-ui,sans-serif;color:#fff;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pg-ident span{font-size:12.5px;color:#9FCFD5;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.pg-w h1{font-family:'Bricolage','PJS',sans-serif;font-weight:800;
  font-size:clamp(27px,4.2vw,38px);line-height:1.08;letter-spacing:-.024em;color:#fff;margin:0}
.pg-sous{margin:9px 0 0;font-size:15.5px;color:#A8D7DC;max-width:56ch}
.pg-fz{line-height:0;color:var(--goldSoft);opacity:.5;overflow:hidden}
.pg-fz svg{display:block}
main{padding:30px 0 90px}


/* ── du relief, plutot que du blanc sur du blanc ─────────────────────────── */
.sec{background:var(--shell);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:24px 26px;margin:0 0 18px;box-shadow:var(--sh)}
.sec>h2{font-family:'PJS',system-ui,sans-serif;font-weight:800;font-size:11px;line-height:14px;
  letter-spacing:.11em;text-transform:uppercase;color:var(--lagoonDeep);margin:0 0 4px}
.sec-sub{margin:0 0 18px;color:var(--muted);font-size:14.5px}
.re-c{border-radius:var(--r-xl);box-shadow:var(--sh-hi)}
.re-c:hover{border-color:var(--lineCool)}

/* Le BILLET de date : sur une carte sans photo, c'est lui qui accroche l'oeil
   et qui dit l'essentiel — quand. Les chiffres sont en chasse fixe pour que
   deux cartes s'alignent. */
.re-h{align-items:flex-start}
.re-d{flex:0 0 62px;width:62px;text-align:center;padding:8px 0 9px;border-radius:14px;
  background:var(--tint);border:1px solid var(--soft);margin-right:15px}
.re-d i{display:block;font-style:normal;font-size:10.5px;letter-spacing:.09em;font-weight:800;
  text-transform:uppercase;color:var(--lagoonDeep)}
.re-d b{display:block;font-family:'Bricolage','PJS',sans-serif;font-size:23px;line-height:1.05;
  font-weight:800;color:var(--lagoonDark);font-variant-numeric:tabular-nums}
.re-d u{display:block;text-decoration:none;font-size:11px;color:var(--muted);
  font-variant-numeric:tabular-nums}

/* ── etats vides : une frise plutot qu'une phrase seule ─────────────────── */
.grand-vide{position:relative;overflow:hidden;padding:60px 24px 56px;
  background:linear-gradient(var(--shell),var(--cloud));border-radius:var(--r-xl)}
.gv-fz{display:none}   /* une seule frise par ecran : celle de la bande */
.gv-fz svg{display:block}
.grand-vide .gv-t{font-size:21px}

/* ── reglages : une pastille d'icone par section ────────────────────────── */
.rg-b{border-radius:var(--r-xl)}
.rg-b h3{display:flex;align-items:center;gap:10px}
.rg-ic{display:inline-grid;place-items:center;width:30px;height:30px;flex:0 0 30px;
  border-radius:14px;background:var(--tint)}
.rg-ic svg{width:16px;height:16px;fill:none;stroke:var(--lagoonDeep);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.rg-nav{top:92px}

/* ── onglets : un peu plus de presence ──────────────────────────────────── */
.ongs{background:var(--shell);box-shadow:var(--sh)}

/* ── pastilles d'etat ────────────────────────────────────────────────────────
   RESTAUREES le 12/09. Le 11/09, en remplaçant l'ancien en-tete de page par la
   bande d'identite, j'ai supprime le bloc « en-tete » EN ENTIER — il portait
   aussi `.pill`, qui sert ailleurs. Resultat en production : la pastille
   « Verifie » de l'espace pro a perdu son fond, et son icone, sans largeur, a
   pris toute la place disponible — un immense trait bleu au milieu de la bande.
   Invisible dans l'audit, qui compte des portes et non des pixels ; visible
   d'un coup d'oeil sur une capture.
   Lecon : couper un bloc d'une feuille PARTAGEE, c'est couper pour toutes les
   pages — on regarde ce qu'il contenait avant, pas ce qu'il s'appelait. */
.pill{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:800;
  padding:4px 10px;border-radius:999px;background:var(--tropicSoft);color:var(--tropicDeep)}
.pill svg{width:13px;height:13px;flex:0 0 13px}
/* Sur la bande, la pastille se lit sur une couleur pleine : fond clair, encre
   de la couleur du service. */
.pg-b .pill{background:rgba(255,255,255,.92);color:var(--service,#075E66)}

/* ── LA COULEUR DU SERVICE ───────────────────────────────────────────────────
   Posee par `pgTeinte()` sur la racine. Sans service, rien ne change : la bande
   garde l'ocean, qui est le neutre (decision 149). */
/* AVANT : `background:var(--service)` — un aplat de la couleur du metier, en
   pleine saturation, sur toute la bande. Verdict du porteur le 12/09 : « les
   couleurs de header sont trop saturees et le style est trop simple, juste une
   couleur en fond ». Il a raison, et le systeme le disait : l'ocean est le fond
   des en-tetes immersifs ; la couleur du service est un ACCENT.
   On garde donc l'ocean et on le TEINTE — le metier reste reconnaissable au
   premier coup d'oeil, sans crier. */
:root.a-service .pg-b{
  background:
    linear-gradient(112deg,
      color-mix(in srgb,var(--service) 34%,var(--oceanDeep)) 0%,
      color-mix(in srgb,var(--service) 10%,var(--ocean)) 34%,
      var(--ocean) 62%,
      var(--lagoonDark) 100%)}
:root.a-service .pg-b::before{
  background:
    radial-gradient(38rem 22rem at 82% -30%, rgba(255,255,255,.16), transparent 64%),
    radial-gradient(26rem 17rem at 4% 116%,
      color-mix(in srgb,var(--service) 42%, transparent), transparent 70%)}
@supports not (color: color-mix(in srgb, red 50%, blue)){
  :root.a-service .pg-b{background:linear-gradient(158deg,var(--oceanDeep),var(--ocean) 60%,var(--lagoonDark))}
}
:root.a-service .pg-fz{color:#fff;opacity:.28}
:root.a-service .ab.pri{background:var(--service);border-color:var(--service)}
:root.a-service .ab.pri:hover{filter:brightness(.93)}
:root.a-service .sec>h2{color:var(--service)}
:root.a-service .rg-ic{background:color-mix(in srgb,var(--service) 12%,#fff)}
:root.a-service .rg-ic svg{stroke:var(--service)}
:root.a-service .pill.et-confirmed,:root.a-service .pill.et-paid{background:color-mix(in srgb,var(--service) 13%,#fff);color:var(--service)}
/* Le navigateur qui ignore `color-mix` retombe sur la teinte claire d'origine :
   une couleur approximative vaut mieux qu'un fond transparent. */
@supports not (color: color-mix(in srgb, red 50%, blue)){
  :root.a-service .rg-ic{background:var(--tint)}
  :root.a-service .rg-ic svg{stroke:var(--lagoonDeep)}
}

.mc{position:relative;display:flex;align-items:center}
.mc-chip{display:flex;align-items:center;gap:9px;padding:5px 12px 5px 5px;border-radius:999px;
  border:1px solid var(--line);background:var(--shell);color:var(--ink);cursor:pointer;
  font:600 14px/1 'PJS',system-ui,sans-serif;transition:box-shadow .18s,border-color .18s}
.mc-chip:hover{border-color:var(--lineCool);box-shadow:0 2px 10px rgba(6,37,52,.09)}
.mc-chip:focus-visible{outline:2px solid var(--lagoon);outline-offset:2px}
.mc-av{width:28px;height:28px;border-radius:50%;flex:0 0 28px;display:grid;place-items:center;
  background:var(--lagoonDeep);color:#fff;font:800 13px/1 'PJS',system-ui,sans-serif;
  background-size:cover;background-position:50% 50%}
.mc-av.ph{color:transparent}
.mc-av.anon{background:var(--sandDeep);color:var(--muted)}
.mc-nom{max-width:12ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mc-pt{position:absolute;top:2px;left:26px;width:9px;height:9px;border-radius:50%;
  background:var(--coral);border:2px solid var(--shell)}
.mc-pt[hidden]{display:none}
.mc-scrim{position:fixed;inset:0;background:rgba(6,37,52,.34);z-index:78;border:0}
.mc-scrim[hidden]{display:none}
.mc-pan{position:fixed;width:356px;max-width:calc(100vw - 24px);
  background:var(--shell);border:1px solid var(--line);border-radius:18px;z-index:79;
  box-shadow:0 24px 60px rgba(6,37,52,.20);overflow:hidden;
  max-height:min(78vh,720px);display:flex;flex-direction:column}
.mc-corps{overflow-y:auto;overscroll-behavior:contain;flex:1 1 auto}
.mc-ft{flex:0 0 auto;border-top:1px solid var(--line);background:var(--shell)}
.mc-pan[hidden]{display:none}
.mc-hd{display:flex;gap:12px;align-items:center;padding:16px 18px;background:var(--tint);
  border-bottom:1px solid var(--lineCool)}
.mc-av2{width:46px;height:46px;border-radius:50%;flex:0 0 46px;display:grid;place-items:center;
  background:var(--lagoonDeep);color:#fff;font:800 18px/1 'PJS',system-ui,sans-serif;
  background-size:cover;background-position:50% 50%}
.mc-av2.ph{color:transparent}
.mc-qui{min-width:0;display:flex;flex-direction:column;gap:1px}
.mc-qui b{font:700 15px/1.25 'PJS',system-ui,sans-serif;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mc-qui span{font:400 12.5px/1.35 'PJS',system-ui,sans-serif;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mc-dep{color:var(--lagoonDeep)!important;font-weight:600!important}
.mc-g{padding:8px 8px 4px;border-bottom:1px solid var(--line)}
.mc-g:last-of-type{border-bottom:0}
.mc-gt{padding:6px 10px 4px;font:800 10.5px/1 'PJS',system-ui,sans-serif;letter-spacing:.09em;
  text-transform:uppercase;color:var(--faint)}
.mc-i{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:12px;
  text-decoration:none;color:inherit}
.mc-i:hover{background:var(--cloud)}
.mc-i:focus-visible{outline:2px solid var(--lagoon);outline-offset:-2px}
.mc-i[hidden]{display:none}
.mc-i svg{width:19px;height:19px;flex:0 0 19px;fill:none;stroke:var(--lagoonDeep);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.mc-t{min-width:0;display:flex;flex-direction:column;gap:1px;flex:1}
.mc-t b{font:600 14px/1.3 'PJS',system-ui,sans-serif;color:var(--ink)}
.mc-t span{font:400 12px/1.35 'PJS',system-ui,sans-serif;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mc-b{flex:0 0 auto;padding:3px 9px;border-radius:999px;background:var(--coralSoft);
  color:var(--coralDeep);font:700 11.5px/1.4 'PJS',system-ui,sans-serif;white-space:nowrap}
.mc-ft{padding:10px 16px 16px}
.mc-out{width:100%;padding:11px;border-radius:12px;border:1px solid var(--line);
  background:var(--sand);color:var(--ink);cursor:pointer;
  font:700 14px/1 'PJS',system-ui,sans-serif}
.mc-out:hover{background:var(--sandDeep)}
.mc-anon{padding:20px 18px}
.mc-anon p{margin:0 0 14px;font:400 13.5px/1.5 'PJS',system-ui,sans-serif;color:var(--muted)}
.mc-cta{width:100%;padding:12px;border-radius:12px;border:0;background:var(--lagoon);color:#fff;
  cursor:pointer;font:700 14px/1 'PJS',system-ui,sans-serif}
.mc-alt{width:100%;margin-top:8px;padding:12px;border-radius:12px;border:1px solid var(--line);
  background:var(--shell);color:var(--ink);cursor:pointer;font:600 14px/1 'PJS',system-ui,sans-serif}
/* Sur un telephone, un panneau ancre a droite sort de l'ecran : il devient une
   feuille qui monte du bas, le geste que tout le monde connait. */
.mc-pan.feuille{top:auto;bottom:0;left:0;right:0;width:auto;max-width:none;
  border-radius:20px 20px 0 0;max-height:82vh;box-shadow:0 -18px 50px rgba(6,37,52,.26)}
@media (max-width:719px){ .mc-nom{display:none} }

/* ESPACE PROFESSIONNEL — ce que CETTE page a de particulier.
   Le socle commun (polices, jetons, barre, boutons, sections) et le menu du
   compte sont assembles devant par `scripts/construire-pro.py`. */
/* ── fermer des dates ────────────────────────────────────────────────────── */
.bl-f{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  align-items:end;margin:18px 0 0;padding:16px 0 0;border-top:1px solid var(--lineCool)}
.bl-c{display:block}
.bl-c>span{display:block;font-size:11px;letter-spacing:.09em;font-weight:800;color:var(--faint);
  text-transform:uppercase;margin:0 0 6px}
.bl-c input,.bl-c select{width:100%;padding:10px 12px;font:inherit;font-size:14.5px;color:var(--ink);
  background:var(--shell);border:1.5px solid var(--line);border-radius:14px}
.bl-c input:focus,.bl-c select:focus{outline:none;border-color:var(--lagoon);box-shadow:0 0 0 3px var(--tint)}
.bl-f .ab{height:42px}

/* ── fenetre du QR ───────────────────────────────────────────────────────── */
.qr-scrim{position:fixed;inset:0;z-index:40;background:rgba(6,37,52,.55);backdrop-filter:blur(3px)}
.qr-scrim[hidden]{display:none}
.qr-pan{position:fixed;z-index:41;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(420px,calc(100vw - 32px));max-height:90vh;overflow-y:auto;background:var(--shell);
  border-radius:var(--r-xl);box-shadow:var(--sh-hi);padding:30px 28px 24px;text-align:center}
.qr-pan[hidden]{display:none}
.qr-pan h2{font-size:20px;font-weight:800;color:var(--titre);margin:0 0 8px}
.qr-pan p{margin:0 0 16px;font-size:14.5px;line-height:1.6;color:var(--muted)}
.qr-box{display:inline-block;padding:14px;border-radius:var(--r);background:#fff;
  border:1px solid var(--line);line-height:0}
.qr-box img,.qr-box canvas{display:block}
.qr-exp{margin:16px 0 0!important;font-size:13px;color:var(--goldInk);background:var(--goldSoft);
  border-radius:14px;padding:9px 12px}
.qr-why{margin:12px 0 0!important;font-size:12.5px;color:var(--faint)}
.qr-x{position:absolute;right:12px;top:12px;width:34px;height:34px;border-radius:50%;border:0;
  background:none;color:var(--muted);font-size:15px;cursor:pointer}
.qr-x:hover{background:var(--sandDeep);color:var(--ink)}


/* ── P4 : finances complètes ─────────────────────────────────────────────── */
.fi-per{display:flex;gap:6px;margin:0 0 16px;flex-wrap:wrap}
.fi-p{padding:8px 14px;border-radius:999px;border:1.5px solid var(--line);background:var(--shell);
  color:var(--inkSoft);cursor:pointer;font:700 13px/1 'PJS',sans-serif}
.fi-p:hover{border-color:var(--lagoon)}
.fi-p.on{border-color:var(--service,var(--lagoon));background:var(--tint);color:var(--ink)}
:root.a-service .fi-p.on{background:color-mix(in srgb,var(--service) 11%,#fff);
  border-color:var(--service);color:var(--service)}
.fi-g{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin:0 0 18px}
.fi-c{padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--cloud)}
.fi-c span{display:block;font-size:10.5px;letter-spacing:.09em;font-weight:800;
  text-transform:uppercase;color:var(--muted)}
.fi-c b{display:block;margin:3px 0 0;font-family:'Bricolage','PJS',sans-serif;font-weight:800;
  font-size:21px;color:var(--ink);font-variant-numeric:tabular-nums}
.fi-c small{display:block;margin:4px 0 0;font-size:12px;color:var(--muted)}
.fi-sst{margin:18px 0 8px;font:800 11px/14px 'PJS',sans-serif;letter-spacing:.11em;
  text-transform:uppercase;color:var(--lagoonDeep)}
:root.a-service .fi-sst{color:var(--service)}
.fi-moyens,.fi-virs{display:grid;gap:6px}
.fi-m,.fi-vir{display:flex;align-items:baseline;gap:14px;padding:9px 13px;
  border:1px solid var(--lineCool);border-radius:14px;font-size:14px}
.fi-m span,.fi-vir span{color:var(--muted);flex:1}
.fi-m b,.fi-vir b{font-variant-numeric:tabular-nums}
.fi-st{font-style:normal;font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px;
  background:var(--sandDeep);color:var(--inkSoft)}
.fi-st.st-paid{background:var(--tropicSoft);color:var(--tropicDeep)}
.fi-iban{margin:0;font-size:14.5px;font-variant-numeric:tabular-nums}

/* La comptabilité : un encadré, pas un bouton perdu. Ce qu'on remet à un
   comptable mérite d'être annoncé — y compris ce que les fichiers ne
   contiennent pas, qui est la moitié qu'on oublie toujours d'écrire. */
.cb{margin:22px 0 0;padding:16px 18px;border:1px solid var(--line);border-radius:22px;
  background:linear-gradient(var(--tint),var(--shell))}
.cb .fi-sst{margin-top:0}
.cb-i{margin:0 0 14px;font-size:14.5px;line-height:1.6;color:var(--inkSoft);max-width:60ch}
.cb-r{display:flex;gap:10px;flex-wrap:wrap}
.cb-m{margin:12px 0 0;font-size:14px;line-height:1.55;color:var(--muted)}
.cb-m[hidden]{display:none}
.cb-m.err{color:var(--coralInk)}
.cb-a{margin:16px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:5px}
.cb-a li{position:relative;padding-left:16px;font-size:13.5px;line-height:1.55;color:var(--muted);
  max-width:64ch}
.cb-a li::before{content:'';position:absolute;left:2px;top:8px;width:5px;height:5px;
  border-radius:50%;background:var(--faint)}
.cb-a-t{padding-left:0!important;font-weight:700;color:var(--inkSoft)!important}
.cb-a-t::before{display:none}
@media (max-width:520px){.cb-r .ab{width:100%}}

/* ═══════════════════════════════════════════════════════════════════════════
   LE TABLEAU DE BORD — « réactif, instinctif, premium » (porteur, 12/09)
   Les chiffres en Bricolage, le reste en PJS ; rayons du socle ; deux niveaux
   d'ombre ; la couleur du service en accent. Rien d'inventé ici.
   ═══════════════════════════════════════════════════════════════════════════ */

/* La période commande la page : elle colle sous la barre et ne se perd pas. */
.tb-per{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:0 0 18px}
.tb-pb{padding:9px 16px;border-radius:999px;border:1.5px solid var(--line);background:var(--shell);
  color:var(--inkSoft);cursor:pointer;font:700 13.5px/1 'PJS',sans-serif;
  transition:border-color .15s,background .15s,color .15s}
.tb-pb:hover{border-color:var(--lagoon)}
.tb-pb.on{border-color:var(--service,var(--lagoon));color:var(--shell);
  background:var(--service,var(--lagoonDeep))}

/* La rangée de chiffres : ce qu'on lit en entrant. */
.tb-row{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(172px,1fr));margin:0 0 18px}
/* « des carres de couleur, ca fait tres primaire » (porteur, 12/09). Une tuile
   n'est pas un rectangle rempli : c'est une surface claire, un liseré, une
   ombre chaude, et UN trait de couleur qui dit de quoi elle parle. */
.tb-t{position:relative;padding:17px 18px 16px;border:1px solid var(--line);
  border-radius:var(--r-lg);background:linear-gradient(var(--shell),var(--cloud));
  box-shadow:var(--sh);display:flex;flex-direction:column;gap:2px;overflow:hidden}
.tb-t::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(180deg,var(--service,var(--lagoon)),
    color-mix(in srgb,var(--service,var(--lagoon)) 26%,transparent))}
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .tb-t::before{background:var(--lagoon)}
}
.tb-t.urgent{border-color:var(--gold);background:linear-gradient(var(--shell),var(--goldSoft))}
.tb-t.urgent::before{background:linear-gradient(var(--gold),var(--goldSoft))}
.tb-t.bon{border-color:var(--tropicSoft)}
.tb-t.alerte{border-color:var(--coralSoft);background:linear-gradient(var(--shell),#FFF8F6)}
.tb-tl{font-size:10.5px;letter-spacing:.09em;font-weight:800;text-transform:uppercase;
  color:var(--muted)}
.tb-t b{font-family:'Bricolage','PJS',sans-serif;font-weight:800;font-size:27px;line-height:1.08;
  color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.tb-tb{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-top:2px}
.tb-tb small{font-size:12px;color:var(--muted)}
.tb-d{font:800 12.5px/1.4 'PJS',sans-serif;padding:2px 8px;border-radius:999px;white-space:nowrap}
.tb-d.haut{background:var(--tropicSoft);color:var(--tropicDeep)}
.tb-d.bas{background:var(--coralSoft);color:var(--coralInk)}
.tb-d.nul{background:var(--sandDeep);color:var(--muted)}

/* La courbe. Le trait porte la couleur du service ; l'aire la rappelle en
   transparence ; la période précédente reste un trait fin gris — elle est un
   repère, pas une seconde histoire. */
.tb-graph{margin:4px 0 0}
.tb-svg{width:100%;height:170px;display:block;overflow:visible}
.tb-ax{stroke:var(--lineCool);stroke-width:1;vector-effect:non-scaling-stroke}
.tb-axt{fill:var(--faint);font:700 9px 'PJS',sans-serif;font-variant-numeric:tabular-nums;
  paint-order:stroke;stroke:var(--shell);stroke-width:3px;stroke-linejoin:round}
.tb-ligne{fill:none;stroke:var(--service,var(--lagoon));stroke-width:2.5;
  stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.tb-aire{fill:url(#tbAire);stroke:none}
.tb-s0{stop-color:var(--service,var(--lagoon));stop-opacity:.26}
.tb-s1{stop-color:var(--service,var(--lagoon));stop-opacity:.02}
/* ── le viseur : ce qui rend la courbe vivante ───────────────────────────── */
.tb-vise{opacity:0;transition:opacity .12s ease}
.tb-vise.on{opacity:1}
.tb-vl{stroke:var(--service,var(--lagoon));stroke-width:1.5;stroke-dasharray:3 3;
  vector-effect:non-scaling-stroke;opacity:.55}
.tb-vp{fill:var(--shell);stroke:var(--service,var(--lagoon));stroke-width:2.5;
  vector-effect:non-scaling-stroke}
.tb-vpa{fill:var(--faint);stroke:var(--shell);stroke-width:1.5;vector-effect:non-scaling-stroke}
.tb-graph{position:relative}
.tb-graph:focus-visible{outline:2px solid var(--lagoon);outline-offset:3px;border-radius:14px}
.tb-bul{position:absolute;top:6px;transform:translateX(-50%);z-index:3;pointer-events:none;
  display:flex;flex-direction:column;gap:2px;min-width:124px;padding:9px 12px;
  border-radius:var(--r);background:var(--shell);border:1px solid var(--line);
  box-shadow:var(--sh-hi);font-size:12.5px;line-height:1.4}
.tb-bul.droite{transform:translateX(-100%) translateX(-14px)}
.tb-bul[hidden]{display:none}
.tb-bul b{font:800 12px/1.3 'PJS',sans-serif;color:var(--muted);letter-spacing:.02em}
.tb-bv{font-family:'Bricolage','PJS',sans-serif;font-weight:800;font-size:17px;
  color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.tb-ba{color:var(--faint);font-size:11.5px;font-variant-numeric:tabular-nums}
.tb-bd{font-size:11.5px;font-weight:800}
.tb-bd.haut{color:var(--tropicDeep)}
.tb-bd.bas{color:var(--coralInk)}
.tb-bd.nul{color:var(--faint)}
/* ── le choix de la mesure ───────────────────────────────────────────────── */
.tb-mes{display:inline-flex;gap:3px;padding:3px;margin:0 0 14px;border-radius:999px;
  background:var(--sandDeep)}
.tb-mb{padding:7px 15px;border:0;border-radius:999px;background:none;cursor:pointer;
  font:700 13px/1 'PJS',sans-serif;color:var(--muted);transition:background .16s,color .16s}
.tb-mb:hover{color:var(--ink)}
.tb-mb.on{background:var(--shell);color:var(--service,var(--lagoonDeep));box-shadow:var(--sh)}
.tb-prec{fill:none;stroke:var(--faint);stroke-width:1.5;stroke-dasharray:4 4;
  vector-effect:non-scaling-stroke;opacity:.75}
.tb-pt{fill:var(--shell);stroke:var(--service,var(--lagoon));stroke-width:2;
  vector-effect:non-scaling-stroke}
.tb-hit{fill:transparent;cursor:crosshair}
.tb-hit{display:none}   /* remplace par le viseur : un seul ecouteur, pas un par point */
.tb-leg{display:flex;gap:16px;margin:8px 0 0;font-size:12px;color:var(--muted)}
.lg-a::before,.lg-b::before{content:'';display:inline-block;width:14px;height:2px;
  margin-right:6px;vertical-align:middle;background:var(--service,var(--lagoon))}
.lg-b::before{background:var(--faint);height:0;border-top:2px dashed var(--faint)}

/* Deux cartes côte à côte : jour de semaine et heures. */
.tb-two{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.tb-two .sec{margin:0}
/* `align-items:flex-end` empechait les colonnes de s'etirer : les barres se
   dessinaient sur deux pixels, au ras du sol. Un graphique invisible est pire
   qu'un graphique absent — on croit lire zero. (Mesure a l'ecran, 12/09.) */
.tb-bars{display:flex;align-items:stretch;gap:9px;height:168px;padding:18px 0 0;
  position:relative}
.tb-bars::after{content:'';position:absolute;left:0;right:0;bottom:23px;height:1px;
  background:var(--line)}
.tb-bars.dense{gap:3px}
.tb-bar{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;
  position:relative}
.tb-bz{flex:1;width:100%;display:flex;align-items:flex-end;border-radius:8px 8px 0 0;
  background:linear-gradient(var(--cloud),transparent)}
.tb-bz i{display:block;width:100%;border-radius:8px 8px 2px 2px;transition:height .3s cubic-bezier(.22,1,.36,1);
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--service,var(--lagoon)) 78%,#fff) 0%,
    color-mix(in srgb,var(--service,var(--lagoon)) 34%,#fff) 100%)}
.tb-bar.top .tb-bz i{background:linear-gradient(180deg,
    var(--service,var(--lagoon)) 0%,
    color-mix(in srgb,var(--service,var(--lagoon)) 58%,#fff) 100%);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--service,var(--lagoon)) 30%,transparent)}
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .tb-bz i{background:var(--lagoon);opacity:.5}
  .tb-bar.top .tb-bz i{opacity:1}
}
.tb-bar:hover .tb-bz i{filter:brightness(1.04)}
.tb-bl{font:700 11px/1 'PJS',sans-serif;color:var(--muted)}
.tb-bar.top .tb-bl{color:var(--service,var(--lagoonDeep));font-weight:800}
.tb-bars.dense .tb-bl{font-size:8.5px}
/* La valeur flotte AU-DESSUS de la barre au survol : lisible quand on la
   cherche, invisible quand on lit la forme. */
.tb-bv{position:absolute;top:-2px;left:50%;transform:translateX(-50%);white-space:nowrap;
  font:800 11.5px/1 'PJS',sans-serif;color:var(--ink);font-variant-numeric:tabular-nums;
  opacity:0;transition:opacity .15s ease;pointer-events:none}
.tb-bar:hover .tb-bv,.tb-bar.top .tb-bv{opacity:1}
.tb-bar.top .tb-bv{color:var(--service,var(--lagoonDeep))}
.tb-note{margin:10px 0 0;font:700 13px/1.4 'PJS',sans-serif;color:var(--service,var(--lagoonDeep))}

/* Un classement se lit en longueurs, pas en hauteurs. */
.tb-rank{display:grid;gap:9px}
.tb-rl{display:grid;grid-template-columns:minmax(0,1fr) 96px auto;gap:12px;align-items:center}
.tb-rn{font-size:14px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tb-rz{height:8px;border-radius:999px;background:var(--cloud);overflow:hidden}
.tb-rz i{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--service,var(--lagoon)),
    color-mix(in srgb,var(--service,var(--lagoon)) 48%,#fff))}
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .tb-rz i{background:var(--lagoon)}
}
.tb-rl b{font:700 13.5px/1 'PJS',sans-serif;font-variant-numeric:tabular-nums;text-align:right}

/* Les avis et leur réponse. */
.tb-avis{display:grid;gap:10px;margin:14px 0 0}
.tb-av{padding:14px 16px;border:1px solid var(--line);border-radius:22px;background:var(--cloud)}
.tb-avh{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.tb-avh b{font:700 14.5px/1.3 'PJS',sans-serif}
.tb-avn{font:800 13px/1 'PJS',sans-serif;color:var(--goldInk);background:var(--goldSoft);
  padding:3px 9px;border-radius:999px}
.tb-avd{font-size:12.5px;color:var(--faint);margin-left:auto}
.tb-av p{margin:8px 0 0;font-size:14.5px;color:var(--inkSoft);line-height:1.55}
.tb-avr{display:flex;flex-direction:column;gap:8px;margin:12px 0 0}
.tb-avr .ab{align-self:flex-start}

/* « Je n'ai pas pu lire » — distinct d'un vide, et rattrapable sur place. */
.tb-ko{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 18px;
  padding:14px 18px;border:1px solid var(--coralSoft);border-radius:22px;
  background:linear-gradient(var(--shell),#FFF8F6)}
.tb-ko p{margin:0;flex:1;font-size:14.5px;color:var(--coralInk)}

@media (max-width:760px){
  .tb-per{top:56px}
  .tb-rl{grid-template-columns:minmax(0,1fr) 64px auto}
}
@media (prefers-reduced-motion:reduce){
  .tb-bz i{transition:none}
}

/* ── onglets de métier : ils n'avaient AUCUNE règle (brief §I) ───────────── */
.onglets{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 16px;padding:5px;
  background:var(--shell);border:1px solid var(--line);border-radius:999px;width:fit-content;
  max-width:100%;box-shadow:var(--sh)}
.onglets .ong{padding:8px 16px;border:0;border-radius:999px;background:transparent;
  color:var(--muted);cursor:pointer;white-space:nowrap;font:700 13.5px/1 'PJS',sans-serif;
  transition:background .15s,color .15s}
.onglets .ong:hover{color:var(--ink)}
.onglets .ong.on{color:var(--service,var(--lagoonDeep));border-color:var(--service,var(--lagoon));
  background:color-mix(in srgb,var(--service,var(--lagoon)) 10%,#fff);box-shadow:var(--sh)}
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .onglets .ong.on{background:var(--tint)}
}

/* La pastille « vérifié » chevauchait le sous-titre : elle prend sa ligne. */
.pg-sous .pill{margin-left:10px;vertical-align:2px}

/* ═══════════════════════════════════════════════════════════════════════════
   L'ESPACE DE TRAVAIL — deux volets sur grand ecran, un rail qui defile sous
   1000 px. C'est la reponse de l'interdit n°10 du systeme : sur grand ecran on
   met en page en COLONNES, on ne centre pas une colonne unique.
   ═══════════════════════════════════════════════════════════════════════════ */
.ws{display:grid;gap:22px 26px;grid-template-columns:216px minmax(0,1fr);align-items:start}
/* La barre de periode traverse les deux colonnes : elle commande l'espace
   entier, elle n'appartient a aucune vue. */
.ws-bar{grid-column:1 / -1;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:0 0 2px}
.ws-bl{font:800 10.5px/1 'PJS',sans-serif;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint)}
.ws-bar .tb-per{margin:0}
.ws-nav{position:sticky;top:82px}
.ws-nl{display:flex;flex-direction:column;gap:3px;padding:8px;border-radius:var(--r-lg);
  background:var(--shell);border:1px solid var(--line);box-shadow:var(--sh)}
.ws-t{display:flex;align-items:center;gap:11px;width:100%;padding:10px 12px;border:0;
  border-radius:var(--r);background:none;cursor:pointer;text-align:left;
  font:700 14.5px/1.2 'PJS',sans-serif;color:var(--inkSoft);
  transition:background .16s ease,color .16s ease}
.ws-t:hover{background:var(--sandDeep);color:var(--ink)}
.ws-ic{display:inline-grid;place-items:center;width:20px;height:20px;flex:0 0 20px;color:var(--faint)}
.ws-ic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.ws-lb{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Le compteur dit ce qui ATTEND quelqu'un : il est or, la couleur de
   l'avertissement du systeme, jamais rouge — rien n'est en panne. */
.ws-n{flex:none;min-width:21px;padding:0 6px;border-radius:999px;text-align:center;
  font:800 11.5px/21px 'PJS',sans-serif;background:var(--goldSoft);color:var(--goldInk)}
.ws-t.on{background:linear-gradient(100deg,
    color-mix(in srgb,var(--service,var(--lagoon)) 13%,#fff),
    color-mix(in srgb,var(--service,var(--lagoon)) 5%,#fff));
  color:var(--service,var(--lagoonDeep));box-shadow:inset 0 0 0 1px
    color-mix(in srgb,var(--service,var(--lagoon)) 26%,transparent)}
.ws-t.on .ws-ic{color:var(--service,var(--lagoon))}
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .ws-t.on{background:var(--tint);color:var(--lagoonDeep)}
}
.ws-main{min-width:0;display:flex;flex-direction:column;gap:18px}
.ws-main>.sec{margin:0}
/* Deux colonnes pour les blocs courts : classements et taux se lisent cote a
   cote, ils ne se lisent pas l'un apres l'autre. */
.ws-g2{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));align-items:start}
.ws-g2>.sec{margin:0}

@media (max-width:1000px){
  .ws{grid-template-columns:minmax(0,1fr);gap:14px}
  .ws-nav{position:sticky;top:56px;z-index:12;margin:0 -16px;padding:6px 0;
    background:linear-gradient(var(--sand) 74%,transparent)}
  .ws-nl{flex-direction:row;overflow-x:auto;scrollbar-width:none;padding:6px 16px;
    border-radius:0;border:0;background:none;box-shadow:none;gap:6px}
  .ws-nl::-webkit-scrollbar{display:none}
  .ws-t{width:auto;flex:none;background:var(--shell);border:1px solid var(--line);
    border-radius:999px;padding:9px 14px}
  .ws-lb{max-width:none}
}

/* ── LE TABLEAU DES RESERVATIONS : un outil, pas un deversoir ────────────── */
.rs-bar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:0 0 14px}
.rs-ch{position:relative;flex:1 1 230px;min-width:0}
.rs-lo{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:16px;height:16px;
  color:var(--faint);pointer-events:none}
.rs-lo svg{width:16px;height:16px;display:block}
.rs-q{width:100%;padding:10px 14px 10px 38px;font:inherit;font-size:14.5px;color:var(--ink);
  background:var(--cloud);border:1.5px solid var(--line);border-radius:var(--r)}
.rs-q::placeholder{color:var(--faint)}
.rs-q:focus{outline:none;border-color:var(--lagoon);background:var(--shell);
  box-shadow:0 0 0 3px var(--tint)}
.rs-fs{display:flex;gap:6px;flex-wrap:wrap}
.rs-f{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border-radius:999px;
  border:1.5px solid var(--line);background:var(--shell);cursor:pointer;
  font:700 13px/1 'PJS',sans-serif;color:var(--muted);transition:border-color .15s,color .15s}
.rs-f:hover{border-color:var(--lagoon);color:var(--ink)}
.rs-f b{font-size:11.5px;font-weight:800;padding:2px 6px;border-radius:999px;
  background:var(--sandDeep);color:var(--muted)}
.rs-f.on{border-color:var(--service,var(--lagoon));color:var(--service,var(--lagoonDeep));
  background:color-mix(in srgb,var(--service,var(--lagoon)) 8%,#fff)}
.rs-f.on b{background:color-mix(in srgb,var(--service,var(--lagoon)) 18%,#fff);
  color:var(--service,var(--lagoonDeep))}
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .rs-f.on{background:var(--tint);color:var(--lagoonDeep)}
  .rs-f.on b{background:var(--soft);color:var(--lagoonDeep)}
}
/* L'en-tete de colonnes : c'est lui qui trie, il doit donc RESSEMBLER a des
   boutons — sans devenir un tableau HTML brut (interdit du brief). */
.rs-th{display:grid;gap:10px;align-items:center;padding:0 4px 8px;
  grid-template-columns:minmax(0,1.2fr) minmax(0,2fr) 56px 104px 172px;
  border-bottom:1px solid var(--line)}
.rs-th.resto{grid-template-columns:minmax(0,1.2fr) minmax(0,2fr) 56px 172px}
.rs-th button{display:inline-flex;align-items:center;gap:5px;border:0;background:none;
  padding:4px 0;cursor:pointer;color:var(--muted);text-align:left;
  font:800 10.5px/1.2 'PJS',sans-serif;letter-spacing:.09em;text-transform:uppercase}
.rs-th button:hover{color:var(--ink)}
.rs-th button.on{color:var(--service,var(--lagoonDeep))}
.rs-th button i{font-style:normal;font-size:8px;line-height:1}
.rs-body{display:flex;flex-direction:column}
.rs-vide{padding:34px 10px;text-align:center}
.rs-vide p{margin:0 0 14px;color:var(--muted);font-size:14.5px}
.rs-pied{display:flex;align-items:center;gap:14px;margin:14px 0 0;padding:12px 4px 0;
  border-top:1px solid var(--lineCool)}
.rs-cpt{font-size:13px;font-weight:700;color:var(--faint);font-variant-numeric:tabular-nums}
@media (max-width:700px){ .rs-th{display:none} }

/* ── FINANCES : deux colonnes, et une jauge plutot qu'un nombre nu ───────── */
.fi-2{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  align-items:start;margin:4px 0 0}
.fi-col{min-width:0}
.fi-jauge{flex:0 0 84px;height:6px;border-radius:999px;background:var(--sandDeep);overflow:hidden}
.fi-jauge i{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--service,var(--lagoon)),
    color-mix(in srgb,var(--service,var(--lagoon)) 55%,#fff))}
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .fi-jauge i{background:var(--lagoon)}
}

/* ── la ligne de tableau : alignee sur l'en-tete, au pixel ───────────────── */
.rt{display:grid;gap:10px;align-items:center;padding:13px 4px;
  grid-template-columns:minmax(0,1.2fr) minmax(0,2fr) 56px 104px 172px;
  border-bottom:1px solid var(--lineCool);font-size:14px}
.rt.resto{grid-template-columns:minmax(0,1.2fr) minmax(0,2fr) 56px 172px}
.rt:last-child{border-bottom:0}
.rt:hover{background:var(--cloud)}
.rt-d{display:flex;flex-direction:column;gap:1px;min-width:0}
.rt-d b{font-weight:700;color:var(--ink);font-size:13.5px;white-space:nowrap}
.rt-d span{font-size:12px;color:var(--faint);white-space:nowrap}
.rt-q{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-weight:600;color:var(--inkSoft)}
.rt-n{font-variant-numeric:tabular-nums;color:var(--muted);font-size:13.5px}
.rt-m{font-variant-numeric:tabular-nums;font-weight:700;color:var(--ink);white-space:nowrap}
.rt-e{display:flex;align-items:center;gap:8px;justify-content:flex-end;flex-wrap:nowrap}
.rt-b{border:1.5px solid var(--line);background:var(--shell);border-radius:999px;
  padding:5px 11px;font:700 12px/1 'PJS',sans-serif;color:var(--inkSoft);cursor:pointer}
.rt-b:hover{border-color:var(--lagoon);color:var(--lagoonDeep)}
@media (max-width:700px){
  .rt,.rt.resto{grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;padding:14px 4px}
  .rt-d{grid-column:1;order:1}
  .rt-q{grid-column:1;order:3;white-space:normal}
  .rt-n{display:none}
  .rt-m{grid-column:2;order:2;text-align:right}
  .rt-e{grid-column:2;order:4;justify-content:flex-end}
}

/* ── les demandes en attente : une grille, pas une colonne ───────────────── */
.rq{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(288px,1fr))}
.rq .rc{margin:0;border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;
  background:var(--shell);box-shadow:var(--sh)}

/* ── la journee en bande de chaleur ──────────────────────────────────────── */
.tb-hm{padding:26px 0 0}
.tb-hmr{display:flex;gap:2px;height:56px}
.tb-hc{flex:1;border-radius:5px;min-width:0;position:relative;
  background:color-mix(in srgb,var(--service,var(--lagoon))
    calc(var(--n,0) * 88%), var(--cloud));
  transition:transform .15s ease}
.tb-hc.pic{box-shadow:0 0 0 1.5px var(--shell),0 0 0 3px
  color-mix(in srgb,var(--service,var(--lagoon)) 45%,transparent)}
.tb-hc:hover{transform:scaleY(1.06)}
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .tb-hc{background:var(--lagoon);opacity:calc(.12 + var(--n,0) * .88)}
}
.tb-hmx{position:relative;height:16px;margin:8px 0 0}
.tb-hmx span{position:absolute;transform:translateX(-50%);font:700 10.5px/1 'PJS',sans-serif;
  color:var(--faint);font-variant-numeric:tabular-nums}
.tb-hmx span:first-child{transform:none}
.tb-hmx span:last-child{transform:translateX(-100%)}

/* ── les taux : une grille reguliere, pas deux puis un ───────────────────── */
.tb-tx{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(124px,1fr))}
.tb-tx .tb-t{padding:14px 15px}

/* La legende n'etait qu'une etiquette. Elle COMMANDE maintenant le trait de la
   periode precedente : sur une courbe chargee, pouvoir l'eteindre est ce qui
   separe un graphique d'une image. */
.lg-b{cursor:pointer;border:0;background:none;padding:2px 4px;border-radius:8px;
  font:inherit;color:inherit;transition:opacity .15s}
.lg-b:hover{background:var(--sandDeep)}
.tb-graph.sans-prec .tb-prec,.tb-graph.sans-prec .tb-vpa{display:none}
.lg-b[aria-pressed="false"]{opacity:.45;text-decoration:line-through}

/* ── depuis quand une demande attend ─────────────────────────────────────── */
.rc-age{display:inline-flex;align-items:center;gap:5px;margin:6px 0 0;padding:3px 9px;
  border-radius:999px;background:var(--sandDeep);color:var(--muted);
  font:700 11.5px/1.4 'PJS',sans-serif}
.rc-age::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--faint)}
/* Passe l'or au-dela de 24 h : la couleur d'avertissement du systeme, jamais
   le rouge — rien n'est en panne, quelqu'un attend. */
.rc-age.vieux{background:var(--goldSoft);color:var(--goldInk)}
.rc-age.vieux::before{background:var(--gold)}