/*
|--------------------------------------------------------------------------
| Espace client & Studio — LE SOCLE COMMUN de la feuille (v4.17.0 §C)
|--------------------------------------------------------------------------
|
| Portée de `MAQUETTE-ESPACE-CLIENT-V2.html` (v4.14.0 §3), puis partagée : depuis la v4.17.0,
| l'app du client (`client.*`, `app.css`) et l'app de l'agence (`studio.*`, `studio.css`)
| importent TOUTES DEUX cette feuille, et n'ajoutent chacune que ce qui leur est propre. Les
| jetons, l'en-tête, les tuiles, les cartes, les pastilles, le fil de conversation, les
| formulaires, la barre du bas, la feuille et la cloche sont écrits ICI, une fois — pas recopiés.
|
| ⚠️ CSS NATIF, sans Tailwind et sans la moindre dépendance externe : la politique de sécurité
| du socle interdit tout CDN (`default-src 'self'`), et la police Plus Jakarta Sans est
| auto-hébergée dans `public/fonts/plus-jakarta-sans/` — c'est la coquille Blade qui l'appelle.
|
| ⚠️ Feuille SÉPARÉE du thème Filament : un maître d'ouvrage — ou un gestionnaire sur son
| téléphone — n'a aucune raison de télécharger le thème du back-office.
|
| v4.17.0 §C — LA PALETTE DE MARQUE, PAR THÈME. Les valeurs de `--accent` / `--gold` posées sur
| `:root` ci-dessous sont celles de la maquette (indigo / or) : elles servent aux écrans qui
| n'ont pas encore de marque (la porte, avant connexion). Dès qu'une coquille porte
| `data-palette`, ce sont ses variables PAR THÈME (`--accent-clair`, `--accent-sombre`, …),
| calculées par `App\Support\EspaceClient\PaletteTheme` avec un contraste mesuré, qui sont
| mappées sur les jetons — voir le bloc « palette par thème » plus bas. Plus aucune couleur de
| marque n'entre directement dans `--accent`, `--gold` ou `--accent-ink`.
*/

:root{
  --bg:#f0eee8; --stage:#e7e4db;
  --surface:#ffffff; --surface-2:#faf9f6;
  --ink:#1b1d25; --muted:#6c6f7c; --faint:#9a9ca7;
  --line:#e9e6df;
  --accent:#3f3d91; --accent-ink:#ffffff; --accent-soft:#ecebfa;
  --gold:#9a6f1e; --gold-strong:#7d5a15; --gold-soft:#fbf2da; --gold-line:#eaddb6;
  --good:#2f7d57; --good-soft:#e4f1ea;
  --bad:#a3342f; --bad-soft:#fbe9e7; --bad-line:#efc9c5;
  --shadow:0 1px 2px rgba(20,20,40,.04), 0 8px 26px rgba(20,20,45,.07);
  --shadow-lift:0 2px 6px rgba(20,20,40,.06), 0 18px 44px rgba(20,20,45,.12);
  /* v4.16.0 §B — Les jetons ajoutés par la passe de mode sombre. Ils existent parce que trois
     endroits portaient une couleur EN DUR ou un couple illisible une fois le thème inversé :
       --plaque  : l'aplat clair sous le logo de l'agence, dans LES DEUX thèmes ;
       --net-*   : les badges de canaux, qui étaient violet-sur-violet en sombre ;
       --gold-ink: l'encre d'une pastille dorée — blanche sur or clair, elle ne se lisait pas ;
       --ombre-ink : l'encre posée sur les fonds sombres composés (visuel d'une publication). */
  --plaque:#ffffff; --plaque-line:#e2ded4;
  --net-bg:#ecebfa; --net-ink:#312f7a; --net-line:#d9d7f4;
  --gold-ink:#ffffff;
  --ombre-ink:#ffffff; --ombre-voile:rgba(255,255,255,.18);
  --r-lg:20px; --r-md:15px; --r-sm:11px;
  --ff:"Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---------- v4.17.2 §C — AUCUN CHAMP NE FAIT ZOOMER L'IPHONE ----------

   Safari sur iOS ZOOME la page au moment où l'on touche un champ dont la taille de police est
   INFÉRIEURE À 16 PIXELS. Ce n'est pas un réglage, ce n'est pas contournable par une classe :
   c'est le comportement du système, et il vaut pour tout `input` et tout `textarea`. Le composeur
   du fil était à 14px, les champs de la porte à 14px, la remarque de modification à 13px, la
   recherche de Studio à 13,5px : écrire un message faisait sauter l'écran, et le client devait
   dézoomer à la main pour retrouver la page.

   La règle est donc posée ICI, une fois, pour les deux applications — et chaque règle qui suit,
   dans cette feuille comme dans celle de Studio, respecte le plancher. 16px reste une taille
   parfaitement lisible sur un téléphone ; là où la maquette voulait un champ discret, c'est le
   padding et la hauteur qui font la discrétion, jamais la taille de la police.

   ⚠️ La ceinture tient seule ; les bretelles sont dans le gabarit (`maximum-scale=1` sur le
   `<meta viewport>` des deux apps). Un champ nouveau qui oublierait la règle ne ferait donc pas
   sauter l'écran pour autant. */
input,textarea,select{font-size:16px}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#111219; --stage:#0c0d12;
    --surface:#1c1e27; --surface-2:#23252f;
    --ink:#ecedf2; --muted:#9a9dab; --faint:#71747f;
    --line:#2b2d38;
    --accent:#928cf3; --accent-ink:#12131a; --accent-soft:#26254e;
    --gold:#e2b866; --gold-strong:#f0cd86; --gold-soft:#332c19; --gold-line:#4a4025;
    --good:#6cbf92; --good-soft:#1d3a2b;
    --bad:#e58b84; --bad-soft:#3a1f1d; --bad-line:#5c2f2b;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.4);
    --shadow-lift:0 2px 6px rgba(0,0,0,.35), 0 20px 48px rgba(0,0,0,.5);
    --plaque:#f2f2f6; --plaque-line:#3a3c49;
    --net-bg:#3a3873; --net-ink:#eceafd; --net-line:#514ea0;
    --gold-ink:#241c0c;
    --ombre-ink:#ffffff; --ombre-voile:rgba(255,255,255,.22);
  }
}
:root[data-theme="dark"]{
  --bg:#111219; --stage:#0c0d12;
  --surface:#1c1e27; --surface-2:#23252f;
  --ink:#ecedf2; --muted:#9a9dab; --faint:#71747f;
  --line:#2b2d38;
  --accent:#928cf3; --accent-ink:#12131a; --accent-soft:#26254e;
  --gold:#e2b866; --gold-strong:#f0cd86; --gold-soft:#332c19; --gold-line:#4a4025;
  --good:#6cbf92; --good-soft:#1d3a2b;
  --bad:#e58b84; --bad-soft:#3a1f1d; --bad-line:#5c2f2b;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.4);
  --shadow-lift:0 2px 6px rgba(0,0,0,.35), 0 20px 48px rgba(0,0,0,.5);
  --plaque:#f2f2f6; --plaque-line:#3a3c49;
  --net-bg:#3a3873; --net-ink:#eceafd; --net-line:#514ea0;
  --gold-ink:#241c0c;
  --ombre-ink:#ffffff; --ombre-voile:rgba(255,255,255,.22);
}


