/* Scealia : Espace Scealia (console web, /app).

   Même identité que scealia.com : fond crème, surfaces blanches à liseré clair,
   titres DM Serif Display en graisse 400, texte DM Sans, boutons en pilule,
   marine (--nuit) pour l'action, sarcelle (--teal) pour l'accent et les liens,
   turquoise (--turquoise) sur les fonds sombres. Les jetons, les durées et les
   courbes de mouvement sont ceux du site (assets/style.css), pour qu'un passage
   du site à la console ne change pas de registre.

   Aucune ressource externe (CSP) : polices auto-hébergées déclarées dans
   fonts.css, icônes via le sprite SVG inline de index.html. Toute modification
   d'un fichier de /app/assets impose d'incrémenter le `?v=` dans index.html. */

/* ── 1. Jetons ───────────────────────────────────────────────────────────── */
:root {
  /* Thème clair uniquement : empêche l'assombrissement forcé des navigateurs
     mobiles, qui rendait le texte invisible sur le site. */
  color-scheme: only light;

  /* Palette du site */
  --nuit: #12263E;          /* encre principale, aplats marine, bouton primaire */
  --profond: #224460;       /* survols sombres, liens de nav, étiquettes */
  --turquoise: #78B4CD;     /* accent sur fond sombre uniquement */
  --teal: #148287;          /* accent sur fond clair : liens, focus, jauges */
  --teal-ink: #0F6B6F;      /* sarcelle en texte petit sur crème (AA) */
  --cream: #F8F5EE;         /* fond de page */
  --cream-2: #ECE7DC;       /* surfaces posées : onglets, pistes, squelettes */
  --cream-3: #E1DAC9;       /* panneau, pastille neutre */
  --border: #DAD4C6;        /* grandes séparations */
  --surface: #FFFFFF;       /* cartes et zones de travail */
  --border-soft: #E6E1D5;   /* liseré des surfaces blanches */
  --text: #12263E;
  --muted: #65686B;         /* texte secondaire (5,6:1 sur blanc) */
  --sub: #8A8B8A;           /* mentions, placeholders */
  --danger: #B4472F;        /* même rouge que les pages de réinitialisation */
  --danger-ink: #8F2F2F;
  --amber: #C9803A;         /* prudence, pas échec (parité app : colors.AMBER) */
  --amber-ink: #7A4A14;

  /* Accents par type de fichier (parité app : theme/colors.ts) */
  --acc-photo: #4A6FA5; --acc-video: #6E5B8C;
  --acc-audio: #5B8C7E; --acc-doc:   #B8935A;

  /* Typographie : les polices du site, servies par cette origine (fonts.css) */
  --serif: 'DM Serif Display', Georgia, serif;
  --sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
          'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, 'Courier New', monospace;

  --fs-display: clamp(30px, 2.2vw + 20px, 40px);
  --fs-h2: 22px;
  --fs-h3: 16px;
  --fs-stat: 30px;
  --fs-body: 15px;
  --fs-input: 16px;     /* 16 px dans les champs : zéro zoom iOS */
  --fs-sm: 13.5px;
  --fs-xs: 12.5px;
  --fs-caption: 11.5px;
  --fs-label: 11px;
  --lh-tight: 1.12; --lh-body: 1.6;

  /* Espacement (base 4) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px;
  --s6: 24px; --s7: 32px; --s8: 40px; --s9: 56px;

  /* Rayons du site : 12 pour les champs, 16 pour les cartes, 24 pour les
     grands panneaux, 100 pour les pilules. */
  --r-1: 8px; --r-2: 12px; --r-lg: 16px; --r-xl: 24px; --r-pill: 100px;

  /* Mouvement : trois durées, pas davantage (site). */
  --dur-1: 150ms;   /* micro-interactions : survol d'un lien, d'un bouton */
  --dur-2: 250ms;   /* transitions de surface : cartes, panneaux, écrans */
  --dur-3: 600ms;   /* apparitions */
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  /* Ombres : toutes dérivées de --nuit, jamais du noir pur. */
  --shadow-1: 0 1px 3px rgba(18, 38, 62, .07);
  --shadow-2: 0 8px 24px rgba(18, 38, 62, .10);
  --shadow-3: 0 28px 66px rgba(18, 38, 62, .25), 0 2px 6px rgba(18, 38, 62, .06);

  --nav-h: 72px;
  --gutter: clamp(16px, 4vw, 48px);
}

/* ── 1 bis. Thèmes ───────────────────────────────────────────────────────
   Les mêmes que l'application (scealia-rn/src/theme/themes.ts), choisis dans
   Mon compte et posés sur <html> par apparence.js avant le premier affichage :
   data-mode="clair|sombre", data-theme="<thème>" (Samuel, 08/10/2026).
   « Papier » est le crème d'origine de la console et du site : sans choix,
   rien ne change. En sombre, les jetons s'inversent : l'encre (--nuit, --text)
   devient claire et le crème (--cream) devient le fond ; ce qui était marine
   sur crème (bouton principal, puce active) devient clair sur sombre. */
:root[data-theme="blanc"] { --cream: #F6F7F9; --cream-2: #ECEEF2; --cream-3: #E0E4EA;
  --border: #D9DDE3; --border-soft: #E6E9EE; }
:root[data-theme="givre"] { --cream: #EAF1F7; --cream-2: #DEE7F0; --cream-3: #CFDBE7;
  --border: #D3DEE8; --border-soft: #DEE6EE; }
:root[data-theme="lin"] { --cream: #E6E2DA; --cream-2: #DCD6CB; --cream-3: #CFC8BA;
  --surface: #F2EFE9; --border: #D6D0C5; --border-soft: #DFDAD0; --text: #1E2A36; --muted: #6B6E70; }
:root[data-theme="sauge"] { --cream: #E7ECE6; --cream-2: #DCE3DA; --cream-3: #CED8CC;
  --surface: #F4F6F2; --border: #D2DAD1; --border-soft: #DDE3DC; --text: #16262C; --muted: #66706B; }

:root[data-mode="sombre"] {
  color-scheme: dark;
  --nuit: #EDF3FA; --profond: #C4D2E0; --text: #EDF3FA; --muted: #B3C0CD; --sub: #8E9CAB;
  --teal: #79C7CA; --teal-ink: #92D4D6; --turquoise: #79C7CA;
  --danger: #E3806C; --danger-ink: #F2A595; --amber: #E2A869; --amber-ink: #F1C48E;
  /* Le fond des médias sans aperçu reste sombre : du ton du type vers la nuit. */
  --media-fin: #0B131B;
  --etat-horodatage: var(--etat-horodatage-clair); --etat-constat: var(--etat-constat-clair);
  --etat-attente: var(--etat-attente-clair); --etat-absente: var(--etat-absente-clair);
  --shadow-1: 0 1px 3px rgba(0, 0, 0, .35);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, .40);
  --shadow-3: 0 28px 66px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .30);
}
:root[data-theme="nuit"], :root[data-theme="espace-sombre"] { --cream: #101923; --cream-2: #16212D; --cream-3: #22303F;
  --surface: #1B2938; --border: #34475A; --border-soft: #2A3A4B; }
:root[data-theme="ardoise"] { --cream: #15181D; --cream-2: #1B1F25; --cream-3: #2A2F37;
  --surface: #20242B; --border: #363B44; --border-soft: #2C3139;
  --nuit: #ECEEF1; --text: #ECEEF1; --muted: #AEB4BD; }
:root[data-theme="encre"] { --cream: #070A0E; --cream-2: #0E1318; --cream-3: #1D242C;
  --surface: #14191F; --border: #2A323C; --border-soft: #222930;
  --nuit: #EEF2F6; --text: #EEF2F6; --muted: #A9B3BE; }
:root[data-theme="marine"] { --cream: #12263E; --cream-2: #18304B; --cream-3: #27425F;
  --surface: #1D3550; --border: #365375; --border-soft: #2D4766;
  --nuit: #EEF3F9; --text: #EEF3F9; --muted: #B7C6D8; }

/* En sombre, ce qui doit rester sombre : le pied de page, le fond des médias,
   le repère des pièces ; et ce qui doit rester blanc : le certificat (un document). */
:root[data-mode="sombre"] .footer { background: var(--cream-2); color: var(--text); border-top: 1px solid var(--border-soft); }
:root[data-mode="sombre"] .footer-brand .brand-name,
:root[data-mode="sombre"] .footer-brand .brand-wordmark { color: var(--text); }
:root[data-mode="sombre"] .footer-brand .tagline { color: var(--text); }
/* La marque : foncée sur les fonds clairs, claire sur les fonds sombres. */
:root .brand-seal--sombre, :root .auth-seal--sombre { display: none; }
:root[data-mode="sombre"] .brand-seal--clair, :root[data-mode="sombre"] .auth-seal--clair { display: none; }
:root[data-mode="sombre"] .brand-seal--sombre, :root[data-mode="sombre"] .auth-seal--sombre { display: block; }
:root[data-mode="sombre"] .verify-media { background: #0B1219; }
:root[data-mode="sombre"] .repere-pieces { color: var(--cream); border-color: var(--surface); }

/* ── 2. Règles globales & helpers ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Une classe posant `display` écraserait sinon l'attribut HTML `hidden`
   (les styles auteur battent la règle du navigateur). `hidden` reste
   autoritaire, comme sur le site. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }
html:focus-within { scroll-behavior: smooth; }
body { font-family: var(--sans); font-size: var(--fs-body); color: var(--text);
  background: var(--cream); min-height: 100vh; display: flex;
  flex-direction: column; line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased; }

h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.footer :focus-visible,
.proof-thumb :focus-visible { outline-color: var(--turquoise); }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; }

.sprite { position: absolute; width: 0; height: 0; }

.skip { position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--nuit); color: var(--cream); padding: 10px 16px;
  border-radius: 0 0 var(--r-2) 0; text-decoration: none; font-weight: 500; }
.skip:focus { left: 0; }

/* Surtitre : la pilule turquoise du site (.eyebrow) */
.overline { display: inline-flex; align-items: center; margin-bottom: var(--s4);
  padding: 6px 14px; border-radius: var(--r-pill);
  font: 600 var(--fs-label)/1 var(--sans); text-transform: uppercase;
  letter-spacing: .18em; color: var(--profond);
  background: rgba(120, 180, 205, .15); border: 1px solid rgba(120, 180, 205, .35); }

::selection { background: rgba(120, 180, 205, .35); }

a { color: var(--teal); }
#main a:not(.btn, .proof, .overline, .dep-carte, .cab-nav-lien, .cab-marque, .cab-identite, .cab-barre-action, .cab-barre-legal a,
    .cab-tuile, .cab-rangee, .cab-bloc-lien, .cab-puce-info, .cab-etapes a, .cab-ligne, .cab-ligne-titre, .cab-classee, .cab-retour, .cab-piece-titre, .cab-chrono-titre, .cab-hors-carte-titre, .repere-lien, .cab-demande-lien) { text-decoration: underline;
  text-underline-offset: 2px; text-decoration-thickness: 1px; }

/* ── 3. Coquille : en-tête, contenu, pied ────────────────────────────────── */
/* En-tête : la nav du site. Collante, crème translucide sur flou, filet bas. */
.topbar { position: sticky; top: 0; z-index: 50; min-height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4); flex-wrap: wrap; padding: 14px var(--gutter);
  background: rgba(248, 245, 238, .85);
  /* Le fond du thème choisi, translucide (Samuel, 08/10/2026) ; sans color-mix, la ligne du dessus reste. */
  background: color-mix(in srgb, var(--cream) 85%, transparent);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid var(--border); }

.brand { display: flex; align-items: center; gap: 10px; color: inherit;
  text-decoration: none; flex-shrink: 0; }
/* La marque officielle, mêmes fichiers que la nav du site (42 px, 1x/2x/3x). */
.brand-seal, .brand-mark { width: 42px; height: 42px; flex: none; object-fit: contain;
  display: block; }
/* Nom de marque en texte, point du « i » en bleu (identique au site) */
.brand-name, .brand-wordmark { font-family: var(--serif); font-size: 26px;
  line-height: 1; color: var(--nuit); font-weight: 400; letter-spacing: -0.005em;
  white-space: nowrap; display: block; }
.brand-i { position: relative; }
.brand-i::before { content: ''; position: absolute; left: 50%; top: .30em;
  width: .14em; height: .14em; border-radius: 50%; background: #4a8b8b;
  transform: translateX(-50%); }
.brand-text { display: block; }
.brand-sub { display: block; margin-top: 3px; font-size: 8.5px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--profond); }

.nav { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.nav a { color: var(--profond); text-decoration: none; font-size: 14px;
  font-weight: 500; padding: 6px 0; position: relative;
  transition: color var(--dur-2) var(--ease-out); }
/* Au survol, un filet se lève sous le lien (motif du menu Outils du site) */
.nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: currentColor; transform: scaleX(0);
  transform-origin: left; transition: transform var(--dur-2) var(--ease-out); }
.nav a:hover { color: var(--nuit); }
.nav a:hover::after, .nav a.active::after { transform: scaleX(1); }
.nav a.active { color: var(--teal); }
.nav-email { font-size: 12.5px; color: var(--muted); }

#main { flex: 1; width: 100%; max-width: 1140px; margin: 0 auto;
  padding: var(--s8) var(--gutter) var(--s9); }
#main:focus-visible { outline: none; }   /* cible du skip-link, pas un contrôle */

/* Chaque vue entre comme une section du site : fondu et légère montée.
   L'animation repart à chaque affichage (display: none → block), sans script. */
.view { animation: vue-entree var(--dur-3) var(--ease-out) both; }
@keyframes vue-entree {
  from { opacity: 0; translate: 0 14px; }
  to   { opacity: 1; translate: none; }
}

.view-head { margin-bottom: var(--s7); }
.view-head h1 { font-family: var(--serif); font-size: var(--fs-display);
  font-weight: 400; letter-spacing: -0.01em; line-height: var(--lh-tight);
  color: var(--nuit); }
.muted { color: var(--muted); font-size: var(--fs-sm); margin-top: 8px; max-width: 62ch; }
/* Dans un bloc centré, la mesure se centre aussi. */
.empty .muted, .verify-empty .muted, .verify-head .muted, .e2e-card .muted { margin-inline: auto; }

/* Pied : celui du site, marine sur crème, en trois colonnes courtes. */
.footer { background: var(--nuit); color: var(--cream);
  padding: 56px var(--gutter) 28px; font-size: 13px; }
.footer a { color: rgba(248, 245, 238, .72); text-decoration: none;
  transition: color var(--dur-2) var(--ease-out); }
.footer a:hover { color: var(--cream); }
.footer-inner { max-width: 1140px; margin: 0 auto; display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.footer-brand .brand-name, .footer-brand .brand-wordmark { color: #fff; }
.footer-brand .tagline { font-family: var(--serif); font-size: 22px;
  color: var(--cream); margin-top: 22px; line-height: 1.25;
  letter-spacing: -0.01em; max-width: 280px; }
.footer-brand .tagline em { color: var(--turquoise); font-style: italic; }
.footer-col h2 { font-family: var(--sans); font-size: 10.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--turquoise); margin-bottom: 18px;
  font-weight: 600; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-bottom { max-width: 1140px; margin: 48px auto 0; padding-top: 22px;
  border-top: 1px solid rgba(120, 180, 205, .18); display: flex;
  justify-content: space-between; align-items: center; gap: var(--s3);
  flex-wrap: wrap; color: rgba(248, 245, 238, .5); font-size: 12px; }
.footer-bottom a { color: rgba(248, 245, 238, .6); }

/* ── 4. Composants de base ───────────────────────────────────────────────── */
.card { background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--r-lg); box-shadow: var(--shadow-1); }

/* Boutons : les pilules du site. Propriétés nommées plutôt que `all` :
   l'anneau de focus doit apparaître net, pas en fondu. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 500 13px/1.2 var(--sans); letter-spacing: .02em; border: 1px solid transparent;
  border-radius: var(--r-pill); padding: 11px 22px; cursor: pointer;
  text-decoration: none; white-space: nowrap;
  transition: background-color var(--dur-1) var(--ease-out),
    border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out),
    transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out); }
.btn:disabled { opacity: .5; cursor: default; }
.btn-primary { background: var(--nuit); color: var(--cream);
  box-shadow: 0 4px 16px rgba(18, 38, 62, .18); }
.btn-primary:hover:not(:disabled) { background: var(--profond); transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(18, 38, 62, .25); }
/* Retour à l'appui : le bouton s'enfonce. */
.btn-primary:active:not(:disabled) { transform: translateY(0) scale(.98);
  box-shadow: 0 2px 8px rgba(18, 38, 62, .2); }
.btn-ghost { background: transparent; color: var(--nuit); border-color: var(--border); }
.btn-ghost:hover:not(:disabled) { border-color: var(--nuit); background: var(--cream-2); }
.btn-ghost:active:not(:disabled) { transform: scale(.98); }
.btn-link { background: transparent; color: var(--teal); text-decoration: underline;
  text-underline-offset: 3px; padding: 8px 10px; letter-spacing: 0; }
.btn-link:hover { color: var(--teal-ink); }
.btn-danger { background: transparent; color: var(--danger);
  border-color: rgba(180, 71, 47, .45); }
.btn-danger:hover:not(:disabled) { background: rgba(180, 71, 47, .06);
  border-color: var(--danger); }
.btn-danger[data-arm="1"] { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn-sm { padding: 8px 14px; font-size: 12.5px; }   /* cible ≥ 40px */
@media (pointer: coarse) { .btn { min-height: 44px; } }
/* Pleine largeur réservée à la carte d'authentification : */
.auth-card .btn-primary, .auth-card .btn-link { width: 100%; }
.auth-card .btn-primary { padding: 14px 28px; font-size: 15px; }

/* Champs : ceux du formulaire de contact du site. */
.field { display: block; margin-bottom: 18px; }
.field > span { display: block; margin-bottom: 8px;
  font: 600 var(--fs-label)/1 var(--sans); text-transform: uppercase;
  letter-spacing: .08em; color: var(--profond); }
.field input, .share-form input, .e2e-form input.e2e-pass, .lk-select,
.cab-nouveau input, .cab-perso input, .cab-piece-edition input, .cab-piece-edition textarea, .cab-code input {
  width: 100%; padding: 13px 16px; font-size: var(--fs-input);
  font-family: var(--sans); color: var(--nuit);
  border: 1px solid var(--border); border-radius: var(--r-2);
  background: var(--surface);
  transition: border-color var(--dur-1) var(--ease-out),
    box-shadow var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out); }
.field input::placeholder, .cab-code input::placeholder,
.share-form input::placeholder, .e2e-form input.e2e-pass::placeholder { color: var(--sub); }
.field input:focus, .share-form input:focus, .cab-nouveau input:focus, .cab-perso input:focus,
.cab-piece-edition input:focus, .cab-piece-edition textarea:focus, .cab-code input:focus,
.e2e-form input.e2e-pass:focus, .lk-select:focus {
  outline: none; border-color: var(--teal);
  box-shadow: 0 0 0 4px rgba(20, 130, 135, .10); }
.field small { display: block; margin-top: 8px; font-size: var(--fs-caption);
  color: var(--muted); line-height: 1.5; }
.check { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 16px;
  font-size: 13px; line-height: 1.45; color: var(--muted); cursor: pointer; }
.check input { margin-top: 2.5px; width: 16px; height: 16px; accent-color: var(--teal); flex: none; }

/* Bannières : le seul canal d'erreur (le retour reste en place, pas de toast).
   Un filet fin tout autour, coins arrondis : jamais de barre à gauche (Samuel, 08/10/2026). */
.banner { padding: 12px 16px; border-radius: var(--r-2);
  font-size: var(--fs-sm); line-height: 1.5; margin-bottom: var(--s4);
  border: 1px solid; }
.banner-error   { background: rgba(180, 71, 47, .08); border-color: rgba(180, 71, 47, .30); color: var(--danger-ink); }
.banner-info,
.banner-success { background: rgba(120, 180, 205, .12); border-color: rgba(120, 180, 205, .45); color: var(--profond); }

/* Étiquettes : pastilles du site (demo-pill) */
.tag { display: inline-block; font: 700 10.5px/1 var(--sans); letter-spacing: .4px;
  padding: 4px 10px; border-radius: var(--r-pill); }
.tag-anchored  { background: rgba(20, 130, 135, .12); color: var(--teal-ink); }
.tag-eidas     { background: var(--nuit); color: var(--cream); }
.tag-encrypted { background: rgba(120, 180, 205, .20); color: var(--profond); }
.tag-shared    { background: var(--cream-3); color: var(--muted); }
.tag-testnet   { background: rgba(201, 128, 58, .14); color: var(--amber-ink); margin-left: 8px; }
.pill { display: inline-block; font: 700 10.5px/1 var(--sans);
  text-transform: uppercase; letter-spacing: 1px; padding: 6px 12px;
  border-radius: var(--r-pill); }
/* Nom conservé (app.js le pose) ; la teinte est celle du site : marine sur clair. */
.pill-gold { background: var(--nuit); color: var(--cream); }

/* ── 5. Vue auth ─────────────────────────────────────────────────────────── */
.auth-mast { text-align: center; margin: var(--s6) auto var(--s6); }
.auth-seal { width: 56px; height: 56px; object-fit: contain;
  display: block; margin: 0 auto var(--s4); }
.auth-mast h1 { font-family: var(--serif); font-size: clamp(30px, 4vw, 40px);
  font-weight: 400; color: var(--nuit); line-height: 1.08; letter-spacing: -0.01em; }
.auth-mast p { color: var(--muted); font-size: 16px; margin-top: 10px; }
.auth-card { max-width: 460px; margin: 0 auto var(--s7); padding: var(--s7) var(--s7);
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--r-xl); box-shadow: var(--shadow-2); }

.tabs { display: flex; gap: 4px; background: var(--cream-2); border-radius: var(--r-pill);
  padding: 4px; margin-bottom: var(--s6); }
.tab { flex: 1; border: none; background: transparent; padding: 10px 12px;
  border-radius: var(--r-pill); font: 500 14px var(--sans); color: var(--muted);
  cursor: pointer; transition: background-color var(--dur-2) var(--ease-out),
    color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
.tab:hover { color: var(--nuit); }
.tab.active { background: var(--surface); color: var(--nuit); box-shadow: var(--shadow-1); }

.auth-note { margin-top: var(--s6); padding-top: var(--s5);
  border-top: 1px solid var(--border-soft); font-size: var(--fs-xs);
  line-height: 1.6; color: var(--muted); text-align: center; }

/* ── 6. Vue coffre ───────────────────────────────────────────────────────── */
/* En-tête : le titre et la jauge sur une même ligne de base, séparés du coffre
   par un filet — la respiration du site, pas un encadré de plus. */
.coffre-tete { display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: var(--s5) var(--s6);
  padding-bottom: var(--s5); margin-bottom: var(--s6);
  border-bottom: 1px solid var(--border); }
.coffre-tete-texte { min-width: 0; }
.coffre-tete h1 { font-family: var(--serif); font-size: var(--fs-display);
  font-weight: 400; letter-spacing: -0.01em; line-height: var(--lh-tight); color: var(--nuit); }

/* Rappel de la phrase remise à plus tard : un bandeau d'une ligne, le disque
   sarcelle des cartes du site et un bouton qui rouvre la fenêtre. */
.verrou { display: flex; align-items: center; gap: 12px;
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--r-pill); padding: 8px 8px 8px 10px; margin-bottom: var(--s6);
  animation: vue-entree var(--dur-3) var(--ease-out) both; }
.verrou-disque { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid;
  place-items: center; background: rgba(20, 130, 135, .10); color: var(--teal-ink); }
.verrou-texte { flex: 1; min-width: 0; font-size: var(--fs-sm); color: var(--muted); }
.verrou-texte strong { color: var(--nuit); font-weight: 600; }
.verrou .btn { flex: none; }

/* Conditions mises à jour : l'encadré des bannières (filet gauche, coin droit
   arrondi), au-dessus des vues, avec la liste des documents et « J’accepte ».
   Il n'empêche rien : la vue continue dessous. */
.bandeau-conditions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px;
  padding: 12px 12px 12px 16px; margin-bottom: var(--s6);
  border: 1px solid rgba(120, 180, 205, .45); border-radius: var(--r-2);
  background: rgba(120, 180, 205, .12);
  animation: vue-entree var(--dur-3) var(--ease-out) both; }
.bandeau-conditions-texte { flex: 1 1 320px; min-width: 0; font-size: var(--fs-sm);
  line-height: 1.5; color: var(--profond); }
.bandeau-conditions-texte strong { color: var(--nuit); font-weight: 600; }
.bandeau-conditions .btn { flex: none; }
.bandeau-conditions-erreur { flex-basis: 100%; font-size: var(--fs-sm); line-height: 1.5;
  color: var(--danger-ink); }

/* Transmissions à sceller (décision C9) : le même encadré, une carte par
   destinataire ; le code de sécurité de sa clé, puis la phrase et le bouton. */
.bandeau-transmissions { display: flex; flex-direction: column; gap: 10px;
  padding: 12px 16px; margin-bottom: var(--s6);
  border: 1px solid rgba(120, 180, 205, .45); border-radius: var(--r-2);
  background: rgba(120, 180, 205, .12);
  animation: vue-entree var(--dur-3) var(--ease-out) both; }
.bandeau-transmissions-texte { margin: 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--profond); }
.bandeau-transmissions-texte strong { color: var(--nuit); font-weight: 600; }
.bandeau-transmissions .fp-block { margin: 0; }
.bandeau-transmissions-etat { margin: 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--profond); }
.bandeau-transmissions-etat:empty { display: none; }

/* Fenêtre de la phrase secrète : la fiche du site, un disque en tête. */
.verrou-disque--grand { width: 48px; height: 48px; margin-bottom: 14px; }
.fiche-phrase-secrete { width: min(100% - 32px, 480px); }
.fiche-duree .lk-select { width: 100%; }
.phrase-form { margin-top: 18px; }
.phrase-form .field { margin-bottom: 6px; }
.fiche .phrase-aide { margin-top: 0; font-size: var(--fs-xs); color: var(--muted); }
.phrase-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.phrase-actions .btn { width: auto; }
.verify-actions-centre { justify-content: center; }
.fiche .phrase-note { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-soft);
  font-size: var(--fs-xs); color: var(--muted); line-height: 1.55; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--s5); }

