/* Zourou — design system (§10.5, §10.6).
 * Warm "literate" palette: deep teal brand, amber highlight on the studied
 * word (the signature). Correction never relies on colour alone (icon +
 * position + text). System serif for the hero word, system sans for UI — no
 * external fonts (no IP leak, §9c.5). Larger base type for comfort.
 */
:root {
  --ink: #20242e;
  --ink-soft: #59616f;
  --paper: #faf8f4;
  --card: #ffffff;
  --line: #e7e3da;
  --brand: #1f7a6d;
  --brand-2: #2b9a89;
  --brand-ink: #ffffff;
  --gold: #d99a2b;
  --ok: #1f8a4c;
  --ok-bg: #e6f6ec;
  --err: #cf4a3f;
  --err-bg: #fdeae7;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --radius: 14px; --radius-sm: 10px;
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-hero: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
  --shadow: 0 1px 2px rgba(20,22,30,.05), 0 10px 30px rgba(20,22,30,.07);
  --maxw: 760px;
  --fs-base: 1.0625rem;   /* 17px — larger, more comfortable */
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #edeef2; --ink-soft: #a3aab6; --paper: #14161b; --card: #1d2027;
    --line: #2c313b; --brand: #35b6a2; --brand-2: #47c9b4; --brand-ink: #10221f;
    --gold: #e2b555; --ok: #4bc586; --ok-bg: #133026; --err: #ec7166; --err-bg: #33191a;
  }
}
:root[data-theme="light"] {
  --ink: #20242e; --ink-soft: #59616f; --paper: #faf8f4; --card: #fff; --line: #e7e3da;
  --brand: #1f7a6d; --brand-2: #2b9a89; --brand-ink: #fff; --gold: #d99a2b;
  --ok: #1f8a4c; --ok-bg: #e6f6ec; --err: #cf4a3f; --err-bg: #fdeae7;
}
:root[data-theme="dark"] {
  --ink: #edeef2; --ink-soft: #a3aab6; --paper: #14161b; --card: #1d2027; --line: #2c313b;
  --brand: #35b6a2; --brand-2: #47c9b4; --brand-ink: #10221f; --gold: #e2b555;
  --ok: #4bc586; --ok-bg: #133026; --err: #ec7166; --err-bg: #33191a;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-ui);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  font-size: var(--fs-base);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 var(--space-4); }
p { margin: 0 0 var(--space-4); }

.container { max-width: var(--maxw); margin: 0 auto; padding: var(--space-5) var(--space-4); }
.container.wide { max-width: 1080px; }
.stack > * + * { margin-top: var(--space-4); }
.muted { color: var(--ink-soft); }
.center { text-align: center; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 46px; padding: 0 var(--space-5); border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  font: inherit; font-weight: 600; font-size: 1.02rem; cursor: pointer;
  transition: transform .08s ease, background .15s ease, box-shadow .15s ease;
}
.btn:hover { text-decoration: none; box-shadow: var(--shadow); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }
.btn-primary { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.btn-block { display: flex; width: 100%; }
.btn-lg { min-height: 56px; font-size: 1.15rem; padding: 0 var(--space-6); }
.btn:has(.btn-fine) { flex-direction: column; gap: 0; padding-top: var(--space-2); padding-bottom: var(--space-2); text-align: center; }
.btn-fine { display: block; font-size: .72em; font-weight: 400; opacity: .9; line-height: 1.2; }   /* the parenthesis under a button's label: smaller, below it */

/* Cards */
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--space-5); box-shadow: var(--shadow);
}

/* Forms */
label { display: block; font-weight: 600; margin-bottom: var(--space-2); }
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=search], input[type=date], input[type=tel], input[type=url], input[type=time],
textarea, select {
  width: 100%; min-height: 46px; padding: var(--space-3);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--card); color: var(--ink); font: inherit; font-size: 16px; /* no iOS zoom */
}
/* Tous les champs sur UNE ligne ont la même hauteur (46 px) : texte, courriel, mot de passe, nombre, recherche, date, liste. */
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=search], input[type=date], input[type=tel], input[type=url], input[type=time], select { height: 46px; }
/* Pas de petites flèches « monter / descendre » dans les champs numériques (n° de client, nombre de places…) : on tape le nombre. */
input[type=number] { -moz-appearance: textfield; appearance: textfield; }
input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
textarea { min-height: 120px; resize: vertical; }
.field + .field { margin-top: var(--space-4); }
.hp { position: absolute; left: -9999px; }
/* Password field + show/hide button (added by app.js). */
.pw-wrap { display: flex; gap: var(--space-2); align-items: stretch; }
.pw-wrap input { flex: 1; min-width: 0; }
.pw-toggle {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; padding: 0 var(--space-3);
  color: var(--ink); background: var(--card); cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.pw-toggle svg { display: block; }
.pw-toggle:hover { background: var(--line); }
.pw-count { margin: var(--space-1) 0 0; font-size: .86rem; }

/* Focus — always visible (§10.5) */
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* --- Aides : petite bulle sur un bouton ---
   [data-tip] : une bulle qui apparaît au survol (souris) après une seconde, jamais pendant la saisie. Rien n'est inséré dans la page tant que la
   bulle est cachée (display:none), pour qu'elle ne fasse jamais défiler la page. data-tip-pos="bottom" la place sous l'élément
   (barre du haut). Portée de Dicteo. */
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip); display: none;
  position: absolute; z-index: 30; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  width: max-content; max-width: min(260px, 80vw); padding: 6px 10px;
  background: var(--ink); color: var(--paper); border-radius: var(--radius-sm);
  font-size: .82rem; font-weight: 400; line-height: 1.35; text-align: center; white-space: normal;
  box-shadow: var(--shadow); pointer-events: none;
}
[data-tip]::before {
  content: ""; display: none;
  position: absolute; z-index: 30; bottom: calc(100% + 2px); left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: var(--ink); border-bottom-width: 0;
  pointer-events: none;
}
/* Seulement quand la souris repose sur l'élément, après une pause d'une seconde (la bulle apparaît en fondu, donc ne clignote
   pas quand le pointeur ne fait que passer) ; jamais quand le contrôle a le focus (saisie dans un champ, bouton cliqué). */