/* ---------- v4.17.0 §C — la palette de marque, par thème ----------
   La coquille pose, sur l'élément qui porte `data-palette`, les sept jetons de marque en DEUX
   variantes — claire et sombre —, calculées côté serveur avec un contraste ≥ 4,5 : 1 sur les
   fonds du thème. Ici, on ne fait que CHOISIR la variante selon le thème actif. C'est ce qui
   met fin aux icônes et aux textes invisibles en sombre : la marque n'écrase plus les jetons,
   elle les alimente, déclinée. */
[data-palette]{
  --accent:var(--accent-clair);--accent-ink:var(--accent-ink-clair);--accent-soft:var(--accent-soft-clair);
  --gold:var(--gold-clair);--gold-strong:var(--gold-strong-clair);--gold-soft:var(--gold-soft-clair);--gold-line:var(--gold-line-clair);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) [data-palette]{
    --accent:var(--accent-sombre);--accent-ink:var(--accent-ink-sombre);--accent-soft:var(--accent-soft-sombre);
    --gold:var(--gold-sombre);--gold-strong:var(--gold-strong-sombre);--gold-soft:var(--gold-soft-sombre);--gold-line:var(--gold-line-sombre);
  }
}
:root[data-theme="dark"] [data-palette]{
  --accent:var(--accent-sombre);--accent-ink:var(--accent-ink-sombre);--accent-soft:var(--accent-soft-sombre);
  --gold:var(--gold-sombre);--gold-strong:var(--gold-strong-sombre);--gold-soft:var(--gold-soft-sombre);--gold-line:var(--gold-line-sombre);
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--ff);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button{font-family:inherit;cursor:pointer}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
svg{display:block}
.hide{display:none!important}

/* ---------- coquille ----------
   La maquette tenait dans un cadre de 398 × 812. Ici, c'est une page : la colonne est centrée
   et bornée, le défilement est celui du navigateur (et non celui d'un cadre intérieur, qui
   sur un téléphone se bat avec la barre d'adresse), l'en-tête et la barre du bas collent. */
.app{display:flex;flex-direction:column;min-height:100dvh;background:var(--bg);
  max-width:720px;margin:0 auto}
@media (min-width:721px){
  body{background:var(--stage)}
  .app{border-left:1px solid var(--line);border-right:1px solid var(--line);box-shadow:var(--shadow-lift)}
}

/* header */
/* v4.16.0 §J — Les zones sûres. Sur un iPhone à encoche, `viewport-fit=cover` fait passer la page
   SOUS la barre d'état : sans ce complément de marge, la première ligne de l'en-tête se glisse
   derrière l'heure. La barre du bas, elle, gérait déjà sa marge (v4.14.0). */
.top{position:sticky;top:0;z-index:30;background:var(--surface);border-bottom:1px solid var(--line);
  padding:calc(16px + env(safe-area-inset-top)) calc(18px + env(safe-area-inset-right)) 12px calc(18px + env(safe-area-inset-left))}
.top .row1{display:flex;align-items:center;justify-content:space-between;gap:10px}
.brand{display:flex;align-items:center;gap:9px;min-width:0}
.wordmark{font-weight:800;font-size:16px;letter-spacing:-.01em;color:var(--accent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand img{max-height:26px;width:auto;display:block}
/* v4.16.0 §B — LA PLAQUE. Un logo d'agence est dessiné pour du papier blanc ; posé nu sur le fond
   sombre de l'application, un glyphe sombre disparaît. On le pose donc sur un aplat clair OPAQUE,
   dans les deux thèmes — plutôt que d'exiger de chaque agence une variante sombre qu'elle n'a pas. */
.plaque{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  background:var(--plaque);border:1px solid var(--plaque-line);border-radius:9px;padding:4px 7px}
.plaque img{max-height:22px;max-width:132px;width:auto;display:block}
.mini{display:flex;align-items:center;gap:8px;flex:0 0 auto}
/* v4.16.0 §J — 44 px de zone touchable autour d'un bouton de 34 px : c'est le minimum d'Apple, et
   la pastille reste dessinée à sa taille. */
.iconbtn{width:34px;height:34px;border-radius:10px;border:1px solid var(--line);background:var(--surface-2);position:relative;
  color:var(--muted);display:grid;place-items:center;padding:0}
.iconbtn:hover{color:var(--ink)}
.iconbtn::after{content:"";position:absolute;inset:-5px}
.crest{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--gold-soft),color-mix(in srgb,var(--gold) 25%,transparent));
  display:grid;place-items:center;font-weight:800;font-size:12px;color:var(--gold-strong);border:1px solid var(--gold-line);overflow:hidden}
.crest img{width:100%;height:100%;object-fit:contain}
/* v4.17.0 §C — Un logo (client, agence, installation) est TOUJOURS sur plaque claire, dans les
   deux thèmes — y compris quand il tient dans un écusson ou un avatar rond. */
.crest:has(img),.post .pav:has(img){background:var(--plaque);border-color:var(--plaque-line)}
.top .row2{display:flex;align-items:center;gap:9px;margin-top:11px;flex-wrap:wrap}
.top h2{margin:0;font-size:15px;font-weight:700;letter-spacing:-.01em;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.chip{font-size:11px;font-weight:600;color:var(--muted);background:var(--surface-2);border:1px solid var(--line);
  padding:3px 9px;border-radius:999px;white-space:nowrap}
.chip.select{padding:0}
.chip.select select{appearance:none;border:none;background:transparent;color:inherit;font:inherit;padding:3px 9px;border-radius:999px}

/* scroll area */
.scroll{flex:1 1 auto}
.screen{animation:fade .28s ease both;
  padding:18px calc(18px + env(safe-area-inset-right)) 26px calc(18px + env(safe-area-inset-left))}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.screen{animation:none}}