/* Les cartes entrent en cascade, comme les apparitions du site. */
.grid > * { animation: vue-entree var(--dur-3) var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 60ms); }
.grid > :nth-child(2) { --i: 1; } .grid > :nth-child(3) { --i: 2; }
.grid > :nth-child(4) { --i: 3; } .grid > :nth-child(5) { --i: 4; }
.grid > :nth-child(6) { --i: 5; } .grid > :nth-child(7) { --i: 6; }
.grid > :nth-child(8) { --i: 7; } .grid > :nth-child(n+9) { --i: 8; }

.proof { display: flex; flex-direction: column; overflow: hidden;
  text-decoration: none; color: inherit; background: var(--surface);
  border: 1px solid var(--border-soft); border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  transition: transform var(--dur-2) var(--ease-out),
    box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out); }
.proof:hover { transform: translateY(-3px); box-shadow: var(--shadow-2);
  border-color: var(--border); }

/* Vignette : impression de sécurité (guilloché) sur un dégradé accent-type → marine. */
.proof-thumb { height: 132px; position: relative; display: flex;
  align-items: center; justify-content: center;
  color: rgba(248, 245, 238, .8); font-size: 12px;
  background:
    repeating-linear-gradient(45deg,  rgba(255,255,255,.045) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.045) 0 1px, transparent 1px 7px),
    linear-gradient(150deg, var(--acc, var(--profond)), var(--media-fin, var(--nuit))); }
.proof[data-type="photo"]    { --acc: var(--acc-photo); }
.proof[data-type="video"]    { --acc: var(--acc-video); }
.proof[data-type="audio"]    { --acc: var(--acc-audio); }
.proof[data-type="document"] { --acc: var(--acc-doc); }
.proof-thumb img { width: 100%; height: 100%; object-fit: cover; position: relative; }
.proof-type-badge { position: absolute; top: 10px; left: 10px; z-index: 1;
  font: 600 10px/1 var(--sans); text-transform: uppercase; letter-spacing: .6px;
  background: rgba(18, 38, 62, .65); color: var(--cream); padding: 5px 10px;
  border-radius: var(--r-pill); }
.proof-body { padding: 14px 16px 16px; flex: 1; display: flex; flex-direction: column; }
.proof-title { font-size: 15px; font-weight: 600; color: var(--nuit); line-height: 1.3; }
.proof-meta { font-size: var(--fs-caption); color: var(--muted); margin-top: 6px;
  display: flex; flex-wrap: wrap; gap: 4px 10px; }
.proof-tags { margin-top: 12px; display: flex; gap: 6px; flex-wrap: wrap; }

/* État vide : grande carte du site, texte centré */
.empty { max-width: 580px; margin: var(--s6) auto; text-align: center;
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--r-xl); padding: var(--s8) var(--s7);
  box-shadow: var(--shadow-1); }
.empty-icon { width: 64px; height: 64px; margin: 0 auto var(--s5);
  border-radius: 50%; background: rgba(20, 130, 135, .10); color: var(--teal);
  display: flex; align-items: center; justify-content: center; }
.empty-icon svg { width: 32px; height: 32px; }
.empty h2 { font-family: var(--serif); font-size: var(--fs-h2); font-weight: 400;
  color: var(--nuit); margin-bottom: var(--s2); }
.empty p { color: var(--muted); font-size: var(--fs-sm); line-height: var(--lh-body); }
.empty-sub { color: var(--muted); font-size: var(--fs-sm); line-height: var(--lh-body);
  max-width: 420px; margin: 0 auto var(--s6); }
.empty-steps { list-style: none; text-align: left; display: flex;
  flex-direction: column; gap: var(--s4); margin: 0 0 var(--s6); }
.empty-steps li { display: flex; gap: var(--s4); align-items: center;
  font-size: var(--fs-sm); line-height: 1.4; }
.step-n { flex: 0 0 32px; height: 32px; border-radius: 50%;
  background: var(--nuit); color: var(--cream);
  font: 400 15px/32px var(--serif); text-align: center; }
.empty-alt { border-top: 1px solid var(--border-soft); padding-top: var(--s4);
  margin: 0; color: var(--muted); font-size: var(--fs-xs); }
@media (max-width: 420px) { .empty { padding: 28px 20px; margin: var(--s5) auto; } }

/* ── 6 bis. Le coffre de l'application : récents, puces, galerie, liste ──── */
/* Jetons d'état : les cinq couleurs de theme/statut.ts (thème clair), et la
   teinte claire du thème sombre pour l'icône sur le disque des vignettes. */
:root {
  --etat-horodatage: #2F6B4F; --etat-horodatage-teinte: 63, 125, 90;   --etat-horodatage-clair: #8FD0AC;
  --etat-constat: #4E3D85;    --etat-constat-teinte: 94, 74, 158;      --etat-constat-clair: #C0B2EA;
  --etat-attente: #8A6612;    --etat-attente-teinte: 214, 166, 48;     --etat-attente-clair: #E6C567;
  --etat-absente: #B43C3C;    --etat-absente-teinte: 180, 60, 60;      --etat-absente-clair: #E07070;
}

.section-titre { font: 600 10.5px/1 var(--sans); letter-spacing: .8px;
  text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }

/* Bande « Récents » : défilement horizontal, tuiles carte de largeur fixe. */
.recents { margin-bottom: var(--s6); }
.recents-bande { display: flex; gap: 10px; overflow-x: auto; padding: 4px 4px 10px;
  margin: -4px -4px 0; scroll-snap-type: x proximity; scrollbar-width: thin;
  scrollbar-color: var(--border) transparent; }
.recents-bande > * { flex: 0 0 168px; scroll-snap-align: start; }

/* Tuile : la carte du site, le lien couvre la tuile, la pastille reste cliquable. */
.tuile { position: relative; display: flex; flex-direction: column; background: var(--surface);
  border: 1px solid var(--border-soft); border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow-1);
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out),
    border-color var(--dur-2) var(--ease-out); }
.tuile:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--border); }
.tuile:focus-within { border-color: var(--teal); }
.tuile-lien { color: var(--nuit); text-decoration: none; font-weight: 600; font-size: 13.5px;
  line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; }
.tuile-lien::after { content: ''; position: absolute; inset: 0; }   /* étend le lien à la tuile */
.tuile-lien:focus-visible { outline: none; }                         /* la tuile porte l'anneau */
.tuile-lien--couvrant { position: absolute; inset: 0; }
.tuile .badge-etat { position: relative; z-index: 2; }
/* Plus fort que la règle générale des liens de #main (son :not() pèse 1,1,2). */
#main .tuile a.tuile-lien { text-decoration: none; }
.tuile-corps { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.tuile-date { font-size: 11.5px; color: var(--sub); }
.tuile-bas { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 3px; }
/* Dans une carte étroite, un libellé long (« Ancrage non transmis ») passe à la ligne plutôt que d'être rogné. */
.tuile-carte .badge-etat { white-space: normal; text-align: left; line-height: 1.25; }

/* Aperçu : la photo quand on l'a ; sinon la surface du type, du ton de la
   preuve vers la nuit, avec le glyphe du type (l'onde pour un audio). */
.apercu { position: relative; height: 96px; flex: none; display: flex; align-items: center;
  justify-content: center; color: rgba(255, 255, 255, .95); overflow: hidden;
  background: linear-gradient(135deg, var(--acc, var(--profond)), var(--media-fin, var(--nuit))); }
.apercu img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.apercu-photo    { --acc: var(--acc-photo); }
.apercu-video    { --acc: var(--acc-video); }
.apercu-audio    { --acc: var(--acc-audio); }
.apercu-document { --acc: var(--acc-doc); }
.onde { display: flex; align-items: center; gap: 3px; }
.onde-barre { width: 3px; border-radius: 2px; background: rgba(255, 255, 255, .9); }
.apercu-lecture { position: absolute; left: 6px; bottom: 6px; width: 20px; height: 20px;
  border-radius: 50%; background: rgba(18, 38, 62, .75); display: flex;
  align-items: center; justify-content: center; }
/* La vignette arrive en fondu et couvre le glyphe. */
.apercu img { opacity: 0; animation: apercu-fondu var(--dur-3) var(--ease-out) forwards; }
@keyframes apercu-fondu { to { opacity: 1; } }
.apercu--image > svg, .apercu--image > .onde { visibility: hidden; }
/* Photo chiffrée sans la phrase : voile marine et cadenas, glyphe du type en coin (l'aspect verrouillé de l'application). */
.apercu--verrouille::before { content: ''; position: absolute; inset: 0; background: rgba(18, 38, 62, .55); }
.apercu--verrouille > svg { position: absolute; left: 8px; bottom: 7px; width: 14px; height: 14px; opacity: .7; }
.apercu-verrou { position: relative; color: rgba(255, 255, 255, .92); display: flex; }
.apercu-cadenas { position: absolute; right: 6px; top: 6px; width: 22px; height: 22px;
  border-radius: 50%; background: rgba(18, 38, 62, .6); display: flex;
  align-items: center; justify-content: center; color: rgba(255, 255, 255, .9); }

/* Ligne : aperçu à gauche, corps à droite. */
.tuile-ligne { flex-direction: row; }
.tuile-ligne .apercu { width: 96px; height: auto; min-height: 84px; align-self: stretch; }
.tuile-ligne .tuile-corps { justify-content: center; }

/* Galerie : vignettes carrées, pastille ronde dans le coin, jour court dessous. */
.galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 12px 8px; }
.galerie > * { animation: vue-entree var(--dur-3) var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 40ms); }
.galerie > :nth-child(2) { --i: 1; } .galerie > :nth-child(3) { --i: 2; }
.galerie > :nth-child(4) { --i: 3; } .galerie > :nth-child(5) { --i: 4; }
.galerie > :nth-child(6) { --i: 5; } .galerie > :nth-child(7) { --i: 6; }
.galerie > :nth-child(8) { --i: 7; } .galerie > :nth-child(n+9) { --i: 8; }
.tuile-galerie { aspect-ratio: 1; }
.tuile-galerie .apercu { height: 100%; flex: 1; }
.tuile-galerie .badge-etat { position: absolute; right: 6px; top: 6px; }
.galerie-legende { display: flex; flex-direction: column; gap: 1px; min-width: 0; margin-top: 8px; padding: 0 2px; color: inherit; }
/* Plus fort que la règle générale des liens de #main (son :not() pèse 1,1,2). */
#main .galerie-item a.galerie-legende { text-decoration: none; }
.galerie-titre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 13px/1.35 var(--sans); color: var(--nuit); }
.galerie-date { font-size: 11.5px; line-height: 1.4; color: var(--sub); font-variant-numeric: tabular-nums; }
/* Triée par date, la galerie se groupe par mois. */
.galerie-groupes { display: flex; flex-direction: column; gap: 30px; }
.galerie-mois { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font: 650 15px/1.3 var(--sans); color: var(--nuit); }
.galerie-mois-compte { padding: 1px 8px; border-radius: 999px; background: var(--cream-2); font: 600 11.5px/1.5 var(--sans);
  color: var(--muted); font-variant-numeric: tabular-nums; }

/* Liste : deux sections, Constats puis Horodatages. */
.paliers { display: flex; flex-direction: column; gap: var(--s7); }
.palier-tete { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.palier-ico { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center;
  justify-content: center; }
.palier--constat .palier-ico { background: rgba(var(--etat-constat-teinte), .14); color: var(--etat-constat); }
.palier--horodatage .palier-ico { background: rgba(var(--etat-horodatage-teinte), .14); color: var(--etat-horodatage); }
.palier-titre { font: 600 15px var(--sans); color: var(--nuit); text-wrap: balance; }
.palier-compte { font-size: 13px; color: var(--muted); }
.palier-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 10px; }
.palier-liste > * { animation: vue-entree var(--dur-3) var(--ease-out) both; }
.palier-vide { color: var(--muted); font-size: var(--fs-sm); padding: 6px 0 0 38px; }

/* Pastille d'état : icône + libellé ; « rond » : icône seule sur un disque. */
.badge-etat { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px;
  border-radius: var(--r-pill); border: 1px solid transparent; cursor: pointer;
  font: 600 10.5px/1.4 var(--sans); letter-spacing: .2px; white-space: nowrap;
  background: rgba(var(--teinte), var(--fond, .14)); border-color: rgba(var(--teinte), var(--bord, .4));
  color: var(--encre);
  transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out); }
.badge-etat:hover { background: rgba(var(--teinte), calc(var(--fond, .14) + .08)); }
.badge-etat svg { width: 12px; height: 12px; flex: none; }
.badge-etat--horodatage      { --teinte: var(--etat-horodatage-teinte); --encre: var(--etat-horodatage); --fond: .14; --bord: .38; --clair: var(--etat-horodatage-clair); }
.badge-etat--constat         { --teinte: var(--etat-constat-teinte);    --encre: var(--etat-constat);    --fond: .14; --bord: .45; --clair: var(--etat-constat-clair); }
.badge-etat--nonTransmis     { --teinte: var(--etat-attente-teinte);    --encre: var(--etat-attente);    --fond: .20; --bord: .50; --clair: var(--etat-attente-clair); }
.badge-etat--empreinteAbsente{ --teinte: var(--etat-absente-teinte);    --encre: var(--etat-absente);    --fond: .12; --bord: .40; --clair: var(--etat-absente-clair); }
/* Ancrage déclaré : en attente du serveur (comme « non transmis »), ou relu sans être conforme (comme « absente »). */
.badge-etat--traitement      { --teinte: var(--etat-attente-teinte);    --encre: var(--etat-attente);    --fond: .20; --bord: .50; --clair: var(--etat-attente-clair); }
.badge-etat--actionRequise   { --teinte: var(--etat-absente-teinte);    --encre: var(--etat-absente);    --fond: .12; --bord: .40; --clair: var(--etat-absente-clair); }
.badge-etat--rond { width: 22px; height: 22px; padding: 0; justify-content: center; border: 0;
  background: rgba(18, 38, 62, .55); color: var(--clair); }
.badge-etat--rond:hover { background: rgba(18, 38, 62, .75); }
.badge-etat--rond svg { width: 11px; height: 11px; }

/* Puces de filtre, tri et bascule galerie / liste. */
.coffre-outils { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin-bottom: var(--s5); }
.puces { display: flex; gap: 8px; overflow-x: auto; padding: 2px; margin: -2px;
  scrollbar-width: none; min-width: 0; }
.puces::-webkit-scrollbar { display: none; }
.puce { flex: none; padding: 7px 14px; border-radius: var(--r-pill); border: 1px solid var(--border);
  background: var(--surface); color: var(--profond); font: 500 13px var(--sans); cursor: pointer;
  transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out),
    border-color var(--dur-1) var(--ease-out); }
.puce:hover { border-color: var(--nuit); }
.puce.active { background: var(--nuit); color: var(--cream); border-color: var(--nuit); }
.coffre-reglages { display: flex; align-items: center; gap: 10px; flex: none; margin-left: auto; }
.tri .lk-select { padding-top: 8px; padding-bottom: 8px; font-size: 13px; }
.bascule-vue { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r-pill);
  background: var(--cream-2); }
.bascule-vue button { width: 34px; height: 30px; border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--muted); cursor: pointer; display: flex;
  align-items: center; justify-content: center;
  transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out),
    box-shadow var(--dur-2) var(--ease-out); }
.bascule-vue button svg { width: 16px; height: 16px; }
.bascule-vue button[aria-pressed="true"] { background: var(--surface); color: var(--nuit);
  box-shadow: var(--shadow-1); }
.vide-filtre { text-align: center; padding: 40px 20px; color: var(--muted); font-size: var(--fs-sm); }
.vide-filtre .btn { margin-top: 12px; }

/* La fiche d'un état : dialogue natif, carte du site, voile marine. */
/* margin: auto rétablit le centrage du dialogue, que le reset global (margin: 0) défaisait. */
.fiche { border: 0; margin: auto; padding: 28px 28px 26px; width: min(100% - 32px, 460px);
  max-height: calc(100vh - 32px); overflow: auto;
  background: var(--surface); color: var(--text); border-radius: var(--r-xl);
  box-shadow: var(--shadow-3); }
.fiche::backdrop { background: rgba(18, 38, 62, .55); }
.fiche[open] { animation: vue-entree var(--dur-2) var(--ease-out) both; }
.fiche-etiquette { font: 600 10.5px/1 var(--sans); letter-spacing: .8px; text-transform: uppercase;
  color: var(--muted); margin-bottom: 10px; }
.fiche h2 { font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 1.15;
  color: var(--nuit); letter-spacing: -0.01em; padding-right: 36px; }
.fiche p { margin-top: 12px; font-size: var(--fs-sm); line-height: 1.65; color: var(--text); }
.fiche-form { margin-top: 16px; }
.fiche .banner { margin: 14px 0 0; }
#vault-deverrouiller { gap: 6px; }
.fiche-fermer { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border: 0;
  border-radius: 50%; background: var(--cream-2); color: var(--nuit); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background-color var(--dur-1) var(--ease-out); }
.fiche-fermer:hover { background: var(--cream-3); }
.fiche-fermer svg { width: 16px; height: 16px; }

@media (max-width: 560px) {
  .lieu-proposition { width: calc(100% - 20px); bottom: 48px; }
  .coffre-tete { align-items: flex-start; }
  .verrou { border-radius: var(--r-lg); flex-wrap: wrap; }
  .verrou-texte { flex-basis: calc(100% - 44px); }

  .recents-bande > * { flex-basis: 150px; }
  .galerie { grid-template-columns: repeat(3, 1fr); gap: 10px 6px; }
  .palier-liste { grid-template-columns: 1fr; }
  .coffre-reglages { margin-left: 0; width: 100%; justify-content: space-between; }
}

/* ── 7. Vue fiche (preuve du coffre ou pièce partagée) ───────────────────── */
#view-proof { max-width: 760px; margin: 0 auto; }
#proof-back { margin-bottom: var(--s3); }

/* Le panneau de l'application : en-tête, actions en grille, position, cartes
   « Preuve » et « Capture » sur surface crème, lignes libellé / valeur. */
.fiche-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4);
  margin: var(--s4) 0 var(--s5); }
.fiche-tete-texte { min-width: 0; flex: 1; }
.fiche-tete h1 { font-family: var(--serif); font-size: clamp(26px, 3vw, 34px); font-weight: 400;
  color: var(--nuit); line-height: var(--lh-tight); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.fiche-sous-titre { margin-top: 6px; font-size: var(--fs-sm); color: var(--sub); }
.fiche-tete .badge-etat { flex: none; margin-top: 8px; }

.actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); gap: 14px 6px;
  margin-bottom: var(--s6); align-items: start; }
/* font: inherit — un <button> ne reprend pas la police de la page, un <a> si. */
.action { font: inherit; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 4px 2px;
  border: 0; background: none; color: var(--nuit); cursor: pointer; text-decoration: none;
  border-radius: var(--r-2); }
#main .actions a.action { text-decoration: none; }   /* plus fort que la règle générale des liens de #main */
.action-disque { width: 46px; height: 46px; border-radius: 50%; background: var(--cream-2);
  display: flex; align-items: center; justify-content: center; color: var(--nuit);
  transition: background-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out); }
.action:hover .action-disque { background: var(--cream-3); transform: translateY(-1px); }
.action:active .action-disque { transform: scale(.96); }
.action-label { font-size: 11.5px; line-height: 1.3; font-weight: 500; text-align: center; color: var(--nuit); }
/* Une demi-ligne sous le libellé, là où deux actions se ressemblent. */
.action-aide { margin-top: -3px; font-size: 10.5px; line-height: 1.3; text-align: center; color: var(--sub); }
.action--danger .action-disque { background: rgba(180, 71, 47, .10); color: var(--danger); }
.action--danger .action-label { color: var(--danger); }
.action--danger[data-arm="1"] .action-disque { background: var(--danger); color: #fff; }
.action:disabled { opacity: .5; cursor: default; }

.fiche-lieu { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: var(--s5) 0;
  font-size: 14px; font-weight: 500; color: var(--nuit); }
.fiche-lieu svg { color: var(--teal); flex: none; }
.fiche-lieu--absent { color: var(--muted); font-weight: 400; }
.fiche-lieu--absent svg { color: var(--muted); }
.fiche-lieu a { font-weight: 600; }

/* La carte de la position : Plan IGN atténué ou photo aérienne (MapLibre). */
.lieu-bloc { margin: var(--s5) 0; }
.lieu-bloc .fiche-lieu { margin: 0 0 10px; }
.lieu-carte { position: relative; height: 280px; border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--border-soft); background: var(--cream-2); }
.lieu-erreur { padding: 24px; text-align: center; }
/* Un clic sur la carte : la proposition d'ouvrir Google Maps, en bas au centre,
   entre le bouton Photo aérienne et l'attribution, sous l'épingle. */
.lieu-carte .maplibregl-canvas-container.maplibregl-interactive { cursor: pointer; }
.lieu-carte .maplibregl-canvas-container.maplibregl-interactive:active { cursor: grabbing; }
/* Centrée par les marges : l'animation d'entrée (vue-entree) anime translate. */
.lieu-proposition { position: absolute; inset-inline: 0; margin-inline: auto; bottom: 10px; z-index: 3;
  width: min(100% - 250px, 330px); padding: 12px 14px; border-radius: var(--r-lg); background: var(--surface);
  box-shadow: 0 4px 18px rgba(18, 38, 62, .20); animation: vue-entree var(--dur-2) var(--ease-out) both; }
.lieu-proposition p { font-size: var(--fs-sm); font-weight: 600; color: var(--nuit); }
.lieu-proposition small { display: block; margin-top: 3px; font-size: var(--fs-xs); line-height: 1.45; color: var(--muted); }
.lieu-proposition-actions { display: flex; gap: 8px; margin-top: 10px; }
.lieu-proposition .btn { width: auto; }
#main .lieu-proposition a.btn { text-decoration: none; }
/* Le bouton Plan / Photo aérienne, posé sur la carte, en bas à gauche. */
.lieu-bascule { position: absolute; left: 10px; bottom: 10px; z-index: 2; display: inline-flex;
  align-items: center; gap: 6px; padding: 7px 12px 7px 10px; border: 0; border-radius: var(--r-pill);
  background: var(--surface); color: var(--nuit); font: 600 12px/1 var(--sans); cursor: pointer;
  box-shadow: 0 1px 4px rgba(18, 38, 62, .18); transition: background var(--dur-1) var(--ease-out); }
.lieu-bascule:hover { background: var(--cream); }
.lieu-bascule svg { color: var(--teal); }
/* MapLibre aux couleurs de la console. L'attribution repliée : texte sur la
   même hauteur que le bouton « i » (24 px = 20 px de ligne + 2 × 2 px). */
.lieu-carte .maplibregl-ctrl-group { border-radius: 10px; box-shadow: 0 1px 4px rgba(18, 38, 62, .16); }
.lieu-carte .maplibregl-ctrl-attrib { font: 11px/20px var(--sans); color: var(--muted); }
.lieu-carte .maplibregl-ctrl-attrib a { color: var(--muted); }

.fiche-carte { background: var(--cream); border: 1px solid var(--border-soft); border-radius: var(--r-lg);
  padding: 14px 16px; margin-bottom: var(--s4); display: flex; flex-direction: column; gap: 8px; }
.fiche-carte-titre { font: 600 10.5px/1 var(--sans); letter-spacing: .8px; text-transform: uppercase;
  color: var(--muted); margin: 0; text-wrap: balance; }
h3.fiche-carte-titre { margin-top: 6px; }
.ligne { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 24px; }
.ligne-label { font-size: 13px; color: var(--sub); flex: none; }
.ligne-droite { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ligne-valeur { font-size: 13px; font-weight: 500; color: var(--nuit); text-align: right;
  overflow-wrap: anywhere; }
.ligne-valeur.mono { font-family: var(--mono); font-size: 12px; font-weight: 400; color: var(--profond); }
.ligne-copier, .ligne-info { flex: none; width: 26px; height: 26px; border: 0; border-radius: 50%;
  background: transparent; color: var(--muted); cursor: pointer; display: flex; align-items: center;
  justify-content: center; transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); }
.ligne-copier:hover, .ligne-info:hover { background: var(--cream-2); color: var(--nuit); }
.ligne-copier--fait { color: var(--teal); }
.ligne-info { font: 600 12px/1 var(--serif); font-style: italic; border: 1px solid var(--border); width: 20px; height: 20px; }
.fiche-separateur { height: 1px; background: var(--border-soft); margin: 2px 0; }
.fiche-phrase { font-size: 13.5px; line-height: 1.5; color: var(--nuit); }
.fiche-lien { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  font-size: 13px; font-weight: 600; color: var(--teal); }
#main .fiche-carte a.fiche-lien { text-decoration: none; }
.fiche-lien:hover { text-decoration: underline; }
.fiche-note { font-size: var(--fs-xs); color: var(--muted); line-height: 1.55; }
.fiche-technique { display: flex; flex-direction: column; gap: 8px; padding-top: 4px;
  border-top: 1px solid var(--border-soft); margin-top: 4px; }
.fiche-bascule { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; padding: 6px 0 0; border: 0; background: none; cursor: pointer;
  font: 600 12.5px var(--sans); color: var(--sub); }
.fiche-bascule:hover { color: var(--nuit); }
.fiche-bascule svg { transition: transform var(--dur-2) var(--ease-out); }
.fiche-bascule[aria-expanded="true"] svg { transform: rotate(180deg); }
.fiche-eidas { margin-top: 0; margin-bottom: var(--s4); }
.fiche-eidas strong { display: block; font-size: 13px; color: var(--amber-ink); margin-bottom: 4px; }
.fiche-eidas p { color: var(--amber-ink); }
.fiche-panneau { margin-top: var(--s5); }
/* Dans la fiche, la carte de vérification de l'ancrage (partagée avec la page publique) se range avec les autres cartes. */
#view-proof .verify-card { background: var(--cream); border-color: var(--border-soft); box-shadow: none;
  padding: 14px 16px; margin-bottom: var(--s4); }