[data-tip]:hover::after, [data-tip]:hover::before { display: block; animation: tip-in .15s ease 1s both; }
[data-tip]:focus-within::after, [data-tip]:focus-within::before { display: none; }
@keyframes tip-in { from { opacity: 0; } to { opacity: 1; } }
details[open] > summary[data-tip]::after, details[open] > summary[data-tip]::before { display: none; }
[data-tip][data-tip-pos="bottom"]::after { bottom: auto; top: calc(100% + 8px); }
[data-tip][data-tip-pos="bottom"]::before {
  bottom: auto; top: calc(100% + 2px);
  border-top-width: 0; border-top-color: transparent; border-bottom-width: 6px; border-bottom-color: var(--ink);
}
@media (hover: none) { [data-tip]:hover::after, [data-tip]:hover::before { display: none; } }

/* La puce ronde « ? » (l'explication d'un champ ou d'une section) : la bulle elle-même vient du
   système [data-tip] ci-dessus, pas d'un ``.info-tip`` séparé — voir templates/app/settings.html. */
.info {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%; font-size: .78rem; font-weight: 700;
  background: var(--brand); color: var(--brand-ink); cursor: help; margin-left: 6px;
  vertical-align: middle;
}

/* Save status pill + per-section save footer */
.savepill { font-size: .9rem; color: var(--ink-soft); }
.savepill.ok { color: var(--ok); font-weight: 600; }
.sec-foot { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-2); }

/* Public nav */
.nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-4); max-width: 1080px; margin: 0 auto;
}
.nav .brand { display:flex; align-items:center; gap:10px; font-family: var(--font-hero); font-size: 1.5rem; font-weight: 700; color: var(--brand); }
.brand img { width: 30px; height: 30px; border-radius: 8px; }
.nav-links { display: flex; gap: var(--space-5); align-items: center; }

/* App bar (§10.4) */
.appbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line);
  background: var(--card); position: sticky; top: 0; z-index: 10;
}
.appbar .brand { display:flex; align-items:center; gap:8px; font-family: var(--font-hero); font-weight: 700; color: var(--brand); font-size:1.25rem; }
.appbar nav { display: flex; gap: var(--space-4); align-items: center; }
.appbar nav a { font-size: 1.02rem; }
.appbar nav a[aria-current="page"] { color: var(--brand); font-weight: 700; border-bottom: 2px solid var(--brand); }

/* Menu */
.menu { position: relative; }
.menu summary { list-style: none; cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; }
.menu summary::-webkit-details-marker { display: none; }
.menu[open] > .menu-panel { display: block; }
.menu-panel {
  display: none; position: absolute; right: 0; top: 100%; min-width: 230px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: var(--space-2); z-index: 20;
}
.menu-panel a, .menu-panel button {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: var(--space-3); border-radius: var(--radius-sm); color: var(--ink);
  background: none; border: none; font: inherit; cursor: pointer;
}
.menu-panel a:hover, .menu-panel button:hover { background: var(--paper); text-decoration: none; }
.menu-sep { height: 1px; background: var(--line); margin: var(--space-2) 0; }
.menu-user { padding: 6px 12px; font-size: .85em; color: var(--muted); overflow-wrap: anywhere; max-width: 260px; }
.menu-ico { width: 18px; height: 18px; flex: 0 0 auto; color: var(--ink-soft); }
.menu summary .menu-ico { margin-right: 6px; color: inherit; }

/* Sélecteur de niveaux (§3.2a) — popup de la barre du haut et menu Compte */
.appbar-menus { display: flex; align-items: center; gap: var(--space-3); }
.levels-panel { min-width: 260px; }
.levels-help { margin: 0 0 var(--space-2); color: var(--ink-soft); font-size: .88rem; }
.levels-choice { display: flex; flex-direction: column; gap: 2px; }
.levels-choice label {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
}
.levels-choice label:hover { background: var(--paper); }
/* Le cran CECR est une précision, pas une étiquette : il ne doit pas peser
   autant que le nom du niveau, sinon on lit « B2 » avant « Moyen ». */
.levels-choice .cefr {
  margin-left: auto; color: var(--ink-soft); font-size: .8rem;
  font-variant-numeric: tabular-nums;
}
.levels-status { margin: var(--space-2) 0 0; min-height: 1.2em; font-size: .85rem; color: var(--ink-soft); }
.levels-status.err { color: var(--err); }

/* Sélecteur de catégories (§7.6) — page Réglages */
.groups-choice { display: flex; flex-direction: column; gap: 2px; }
.groups-choice label {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
}
.groups-choice label:hover { background: var(--paper); }

/* Hero / marketing */
.hero { text-align: center; padding: var(--space-7) var(--space-4); }
.hero h1 { font-family: var(--font-hero); font-size: clamp(2.2rem, 6vw, 3.2rem); }
.pill { display: inline-block; padding: 3px 14px; border-radius: 999px; background: var(--brand); color: var(--brand-ink); font-size: .82rem; font-weight: 700; }

/* Pricing — section en bas de l'accueil (la nav pointe sur l'ancre). */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
.pricing-faq { max-width: 560px; margin: var(--space-5) auto 0; text-align: left; }
.pricing-faq summary { cursor: pointer; font-weight: 600; }
/* Les forfaits (1, 3, 6 et 12 mois) sur UNE ligne dès que la place le permet ; trois par ligne sur un écran moyen, deux sur un écran étroit, un seul sur un très petit. */
/* Plus large que la colonne de texte (760 px) : les cartes ont besoin de place ; centré sur la colonne. */
/* Flex et non grille (2026-10-20) : la grille gardait cinq colonnes après le retrait du forfait de 2 mois, donc quatre cartes collées à gauche et une colonne vide à droite.
   Ici, quel que soit le nombre de forfaits, chaque rangée est centrée, la dernière rangée incomplète aussi. */
.plans { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3);
  width: min(1080px, calc(100vw - 2 * var(--space-4))); position: relative; left: 50%; transform: translateX(-50%); }