.eyebrow{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);margin:2px 0 10px}
.h1{font-size:22px;font-weight:800;letter-spacing:-.02em;margin:0 0 3px}
.sub{color:var(--muted);font-size:13.5px;margin:0 0 18px}

/* à valider hero */
.todo{background:var(--gold-soft);border:1px solid var(--gold-line);border-radius:var(--r-lg);
  padding:16px;position:relative;box-shadow:var(--shadow)}
.todo .lab{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--gold-strong);
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:11px}
.todo .lab .dot{width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px color-mix(in srgb,var(--gold) 22%,transparent);flex:0 0 auto}
.todo .item{background:var(--surface);border-radius:var(--r-md);padding:13px 14px}
.todo .item + .item{margin-top:9px}
/* v4.16.0 §I — Un élément du héros est désormais un LIEN vers l'écran où il se décide : il lui
   faut le bloc et la couleur d'un texte, pas ceux d'un lien souligné. */
.todo a.item{display:block;color:inherit}
.todo a.item:hover{box-shadow:var(--shadow)}
.todo .kind{font-size:11px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.05em}
.todo .ttl{font-weight:700;font-size:15px;line-height:1.3;margin:5px 0 4px;letter-spacing:-.01em}
.todo .meta{color:var(--muted);font-size:12.5px}
.todo .meta b{color:var(--gold-strong);font-weight:700}
.todo .acts{display:flex;gap:9px;margin-top:12px}
.todo.calme{background:var(--good-soft);border-color:color-mix(in srgb,var(--good) 30%,transparent)}
.todo.calme .lab{color:var(--good)}
.todo.calme .lab .dot{background:var(--good);box-shadow:none}
.todo .rien{color:var(--muted);font-size:13px;margin:0}

/* v4.16.0 §J — 44 px de haut : le minimum d'une cible tactile, sur un écran qu'on tient d'une
   main dans un couloir. */
.btn{border:none;border-radius:11px;padding:11px 15px;font-weight:700;font-size:13.5px;letter-spacing:.01em;min-height:44px;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;flex:1}
.btn.primary{background:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{filter:brightness(1.06)}
.btn.ghost{background:var(--surface-2);color:var(--ink);border:1px solid var(--line);flex:0 0 auto;padding:11px 16px}
.btn.wide{width:100%}
.btn[disabled]{opacity:.6;cursor:not-allowed}

/* status line */
.status{display:flex;gap:12px;margin:16px 2px 6px;color:var(--muted);font-size:12.5px;flex-wrap:wrap}
.status span,.status a{display:inline-flex;align-items:center;gap:6px;color:inherit}
.status a:hover{color:var(--accent)}
.status b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.status .ic{color:var(--accent);flex:0 0 auto}

/* section label */
.slabel{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin:22px 2px 11px}

/* tiles */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:14px;text-align:start;
  display:flex;flex-direction:column;gap:9px;box-shadow:var(--shadow);color:inherit}
.tile:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
.tile .tic{width:34px;height:34px;border-radius:10px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center}
.tile .tn{font-size:23px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1}
.tile .tl{font-size:13px;font-weight:600;color:var(--ink)}
.tile .tm{font-size:11.5px;color:var(--muted);margin-top:-4px}
.tile .flag{font-size:11px;font-weight:700;color:var(--gold-strong);background:var(--gold-soft);border:1px solid var(--gold-line);
  padding:2px 8px;border-radius:999px;align-self:flex-start}

/* next card */
.next{margin-top:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:14px;
  display:flex;align-items:center;gap:12px;box-shadow:var(--shadow)}
.next .cal{flex:0 0 auto;width:46px;height:48px;border-radius:11px;border:1px solid var(--line);overflow:hidden;text-align:center;background:var(--surface-2)}
.next .cal .m{background:var(--accent);color:var(--accent-ink);font-size:10px;font-weight:700;padding:3px 0;text-transform:uppercase;letter-spacing:.05em}
.next .cal .d{font-size:19px;font-weight:800;padding:3px 0;font-variant-numeric:tabular-nums}
.next .nt{font-weight:700;font-size:14px;letter-spacing:-.01em}
.next .nm{color:var(--muted);font-size:12.5px;margin-top:2px}

/* list rows */
.list{display:flex;flex-direction:column;gap:9px}
.rowc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:13px 14px;
  display:flex;align-items:center;gap:12px;box-shadow:var(--shadow);text-align:start;color:inherit;width:100%}
.rowc:hover{border-color:color-mix(in srgb,var(--accent) 35%,var(--line))}
.rowc .fic{flex:0 0 auto;width:38px;height:38px;border-radius:10px;background:var(--surface-2);color:var(--accent);display:grid;place-items:center;border:1px solid var(--line)}
.rowc .body{min-width:0;flex:1}
.rowc .nm{font-weight:700;font-size:14px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rowc .mt{color:var(--muted);font-size:12px;margin-top:2px}
.rowc .chev{color:var(--faint);flex:0 0 auto}
.pill{font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;white-space:nowrap}
.pill.warn{color:var(--gold-strong);background:var(--gold-soft);border:1px solid var(--gold-line)}
.pill.ok{color:var(--good);background:var(--good-soft);border:1px solid color-mix(in srgb,var(--good) 30%,transparent)}
.pill.prep{color:var(--muted);background:var(--surface-2);border:1px solid var(--line)}
/* v4.17.1 §E — Les deux pastilles de Studio rejoignent le socle : la maquette V3 les emploie côté client. */
.pill.acc{color:var(--accent);background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 25%,transparent)}
.pill.bad{color:var(--bad);background:var(--bad-soft);border:1px solid color-mix(in srgb,var(--bad) 25%,transparent)}

/* compte */
.acct{display:flex;align-items:center;gap:13px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:16px;box-shadow:var(--shadow)}
.acct .av{width:52px;height:52px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-weight:800;font-size:18px;flex:0 0 auto}
.acct .nm{font-weight:800;font-size:16px;letter-spacing:-.01em}
.acct .rl{color:var(--muted);font-size:12.5px;margin-top:1px}
.opt{margin-top:11px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:14px;
  display:flex;align-items:center;gap:12px;box-shadow:var(--shadow)}