#view-proof .verify-card .detail-sec { font: 600 10.5px/1 var(--sans); letter-spacing: .8px; text-transform: uppercase;
  color: var(--muted); margin: 0 0 10px; }
#view-proof .seal-note { margin-top: var(--s4); }
@media (max-width: 560px) {
  .actions { grid-template-columns: repeat(4, 1fr); gap: 10px 2px; }
  .action-label { font-size: 11px; }
  .ligne { flex-direction: column; align-items: flex-start; gap: 2px; }
  .ligne-valeur { text-align: left; }
}
.detail-head { margin: var(--s4) 0 var(--s6); }
.detail-head h1 { font-family: var(--serif); font-size: clamp(26px, 3vw, 34px);
  font-weight: 400; color: var(--nuit); line-height: var(--lh-tight);
  letter-spacing: -0.01em; margin-top: var(--s3); }
.detail-owner { font-size: 13px; color: var(--muted); margin-top: 6px; }

.detail-media { border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--border-soft); margin-bottom: var(--s6); background: var(--nuit); }
.detail-media img, .detail-media video { width: 100%; display: block;
  max-height: 460px; object-fit: contain; }
.detail-media-none { background: var(--surface); color: var(--muted);
  padding: 40px; text-align: center; font-size: 13.5px; line-height: 1.6; }

.detail-sec { font-family: var(--serif); font-weight: 400; font-size: 21px;
  color: var(--nuit); margin: var(--s7) 0 var(--s3); letter-spacing: -0.01em; }

.dl { display: grid; grid-template-columns: minmax(150px, 210px) 1fr; gap: 0;
  border: 1px solid var(--border-soft); border-radius: var(--r-lg);
  overflow: hidden; background: var(--surface); }
.dl dt { padding: 12px 16px; background: var(--cream);
  font: 600 var(--fs-label) var(--sans); text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted); border-top: 1px solid var(--border-soft); }
.dl dd { padding: 12px 16px; font-size: var(--fs-sm);
  border-top: 1px solid var(--border-soft); word-break: break-word; }
.dl dt:first-of-type, .dl dd:nth-of-type(1) { border-top: none; }
.mono { font-family: var(--mono); font-size: 12px; color: var(--profond); }

/* « Ce que prouve ce sceau » : l'honnêteté est un composant. Une carte du
   site, le sceau sur un disque sarcelle, un titre en toutes lettres : ni
   barre latérale, ni petites capitales. */
.seal-note { display: flex; gap: 16px; margin-top: var(--s6);
  padding: 20px 22px; background: var(--surface);
  border: 1px solid var(--border-soft); border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
.seal-note > svg { width: 44px; height: 44px; padding: 11px; flex: none; border-radius: 50%;
  background: rgba(20, 130, 135, .10); color: var(--teal); }
.seal-note h3 { font: 600 15px/1.3 var(--sans); color: var(--nuit); margin: 6px 0 4px; }
.seal-note p { font-size: var(--fs-sm); color: var(--muted);
  line-height: 1.65; margin-top: 8px; }

/* Prudence, pas échec : ambre, comme dans l'application. */
/* Sans barre latérale, comme la carte du sceau : un aplat ambre léger et son liseré. */
.warn-note { margin-top: var(--s5); padding: 14px 18px;
  border-radius: var(--r-lg); font-size: var(--fs-xs); line-height: 1.6;
  background: rgba(201, 128, 58, .10); border: 1px solid rgba(201, 128, 58, .35);
  color: var(--amber-ink); }

.detail-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: var(--s6) 0; }

.share-box { margin-top: var(--s6); background: var(--surface);
  border: 1px solid var(--border-soft); border-radius: var(--r-lg);
  padding: var(--s6); box-shadow: var(--shadow-1); }
.share-box h3 { font-family: var(--serif); font-weight: 400; font-size: 20px;
  color: var(--nuit); margin-bottom: 6px; letter-spacing: -0.01em; }
.share-box p { font-size: var(--fs-sm); color: var(--muted); margin-bottom: var(--s4);
  line-height: 1.6; }
.share-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.share-form input { flex: 1; min-width: 200px; width: auto; }
.share-list { list-style: none; margin-top: 16px; display: flex;
  flex-direction: column; gap: 8px; }
.share-item { display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3); font-size: 13px; padding: 10px 14px;
  background: var(--cream); border-radius: var(--r-2); }
.share-item .who { color: var(--nuit); font-weight: 500; word-break: break-all; }

/* ── 7 bis. Vue certificat ───────────────────────────────────────────────── */
.certificat-barre { display: flex; justify-content: space-between; align-items: center; gap: 12px;
  flex-wrap: wrap; margin-bottom: var(--s5); }
.certificat-barre .btn { width: auto; display: inline-flex; align-items: center; gap: 8px; }
#main .certificat-barre a.btn { text-decoration: none; }
.certificat-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; margin-left: auto; }
.certificat-actions .btn[aria-busy="true"] { opacity: .7; cursor: progress; }
.certificat-etat { font-size: 13px; color: var(--muted); }
.certificat-etat:empty { display: none; }
.certificat-tete { margin-bottom: var(--s5); }
.certificat-tete h1 { font-family: var(--serif); font-size: clamp(26px, 3vw, 34px); font-weight: 400;
  line-height: var(--lh-tight); color: var(--nuit); }
#certificat-note { margin-bottom: var(--s5); }
#certificat-note .btn { width: auto; margin-left: 8px; }
/* La feuille : largeur A4, réduite à l'écran quand la place manque (app.js). */
.certificat-zone { overflow: hidden; }
.certificat-feuille { width: 210mm; transform-origin: top left; }
.certificat-feuille iframe { display: block; width: 210mm; height: 297mm; border: 0; background: #fff;
  border-radius: 4px; box-shadow: 0 1px 2px rgba(18, 38, 62, .06), 0 12px 32px rgba(18, 38, 62, .10); }

/* ── 8 bis. Vue « Mon compte » ───────────────────────────────────────────── */
/* Des cartes l'une sous l'autre, à la largeur d'une lecture confortable. */
.compte-sections { display: grid; gap: var(--s5); max-width: 760px; }
.compte-carte { padding: var(--s6); }
.compte-carte > h2, .compte-suppression-titre { font-family: var(--serif); font-weight: 400; font-size: 21px;
  color: var(--nuit); letter-spacing: -0.01em; }
.compte-carte > h2 { margin-bottom: 6px; }
.compte-carte > .muted { font-size: var(--fs-sm); line-height: 1.55; }
.compte-identite { margin: var(--s4) 0 0; }
.compte-liens { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: var(--s4); }
.compte-liens .btn-link { padding-left: 0; padding-right: 0; }
.compte-carte .banner { margin-top: var(--s4); }
.compte-form { margin-top: var(--s5); max-width: 440px; }
.compte-form .field { margin-bottom: 6px; }
.compte-note { font-size: var(--fs-caption); margin-top: var(--s4); }
.compte-form-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; margin-top: var(--s4); }
/* Le code de secours, montré une seule fois (Mon compte, docs/cle-du-compte.md) : lisible, recopiable d'un coup. */
/* « Ouvrir avec mon téléphone » (docs/ouvrir-avec-le-telephone.md) : le QR code et ce qu'il faut faire. */
.appairage { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.appairage-titre { font-weight: 600; margin: 0; }
.appairage-etapes { text-align: left; margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.appairage-qr { width: 220px; height: 220px; border-radius: 12px; background: #fff; }
.appairage-etat { margin: 0; }
.appairage-actions { display: flex; gap: 8px; justify-content: center; }
#btn-telephone, #dialogue-cle-telephone { align-self: center; }

.compte-secours-code { display: flex; flex-direction: column; gap: 10px; margin-top: var(--s4); }
.compte-secours-valeur { font-family: var(--mono); font-size: 1.1rem; letter-spacing: .06em; overflow-wrap: anywhere; user-select: all; }
.compte-sous-titre { font: 600 var(--fs-label)/1 var(--sans); text-transform: uppercase;
  letter-spacing: .08em; color: var(--profond); margin: var(--s5) 0 10px; }

/* Un refus sous le champ qu'il concerne : le champ cerclé, la raison dessous (Samuel, 08/10/2026). */
.champ-refus { display: flex; gap: 7px; align-items: flex-start; margin: 2px 0 12px;
  font-size: var(--fs-xs); line-height: 1.45; color: var(--danger-ink); }
.champ-refus::before { content: '!'; flex: 0 0 auto; display: inline-grid; place-items: center;
  width: 15px; height: 15px; margin-top: 1px; border: 1.5px solid currentColor; border-radius: 50%;
  font: 700 10px/1 var(--sans); }
.field input[aria-invalid="true"] { border-color: var(--danger); }
.field input[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px rgba(180, 71, 47, .12); }

/* Les règles du mot de passe, cochées en direct. */
.mdp-regles { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 2px 0 12px; padding: 0;
  font-size: var(--fs-caption); color: var(--muted); }
.mdp-regles li { display: inline-flex; align-items: center; gap: 5px; }
.mdp-regles li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--border); }
.mdp-regles li.ok { color: var(--teal-ink); }
.mdp-regles li.ok::before { background: var(--teal); }

/* Le mode : trois choix côte à côte. */
.segment { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; margin-top: var(--s4);
  background: var(--cream-2); border: 1px solid var(--border-soft); border-radius: var(--r-pill); }
.segment-choix { border: 0; background: transparent; color: var(--muted); padding: 8px 16px;
  border-radius: var(--r-pill); font: 500 var(--fs-sm)/1 var(--sans); cursor: pointer;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); }
.segment-choix:hover { color: var(--nuit); }
.segment-choix[aria-checked="true"] { background: var(--surface); color: var(--nuit); box-shadow: var(--shadow-1); }
.segment-choix:focus-visible, .vignette-theme:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.compte-aide-mode { font-size: var(--fs-caption); color: var(--muted); margin-top: 8px; }

/* Les thèmes : une vignette par thème, comme dans l'application. */
.vignettes-theme { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 12px; }
.vignette-theme { display: grid; gap: 7px; padding: 0; border: 0; background: none; cursor: pointer;
  text-align: center; color: var(--muted); font: 500 var(--fs-xs)/1.2 var(--sans); }
.vignette-theme-apercu { display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: var(--r-2);
  border: 1px solid var(--border); padding: 12px; transition: box-shadow var(--dur-1) var(--ease-out); }
.vignette-theme-carte { display: grid; gap: 6px; width: 100%; padding: 9px; border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.vignette-theme-ligne { display: block; height: 5px; border-radius: 3px; }
.vignette-theme-ligne.courte { width: 55%; }
.vignette-theme[aria-checked="true"] .vignette-theme-apercu { box-shadow: 0 0 0 2px var(--teal); border-color: transparent; }
.vignette-theme[aria-checked="true"] .vignette-theme-nom { color: var(--nuit); font-weight: 600; }

/* La phrase secrète : ce que la console en sait, pour cette visite. */
.compte-phrase-etat { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: var(--s4);
  font-size: var(--fs-sm); color: var(--nuit); }

/* La page d'un lot : une carte par preuve, son contenu en tête (Samuel, 08/10/2026). */
.lot-grille { list-style: none; margin: var(--s5) 0; padding: 0; display: grid; gap: var(--s4);
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.lot-carte { display: flex; flex-direction: column; overflow: hidden; background: var(--surface);
  border: 1px solid var(--border-soft); border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
.lot-carte-media { display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--cream-2); color: var(--muted); overflow: hidden; }
.lot-carte-media img, .lot-carte-media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.lot-carte-media--audio audio { width: 90%; }
.lot-carte-corps { display: grid; gap: 6px; padding: 12px 14px 14px; }
.lot-carte-num { font: 600 var(--fs-label)/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--profond); }
.lot-carte-titre { font-weight: 600; color: var(--nuit); overflow-wrap: anywhere; }
.lot-carte-quand { font-size: var(--fs-sm); color: var(--muted); }
.lot-carte .partage-statut { justify-self: start; }
.lot-carte-lien { justify-self: start; margin-top: 4px; }
.lot-carte--retiree .lot-carte-media { opacity: .55; }

/* La session : une ligne, à la hauteur de la suppression repliée qui la suit. */
.compte-session { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s4) var(--s5); padding: var(--s5) var(--s6); }
.compte-session h2 { font-family: var(--serif); font-weight: 400; font-size: 19px; color: var(--nuit);
  letter-spacing: -0.01em; margin-bottom: 4px; }
.compte-session .muted { font-size: var(--fs-sm); line-height: 1.55; max-width: 52ch; }
.compte-session-boutons { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.compte-session-boutons .btn-link { padding-left: 0; padding-right: 0; }
/* La confirmation de « Se déconnecter partout » : sous la ligne, toute la largeur. */
.compte-partout { flex: 1 1 100%; display: grid; gap: var(--s3); padding: var(--s4); border-radius: var(--r-2);
  background: var(--cream-2); border: 1px solid var(--border-soft); font-size: var(--fs-sm); color: var(--nuit); }
.compte-partout[hidden] { display: none; }
.compte-partout .compte-form-actions { margin-top: 0; }

/* La suppression : repliée tant qu'on ne l'ouvre pas. */
.compte-suppression { padding: 0; }
.compte-suppression > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  padding: var(--s5) var(--s6); cursor: pointer; list-style: none; border-radius: var(--r-lg); }
.compte-suppression > summary::-webkit-details-marker { display: none; }
.compte-suppression > summary:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.compte-suppression-tete { display: grid; gap: 4px; }
.compte-suppression-tete .muted { font-size: var(--fs-sm); }
/* Ouverte, le texte détaillé suit : la ligne du résumé se retire. */
.compte-suppression[open] .compte-suppression-tete .muted { display: none; }
.compte-suppression-titre { font-size: 19px; }
.compte-chevron { flex: 0 0 auto; color: var(--muted);
  transition: transform var(--dur-2) var(--ease-out); }
.compte-suppression[open] > summary .compte-chevron { transform: rotate(180deg); }
.compte-suppression > p, .compte-suppression > form { margin: 0 var(--s6); }
.compte-suppression > p { margin-bottom: var(--s5); font-size: var(--fs-sm); }
.compte-suppression > form { padding-bottom: var(--s6); }
.compte-motifs { border: 0; padding: 0; margin: 0 0 var(--s4); min-width: 0; }
.compte-motifs legend { padding: 0; font: 600 var(--fs-label)/1 var(--sans);
  text-transform: uppercase; letter-spacing: .08em; color: var(--profond); }
.compte-aide { font-size: var(--fs-caption); color: var(--muted); margin: 8px 0 14px; }
.compte-motifs .check { margin-bottom: 10px; color: var(--nuit); }
.compte-suppression textarea { width: 100%; padding: 13px 16px; font-size: var(--fs-input);
  font-family: var(--sans); color: var(--nuit); border: 1px solid var(--border);
  border-radius: var(--r-2); background: var(--surface); resize: vertical; min-height: 84px; }
.compte-suppression textarea:focus, .compte-confirmation input:focus { outline: none; border-color: var(--teal);
  box-shadow: 0 0 0 4px rgba(20, 130, 135, .10); }
/* La confirmation : l'encadré rouge des bannières d'erreur, avec sa question. */
.compte-confirmation { margin-top: var(--s5); padding: var(--s5);
  background: rgba(180, 71, 47, .06); border: 1px solid rgba(180, 71, 47, .30);
  border-radius: var(--r-2); }
.compte-confirmation > p { color: var(--danger-ink); font-size: var(--fs-sm);
  line-height: 1.5; margin-bottom: var(--s4); font-weight: 500; }
.compte-confirmation .field { max-width: 360px; }
.compte-confirmation-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 560px) {
  .compte-carte { padding: var(--s5); }
  .compte-suppression { padding: 0; }
  .compte-session-boutons { flex: 1 1 100%; }
  .compte-session-boutons .btn-ghost { flex: 1 1 auto; }
  .compte-suppression > summary { padding: var(--s5); }
  .compte-suppression > p, .compte-suppression > form { margin: 0 var(--s5); }
  .compte-suppression > form { padding-bottom: var(--s5); }
  .compte-confirmation-actions .btn, .compte-form-actions .btn { flex: 1 1 auto; white-space: normal; }
  .vignettes-theme { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
}

/* ── 9. Espace cabinet ───────────────────────────────────────────────────── */
/* Le langage du coffre : en-tête et filet, onglets soulignés, lignes blanches
   posées sur le crème. Une seule teinte pour toutes les icônes. */
.cab-tete { align-items: center; margin-bottom: 0; border-bottom: 0; padding-bottom: var(--s4); }
.cab-tete .muted { margin-top: 6px; font-size: var(--fs-sm); }
.cab-compte { min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-pill);
  background: var(--cream-3); color: var(--profond); font: 700 11px/20px var(--sans);
  text-align: center; }

.cab-outils { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: var(--s4); }
.cab-outils:empty { display: none; }
.cab-select { width: auto; padding: 9px 12px; font-size: 13.5px; }

/* Demandes de pièces : la liste à composer, l'e-mail, l'avancement. */
.cab-carte--large { max-width: 760px; }
.lk-select.cab-select-large { width: 100%; }
.cab-demande-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: var(--s5) 0 var(--s3); }
.cab-demande-tete h3 { font: 600 var(--fs-label)/1 var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--profond); }
.cab-demande-compte { font-size: 12.5px; }
.cab-demande-liste { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 8px; counter-reset: demande; }
.cab-demande-element { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: start;
  padding: 10px; border: 1px solid var(--border-soft); border-radius: var(--r-lg); background: var(--cream); }
.cab-demande-champs { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 8px; }
.cab-demande-champs input:last-child { grid-column: 2; }
.cab-demande-champs input { width: 100%; padding: 10px 12px; font: 400 14px var(--sans); color: var(--nuit);
  border: 1px solid var(--border); border-radius: var(--r-2); background: var(--surface); }
.cab-demande-champs input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 4px rgba(20, 130, 135, .10); }
.cab-demande-champs .lk-select { width: 100%; padding-top: 10px; padding-bottom: 10px; font-size: 13.5px; }
.cab-boutons.cab-boutons--gauche { justify-content: flex-start; }
.cab-envoi { max-width: none; margin: 0 0 var(--s5); }
.cab-envoi p { font-size: var(--fs-sm); line-height: 1.6; margin-bottom: 12px; }
.cab-envoi--nouveau { background: rgba(20, 130, 135, .08); border-color: rgba(20, 130, 135, .35); }
.cab-nature { display: inline-flex; align-items: center; gap: 5px; }
.cab-nature svg { color: var(--teal); }
.cab-element-etat { color: var(--muted); }
.cab-element-etat--recue { color: var(--etat-horodatage); font-weight: 600; }
.cab-element--recue .cab-numero { background: var(--teal); }
.cab-demande--close { opacity: .7; }
.cab-ajout { margin-top: var(--s4); }
.cab-ajout summary { cursor: pointer; font: 600 13.5px var(--sans); color: var(--teal-ink); }
.cab-ajout-element { margin-top: 10px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.cab-ajout-element .cab-demande-liste { width: 100%; }
.cab-demandes-dossier { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: calc(-1 * var(--s3)) 0 var(--s4); }
.cab-demande-lien { display: inline-flex; align-items: center; gap: 6px; font: 500 13px var(--sans); color: var(--teal-ink); text-decoration: none; }
.cab-demande-lien:hover span { text-decoration: underline; text-underline-offset: 3px; }
.cab-demande-lien svg { color: var(--teal); }
/* Le lien de vérification d'un dossier, pour le destinataire des pièces : le bloc du dossier. */
.cab-adverse { margin-top: var(--s6); padding: 18px 20px; border: 1px solid var(--border-soft); border-radius: var(--r-lg); background: var(--surface); }
.cab-adverse h3 { font: 600 var(--fs-label)/1 var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--profond); margin-bottom: 10px; }
.cab-adverse > p { font-size: var(--fs-sm); line-height: 1.6; max-width: 640px; }
.cab-adverse-lien { display: flex; gap: 8px; align-items: center; }
.cab-adverse-url { flex: 1; min-width: 0; padding: 9px 12px; font: 400 13px var(--mono); color: var(--profond);
  border: 1px solid var(--border); border-radius: var(--r-2); background: var(--cream); }
.cab-adverse-meta { margin-top: 8px; font-size: 12.5px; }
.cab-adverse-ecart { margin-top: 6px; font-size: 13px; color: var(--amber-ink); }
.cab-adverse-desactiver { color: var(--danger-ink); }
/* La phrase secrète, quand le lien en a besoin (ouvrir les fiches, afficher l'adresse complète). */
.cab-adverse-phrase { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 2px; max-width: 640px; }
.cab-adverse-phrase > p { font-size: var(--fs-sm); line-height: 1.6; }
.cab-adverse-phrase .cab-adverse-ecart { margin-top: 0; }

/* La page publique de vérification des pièces d'un dossier. */
.adv { max-width: 860px; margin: 0 auto; padding: var(--s6) var(--gutter) var(--s8); }
.adv h1 { font-family: var(--serif); font-weight: 400; font-size: 32px; line-height: 1.15; color: var(--nuit); margin: 6px 0 8px; }
.adv-intro { margin: var(--s4) 0; font-size: var(--fs-sm); line-height: 1.6; max-width: 680px; }
.adv-depot { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 26px 18px; text-align: center;
  border: 2px dashed var(--border); border-radius: var(--r-lg); background: var(--surface); cursor: pointer;
  transition: border-color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out); }
.adv-depot strong { font: 600 15px var(--sans); color: var(--nuit); }
.adv-depot span { font-size: 13px; color: var(--muted); }
.adv-depot:hover, .adv-depot--survol { border-color: var(--teal); background: rgba(20, 130, 135, .05); }
.adv-bilan { margin: 12px 0 0; font: 600 14px var(--sans); color: var(--nuit); }
.adv-bilan:empty { display: none; }
.adv-sans { margin-top: 10px; padding: 12px 14px; border-radius: var(--r-lg); background: rgba(201, 128, 58, .10); font-size: 13.5px; }
.adv-sans ul { margin: 6px 0 6px 18px; }
.adv-pieces { list-style: none; margin: var(--s5) 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.adv-piece { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; padding: 14px 16px;
  background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--r-lg); }
.adv-piece--ok { border-color: rgba(47, 107, 79, .45); }
.adv-piece--ok .cab-numero { background: var(--etat-horodatage); }
.adv-piece-corps { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.adv-piece-titre { font: 600 14.5px/1.4 var(--sans); color: var(--nuit); word-break: break-word; }
.adv-numero { color: var(--teal-ink); margin-right: 6px; }
.adv-etat { font-size: 13px; display: flex; align-items: center; gap: 6px; }
.adv-etat--ok { color: var(--etat-horodatage); font-weight: 600; }
.adv-etat--neutre { color: var(--muted); }
.adv-inscription { font-size: 13px; line-height: 1.5; color: var(--text); }
.adv-empreinte { font-size: 12px; color: var(--muted); word-break: break-all; }
.adv-empreinte code { font-family: var(--mono); font-size: 11.5px; }
/* La fiche d'une pièce du nouveau format, ouverte avec la clé du lien (décision C7). */
.adv-fiche { margin: 2px 0; padding: 10px 12px; border: 1px solid var(--border-soft); border-radius: var(--r-2); background: var(--cream); }
.adv-fiche-lignes { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin: 0; font-size: 13px; line-height: 1.45; }
.adv-fiche-lignes dt { color: var(--muted); }
.adv-fiche-lignes dd { margin: 0; color: var(--text); word-break: break-word; }
.adv-mono { font-family: var(--mono); font-size: 11.5px; word-break: break-all; }
.adv-fiche-controle { margin-top: 8px; font-size: 12.5px; color: var(--etat-horodatage); }
.adv-fiche-texte { margin-top: 6px; font-size: 12.5px; }
.adv-fiche-texte summary { cursor: pointer; color: var(--teal-ink); }
.adv-fiche-texte pre { margin: 6px 0 0; padding: 8px 10px; max-height: 260px; overflow: auto; white-space: pre-wrap; word-break: break-all;
  font: 400 11px/1.5 var(--mono); color: var(--text); background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--r-2); }
.adv-limites { margin-top: var(--s6); font-size: 12.5px; line-height: 1.6; max-width: 680px; }