.plans .plan { padding: var(--space-3); flex: 0 1 calc((100% - 3 * var(--space-3)) / 4); max-width: 250px; min-width: 0; }
.plans .plan .price { font-size: 1.7rem; }
@media (max-width: 900px) { .plans .plan { flex-basis: calc((100% - 2 * var(--space-3)) / 3); } }
@media (max-width: 640px) { .plans .plan { flex-basis: calc((100% - var(--space-3)) / 2); } }
@media (max-width: 340px) { .plans .plan { flex-basis: 100%; max-width: none; } }
.plan { position: relative; }
/* Plus d'encadré vert permanent sur le forfait recommandé (2026-10-02) : le vert ne vient qu'au survol. */
/* « Le moins cher par mois » : le même cadre que la tuile recommandée, en plus fin. */
.plan.cheapest { border-color: var(--brand-2); border-width: 2px; border-style: dashed; }
/* Au survol (ou au clavier), le forfait prend l'encadré vert, sans décalage : l'épaisseur vient d'une ombre. */
a.plan { transition: border-color .15s ease, box-shadow .15s ease; text-decoration: none; }
a.plan:hover, a.plan:focus-visible { border-color: var(--brand); border-style: solid; box-shadow: 0 0 0 1px var(--brand); }
.plan .badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); white-space: nowrap; }
.plan .price { font-size: 2.2rem; font-weight: 800; font-family: var(--font-hero); }
.plan .per { color: var(--ink-soft); font-size: .9rem; }
.plan-cta { display: block; margin-top: var(--space-3); font-weight: 600; color: var(--brand); }

/* Récapitulatif de commande (§3.9, checkout.html) */
.order-title { margin-top: var(--space-6); }
.order-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.order-row + .order-row { margin-top: var(--space-2); }
.order-total-row { font-weight: 700; font-size: 1.15rem; border-top: 1px solid var(--line); padding-top: var(--space-3); margin-top: var(--space-3); }
.order-fine { font-size: .86rem; margin-top: var(--space-2); }
.order-notes { margin: var(--space-4) 0; padding-left: 1.2em; color: var(--ink-soft); font-size: .92rem; }
.order-notes li + li { margin-top: var(--space-2); }
/* La correction : une explication en une phrase dense se lit mal d'un bloc,
   on l'affiche donc en puces (§ renderExplanation, study.js). */
.explanation { margin: 0 0 var(--space-4); color: var(--ink); }
.explanation-title { margin: 0 0 var(--space-2); font-weight: 600; color: var(--ink-soft); }
.explanation-list { margin: 0; padding-left: 1.4em; list-style: none; }
.explanation-list li { position: relative; }
.explanation-list li + li { margin-top: var(--space-2); }
.explanation-list li::before { content: "→"; position: absolute; left: -1.4em; color: var(--ink-soft); }
.consent { display: flex; gap: var(--space-2); align-items: flex-start; cursor: pointer; }
.consent input { width: auto; margin: 4px 0 0; }
.checkout-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-top: var(--space-4); }

/* Petite fenêtre de conversion de devises (§3.9) — indicatif, paiement en EUR */
.fx-link { background: none; border: none; padding: 0; margin: 0; font: inherit;
  color: var(--brand); text-decoration: underline; cursor: pointer; }
.fx-link:hover { color: var(--brand-2); }
.fx-overlay { position: fixed; inset: 0; z-index: 1000; display: flex;
  align-items: center; justify-content: center; padding: var(--space-4);
  background: rgba(20,22,30,.5); }
.fx-modal { background: var(--card); color: var(--ink); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); width: 100%;
  max-width: 460px; max-height: 85vh; overflow-y: auto; padding: var(--space-5); }
.fx-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.fx-title { margin: 0; font-size: 1.25rem; }
.fx-close { background: none; border: none; font-size: 1.6rem; line-height: 1;
  color: var(--ink-soft); cursor: pointer; padding: 0 4px; }
.fx-close:hover { color: var(--ink); }
.fx-loading { color: var(--ink-soft); margin: var(--space-4) 0 0; }
.fx-list { list-style: none; margin: var(--space-4) 0 0; padding: 0; }
.fx-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--space-3);
  padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
.fx-row:last-child { border-bottom: none; }
.fx-row-label { flex: 1 1 100%; color: var(--ink-soft); font-size: .9rem; }
.fx-row-base { font-weight: 700; }
.fx-row-conv { color: var(--ink-soft); }
.fx-note { margin: var(--space-4) 0 0; color: var(--ink-soft); font-size: .85rem; }
.fx-unavailable { margin: var(--space-4) 0 0; }

/* OAuth buttons */
.oauth-btn { position: relative; gap: 10px; }
.oauth-btn .soon { position:absolute; right:12px; font-size:.72rem; color:var(--ink-soft); }
.oauth-logo { flex: 0 0 auto; }

/* Study screen (§10.4, §10.5) */
.study-top { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4); border-bottom: 1px solid var(--line); }
.study-top a { font-size: 1.05rem; }
.study-top-brand { display: flex; align-items: center; gap: 6px; font-family: var(--font-hero); font-weight: 700; color: var(--brand); }
.study-top-brand img { width: 22px; height: 22px; border-radius: 6px; }
.study-wrap { max-width: 680px; margin: 0 auto; padding: var(--space-6) var(--space-4); min-height: calc(100dvh - 62px); display: flex; flex-direction: column; justify-content: center; }
.prompt { font-size: 1.8rem; text-align: center; margin-bottom: var(--space-6); line-height: 1.35; }
.prompt b { font-family: var(--font-hero); color: var(--brand); }
/* Le trou d'une phrase trouée : la ligne dorée seule, sans tirets bas. Le span
   est vide, d'où inline-block + une largeur explicite — sans quoi il n'aurait
   ni hauteur de ligne ni bordure visible. */