/* v4.17.1 §E — La pastille d'icône du compte en teinte DOUCE, comme les tuiles (maquette V3). */
.opt .oic{width:34px;height:34px;border-radius:9px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;flex:0 0 auto}
.opt .ob{flex:1;min-width:0}
.opt .on{font-weight:700;font-size:14px;display:block}
.opt .om{color:var(--muted);font-size:12px;margin-top:1px;display:block;line-height:1.4}
.linkbtn{width:100%;margin-top:11px;background:transparent;border:none;color:var(--muted);font-weight:600;font-size:13px;padding:10px}
.linkbtn:hover{color:var(--accent)}

/* ---------- v4.17.3 §B3 — LE RETOUR AU TAP ----------
   Depuis que la navigation est côté client (`wire:navigate`), l'écran suivant peut mettre un
   instant à venir : sans retour visuel, l'appui semble n'avoir rien fait et l'on tape deux fois.
   `touch-action:manipulation` supprime le demi-tour d'attente que le navigateur s'accorde pour
   guetter un double-tap ; le surlignage natif d'iOS est remplacé par un état `:active` dessiné,
   qui existe dans les deux thèmes. Tout ce qui mène à un écran le porte. */
.nav a,.tabs a,.side .snav a,.side .sesp a,.tile,.rowc,.pubcard,.item,.progcard,.opt,.btn,.iconbtn,.linkbtn{
  -webkit-tap-highlight-color:transparent;touch-action:manipulation}
.nav a:active,.tabs a:active,.side .snav a:active,.side .sesp a:active{opacity:.55}
.tile:active,.rowc:active,.pubcard:active,.item:active,.progcard:active,.opt:active{
  background:var(--surface-2);transform:scale(.985)}
.btn:active,.iconbtn:active{transform:scale(.97)}
@media (prefers-reduced-motion:reduce){
  .tile:active,.rowc:active,.pubcard:active,.item:active,.progcard:active,.opt:active,.btn:active,.iconbtn:active{transform:none}
}

/* bottom nav */
/* ⚠️ v4.17.4 §B — `z-index:29`, UN DE MOINS QUE L'EN-TÊTE, ET CE N'EST PAS UN DÉTAIL.
   `.top` colle en haut à z-index 30 : il crée un CONTEXTE D'EMPILEMENT, et la cloche vit dedans
   (voile z-45, feuille z-46) — ces valeurs ne comptent donc qu'entre elles, pas contre la page.
   Au dehors, c'est l'en-tête qui porte la feuille, et la barre du bas venait APRÈS dans le DOM :
   à z égal, le dernier peint par-dessus, et la barre recouvrait la fin de la liste — deux
   notifications inatteignables sur un téléphone. Un cran plus bas, l'en-tête (et donc la feuille
   ET son voile) passe devant : la dernière ligne se lit, et un tap sur la barre touche le voile,
   ce qui ferme la feuille — le comportement modal attendu. Feuille fermée, rien ne change :
   l'en-tête et la barre ne se chevauchent jamais. */
.nav{position:sticky;bottom:0;z-index:29;flex:0 0 auto;display:flex;background:var(--surface);border-top:1px solid var(--line);
  padding:8px 3px calc(8px + env(safe-area-inset-bottom))}
.nav a{flex:1 1 0;min-width:0;min-height:44px;border:none;background:none;padding:7px 2px 6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  color:var(--faint);font-size:9.5px;font-weight:600;letter-spacing:0;position:relative;white-space:nowrap}
.nav a .nic{width:22px;height:22px}
.nav a.on{color:var(--accent)}
.nav a.on .nic{transform:translateY(-1px)}
.nav .badge{position:absolute;top:2px;inset-inline-end:calc(50% - 20px);min-width:16px;height:16px;padding:0 4px;border-radius:999px;
  background:var(--gold);color:var(--gold-ink);font-size:10px;font-weight:800;display:grid;place-items:center}

/* progress ring */
.ring{position:relative;border-radius:50%;display:grid;place-items:center;flex:0 0 auto}
.ring::before{content:"";position:absolute;inset:7px;border-radius:50%;background:var(--surface)}
.ring>span{position:relative;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.03em;line-height:1}
.ring.sm{width:58px;height:58px}
.ring.sm>span{font-size:14px}
.ring.sm::before{inset:6px}
.ring.lg{width:132px;height:132px}
.ring.lg>span{font-size:34px}
.ring.lg>span small{display:block;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:2px}

/* avancement card (accueil) */
.progcard{margin-top:13px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:15px;display:flex;align-items:center;gap:15px;box-shadow:var(--shadow);width:100%;text-align:start;color:inherit}
.progcard:hover{border-color:color-mix(in srgb,var(--accent) 35%,var(--line))}
.progcard .pgt{flex:1;min-width:0}
.progcard .pgl{font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--faint)}
.progcard .pgm{font-weight:800;font-size:16px;letter-spacing:-.01em;margin:3px 0 2px}
.progcard .pgs{color:var(--muted);font-size:12.5px;font-variant-numeric:tabular-nums}
.progcard .arrow{color:var(--accent);flex:0 0 auto}

/* empilement propre des paires titre/valeur */
.progcard .pgl,.progcard .pgm,.progcard .pgs,.rowc .nm,.rowc .mt{display:block}

/* ---------- la porte (connexion, mot de passe) ----------
   Même charte, même typographie, aucun chrome Filament : celui qui entre ici et celui qui est
   déjà entré doivent voir la même application. */
.porte{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:32px 20px calc(32px + env(safe-area-inset-bottom));
  background:radial-gradient(1100px 520px at 50% -8%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%), var(--bg)}
.porte .carte{width:100%;max-width:392px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:22px;box-shadow:var(--shadow-lift)}
.porte .marque{display:flex;align-items:center;justify-content:center;gap:9px;margin-bottom:18px}
.porte .marque img{max-height:34px;width:auto}
/* v4.17.0 §C2 — Le logo de la porte est sur PLAQUE, comme celui de l'en-tête : posé nu, un
   glyphe sombre disparaissait sur le fond sombre de la page de connexion. */