@media (max-width: 560px) {
  .cab-demande-champs { grid-template-columns: minmax(0, 1fr); }
  .cab-demande-champs input:last-child { grid-column: auto; }
  .adv-fiche-lignes { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .adv-fiche-lignes dd { margin-bottom: 6px; }
}
.cab-reglage { padding-left: 0; padding-right: 0; }

.cab-liste { display: flex; flex-direction: column; gap: 8px; }
.cab-ligne { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center;
  gap: 14px; padding: 12px 16px; background: var(--surface); color: var(--text);
  border: 1px solid var(--border-soft); border-radius: var(--r-lg); box-shadow: var(--shadow-1);
  text-decoration: none; transition: border-color var(--dur-1) var(--ease-out); }
a.cab-ligne:hover { border-color: var(--border); }
.cab-glyphe, .cab-dossier-ico { width: 36px; height: 36px; border-radius: 10px; flex: none;
  display: grid; place-items: center; color: #fff; background: var(--acc-doc); }
.cab-glyphe--photo { background: var(--acc-photo); }
.cab-glyphe--video { background: var(--acc-video); }
.cab-glyphe--audio { background: var(--acc-audio); }
.cab-dossier-ico { background: var(--cream-2); color: var(--profond); }
.cab-ligne-corps { min-width: 0; }
.cab-ligne-titre { display: block; font: 600 14px/1.35 var(--sans); color: var(--nuit);
  text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.cab-ligne-titre:hover { text-decoration: underline; text-underline-offset: 3px; }
.cab-ligne-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
  margin-top: 3px; font-size: 12.5px; color: var(--muted); }
.cab-ligne-chiffre { font: 500 13px var(--sans); color: var(--nuit); white-space: nowrap; }
.cab-ligne-date { font-size: 12px; color: var(--sub); white-space: nowrap; }
.cab-classee { display: inline-flex; align-items: center; gap: 6px; max-width: 260px;
  font: 500 12.5px var(--sans); color: var(--teal-ink); text-decoration: none; }
.cab-classee span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cab-classee:hover span { text-decoration: underline; text-underline-offset: 3px; }
.cab-rien { padding: 24px; text-align: center; font-size: 14px; color: var(--muted); }

.cab-vide { text-align: center; padding: 40px 20px; max-width: 460px; margin: 12px auto 0; }
.cab-vide-ico { width: 58px; height: 58px; border-radius: 50%; margin: 0 auto 18px;
  display: grid; place-items: center; background: rgba(20, 130, 135, .10); color: var(--teal); }
.cab-vide h2 { font-family: var(--serif); font-size: var(--fs-h2); font-weight: 400;
  color: var(--nuit); margin-bottom: 8px; }
.cab-vide p { color: var(--muted); font-size: 14px; line-height: 1.6; }
.cab-vide .btn { margin-top: 20px; }

.cab-retour { display: inline-flex; align-items: center; gap: 6px; margin-bottom: var(--s4);
  font: 500 13px var(--sans); color: var(--teal); text-decoration: none; }
.cab-retour svg { transform: rotate(180deg); }
.cab-retour:hover span { text-decoration: underline; text-underline-offset: 3px; }
.cab-dossier-tete { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
  gap: 16px 24px; margin-bottom: var(--s5); }
.cab-dossier-texte { min-width: 0; }
.cab-dossier-tete h2 { font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1.15;
  color: var(--nuit); letter-spacing: -0.01em; word-break: break-word; }
.cab-dossier-tete .muted { margin-top: 6px; font-size: 14px; }
.cab-dossier-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.cab-pieces-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 16px; margin: var(--s6) 0 var(--s3); }
.cab-pieces-tete h3 { display: flex; align-items: center; gap: 8px;
  font: 600 var(--fs-label)/1 var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--profond); }
.cab-pieces-outils { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }

.cab-pieces { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }

/* Liste, Chronologie, Carte : un sélecteur discret à côté du titre « Pièces ». */
.cab-presentations { display: inline-flex; padding: 3px; gap: 2px; margin-right: auto; background: var(--cream-2);
  border: 1px solid var(--border-soft); border-radius: var(--r-pill); }
.cab-presentation { border: 0; background: transparent; padding: 6px 14px; border-radius: var(--r-pill);
  font: 500 13px/1 var(--sans); color: var(--profond); cursor: pointer;
  transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); }
.cab-presentation:hover { color: var(--nuit); }
.cab-presentation[aria-pressed="true"] { background: var(--surface); color: var(--nuit); font-weight: 600;
  box-shadow: 0 1px 3px rgba(18, 38, 62, .12); }
.cab-pieces-tete h3 + .cab-presentations { margin-left: 8px; }

/* La chronologie : un jour par section, l'heure de capture en marge. */
.cab-chrono-aide { margin: 0 0 var(--s4); max-width: 640px; }
.cab-chrono-jour + .cab-chrono-jour { margin-top: var(--s5); }
.cab-chrono-jour h4 { font: 600 var(--fs-label)/1 var(--sans); text-transform: uppercase; letter-spacing: .08em;
  color: var(--sub); margin: 0 0 10px; }
/* Une frise : le fil relie les points des pièces (ce n'est pas un encadré à barre). */
.cab-chrono-liste { list-style: none; margin: 0; padding: 0 0 0 16px; border-left: 2px solid var(--border-soft);
  display: flex; flex-direction: column; gap: 8px; }
.cab-chrono-piece { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px;
  padding: 12px 14px; background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--r-lg);
  box-shadow: var(--shadow-1); }
.cab-chrono-piece::before { content: ''; position: absolute; left: -23px; top: 18px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 3px var(--cream); }
.cab-chrono-piece--retiree::before { background: var(--cream-3); }
.cab-chrono-heure { font: 600 13px/1.5 var(--sans); color: var(--nuit); font-variant-numeric: tabular-nums; padding-top: 1px; }
.cab-chrono-corps { min-width: 0; }
.cab-chrono-titre, .cab-hors-carte-titre { font: 600 14px/1.45 var(--sans); color: var(--nuit); text-decoration: none; word-break: break-word; }
a.cab-chrono-titre:hover, a.cab-hors-carte-titre:hover { text-decoration: underline; text-underline-offset: 3px; }
.cab-chrono-numero { color: var(--teal-ink); margin-right: 6px; }
.cab-chrono-piece--retiree .cab-chrono-titre { color: var(--muted); }
.cab-chrono-ecart { color: var(--amber-ink); font-weight: 600; }

/* La carte du dossier : plus haute que celle d'une fiche ; repères numérotés. */
.cab-carte-dossier { height: 460px; }
.cab-carte-statut { margin: 10px 0 0; }
.cab-hors-carte { margin-top: var(--s4); }
.cab-hors-carte h4 { font: 600 var(--fs-label)/1 var(--sans); text-transform: uppercase; letter-spacing: .08em;
  color: var(--sub); margin: 0 0 8px; }
.cab-hors-carte ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.cab-hors-carte li { font-size: var(--fs-sm); }
.cab-hors-carte .cab-hors-carte-titre { font-size: var(--fs-sm); }
.repere-pieces { position: relative; min-width: 30px; height: 30px; padding: 0 10px; border: 2px solid #fff;
  border-radius: var(--r-pill); background: var(--nuit); color: #fff; font: 700 12.5px/1 var(--sans);
  font-variant-numeric: tabular-nums; cursor: pointer; box-shadow: 0 2px 6px rgba(18, 38, 62, .35); margin-bottom: 8px; }
.repere-pieces::after { content: ''; position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: #fff; border-bottom: 0; }
.repere-pieces:hover, .repere-pieces:focus-visible { background: var(--teal); }
.repere-liste { list-style: none; margin: 0; padding: 2px 0; display: flex; flex-direction: column; gap: 8px; }
.repere-liste small { display: block; margin-top: 2px; font-size: var(--fs-caption); color: var(--muted); }
.repere-lien { display: block; font: 500 13px/1.4 var(--sans); color: var(--nuit); text-decoration: none; }
.repere-lien:hover { text-decoration: underline; text-underline-offset: 3px; }
.repere-numero { display: block; font-weight: 700; color: var(--teal-ink); }
.cab-carte-dossier .maplibregl-popup-content { padding: 12px 14px; border-radius: var(--r-lg);
  box-shadow: 0 4px 18px rgba(18, 38, 62, .20); font-family: var(--sans); }
.cab-piece { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 14px; align-items: start;
  padding: 14px 14px 14px 16px; background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
.cab-numero { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  background: var(--nuit); color: var(--cream); font: 600 13px/1 var(--sans);
  font-variant-numeric: tabular-nums; }
.cab-piece-corps { min-width: 0; padding-top: 1px; }
.cab-piece-titre { font: 600 14.5px/1.4 var(--sans); color: var(--nuit); text-decoration: none;
  word-break: break-word; }
a.cab-piece-titre:hover { text-decoration: underline; text-underline-offset: 3px; }
.cab-piece--retiree .cab-numero { background: var(--cream-3); color: var(--muted); }
.cab-piece--retiree .cab-piece-titre { color: var(--muted); }
.cab-note { margin-top: 8px; padding: 8px 12px; background: var(--cream);
  border: 1px solid var(--cream-3); border-radius: var(--r-1);
  font-size: 13px; line-height: 1.55; color: var(--text); white-space: pre-wrap; }
.cab-piece-edition { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.cab-piece-actions { display: flex; gap: 2px; opacity: .55; transition: opacity var(--dur-1) var(--ease-out); }
.cab-piece:hover .cab-piece-actions, .cab-piece:focus-within .cab-piece-actions { opacity: 1; }
@media (hover: none) { .cab-piece-actions { opacity: 1; } }
.cab-icone { width: 32px; height: 32px; border: 0; border-radius: var(--r-1); background: transparent;
  color: var(--profond); cursor: pointer; display: grid; place-items: center;
  transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); }
.cab-icone:hover { background: var(--cream-2); color: var(--nuit); }
.cab-icone--arme, .cab-icone--arme:hover { background: var(--danger); color: #fff; }
.cab-icone-vide { width: 32px; }

.cab-bas { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  margin-top: var(--s8); padding-top: var(--s5); border-top: 1px solid var(--border-soft); }
.cab-bas .muted { font-size: 12.5px; }

.cab-intro { margin-bottom: var(--s5); max-width: 560px; font-size: var(--fs-sm); line-height: 1.6; }
.cab-carte { padding: var(--s6); max-width: 560px; }
.cab-carte .btn-primary { width: auto; }
.cab-aide { margin-top: 12px; font-size: var(--fs-caption); color: var(--muted); }
.cab-comment { max-width: 560px; margin-top: var(--s6); padding: 20px 24px;
  background: rgba(120, 180, 205, .12); border: 1px solid rgba(120, 180, 205, .35); border-radius: var(--r-lg); }
.cab-comment h3 { font: 700 12px var(--sans); text-transform: uppercase; letter-spacing: .05em;
  color: var(--profond); margin-bottom: var(--s3); }
.cab-comment ol { margin: 0 0 12px 18px; padding: 0; }
.cab-comment li { font-size: var(--fs-sm); line-height: 1.7; color: var(--text); }
.cab-etat-tete { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.cab-etat-tete h3 { font-family: var(--serif); font-weight: 400; font-size: 22px; color: var(--nuit); }
.cab-etat-ico { width: 36px; height: 36px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--cream-2); color: var(--profond); }
.cab-etat--verifiee .cab-etat-ico { background: rgba(20, 130, 135, .12); color: var(--teal); }
.cab-etat p { font-size: var(--fs-sm); line-height: 1.6; margin-top: 8px; }
.cab-resume { display: grid; grid-template-columns: 190px 1fr; gap: 8px 16px; margin: 14px 0 4px; }
.cab-resume dt { font: 600 var(--fs-label)/1.6 var(--sans); text-transform: uppercase;
  letter-spacing: .08em; color: var(--sub); }
.cab-resume dd { margin: 0; font-size: 14px; color: var(--nuit); word-break: break-word; }
.cab-code { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 6px; }
.cab-code input { width: 170px; text-align: center; letter-spacing: .3em; font-size: 20px; }
.cab-liens { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 10px; }
.cab-liens .btn-link { padding-left: 0; padding-right: 0; margin-right: 12px; }

.cab-fenetre { width: min(100% - 32px, 480px); }
.cab-fenetre--large { width: min(100% - 32px, 620px); }
.cab-choix { display: flex; flex-direction: column; margin: 14px 0 6px; }
.cab-choix .check { color: var(--text); margin-bottom: 12px; }
.cab-modele span { display: flex; flex-direction: column; gap: 2px; }
.cab-modele strong { font-size: 13.5px; color: var(--nuit); font-weight: 600; }
.cab-exemple { font-size: 12.5px; color: var(--muted); }
.cab-perso { margin: -4px 0 12px 26px; }
.cab-elements { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 6px; }
.cab-elements .puce { padding: 5px 11px; font-size: 12px; }
.cab-nouveau { margin: -2px 0 12px 26px; }
.cab-boutons { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 14px; }
.cab-piece-edition .cab-boutons { margin-top: 0; }
.cab-candidates { max-height: 52vh; overflow: auto; margin: 12px -4px 0; padding: 0 4px; }
.cab-groupe { border: 0; padding: 0; margin: 0 0 14px; }
.cab-groupe legend { font: 600 var(--fs-label)/1 var(--sans); text-transform: uppercase;
  letter-spacing: .08em; color: var(--profond); margin-bottom: 10px; }
.cab-candidate { color: var(--text); margin-bottom: 10px; }
.cab-candidate span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cab-candidate strong { font-size: 13.5px; color: var(--nuit); font-weight: 600; }
.cab-candidate small { font-size: 12px; color: var(--muted); }

/* ── 10. États ───────────────────────────────────────────────────────────── */
.view-loading { display: flex; flex-direction: column; align-items: center;
  gap: var(--s3); padding: 80px 0; color: var(--muted); font-size: var(--fs-xs); }
.spinner { width: 30px; height: 30px; border: 3px solid var(--cream-2);
  border-top-color: var(--teal); border-radius: 50%;
  animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.skel-card { border: 1px solid var(--border-soft); border-radius: var(--r-lg);
  overflow: hidden; background: var(--surface); pointer-events: none; }
.skel-card::before { content: ""; display: block; height: 132px; }
.skel-card::before, .skel-line {
  background: linear-gradient(90deg, var(--cream-2) 25%, #F4F0E7 37%, var(--cream-2) 63%);
  background-size: 400% 100%; animation: skel 1.4s ease infinite; }
.skel-line { height: 12px; border-radius: 6px; margin: 14px 16px; }
.skel-line:last-child { width: 55%; margin-top: 0; }
@keyframes skel { from { background-position: 100% 0 } to { background-position: 0 0 } }

/* ── 11. Vue vérification publique (#/v/:token) ──────────────────────────── */
.verify-wrap { max-width: 680px; margin: 0 auto 40px; display: flex; flex-direction: column; gap: 18px; }
.verify-head { text-align: center; }
.verify-head h1 { margin: 14px 0 0; font-family: var(--serif); font-weight: 400;
  font-size: clamp(28px, 4vw, 40px); line-height: 1.08; color: var(--nuit); letter-spacing: -0.01em; }
.verify-head .pill { margin-left: 8px; vertical-align: middle; }
/* Le badge du certificat du vérificateur du site : sarcelle plein, texte crème. */
.verify-badge { display: inline-flex; align-items: center; gap: 8px; color: var(--cream);
  background: var(--teal); border-radius: var(--r-pill); padding: 7px 16px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .02em; vertical-align: middle;
  box-shadow: 0 8px 22px rgba(20, 130, 135, .25); }
.verify-badge svg { width: 18px; height: 18px; }
.verify-card { background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--r-lg); padding: 22px 24px; box-shadow: var(--shadow-1); }
.verify-card .detail-sec { margin-top: 0; }
.verify-media { border-radius: var(--r-lg); overflow: hidden; background: var(--nuit); text-align: center; }
.verify-media img, .verify-media video { max-width: 100%; max-height: 460px; display: block; margin: 0 auto; }
.verify-result { margin-top: 14px; padding: 12px 16px; border-radius: var(--r-2);
  font-size: 13.5px; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
.verify-result.ok  { background: rgba(20, 130, 135, .10); color: var(--teal-ink);
  border: 1px solid rgba(20, 130, 135, .4); }
.verify-result.bad { background: rgba(180, 71, 47, .08); color: var(--danger-ink);
  border: 1px solid rgba(180, 71, 47, .4); }
.verify-empty { text-align: center; padding: 40px 24px; }
.verify-empty h1 { margin: 12px 0 6px; font-family: var(--serif); font-weight: 400;
  font-size: 28px; color: var(--nuit); }
.verify-empty .btn { margin-top: 18px; }
.empty-icon-warn { background: rgba(201, 128, 58, .12); color: var(--amber); }
/* Signature de bas de page : la marque officielle, variante couleur (fond clair). */
.verify-lockup { display: flex; flex-direction: column; align-items: center; gap: 8px;
  margin-top: 6px; }
.verify-lockup-mark { width: 32px; height: 32px; object-fit: contain; display: block; }
/* En sombre, la marque blanc et bleu (Samuel, 08/10/2026). */
:root .verify-lockup-mark--sombre { display: none; }
:root[data-mode="sombre"] .verify-lockup-mark--clair { display: none; }
:root[data-mode="sombre"] .verify-lockup-mark--sombre { display: block; }
.verify-foot { text-align: center; font-size: 12px; margin: 0; }

/* ── 12. Liens publics (fiche) ───────────────────────────────────────────── */
.lk-form { display: flex; flex-wrap: wrap; align-items: end; gap: 14px; margin: 12px 0 4px; }
.lk-field { display: flex; flex-direction: column; gap: 6px;
  font: 600 var(--fs-label)/1 var(--sans); text-transform: uppercase;
  letter-spacing: .08em; color: var(--profond); }
.lk-select { width: auto; padding: 10px 36px 10px 14px; font-size: 14px; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312263E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; }
.lk-fresh { margin-top: 16px; padding: 16px; border: 1px solid rgba(20, 130, 135, .30);
  border-radius: var(--r-lg); background: rgba(20, 130, 135, .08); }
.lk-fresh-title { margin: 0 0 8px; font-size: 12.5px; font-weight: 600; color: var(--teal-ink); }
.lk-url-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.lk-url { flex: 1; min-width: 240px; font-family: var(--mono); font-size: 11.5px;
  background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--r-1);
  padding: 9px 12px; word-break: break-all; user-select: all; color: var(--profond); }
.lk-open { display: inline-block; margin-top: 10px; font-size: 12.5px; font-weight: 600; color: var(--teal); }
.lk-none { color: var(--muted); font-size: 12.5px; padding: 8px 0; }
/* Format 2 (CON-4) : la phrase qui ouvre la preuve, et ce que porte l'adresse du lien. */
.lk-pass { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 4px; }
.lk-pass > p, .lk-cle { font-size: 12.5px; line-height: 1.55; }
.lk-cle { margin: 8px 0 0; }

/* ── 13. Contenu chiffré de bout en bout (phrase secrète du coffre) ───────── */
.e2e-card { text-align: left; max-width: 480px; margin: 0 auto; padding: var(--s4) 0; }
.e2e-card h3 { font-family: var(--serif); font-weight: 400; font-size: 20px;
  color: var(--nuit); margin-bottom: 6px; }
.e2e-card p { font-size: var(--fs-sm); color: var(--muted); margin-bottom: var(--s3); line-height: 1.6; }
.e2e-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.e2e-form input.e2e-pass { flex: 1; min-width: 200px; width: auto; }
.e2e-unlocked-note { font-size: 12.5px; padding: 8px 12px; }
.verify-e2e p { margin-top: 6px; }

/* ── 14. Partage E2E : clés d'identité & code de sécurité ────────────────── */
.tag-e2e { background: rgba(20, 130, 135, .12); color: var(--teal-ink); margin-left: 8px; }
.fp-block { margin: 12px 0 4px; text-align: left; }
.fp-label { font-size: 12px; color: var(--muted); font-weight: 600; margin-bottom: 4px; }
.fp { display: inline-block; font-family: var(--mono);
  font-size: 12px; letter-spacing: .04em; word-break: break-all; background: var(--surface);
  border: 1px solid var(--border-soft); border-radius: var(--r-1); padding: 8px 10px;
  user-select: all; color: var(--profond); }
.fp-note { font-size: 12px; color: var(--muted); margin-top: 6px; }
.fp-alerte { font-size: 12.5px; font-weight: 600; color: var(--danger-ink); background: rgba(180, 71, 47, .08);
  border: 1px solid var(--danger); border-radius: var(--r-1); padding: 8px 10px; margin-top: 8px; }
.share-e2e-note { font-size: 12.5px; margin-top: -6px; margin-bottom: 10px; }
.share-pass-row { margin: 10px 0 4px; }
.share-item-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.e2e-keys-loading { font-size: 12.5px; }

/* ── 15. Écrans étroits ──────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 720px) {
  /* Comme la nav du site en deux lignes : marque et bouton sur la première,
     les entrées sur une ligne dédiée. Le <nav> garde ses crochets (app.js
     masque #nav entier hors session) ; `display: contents` laisse ses enfants
     se ranger directement dans la barre, et le pseudo-élément fait le retour
     à la ligne. Une barre collante doit rester basse sur un téléphone. */
  .topbar { justify-content: flex-start; row-gap: 8px; column-gap: 20px;
    padding-top: 10px; padding-bottom: 12px; }
  .brand-seal, .brand-mark { width: 36px; height: 36px; }
  .brand-name, .brand-wordmark { font-size: 23px; }
  .nav { display: contents; }
  .topbar::after { content: ''; flex-basis: 100%; order: 2; height: 0; }
  .nav a { order: 3; }
  .nav-email { display: none; }
  #nav-logout { order: 1; margin-left: auto; padding: 8px 14px; font-size: 12.5px; }
  .cab-ligne { grid-template-columns: auto minmax(0, 1fr); }
  .cab-ligne > .cab-ligne-etat, .cab-ligne > .cab-ligne-action,
  .cab-ligne > .cab-ligne-chiffre, .cab-ligne > .cab-ligne-date { grid-column: 2; justify-self: start; }
  .cab-piece { grid-template-columns: 34px minmax(0, 1fr); }
  .cab-piece-actions { grid-column: 1 / -1; justify-content: flex-end; opacity: 1; }
  .cab-resume { grid-template-columns: 1fr; gap: 2px; }
  .cab-resume dd { margin-bottom: 8px; }
  .footer { padding-top: 40px; }
}
@media (max-width: 560px) {
  #main { padding-top: var(--s6); }
  .auth-card { padding: var(--s6) var(--s5); }
  /* Une colonne : l'étiquette coiffe sa valeur, sans filet entre les deux. */
  .dl { grid-template-columns: 1fr; }
  .dl dt { border-top: 1px solid var(--border-soft); padding-bottom: 2px; }
  .dl dd { border-top: none; padding-top: 4px; background: var(--cream); }
  .footer-inner { grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ── 17. Dépôts (09/10/2026) ─────────────────────────────────────────────────
   Un ensemble de fichiers déposé depuis cet ordinateur (vue-depots.mjs). Même
   registre que /verifier : peu d'éléments, des panneaux blancs, la chasse fixe
   pour les empreintes et les numéros, une ligne de terminal pour le calcul en
   direct, des verdicts à filet sans aplat soutenu. Un filet tout autour,
   jamais de barre à gauche. */
.dep { --dep-terminal: #12263E; --dep-terminal-texte: #E6ECF2; --dep-terminal-invite: #79C7CA; }
:root[data-mode="sombre"] .dep { --dep-terminal: #0A121B; --dep-terminal-texte: #DCE5EE; }

.dep-fil { font-size: var(--fs-sm); margin-bottom: var(--s3); }
.dep-fil a { color: var(--teal-ink); }
.dep-tete { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s6);
  flex-wrap: wrap; margin-bottom: var(--s7); }
.dep-tete h1 { font-family: var(--serif); font-size: var(--fs-display); font-weight: 400;
  letter-spacing: -0.01em; line-height: var(--lh-tight); color: var(--nuit); }
.dep-tete .overline { margin-bottom: var(--s3); }
.dep-tete-nouveau { margin-bottom: var(--s6); }
.dep-h1-version { font: 500 15px/1 var(--sans); color: var(--muted); margin-left: var(--s3);
  letter-spacing: .01em; vertical-align: middle; }
.dep-numero { font-family: var(--mono); font-size: 12.5px; letter-spacing: .03em; color: var(--text); }
.dep-numero-ligne { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s3); }

/* Badges : l'état d'un dépôt, en pilule discrète. */
.dep-badge { display: inline-flex; align-items: center; font: 700 10.5px/1 var(--sans); letter-spacing: .06em;
  text-transform: uppercase; padding: 5px 10px; border-radius: var(--r-pill);
  background: rgba(20, 130, 135, .12); color: var(--teal-ink); white-space: nowrap; }
.dep-badge-constat { background: var(--nuit); color: var(--cream); }
.dep-badge-attente { background: rgba(201, 128, 58, .14); color: var(--amber-ink); }

/* ── La liste ── */
.dep-liste { display: grid; gap: var(--s3); }
.dep-carte { display: grid; grid-template-columns: 44px minmax(0, 1fr) 20px; gap: var(--s4); align-items: center;
  padding: 18px 20px; background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--r-lg);
  box-shadow: var(--shadow-1); color: inherit; text-decoration: none;
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out); }
.dep-carte:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); border-color: var(--border); }
.dep-carte-icone { width: 44px; height: 44px; border-radius: var(--r-2); display: grid; place-items: center;
  background: rgba(20, 130, 135, .10); color: var(--teal); }
.dep-carte-tete { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.dep-carte-nom { font-family: var(--serif); font-size: 21px; font-weight: 400; line-height: 1.2; color: var(--nuit); }
.dep-carte-details { font-size: var(--fs-sm); color: var(--muted); margin-top: 4px; }
.dep-carte-meta { font-size: var(--fs-xs); color: var(--sub); margin-top: 2px; }
.dep-carte-fleche { color: var(--sub); display: grid; place-items: center; }
.dep-carte-fleche svg { transform: rotate(-90deg); }
.dep-versions { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: var(--s2); }
.dep-versions li + li::before { content: '→'; color: var(--sub); margin-right: 6px; font-size: 12px; }
.dep-version { display: inline-block; font: 500 11.5px/1 var(--sans); padding: 4px 9px; border-radius: var(--r-pill);
  border: 1px solid var(--border); color: var(--muted); }
.dep-version-actuelle { border-color: var(--teal); color: var(--teal-ink); }

/* Le premier dépôt : trois étapes, sans illustration. */
.dep-vide { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--r-xl);
  padding: var(--s9) var(--s6); text-align: center; display: grid; justify-items: center; gap: var(--s3); }
.dep-vide-icone { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(20, 130, 135, .10); color: var(--teal); margin-bottom: var(--s2); }
.dep-vide h2 { font-family: var(--serif); font-weight: 400; font-size: 28px; color: var(--nuit); }
.dep-vide-etapes { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4);
  margin: var(--s5) 0 var(--s6); max-width: 760px; text-align: left; }
.dep-vide-etapes li { display: grid; grid-template-columns: 28px 1fr; gap: var(--s3); align-items: start; }
.dep-vide-etapes strong { display: block; font-size: 14px; color: var(--text); }
.dep-vide-etapes p { font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; }
.dep-etape-n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  font: 600 13px/1 var(--sans); background: var(--cream-2); color: var(--profond); }

/* ── Nouveau dépôt : deux colonnes, le récapitulatif suit le défilement. ── */
.dep-grille { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s6); align-items: start; }
.dep-colonne { display: grid; gap: var(--s5); min-width: 0; }
.dep-panneau { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--r-lg);
  box-shadow: var(--shadow-1); padding: var(--s6); min-width: 0; }
