/* ═══════════════════════════════════════════════════════════════════════════
   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} }

/* MON PROFIL — 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`. */
/* ── Mon compte ──────────────────────────────────────────────────────────── */
.cp-h{margin:6px 0 0;font-size:12.5px;color:var(--muted);line-height:1.5}
.cp-ph{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.cp-av{width:76px;height:76px;border-radius:50%;flex:none;display:grid;place-items:center;overflow:hidden;
  background:var(--lagoon);color:#fff;font-family:'Bricolage',sans-serif;font-weight:800;font-size:30px}
.cp-av img{width:100%;height:100%;object-fit:cover;display:block}
.cp-badges{display:flex;flex-wrap:wrap;gap:8px}
.cp-b{font-size:13px;font-weight:700;padding:7px 13px;border-radius:999px;background:var(--sandDeep);
  color:var(--muted)}
.cp-b.ok{background:var(--tropicSoft);color:var(--tropic)}
.cp-barre{position:sticky;bottom:0;display:flex;align-items:center;gap:14px;padding:16px 0;
  background:linear-gradient(180deg,rgba(251,250,247,0) 0%,var(--cloud) 38%)}
.cp-barre .ab{padding:12px 22px;font-size:15px}
.cp-ok{margin:0;font-size:14px;font-weight:700;color:var(--tropic);opacity:0;transition:opacity .2s}
.cp-ok.on{opacity:1}

.cp-verif{margin:-4px 0 18px;padding:14px 16px;border:1px solid var(--goldSoft);
  border-radius:14px;background:#FFFDF6;max-width:460px}
.cp-verif .cp-h{margin:0 0 10px}
.cp-vl{display:flex;gap:8px;flex-wrap:wrap}
.rg-msg{margin:12px 0 0;padding:10px 13px;border-radius:14px;font-size:14px}
.rg-msg.ok{background:var(--tropicSoft);color:var(--tropic)}
.rg-msg.ko{background:var(--coralSoft);color:var(--coralInk)}
.rg-msg[hidden]{display:none}