.porte .marque .plaque{padding:7px 12px;border-radius:12px}
.porte .marque .plaque img{max-height:34px;max-width:200px}
.porte h1{font-size:20px;font-weight:800;letter-spacing:-.02em;margin:0 0 4px;text-align:center}
.porte .intro{color:var(--muted);font-size:13px;margin:0 0 18px;text-align:center;line-height:1.5}
.champ{margin-bottom:13px}
.champ label{display:block;font-size:12px;font-weight:700;color:var(--muted);margin-bottom:6px}
.champ input[type=email],.champ input[type=password],.champ input[type=text]{width:100%;border:1px solid var(--line);background:var(--surface-2);
  border-radius:11px;padding:11px 12px;font-family:inherit;font-size:16px;color:var(--ink)}
.champ input:focus{outline:2px solid var(--accent);outline-offset:1px}
.coche{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);margin:4px 0 15px}
.alerte{border-radius:11px;padding:10px 12px;font-size:12.5px;line-height:1.45;margin-bottom:14px}
.alerte.mauvais{background:var(--bad-soft);border:1px solid var(--bad-line);color:var(--bad)}
.alerte.bon{background:var(--good-soft);border:1px solid color-mix(in srgb,var(--good) 30%,transparent);color:var(--good)}
.aide{display:flex;justify-content:center;gap:14px;margin-top:14px;font-size:12.5px;color:var(--muted)}
.aide a:hover{color:var(--accent)}
.porte .pied{margin-top:16px;font-size:11.5px;color:var(--faint);text-align:center}

/* ---------- choisir son espace ---------- */
.choix{padding:18px}
.choix .list{margin-top:14px}

/* ---------- v4.15.0 §1 — les publications ----------
   Portées de `MAQUETTE-ESPACE-CLIENT-V2.html`, écrans `publications` et `post` : mêmes classes,
   mêmes valeurs. Deux ajouts seulement, et pour une raison précise : la maquette dessinait un
   visuel FICTIF (un dégradé et du texte) là où l'application en affiche un VRAI — d'où
   `.visual.image` et `.pubthumb img`, qui posent une image sans la rogner ni la déformer. */

/* barre de retour */
.backbar{display:flex;align-items:center;gap:11px;margin:-2px 0 15px}
.backbar a,.backbar button{width:34px;height:34px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink);display:grid;place-items:center;padding:0;flex:0 0 auto}
/* v4.16.0 §J — La même zone touchable de 44 px que le bouton de thème, pour le même motif. */
.backbar a,.backbar button{position:relative}
.backbar a::after,.backbar button::after{content:"";position:absolute;inset:-5px}
.backbar .bt{font-weight:800;font-size:19px;letter-spacing:-.02em}

/* liste des publications */
.pubcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:11px;display:flex;gap:12px;align-items:center;box-shadow:var(--shadow);width:100%;text-align:start;color:inherit}
.pubcard:hover{border-color:color-mix(in srgb,var(--accent) 35%,var(--line))}
.pubthumb{flex:0 0 auto;width:60px;height:60px;border-radius:12px;display:grid;place-items:center;color:var(--ombre-ink);font-weight:800;font-size:9.5px;text-align:center;line-height:1.15;padding:6px;overflow:hidden;
  background:linear-gradient(140deg,var(--accent),color-mix(in srgb,var(--gold) 60%,var(--accent)))}