.dep-panneau-tete { margin-bottom: var(--s5); }
.dep-panneau-tete h2 { font-family: var(--serif); font-weight: 400; font-size: var(--fs-h2); color: var(--nuit); }
/* Le cadenas reste à côté du texte, qui passe à la ligne sous lui-même. */
.dep-panneau-aide { display: flex; align-items: flex-start; gap: 6px; font-size: var(--fs-xs); color: var(--muted); margin-top: 6px; }
.dep-panneau-aide svg { color: var(--teal); flex: none; margin-top: 2px; }
.dep-fait-aide { font-size: var(--fs-xs); color: var(--muted); margin-top: 4px; }
/* Une archive ouverte, ou déposée telle quelle : la phrase, puis l’autre choix. */
.dep-archive { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.dep-archive .btn-link { padding: 0; }

/* La zone où glisser un dossier. */
.dep-zone { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 48px var(--s6);
  border: 1.5px dashed var(--border); border-radius: var(--r-xl); background: var(--cream); cursor: pointer;
  transition: border-color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out); }
.dep-zone:hover, .dep-zone:focus-visible, .dep-zone-survol { border-color: var(--teal);
  background: color-mix(in srgb, var(--teal) 6%, var(--surface)); outline: none; }
.dep-zone-icone { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(20, 130, 135, .10); color: var(--teal); margin-bottom: 4px; }
.dep-zone-titre { font-family: var(--serif); font-size: 23px; color: var(--nuit); line-height: 1.2; }
.dep-zone-sous { font-size: var(--fs-sm); color: var(--muted); }
.dep-zone-boutons { display: flex; gap: var(--s2); flex-wrap: wrap; justify-content: center; margin-top: var(--s2); }
.dep-zone-compacte { grid-template-columns: auto minmax(0, 1fr) auto; justify-items: start; text-align: left;
  padding: var(--s4) var(--s5); gap: 4px var(--s4); align-items: center; }
.dep-zone-compacte .dep-zone-icone { width: 44px; height: 44px; grid-row: span 2; margin: 0; }
.dep-zone-compacte .dep-zone-titre { font-size: 17px; }
.dep-zone-compacte .dep-zone-boutons { grid-column: 3; grid-row: 1 / span 2; margin: 0; }

/* La lecture : les chiffres, la ligne du terminal, la barre. */
.dep-lecture { display: grid; gap: var(--s4); }
.dep-lecture-tete { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s3); align-items: start; }
.dep-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s2); }
.dep-stat { background: var(--cream); border: 1px solid var(--border-soft); border-radius: var(--r-2); padding: 12px 14px; min-width: 0; }
.dep-stat-valeur { display: block; font-size: 20px; font-weight: 600; color: var(--nuit); font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dep-stat-libelle { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.dep-stat-nom .dep-stat-valeur { font-family: var(--mono); font-size: 14px; font-weight: 500; line-height: 1.7; }
.dep-terminal { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 14px; border-radius: 10px;
  background: var(--dep-terminal); color: var(--dep-terminal-texte); font: 12.5px/1.5 var(--mono); }
.dep-terminal-texte { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dep-terminal code { color: var(--dep-terminal-invite); font-family: var(--mono); }
.dep-invite { flex: none; color: var(--dep-terminal-invite); display: inline-flex; }
.dep-terminal-erreur { color: #F2A595; }
.dep-barre { height: 3px; border-radius: 3px; background: var(--cream-2); overflow: hidden; margin-top: -8px; }
.dep-barre > span { display: block; height: 100%; width: 0; background: var(--teal); transition: width var(--dur-1) linear; }

.dep-bloc-titre { font: 600 var(--fs-label)/1.2 var(--sans); text-transform: uppercase; letter-spacing: .12em;
  color: var(--muted); margin-bottom: 10px; }
.dep-puces { display: flex; flex-wrap: wrap; gap: var(--s2); }
.dep-puce { display: inline-flex; align-items: center; gap: 7px; font: 500 13px/1.2 var(--sans); color: var(--muted);
  padding: 6px 12px 6px 7px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface);
  cursor: pointer; transition: border-color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); }
.dep-puce:hover { border-color: var(--nuit); }
.dep-puce[aria-pressed="true"] { color: var(--teal-ink); border-color: var(--teal); background: rgba(20, 130, 135, .07); }
.dep-puce-coche { width: 17px; height: 17px; border-radius: 50%; border: 1px solid var(--border); display: grid; place-items: center; flex: none; }
.dep-puce[aria-pressed="true"] .dep-puce-coche { background: var(--teal); border-color: var(--teal); color: #fff; }

.dep-alertes { list-style: none; display: grid; gap: 6px; }
.dep-alertes li { display: flex; gap: var(--s2); align-items: flex-start; font-size: var(--fs-sm); color: var(--muted); }
.dep-alertes svg { flex: none; margin-top: 3px; color: var(--sub); }
.dep-alerte-secret { color: var(--amber-ink) !important; }
.dep-alerte-secret svg { color: var(--amber); }

/* Le contenu par dossier : une ligne, une barre proportionnelle, les chiffres. */
.dep-dossiers { list-style: none; }
.dep-dossiers li { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(48px, 1fr) 64px 76px; gap: var(--s3);
  align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border-soft); font-size: var(--fs-sm); }
.dep-dossiers li:last-child { border-bottom: 0; }
.dep-dossier-nom { display: flex; align-items: center; gap: var(--s2); min-width: 0; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dep-dossier-nom svg { color: var(--teal); flex: none; }
.dep-dossier-barre { height: 6px; border-radius: 6px; background: var(--cream-2); overflow: hidden; }
.dep-dossier-barre > span { display: block; height: 100%; border-radius: 6px; background: color-mix(in srgb, var(--teal) 70%, var(--surface)); }
.dep-dossier-nb, .dep-dossier-taille { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }
.dep-recherche, .dep-phrase input, .dep-champ textarea {
  width: 100%; padding: 12px 15px; font: 400 var(--fs-input)/1.4 var(--sans); color: var(--nuit);
  border: 1px solid var(--border); border-radius: var(--r-2); background: var(--surface);
  transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out); }
.dep-recherche { margin-top: var(--s4); }
.dep-recherche:focus, .dep-phrase input:focus, .dep-champ textarea:focus {
  outline: none; border-color: var(--teal); box-shadow: 0 0 0 4px rgba(20, 130, 135, .10); }
.dep-champ textarea { resize: vertical; min-height: 132px; line-height: 1.55; }
.dep-resultats { list-style: none; margin-top: var(--s2); }
.dep-resultats li { padding: 8px 0; border-bottom: 1px solid var(--border-soft); display: grid; gap: 2px; min-width: 0; }
.dep-resultat-chemin { font-size: var(--fs-sm); color: var(--text); overflow-wrap: anywhere; }
.dep-resultat-empreinte { font: 11.5px/1.4 var(--mono); color: var(--muted); overflow-wrap: anywhere; }
.dep-resultat-vide { color: var(--muted); font-size: var(--fs-sm); }

/* La description : deux colonnes de champs, le nom et les textes sur toute la largeur. */
.dep-champs { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 0 var(--s4); }
.dep-champ-large { grid-column: 1 / -1; }
.dep-champ > span { display: flex !important; align-items: baseline; justify-content: space-between; gap: var(--s2); }
.dep-requis { font-style: normal; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--sub); }
.dep-compteur { font: 500 11px/1 var(--sans); text-transform: none; letter-spacing: 0; color: var(--sub); font-variant-numeric: tabular-nums; }
.dep-git { margin-top: var(--s2); }
.dep-git code { font-family: var(--mono); font-size: 12.5px; }

/* Le récapitulatif : la protection, la liste de contrôle, le bouton, l'envoi. */
.dep-recap { position: sticky; top: calc(var(--nav-h) + 16px); background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--r-lg); box-shadow: var(--shadow-1); padding: 22px; display: grid; gap: var(--s4); }
.dep-recap-titre { font-family: var(--serif); font-weight: 400; font-size: 21px; color: var(--nuit); }
.dep-choix-groupe { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; min-width: 0; }
.dep-choix { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; padding: 13px 14px; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--r-2); background: var(--surface);
  transition: border-color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out); }
.dep-choix input { accent-color: var(--teal); width: 16px; height: 16px; margin-top: 2px; }
.dep-choix:has(input:checked) { border-color: var(--teal); background: color-mix(in srgb, var(--teal) 6%, var(--surface));
  box-shadow: 0 0 0 3px rgba(20, 130, 135, .10); }
.dep-choix-corps { display: grid; gap: 3px; min-width: 0; }
.dep-choix-titre { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); font-weight: 600; font-size: 14px; color: var(--text); }
.dep-choix-etiquette { font: 700 9.5px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--profond);
  border: 1px solid var(--border); border-radius: var(--r-pill); padding: 3px 7px; }
.dep-choix-texte { font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.dep-controles { list-style: none; display: grid; gap: 7px; }
.dep-controles li { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--muted); min-width: 0; }
.dep-controles li span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dep-coche { width: 17px; height: 17px; border-radius: 50%; border: 1px solid var(--border); display: grid; place-items: center; flex: none; }
.dep-ok { color: var(--text) !important; }
.dep-ok .dep-coche { background: var(--teal); border-color: var(--teal); color: #fff; }
.dep-rappel { font-size: 12.5px; line-height: 1.5; color: var(--muted); background: var(--cream); border: 1px solid var(--border-soft);
  border-radius: 10px; padding: 10px 12px; }
.dep-rappel strong { color: var(--text); font-weight: 600; }
.dep-deposer { width: 100%; padding: 14px 22px; font-size: 14px; }
.dep-envoi { list-style: none; display: grid; gap: 8px; }
.dep-envoi li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 4px 10px; align-items: center; font-size: 13px; color: var(--text); }
.dep-envoi-puce { width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; }
.dep-envoi-encours .dep-envoi-puce { border: 2px solid var(--cream-2); border-top-color: var(--teal); animation: spin .8s linear infinite; }
.dep-envoi-fait .dep-envoi-puce { background: var(--teal); color: #fff; }
.dep-envoi-echec .dep-envoi-puce { background: var(--danger); animation: none; border: 0; }
.dep-envoi-detail { grid-column: 2; font: 11.5px/1.3 var(--mono); color: var(--muted); }

/* La phrase secrète, demandée dans la page. */
.dep-phrase { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s3); padding: 14px 16px;
  border: 1px solid var(--border); border-radius: var(--r-2); background: var(--cream); }
.dep-phrase-icone { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--teal); }
.dep-phrase-titre { font-weight: 600; font-size: 14px; color: var(--text); }
.dep-phrase-aide { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.dep-phrase-champs { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: 10px; }
.dep-phrase-champs input { flex: 1 1 200px; padding: 10px 13px; font-size: 15px; }
.dep-phrase-erreur { margin-top: var(--s2); font-size: 13px; color: var(--danger-ink); }
.dep-phrase-zone { margin-bottom: var(--s4); }
.dep-recap .dep-phrase { grid-template-columns: 1fr; }
.dep-recap .dep-phrase-icone { display: none; }

/* ── Un dépôt ── */
.dep-scelle { display: flex; gap: var(--s4); align-items: flex-start; padding: 16px 18px; margin-bottom: var(--s5);
  border: 1px solid rgba(20, 130, 135, .35); border-radius: 14px; background: color-mix(in srgb, var(--teal) 7%, var(--surface)); }
.dep-scelle-icone { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--teal); color: #fff; flex: none; }
.dep-scelle strong { font-size: 15px; color: var(--text); }
.dep-scelle p { font-size: var(--fs-sm); color: var(--muted); margin-top: 2px; }
.dep-tete-fiche { margin-bottom: var(--s4); }
.dep-tete-fiche .muted { font-size: 14.5px; }
.dep-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 var(--s5); }
.dep-faits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--border-soft);
  border: 1px solid var(--border-soft); border-radius: var(--r-lg); overflow: hidden; }
.dep-fait { padding: 14px 18px; background: var(--surface); min-width: 0; }
.dep-fait-large { grid-column: 1 / -1; }
.dep-fait dt { font: 600 var(--fs-label)/1.2 var(--sans); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: 6px; }
.dep-fait dd { font-size: 14px; color: var(--text); overflow-wrap: anywhere; }
.dep-empreinte-ligne { display: flex; align-items: center; gap: var(--s2); min-width: 0; }
.dep-empreinte { font: 13px/1.5 var(--mono); letter-spacing: .02em; color: var(--nuit); overflow-wrap: anywhere; }
.dep-reference { font-size: 12px; }
.dep-copier { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); color: var(--muted);
  transition: color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out); }
.dep-copier:hover { color: var(--nuit); border-color: var(--nuit); }
.dep-copie { color: var(--teal) !important; border-color: var(--teal) !important; }
.dep-explorateur { display: inline-block; font-size: 12.5px; margin-left: var(--s3); }
.dep-onglets { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-top: var(--s7); overflow-x: auto; }
.dep-onglets button { appearance: none; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  padding: 10px 14px; font: 500 14px/1.2 var(--sans); color: var(--muted); cursor: pointer; white-space: nowrap; }
.dep-onglets button:hover { color: var(--text); }
.dep-onglets button[aria-selected="true"] { color: var(--nuit); border-bottom-color: var(--teal); }
.dep-onglet-corps { padding-top: var(--s5); }
.dep-desc + .dep-desc { margin-top: var(--s5); }
.dep-desc-texte { white-space: pre-line; font-size: 14.5px; line-height: 1.7; color: var(--text); max-width: 72ch; }
.dep-verif-resultat { margin-top: var(--s4); display: grid; gap: var(--s3); }
.dep-onglet-corps > .muted { margin: 0 0 var(--s4); }
.dep-verdicts { display: flex; flex-wrap: wrap; gap: var(--s2); }
.dep-verdict { font-size: 13px; padding: 6px 12px; border-radius: var(--r-pill); border: 1px solid var(--border); color: var(--muted); }
.dep-verdict strong { font-variant-numeric: tabular-nums; color: inherit; }
.dep-verdict-ok { border-color: rgba(20, 130, 135, .5); color: var(--teal-ink); }
.dep-verdict-modifie { border-color: rgba(201, 128, 58, .55); color: var(--amber-ink); }
.dep-verdict-manquant { border-color: rgba(180, 71, 47, .5); color: var(--danger-ink); }
.dep-verdict-nul { opacity: .45; }
.dep-detail { margin-top: var(--s2); }
.dep-detail summary { cursor: pointer; font-size: 13.5px; color: var(--text); }
.dep-detail ul { list-style: none; margin-top: 6px; display: grid; gap: 3px; font: 12.5px/1.45 var(--mono); color: var(--muted); }
.dep-detail li { overflow-wrap: anywhere; }
.dep-verdict-seul { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-2); border: 1px solid; font-size: 14px; }
.dep-verdict-seul svg { flex: none; margin-top: 2px; }
.dep-verdict-seul code { font-family: var(--mono); font-size: 12.5px; overflow-wrap: anywhere; }
.dep-verdict-seul-ok { border-color: rgba(20, 130, 135, .45); background: color-mix(in srgb, var(--teal) 6%, var(--surface)); color: var(--teal-ink); }
.dep-verdict-seul-ko { border-color: rgba(201, 128, 58, .5); background: rgba(201, 128, 58, .07); color: var(--amber-ink); }
.dep-comparaison { display: grid; gap: var(--s2); }
.dep-effacer { margin-top: var(--s8); padding-top: var(--s5); border-top: 1px solid var(--border-soft);
  display: flex; justify-content: space-between; align-items: center; gap: var(--s4); flex-wrap: wrap; }
.dep-effacer .muted { margin: 0; }

/* ── Depuis GitHub (D16 ; 10/10/2026) ── */
.dep-zone-groupe { display: grid; gap: var(--s3); }
.dep-github { padding: 14px 16px; border: 1px solid var(--border-soft); border-radius: var(--r-lg); background: var(--surface); }
.dep-github-titre { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; color: var(--nuit); }
.dep-github-titre svg { color: var(--teal); flex: none; }
.dep-github-champs { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: 10px; }
.dep-github-champs input, .dep-github-jeton input {
  padding: 9px 12px; font: 400 14.5px/1.4 var(--sans); color: var(--nuit);
  border: 1px solid var(--border); border-radius: var(--r-2); background: var(--surface);
  transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out); }
.dep-github-champs input:focus, .dep-github-jeton input:focus {
  outline: none; border-color: var(--teal); box-shadow: 0 0 0 4px rgba(20, 130, 135, .10); }
.dep-github-champs input { flex: 2 1 280px; }
.dep-github-champs input + input { flex: 1 1 220px; }
/* Un dépôt privé : la case, puis le jeton en lecture seule (11/10/2026). */
.dep-github-prive { margin: 10px 0 0; align-items: center; color: var(--text); font-size: 13.5px; }
.dep-github-prive input { margin-top: 0; }
.dep-github-jeton { margin-top: 8px; }
.dep-github-jeton input { width: 100%; max-width: 560px; font-family: var(--mono); font-size: 13.5px; }
.dep-github-jeton input::placeholder { font-family: var(--sans); font-size: 14.5px; }
.dep-github-actions { margin-top: 12px; }
.dep-github-aide { margin-top: 8px; font-size: 12.5px; line-height: 1.5; color: var(--muted); max-width: 72ch; }
.dep-github-message { margin-top: 8px; font-size: 13.5px; color: var(--text); }
.dep-github-erreur { color: var(--danger-ink); }
.dep-puce-fixe { cursor: default; opacity: .8; }

/* ── Le dossier de preuve complet (point 5 ; 10/10/2026) ── */
.dep-avancement { margin: -6px 0 var(--s4); font-size: 13.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.dep-ajout { margin: 0 0 var(--s5); padding: 14px 16px; border: 1px dashed var(--border); border-radius: var(--r-lg); background: var(--surface); }
.dep-ajout > .muted { margin: 0 0 var(--s3); font-size: 13.5px; }
.dep-ajout-resultat { margin-top: var(--s3); }

/* ── L'accès en ligne d'un dépôt (migration 032 ; 10/10/2026) ── */
.dep-acces { margin: 0 0 var(--s5); padding: 16px 18px; border: 1px solid var(--border-soft); border-radius: var(--r-lg); background: var(--surface); }
.dep-acces-titre { display: flex; align-items: center; gap: 8px; font: 600 15px/1.3 var(--sans); color: var(--nuit); }
.dep-acces-titre svg { color: var(--teal); flex: none; }
.dep-acces-texte { margin-top: 6px; font-size: 14px; color: var(--text); max-width: 72ch; }
.dep-acces-aide { margin-top: 6px; font-size: 12.5px; line-height: 1.5; color: var(--muted); max-width: 72ch; }
.dep-acces-code { display: flex; align-items: center; gap: var(--s3); margin-top: 12px; flex-wrap: wrap; }
.dep-acces-libelle { font: 600 var(--fs-label)/1.2 var(--sans); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.dep-acces-code code { font: 600 16px/1.3 var(--mono); letter-spacing: .08em; color: var(--nuit); }
.dep-acces-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
.dep-acces-retirer { color: var(--danger-ink); }
.dep-acces .banner { margin-top: 12px; }
/* La question, à l'émission du certificat d'un dépôt qui n'est pas en ligne. */
.dep-question { max-width: 640px; margin: 0 auto var(--s5); padding: 22px 24px; background: var(--surface);
  border: 1px solid var(--border-soft); border-radius: var(--r-lg); box-shadow: 0 26px 50px -38px rgba(18, 38, 62, .28); }
.dep-question-titre { font-family: var(--serif); font-weight: 400; font-size: 24px; color: var(--nuit); }
.dep-question-texte { margin-top: 10px; font-size: 14.5px; line-height: 1.6; color: var(--text); }
.dep-question-aide { margin-top: 8px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.dep-question-retenir { margin-top: 14px; font-size: 13.5px; }
.dep-question-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
/* La page publique d'un dépôt en ligne (#/depot/<jeton>/<clé>). */
.dep-etablit { margin: 0 0 var(--s5); padding: 20px 22px; background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--r-lg); box-shadow: 0 1px 3px rgba(18, 38, 62, .06), 0 26px 50px -38px rgba(18, 38, 62, .28); }
.dep-etablit-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.dep-etablit-phrase { margin-top: 12px; font-size: 15px; line-height: 1.6; color: var(--text); max-width: 72ch; }
.dep-public-vide { max-width: 560px; margin: var(--s8) auto; text-align: center; display: grid; justify-items: center; gap: var(--s3); }
.dep-public-vide h1 { font-family: var(--serif); font-weight: 400; font-size: 28px; color: var(--nuit); }
.dep-public-note { margin-top: var(--s7); }

@media (max-width: 960px) {
  .dep-grille { grid-template-columns: minmax(0, 1fr); }
  .dep-recap { position: static; }
}
@media (max-width: 720px) {
  .dep-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dep-lecture-tete { grid-template-columns: minmax(0, 1fr); }
  .dep-lecture-tete .btn-link { justify-self: start; padding-left: 0; }
  .dep-stat-valeur { font-size: 18px; }
  .dep-dossiers li { grid-template-columns: minmax(0, 1fr) 56px 70px; }
  .dep-dossier-barre { display: none; }
  .dep-faits { grid-template-columns: minmax(0, 1fr); }
  .dep-vide-etapes { grid-template-columns: minmax(0, 1fr); }
  .dep-champs { grid-template-columns: minmax(0, 1fr); }
  .dep-zone { padding: var(--s7) var(--s4); }
  .dep-zone-compacte { grid-template-columns: auto minmax(0, 1fr); }
  .dep-zone-compacte .dep-zone-boutons { grid-column: 1 / -1; grid-row: auto; }
  .dep-panneau { padding: var(--s5); }
}

/* ── 16. Mouvement réduit : filet global ─────────────────────────────────── */
/* `!important` est ici nécessaire : le sélecteur universel perd contre
   n'importe quelle classe, et c'est toute animation qu'il faut couper. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    animation-delay: 0ms !important; transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .skel-card::before, .skel-line { animation: none; background: var(--cream-2); }
}

/* ── Page d'aperçu d'une preuve partagée (format 2 ; #/v/<jeton>/<clé>) ───────
   Refonte du 07/10/2026 (Samuel : une page qui dit d'emblée ce qu'elle
   atteste, agréable à lire, sérieuse et technique). En tête, l'attestation sur
   le modèle du premier paragraphe du certificat et les trois contrôles ; puis
   le contenu, le certificat, la capture et l'inscription en lignes copiables ;
   le détail se déplie. Les icônes des contrôles sont des SVG en data: (CSP :
   img-src 'self' data: blob:). */
.partage { max-width: 720px; margin: 0 auto 48px; display: flex; flex-direction: column; gap: 18px; }
.partage-carte {
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--r-lg); padding: 22px 24px;
}
.partage-tete {
  padding: 26px 28px 22px;
  box-shadow: 0 1px 3px rgba(18, 38, 62, .06), 0 26px 50px -38px rgba(18, 38, 62, .28);
}
.partage-tete-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.partage-tete-ligne .pill { margin: 0; }
.partage-statut {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: 999px;
  font: 600 12.5px/1 var(--sans);
}
.partage-statut svg { width: 16px; height: 16px; flex: none; }
.partage-statut--verifiee { background: rgba(20, 130, 135, .10); color: var(--teal-ink); }
.partage-statut--attente  { background: rgba(201, 128, 58, .14); color: var(--amber-ink); }
.partage-statut--alerte   { background: rgba(180, 71, 47, .09); color: var(--danger-ink); }
.partage-statut--chiffree { background: var(--cream-2); color: var(--profond); }
.partage-surtitre {
  margin-left: auto;
  font: 600 11.5px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--sub);
}
.partage-tete h1 {
  margin: 16px 0 10px;
  font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 2vw + 18px, 34px); line-height: 1.15;
  color: var(--nuit); overflow-wrap: anywhere;
}
/* Le contenu dans la carte de tête, entre le titre et l'attestation. */
.partage-tete .partage-media { margin: 6px 0 20px; }
.partage-tete .partage-ouvrir { align-self: flex-start; margin: 4px 0 18px; }
.partage-attestation { margin: 0; max-width: 64ch; font-size: 16px; line-height: 1.65; color: var(--text); }
.partage-attestation strong { font-weight: 600; color: var(--nuit); }
/* Un contenu importé : la mention du certificat, juste sous l'attestation. */
.partage-mention { margin: 10px 0 0; max-width: 64ch; font-size: 14px; line-height: 1.55; color: var(--muted); }
.partage-mention strong { font-weight: 600; color: var(--nuit); }