.blank { display: inline-block; width: 4.5em; height: 1em; vertical-align: baseline; border-bottom: 3px solid var(--gold); }
.options { display: grid; gap: var(--space-3); }
.option {
  display: flex; align-items: center; gap: var(--space-4); text-align: left;
  min-height: 64px; padding: var(--space-4) var(--space-5); border: 2px solid var(--line);
  border-radius: var(--radius); background: var(--card); color: var(--ink);
  font: inherit; font-size: 1.22rem; cursor: pointer;
  transition: border-color .12s ease, background .12s ease, transform .08s ease;
}
.option:hover { border-color: var(--brand); transform: translateY(-1px); }
.option:disabled { cursor: default; transform: none; }
/* Lettered A B C D badge */
.option .key {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%; font-family: var(--font-hero);
  font-weight: 700; font-size: 1.25rem; background: color-mix(in srgb, var(--brand) 12%, var(--card));
  color: var(--brand); border: 2px solid color-mix(in srgb, var(--brand) 30%, var(--card));
}
.option .opt-text { flex: 1; }
.option.selected { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 8%, var(--card)); }
.option.correct { border-color: var(--ok); background: var(--ok-bg); }
.option.correct .key { background: var(--ok); color: #fff; border-color: var(--ok); }
.option.wrong { border-color: var(--err); background: var(--err-bg); }
.option.wrong .key { background: var(--err); color: #fff; border-color: var(--err); }
.option .mark { margin-left: auto; font-weight: 800; font-size: 1.3rem; }

/* Correction (§3.2b, §10.5) — the signature moment */
.correction { margin-top: var(--space-2); }  /* 24 px (une ligne) de moins : le bouton « Continuer » tient sans défilement */
.verdict { display: flex; align-items: center; justify-content: center; gap: var(--space-2); font-weight: 700; font-size: 1.25rem; }
.verdict.ok { color: var(--ok); }
.verdict.err { color: var(--err); }
.hero-word { font-family: var(--font-hero); font-size: 2.8rem; font-weight: 700; text-align: center; margin: var(--space-4) 0; position: relative; display: inline-block; }
.hero-word::after {
  content: ""; position: absolute; left: 0; bottom: -4px; height: 5px; width: 100%;
  background: var(--gold); border-radius: 3px; transform: scaleX(0); transform-origin: left;
  animation: underline .5s ease forwards;
}
@keyframes underline { to { transform: scaleX(1); } }
mark.lex { background: none; color: var(--brand); font-weight: 700; border-bottom: 3px solid var(--gold); }
.example { padding: var(--space-4); background: var(--paper); border-radius: var(--radius-sm); border-left: 4px solid var(--gold); font-size: 1.1rem; }
.example + .example { margin-top: var(--space-3); }

/* Polysémie (§3.2) — les autres sens de la même écriture, à la correction.
   Volontairement discret : c'est un complément, pas la réponse. */
.other-senses { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.other-senses-title { font-size: .95rem; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; margin: 0 0 var(--space-3); }
.other-senses dl { margin: 0; display: grid; gap: var(--space-3); }
.other-senses dt { font-weight: 700; color: var(--brand); }
.other-senses dd { margin: 2px 0 0; color: var(--ink-soft); }
/* Le « pourquoi » de l'écran vide (§5.3) — explication + sorties. Encadré
   discret : c'est un complément au message principal, pas un avertissement. */
.empty-why { margin-top: var(--space-4); padding: var(--space-4); background: var(--paper); border-radius: var(--radius-sm); text-align: left; font-size: .95rem; color: var(--ink-soft); }
.empty-why p { margin: 0; }
.empty-why-actions { margin-top: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
.empty-why-actions a { font-weight: 600; }

/* Case « écarter ce mot » à la correction (§5.7) — discrète : c'est une sortie
   de secours, pas l'action attendue. Zone de clic généreuse (label entier). */
.setaside { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-5); padding: var(--space-3); border-radius: var(--radius-sm); color: var(--ink-soft); cursor: pointer; }
.setaside:hover { background: var(--paper); }
.setaside input { width: 20px; height: 20px; flex: none; accent-color: var(--brand); cursor: pointer; }

/* L'étiquette de sens dans la liste des mots — accessoire, jamais dominante. */
.sense-label { color: var(--ink-soft); font-weight: 400; font-size: .92em; }

/* Score */
.score-big { font-family: var(--font-hero); font-size: 4rem; font-weight: 800; text-align: center; color: var(--brand); }
.by-type { display: grid; gap: var(--space-2); }
.by-type .row { display: flex; justify-content: space-between; padding: var(--space-3) 0; border-bottom: 1px solid var(--line); font-size: 1.1rem; }

/* Word list (§7.4) — compact grid, no definitions, checkboxes.
 * 4 columns on wide screens, degrading to 1 on mobile. */
.wordgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); }
@media (max-width: 1024px) { .wordgrid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 800px) { .wordgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .wordgrid { grid-template-columns: 1fr; } }
.pager { display: flex; gap: var(--space-3); justify-content: center; margin-top: var(--space-4); }
.wordrow { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); }
.wordrow input[type=checkbox] { width: 20px; height: 20px; flex: 0 0 auto; }
.wordrow .cb-spacer { width: 20px; flex: 0 0 auto; }
.wordrow-static { opacity: .72; cursor: default; }
.wordrow .lemma { font-weight: 600; }
.wordrow .meta { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.state-chip { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .76rem; font-weight: 700; white-space: nowrap; }
.state-maitrise { background: var(--ok-bg); color: var(--ok); }
.state-acquis { background: color-mix(in srgb, var(--gold) 22%, var(--card)); color: var(--gold); }
.state-en_cours { background: color-mix(in srgb, var(--brand) 14%, var(--card)); color: var(--brand); }
.state-nouveau { background: var(--paper); color: var(--ink-soft); }
.state-ecarte { background: var(--paper); color: var(--ink-soft); }

/* Sticky batch action bar */
.actionbar { position: sticky; bottom: 0; background: var(--card); border-top: 1px solid var(--line); padding: var(--space-3) var(--space-4); display: flex; gap: var(--space-3); align-items: center; z-index: 15; margin-top: var(--space-4); }

/* Accueil du quiz — écran animé avant la première question. Le décor
 * (mots flottants) vit dans un calque absolu derrière le contenu ; tout le
 * reste apparaît en cascade (titre lettre à lettre, sous-titre, bouton qui
 * respire). Version prefers-reduced-motion : tout visible, rien ne bouge. */
.study-intro { position: relative; text-align: center; padding: var(--space-7) var(--space-4); overflow: hidden; }
.study-intro > :not(.intro-words) { position: relative; z-index: 1; }
.intro-title { font-family: var(--font-hero); font-size: clamp(2.3rem, 7vw, 3.6rem); font-weight: 800; color: var(--brand); line-height: 1.12; margin: 0 0 var(--space-4); }
.intro-title .mot { display: inline-block; white-space: nowrap; }
.intro-title .ch { display: inline-block; opacity: 0; transform: translateY(26px) rotate(5deg); animation: intro-pop .5s cubic-bezier(.2, .7, .3, 1.25) forwards; animation-delay: calc(var(--i) * 40ms); }
@keyframes intro-pop { to { opacity: 1; transform: none; } }
.intro-sub { color: var(--ink-soft); font-size: 1.12rem; max-width: 32rem; margin: 0 auto var(--space-6); opacity: 0; animation: intro-fade .6s ease .85s forwards; }
.intro-start { font-size: 1.2rem; padding: 14px 36px; border-radius: 999px; opacity: 0;
  animation: intro-fade .5s ease 1.1s forwards, intro-pulse 2.4s ease-in-out 1.9s infinite; }
.intro-start:hover { transform: scale(1.05); }
@keyframes intro-fade { to { opacity: 1; } }
@keyframes intro-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 40%, transparent); }
  50% { transform: scale(1.04); box-shadow: 0 0 0 14px transparent; }
}
.intro-hint { font-size: .88rem; margin: var(--space-5) 0 0; opacity: 0; animation: intro-fade .6s ease 1.5s forwards; }
.score-next { align-items: center; }
.score-new-only-check { display: flex; align-items: center; justify-content: center; gap: .5em; font-size: .92rem; color: var(--ink-soft); cursor: pointer; }
.intro-new-only-check { display: flex; align-items: center; justify-content: center; gap: .5em; margin: var(--space-4) auto 0; width: fit-content; font-size: .92rem; color: var(--ink-soft); cursor: pointer; opacity: 0; animation: intro-fade .5s ease 1.3s forwards; }
.intro-words { position: absolute; inset: 0; pointer-events: none; }
.intro-words span { position: absolute; bottom: -2.2em; font-family: var(--font-hero); font-style: italic; color: var(--brand); opacity: 0; animation-name: intro-drift; animation-timing-function: linear; animation-iteration-count: infinite; }
@keyframes intro-drift {
  0% { transform: translateY(0) rotate(-3deg); opacity: 0; }
  12% { opacity: .16; }
  80% { opacity: .1; }
  100% { transform: translateY(-52vh) rotate(3deg); opacity: 0; }
}