.pubthumb img{width:100%;height:100%;object-fit:cover;border-radius:12px}
.pubcard .pb{min-width:0;flex:1}
.pubcard .pk{font-size:10.5px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.04em}
.pubcard .pt{font-weight:700;font-size:13.5px;letter-spacing:-.01em;margin:3px 0 4px;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pubcard .pm{color:var(--muted);font-size:11.5px}
.pubcard .pk,.pubcard .pm{display:block}

/* le détail — l'aperçu tel qu'il paraîtra sur le réseau */
.post{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow)}
.post .phead{display:flex;align-items:center;gap:9px;padding:12px 13px}
.post .pav{width:34px;height:34px;border-radius:50%;background:var(--gold-soft);border:1px solid var(--gold-line);color:var(--gold-strong);display:grid;place-items:center;font-weight:800;font-size:10.5px;flex:0 0 auto;overflow:hidden}
.post .pav img{width:100%;height:100%;object-fit:contain}
.post .pn{font-weight:700;font-size:13.5px}
.post .pd{color:var(--muted);font-size:11.5px;margin-top:1px}
.post .pn,.post .pd{display:block}
.post .visual{aspect-ratio:4/5;
  background:radial-gradient(130% 90% at 18% 8%, color-mix(in srgb,var(--gold) 60%, transparent), transparent 55%), linear-gradient(150deg,var(--accent),#211f5c);
  display:flex;flex-direction:column;justify-content:flex-end;padding:22px;color:var(--ombre-ink);position:relative}
.post .visual .tag{position:absolute;top:14px;inset-inline-start:14px;font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:var(--ombre-voile);padding:4px 9px;border-radius:999px}
.post .visual .ev{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.85;margin-bottom:9px}
.post .visual .tt{font-size:25px;font-weight:800;letter-spacing:-.02em;line-height:1.1;text-wrap:balance}
.post .visual .yr{margin-top:12px;font-size:13px;font-weight:600;opacity:.9}
/* Un VRAI visuel : on le montre entier, sans le rogner à un format qui n'est pas le sien. */
.post .visual.image{aspect-ratio:auto;padding:0;display:block;background:var(--surface-2)}
.post .visual.image img{width:100%;height:auto;display:block}
/* v4.17.2 §F — « OUVRIR LE LIEN », SOUS le visuel et non dedans : une publication peut porter une
   image ET un lien (la photo est l'aperçu, le lien mène à la vidéo ou au dossier de la campagne).
   Dans le visuel, le bouton n'existait que faute d'image — il disparaissait dès qu'il y en avait
   une, et le lien devenait introuvable. Ici, il est là dans les deux cas. */
.post .lien-externe{display:flex;align-items:center;justify-content:center;gap:7px;
  padding:12px 14px;min-height:44px;border-top:1px solid var(--line);
  background:var(--accent-soft);color:var(--accent);font-size:13.5px;font-weight:700}
.post .lien-externe:hover{text-decoration:underline}
.post .cap{padding:13px 14px 15px;font-size:13px;line-height:1.5;color:var(--ink);white-space:pre-line}
.post .cap .tags{color:var(--accent);font-weight:600}
/* La légende arabe garde SA direction quelle que soit celle de la page : sur un espace en
   français, elle est le seul bloc RTL ; sur un espace en arabe, `start` la laisse en place. */
.post .cap.ar{direction:rtl;text-align:start;border-top:1px solid var(--line)}
/* v4.16.0 §J — `margin-inline-start` et non `margin-left` : en arabe, le bloc doit s'écarter de
   l'autre côté. Même raison partout ailleurs dans cette feuille. */
.nets{display:flex;gap:6px;margin-inline-start:auto;flex-wrap:wrap;justify-content:flex-end}
/* v4.16.0 §B — Les badges de canaux avaient leur propre couple de jetons parce que
   `--accent-soft` sur `--accent` donne, en sombre, du violet sur violet : lisible sur la maquette
   claire, illisible le soir. Le couple ci-dessous est franc dans les deux thèmes. */
.net{padding:0 7px;height:26px;min-width:26px;border-radius:8px;background:var(--net-bg);color:var(--net-ink);
  border:1px solid var(--net-line);display:grid;place-items:center;font-weight:800;font-size:10.5px}

/* le bloc de décision */
.valwrap{margin-top:14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:14px;box-shadow:var(--shadow)}
.valwrap .vst{font-size:12.5px;color:var(--muted);margin-bottom:12px}
.valwrap .vst b{color:var(--gold-strong)}
.actstack{display:flex;flex-direction:column;gap:9px}
.actrow{display:flex;gap:9px}
.btn.mod{background:var(--surface-2);color:var(--ink);border:1px solid var(--line)}
.modbox{margin-top:2px}
.modbox textarea,.addremark textarea{width:100%;border:1px solid var(--line);background:var(--surface-2);border-radius:11px;padding:10px 12px;font-family:inherit;font-size:16px;line-height:1.4;color:var(--ink);resize:vertical;min-height:66px}
.modbox .send{margin-top:8px}
.apercu{border:1px solid var(--line);background:var(--surface-2);border-radius:11px;padding:12px;margin-bottom:11px}
.apercu .al{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:6px}
.apercu .aj{font-weight:700;font-size:13px;margin-bottom:6px}
.apercu .ac{font-size:12px;line-height:1.5;color:var(--muted);white-space:pre-line}
.apercu .ad{font-size:11.5px;color:var(--faint);margin-top:8px}

/* la conversation */
.remarks{margin-top:18px}
.remark{display:flex;gap:9px;margin-bottom:12px}
.remark .rav{flex:0 0 auto;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:10.5px}
.remark .rav.a{background:var(--accent-soft);color:var(--accent)}
.remark .rav.c{background:var(--gold-soft);color:var(--gold-strong);border:1px solid var(--gold-line)}
.remark .rb{background:var(--surface);border:1px solid var(--line);border-radius:13px;border-start-start-radius:4px;padding:9px 12px;box-shadow:var(--shadow);min-width:0}
.remark .who{display:block;font-size:11.5px;font-weight:700;margin-bottom:4px}
.remark .who span{color:var(--faint);font-weight:500;margin-inline-start:6px}
.remark .tx{display:block;font-size:12.5px;line-height:1.45;white-space:pre-line}
.remark .rb.dem{background:var(--gold-soft);border-color:var(--gold-line)}
.remark .rb.dem .who{color:var(--gold-strong)}
.remark .rb .rtag{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--gold-strong);background:color-mix(in srgb,var(--gold) 16%,transparent);padding:2px 7px;border-radius:999px;margin-bottom:5px}
.daysep{text-align:center;font-size:11px;font-weight:600;color:var(--faint);margin:4px 0 12px}

/* ---------- v4.17.1 §C/§D — la bannière d'installation, et les gestes ----------
   En tête de l'accueil tant qu'on n'est pas installé (le script la révèle) ; un rappel sur Compte.
   Fond en teinte douce CORRIGÉE (§A), icône sur accent, bouton accent — lisible en clair et en
   sombre. Les gestes iPhone et Android sont toujours écrits tous les deux ; la plateforme
   détectée passe en premier (`.mienne`). */
.install{background:linear-gradient(180deg,var(--accent-soft),var(--surface));border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));
  border-radius:var(--r-md);padding:12px 13px;box-shadow:var(--shadow);margin-bottom:16px}
.install-ligne{display:flex;gap:12px;align-items:center}
.install .ico{flex:0 0 auto;width:38px;height:38px;border-radius:11px;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center}
.install .tx{flex:1;min-width:0}
.install .tt{display:block;font-weight:700;font-size:13.5px;letter-spacing:-.01em}
.install .mm{display:block;color:var(--muted);font-size:11.5px;margin-top:2px;line-height:1.35}
.install .go{flex:0 0 auto;border:none;background:var(--accent);color:var(--accent-ink);font-weight:700;font-size:12px;padding:8px 12px;border-radius:9px;min-height:36px}
.install .x{flex:0 0 auto;border:none;background:none;color:var(--faint);padding:4px;position:relative;cursor:pointer}
.install .x::after{content:"";position:absolute;inset:-8px}
.install .x:hover{color:var(--ink)}
.install-etapes{margin-top:10px;padding-top:10px;border-top:1px solid color-mix(in srgb,var(--accent) 20%,var(--line))}
.steps{display:flex;flex-direction:column;gap:8px}
.step{display:flex;gap:9px;align-items:flex-start;font-size:12px;color:var(--ink);line-height:1.45}
.step b{font-weight:700}
.step .pf{flex:0 0 auto;font-size:10px;font-weight:800;color:var(--accent);background:var(--accent-soft);border-radius:6px;padding:2px 7px;letter-spacing:.04em;text-transform:uppercase;margin-top:1px}
.step.mienne .pf{background:var(--accent);color:var(--accent-ink)}
.opt .steps{flex:1 1 100%;margin-top:8px}

/* ---------- v4.17.0 §B2 — le FIL de discussion et son composeur ----------
   Les bulles à droite sont les MIENNES (celles de mon côté), les autres à gauche ; un message qui
   suit le même auteur à moins de cinq minutes garde la bulle et perd la tête ; « Vu » se dit une
   fois, sous le dernier message lu par l'autre côté. Le composeur reste visible : collé au-dessus
   de la barre du bas au téléphone, en bas du fil sur ordinateur. */