/* Les trois contrôles : une pastille, un titre, un détail. */
.partage-controles {
  list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 18px;
  margin: 20px 0 0; padding: 18px 0 0; border-top: 1px solid var(--border-soft);
}
.partage-controle { position: relative; min-width: 0; padding-left: 30px; }
.partage-controle::before {
  content: ""; position: absolute; left: 0; top: 1px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--cream-3) center / 11px no-repeat;
}
.partage-controle--ok::before { background-color: var(--teal); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F8F5EE' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); }
.partage-controle--ko::before { background-color: var(--danger); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F8F5EE' stroke-width='4' stroke-linecap='round'%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3C/svg%3E"); }
.partage-controle--neutre::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='4' fill='%2365686B'/%3E%3C/svg%3E"); }
.partage-controle strong { display: block; font: 600 13.5px/1.35 var(--sans); color: var(--nuit); }
.partage-controle span { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.45; color: var(--muted); }

/* Le contenu, sur fond marine ; son nom et sa taille en légende, en chasse fixe. En sombre,
   --nuit devient l'encre claire : le cadre prend la teinte des cartes, la légende reste claire. */
.partage-media { margin: 0; border-radius: var(--r-lg); overflow: hidden; background: #12263E; }
:root[data-mode="sombre"] .partage-media { background: var(--surface); border: 1px solid var(--border-soft); }
.partage-media img, .partage-media video { display: block; width: 100%; max-height: 560px; object-fit: contain; margin: 0 auto; }
.partage-media audio { display: block; width: calc(100% - 32px); margin: 18px 16px 6px; }
.partage-media figcaption {
  padding: 10px 16px; border-top: 1px solid rgba(248, 245, 238, .08);
  font: 12px/1.4 var(--mono); color: rgba(248, 245, 238, .72); overflow-wrap: anywhere;
}
.partage-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.partage-actions .btn svg { width: 16px; height: 16px; }

/* Les sections : un titre, puis des lignes « libellé : valeur » séparées par un filet. */
.partage-section h2 { margin: 0 0 14px; font-family: var(--serif); font-weight: 400; font-size: 21px; color: var(--nuit); }
.partage-section > .muted { margin: 0 0 14px; }
.partage-lignes .ligne { padding: 9px 0; border-top: 1px solid var(--border-soft); }
.partage-lignes .ligne:first-child { border-top: 0; padding-top: 0; }
.partage-lignes .ligne-label { font-size: 13px; }
/* Le lieu : l'adresse, puis les coordonnées ; le « i » en face de l'adresse (Samuel, 22/10/2026). */
.ligne--pile, .ligne--pile .ligne-droite { align-items: flex-start; }
.ligne-pile { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; min-width: 0; }
.ligne-pile .ligne-coordonnees { font-weight: 400; color: var(--text); }
/* Sous les contrôles : ils portent sur le contenu affiché, jamais sur une copie reçue. Un filet fin tout autour. */
.partage-mise-en-garde {
  margin: 16px 0 0; padding: 12px 14px; max-width: 72ch;
  border: 1px solid var(--border-soft); border-radius: var(--r-2);
  font-size: 13.5px; line-height: 1.55; color: var(--text);
}
.partage-mise-en-garde strong { font-weight: 600; color: var(--nuit); }
.partage-section .lieu-bloc { margin-top: 14px; }
.partage-section .lieu-carte { height: 240px; }
/* Tant que la carte n’est pas demandée, son cadre se réduit à son bouton. */
.partage-details { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-soft); }
.partage-details summary { cursor: pointer; font: 600 13px/1.4 var(--sans); color: var(--profond); }
.partage-details[open] summary { margin-bottom: 12px; }
.partage-liens { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 16px; }
.partage-lien { font: 600 13px/1.4 var(--sans); color: var(--teal-ink); text-decoration: none; }
.partage-lien:hover { text-decoration: underline; text-underline-offset: 3px; }
.partage-note { margin-top: 0; }
.partage-pied { margin-top: 6px; }
.partage-pied .verify-foot { max-width: 52ch; }

@media (max-width: 640px) {
  .partage { gap: 14px; }
  .partage-tete { padding: 20px 18px 18px; }
  .partage-carte { padding: 18px; }
  .partage-surtitre { margin-left: 0; width: 100%; }
  .partage-controles { grid-template-columns: 1fr; }
  .partage-lignes .ligne:first-child { padding-top: 0; }
}
@media (max-width: 560px) {
  .ligne-pile { align-items: flex-start; }
}

/* ── Une photo agrandissable, et la visionneuse (visionneuse.mjs ; Samuel, 22/10/2026) ──
   Un clic sur la photo de la page d'un lien ou de la fiche l'ouvre en plein écran ;
   l'indice d'agrandissement, dans l'angle, le dit. */
.photo-agrandir {
  position: relative; display: block; width: 100%; padding: 0; border: 0; margin: 0;
  background: none; color: inherit; cursor: zoom-in;
}
.photo-agrandir:focus-visible { outline: 2px solid var(--teal); outline-offset: -4px; }
.photo-agrandir-indice {
  position: absolute; right: 12px; bottom: 12px; width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(18, 38, 62, .66); color: #F8F5EE; opacity: .85;
  transition: opacity var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out);
}
.photo-agrandir:hover .photo-agrandir-indice, .photo-agrandir:focus-visible .photo-agrandir-indice { opacity: 1; background: rgba(18, 38, 62, .82); }
body.visionneuse-ouverte { overflow: hidden; }
.visionneuse {
  position: fixed; inset: 0; z-index: 1000; display: flex; overflow: auto; overscroll-behavior: contain;
  background: #0A111B; -webkit-tap-highlight-color: transparent;
}
/* margin: auto, et non un centrage du conteneur : à taille réelle, la photo se parcourt depuis son coin. */
.visionneuse-image {
  display: block; margin: auto; max-width: 100vw; max-height: 100vh; max-height: 100dvh;
  width: auto; height: auto; object-fit: contain; cursor: zoom-in; user-select: none;
}
.visionneuse--reelle .visionneuse-image { max-width: none; max-height: none; cursor: zoom-out; }
.visionneuse-fermer {
  position: fixed; z-index: 1;
  top: calc(12px + env(safe-area-inset-top, 0px)); right: calc(12px + env(safe-area-inset-right, 0px));
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(248, 245, 238, .16); color: #F8F5EE; cursor: pointer;
}
.visionneuse-fermer:hover { background: rgba(248, 245, 238, .28); }
.visionneuse-fermer:focus-visible { outline: 2px solid #5FC9C6; outline-offset: 2px; }
/* L'en-tête du lieu de la fiche : l'adresse, les coordonnées ; le repère et le « i » en face de l'adresse. */
.fiche-lieu--pile { align-items: flex-start; flex-wrap: nowrap; }
.fiche-lieu--pile > svg { margin-top: 3px; }
.fiche-lieu--pile > .ligne-info { flex: none; margin-top: 1px; }
.fiche-lieu-pile { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fiche-lieu-adresse { font-weight: 600; }
.fiche-lieu-pile > span:nth-child(2) { font-weight: 400; color: var(--text); }

/* ── Espace avocat et demandes de pièces (audit du 20/10/2026) ───────────────
   L'inscription d'un avocat : ses trois étapes au-dessus du formulaire ; le
   bandeau du coffre quand un avocat demande des pièces ; la page « Demandes »
   du client (les classes cab-* de l'espace cabinet, plus le choix d'une preuve
   par sa vignette) ; la phrase saisie dans un dossier. */
.auth-avocat { margin: 0 0 var(--s5); padding: 14px 16px; border-radius: var(--r-2);
  border: 1px solid rgba(20, 130, 135, .35); background: rgba(20, 130, 135, .08); }
.auth-avocat-titre { margin: 0 0 8px; font-size: var(--fs-label); font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--teal-ink); }
.auth-avocat ol { margin: 0; padding-left: 20px; font-size: var(--fs-sm); line-height: 1.55; color: var(--profond); }
.auth-avocat li + li { margin-top: 4px; }

.bandeau-demandes { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
  padding: 12px 16px; margin-bottom: var(--s6); border-radius: var(--r-2);
  border: 1px solid rgba(20, 130, 135, .35); background: rgba(20, 130, 135, .08);
  animation: vue-entree var(--dur-3) var(--ease-out) both; }
.bandeau-demandes-texte { margin: 0; flex: 1 1 260px; min-width: 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--nuit); }
.bandeau-demandes .btn { width: auto; }

.dem-carte { padding: var(--s6) 0; border-top: 1px solid var(--border); }
.dem-carte:first-of-type { border-top: 0; }
.dem-avocat { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.dem-avocat p { margin: 0; }
.dem-verifie { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px;
  font-size: var(--fs-xs); font-weight: 600; color: var(--teal-ink); background: rgba(20, 130, 135, .1); }
.dem-aide { margin: 10px 0 0; font-size: var(--fs-sm); line-height: 1.55; color: var(--muted); max-width: 640px; }
.dem-choix-zone { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.dem-choix-zone .cab-boutons { justify-content: flex-start; }
.dem-choix { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; max-width: 640px; }
.dem-choix-item { display: flex; flex-direction: column; gap: 6px; padding: 0; border: 2px solid transparent; border-radius: var(--r-2);
  background: none; cursor: pointer; text-align: left; font: inherit; color: inherit; min-width: 0; }
.dem-choix-item .apercu { height: auto; aspect-ratio: 1; border-radius: calc(var(--r-2) - 2px); }
.dem-choix-item:hover .apercu { filter: brightness(1.05); }
.dem-choix-item:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.dem-choix-item--choisi { border-color: var(--teal); }
.dem-choix-legende { padding: 0 4px 4px; font-size: var(--fs-xs); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dem-phrase { display: flex; flex-direction: column; gap: 8px; max-width: 420px; }
.dem-phrase-bandeau { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
  padding: 12px 16px; margin-bottom: var(--s5); border-radius: var(--r-2);
  border: 1px solid rgba(120, 180, 205, .45); background: rgba(120, 180, 205, .12); }
.dem-phrase-bandeau p { margin: 0; flex: 1 1 260px; min-width: 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--profond); }
.dem-phrase-bandeau .btn { width: auto; }
.dem-aide-app { margin: 0 0 var(--s5); padding: 12px 16px; border-radius: var(--r-2);
  border: 1px solid rgba(120, 180, 205, .45); background: rgba(120, 180, 205, .12); color: var(--profond); }
/* La clé de réception de l'avocat, à sa première demande de pièces. */
.cab-cle { display: flex; flex-direction: column; gap: 10px; max-width: 460px; margin: var(--s4) 0 var(--s2);
  padding: 14px 16px; border-radius: var(--r-2); border: 1px solid rgba(120, 180, 205, .45); background: rgba(120, 180, 205, .1); }
.cab-cle .cab-cle-titre { margin: 0; font-weight: 600; color: var(--profond); }
.cab-cle p { margin: 0; font-size: var(--fs-sm); line-height: 1.5; }
.cab-cle .field { margin: 0; }
.dem-phrase .dem-aide { margin: 0; }

.cab-phrase { max-width: 560px; margin: 0 0 var(--s5); padding: 14px 16px; border-radius: var(--r-2);
  border: 1px solid rgba(120, 180, 205, .45); background: rgba(120, 180, 205, .12); }
.cab-phrase p { margin: 0 0 10px; font-size: var(--fs-sm); line-height: 1.55; color: var(--profond); }
.cab-phrase .banner { margin-top: 10px; }

/* ── 18. Espace avocat : l'allure d'un outil de cabinet ──────────────────────
   Samuel, 21/10/2026 : « je n'aime pas la couleur du fond pour l'espace avocat,
   il faut qqch de plus moderne […] plus beau, pro et agréable, plus dynamique ».
   L'espace avocat quitte le crème du site : fond gris froid, barre latérale
   bleu nuit, titres en DM Sans, lignes regroupées dans des cartes à filet,
   pastilles d'état, jauges des demandes. Le mouvement sert la lecture (entrée
   des contenus, chiffres et jauges qui se remplissent), jamais de décor qui
   bat ; coupé en mouvement réduit. Jamais de barre à gauche d'un encadré. */
:root {
  --cab-fond: #F2F4F7;
  --cab-surface: #FFFFFF;
  --cab-surface-2: #F7F8FA;
  --cab-ligne: #E4E7EC;
  --cab-ligne-forte: #D0D5DD;
  --cab-encre: #101828;
  --cab-texte: #344054;
  --cab-doux: #5D6B80;
  --cab-pale: #98A2B3;
  --cab-accent: #0E7C7B;
  --cab-accent-fort: #0B6665;
  --cab-accent-fond: #E7F4F3;
  --cab-vert: #067647; --cab-vert-fond: #E9F8EF;
  --cab-ambre: #A6550B; --cab-ambre-fond: #FEF6E7;
  --cab-rouge: #B42318; --cab-rouge-fond: #FEF1F0;
  --cab-bleu: #1D5FC9; --cab-bleu-fond: #EDF4FF;
  --cab-violet: #5F3DC4; --cab-violet-fond: #F3F0FF;
  --cab-barre: #0C1A2B;
  --cab-barre-ligne: rgba(255, 255, 255, .08);
  --cab-barre-texte: #C5D0DE;
  --cab-barre-pale: #8191A7;
  --cab-ombre: 0 1px 2px rgba(16, 24, 40, .05);
  --cab-ombre-2: 0 12px 32px rgba(16, 24, 40, .10), 0 2px 6px rgba(16, 24, 40, .05);
  --cab-barre-l: 256px;
  --cab-courbe: cubic-bezier(.22, .61, .36, 1);
}
:root[data-mode="sombre"] {
  --cab-fond: #0A111B;
  --cab-surface: #111A27;
  --cab-surface-2: #0E1622;
  --cab-ligne: #1F2B3B;
  --cab-ligne-forte: #2D3B50;
  --cab-encre: #F2F5F9;
  --cab-texte: #CDD6E2;
  --cab-doux: #96A4B8;
  --cab-pale: #6B7A90;
  --cab-accent: #5FC9C6;
  --cab-accent-fort: #86DAD7;
  --cab-accent-fond: rgba(95, 201, 198, .12);
  --cab-vert: #4CCB8C; --cab-vert-fond: rgba(76, 203, 140, .13);
  --cab-ambre: #F5B54B; --cab-ambre-fond: rgba(245, 181, 75, .13);
  --cab-rouge: #F7837A; --cab-rouge-fond: rgba(247, 131, 122, .13);
  --cab-bleu: #8AB4FF; --cab-bleu-fond: rgba(138, 180, 255, .13);
  --cab-violet: #B9A2F7; --cab-violet-fond: rgba(185, 162, 247, .13);
  --cab-barre: #060C15;
  --cab-ombre: 0 1px 2px rgba(0, 0, 0, .35);
  --cab-ombre-2: 0 12px 32px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .3);
}

/* Les jetons de la console, repris dans l'espace avocat et ses fenêtres : les
   composants partagés (boutons, champs, bannières, pastilles) suivent. */
#view-cabinet, .cab-fenetre {
  --cream: var(--cab-fond); --cream-2: var(--cab-surface-2); --cream-3: var(--cab-ligne);
  --surface: var(--cab-surface); --border: var(--cab-ligne-forte); --border-soft: var(--cab-ligne);
  --text: var(--cab-texte); --muted: var(--cab-doux); --sub: var(--cab-pale);
  --teal: var(--cab-accent); --teal-ink: var(--cab-accent-fort);
  --shadow-1: var(--cab-ombre);
  color: var(--cab-texte);
}

/* La coquille : ni la barre du site ni son pied ; la barre latérale à gauche. */
body[data-vue="view-cabinet"] { background: var(--cab-fond); }
body[data-vue="view-cabinet"] .topbar,
body[data-vue="view-cabinet"] .footer { display: none; }
body[data-vue="view-cabinet"] #main { max-width: none; margin: 0; padding: 0 0 0 var(--cab-barre-l); }
body[data-vue="view-cabinet"] #main > .bandeau-conditions { margin: 16px clamp(20px, 3.2vw, 48px) 0; }
#view-cabinet { animation: none; }

.cab-page { max-width: 1180px; margin: 0 auto; padding: 30px clamp(20px, 3.2vw, 48px) 72px; }

/* La barre latérale. */
.cab-barre { position: fixed; top: 0; bottom: 0; left: 0; z-index: 45; width: var(--cab-barre-l);
  display: flex; flex-direction: column; gap: 14px; padding: 18px 14px 14px;
  background: var(--cab-barre); color: var(--cab-barre-texte);
  border-right: 1px solid var(--cab-barre-ligne); overflow-y: auto; scrollbar-width: thin; }
.cab-barre-tete { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 6px 4px; }
.cab-marque { display: flex; align-items: center; gap: 9px; min-width: 0; text-decoration: none; }
.cab-marque-sceau { width: 32px; height: 32px; flex: none; object-fit: contain; }
.brand-wordmark.cab-marque-nom { font-size: 22px; color: #fff; }
.cab-marque-espace { padding: 4px 7px; border: 1px solid rgba(120, 180, 205, .38); border-radius: 6px;
  font: 600 9.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--turquoise); }
.cab-barre-menu { display: none; width: 40px; height: 40px; place-items: center; border: 1px solid var(--cab-barre-ligne);
  border-radius: 10px; background: transparent; color: #fff; cursor: pointer; }
.cab-barre-corps { display: flex; flex-direction: column; gap: 14px; flex: 1; min-height: 0; }

.cab-identite { display: flex; align-items: center; gap: 11px; padding: 10px; border-radius: 12px;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--cab-barre-ligne); text-decoration: none;
  transition: background-color var(--dur-1) var(--cab-courbe), border-color var(--dur-1) var(--cab-courbe); }
.cab-identite:hover { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .14); }
.cab-avatar { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 11px;
  background: linear-gradient(135deg, #17908F 0%, #2F6DB5 100%); color: #fff;
  font: 700 14px/1 var(--sans); letter-spacing: .03em; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.cab-identite-texte { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cab-identite-nom { font: 600 13.5px/1.25 var(--sans); color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cab-identite-sous { display: inline-flex; align-items: center; gap: 5px; min-width: 0; font-size: 11.5px; line-height: 1.3; color: var(--cab-barre-pale); }
.cab-identite-sous span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cab-identite-sous--verifiee { color: #7FD6C8; }
.cab-identite-sous svg { flex: none; }

.cab-barre-action { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 12px;
  border-radius: 10px; background: #148287; color: #fff; font: 600 13.5px/1.2 var(--sans); text-decoration: none;
  box-shadow: 0 8px 20px rgba(20, 130, 135, .32);
  transition: background-color var(--dur-1) var(--cab-courbe), transform var(--dur-1) var(--cab-courbe), box-shadow var(--dur-1) var(--cab-courbe); }
.cab-barre-action:hover { background: #179A9F; transform: translateY(-1px); box-shadow: 0 10px 24px rgba(20, 130, 135, .40); }
.cab-barre-action:active { transform: translateY(0) scale(.98); }
.cab-barre-action:focus-visible, .cab-nav-lien:focus-visible, .cab-identite:focus-visible, .cab-marque:focus-visible { outline-color: var(--turquoise); }
.cab-plus { font: 500 18px/1 var(--sans); margin-top: -2px; }

.cab-nav { display: flex; flex-direction: column; gap: 2px; }
.cab-nav-lien { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 10px; border: 0;
  border-radius: 9px; background: transparent; color: var(--cab-barre-texte); text-align: left; text-decoration: none;
  font: 500 13.5px/1.2 var(--sans); cursor: pointer;
  transition: background-color var(--dur-1) var(--cab-courbe), color var(--dur-1) var(--cab-courbe); }
.cab-nav-lien svg { flex: none; color: var(--cab-barre-pale); transition: color var(--dur-1) var(--cab-courbe), transform var(--dur-2) var(--cab-courbe); }
.cab-nav-lien:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.cab-nav-lien:hover svg { color: #fff; }
.cab-nav-lien.actif { background: rgba(120, 180, 205, .16); color: #fff; }
.cab-nav-lien.actif svg { color: var(--turquoise); }
.cab-nav-libelle { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cab-nav-compte { min-width: 22px; padding: 2px 7px; border-radius: 999px; background: rgba(255, 255, 255, .09); color: #fff;
  font: 600 11px/1.4 var(--sans); text-align: center; font-variant-numeric: tabular-nums; }
.cab-nav-lien.actif .cab-nav-compte { background: #148287; }
.cab-nav-point { width: 8px; height: 8px; border-radius: 50%; background: #F5B54B; box-shadow: 0 0 0 3px rgba(245, 181, 75, .18); }
.cab-nav-point--refusee { background: #F7837A; box-shadow: 0 0 0 3px rgba(247, 131, 122, .18); }
.cab-nav-lien--bouton svg { transform: rotate(180deg); }
.cab-barre-pied { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding-top: 12px; border-top: 1px solid var(--cab-barre-ligne); }
.cab-barre-legal { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 10px; font-size: 11px; color: var(--cab-barre-pale); }
.cab-barre-legal a { color: var(--cab-barre-pale); text-decoration: none; }
.cab-barre-legal a:hover { color: #fff; text-decoration: underline; text-underline-offset: 2px; }

/* L'en-tête d'un écran. */
.cab-page-tete { margin-bottom: 24px; }
#view-cabinet .cab-retour { margin-bottom: 14px; color: var(--cab-doux); font-weight: 500; transition: color var(--dur-1) var(--cab-courbe); }
#view-cabinet .cab-retour:hover { color: var(--cab-accent); }
.cab-page-ligne { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; }
.cab-page-titres { min-width: 0; flex: 1 1 340px; }
.cab-surtitre { margin-bottom: 8px; font: 600 11.5px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--cab-accent); }
#view-cabinet .cab-page-tete h1 { font: 700 28px/1.18 var(--sans); letter-spacing: -0.022em; color: var(--cab-encre); word-break: break-word; }
.cab-page-sous { margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--cab-doux); }
.cab-page-sous .cab-reglage { padding: 0; font-size: 14px; vertical-align: baseline; }
.cab-page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* Boutons, champs, cartes : plus nets, rayons d'application. */
#view-cabinet .btn, .cab-fenetre .btn { border-radius: 10px; padding: 10px 16px; font-size: 13.5px; font-weight: 600; letter-spacing: 0; }
#view-cabinet .btn-sm, .cab-fenetre .btn-sm { padding: 7px 12px; font-size: 12.5px; }
#view-cabinet .btn-primary, .cab-fenetre .btn-primary { box-shadow: 0 1px 2px rgba(16, 24, 40, .10), 0 4px 12px rgba(18, 38, 62, .14); }
#view-cabinet .btn-ghost, .cab-fenetre .btn-ghost { background: var(--cab-surface); border-color: var(--cab-ligne-forte); color: var(--cab-encre); box-shadow: var(--cab-ombre); }
#view-cabinet .btn-ghost:hover:not(:disabled), .cab-fenetre .btn-ghost:hover:not(:disabled) { background: var(--cab-surface-2); border-color: var(--cab-pale); }
#view-cabinet .btn-link, .cab-fenetre .btn-link { color: var(--cab-accent); font-weight: 600; text-decoration: none; }
#view-cabinet .btn-link:hover, .cab-fenetre .btn-link:hover { color: var(--cab-accent-fort); text-decoration: underline; }
#view-cabinet .btn svg { flex: none; }
#view-cabinet .field input, #view-cabinet .lk-select, #view-cabinet .e2e-form input.e2e-pass, #view-cabinet .cab-demande-champs input,
.cab-fenetre .field input, .cab-fenetre input[type="text"], .cab-fenetre textarea { border-radius: 10px; border-color: var(--cab-ligne-forte); }
#view-cabinet .field > span { color: var(--cab-doux); letter-spacing: .07em; }
#view-cabinet .card { border-radius: 14px; border-color: var(--cab-ligne); box-shadow: var(--cab-ombre); }
#view-cabinet .banner { border-radius: 10px; }
#view-cabinet .puce { border-radius: 999px; }

/* Les pastilles d'état et « Nouveau ». */
/* Sans point devant le mot (Samuel, 21/10/2026). */
.cab-etiquette { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px;
  font: 600 11.5px/1.5 var(--sans); white-space: nowrap; }
.cab-etiquette--vert { background: var(--cab-vert-fond); color: var(--cab-vert); }
.cab-etiquette--ambre { background: var(--cab-ambre-fond); color: var(--cab-ambre); }
.cab-etiquette--neutre { background: var(--cab-surface-2); color: var(--cab-doux); box-shadow: inset 0 0 0 1px var(--cab-ligne); }
.cab-badge-nouveau { flex: none; padding: 2px 7px; border-radius: 6px; background: var(--cab-accent); color: #fff;
  font: 700 10px/1.4 var(--sans); letter-spacing: .04em; text-transform: uppercase; }
:root[data-mode="sombre"] .cab-badge-nouveau { color: #06201F; }

/* La jauge d'une demande : elle se remplit quand elle paraît. */
.cab-jauge { position: relative; display: inline-block; flex: none; width: 88px; height: 6px; border-radius: 999px;
  background: var(--cab-ligne); overflow: hidden; vertical-align: middle; }
.cab-jauge-plein { position: absolute; top: 0; bottom: 0; left: 0; width: 0; border-radius: inherit;
  background: linear-gradient(90deg, var(--cab-accent), #2BA3A1); transition: width 1s var(--cab-courbe); }
.cab-jauge--complete .cab-jauge-plein { background: var(--cab-vert); }
.cab-rangee-compte { font: 600 12px/1 var(--sans); color: var(--cab-doux); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cab-chevron { display: grid; place-items: center; color: var(--cab-pale); transition: transform var(--dur-2) var(--cab-courbe), color var(--dur-1) var(--cab-courbe); }
/* Le chevron du sprite pointe vers le bas : tourné vers la droite, il dit « ouvrir ». */
.cab-chevron svg { transform: rotate(-90deg); }

/* Vue d'ensemble : les quatre tuiles. */
.cab-tuiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.cab-tuile { --ton: var(--cab-accent); --ton-fond: var(--cab-accent-fond);
  position: relative; display: flex; flex-direction: column; gap: 3px; padding: 16px 18px 15px; overflow: hidden;
  background: var(--cab-surface); border: 1px solid var(--cab-ligne); border-radius: 14px; box-shadow: var(--cab-ombre);
  color: inherit; text-decoration: none;
  transition: transform var(--dur-2) var(--cab-courbe), box-shadow var(--dur-2) var(--cab-courbe), border-color var(--dur-2) var(--cab-courbe); }
.cab-tuile::after { content: ''; position: absolute; right: -28px; top: -28px; width: 84px; height: 84px; border-radius: 50%;
  background: var(--ton-fond); opacity: .55; transition: transform var(--dur-3) var(--cab-courbe); }
.cab-tuile:hover { transform: translateY(-2px); box-shadow: var(--cab-ombre-2); border-color: var(--cab-ligne-forte); }
.cab-tuile:hover::after { transform: scale(1.18); }
.cab-tuile > * { position: relative; z-index: 1; }
.cab-tuile-ico { width: 34px; height: 34px; margin-bottom: 10px; display: grid; place-items: center; border-radius: 10px;
  background: var(--ton-fond); color: var(--ton); }
.cab-tuile-valeur { font: 700 30px/1.08 var(--sans); letter-spacing: -0.02em; color: var(--cab-encre); font-variant-numeric: tabular-nums; }
.cab-tuile-libelle { font: 600 13px/1.3 var(--sans); color: var(--cab-texte); }
.cab-tuile-detail { font-size: 12px; line-height: 1.4; color: var(--cab-doux); }
.cab-tuile--bleu { --ton: var(--cab-bleu); --ton-fond: var(--cab-bleu-fond); }
.cab-tuile--sarcelle { --ton: var(--cab-accent); --ton-fond: var(--cab-accent-fond); }
.cab-tuile--violet { --ton: var(--cab-violet); --ton-fond: var(--cab-violet-fond); }
.cab-tuile--ambre { --ton: var(--cab-ambre); --ton-fond: var(--cab-ambre-fond); }
.cab-tuile--vert { --ton: var(--cab-vert); --ton-fond: var(--cab-vert-fond); }

/* Vue d'ensemble : les cartes et leurs rangées. */
.cab-grille { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 16px; align-items: start; margin-bottom: 16px; }
.cab-bloc { background: var(--cab-surface); border: 1px solid var(--cab-ligne); border-radius: 14px; box-shadow: var(--cab-ombre); overflow: hidden; }
.cab-bloc-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--cab-ligne); }
.cab-bloc-tete h2 { font: 650 14.5px/1.3 var(--sans); color: var(--cab-encre); }
.cab-bloc-lien { display: inline-flex; align-items: center; gap: 5px; font: 600 12.5px/1 var(--sans); color: var(--cab-accent); text-decoration: none; }
.cab-bloc-lien svg { transition: transform var(--dur-2) var(--cab-courbe); }
.cab-bloc-lien:hover svg { transform: translateX(3px); }
.cab-bloc-vide { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 20px 18px; font-size: 13.5px; line-height: 1.55; color: var(--cab-doux); }
.cab-rangees { display: flex; flex-direction: column; }
.cab-rangee { display: grid; grid-auto-flow: column; grid-template-columns: auto minmax(0, 1fr); grid-auto-columns: auto;
  align-items: center; gap: 12px; padding: 12px 18px; color: inherit; text-decoration: none; border-top: 1px solid var(--cab-ligne);
  transition: background-color var(--dur-1) var(--cab-courbe); }
.cab-rangee:first-child { border-top: 0; }
.cab-rangee:hover { background: var(--cab-surface-2); }
.cab-rangee:hover .cab-chevron, a.cab-ligne:hover .cab-chevron { transform: translateX(3px); color: var(--cab-accent); }
.cab-rangee-ico { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--cab-accent-fond); color: var(--cab-accent); }
.cab-rangee-corps { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cab-rangee-titre { display: flex; align-items: center; gap: 8px; min-width: 0; font: 600 13.5px/1.35 var(--sans); color: var(--cab-encre); }
.cab-rangee-titre > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cab-rangee-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--cab-doux); }
.cab-rangee-avancement { display: inline-flex; align-items: center; gap: 8px; }

/* Vue d'ensemble : les premiers pas. */
.cab-etapes-tete { display: flex; align-items: center; gap: 10px; padding: 14px 18px 0; }
.cab-etapes-tete .cab-jauge { width: 180px; }
.cab-etapes { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 12px 18px 18px; }
.cab-etapes li > * { display: flex; align-items: center; gap: 10px; width: 100%; height: 100%; padding: 12px; border: 1px solid var(--cab-ligne);
  border-radius: 12px; background: var(--cab-surface-2); color: var(--cab-texte); font: 500 13px/1.35 var(--sans); text-align: left; text-decoration: none;
  transition: border-color var(--dur-1) var(--cab-courbe), background-color var(--dur-1) var(--cab-courbe); }
.cab-etapes li > a, .cab-etapes li > button { cursor: pointer; }
.cab-etapes li > a:hover, .cab-etapes li > button:hover { border-color: var(--cab-accent); background: var(--cab-surface); }
.cab-etape-coche { width: 20px; height: 20px; flex: none; display: grid; place-items: center; border-radius: 50%;
  border: 1.5px solid var(--cab-ligne-forte); color: #fff; }
.cab-etapes li.fait > * { color: var(--cab-doux); }
.cab-etapes li.fait .cab-etape-coche { background: var(--cab-vert); border-color: var(--cab-vert); }

/* Les listes (pièces reçues, dossiers, demandes) : une carte, des rangées séparées d'un filet. */
#view-cabinet .cab-outils { margin-bottom: 14px; }
#view-cabinet .cab-liste { gap: 0; overflow: hidden; background: var(--cab-surface); border: 1px solid var(--cab-ligne); border-radius: 14px; box-shadow: var(--cab-ombre); }
#view-cabinet .cab-ligne { grid-auto-flow: column; grid-template-columns: auto minmax(0, 1fr); grid-auto-columns: auto; gap: 14px;
  padding: 13px 18px; border: 0; border-top: 1px solid var(--cab-ligne); border-radius: 0; box-shadow: none;
  transition: background-color var(--dur-1) var(--cab-courbe); }
#view-cabinet .cab-ligne:first-child { border-top: 0; }
#view-cabinet .cab-ligne:hover { background: var(--cab-surface-2); }
#view-cabinet .cab-ligne-titre-ligne { display: flex; align-items: center; gap: 8px; min-width: 0; }
#view-cabinet .cab-ligne-titre { color: var(--cab-encre); font-size: 14px; }
#view-cabinet .cab-ligne-meta { font-size: 12px; color: var(--cab-doux); }
#view-cabinet .cab-ligne-chiffre { color: var(--cab-texte); font-weight: 600; font-size: 12.5px; }
#view-cabinet .cab-ligne-date { color: var(--cab-pale); }
#view-cabinet .cab-ligne-avancement { display: inline-flex; align-items: center; gap: 8px; }
#view-cabinet .cab-demande--close { opacity: .62; }
#view-cabinet .cab-rien { padding: 28px; }
#view-cabinet .cab-classee { padding: 4px 9px; border-radius: 8px; background: var(--cab-accent-fond); color: var(--cab-accent-fort); }

/* Les glyphes : teintes douces, icône de la couleur du type. */
#view-cabinet .cab-glyphe, #view-cabinet .cab-dossier-ico { width: 36px; height: 36px; border-radius: 10px; }
#view-cabinet .cab-glyphe { background: var(--cab-ambre-fond); color: var(--cab-ambre); }
#view-cabinet .cab-glyphe--photo { background: var(--cab-bleu-fond); color: var(--cab-bleu); }
#view-cabinet .cab-glyphe--video { background: var(--cab-violet-fond); color: var(--cab-violet); }
#view-cabinet .cab-glyphe--audio { background: var(--cab-vert-fond); color: var(--cab-vert); }
#view-cabinet .cab-dossier-ico { background: var(--cab-violet-fond); color: var(--cab-violet); }
#view-cabinet .cab-dossier-ico--demande { background: var(--cab-accent-fond); color: var(--cab-accent); }

/* Les filtres et sélecteurs segmentés. */
#view-cabinet .puces { gap: 6px; }
#view-cabinet .cab-presentations { background: var(--cab-surface-2); border-color: var(--cab-ligne); border-radius: 10px; }
#view-cabinet .cab-presentation { border-radius: 8px; color: var(--cab-doux); }
#view-cabinet .cab-presentation[aria-pressed="true"] { background: var(--cab-surface); color: var(--cab-encre); box-shadow: 0 1px 3px rgba(16, 24, 40, .12); }

/* Un dossier, une demande : les repères en pastilles, le suivi. */
.cab-puces-info { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.cab-puce-info { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 8px;
  background: var(--cab-surface); border: 1px solid var(--cab-ligne); font: 500 12.5px/1.45 var(--sans); color: var(--cab-texte); text-decoration: none; }
.cab-puce-info--fixe { font-family: var(--mono); font-size: 12px; color: var(--cab-encre); }
a.cab-puce-info--lien { color: var(--cab-accent-fort); transition: border-color var(--dur-1) var(--cab-courbe); }
a.cab-puce-info--lien:hover { border-color: var(--cab-accent); }
.cab-suivi { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: -6px 0 20px; padding: 12px 16px;
  background: var(--cab-surface); border: 1px solid var(--cab-ligne); border-radius: 12px; box-shadow: var(--cab-ombre); }
.cab-suivi .cab-jauge { width: min(260px, 40vw); height: 8px; }

#view-cabinet .cab-phrase { display: flex; gap: 14px; align-items: flex-start; max-width: 780px; margin: 0 0 18px; padding: 14px 16px;
  background: var(--cab-accent-fond); border: 1px solid color-mix(in srgb, var(--cab-accent) 26%, transparent); border-radius: 12px; }
#view-cabinet .cab-phrase p { color: var(--cab-texte); }
.cab-phrase-ico { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--cab-surface); color: var(--cab-accent); }
.cab-phrase-corps { flex: 1; min-width: 0; }

#view-cabinet .cab-demandes-dossier { margin: 0 0 6px; gap: 8px; }
#view-cabinet .cab-demande-lien { padding: 7px 12px; border-radius: 10px; border: 1px solid var(--cab-ligne); background: var(--cab-surface);
  color: var(--cab-encre); box-shadow: var(--cab-ombre); gap: 8px; transition: border-color var(--dur-1) var(--cab-courbe); }
#view-cabinet .cab-demande-lien:hover { border-color: var(--cab-accent); }
#view-cabinet .cab-demande-lien:hover span { text-decoration: none; }
#view-cabinet .cab-demande-lien .cab-jauge { width: 60px; }
#view-cabinet .cab-demande-lien--nouvelle { border-style: dashed; color: var(--cab-accent-fort); box-shadow: none; background: transparent; }

#view-cabinet .cab-pieces-tete { margin: 26px 0 12px; }
#view-cabinet .cab-pieces-tete h3, #view-cabinet .cab-demande-tete h3, #view-cabinet .cab-adverse h3,
#view-cabinet .cab-chrono-jour h4, #view-cabinet .cab-hors-carte h4 { color: var(--cab-doux); }
#view-cabinet .cab-compte { background: var(--cab-surface-2); color: var(--cab-texte); box-shadow: inset 0 0 0 1px var(--cab-ligne); }

#view-cabinet .cab-pieces { gap: 0; overflow: hidden; background: var(--cab-surface); border: 1px solid var(--cab-ligne); border-radius: 14px; box-shadow: var(--cab-ombre); }
#view-cabinet .cab-piece { padding: 14px 16px; border: 0; border-top: 1px solid var(--cab-ligne); border-radius: 0; box-shadow: none;
  transition: background-color var(--dur-1) var(--cab-courbe); }
#view-cabinet .cab-piece:first-child { border-top: 0; }
#view-cabinet .cab-piece:hover { background: var(--cab-surface-2); }
#view-cabinet .cab-numero { border-radius: 9px; background: var(--cab-encre); color: var(--cab-surface); }
#view-cabinet .cab-element--recue .cab-numero { background: var(--cab-vert); color: #fff; }
#view-cabinet .cab-element-etat { padding: 1px 8px; border-radius: 999px; background: var(--cab-surface-2); box-shadow: inset 0 0 0 1px var(--cab-ligne); font-size: 11.5px; }
#view-cabinet .cab-element-etat--recue { background: var(--cab-vert-fond); color: var(--cab-vert); box-shadow: none; }
#view-cabinet .cab-note { background: var(--cab-surface-2); border-color: var(--cab-ligne); border-radius: 8px; }
#view-cabinet .cab-nature svg { color: var(--cab-accent); }
#view-cabinet .cab-icone:hover { background: var(--cab-surface-2); color: var(--cab-encre); }

#view-cabinet .cab-chrono-piece { border-color: var(--cab-ligne); border-radius: 12px; }
#view-cabinet .cab-chrono-piece::before { box-shadow: 0 0 0 3px var(--cab-fond); }
#view-cabinet .cab-carte-dossier { border-radius: 14px; overflow: hidden; border: 1px solid var(--cab-ligne); }

#view-cabinet .cab-adverse { margin-top: 26px; border-color: var(--cab-ligne); border-radius: 14px; box-shadow: var(--cab-ombre); }
#view-cabinet .cab-adverse-url { background: var(--cab-surface-2); border-color: var(--cab-ligne-forte); border-radius: 8px; }
#view-cabinet .cab-envoi { max-width: 780px; background: var(--cab-surface); border-color: var(--cab-ligne); border-radius: 14px; box-shadow: var(--cab-ombre); }
#view-cabinet .cab-envoi--nouveau { background: var(--cab-accent-fond); border-color: color-mix(in srgb, var(--cab-accent) 30%, transparent); }
#view-cabinet .cab-comment h3 { color: var(--cab-doux); }
#view-cabinet .cab-ajout summary { color: var(--cab-accent-fort); }
#view-cabinet .cab-bas { margin-top: 40px; padding-top: 18px; border-top-color: var(--cab-ligne); }

#view-cabinet .cab-vide { margin-top: 8px; padding: 44px 24px; max-width: none; background: var(--cab-surface);
  border: 1px dashed var(--cab-ligne-forte); border-radius: 14px; }
#view-cabinet .cab-vide h2 { font: 650 18px/1.3 var(--sans); color: var(--cab-encre); }
#view-cabinet .cab-vide p { max-width: 460px; margin: 0 auto; }
#view-cabinet .cab-vide-ico { background: var(--cab-accent-fond); color: var(--cab-accent); }

#view-cabinet .cab-carte { max-width: 680px; border-radius: 14px; }
#view-cabinet .cab-etat-tete h3 { font: 650 18px/1.3 var(--sans); color: var(--cab-encre); }
#view-cabinet .cab-etat--verifiee .cab-etat-ico { background: var(--cab-vert-fond); color: var(--cab-vert); }
#view-cabinet .cab-resume dt { color: var(--cab-pale); }
#view-cabinet .cab-resume dd { color: var(--cab-encre); }
#view-cabinet .cab-cle { border-radius: 12px; }

/* Nouvelle demande : le formulaire, et à côté ce que voit le client. */
.cab-composer { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.cab-composer .cab-carte--large { max-width: none; }
.cab-apercu { position: sticky; top: 24px; }
.cab-apercu-titre { margin: 2px 0 10px; font: 600 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--cab-doux); }
.cab-apercu-telephone { width: 300px; max-width: 100%; padding: 9px; border-radius: 36px; background: #0C1A2B;
  box-shadow: var(--cab-ombre-2), inset 0 0 0 1px rgba(255, 255, 255, .06); }
.cab-apercu-ecran { min-height: 500px; display: flex; flex-direction: column; gap: 5px; padding: 26px 16px 16px; border-radius: 28px;
  background: #F4F6F8; color: #13243F; font-family: var(--sans); color-scheme: light; }
.cab-apercu-tag { font: 700 9.5px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #148287; }
.cab-apercu-nom { margin-top: 4px; font: 400 23px/1.15 var(--serif); color: #13243F; }
.cab-apercu-objet { font-size: 12.5px; line-height: 1.4; color: #3F4D60; }
.cab-apercu-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 10.5px; color: #6B7686; }
.cab-apercu-verifie { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 999px; background: #E3F2F1; color: #0E7C7B; font-weight: 600; }
.cab-apercu-carte { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; padding: 12px 12px 4px; border-radius: 16px; background: #fff;
  box-shadow: 0 1px 3px rgba(15, 28, 46, .08); }
.cab-apercu-compte { font: 600 11.5px/1.3 var(--sans); color: #13243F; }
.cab-apercu-barre { display: flex; gap: 3px; }
.cab-apercu-barre span { flex: 1; height: 4px; border-radius: 2px; background: #E3E8EF; }
.cab-apercu-piece { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 9px 0; border-top: 1px solid #EEF1F5;
  animation: cab-monte 300ms var(--cab-courbe) both; }
.cab-apercu-rond { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid #C5CDD8; }
.cab-apercu-piece-texte { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cab-apercu-piece-titre, .cab-apercu-piece-sous { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.cab-apercu-piece-titre { font: 600 11.5px/1.3 var(--sans); color: #13243F; }
.cab-apercu-piece-sous { font-size: 10px; line-height: 1.35; color: #6B7686; }
.cab-apercu-geste { font: 600 10.5px/1 var(--sans); color: #148287; }
.cab-apercu-bouton { margin-top: auto; padding: 12px; border-radius: 12px; background: #13243F; color: #fff; text-align: center; font: 600 11.5px/1 var(--sans); }

/* Les fenêtres de l'espace avocat (classer, dossier, intitulés, ajout). */
.cab-fenetre { border: 1px solid var(--cab-ligne); border-radius: 16px; background: var(--cab-surface); color: var(--cab-texte);
  box-shadow: 0 24px 64px rgba(16, 24, 40, .24); }
.cab-fenetre::backdrop { background: rgba(10, 18, 30, .45); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.cab-fenetre h2 { font-family: var(--sans); font-weight: 700; letter-spacing: -0.015em; color: var(--cab-encre); }

/* Le mouvement : les contenus entrent l'un après l'autre. */
@keyframes cab-monte {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
#view-cabinet .cab-contenu > *, #view-cabinet .cab-rangee, #view-cabinet .cab-liste > .cab-ligne, #view-cabinet .cab-pieces > .cab-piece {
  animation: cab-monte 420ms var(--cab-courbe) both; }
#view-cabinet .cab-contenu > :nth-child(2), #view-cabinet .cab-rangee:nth-child(2), #view-cabinet .cab-liste > .cab-ligne:nth-child(2), #view-cabinet .cab-pieces > .cab-piece:nth-child(2) { animation-delay: 45ms; }
#view-cabinet .cab-contenu > :nth-child(3), #view-cabinet .cab-rangee:nth-child(3), #view-cabinet .cab-liste > .cab-ligne:nth-child(3), #view-cabinet .cab-pieces > .cab-piece:nth-child(3) { animation-delay: 90ms; }
#view-cabinet .cab-contenu > :nth-child(4), #view-cabinet .cab-rangee:nth-child(4), #view-cabinet .cab-liste > .cab-ligne:nth-child(4), #view-cabinet .cab-pieces > .cab-piece:nth-child(4) { animation-delay: 135ms; }
#view-cabinet .cab-contenu > :nth-child(5), #view-cabinet .cab-rangee:nth-child(5), #view-cabinet .cab-liste > .cab-ligne:nth-child(5), #view-cabinet .cab-pieces > .cab-piece:nth-child(5) { animation-delay: 180ms; }
#view-cabinet .cab-contenu > :nth-child(n+6), #view-cabinet .cab-rangee:nth-child(n+6), #view-cabinet .cab-liste > .cab-ligne:nth-child(n+6), #view-cabinet .cab-pieces > .cab-piece:nth-child(n+6) { animation-delay: 220ms; }
#view-cabinet .cab-tuile { animation: cab-monte 480ms var(--cab-courbe) both; }
#view-cabinet .cab-tuile:nth-child(2) { animation-delay: 60ms; }
#view-cabinet .cab-tuile:nth-child(3) { animation-delay: 120ms; }
#view-cabinet .cab-tuile:nth-child(4) { animation-delay: 180ms; }

/* Écrans moyens, puis étroits : la barre latérale devient une barre en haut, son menu se déplie. */
@media (max-width: 1180px) {
  .cab-tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cab-grille { grid-template-columns: minmax(0, 1fr); }
  .cab-etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cab-composer { grid-template-columns: minmax(0, 1fr); }
  .cab-apercu { position: static; }
}
@media (max-width: 900px) {
  body[data-vue="view-cabinet"] #main { padding-left: 0; }
  .cab-barre { position: sticky; top: 0; bottom: auto; width: auto; max-height: 100vh; gap: 0; padding: 10px 14px; overflow: visible;
    border-right: 0; border-bottom: 1px solid var(--cab-barre-ligne); }
  .cab-barre-menu { display: grid; }
  .cab-barre-corps { display: none; padding: 12px 0 6px; }
  .cab-barre--ouverte .cab-barre-corps { display: flex; max-height: calc(100vh - 64px); overflow-y: auto; }
  .cab-barre-pied { margin-top: 4px; }
  .cab-page { padding: 22px 16px 56px; }
  #view-cabinet .cab-page-tete h1 { font-size: 24px; }
}
@media (max-width: 720px) {
  /* Une rangée sur deux lignes : l'icône, le titre, puis ses pastilles et ses chiffres dessous. */
  #view-cabinet .cab-ligne { grid-auto-flow: row; }
  #view-cabinet .cab-ligne > :not(:first-child):not(.cab-ligne-corps) { grid-column: 2; justify-self: start; }
  #view-cabinet .cab-ligne > .cab-chevron { display: none; }
}
@media (max-width: 600px) {
  .cab-tuiles { gap: 10px; }
  .cab-tuile { padding: 14px; }
  .cab-tuile-valeur { font-size: 26px; }
  .cab-etapes { grid-template-columns: minmax(0, 1fr); }
  .cab-rangee-avancement .cab-jauge, #view-cabinet .cab-ligne-avancement .cab-jauge { width: 56px; }
  .cab-rangee .cab-etiquette { display: none; }
  .cab-page-actions { width: 100%; }
}

/* ── 18 bis. La fiche d'une preuve et son certificat, dans une coquille ───────────
   Samuel, 21/10/2026 : « le détail de chaque carte / preuve, description technique,
   map, détails etc […] dans le même style ». La coquille de l'espace avocat ou de
   l'espace personnel (barre latérale ; body[data-espace], posé par app.js), la fiche
   sur deux colonnes (le fichier et sa position, puis ce qui l'établit), des cartes. */
body[data-espace] { background: var(--cab-fond); }
body[data-espace] .topbar,
body[data-espace] .footer { display: none; }
body[data-espace] #main { max-width: none; margin: 0; padding: 0 0 0 var(--cab-barre-l); }
body[data-espace] #main > .bandeau-conditions { margin: 16px clamp(20px, 3.2vw, 48px) 0; }
body:not([data-espace="cabinet"]) #proof-barre,
body:not([data-espace="cabinet"]) #certificat-barre-laterale { display: none; }
body[data-espace] #view-proof,
body[data-espace] #view-certificat {
  --cream: var(--cab-fond); --cream-2: var(--cab-surface-2); --cream-3: var(--cab-ligne);
  --surface: var(--cab-surface); --border: var(--cab-ligne-forte); --border-soft: var(--cab-ligne);
  --text: var(--cab-texte); --muted: var(--cab-doux); --sub: var(--cab-pale);
  --teal: var(--cab-accent); --teal-ink: var(--cab-accent-fort);
  --shadow-1: var(--cab-ombre);
  max-width: 1180px; margin: 0 auto; padding: 30px clamp(20px, 3.2vw, 48px) 72px;
  color: var(--cab-texte); animation: none; }

/* Le retour : un lien discret, comme dans l'espace. */
body[data-espace] #proof-back,
body[data-espace] #certificat-retour { display: inline-flex; align-items: center; gap: 6px; padding: 0; margin-bottom: 14px;
  border: 0; border-radius: 0; background: none; box-shadow: none; font: 500 13px/1.4 var(--sans); color: var(--cab-doux); text-decoration: none; }
body[data-espace] #proof-back:hover,
body[data-espace] #certificat-retour:hover { color: var(--cab-accent); background: none; transform: none; }
body[data-espace] #view-proof .btn,
body[data-espace] #view-certificat .btn { border-radius: 10px; font-weight: 600; letter-spacing: 0; }

/* L'en-tête de la fiche. */
body[data-espace] .fiche-tete { margin: 0 0 18px; align-items: center; }
body[data-espace] .fiche-tete h1 { font: 700 28px/1.18 var(--sans); letter-spacing: -0.022em; color: var(--cab-encre); }
body[data-espace] .fiche-sous-titre { margin-top: 6px; font-size: 14px; color: var(--cab-doux); }
body[data-espace] .detail-owner { display: inline-flex; margin-top: 10px; padding: 4px 10px; border-radius: 8px;
  background: var(--cab-surface); border: 1px solid var(--cab-ligne); font-size: 12.5px; color: var(--cab-texte); }

/* Les actions en boutons d'application : le certificat en premier, en bleu nuit. */
body[data-espace] #view-proof .actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
body[data-espace] #view-proof .action { flex-direction: row; align-items: center; gap: 8px; padding: 9px 14px;
  border: 1px solid var(--cab-ligne-forte); border-radius: 10px; background: var(--cab-surface); box-shadow: var(--cab-ombre);
  transition: background-color var(--dur-1) var(--cab-courbe), border-color var(--dur-1) var(--cab-courbe), transform var(--dur-1) var(--cab-courbe); }
body[data-espace] #view-proof .action:hover { border-color: var(--cab-pale); background: var(--cab-surface-2); transform: translateY(-1px); }
body[data-espace] #view-proof .action-disque { width: auto; height: auto; border-radius: 0; background: none; color: var(--cab-accent); }
body[data-espace] #view-proof .action:hover .action-disque { background: none; transform: none; }
body[data-espace] #view-proof .action-label { font-size: 13.5px; font-weight: 600; color: var(--cab-encre); }
body[data-espace] #view-proof .action-aide { margin: 0; font-size: 12px; color: var(--cab-doux); }
body[data-espace] #view-proof a.action[href$="/certificat"] { background: var(--nuit); border-color: var(--nuit); }
body[data-espace] #view-proof a.action[href$="/certificat"] .action-label,
body[data-espace] #view-proof a.action[href$="/certificat"] .action-disque { color: var(--cab-surface); }
body[data-espace] #view-proof .action--danger .action-disque,
body[data-espace] #view-proof .action--danger .action-label { color: var(--danger); }
body[data-espace] #view-proof .action--danger:hover { border-color: var(--danger); }
body[data-espace] #view-proof .action--danger[data-arm="1"] { background: var(--danger); border-color: var(--danger); }
body[data-espace] #view-proof .action--danger[data-arm="1"] .action-disque,
body[data-espace] #view-proof .action--danger[data-arm="1"] .action-label { color: #fff; }

/* Deux colonnes : le fichier et sa position, puis la preuve, la capture et le sceau. */
.fiche-colonnes { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.fiche-colonne { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
body[data-espace] #view-proof .fiche-colonne > * { margin: 0; }
body[data-espace] #view-proof .detail-media { border-radius: 14px; border-color: var(--cab-ligne); background: #0C1A2B; box-shadow: var(--cab-ombre); }
body[data-espace] #view-proof .detail-media img,
body[data-espace] #view-proof .detail-media video { max-height: 560px; }
body[data-espace] #view-proof .detail-media-none { background: var(--cab-surface); color: var(--cab-doux); }
body[data-espace] #view-proof .lieu-bloc,
body[data-espace] #view-proof .fiche-colonne > .fiche-lieu { padding: 14px 16px; background: var(--cab-surface);
  border: 1px solid var(--cab-ligne); border-radius: 14px; box-shadow: var(--cab-ombre); }
body[data-espace] #view-proof .lieu-carte { height: 300px; border-radius: 10px; border-color: var(--cab-ligne); }
body[data-espace] #view-proof .fiche-lieu svg { color: var(--cab-accent); }

/* Les cartes « Preuve », « Capture », la vérification de l'ancrage et le sceau. */
body[data-espace] #view-proof .fiche-carte,
body[data-espace] #view-proof .verify-card { gap: 10px; padding: 16px 18px; background: var(--cab-surface);
  border: 1px solid var(--cab-ligne); border-radius: 14px; box-shadow: var(--cab-ombre); }
body[data-espace] #view-proof .fiche-carte-titre,
body[data-espace] #view-proof .verify-card .detail-sec { font: 600 11px/1 var(--sans); letter-spacing: .08em; color: var(--cab-doux); }
body[data-espace] #view-proof .ligne + .ligne { padding-top: 8px; border-top: 1px solid var(--cab-ligne); }
body[data-espace] #view-proof .ligne-label { color: var(--cab-doux); }
body[data-espace] #view-proof .ligne-valeur { color: var(--cab-encre); }
body[data-espace] #view-proof .ligne-valeur.mono { padding: 2px 7px; border-radius: 6px; background: var(--cab-surface-2); color: var(--cab-texte); }
body[data-espace] #view-proof .fiche-phrase { color: var(--cab-texte); }
body[data-espace] #view-proof .fiche-bascule { margin-top: 2px; padding: 10px 12px; border-radius: 10px; background: var(--cab-surface-2); color: var(--cab-texte); }
body[data-espace] #view-proof .fiche-bascule:hover { background: var(--cab-ligne); color: var(--cab-encre); }
body[data-espace] #view-proof .seal-note { padding: 18px; border-color: var(--cab-ligne); border-radius: 14px; box-shadow: var(--cab-ombre); }
body[data-espace] #view-proof .seal-note > svg { background: var(--cab-accent-fond); color: var(--cab-accent); }
body[data-espace] #view-proof .seal-note h3 { color: var(--cab-encre); }
body[data-espace] #view-proof .warn-note { border-radius: 12px; }
body[data-espace] #view-proof .fiche-colonne > * { animation: cab-monte 420ms var(--cab-courbe) both; }
body[data-espace] #view-proof .fiche-colonne > :nth-child(2) { animation-delay: 60ms; }
body[data-espace] #view-proof .fiche-colonne > :nth-child(3) { animation-delay: 120ms; }
body[data-espace] #view-proof .fiche-colonne > :nth-child(n+4) { animation-delay: 180ms; }

/* Le certificat : l'en-tête de l'espace ; le document lui-même ne change pas. */
body[data-espace] .certificat-tete .overline { margin-bottom: 8px; padding: 0; border: 0; background: none;
  font: 600 11.5px/1.2 var(--sans); letter-spacing: .08em; color: var(--cab-accent); }
body[data-espace] .certificat-tete h1 { font: 700 28px/1.18 var(--sans); letter-spacing: -0.022em; color: var(--cab-encre); }
body[data-espace] .certificat-tete .muted { color: var(--cab-doux); }

@media (max-width: 980px) {
  .fiche-colonnes { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  body[data-espace] #main { padding-left: 0; }
  body[data-espace] #view-proof,
  body[data-espace] #view-certificat { padding: 0 16px 56px; }
  body[data-espace] #proof-barre,
  body[data-espace] #certificat-barre-laterale { position: sticky; top: 0; z-index: 45; margin: 0 -16px 20px; }
  body[data-espace] .fiche-tete h1,
  body[data-espace] .certificat-tete h1 { font-size: 24px; }
}
@media (max-width: 600px) {
  /* Sur un téléphone, l'état de la pièce sous son titre. */
  body[data-espace] .fiche-tete { flex-direction: column; align-items: flex-start; gap: 10px; }
  body[data-espace] .fiche-tete .badge-etat { margin-top: 0; }
}

/* ── 18 ter. « Télécharger » : un petit menu sous le bouton ─────────────────────
   Samuel, 21/10/2026 : « il ne faut pas mettre des gros boutons comme ça mais laisser le petit bouton
   comme avant ou qqch de subtile, et qui ensuite propose les différentes options, avec un petit
   pictogramme info qui contient l'explication ». Une ligne par choix (son pictogramme, son nom, son
   état dessous), son « i » qui déplie l'explication ; le menu tient dans la largeur de l'écran (app.js). */
.action-ancre { position: relative; display: inline-flex; }
.action-chevron { display: inline-flex; margin-left: -2px; color: var(--muted); transition: transform var(--dur-2) var(--ease-out); }
.action[aria-expanded="true"] .action-chevron { transform: rotate(180deg); }
.telechargements { position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; width: 340px; max-width: calc(100vw - 24px);
  margin: 0; padding: 6px; list-style: none; background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: 12px; box-shadow: var(--shadow-2); animation: menu-ouvre 160ms var(--ease-out) both; }
@keyframes menu-ouvre {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
.telechargement { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 4px; }
.telechargement-choix { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 8px 10px; border: 0;
  border-radius: 8px; background: none; color: var(--nuit); font: 500 13.5px/1.35 var(--sans); text-align: left; cursor: pointer;
  transition: background-color var(--dur-1) var(--ease-out); }
.telechargement-choix:hover { background: var(--cream-2); }
.telechargement-choix[aria-busy="true"] { cursor: progress; }
.telechargement-choix > svg { flex: none; margin-top: 1px; color: var(--teal); }
.telechargement-texte { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.telechargement-etat:empty { display: none; }
.telechargement-etat { font-size: 12px; font-weight: 600; line-height: 1.4; color: var(--teal-ink); }
.telechargement-info { margin-right: 6px; }
.telechargement-aide { grid-column: 1 / -1; margin: -2px 10px 8px 36px; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
/* Le choix de la copie datée (le titulaire) : « Date et lieu », « QR code », « Les deux », en petites pastilles. */
.telechargement-reglages { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px; margin: -2px 10px 8px 36px; }
.telechargement-reglage { padding: 3px 9px; border: 1px solid var(--border-soft); border-radius: 999px; background: none;
  color: var(--muted); font: 500 12px/1.4 var(--sans); cursor: pointer;
  transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); }
.telechargement-reglage:hover { border-color: var(--teal); color: var(--nuit); }
.telechargement-reglage[aria-checked="true"] { background: var(--teal); border-color: var(--teal); color: var(--surface); }
.telechargement--attente .telechargement-choix { color: var(--muted); }
.telechargement--attente .telechargement-choix > svg { color: var(--sub); }
#main .action-ancre .action { text-decoration: none; }

/* ── 19. L'espace personnel : la coquille de l'espace avocat, l'esprit galerie ──────
   Samuel, 21/10/2026 : « j'aimerais que scealia.com/app soit amélioré visuellement et
   ressemble plus à l'espace avocat, en gardant l'esprit galerie ». Sur les pages du
   compte (body[data-espace="perso"], posé par app.js) : la barre latérale bleu nuit
   (barre-perso.mjs), les titres en DM Sans, des cartes à filet, trois tuiles, la
   galerie groupée par mois. Le fond et les surfaces de l'espace avocat avec le thème
   « Par défaut » (Samuel, même jour : « il faut reprendre la même couleur de fond ») :
   les jetons de la console prennent alors ceux de l'espace avocat. Un autre thème
   choisi dans « Mon compte › Apparence » les remplace : les jetons de l'espace avocat
   suivent alors ceux du thème. */
:root[data-theme="espace"] body[data-espace="perso"],
:root[data-theme="espace-sombre"] body[data-espace="perso"] {
  --cream: var(--cab-fond); --cream-2: var(--cab-surface-2); --cream-3: var(--cab-ligne);
  --surface: var(--cab-surface); --border: var(--cab-ligne-forte); --border-soft: var(--cab-ligne);
  --text: var(--cab-texte); --muted: var(--cab-doux); --sub: var(--cab-pale);
  --teal: var(--cab-accent); --teal-ink: var(--cab-accent-fort);
  --shadow-1: var(--cab-ombre); }
:root:not([data-theme="espace"]):not([data-theme="espace-sombre"]) body[data-espace="perso"] {
  --cab-fond: var(--cream); --cab-surface: var(--surface);
  --cab-surface-2: color-mix(in srgb, var(--cream) 55%, var(--surface));
  --cab-ligne: var(--border-soft); --cab-ligne-forte: var(--border);
  --cab-encre: var(--nuit); --cab-texte: var(--text); --cab-doux: var(--muted); --cab-pale: var(--sub);
  --cab-accent: var(--teal); --cab-accent-fort: var(--teal-ink);
  --cab-accent-fond: color-mix(in srgb, var(--teal) 11%, transparent);
  --cab-ombre: var(--shadow-1); --cab-ombre-2: var(--shadow-2); }
body:not([data-espace="perso"]) .barre-perso { display: none; }
body[data-espace="perso"] #main > .view { max-width: 1180px; margin: 0 auto; padding: 30px clamp(20px, 3.2vw, 48px) 72px; }

/* Les en-têtes : celui des écrans de l'espace avocat. */
body[data-espace="perso"] .cab-page-tete h1,
body[data-espace="perso"] .view-head h1,
body[data-espace="perso"] .coffre-tete h1,
body[data-espace="perso"] .dep-tete h1 { font: 700 28px/1.18 var(--sans); letter-spacing: -0.022em; color: var(--cab-encre); }
body[data-espace="perso"] .view-head .overline,
body[data-espace="perso"] .coffre-tete .overline,
body[data-espace="perso"] .dep-tete .overline { display: block; margin-bottom: 8px; padding: 0; border: 0; border-radius: 0;
  background: none; font: 600 11.5px/1.2 var(--sans); letter-spacing: .08em; color: var(--cab-accent); }
body[data-espace="perso"] .dep-carte { border-color: var(--cab-ligne); border-radius: 14px; box-shadow: var(--cab-ombre); }
body[data-espace="perso"] .dep-carte-nom { font: 650 17px/1.3 var(--sans); color: var(--cab-encre); }
body[data-espace="perso"] .view-head { margin-bottom: 24px; }
body[data-espace="perso"] .coffre-tete { margin-bottom: 24px; padding-bottom: 0; border-bottom: 0; }
body[data-espace="perso"] .cab-page-sous,
body[data-espace="perso"] .view-head .muted,
body[data-espace="perso"] .coffre-tete .muted { margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--cab-doux); }

/* Boutons, champs et cartes : ceux de l'espace avocat. */
body[data-espace="perso"] #main .btn { border-radius: 10px; font-weight: 600; letter-spacing: 0; }
body[data-espace="perso"] #main .btn:not(.btn-sm):not(.btn-link) { padding: 10px 16px; font-size: 13.5px; }
body[data-espace="perso"] #main .btn-sm { padding: 7px 12px; font-size: 12.5px; }
body[data-espace="perso"] #main .btn-primary { box-shadow: 0 1px 2px rgba(16, 24, 40, .10), 0 4px 12px rgba(18, 38, 62, .14); }
body[data-espace="perso"] #main .btn-ghost { background: var(--cab-surface); border-color: var(--cab-ligne-forte); color: var(--cab-encre); box-shadow: var(--cab-ombre); }
body[data-espace="perso"] #main .btn-ghost:hover:not(:disabled) { background: var(--cab-surface-2); border-color: var(--cab-pale); }
body[data-espace="perso"] .field input, body[data-espace="perso"] .lk-select, body[data-espace="perso"] .e2e-form input.e2e-pass,
body[data-espace="perso"] .share-form input, body[data-espace="perso"] .compte-suppression textarea { border-radius: 10px; }
body[data-espace="perso"] .card { border-radius: 14px; border-color: var(--cab-ligne); box-shadow: var(--cab-ombre); }
body[data-espace="perso"] .banner { border-radius: 10px; }
/* Le retour d'une fiche et d'un certificat : un lien discret, comme dans l'espace avocat (§ 18 bis). */
body[data-espace="perso"] #main #proof-back,
body[data-espace="perso"] #main #certificat-retour { padding: 0; border: 0; background: none; box-shadow: none;
  font: 500 13px/1.4 var(--sans); color: var(--cab-doux); }
body[data-espace="perso"] #main #proof-back:hover,
body[data-espace="perso"] #main #certificat-retour:hover { background: none; color: var(--cab-accent); }

/* Le coffre : les tuiles. Elles disent, sans mener ailleurs : pas de survol. */
.coffre-tuiles { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 22px; }
body[data-espace="perso"] div.cab-tuile:hover { transform: none; box-shadow: var(--cab-ombre); border-color: var(--cab-ligne); }
body[data-espace="perso"] div.cab-tuile:hover::after { transform: none; }
.coffre-tuile-jauge { width: 100%; height: 5px; margin-top: 10px; }
.cab-tuile--violet .coffre-tuile-jauge .cab-jauge-plein { background: linear-gradient(90deg, var(--cab-violet), #8B6FE0); }
.cab-tuile--ambre .coffre-tuile-jauge .cab-jauge-plein { background: var(--cab-ambre); }
body[data-espace="perso"] .cab-tuile { animation: cab-monte 480ms var(--cab-courbe) both; }
body[data-espace="perso"] .cab-tuile:nth-child(2) { animation-delay: 60ms; }
body[data-espace="perso"] .cab-tuile:nth-child(3) { animation-delay: 120ms; }

/* Les bandeaux du coffre : des cartes à filet, une icône sur sa teinte. */
body[data-espace="perso"] .verrou { margin-bottom: 16px; padding: 10px 12px; border-radius: 12px; border-color: var(--cab-ligne);
  background: var(--cab-surface); box-shadow: var(--cab-ombre); }
body[data-espace="perso"] .verrou-disque { width: 34px; height: 34px; border-radius: 10px; background: var(--cab-accent-fond); color: var(--cab-accent); }
body[data-espace="perso"] .bandeau-demandes { margin-bottom: 16px; padding: 12px 12px 12px 14px; border-radius: 12px;
  border-color: color-mix(in srgb, var(--cab-accent) 30%, transparent); background: var(--cab-accent-fond); }
.bandeau-demandes-ico { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 10px;
  background: var(--surface); color: var(--teal); }
body[data-espace="perso"] .bandeau-demandes-texte { font-weight: 500; }
body[data-espace="perso"] .bandeau-transmissions { margin-bottom: 16px; border-radius: 12px; }

/* Récents, filtres, tri et bascule : les commandes de l'espace avocat. */
body[data-espace="perso"] .recents { margin-bottom: 26px; }
body[data-espace="perso"] .section-titre { font: 650 15px/1.3 var(--sans); letter-spacing: 0; text-transform: none; color: var(--cab-encre); }
body[data-espace="perso"] .coffre-outils { margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--cab-ligne); }
body[data-espace="perso"] .puces { gap: 6px; }
body[data-espace="perso"] .puce { padding: 6px 13px; border-color: var(--cab-ligne-forte); background: var(--cab-surface);
  color: var(--cab-texte); font: 500 13px/1.4 var(--sans); box-shadow: var(--cab-ombre); }
body[data-espace="perso"] .puce:hover { border-color: var(--cab-pale); }
body[data-espace="perso"] .puce.active { background: var(--cab-encre); border-color: var(--cab-encre); color: var(--cab-surface); }
body[data-espace="perso"] .tri .lk-select { padding-top: 7px; padding-bottom: 7px; font-size: 13px; }
body[data-espace="perso"] .bascule-vue { padding: 3px; border: 1px solid var(--cab-ligne); border-radius: 10px; background: var(--cab-surface-2); }
body[data-espace="perso"] .bascule-vue button { border-radius: 8px; }
body[data-espace="perso"] .bascule-vue button[aria-pressed="true"] { background: var(--cab-surface); color: var(--cab-encre); box-shadow: 0 1px 3px rgba(16, 24, 40, .12); }

/* La galerie : des vignettes plus grandes, arrondies, qui se lèvent au survol. */
body[data-espace="perso"] .galerie { grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); gap: 22px 14px; }
body[data-espace="perso"] .tuile { border-color: var(--cab-ligne); border-radius: 14px; box-shadow: var(--cab-ombre); }
body[data-espace="perso"] .tuile:hover { box-shadow: var(--cab-ombre-2); border-color: var(--cab-ligne-forte); }
body[data-espace="perso"] .tuile-galerie .badge-etat { right: 8px; top: 8px; width: 24px; height: 24px; }
body[data-espace="perso"] .galerie-item:hover .galerie-titre { color: var(--cab-accent); }
body[data-espace="perso"] .vide-filtre { padding: 36px 20px; border: 1px dashed var(--cab-ligne-forte); border-radius: 14px; background: var(--cab-surface); }

/* La liste : une carte par palier, une rangée par preuve, la vignette à gauche. */
body[data-espace="perso"] .paliers { gap: 18px; }
body[data-espace="perso"] .palier { overflow: hidden; background: var(--cab-surface); border: 1px solid var(--cab-ligne); border-radius: 14px;
  box-shadow: var(--cab-ombre); }
body[data-espace="perso"] .palier-tete { margin: 0; padding: 13px 18px; border-bottom: 1px solid var(--cab-ligne); }
body[data-espace="perso"] .palier-ico { border-radius: 9px; }
body[data-espace="perso"] .palier-titre { font: 650 14.5px/1.3 var(--sans); color: var(--cab-encre); }
body[data-espace="perso"] .palier-compte { padding: 1px 8px; border-radius: 999px; background: var(--cab-surface-2);
  font: 600 11.5px/1.5 var(--sans); color: var(--cab-doux); }
body[data-espace="perso"] .palier-liste { display: flex; flex-direction: column; gap: 0; }
body[data-espace="perso"] .palier-vide { padding: 16px 18px; }
body[data-espace="perso"] .tuile-ligne { align-items: center; gap: 14px; padding: 10px 18px; border: 0; border-top: 1px solid var(--cab-ligne);
  border-radius: 0; box-shadow: none; transition: background-color var(--dur-1) var(--cab-courbe); }
body[data-espace="perso"] .tuile-ligne:first-child { border-top: 0; }
body[data-espace="perso"] .tuile-ligne:hover { transform: none; box-shadow: none; border-color: var(--cab-ligne); background: var(--cab-surface-2); }
body[data-espace="perso"] .tuile-ligne .apercu { width: 52px; height: 52px; min-height: 0; flex: none; align-self: center; border-radius: 10px; }
body[data-espace="perso"] .tuile-ligne .tuile-corps { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  column-gap: 12px; row-gap: 2px; padding: 0; }
body[data-espace="perso"] .tuile-ligne .tuile-lien { grid-column: 1; -webkit-line-clamp: 1; font-size: 14px; color: var(--cab-encre); }
body[data-espace="perso"] .tuile-ligne .tuile-date { grid-column: 1; font-size: 12px; color: var(--cab-doux); }
body[data-espace="perso"] .tuile-ligne .tuile-bas { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
body[data-espace="perso"] .palier-liste > .tuile-ligne { animation: cab-monte 420ms var(--cab-courbe) both; }

/* Le coffre vide : la carte en pointillé de l'espace avocat, les trois étapes côte à côte. */
body[data-espace="perso"] .empty { max-width: none; margin: 8px 0 0; padding: 44px 24px; border: 1px dashed var(--cab-ligne-forte);
  border-radius: 14px; background: var(--cab-surface); box-shadow: none; }
body[data-espace="perso"] .empty-icon { background: var(--cab-accent-fond); color: var(--cab-accent); }
body[data-espace="perso"] .empty h2 { font: 650 18px/1.3 var(--sans); color: var(--cab-encre); }
body[data-espace="perso"] .empty-steps { flex-direction: row; gap: 10px; max-width: 760px; margin: 0 auto; }
body[data-espace="perso"] .empty-steps li { flex: 1 1 0; min-width: 0; padding: 12px; border: 1px solid var(--cab-ligne); border-radius: 12px;
  background: var(--cab-surface-2); }
body[data-espace="perso"] .step-n { flex-basis: 30px; height: 30px; border-radius: 9px; background: var(--cab-accent-fond); color: var(--cab-accent);
  font: 700 13px/30px var(--sans); }

/* Mon compte : des cartes à titre en DM Sans. */
body[data-espace="perso"] .compte-sections { max-width: 820px; gap: 16px; }
body[data-espace="perso"] .compte-carte > h2,
body[data-espace="perso"] .compte-suppression-titre,
body[data-espace="perso"] .compte-session h2 { font: 650 16px/1.3 var(--sans); letter-spacing: -0.005em; color: var(--cab-encre); }
body[data-espace="perso"] .compte-sous-titre { color: var(--cab-doux); }
body[data-espace="perso"] .dl { border-radius: 12px; border-color: var(--cab-ligne); }
body[data-espace="perso"] .dl dt { background: var(--cab-surface-2); }
body[data-espace="perso"] .segment { border-radius: 10px; }
body[data-espace="perso"] .segment-choix { border-radius: 8px; }

/* Les demandes d'un avocat : une carte par demande, une rangée par pièce. */
body[data-espace="perso"] .dem-carte { margin-bottom: 16px; padding: 20px 22px; background: var(--cab-surface); border: 1px solid var(--cab-ligne);
  border-radius: 14px; box-shadow: var(--cab-ombre); animation: cab-monte 420ms var(--cab-courbe) both; }
body[data-espace="perso"] .dem-carte:first-of-type { border-top: 1px solid var(--cab-ligne); }
body[data-espace="perso"] .dem-carte h2 { font: 700 20px/1.25 var(--sans); letter-spacing: -0.015em; color: var(--cab-encre); }
body[data-espace="perso"] .dem-aide-app { border-radius: 12px; }
body[data-espace="perso"] #view-demandes .cab-pieces-tete { margin: 18px 0 10px; }
body[data-espace="perso"] #view-demandes .cab-pieces-tete h3 { color: var(--cab-doux); }
body[data-espace="perso"] #view-demandes .cab-compte { background: var(--cab-surface-2); color: var(--cab-texte); box-shadow: inset 0 0 0 1px var(--cab-ligne); }
body[data-espace="perso"] #view-demandes .cab-pieces { gap: 0; overflow: hidden; border: 1px solid var(--cab-ligne); border-radius: 12px; }
body[data-espace="perso"] #view-demandes .cab-piece { padding: 13px 16px; border: 0; border-top: 1px solid var(--cab-ligne); border-radius: 0;
  box-shadow: none; transition: background-color var(--dur-1) var(--cab-courbe); }
body[data-espace="perso"] #view-demandes .cab-piece:first-child { border-top: 0; }
body[data-espace="perso"] #view-demandes .cab-piece:hover { background: var(--cab-surface-2); }
body[data-espace="perso"] #view-demandes .cab-numero { border-radius: 9px; background: var(--cab-encre); color: var(--cab-surface); }
body[data-espace="perso"] #view-demandes .cab-element--recue .cab-numero { background: var(--cab-vert); color: #fff; }
body[data-espace="perso"] #view-demandes .cab-element-etat { padding: 1px 8px; border-radius: 999px; background: var(--cab-surface-2);
  box-shadow: inset 0 0 0 1px var(--cab-ligne); font-size: 11.5px; }
body[data-espace="perso"] #view-demandes .cab-element-etat--recue { background: var(--cab-vert-fond); color: var(--cab-vert); box-shadow: none; }
body[data-espace="perso"] #view-demandes .cab-note { background: var(--cab-surface-2); border-color: var(--cab-ligne); border-radius: 8px; }
body[data-espace="perso"] #view-demandes .cab-nature svg { color: var(--cab-accent); }
body[data-espace="perso"] #view-demandes .cab-vide { margin-top: 8px; padding: 44px 24px; background: var(--cab-surface);
  border: 1px dashed var(--cab-ligne-forte); border-radius: 14px; }

/* La fiche d'une preuve : ses panneaux (transmettre, lien) en cartes, titres en DM Sans. */
body[data-espace] .share-box { border-color: var(--cab-ligne); border-radius: 14px; box-shadow: var(--cab-ombre); }
body[data-espace] .share-box h3 { font: 650 16px/1.3 var(--sans); letter-spacing: -0.005em; color: var(--cab-encre); }
body[data-espace] .share-item { border-radius: 10px; background: var(--cab-surface-2); }
body[data-espace] #view-proof .fiche-panneau { margin: 0 0 22px; scroll-margin-top: 16px; }
body[data-espace] #view-proof .telechargements { border-color: var(--cab-ligne); box-shadow: var(--cab-ombre-2); }
body[data-espace] #view-proof .telechargement-choix { color: var(--cab-encre); }
body[data-espace] #view-proof .telechargement-choix:hover { background: var(--cab-surface-2); }
body[data-espace] #view-proof .telechargement-choix > svg { color: var(--cab-accent); }
body[data-espace] #view-proof .telechargement--attente .telechargement-choix { color: var(--cab-doux); }
body[data-espace] #view-proof .telechargement--attente .telechargement-choix > svg { color: var(--cab-pale); }

/* Écrans étroits : la barre latérale devient une barre en haut, son menu se déplie (§ 18). */
@media (max-width: 1180px) {
  .coffre-tuiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  body[data-espace="perso"] #main { padding-left: 0; }
  /* Un panneau déplié se montre sous la barre du haut, pas dessous. */
  body[data-espace] #view-proof .fiche-panneau { scroll-margin-top: 84px; }
  body[data-espace="perso"] #main > .view { padding: 22px 16px 56px; }
  body[data-espace="perso"] .cab-page-tete h1,
  body[data-espace="perso"] .view-head h1,
  body[data-espace="perso"] .coffre-tete h1,
  body[data-espace="perso"] .dep-tete h1 { font-size: 24px; }
}
@media (max-width: 720px) {
  .coffre-tuiles { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .coffre-tuiles > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  body[data-espace="perso"] .empty-steps { flex-direction: column; }
}
@media (max-width: 560px) {
  body[data-espace="perso"] .galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 10px; }
  body[data-espace="perso"] .coffre-reglages { margin-left: 0; width: 100%; justify-content: space-between; }
  body[data-espace="perso"] .dem-carte { padding: 16px; }
  body[data-espace="perso"] .tuile-ligne { padding: 10px 14px; }
}