/* ═══════════════════════════════════════════════════════════════════════════
   AX Editor — le système visuel
   Le matériau « liquid » d'Otto et de Giulia : fond minéral clair à trois halos,
   verre blanc à bord blanc, encres végétales, cartes en dégradé qui portent le
   sens, une seule action verte par décision, Google Sans Flex locale.

   Règles de la maison, tirées des retours de Mehdi (Otto, Giulia, Cockpit LRR) :
   - le contenu arrive tout de suite : un titre court, pas de surtitre, pas de
     sous-titre explicatif, jamais deux étages d'en-tête ;
   - une action évidente, le reste replié ;
   - des icônes fines sans fond, leur texte au survol ;
   - sur téléphone, jamais d'encadré dans un encadré.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Google Sans Flex";
  src: url("../fonts/otto/google-sans-flex-latin.woff2") format("woff2");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  interpolate-size: allow-keywords;

  /* Fond */
  --bg: #F4F7FB;
  --bg-ambient: linear-gradient(125deg, #EEF3F9 4%, #F4F7FB 52%, #EDF2F8);
  --halo-warm: rgb(127 227 228 / 34%);
  --halo-rose: rgb(183 203 232 / 46%);
  --halo-mint: rgb(207 246 246 / 72%);

  /* Verre */
  --glass: linear-gradient(145deg, #ffffffe0, #ffffff70);
  --glass-flat: rgb(255 255 255 / 58%);
  --glass-strong: rgb(255 255 255 / 76%);
  --glass-hover: rgb(255 255 255 / 55%);
  --glass-edge: #ffffffd9;
  --glass-blur: blur(24px) saturate(135%);
  --sheet-bg: #F1F5FA;

  /* Filets */
  --line: rgb(183 196 215 / 34%);
  --line-strong: rgb(157 172 193 / 40%);

  /* Encres */
  --ink: #14325F;
  --ink-title: #0D2547;
  --ink-2: #44597A;
  --ink-3: #64748B;
  --ink-ghost: #8E9DB3;
  --on-dark: #FFFFFF;

  /* Le vert d'action */
  --green: #00C1C4;
  --green-grad: linear-gradient(150deg, #2BD3D5, #00C1C4 55%, #00A9AC);
  --green-grad-hover: linear-gradient(150deg, #19C7CA, #00B1B4 55%, #00989B);
  --green-ink: #00989B;
  --green-soft: #E9FBFB;
  --focus: #00C1C4;
  --shadow-green: inset 0 1px 1px #ffffff70, inset 0 -1px 2px #00727444, 0 4px 14px rgb(0 193 196 / 35%);

  /* États */
  --ok: #15803D;      --ok-bg: #DCFCE7;      --ok-dot: #22C55E;
  --warn: #B45309;    --warn-bg: #FEF3C7;    --warn-dot: #F59E0B;
  --rose: #14325F;    --rose-bg: #CFF6F6;    --rose-dot: #00C1C4;
  --info: #1B3A6B;    --info-bg: #DCE6F5;    --info-dot: #5B80B8;
  --mute: #64748B;    --mute-bg: #EEF2F7;    --mute-dot: #94A3B8;

  /* Les trois matières qui portent le sens : forêt = résultat, pêche = volume, rose = attend un humain */
  --mesh-forest:
    
    
    radial-gradient(ellipse at 92% -4%, #00C1C4 0%, transparent 46%),
    radial-gradient(ellipse at 18% 0%, #3E6FB0 8%, transparent 55%),
    radial-gradient(ellipse at 84% 44%, #1FA3C4 4%, transparent 46%),
    radial-gradient(ellipse at 0% 70%, #1B3A6B 10%, transparent 70%),
    linear-gradient(175deg, #2F5F9E 10%, #24508C 34%, #1B3A6B 62%, #14325F 82%, #0D2547);
  --mesh-peach:
    
    
    radial-gradient(ellipse at 5% 14%, #E3EAF3 12%, transparent 50%),
    radial-gradient(ellipse at 99% 0%, #C9D9F0 12%, transparent 50%),
    radial-gradient(ellipse at 60% 62%, #8FB0E0 20%, transparent 62%),
    radial-gradient(ellipse at 12% 100%, #B7CBE8 0%, transparent 55%),
    linear-gradient(145deg, #DCE6F5, #B7CBE8 40%, #9DB9E4 85%);
  --mesh-rose:
    
    radial-gradient(ellipse at 50% 56%, #00C1C4 0%, #7FE3E4 25%, transparent 66%),
    radial-gradient(ellipse at 100% 4%, #DCE6F5 5%, transparent 60%),
    linear-gradient(135deg, #E9FBFB, #CFF6F6);
  --mesh-rose-card:
    
    radial-gradient(ellipse at 14% 52%, #00C1C4 0%, #7FE3E4 25%, transparent 62%),
    radial-gradient(ellipse at 100% 4%, #DCE6F5 5%, transparent 60%),
    linear-gradient(135deg, #E9FBFB, #CFF6F6);
  --mesh-sage:
    
    radial-gradient(ellipse at 0% 0%, #FFFFFF 0%, transparent 58%),
    radial-gradient(ellipse at 100% 20%, #CFF6F6 0%, transparent 62%),
    radial-gradient(ellipse at 22% 100%, #B7CBE8 0%, transparent 65%),
    linear-gradient(130deg, #E9FBFB, #DCE6F5 58%, #E3EAF3);
  --mesh-peach-soft:
    
    
    radial-gradient(ellipse at 4% 4%, #F4F7FB 0%, transparent 60%),
    radial-gradient(ellipse at 100% 0%, #DCE6F5 0%, transparent 58%),
    radial-gradient(ellipse at 70% 85%, #B7CBE8 0%, transparent 62%),
    linear-gradient(135deg, #E3EAF3, #C9D9F0 55%, #DCE6F5);
  --mesh-ice:
    
    radial-gradient(ellipse at 5% 0%, #FFFFFF 0%, transparent 55%),
    radial-gradient(ellipse at 90% 100%, #CFF6F6 0%, transparent 66%),
    linear-gradient(140deg, #F4F7FB, #DCE6F5 55%, #E9FBFB);
  --glass-rim: inset 0 0 2px 1px #ffffffc2, 0 8px 20px #2b487006;
  --glass-rim-after: inset 1px 2px 2px #ffffff84, inset -2px -1px 5px #ffffff68, inset 0 0 16px #ffffff21;

  /* Type : une police, et des tailles qui suivent le réglage du navigateur */
  --font: "Google Sans Flex", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --t-2xs: .6875rem;  /* 11 px : le plancher */
  --t-xs: .71875rem;  /* 11,5 px */
  --t-sm: .75rem;     /* 12 px */
  --t-base: .8125rem; /* 13 px */
  --t-md: .875rem;    /* 14 px */
  --t-lg: 1.0625rem;  /* 17 px */
  --t-xl: 1.25rem;    /* 20 px */
  --t-title: 1.625rem;/* 26 px */
  --numeric: lining-nums tabular-nums;

  /* Rayons */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 25px;
  --r-2xl: 28px;

  /* Ombres : très légères, la lumière vient de l'intérieur */
  --shadow-sm: inset 0 1px 1px #fff, 0 4px 15px #18345b06;
  --shadow-md: inset 0 1px 1px #fff, inset -1px -1px 2px #ffffff7a, 0 7px 28px #1a375f0a;
  --shadow-pop: 0 12px 35px rgb(18 45 82 / 16%), inset 0 1px 1px #fff;
  --shadow-sheet: -18px 0 55px rgb(20 46 82 / 20%);

  /* Mouvement : contact immédiat, déplacement court, puis le calme */
  --fast: 120ms;
  --ui: 180ms;
  --panel: 240ms;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-rail: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);

  --media: #050a11;
  --gutter: 28px;
  --side-w: 214px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; }
body {
  min-height: 100dvh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-base);
  line-height: 1.45;
  font-synthesis: none;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, p, dl, dd, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
img, video, canvas, svg { display: block; }
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
code, .mono { font-family: var(--mono); font-size: .92em; }
b, strong { font-weight: 550; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
::selection { background: #bed1eb; }
.tnum { font-variant-numeric: var(--numeric); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.muted { color: var(--ink-3); }
.nowrap { white-space: nowrap; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* L'ambiance : trois halos fixes, jamais interactifs */
.ambient { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: var(--bg-ambient); }
.ambient i { position: absolute; width: 780px; height: 720px; border-radius: 50%; }
.ambient i:nth-child(1) { left: 12%; top: -470px; background: radial-gradient(ellipse, var(--halo-warm), transparent 67%); }
.ambient i:nth-child(2) { right: -460px; top: 140px; background: radial-gradient(ellipse, var(--halo-rose), transparent 67%); }
.ambient i:nth-child(3) { left: -530px; bottom: -370px; background: radial-gradient(ellipse, var(--halo-mint), transparent 66%); }

/* ── Icônes : Lucide, trait fin, sans fond ── */
.icon { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.icon.xs { width: 13px; height: 13px; }
.icon.sm { width: 15px; height: 15px; }
.icon.lg { width: 19px; height: 19px; }

/* ── Boutons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 36px; padding: 0 15px;
  border: 1px solid var(--glass-edge); border-radius: 999px;
  background: linear-gradient(135deg, #ffffffc9, #ffffff70);
  box-shadow: var(--shadow-sm);
  color: #1c3962; font-size: var(--t-sm); font-weight: 500; white-space: nowrap;
  transition: background-color var(--ui) ease, box-shadow var(--ui) ease, transform var(--fast) var(--ease), opacity var(--ui) ease;
}
.btn:active:not(:disabled) { transform: scale(.975); }
.btn:disabled { opacity: .55; cursor: default; }
.btn--primary {
  border-color: #ffffff70; background: var(--green-grad); color: #fff; font-weight: 550;
  box-shadow: var(--shadow-green);
}
.btn--quiet { border-color: transparent; background: transparent; box-shadow: none; color: var(--ink-2); }
.btn--sm { min-height: 30px; padding: 0 12px; font-size: var(--t-xs); }
.btn--danger { color: var(--rose); }
.btn .icon { width: 15px; height: 15px; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover:not(:disabled) { background: #fff; }
  .btn--primary:hover:not(:disabled) { background: var(--green-grad-hover); }
  .btn--quiet:hover:not(:disabled) { background: var(--glass-hover); color: var(--ink); }
}

/* La pilule de verre posée sur une carte en dégradé (« Relire ↗ ») */
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 34px; padding: 6px 14px;
  border: 1px solid #ffffff95; border-radius: 28px;
  background: linear-gradient(145deg, #ffffff66, #ffffff22);
  box-shadow: inset 0 1px 1px #ffffff70, 0 3px 10px #14325f09;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  color: inherit; font-size: var(--t-sm); font-weight: 500; white-space: nowrap;
  transition: background-color var(--ui) ease, transform var(--fast) var(--ease);
}
.pill:active:not(:disabled) { transform: scale(.975); }
.pill:disabled { opacity: .6; cursor: default; }
.pill--solid { background: #ffffffc4; }
@media (hover: hover) and (pointer: fine) { .pill:hover:not(:disabled) { background: #ffffff8c; } }

/* Une icône sans fond, dont le texte apparaît au survol (retour Giulia du 26/10) */
.ib {
  display: inline-grid; grid-template-columns: 34px 0fr; align-items: center; height: 34px;
  border-radius: 999px; color: var(--ink-2); white-space: nowrap; overflow: hidden;
  transition: grid-template-columns var(--panel) var(--ease), background-color var(--ui) ease, color var(--ui) ease;
}
.ib > .icon { justify-self: center; }
.ib > span { min-width: 0; overflow: hidden; font-size: var(--t-xs); font-weight: 500; opacity: 0; transition: opacity var(--ui) ease; }
.ib > span > i { display: block; padding-right: 13px; font-style: normal; }
.ib:active { transform: scale(.975); }
@media (hover: hover) and (pointer: fine) {
  .ib:hover, .ib:focus-visible { grid-template-columns: 34px 1fr; background: var(--glass-hover); color: var(--ink); }
  .ib:hover > span, .ib:focus-visible > span { opacity: 1; }
}
.ib-only { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--ink-2); transition: background-color var(--ui) ease, color var(--ui) ease, transform var(--fast) var(--ease); }
.ib-only:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) { .ib-only:hover { background: var(--glass-hover); color: var(--ink); } }
.ib-round {
  display: grid; place-items: center; flex: none; width: 32px; height: 32px;
  border: 1px solid #ffffff95; border-radius: 50%;
  background: linear-gradient(145deg, #ffffff70, #ffffff30);
  box-shadow: inset 0 1px 1px #ffffff70, 0 3px 10px rgb(26 55 95 / 6%);
  color: var(--ink-2); transition: background-color var(--ui) ease, color var(--ui) ease;
}
@media (hover: hover) and (pointer: fine) { .ib-round:hover { background: #ffffffb0; color: var(--ink); } }

/* ── Pastilles : un point, un mot en minuscules, discrètes ── */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 21px; padding: 0 9px 0 8px;
  border-radius: 999px; background: var(--mute-bg); color: var(--mute);
  font-size: var(--t-2xs); font-weight: 500; line-height: 1; white-space: nowrap;
}
.chip::before { content: ""; width: 5px; height: 5px; flex: none; border-radius: 50%; background: var(--mute-dot); }
.chip[data-tone="ok"] { background: var(--ok-bg); color: var(--ok); }
.chip[data-tone="ok"]::before { background: var(--ok-dot); }
.chip[data-tone="warn"] { background: var(--warn-bg); color: var(--warn); }
.chip[data-tone="warn"]::before { background: var(--warn-dot); }
.chip[data-tone="rose"] { background: var(--rose-bg); color: var(--rose); }
.chip[data-tone="rose"]::before { background: var(--rose-dot); }
.chip[data-tone="info"] { background: var(--info-bg); color: var(--info); }
.chip[data-tone="info"]::before { background: var(--info-dot); }
.chip[data-tone="sage"] { background: var(--green-soft); color: var(--green-ink); }
.chip[data-tone="sage"]::before { background: #647fa5; }
.chip[data-tone="pending"] { background: transparent; box-shadow: inset 0 0 0 1px #a9b7cb; color: var(--ink-2); }
.chip[data-tone="pending"]::before { background: transparent; box-shadow: inset 0 0 0 1px var(--ink-ghost); }
.chip--plain::before { display: none; }
.chip--plain { padding: 0 9px; }
/* Un état vivant : le rond qui pulse (retour Giulia : ce qui bouge doit se voir) */
.chip--live::before { animation: pulse-dot 1.6s var(--ease) infinite; }
@keyframes pulse-dot { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 40%, transparent); } 60% { box-shadow: 0 0 0 5px transparent; } }

/* Le compteur rond */
.count {
  display: inline-grid; place-items: center; min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: 999px; background: #ffffff80; box-shadow: inset 0 0 0 1px #ffffffb0;
  color: var(--ink-2); font-size: var(--t-2xs); font-weight: 500; font-variant-numeric: var(--numeric);
}
.count--rose { background: var(--rose-dot); box-shadow: none; color: #0D2547; }

/* ── Panneaux de verre ── */
.panel {
  position: relative; min-width: 0;
  border: 1px solid var(--glass-edge); border-radius: var(--r-xl);
  background: var(--glass); box-shadow: var(--shadow-md);
}
.panel-head { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 12px 8px 20px; }
.panel-head h2 { color: var(--ink-title); font-size: var(--t-md); font-weight: 500; letter-spacing: -.02em; }
.panel-head .end { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.panel-body { padding: 0 20px 18px; }
.sec-title { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; color: var(--ink-title); font-size: var(--t-md); font-weight: 500; letter-spacing: -.02em; }
.sec-title small { color: var(--ink-3); font-size: var(--t-xs); font-weight: 400; letter-spacing: 0; }
.sec-title .end { margin-left: auto; display: flex; align-items: center; gap: 6px; }

/* ── Cartes en dégradé (« liquid hero ») : chaque matière dit une famille ── */
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.lh {
  position: relative; isolation: isolate; display: flex; flex-direction: column; min-width: 0;
  min-height: 186px; padding: 16px 18px 12px; overflow: hidden;
  border-radius: var(--r-2xl); box-shadow: var(--glass-rim);
}
.lh::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: var(--glass-rim-after); pointer-events: none; }
.lh > .mesh { position: absolute; inset: -40px; z-index: -1; pointer-events: none; }
.lh-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 22px; }
.lh-head h3 { font-size: var(--t-sm); font-weight: 450; }
.lh-num { display: flex; align-items: baseline; gap: 8px; margin-top: 12px; }
.lh-num > strong { font-size: clamp(2.4rem, 3.6vw, 3.25rem); font-weight: 400; line-height: 1; letter-spacing: -.065em; font-variant-numeric: var(--numeric); }
.lh-num > span { font-size: var(--t-xs); font-weight: 450; line-height: 1.3; }
.lh-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 9px; font-size: var(--t-2xs); }
.lh--forest { background: #14325f; color: #fff; }
.lh--forest .mesh { background: var(--mesh-forest); }
.lh--forest .lh-head h3 { color: #e8eff9; text-shadow: 0 1px 2px #1535624d; }
.lh--forest .lh-num { text-shadow: 0 1px 3px #15356255; }
.lh--forest .lh-foot { border-top: 1px solid #ffffff30; }
.lh--peach { background: #c9d9f0; color: #14325f; }
.lh--peach .mesh { background: var(--mesh-peach); }
.lh--peach .lh-foot { border-top: 1px solid #14325f20; }
.lh--rose { background: #cff6f6; color: #14325f; }
.lh--rose .mesh { background: var(--mesh-rose); }
.lh--sage { background: #c6d7ee; color: #193760; }
.lh--sage .mesh { background: var(--mesh-sage); }
.lh--ice { background: #d7e1ee; color: #233d62; }
.lh--ice .mesh { background: var(--mesh-ice); }

/* L'orbe : la partie intelligente, dans son cercle de verre */
.orb { position: relative; display: grid; place-items: center; flex: none; width: 92px; height: 92px; }
.orb > i {
  position: absolute; inset: 7px; border: 1px solid #ffffff63; border-radius: 50%;
  background: radial-gradient(circle at 32% 22%, #ffffff35, #ffffff08 65%);
  box-shadow: inset 0 1px 0 #ffffff70, 0 8px 24px #14325f0d;
}
.orb canvas { position: relative; width: 64px; height: 64px; opacity: .8; }
.orb--sm { width: 66px; height: 66px; }
.orb--sm > i { inset: 3px; }
.orb--sm canvas { width: 48px; height: 48px; }

/* La rangée de chiffres : grands, légers, séparés par des filets */
.figures { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); }
.fig { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 7px 14px; border-right: 1px solid var(--line); color: #253e61; }
.fig:first-child { padding-left: 2px; }
.fig:last-child { border-right: 0; }
.fig > strong { flex: none; font-size: clamp(1.45rem, 2vw, 1.75rem); font-weight: 400; line-height: 1; letter-spacing: -.055em; font-variant-numeric: var(--numeric); }
.fig > strong .unit { margin-left: 2px; font-size: .55em; letter-spacing: 0; color: var(--ink-2); }
.fig > span { min-width: 0; font-size: var(--t-xs); font-weight: 450; line-height: 1.25; }
.fig small { display: block; margin-top: 1px; color: var(--ink-3); font-size: var(--t-2xs); font-weight: 400; line-height: 1.2; }
a.fig { transition: background-color var(--ui) ease; border-radius: var(--r-sm); }
@media (hover: hover) and (pointer: fine) { a.fig:hover { background: var(--glass-hover); } }

/* ── Sélecteur segmenté : le curseur de verre glisse, les libellés ne bougent pas ── */
.seg {
  position: relative; display: inline-flex; align-items: center; gap: 1px; max-width: 100%;
  padding: 3px; border: 1px solid #ffffffb0; border-radius: 999px;
  background: #dde5f1a6; box-shadow: inset 0 1px 2px #18345b0a;
  overflow-x: auto; scrollbar-width: none;
}
.seg::-webkit-scrollbar { display: none; }
.seg-cursor {
  position: absolute; top: 3px; bottom: 3px; left: 0; width: 0; border-radius: 999px;
  background: #fff; box-shadow: inset 0 1px 1px #fff, 0 3px 10px #18345b16;
  transition: transform var(--panel) var(--ease-rail), width var(--panel) var(--ease-rail);
  pointer-events: none;
}
.seg-cursor.no-anim { transition: none; }
.seg > button, .seg > a {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; flex: none;
  min-height: 30px; padding: 0 13px; border-radius: 999px;
  color: var(--ink-2); font-size: var(--t-xs); font-weight: 500; white-space: nowrap;
  transition: color var(--ui) ease;
}
.seg > button[aria-pressed="true"], .seg > a[aria-current="page"] { color: var(--ink-title); }
.seg b { font-weight: 500; color: var(--ink-3); font-variant-numeric: var(--numeric); }
.seg .icon { width: 14px; height: 14px; }
@media (hover: hover) and (pointer: fine) { .seg > button:hover, .seg > a:hover { color: var(--ink); } }

/* ── Menus : dans l'application, jamais le menu natif ── */
.dd-btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 9px 0 12px;
  border-radius: 999px; color: var(--ink-2); font-size: var(--t-xs); font-weight: 500; white-space: nowrap;
  transition: background-color var(--ui) ease, color var(--ui) ease;
}
.dd-btn .icon { width: 13px; height: 13px; }
.dd-btn.is-set { background: var(--green-soft); color: var(--green-ink); }
.dd-btn[aria-expanded="true"] { background: var(--glass-strong); color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .dd-btn:hover { background: var(--glass-hover); color: var(--ink); } }

.menu {
  position: fixed; z-index: 95; min-width: 200px; max-width: min(340px, calc(100vw - 24px)); max-height: min(420px, calc(100dvh - 32px));
  overflow-y: auto; padding: 5px;
  border: 1px solid #fff; border-radius: 18px;
  background: rgb(245 248 252 / 94%); box-shadow: var(--shadow-pop);
  -webkit-backdrop-filter: blur(20px) saturate(135%); backdrop-filter: blur(20px) saturate(135%);
  transform-origin: var(--origin, top left);
  animation: menu-in 160ms var(--ease);
}
@keyframes menu-in { from { opacity: 0; transform: scale(.97) translateY(-2px); } }
.menu-item {
  display: flex; align-items: center; gap: 9px; width: 100%; min-height: 34px; padding: 5px 10px;
  border-radius: 13px; color: var(--ink); font-size: var(--t-sm); text-align: left; white-space: nowrap;
}
.menu-item small { display: block; margin-top: 1px; color: var(--ink-3); font-size: var(--t-2xs); white-space: normal; line-height: 1.35; }
.menu-item > .txt { flex: 1; min-width: 0; }
.menu-item > .chk { flex: none; margin-left: auto; color: var(--green); }
.menu-item.is-focus, .menu-item:focus-visible { background: #fff; outline: none; }
.menu-item[data-danger] { color: var(--rose); }
.menu-sep { height: 1px; margin: 4px 8px; background: var(--line); }
.menu-cap { padding: 6px 10px 3px; color: var(--ink-3); font-size: var(--t-2xs); font-weight: 500; }

/* ── Avatars de client ── */
.av {
  display: inline-grid; place-items: center; flex: none; width: var(--s, 22px); height: var(--s, 22px);
  border-radius: 32%; overflow: hidden;
  background: var(--mesh-sage); box-shadow: inset 0 0 0 1px #ffffff90;
  color: #193760; font-size: calc(var(--s, 22px) * .42); font-weight: 550; letter-spacing: -.02em; line-height: 1;
}
.av img { width: 78%; height: 78%; object-fit: contain; }
.av--dark { box-shadow: none; }

/* ── Champs ── */
.field {
  display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px;
  border: 1px solid #ffffffbc; border-radius: 999px; background: #ffffff8f;
  box-shadow: inset 0 1px 1px #fff, 0 4px 14px #203e6704; color: var(--ink-2);
  transition: border-color var(--ui) ease, box-shadow var(--ui) ease, background-color var(--ui) ease;
}
.field input { flex: 1; min-width: 0; height: 34px; padding: 0; border: 0; background: transparent; color: var(--ink); font-size: var(--t-base); outline: none; }
.field input::placeholder { color: var(--ink-3); opacity: 1; }
.field input::-webkit-search-cancel-button { display: none; }
.field:focus-within { border-color: var(--focus); box-shadow: 0 0 0 3px rgb(39 77 130 / 14%); background: #fff; color: var(--ink); }
textarea.area {
  display: block; width: 100%; padding: 10px 14px; resize: vertical;
  border: 1px solid #ffffffbc; border-radius: 16px; background: #ffffffa8;
  box-shadow: inset 0 1px 1px #fff, 0 4px 14px #203e6704; color: var(--ink); font-size: var(--t-base);
}
textarea.area:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px rgb(39 77 130 / 14%); background: #fff; }

/* Le commutateur à cocher */
.check { display: inline-flex; align-items: center; gap: 8px; min-height: 30px; color: var(--ink-2); font-size: var(--t-xs); font-weight: 500; cursor: pointer; }
.check input { position: absolute; opacity: 0; pointer-events: none; }
.check .box { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 6px; background: #ffffffb0; box-shadow: inset 0 0 0 1px #aab9cf; color: transparent; transition: background-color var(--fast) ease, box-shadow var(--fast) ease; }
.check .box .icon { width: 12px; height: 12px; stroke-width: 2.4; }
.check input:checked + .box { background: var(--green); box-shadow: none; color: #fff; }
.check input:focus-visible + .box { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ── Dépliables : ouverture et fermeture animées ── */
.fold { border-top: 1px solid var(--line); }
.fold:first-child { border-top: 0; }
.fold > summary {
  display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 7px 4px;
  color: var(--ink-title); font-size: var(--t-sm); font-weight: 500;
  transition: color var(--ui) ease;
}
.fold > summary .icon:first-child { color: var(--ink-3); }
.fold > summary .sub { color: var(--ink-3); font-size: var(--t-xs); font-weight: 400; }
.fold > summary .chev { margin-left: auto; color: var(--ink-3); transition: transform var(--panel) var(--ease); }
.fold[open] > summary .chev { transform: rotate(180deg); }
.fold::details-content { block-size: 0; overflow: clip; opacity: 0; transition: block-size var(--panel) var(--ease), opacity var(--ui) ease, content-visibility var(--panel) allow-discrete; }
.fold[open]::details-content { block-size: auto; opacity: 1; }
.fold-body { padding: 2px 4px 14px; }

/* ── Médias : toujours dans un cadre sombre ── */
.frame { position: relative; overflow: hidden; border-radius: var(--r-lg); background: var(--media); box-shadow: inset 0 0 0 1px #ffffff14, 0 6px 18px -10px #0c1f3940; }
.frame video, .frame img { width: 100%; height: 100%; object-fit: contain; }

/* ── États vides : une icône, une phrase ── */
.empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 34px 20px; color: var(--ink-2); text-align: center; }
.empty-ic { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid #ffffffd9; border-radius: 17px; background: linear-gradient(140deg, #ffffffc9, #ffffff5c); box-shadow: inset 0 1px 2px #fff; color: #637896; }
.empty h3 { color: var(--ink-title); font-size: var(--t-md); font-weight: 500; }
.empty p { max-width: 460px; font-size: var(--t-sm); }
.empty code { display: inline-block; margin-top: 2px; padding: 3px 8px; border-radius: 9px; background: #ffffff8f; font-size: var(--t-2xs); user-select: all; }

/* Le squelette : la place est déjà la bonne */
.skel { border-radius: var(--r-lg); background: linear-gradient(100deg, #ffffff40 20%, #ffffff90 50%, #ffffff40 80%); background-size: 240% 100%; animation: shimmer 1.3s linear infinite; }
@keyframes shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }

.notice { display: flex; align-items: flex-start; gap: 9px; padding: 10px 13px; border-radius: var(--r-md); background: var(--mute-bg); color: var(--mute); font-size: var(--t-sm); line-height: 1.4; }
.notice[data-tone="warn"] { background: var(--warn-bg); color: var(--warn); }
.notice[data-tone="rose"] { background: var(--rose-bg); color: var(--rose); }
.notice[data-tone="ok"] { background: var(--ok-bg); color: var(--ok); }
.notice .icon { margin-top: 1px; }
.err { padding: 18px 20px; border-radius: var(--r-lg); background: var(--rose-bg); color: var(--rose); }

/* Les tables, légères */
.tbl-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.tbl th { padding: 7px 10px; border-bottom: 1px solid var(--line-strong); color: var(--ink-3); font-size: var(--t-2xs); font-weight: 500; text-align: left; white-space: nowrap; }
.tbl td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl .num { text-align: right; font-variant-numeric: var(--numeric); white-space: nowrap; }
.tbl tbody tr[data-play], .tbl tbody tr[data-href] { cursor: pointer; transition: background-color var(--fast) ease; }
@media (hover: hover) and (pointer: fine) { .tbl tbody tr[data-play]:hover, .tbl tbody tr[data-href]:hover { background: var(--glass-hover); } }

/* Une cascade courte à l'arrivée sur une page, jamais à une mise à jour : 30 ms entre deux éléments, 120 ms au plus. */
.cascade > *, .cascade-list .todo { animation: view-in 240ms var(--ease) backwards; }
.cascade > *:nth-child(2), .cascade-list .todo:nth-child(2) { animation-delay: 30ms; }
.cascade > *:nth-child(3), .cascade-list .todo:nth-child(3) { animation-delay: 60ms; }
.cascade > *:nth-child(4), .cascade-list .todo:nth-child(n + 4) { animation-delay: 90ms; }
.cascade > *:nth-child(n + 5) { animation-delay: 120ms; }

/* Entrée d'une vue : 220 ms, 6 px. Rien d'autre ne bouge. */
.enter { animation: view-in 220ms var(--ease) both; }
@keyframes view-in { from { opacity: 0; transform: translateY(6px); } }
.rise { animation: rise-in 420ms var(--ease) both; animation-delay: var(--d, 0ms); }
@keyframes rise-in { from { opacity: 0; transform: translate3d(0, 10px, 0) scale(.985); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  :root { --glass: #f3f7fc; --glass-flat: #f3f7fc; --glass-strong: #fff; }
  .panel, .menu, .sheet, .side, .bnav, .pill { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}

@media (max-width: 760px) {
  :root { --gutter: 16px; }
  /* Sur téléphone, un panneau n'est plus un encadré : le double retrait mange la largeur. */
  .panel { border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  .panel-head { padding-inline: 0; }
  .panel-body { padding-inline: 0; }
  .btn { min-height: 38px; }
  .field input { font-size: 16px; }
  textarea.area { font-size: 16px; }
  .figures { grid-template-columns: repeat(min(var(--n, 4), 2), minmax(0, 1fr)); row-gap: 4px; }
  .fig:nth-child(2n) { border-right: 0; }
  .fig:nth-child(2n + 1) { padding-left: 2px; }
}