/* Counter */
.counter { font-family: var(--font-hero); font-size: 3rem; font-weight: 800; color: var(--brand); }

/* Banners */
.banner { padding: var(--space-3) var(--space-4); background: color-mix(in srgb, var(--gold) 16%, var(--card)); border-radius: var(--radius-sm); }
.toast { position: fixed; bottom: var(--space-5); left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--paper); padding: var(--space-3) var(--space-5); border-radius: 999px; box-shadow: var(--shadow); z-index: 50; }

/* Confirmation/notice « propres » (élément <dialog> natif) — remplacent window.confirm()/alert() (§ app.js) */
.confirm-dialog { border: none; border-radius: var(--radius); padding: var(--space-5); max-width: 420px; width: calc(100% - var(--space-6)); background: var(--card); color: var(--ink); box-shadow: var(--shadow); }
.confirm-dialog::backdrop { background: rgb(0 0 0 / 45%); }
.confirm-message { margin: 0 0 var(--space-5); white-space: pre-line; line-height: 1.5; }
.confirm-actions { display: flex; justify-content: flex-end; gap: var(--space-3); margin: 0; }
.error-text { color: var(--err); font-weight: 600; }
.ok-text { color: var(--ok); font-weight: 600; }
footer.legal { padding: var(--space-5); text-align: center; color: var(--ink-soft); font-size: .9rem; border-top: 1px solid var(--line); }

/* Mobile bottom nav (§10.4) */
@media (max-width: 640px) {
  .appbar nav.main-dests { position: fixed; bottom: 0; left: 0; right: 0; top: auto;
    justify-content: space-around; background: var(--card); border-top: 1px solid var(--line);
    padding: var(--space-2); z-index: 30; }
  .appbar nav.main-dests a { font-size: .74rem; text-align: center; line-height: 1.15; flex: 1; }
  body.has-bottomnav { padding-bottom: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .hero-word::after { transform: scaleX(1); }
  /* L'accueil du quiz apparaît par animation : sans elle, forcer l'état final
     (sinon l'écran resterait vide, opacité 0 pour toujours). */
  .intro-title .ch, .intro-sub, .intro-start, .intro-hint, .intro-new-only-check { opacity: 1; transform: none; }
  .intro-words { display: none; }
}

/* ==========================================================================
   Admin console (§9c.8) — hidden, password-gated back office
   ========================================================================== */
.banner.ok  { background: var(--ok-bg);  color: var(--ok);  }
.banner.err { background: var(--err-bg); color: var(--err); }
.banner.warn { background: color-mix(in srgb, var(--gold) 22%, var(--card)); }
/* Le bandeau des heures offertes (partials/compensations.html) : pleine largeur, sous la barre du haut. */
.banner.compensation { border-radius: 0; padding: var(--space-3) 0; }
.compensation-in p { margin: 0 0 var(--space-2); }
.compensation-titre { font-size: 1.05rem; margin: 0 0 var(--space-2); }
.compensation-motif { font-style: italic; opacity: .85; }
.compensation-ok { margin-top: var(--space-2); }
.btn-danger { background: var(--err); color: #fff; border-color: var(--err); }

.row { display: flex; flex-wrap: wrap; }

.appbar.admin-bar { border-bottom: 2px solid var(--brand); }
.admin .section-title { margin-top: var(--space-6); font-size: 1.15rem; color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: .04em; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space-3); }
.stat-tile { padding: var(--space-4); text-align: left; }
.stat-value { font-family: var(--font-hero); font-size: 2rem; font-weight: 700; line-height: 1.1; }

.admin-table { width: 100%; border-collapse: collapse; font-size: .96rem; }
.admin-table th { text-align: left; color: var(--ink-soft); font-weight: 600;
  padding: 8px 10px; border-bottom: 2px solid var(--line); white-space: nowrap; }
.admin-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.admin-table tr:last-child td { border-bottom: none; }

.admin-cols { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-4);
  align-items: start; }