.fil{margin-top:18px}
.fil-liste{display:flex;flex-direction:column;max-height:min(60dvh,560px);overflow-y:auto;overscroll-behavior:contain;padding:2px 2px 6px;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){.fil-liste{scroll-behavior:auto}}
.remark.mien{flex-direction:row-reverse}
.remark.mien .rb{border-start-start-radius:13px;border-start-end-radius:4px;background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 22%,transparent)}
/* v4.17.1 §E — Mes messages : la tête en accent plein, la bulle en teinte douce claire (maquette V3). */
.remark.mien .rav{background:var(--accent);color:var(--accent-ink);border:none}
.remark.suite{margin-top:-7px}
.remark.suite .rav{visibility:hidden}
.remark .rb.ok{background:var(--good-soft);border-color:color-mix(in srgb,var(--good) 30%,transparent)}
.remark .rb.ok .who,.remark .rb.ok .rtag{color:var(--good)}
.remark .rb.ok .rtag{background:color-mix(in srgb,var(--good) 14%,transparent)}
.remark .vu{display:block;text-align:end;font-size:10.5px;font-weight:600;color:var(--faint);margin-top:3px}
.remark.optimiste{opacity:.6}
.nouveaux{color:var(--gold-strong);font-weight:700}
.composeur{position:sticky;bottom:calc(64px + env(safe-area-inset-bottom));z-index:6;margin-top:6px;padding:8px 0 2px;
  background:linear-gradient(180deg,transparent,var(--bg) 30%)}
@media (min-width:1024px){.composeur{bottom:0}}
.composeur-ligne{display:flex;gap:8px;align-items:flex-end}
.composeur textarea{flex:1;min-width:0;width:100%;border:1px solid var(--line);background:var(--surface);border-radius:14px;padding:11px 13px;font-family:inherit;font-size:16px;line-height:1.35;color:var(--ink);resize:none;min-height:44px;max-height:180px;box-shadow:var(--shadow)}
.composeur textarea:focus{outline:2px solid var(--accent);outline-offset:0;border-color:transparent}
.iconsend{flex:0 0 auto;width:44px;height:44px;border-radius:12px;background:var(--accent);color:var(--accent-ink);border:none;display:grid;place-items:center;cursor:pointer}
.iconsend[disabled]{opacity:.45;cursor:not-allowed}
.composeur .help{margin:6px 2px 0}
.composeur .alerte{margin-bottom:8px}

/* rien à montrer */
.vide{background:var(--surface);border:1px dashed var(--line);border-radius:var(--r-md);padding:18px;text-align:center;color:var(--muted);font-size:13px;line-height:1.55}

/* ---------- v4.16.0 §G — quantités / avancement (écran `quantites` de la maquette) ----------
   L'anneau, puis un accordéon par poste du bordereau. L'accordéon est du HTML natif
   (<details>/<summary>) : il s'ouvre sans une ligne de JavaScript, il reste ouvert quand Livewire
   redessine, et un lecteur d'écran l'annonce tout seul. */
.qhero{margin-top:6px;display:flex;flex-direction:column;align-items:center;gap:9px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 16px;box-shadow:var(--shadow)}
.qamt{font-weight:800;font-size:15px;letter-spacing:-.01em}
.qsub{color:var(--muted);font-size:12.5px;text-align:center;margin:0}

.qrow{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow);overflow:hidden}
.qrow + .qrow{margin-top:9px}
.qhead{width:100%;background:none;border:none;padding:13px 14px;display:flex;align-items:center;gap:12px;
  text-align:start;color:inherit;min-height:44px;list-style:none}
.qhead::-webkit-details-marker{display:none}
.qic{flex:0 0 auto;width:38px;height:38px;border-radius:10px;background:var(--surface-2);color:var(--accent);
  display:grid;place-items:center;border:1px solid var(--line)}
.qb{min-width:0;flex:1}
.qn{display:block;font-weight:700;font-size:14px;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qm{display:block;color:var(--muted);font-size:12px;margin-top:2px;font-variant-numeric:tabular-nums}
.qbar{display:block;height:6px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);margin-top:7px;overflow:hidden}
.qbar i{display:block;height:100%;background:var(--accent)}
.qp{flex:0 0 auto;font-weight:800;font-size:13px;font-variant-numeric:tabular-nums;color:var(--accent)}
.qchev{flex:0 0 auto;color:var(--faint);transition:transform .2s ease}
.qrow[open] .qchev{transform:rotate(90deg)}
@media (prefers-reduced-motion:reduce){.qchev{transition:none}}
.qdetail{padding:2px 14px 13px;border-top:1px solid var(--line)}
.qline{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:9px 0}
.qline + .qline{border-top:1px dashed var(--line)}
.ql{min-width:0;font-size:12px;color:var(--muted)}
.ql b{display:block;font-size:13px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.qv{flex:0 0 auto;font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink)}

/* ---------- v4.16.0 §F/§I — la fiche d'un livrable, la fiche d'une réunion ----------
   Même grammaire que le détail d'une publication : une carte de tête, puis le bloc de décision
   (.valwrap) et la conversation (.remarks), tous deux déjà écrits au lot 2. */