@media (max-width: 860px) { .admin-cols { grid-template-columns: 1fr; } }

.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
.kv dt { color: var(--ink-soft); }
.kv dd { margin: 0; }

.badge-status { display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: .82rem; font-weight: 700; background: var(--line); color: var(--ink); }
.badge-status.active { background: var(--ok-bg); color: var(--ok); }
.badge-status.suspended { background: var(--err-bg); color: var(--err); }
.badge-status.pending_deletion { background: color-mix(in srgb, var(--gold) 22%, var(--card)); color: var(--gold); }

.danger-zone { border-color: color-mix(in srgb, var(--err) 45%, var(--line)); }

.empty-emoji { font-size: 3.2rem; line-height: 1; }
#empty h2 { max-width: 30ch; margin-left: auto; margin-right: auto; }

/* Split hero with the reader illustration on the left (§10.3) */
.hero-split { display: grid; grid-template-columns: minmax(260px, 420px) 1fr;
  gap: var(--space-6); align-items: center; text-align: left;
  max-width: var(--maxw); margin: 0 auto; }
.hero-split .hero-art img { width: 100%; height: auto; display: block;
  filter: drop-shadow(0 18px 36px rgba(20,40,36,.18)); }
.hero-split h1 { margin: 10px 0 6px; }
.hero-cta { margin-top: var(--space-4); }
@media (max-width: 760px) {
  .hero-split { grid-template-columns: 1fr; text-align: center; }
  .hero-split .hero-copy { display: flex; flex-direction: column; align-items: center; }
  .hero-split .hero-art { max-width: 300px; margin: 0 auto; order: -1; }
}

/* Prononciation API (IPA) sur l'écran de correction */
.ipa { color: var(--ink-soft); font-size: 1.15rem; letter-spacing: .02em; margin-top: 4px; }

/* État « connu » (mot marqué « je connais ») + légende de l'écran de gestion */
.state-connu { background: color-mix(in srgb, var(--ok) 16%, var(--card)); color: var(--ok); }
.legend { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* Encart d'aide « Que signifient ces statuts ? » */
.states-help { padding: var(--space-3) var(--space-4); margin-bottom: var(--space-3); }
.states-help > summary { cursor: pointer; font-weight: 600; color: var(--brand); }
.states-help[open] > summary { margin-bottom: var(--space-3); }
.states-dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 14px; margin: 0 0 var(--space-3); align-items: start; }
.states-dl dt { white-space: nowrap; }
.states-dl dd { margin: 0; color: var(--ink-soft); }
@media (max-width: 520px) { .states-dl { grid-template-columns: 1fr; gap: 2px 0; } .states-dl dd { margin: 0 0 8px; } }

/* ==========================================================================
   Landing page publique (accueil) — bandeaux pleine largeur, style Duo/Busuu
   ========================================================================== */
.landing-inner { max-width: 1080px; margin: 0 auto; padding: 0 var(--space-4); }

.landing-hero { padding: var(--space-8) 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 12%, var(--paper)) 0%, var(--paper) 100%); }
.landing-hero-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--space-7); align-items: center; }
.landing-hero-grid .art { text-align: center; }
.landing-hero-grid .art img { width: 100%; max-width: 440px; height: auto;
  filter: drop-shadow(0 18px 40px rgba(20,40,36,.20)); }
.landing-hero-copy h1 { font-family: var(--font-hero); font-size: clamp(2.1rem, 5vw, 3.2rem);
  line-height: 1.08; margin: var(--space-3) 0; }
.landing-hero-copy .lead { font-size: 1.2rem; color: var(--ink-soft); max-width: 34ch; margin: 0; }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: var(--space-5); }
.reassure { list-style: none; padding: 0; margin: var(--space-4) 0 0; display: flex; gap: 18px;
  flex-wrap: wrap; color: var(--ink-soft); font-size: .95rem; }
.reassure b { color: var(--ok); font-weight: 800; }

.feature-band { padding: var(--space-8) 0; }
.steps-band { padding: var(--space-8) 0; background: color-mix(in srgb, var(--brand) 6%, var(--paper)); }
.band-title { text-align: center; font-family: var(--font-hero); font-size: clamp(1.6rem, 4vw, 2.3rem); margin: 0 0 var(--space-3); }
.band-sub { text-align: center; color: var(--ink-soft); max-width: 640px; margin: 0 auto var(--space-6); font-size: 1.08rem; }

.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); }
.feature { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-5); }
.feature-ico { font-size: 2.4rem; line-height: 1; margin-bottom: var(--space-2); }
.feature h3 { margin: 0 0 var(--space-2); }

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-5); margin-bottom: var(--space-6); }
.step { text-align: center; }
.step-n { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border-radius: 999px; background: var(--brand); color: var(--brand-ink); font-weight: 800;
  font-size: 1.3rem; font-family: var(--font-hero); margin-bottom: var(--space-2); }

.cta-band { padding: var(--space-8) 0; margin-top: var(--space-7); background: var(--brand); color: var(--brand-ink); }
.cta-band h2 { font-family: var(--font-hero); font-size: clamp(1.7rem, 4vw, 2.4rem); margin: 0 0 var(--space-2); color: var(--brand-ink); }
.cta-band p { color: color-mix(in srgb, var(--brand-ink) 85%, transparent); margin: 0 0 var(--space-5); }
.cta-invert { background: var(--brand-ink); color: var(--brand); border-color: var(--brand-ink); font-weight: 700; }
.cta-fineprint { margin-top: var(--space-3) !important; font-size: .9rem; }

@media (max-width: 820px) {
  .landing-hero-grid { grid-template-columns: 1fr; text-align: center; }
  .landing-hero-grid .art { max-width: 300px; margin: 0 auto; }
  .landing-hero-copy .lead { margin: 0 auto; }
  .cta-row, .reassure { justify-content: center; }
}

/* Bannière « mode ciblé » pendant le quiz */
.focus-banner { background: color-mix(in srgb, var(--gold) 20%, var(--card)); margin: 0 auto var(--space-4); max-width: 620px; }