.fiche{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px;box-shadow:var(--shadow)}
.fiche .ft{font-size:18px;font-weight:800;letter-spacing:-.02em;margin:0 0 4px;line-height:1.25}
.fiche .fm{color:var(--muted);font-size:12.5px;margin:0}
.fiche .frow{display:flex;gap:12px;align-items:baseline;margin-top:12px;font-size:12.5px}
.fiche .frow + .frow{margin-top:8px}
.fiche .fk{flex:0 0 104px;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.fiche .fv{min-width:0;flex:1;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.fiche .fpill{margin-top:12px;display:flex;flex-wrap:wrap;gap:7px}
.fiche .flien{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:12.5px;font-weight:700;color:var(--accent)}

/* ---------- v4.16.0 §E — le compte ----------
   Les trois blocs de l'écran `compte` de la maquette. `.opt` existait ; il lui manquait de quoi
   porter une ACTION plutôt qu'un chevron décoratif, et une explication sous le bloc. */
.opt{flex-wrap:wrap}
.opt .oact{flex:0 0 auto;display:flex;gap:8px;align-items:center}
.opt .onote{flex:1 1 100%;color:var(--muted);font-size:12px;line-height:1.5;margin:4px 0 0}
.opt .oetat{font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;white-space:nowrap;
  color:var(--muted);background:var(--surface-2);border:1px solid var(--line)}
.opt .oetat.actif{color:var(--good);background:var(--good-soft);border-color:color-mix(in srgb,var(--good) 30%,transparent)}
.btn.petit{padding:9px 13px;font-size:12.5px;min-height:44px}
.signature{margin-top:9px;color:var(--muted);font-size:12.5px;line-height:1.55}
.signature :is(p,ul,ol){margin:0 0 6px}
.signature a{color:var(--accent);text-decoration:underline}

/* ---------- v4.16.0 §J — le chargement, discret ----------
   Un fil de couleur sous l'en-tête pendant qu'un aller-retour Livewire est en cours. Discret
   parce qu'un écran qui se fige sans rien dire donne envie de toucher deux fois le même bouton —
   et deux fois un bouton de validation, c'est deux e-mails au client. */
/* Fixé EN HAUT DE LA FENÊTRE et au-dessus de l'en-tête (qui colle à z-index 30) : posé dans le
   flux, il aurait disparu dès que la page défile — c'est-à-dire précisément quand on attend. */
.chargement{position:fixed;top:0;left:0;right:0;z-index:40;height:2px;overflow:hidden;background:transparent;pointer-events:none}
.chargement i{display:block;height:100%;width:40%;background:var(--accent);border-radius:999px;
  animation:glisse 1.1s ease-in-out infinite}
@keyframes glisse{0%{transform:translateX(-100%)}100%{transform:translateX(350%)}}
@media (prefers-reduced-motion:reduce){.chargement i{animation:none;width:100%;opacity:.5}}

/* ---------- v4.16.1 §F1 — la cloche ----------
   En haut à droite, à côté de la bascule de thème : la pastille des non-lus, et le menu. Sur
   téléphone (≤ 720 px, la largeur de l'application), le menu est une FEUILLE qui monte du bas,
   pleine largeur ; au-delà, un menu déroulant ancré sous la cloche. Tout vient des jetons du
   thème : lisible en clair comme en sombre, sans une couleur en dur. */
.cloche{position:relative;display:inline-flex}
.cloche-btn{color:var(--muted)}
.cloche.ouverte .cloche-btn{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 35%,var(--line))}
.cloche-pastille{position:absolute;top:-6px;inset-inline-end:-6px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;
  background:var(--gold);color:var(--gold-ink);font-size:10.5px;font-weight:800;display:grid;place-items:center;
  border:2px solid var(--surface);line-height:1}
.cloche-fond{position:fixed;inset:0;z-index:45;background:rgba(10,10,20,.35)}
.cloche-menu{position:fixed;z-index:46;left:0;right:0;bottom:0;display:flex;flex-direction:column;
  /* v4.17.4 §B — Le repli d'abord : un navigateur qui ignore `dvh` laisse tomber la déclaration
     entière, et la feuille se retrouverait SANS aucune borne de hauteur. */
  max-height:min(78vh,640px);
  max-height:min(78dvh,640px);
  background:var(--surface);border:1px solid var(--line);border-bottom:none;border-radius:var(--r-lg) var(--r-lg) 0 0;
  box-shadow:var(--shadow-lift);padding-bottom:env(safe-area-inset-bottom);animation:cloche-monte .22s ease-out}
/* v4.17.3 §D — La tête reste, la liste prend le reste. `flex:0 0 auto` est explicite : sans lui,
   une tête à deux lignes se ferait rétrécir par la liste au lieu de la borner. */
.cloche-tete{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px 10px;border-bottom:1px solid var(--line)}
.cloche-titre{font-weight:800;font-size:15px;letter-spacing:-.01em}
.cloche-actions{display:flex;align-items:center;gap:10px}
.cloche-lien{background:none;border:none;padding:6px 0;color:var(--accent);font-weight:700;font-size:12.5px;cursor:pointer;min-height:36px}
.cloche-lien:hover{text-decoration:underline}
.cloche-fermer{width:32px;height:32px}
/* ⚠️ v4.17.3 §D — `min-height:0` N'EST PAS DÉCORATIF. En flexbox, un enfant ne rétrécit pas sous
   la hauteur de son contenu : sa taille minimale vaut `auto`. La liste débordait donc du menu au
   lieu de défiler dedans, et les dernières notifications étaient hors d'atteinte — on ne pouvait
   pas les atteindre du doigt, à aucun moment. `flex:1 1 auto` lui donne la place restante,
   `min-height:0` l'autorise à être plus courte que ses lignes, et c'est elle qui défile. */
.cloche-liste{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.cloche-ligne{display:flex;gap:10px;align-items:flex-start;width:100%;text-align:start;background:none;border:none;
  border-bottom:1px solid var(--line);padding:12px 16px;cursor:pointer;color:var(--ink);font:inherit;min-height:56px}
.cloche-ligne:hover{background:var(--surface-2)}
.cloche-ligne:last-child{border-bottom:none}
.cloche-point{flex:0 0 auto;width:8px;height:8px;border-radius:999px;margin-top:6px;background:transparent}
.cloche-ligne.nonlue .cloche-point{background:var(--gold)}
.cloche-ligne.nonlue{background:color-mix(in srgb,var(--gold) 7%,var(--surface))}
.cloche-ligne.nonlue:hover{background:color-mix(in srgb,var(--gold) 12%,var(--surface))}
.cloche-corps{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px}
.cloche-nm{font-weight:700;font-size:13.5px;letter-spacing:-.01em;line-height:1.3}
.cloche-ligne.nonlue .cloche-nm{font-weight:800}
.cloche-mt{color:var(--muted);font-size:12.5px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cloche-quand{color:var(--faint);font-size:11px;font-weight:600;margin-top:2px}
.cloche-vide{margin:0;padding:22px 18px;color:var(--muted);font-size:13px;line-height:1.55;text-align:center}
@keyframes cloche-monte{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}}
@media (min-width:721px){
  .cloche-fond{background:transparent}
  .cloche-menu{position:absolute;left:auto;right:0;bottom:auto;top:calc(100% + 8px);width:380px;max-height:min(70vh,560px);
    border-bottom:1px solid var(--line);border-radius:var(--r-md);animation:cloche-descend .16s ease-out}
  [dir="rtl"] .cloche-menu{right:auto;left:0}
}
@keyframes cloche-descend{from{transform:translateY(-6px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.cloche-menu{animation:none}}