/* Utility classes (§9b.9): the CSP forbids inline style="…" attributes, so
 * every one-off layout tweak that used to live in a template attribute
 * lives here instead, under its exact old value — no visual change, just
 * moved. tests/test_csp_templates.py keeps this true. */
.u-align-self-center { align-self: center; }
.u-danger-outline { border-color: var(--err); color: var(--err); }
.u-text-err { color: var(--err); }
.u-flex-center-gap6 { display: flex; align-items: center; gap: 6px; }
.u-flex-center-gap10 { display: flex; gap: 10px; align-items: center; }
.u-flex-wrap-gap8 { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.u-flex-1 { flex: 1; }
.width-150 { width: 160px; }                 /* un champ date (le sélecteur de date du navigateur) */
.u-flex-1-minw180 { flex: 1; min-width: 180px; }
.u-flex-1-minw220 { flex: 1; min-width: 220px; }
.u-fs-78 { font-size: .78rem; }
.u-fs-85 { font-size: .85rem; }
.u-lead { font-size: .92rem; max-width: 440px; margin-left: auto; margin-right: auto; }
.u-fs-90 { font-size: .9rem; }
.u-fs-90-mt6 { font-size: .9rem; margin-top: 6px; }
.u-score-highlight { font-size: 1.25rem; font-weight: 600; color: var(--brand); }
.u-gap10 { gap: 10px; }
.u-filter-row { gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 16px; }
/* Les champs « recherche » et « date » des filtres ressemblent aux autres champs (la règle de base ne les couvre pas). */
.u-filter-row > label { margin-bottom: 0; }
.u-filter-row input[type=search], .u-filter-row input[type=date] { width: 100%; min-height: 46px; padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); color: var(--ink); font: inherit; font-size: 16px; }
.u-mb-12 { margin-bottom: 12px; }
.u-mb-4 { margin-bottom: 4px; }
.u-ml-8 { margin-left: 8px; }
.u-mt-8 { margin-top: 8px; }
.u-mb-8 { margin-bottom: 8px; }
.u-mt-12 { margin-top: 12px; }
.u-mt-12vh { margin-top: 12vh; }
.u-mt-16 { margin-top: 16px; }
.u-mt-24 { margin-top: 24px; }
.u-m-0 { margin: 0; }
.u-my-12 { margin: 12px 0; }
.u-my-16 { margin: 16px 0; }
.u-mt-8-0 { margin: 8px 0 0; }
.u-mw-420 { max-width: 420px; }
.u-mw-460 { max-width: 460px; }
.u-overflow-x-auto { overflow-x: auto; }
.u-pt-24 { padding-top: 24px; }
.u-pt-32 { padding-top: 32px; }
.u-panel-420 { text-align: left; max-width: 420px; margin: 0 auto; }
.u-w-64 { width: 64px; }

/* Offre B2B « organisations » : fiche imprimable des comptes créés (mots de passe temporaires, montrés une seule fois) et code d'organisation. */
.org-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.1rem; letter-spacing: .06em; }
.print-only { display: none; }
@media print {
  .appbar, footer.legal, .no-print { display: none !important; }
  .print-only { display: block; }
  body.org { background: #fff; }
  body.org .card { box-shadow: none; border: 0; }
}

/* Connexion / création de compte : deux écrans distincts (onglets + couleur du panneau). */
.auth-tabs { display: flex; margin: 0 0 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.auth-tab { flex: 1; text-align: center; padding: 11px 8px; font-weight: 700; text-decoration: none; color: var(--ink); background: var(--card); }
.auth-tab:hover { background: var(--auth-hover); }
.auth-tab.active { background: var(--auth-main); color: #fff; }
.auth-tab-signup.active { background: var(--auth-alt); }
.auth-panel[hidden] { display: none; }
.auth-panel-login { border-top: 5px solid var(--auth-main); border-radius: var(--radius-sm); }
.auth-panel-signup { border-top: 5px solid var(--auth-alt); border-radius: var(--radius-sm); background: var(--auth-alt-soft); padding: 12px; }
.auth-title { margin: 0 0 8px; font-size: 1.15rem; }
:root { --auth-main: var(--brand); --auth-alt: var(--brand); --auth-alt-soft: rgba(31, 122, 109, .1); --auth-hover: rgba(31, 122, 109, .08); }

/* --- Console : listes paginées et filtrées (alignées sur Dicteo) --- */
.pager { flex-wrap: wrap; align-items: center; margin-bottom: var(--space-4); }
.pager .pg {
  min-width: 40px; height: 40px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card);
  color: var(--ink); font-weight: 700; text-decoration: none;
}
.pager .pg.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pager .pg.disabled { opacity: .4; }
.pager .pg.gap { border: 0; background: none; min-width: 20px; }
.btn-ghost { background: transparent; border-color: transparent; }
.pill.amber { background: color-mix(in srgb, var(--gold) 22%, var(--card)); color: var(--ink); }
.pill.green { background: var(--ok-bg); color: var(--ok); }
.table-scroll { overflow-x: auto; }
.has-help { cursor: help; text-decoration: underline dotted; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.admin-table th[data-tip]::after { text-transform: none; letter-spacing: 0; font-weight: 400; text-align: left; }
.admin-table th[data-tip]:first-child::after { left: 0; transform: none; }
.admin-table th[data-tip]:last-child::after { left: auto; right: 0; transform: none; }
.admin-table td { overflow-wrap: break-word; }
.admin-table .pill { white-space: nowrap; text-align: center; }
.filtres-admin { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end; margin-bottom: var(--space-4); }
.filtres-admin .field { margin: 0; min-width: 0; }
.filtres-admin .field + .field { margin-top: 0; }
.filtres-admin label { display: block; font-size: .82rem; font-weight: 600; margin-bottom: 2px; }
.filtres-admin input, .filtres-admin select { width: auto; max-width: 100%; }
.filtres-admin input[type=search], .filtres-admin input[type=text] { min-width: 12rem; }
.filtres-admin input[type=number] { width: 7rem; }
.filtres-admin input[type=date] { width: 11rem; }
.filtres-admin .btn { align-self: flex-end; }
.legende dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: var(--space-3) 0; }
.legende dt { font-weight: 600; }
.legende dd { margin: 0; color: var(--ink-soft); }
.legende summary { cursor: pointer; }

/* --- Barre de la console : compacte, sur une seule ligne quand l'écran le permet --- */
.appbar.admin-bar { flex-wrap: wrap; gap: var(--space-2) var(--space-3); padding: var(--space-2) var(--space-4); font-size: .85rem; }
.appbar.admin-bar .brand { font-size: .95rem; }
.appbar.admin-bar nav.main-dests { flex: 1 1 520px; flex-wrap: wrap; gap: 2px 10px; }
.appbar.admin-bar nav.main-dests a { font-size: .82rem; padding: 2px 1px; }
.appbar.admin-bar .btn { min-height: 0; padding: 4px 10px; font-size: .85rem; }
@media (max-width: 640px) {
  .appbar.admin-bar nav.main-dests { position: static; border-top: 0; padding: 0; justify-content: flex-start; background: none; }
  .appbar.admin-bar nav.main-dests a { flex: 0 1 auto; font-size: .82rem; }
}
.admin .stat-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: var(--space-2); }
.admin .stat-tile { padding: var(--space-3); }
.admin .stat-value { font-size: 1.45rem; }
.admin .stat-tile .muted { font-size: .85rem; }
.admin h1 .pill { font-size: .7rem; vertical-align: middle; margin-left: var(--space-2); }

/* --- Organisations (alignées sur Dicteo) --- */
[data-tip][data-tip-quick]:hover::after, [data-tip][data-tip-quick]:hover::before { animation-delay: .35s; }
[data-tip][data-tip-pos="left"]::after {
  bottom: auto; top: 50%; left: auto; right: calc(100% + 10px); transform: translateY(-50%);
  max-width: min(240px, calc(100vw - 280px)); text-align: left;
}
[data-tip][data-tip-pos="left"]::before {
  bottom: auto; top: 50%; left: auto; right: calc(100% + 4px); transform: translateY(-50%);
  border: 6px solid transparent; border-right-width: 0; border-left-color: var(--ink);
}
.menu-ico { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn-danger { background: var(--err); color: #fff; border-color: var(--err); }
.btn-icone { min-height: 34px; width: 38px; padding: 0; }
.btn-icone .menu-ico { color: currentColor; }
.btn-icone.btn-danger .menu-ico { color: #fff; }
.inline-form { display: inline-block; margin: 0 var(--space-1) var(--space-1) 0; }
.bloc-separe { border-top: 1px solid var(--line); padding-top: var(--space-4); margin-top: var(--space-4); }
.bloc-separe h4 { margin: 0 0 var(--space-2); }
.mode-ajout { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); margin-top: var(--space-3); background: color-mix(in srgb, var(--paper) 60%, var(--card)); }
.mode-ajout h5 { margin: 0 0 var(--space-1); font-size: 1rem; }
.mode-ajout p { margin: 0 0 var(--space-2); }
/* La fiche ouverte dans son propre onglet (static/js/app.js) : une page simple, le titre visible, des cadres noirs comme à l'impression. */
.fiche-onglet { max-width: 900px; margin: 24px auto; padding: 0 16px; }
.fiche-onglet .print-only { display: block; }
.fiche-onglet .admin-table th, .fiche-onglet .admin-table td { border: 1px solid #000; padding: 8px 12px; }

/* --- Bouton « Connexion » de l'en-tête public : un clic mène à la connexion, la flèche ouvre un petit menu à quatre entrées --- */
.login-menu { display: flex; align-items: stretch; }
.login-menu .login-main { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.login-menu .login-caret { padding: 0 var(--space-3); border-top-left-radius: 0; border-bottom-left-radius: 0; border-left-color: rgba(255,255,255,.35); min-height: 46px; }
.login-menu .menu-panel { z-index: 20; }
.nav-links .login-menu .menu-panel a { font-weight: 500; }
@media (max-width: 640px) {
  .login-menu .login-main { padding: 0 var(--space-3); }
  .login-menu .login-caret { padding: 0 var(--space-2); }
}
/* Petits écrans : l'en-tête public ne déborde plus et la marque ne touche plus « Tarifs » (« Nous joindre » est déjà dans le pied de page). */
@media (max-width: 640px) {
  .nav { padding: var(--space-3); gap: var(--space-4); }
  .nav .brand { font-size: 1.2rem; flex: none; gap: 8px; }
  .nav-links { gap: var(--space-2); }
  .nav-links a:not(.btn) { white-space: nowrap; }
  .nav-links .nav-secondary { display: none; }
}
@media (max-width: 380px) {
  .nav-links a[href="/app/help"] { display: none; }
  .nav .brand { font-size: 1.1rem; }
  .login-menu .login-main { padding: 0 var(--space-2); }
}

/* Avertissement « verrouillage des majuscules » : une bulle à GAUCHE du champ de mot de passe (static/js/app.js). Sur écran étroit, il n'y a pas de place à gauche : elle passe au-dessus. */
.pw-caps-host { position: relative; }
.pw-caps {
  position: absolute; z-index: 40; right: calc(100% + 12px); top: 50%; transform: translateY(-50%); white-space: nowrap;
  padding: 6px 10px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--gold) 22%, var(--card)); color: var(--ink); border: 1px solid var(--gold);
  font-size: .85rem; font-weight: 600; box-shadow: var(--shadow); pointer-events: none;
}
.pw-caps::before { content: "\26A0\FE0E  "; color: color-mix(in srgb, var(--gold) 70%, var(--ink)); }
.pw-caps::after { content: ""; position: absolute; left: 100%; top: 50%; transform: translateY(-50%); border: 6px solid transparent; border-left-color: var(--gold); border-right-width: 0; }
.pw-caps[hidden] { display: none; }
@media (max-width: 760px) {
  .pw-caps { right: auto; left: 0; top: auto; bottom: calc(100% + 8px); transform: none; }
  .pw-caps::after { left: 16px; top: 100%; transform: none; border: 6px solid transparent; border-bottom-width: 0; border-top-color: var(--gold); }
}
.width-80 { width: 80px; }