/* ═══════════════════════════════════════════════════════════════
   Flashcards — feuille de style, ambiance « Cahier »
   Papier, encre, stabilo et post-it. Téléphone d'abord.
   ═══════════════════════════════════════════════════════════════ */

@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700;
  font-display: swap; src: url('/commun/fonts/instrument-sans.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Sans'; font-style: italic; font-weight: 400 700;
  font-display: swap; src: url('/commun/fonts/instrument-sans-italic.woff2') format('woff2'); }
@font-face { font-family: 'Caveat'; font-style: normal; font-weight: 400 700;
  font-display: swap; src: url('/commun/fonts/caveat.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 500;
  font-display: swap; src: url('/commun/fonts/jetbrains-mono.woff2') format('woff2'); }

:root {
  --bg:        #EDE8DC;   /* le bureau */
  --bg-2:      #E4DED0;
  --surface:   #FCFAF4;   /* la feuille */
  --surface-2: #F4F0E5;
  --text:      #1A1815;   /* l'encre */
  --muted:     #6E6A5F;
  --faint:     #98938A;
  --line:      #DFD8C6;

  --jaune:  #F5D65A;
  --menthe: #A8D8C0;
  --rose:   #F2B8C6;
  --bleu-postit: #A9C4E8;   /* relevé sur img-B-postits.png */
  --gris-postit: #6E6E6E;   /* le gris de l'écriture sur l'image */
  --marge:  #E3B4B0;
  --stabilo-vif: #F5D65A;

  --vert:  #2F7D5C;
  --rouge: #A33A3A;

  /* Papier froissé : plis en dégradés, taches d'encre très pâles, et un grain fin. */
  --pli-ombre:   rgba(26,24,21,.05);
  --pli-lumiere: rgba(255,255,255,.6);
  --tache:       rgba(38,58,120,.055);

  /* Le grain du papier : un bruit fractal en SVG, sans image à charger. */
  --grain: url("data:image/svg+xml;utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='90'%20height='90'%3E%3Cfilter%20id='g'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.9'%20numOctaves='3'%20seed='4'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3C/filter%3E%3Crect%20width='90'%20height='90'%20filter='url%28%23g%29'%20opacity='0.09'/%3E%3C/svg%3E");
  --grain-force: .07;
  --papier-ligne: #E4DECD;
  --papier:      #FFFFFF;
  --papier-bord: #E0D9C6;

  --ombre:   0 1px 2px rgba(40,34,20,.05), 0 6px 16px rgba(40,34,20,.06);
  --ombre-l: 0 2px 6px rgba(40,34,20,.10), 0 18px 40px rgba(40,34,20,.14);

  --r-s: 4px;
  --r-m: 10px;
  --r-l: 16px;

  --sans: 'Instrument Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --plume: 'Caveat', cursive;
  --barre: calc(64px + env(safe-area-inset-bottom));
}

html[data-theme="dark"] {
  --bg:        #111013;
  --bg-2:      #191719;
  --surface:   #1B1A1E;
  --surface-2: #232126;
  --text:      #F4F1E8;
  --muted:     #9B968B;
  --faint:     #7A756C;
  --line:      #2E2B31;
  --marge:     #4A3A38;
  /* Le soir, on garde le jaune du cahier : le vert fluo de la maquette
     nocturne est trop agressif sur le papier sombre. */
  --stabilo-vif: #F5D65A;
  --vert:  #6FC49B;
  --rouge: #E08585;
  --grain-force: .06;
  --pli-ombre:   rgba(0,0,0,.3);
  --pli-lumiere: rgba(255,255,255,.05);
  --tache:       rgba(126,156,224,.05);
  --papier-ligne: #262429;
  --papier:      #F4F1E8;
  --papier-bord: #4A4652;
  --ombre:   0 1px 2px rgba(0,0,0,.5), 0 6px 16px rgba(0,0,0,.4);
  --ombre-l: 0 2px 6px rgba(0,0,0,.55), 0 18px 40px rgba(0,0,0,.5);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

/* « clip » et non « hidden » : « hidden » fait du corps un conteneur de
   défilement, ce qui bloque le geste vertical sur iOS en mode application. */
html { overflow-x: clip; }
/* Le navigateur « ancre » le défilement quand la page change de hauteur : en
   passant d'un écran à l'autre, il croyait bien faire en nous laissant où nous
   étions, et l'on arrivait au milieu de la page suivante. On le lui interdit. */
body { overflow-anchor: none; }

body {
  margin: 0;
  /* Le fond va jusqu'en bas même quand le contenu est court : sans cela, c'est
     le navigateur qui peint la bande restante, et il le fait à sa façon. */
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  min-height: 100%;
}

h1 { font-size: 1.55rem; font-weight: 700; letter-spacing: -.02em; margin: 0; }
h2 { font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; margin: 0; }
h3 { font-size: .98rem; font-weight: 700; margin: 0; }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; }
/* Sur mobile, un double tap zoome par défaut, avec trois cents millisecondes
   d'attente avant chaque clic. « manipulation » supprime les deux. */
html { touch-action: manipulation; -webkit-text-size-adjust: 100%; }

.icon-btn {
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 50%;
  border: 0; background: var(--text); color: var(--surface);
  transition: transform .15s;
}
.icon-btn:active { transform: scale(.92); }

/* Plus de barre de titre : la page commence au bord haut de l'écran, sous
   l'encoche. Chaque écran porte son propre en-tête. */
main {
  padding: calc(14px + env(safe-area-inset-top)) 16px calc(var(--barre) + 24px);
  max-width: 720px; margin: 0 auto;
}
.view { display: none; }
.view.is-active { display: block; animation: monte .3s cubic-bezier(.2,.8,.3,1); }
/* La séance occupe l'écran, et la carte s'y tient au centre.
   On ne calcule plus la hauteur à la main — une soustraction se trompe dès que
   la barre du navigateur apparaît ou s'efface, et il restait du vide en bas
   qu'on découvrait en faisant défiler. La page est simplement haute comme
   l'écran, et chaque étage prend ce qui reste. */
@keyframes monte { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.view-head { display: flex; align-items: center; gap: 12px; margin: 14px 0 16px; }
.view-head h1 { margin-right: auto; }
.note { color: var(--muted); font-size: .86rem; margin: 10px 0 0; }
.note.center { text-align: center; }
.btn-filtre.est-actif { background: var(--jaune); border-color: var(--jaune); color: #1A1815; }
/* Une mention posée à la main sous l'aperçu, pas une note technique. */
.note.manuscrit { font-family: var(--plume); font-size: 1.15rem; color: var(--muted); margin-top: 6px; }
.empty {
  text-align: center; color: var(--muted); padding: 40px 18px;
  font-family: var(--plume); font-size: 1.15rem;
}

/* Les intitulés de section, en petites capitales espacées. */
.mono, .block-title, .field-label, .etiquette, .progress-text,
.stat-label, .postit-chiffres, .rung-label {
  font-family: var(--mono);
  letter-spacing: .13em; text-transform: uppercase;
}
.block { margin-bottom: 26px; }
.block-title { margin-bottom: 12px; font-size: .68rem; color: var(--faint); font-weight: 500; }
.titre-section { margin-top: 36px; }

/* ═══════════════ ACCUEIL — la feuille de cahier ═══════════════ */
.feuille {
  position: relative;
  margin: -4px -16px 0; padding: 18px 22px calc(var(--barre) + 20px) 44px;
  min-height: calc(100vh - 60px);
  min-height: calc(100dvh - 60px);
  background-color: var(--surface);
  background-image: repeating-linear-gradient(
    to bottom, transparent 0 31px, var(--papier-ligne) 31px 32px);
  background-position: 0 5px;
}
.feuille::before {          /* le filet de marge */
  content: ""; position: absolute; top: 0; bottom: 0; left: 30px;
  width: 1px; background: var(--marge); opacity: .75;
}
.feuille-tete { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
/* Un bandeau qui porte le chevron : le titre garde sa ligne en dessous. */
.feuille-tete .retour { width: 34px; height: 34px; font-size: 1.15rem; }
.feuille-tete .retour + .mono { flex: 1; }
.mono { font-size: .68rem; color: var(--muted); }
.feuille-tete .mono { flex: 1; }
.jeton {
  width: 38px; height: 38px; border-radius: 50%; border: 0; flex: 0 0 auto;
  background: var(--text); color: var(--surface);
  display: grid; place-items: center;
}
/* Même gabarit d'icône pour tous les boutons de thème. */
.jeton-theme svg { width: 19px; height: 19px; display: block; }

/* ── La carte qui résiste, sur l'accueil ──────────────────────── */
.carte-fragile {
  position: relative; display: flex; flex-direction: column; justify-content: space-between;
  gap: 12px; min-height: 158px; margin: 0 0 26px; padding: 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 8px 22px rgba(26,24,21,.1), 0 1px 2px rgba(26,24,21,.1);
  overflow: hidden; text-align: left; touch-action: pan-y;
  transition: transform .22s cubic-bezier(.2,.8,.3,1);
}
.carte-fragile.bascule { transform: rotateY(9deg) scale(.985); }
.fragile-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fragile-ident { display: flex; align-items: center; gap: 8px; min-width: 0; }
.fragile-pastille {
  flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%;
  background: var(--tint, var(--menthe));
}
.fragile-ident .mono {
  letter-spacing: .12em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fragile-sceau {
  flex: 0 0 auto; padding: 3px 7px; letter-spacing: .12em;
  background: var(--rose); color: #1A1815;
}
.fragile-sceau.est-reponse { background: var(--menthe); }
.fragile-corps { display: flex; align-items: center; gap: 12px; }
.fragile-texte {
  flex: 1; min-width: 0;
  margin: 0; font-size: 1.16rem; font-weight: 700; line-height: 1.35; letter-spacing: -.015em;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
/* L'image de la carte, en petit et sans insistance. */
.fragile-vignette {
  flex: 0 0 auto; width: 52px; height: 52px; object-fit: cover;
  border-radius: 10px; border: 1px solid var(--line); opacity: .92;
}
.fragile-pied { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
#fragile-geste { margin: 0; font-size: 1.05rem; color: var(--faint); }
/* Une flèche qui fait le tour : c'est le geste, dessiné. */
#carte-fragile {
  touch-action: pan-y;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

.fragile-tourner {
  display: grid; place-items: center; width: 30px; height: 30px; flex: none;
  border-radius: 50%; border: 1px solid var(--line); color: var(--muted);
  transition: transform .5s cubic-bezier(.4,.1,.2,1), color .2s, border-color .2s;
}
.fragile-tourner.est-retournee {
  transform: rotate(180deg); color: var(--text); border-color: var(--text);
}

/* ── Où en sont mes cartes ────────────────────────────────────── */
.jauge {
  display: flex; gap: 3px; height: 14px; margin: 0 0 14px;
  border-radius: 100px; overflow: hidden;
}
.jauge-part { display: block; min-width: 3px; }
.jauge-legende { display: flex; flex-direction: column; gap: 9px; }
.legende-ligne { display: flex; align-items: center; gap: 10px; }
.legende-point { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 3px; }
.legende-nom { flex: 1; min-width: 0; font-size: .92rem; }
.legende-pct { font-weight: 700; font-size: .92rem; }
.legende-nb { flex: 0 0 auto; width: 48px; text-align: right; color: var(--muted); }

.cadre-photo {
  position: relative; display: block; width: 100%; height: 168px;
  margin: 0 0 26px; padding: 0; overflow: hidden;
  border: 1.5px dashed color-mix(in srgb, var(--text) 26%, transparent);
  border-radius: 3px; background: color-mix(in srgb, var(--text) 3%, transparent);
}
.cadre-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cadre-vide {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px;
  color: var(--muted); font-size: .78rem; text-align: center; padding: 0 20px;
}
.cadre-defaire {
  position: absolute; top: 8px; right: 8px; z-index: 3;
  width: 28px; height: 28px; border-radius: 50%; border: 0;
  background: color-mix(in srgb, #1A1815 62%, transparent); color: #FCFAF4;
  font-size: .8rem; line-height: 1; display: grid; place-items: center;
}
.washi {                      /* le ruban de masquage, posé de travers */
  position: absolute; top: -9px; left: 50%; z-index: 2;
  width: 84px; height: 20px; margin-left: -42px;
  background: var(--jaune); opacity: .92; transform: rotate(-1.5deg);
}

.etiquette { margin: 0 0 9px; font-size: .68rem; color: var(--faint); }
.pensee {
  /* Interligne calé sur celui du papier : le texte s'assied sur les lignes. */
  margin: 0 0 12px; font-size: 1.42rem; font-weight: 700; line-height: 32px;
  letter-spacing: -.02em;
}
/* Le trait de stabilo : une bande de couleur derrière les mots. */
.pensee mark {
  background: linear-gradient(180deg,
    transparent 8%, var(--stabilo, var(--jaune)) 8%,
    var(--stabilo, var(--jaune)) 94%, transparent 94%);
  color: inherit; padding: 0 .12em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.pensee mark.menthe { --stabilo: var(--menthe); }
html[data-theme="dark"] .pensee mark { color: #1A1815; }
.manuscrit { margin: 0 0 24px; font-family: var(--plume); font-size: 1.22rem; color: var(--muted); }

.carte-encre {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  border: 0; border-radius: 14px; padding: 16px 16px 16px 20px;
  background: var(--text); color: var(--surface);
  box-shadow: var(--ombre-l); transition: transform .15s;
}
.carte-encre:active { transform: scale(.98); }
.carte-encre-texte { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.carte-encre strong { font-size: 1.06rem; font-weight: 700; }
.carte-encre small { font-size: .78rem; opacity: .66; }
.pilule {
  flex: 0 0 auto; background: var(--jaune); color: #1A1815;
  border-radius: 100px; padding: 10px 20px; font-weight: 700; font-size: .92rem;
  display: inline-flex; align-items: center; gap: 8px;
}
/* La flèche dit où mène le bouton, quel que soit son intitulé. */
.pilule::after { content: "→"; font-weight: 700; }
/* ── La courbe du jour, tracée au crayon ──────────────────────── */
.courbe-jour { display: flex; align-items: flex-start; gap: 12px; margin: 14px 0 2px; }
.courbe-jour svg { flex: 1; height: 44px; overflow: visible; }
.courbe-piste, .courbe-faite {
  fill: none; stroke-width: 2.5; stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.courbe-piste { stroke: var(--papier-ligne); }
/* « pathLength=100 » : le tiret se règle directement en pourcentage. */
.courbe-faite {
  stroke: var(--text); stroke-dasharray: 100;
  stroke-dashoffset: calc(100 - var(--pct, 0));
  transition: stroke-dashoffset .6s ease-out;
}
.courbe-pct {
  flex: 0 0 auto; font-family: var(--plume); font-size: 1.35rem; font-weight: 700;
  color: var(--text); line-height: 1; margin-top: 2px;
}

/* ── Bilan de fin de séance ───────────────────────────────────── */
.hero-card {
  background: var(--text); color: var(--surface);
  border-radius: var(--r-l); padding: 24px 22px; margin: 8px 0 18px; text-align: center;
}
.hero-card h1 { font-size: 1.7rem; }
.hero-card p { margin: 10px 0 0; font-family: var(--plume); font-size: 1.15rem; opacity: .85; }
.hero-eyebrow {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .16em;
  text-transform: uppercase; opacity: .6; margin: 0 0 8px !important;
  font-style: normal !important;
}

/* ── Les paquets, en post-it collés au ruban ──────────────────── */
.postits, .domain-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 12px; margin-top: 16px;   /* de la place pour le ruban */
}
.postit, .domain-card {
  position: relative; border: 0; text-align: left; padding: 20px 14px 14px;
  min-height: 96px; display: flex; flex-direction: column; gap: 5px;
  background: var(--teinte, var(--jaune)); color: var(--gris-postit);
  box-shadow: 2px 3px 8px rgba(26,24,21,.16);
  transition: transform .15s;
}
/* Ordre fixe des quatre post-it, comme sur l'image : rose, jaune, bleu, vert. */
.postit:nth-child(1) { --teinte: var(--rose);        transform: rotate(-.8deg); }
.postit:nth-child(2) { --teinte: var(--jaune);       transform: rotate(.6deg); }
.postit:nth-child(3) { --teinte: var(--bleu-postit); transform: rotate(-.4deg); }
.postit:nth-child(4) { --teinte: var(--menthe);      transform: rotate(.5deg); }
.postit:active, .domain-card:active { transform: scale(.97); }

/* Le bout de ruban adhésif, translucide, posé de travers sur le haut. */
.scotch {
  position: absolute; top: -10px; left: 50%; width: 56px; height: 20px;
  margin-left: -28px; transform: rotate(-4deg);
  background: linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.34));
  border-left: 1px solid rgba(26,24,21,.07);
  border-right: 1px solid rgba(26,24,21,.07);
  box-shadow: 0 1px 2px rgba(26,24,21,.14);
}
.postit:nth-child(even) .scotch { transform: rotate(3deg); left: 46%; }

/* Le titre à la main, comme les notes manuscrites de l'application. */
.postit-nom {
  font-family: var(--plume); font-weight: 700; font-size: 1.3rem; line-height: 1.15;
  /* Deux lignes au plus : au-delà, le navigateur coupe et pose les points. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.postit-chiffres { margin-top: auto; font-size: .68rem; opacity: .72; line-height: 1.7; }
.postit-rien {
  grid-column: 1 / -1; text-align: center; color: var(--muted);
  font-size: 1.1rem; margin: 6px 0 0;
}
.autres-domaines {
  margin: 10px 0 0; text-align: center; color: var(--muted); font-size: 1.05rem;
}
/* « Afficher tout » : une mention du cahier, centrée, sans cadre ni bouton. */
.lien-plus {
  display: block; width: 100%; margin: 8px 0 0; padding: 8px;
  border: 0; background: none; color: var(--muted);
  font-size: 1.1rem; text-align: center;
}
.lien-plus:active { opacity: .6; }
.autres-paquets {
  display: block; width: 100%; margin: 16px 0 0; padding: 6px;
  border: 0; background: none; color: var(--muted); font-size: 1.1rem; text-align: center;
}
.postit-vide {
  grid-column: 1 / -1; border: 1.5px dashed color-mix(in srgb, var(--text) 24%, transparent);
  background: none; color: var(--muted); min-height: 92px;
  display: grid; place-items: center; font-size: .86rem;
}
/* ── Fiches et blocs de papier ────────────────────────────────── */
.stat-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 22px; }
.stat-row .stat:first-child { grid-column: span 2; }
.stat {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m);
  padding: 14px 16px; display: flex; flex-direction: column; gap: 3px;
  border-left: 5px solid var(--tint, var(--jaune));
}
.stat-value { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; }
.stat-label { font-size: .62rem; color: var(--faint); }
.s-due    { --tint: var(--rose); }
.s-total  { --tint: var(--jaune); }
.s-master { --tint: var(--menthe); }
.s-streak { --tint: var(--marge); }
.s-rate   { --tint: var(--text); }

/* ── Paliers ──────────────────────────────────────────────────── */
.ladder { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.ladder::-webkit-scrollbar { display: none; }
.rung {
  flex: 0 0 104px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-s); padding: 12px; text-align: center;
}
.rung-label { font-weight: 500; font-size: .66rem; }
.rung-count { font-size: 1.05rem; font-weight: 700; margin-top: 3px; }
.rung-meter { height: 4px; background: var(--bg-2); margin-top: 8px; }
.rung-meter > div { height: 100%; background: var(--jaune); transition: width .5s; }

/* ── Sommaire de l'onglet Cartes ──────────────────────────────── */
/* Même papier réglé que l'accueil, mais sans filet de marge. */
.feuille-menu { padding-left: 22px; }
.feuille-menu::before { display: none; }

/* Le titre, passé au stabilo. */
.titre-stabilo {
  display: inline-block; margin: 0 0 6px; font-size: 2.1rem; font-weight: 700;
  /* Sur deux lignes, chacune reçoit son propre trait de stabilo. */
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  letter-spacing: -.03em; padding: 0 .12em;
  color: #1A1815;      /* encre sur le stabilo, dans les deux thèmes */
  background: linear-gradient(180deg, transparent 10%, var(--stabilo-vif) 10%,
    var(--stabilo-vif) 92%, transparent 92%);
}
/* Un trait de stabilo sur un mot, à toute taille : le titre d'une feuille
   comme celui d'un panneau. La couleur se choisit par un modificateur. */
.surligne {
  /* En ligne, et non en bloc : sur plusieurs lignes, le trait suit le texte
     au lieu de peindre un rectangle plein. */
  display: inline; padding: 0 .18em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  color: #1A1815;      /* encre sur le stabilo, dans les deux thèmes */
  background: linear-gradient(180deg, transparent 12%, var(--stabilo-vif) 12%,
    var(--stabilo-vif) 90%, transparent 90%);
}
.stabilo-rose {
  background: linear-gradient(180deg, transparent 10%, var(--rose) 10%,
    var(--rose) 92%, transparent 92%);
}
.stabilo-bleu {
  background: linear-gradient(180deg, transparent 10%, var(--bleu-postit) 10%,
    var(--bleu-postit) 92%, transparent 92%);
}
.stabilo-jaune {
  background: linear-gradient(180deg, transparent 10%, var(--jaune) 10%,
    var(--jaune) 92%, transparent 92%);
}
/* Le gris des post-it, pour le calendrier. */
.stabilo-gris {
  background: linear-gradient(180deg, transparent 10%, #C9C4B8 10%,
    #C9C4B8 92%, transparent 92%);
}
.stabilo-menthe {
  background: linear-gradient(180deg, transparent 10%, var(--menthe) 10%,
    var(--menthe) 92%, transparent 92%);
}
.feuille-menu .manuscrit { margin: 0 0 20px; font-size: 1.15rem; }

/* Le logo : deux cartes empilées, la jaune derrière, l'encre devant. */
.logo-memova {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin: 6px 0 20px;
}
.logo-cartes { position: relative; width: 66px; height: 50px; flex: 0 0 auto; }
.logo-carte-jaune {
  position: absolute; left: 0; top: 5px; width: 54px; height: 42px;
  border-radius: 6px; background: var(--jaune); transform: rotate(-8deg);
}
.logo-carte-encre {
  position: absolute; left: 11px; top: 0; width: 54px; height: 42px;
  border-radius: 6px; background: #1A1815;
  display: flex; align-items: center; justify-content: center;
  font: 700 20px/1 var(--sans); color: var(--jaune);
}
.logo-mot {
  font: 700 32px/1 var(--sans); letter-spacing: -.045em; color: var(--text);
}

.menu-cartes { display: flex; flex-direction: column; gap: 9px; }
.entree {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  background: var(--surface); border-radius: 16px;
  /* Un filet léger : sans lui, le bouton se confond avec le papier. */
  border: 1px solid var(--line);
  padding: 15px; box-shadow: 0 1px 2px rgba(26,24,21,.09);
  transition: transform .15s;
}
.entree:active { transform: scale(.985); }
/* Un carré de post-it, pas une pastille : c'est le vocabulaire du cahier. */
.entree-num {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 7px;
  display: grid; place-items: center; font-size: .94rem; font-weight: 700;
  background: var(--teinte-num, var(--jaune)); color: #1A1815;
}
/* Les six numéros, dans l'ordre voulu et quel que soit le thème :
   jaune, bleu, rose, vert, jaune, bleu. */
.entree:nth-child(1) .entree-num { --teinte-num: var(--jaune); }
.entree:nth-child(2) .entree-num { --teinte-num: var(--bleu-postit); }
.entree:nth-child(3) .entree-num { --teinte-num: var(--rose); }
.entree:nth-child(4) .entree-num { --teinte-num: var(--menthe); }
.entree:nth-child(5) .entree-num { --teinte-num: #C9C4B8; }   /* le gris du calendrier */
.entree:nth-child(6) .entree-num { --teinte-num: var(--bleu-postit); }

/* L'étoile qui signale la création assistée. */
.etoile-ia { flex: 0 0 auto; width: 22px; height: 22px; fill: var(--text); }
/* Le dossier : ce qui range vos matières. */
.dossier-icone { flex: 0 0 auto; width: 21px; height: 21px; fill: var(--text); }
/* Le globe : ce domaine vient d'ailleurs, d'un fichier ou de quelqu'un. */
.globe-reseau {
  flex: 0 0 auto; width: 20px; height: 20px; fill: none;
  stroke: var(--text); stroke-width: 1.5; stroke-linecap: round;
}
.entree-txt {
  flex: 1; min-width: 0; z-index: 1;
  font-size: 1rem; font-weight: 700; line-height: 1.2;
}
.entree-txt small {
  display: block; margin-top: 2px;
  font-weight: 400; font-size: .78rem; line-height: 1.35; color: var(--muted);
}
.entree-num, .entree-fleche, .etoile-ia, .globe-reseau, .dossier-icone { z-index: 1; }
.entree-fleche { color: var(--faint); font-size: 1.06rem; line-height: 1; }
.washi-tag {
  display: block; width: fit-content; margin-top: 7px; padding: 3px 9px;
  background: var(--menthe); color: #1A1815;
  font-family: var(--mono); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase;
}

.panneau-tete { display: flex; align-items: center; gap: 10px; margin: 10px 0 18px; }
.panneau-tete h1 { flex: 1; }
/* Un titre au stabilo ne s'étire pas : le surlignage doit épouser le mot. */
.panneau-tete .titre-stabilo { flex: 0 1 auto; margin: 0; }
.retour {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
  border: 1.5px solid var(--line); background: var(--surface); color: var(--text);
  font-size: 1.3rem; line-height: 1; padding-bottom: 3px;
}
/* La flèche du menu, posée dans l'en-tête d'un écran : le même rond bordé
   que celle des feuilles, à la taille du jeton du thème qui lui fait face.
   Grise et sans bord, on ne la trouvait pas. */
.retour-menu {
  display: grid; place-items: center; text-decoration: none;
  padding-bottom: 3px;
}
.feuille-tete .retour-menu { width: 38px; height: 38px; font-size: 1.3rem; }
.recherche { margin-bottom: 12px; }
.chip-vide {
  font-size: .84rem; color: var(--faint); padding: 9px 4px; white-space: nowrap;
}
.bientot {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m);
  padding: 22px 20px; text-align: center;
}
.bientot .manuscrit { font-size: 1.35rem; color: var(--text); margin-bottom: 10px; }
#panneau-export .btn-block { margin-top: 14px; }
#panneau-import .btn-block { margin-bottom: 4px; }

/* ── Domaines ─────────────────────────────────────────────────── */
.inline-form { display: flex; gap: 8px; margin-bottom: 16px; }
.inline-form .input { flex: 1; }
.domain-list { display: flex; flex-direction: column; gap: 8px; }
.domain-row {
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  /* Un liseré de la couleur du domaine court sur toute la hauteur. */
  padding: 0; display: flex; align-items: stretch;
}
.domain-liseré {
  flex: 0 0 auto; display: block; width: 6px; min-width: 6px; align-self: stretch;
  background: var(--teinte, var(--line));
}
.domain-corps {
  flex: 1; min-width: 0; padding: 13px 14px;
  display: flex; align-items: center; gap: 12px;
}
/* Sa vignette : l'image du domaine, ou sa couleur à défaut. Sans image, la
   première lettre s'y inscrit en blanc — une pastille se reconnaît mieux qu'un
   carré vide, et l'œil retrouve sa ligne du premier coup. */
.domain-vignette {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 9px;
  object-fit: cover; display: block; background: var(--teinte, var(--line));
}
.domain-vignette.vide {
  display: grid; place-items: center;
  color: #FFF; font-weight: 700; font-size: 1.15rem; line-height: 1;
  text-transform: uppercase; text-shadow: 0 1px 2px rgba(0, 0, 0, .22);
}
.domain-meta {
  font-size: .6rem; letter-spacing: .1em; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.row-actions { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.actions-haut { display: flex; align-items: center; gap: 7px; }
/* Le bouton d'export : une flèche qui sort, rien de plus. */
.btn-icone {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--text) 28%, transparent);
  background: none; display: grid; place-items: center;
}
.btn-icone svg {
  width: 16px; height: 16px; fill: none; stroke: var(--text);
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.btn-contour {
  padding: 7px 13px; border-radius: 100px; background: none;
  border: 1.5px solid color-mix(in srgb, var(--text) 28%, transparent);
  color: var(--text); font-size: .78rem; font-weight: 700;
}
/* Le bouton de création prend ses distances avec le dernier domaine. */
.btn-creer { margin-top: 30px; gap: 9px; }
/* Le formulaire aussi : un filet et de l'air le séparent de la liste. */
#domaine-formulaire, #carte-formulaire:not(:first-child) {
  margin-top: 32px; padding-top: 24px;
  border-top: 1px dashed color-mix(in srgb, var(--text) 20%, transparent);
}
/* Sauf quand il est seul en scène : on modifie une carte, la liste s'efface. */
#carte-liste-recente[hidden] + #carte-formulaire { margin-top: 0; padding-top: 0; border-top: 0; }
.lien-supprimer {
  border: 0; padding: 1px 5px; color: var(--text); font-size: .74rem;
  /* Un trait de stabilo rose, léger : l'action se voit sans crier. */
  background: linear-gradient(180deg, transparent 14%,
    color-mix(in srgb, var(--rose) 62%, transparent) 14%,
    color-mix(in srgb, var(--rose) 62%, transparent) 92%, transparent 92%);
}
.domain-row > * { position: relative; z-index: 1; }
.domain-row .domain-ident { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
/* Le nom du domaine, net et lisible. */
.domain-row .name {
  font-size: .95rem; font-weight: 700; line-height: 1.25; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.domain-auteur { font-family: var(--mono); font-size: .62rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint); }
.domain-icone {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: var(--r-s);
  object-fit: cover; display: block;
}
.domain-icone.vide { opacity: .5; }
.domain-desc { flex: 1 0 100%; font-size: .82rem; color: var(--muted); line-height: 1.4; }
.domain-desc em { color: var(--faint); }
.icone-slot { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.icone-apercu {
  width: 56px; height: 56px; border-radius: var(--r-s); flex: 0 0 auto;
  border: 1.5px dashed color-mix(in srgb, var(--text) 22%, transparent);
}
.icone-apercu.has-image { border-style: solid; border-color: var(--line); overflow: hidden; }
.icone-apercu img { width: 100%; height: 100%; object-fit: cover; display: block; }
.postit-icone {
  width: 26px; height: 26px; border-radius: 3px; object-fit: cover;
  display: block; flex: 0 0 auto;
}
/* L'icône du paquet, et à sa droite le nombre de cartes qu'il contient. */
.postit-tete { display: flex; align-items: center; gap: 7px; min-height: 26px; }
.postit-compte {
  font-family: var(--plume); font-size: 1.05rem; line-height: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .78;
}
/* Le décompte prend sa ligne : les quatre boutons ne l'écrasent plus. */
.domain-row .counts { font-size: .78rem; color: var(--muted); flex: 1 0 100%; }

/* Le nom du domaine passe avant ses boutons : replié, il a toute la ligne.
   Un appui déplie les actions dessous, en icônes.
   Ces règles ne valent que pour la liste des domaines : la liste des cartes
   emprunte les mêmes classes, et ses boutons doivent rester sous la main. */
#domains-list .domain-corps { flex-wrap: wrap; cursor: pointer; }
#domains-list .domain-row .row-actions { display: none; }
#domains-list .domain-row.est-ouvert .row-actions {
  display: flex; flex-direction: row; flex: 1 0 100%; gap: 9px; align-items: center;
  justify-content: flex-end; padding-top: 11px; margin-top: 3px;
  border-top: 1px solid var(--line); cursor: auto;
}
#domains-list .domain-row.est-ouvert .actions-haut { display: contents; }
.domain-chevron {
  flex: 0 0 auto; display: grid; place-items: center; width: 22px; height: 22px;
  transition: transform .18s ease;
}
.domain-chevron svg { width: 18px; height: 18px; fill: none; stroke: var(--faint);
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#domains-list .domain-row.est-ouvert .domain-chevron { transform: rotate(180deg); }
/* Le domaine au repos : son interrupteur reste allumé, pour se voir de loin. */
.btn-icone.est-actif {
  border-color: color-mix(in srgb, var(--text) 55%, transparent);
  background: color-mix(in srgb, var(--jaune) 42%, transparent);
}

/* Le double appui ne doit pas agrandir la page.
   Sur iPhone, deux appuis rapprochés sur un bouton déclenchent le zoom du
   navigateur. Cette déclaration supprime cette interprétation du double appui
   sans toucher au pincer-pour-agrandir : on ne retire pas le zoom, on retire
   le zoom accidentel. Elle ne change aucune mise en page. */
button, .chip, .tab, .rond, .jeton, .entree, [role="button"] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* ── Pastilles ────────────────────────────────────────────────── */
.filter-row {
  display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 10px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.filter-row::-webkit-scrollbar { display: none; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.chip {
  flex: 0 0 auto; border: 1px solid var(--line); border-radius: 100px; padding: 8px 14px;
  background: var(--surface); color: var(--muted); font-weight: 600; font-size: .86rem;
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  transition: transform .15s;
}
.chip:active { transform: scale(.94); }
.chip.is-active { background: var(--text); border-color: var(--text); color: var(--surface); }
.chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--tint, var(--jaune)); }
.chip .badge {
  background: var(--jaune); color: #1A1815; font-family: var(--mono);
  font-size: .64rem; border-radius: 100px; padding: 1px 6px;
}
.pill {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
  border-radius: 3px; padding: 4px 8px; background: var(--surface-2); color: var(--muted);
}
.pill-quiet { color: var(--faint); }
.pill-due { background: var(--rose); color: #1A1815; }
.pill-master { background: var(--menthe); color: #1A1815; }

/* ── Importer un domaine ──────────────────────────────────────── */
/* Comme sur la maquette : le contenu part du bord et passe par-dessus le
   filet de marge, et le papier est un ton plus chaud que les fiches, qui
   s'en détachent alors sans avoir besoin d'un trait. */
.feuille-import {
  padding-left: 20px; padding-right: 20px;
  background-color: color-mix(in srgb, var(--surface) 58%, var(--bg));
}
.feuille-import > * { position: relative; }
/* Le titre tient sur une ligne : autrement le stabilo devient un pavé. */
.titre-feuille {
  margin: 0 0 6px; font-size: 1.72rem; font-weight: 700; letter-spacing: -.03em;
  line-height: 1.22;
}
.sous-titre { margin: -2px 0 18px; }
.etiquette-liste { margin: 22px 0 10px; }

/* La carte sombre : le fichier .json, et derrière, des points reliés par des
   fils — l'idée de jeux qui circulent d'une personne à l'autre. */
.carte-fichier {
  position: relative; display: block; overflow: hidden;
  background: #1A1815; border-radius: 18px; padding: 18px; margin-bottom: 4px;
}
.carte-fichier .fils { position: absolute; inset: 0; opacity: .34; }
.fils .point { position: absolute; border-radius: 50%; }
.fils .p1 { left: 26px; top: 22px; width: 8px; height: 8px; background: var(--jaune); }
.fils .p2 { left: 120px; top: 54px; width: 6px; height: 6px; background: var(--menthe); }
.fils .p3 { left: 232px; top: 26px; width: 7px; height: 7px; background: var(--rose); }
.fils .p4 { left: 300px; top: 66px; width: 6px; height: 6px; background: var(--bleu-postit); }
.fils .fil {
  position: absolute; height: 1px; background: rgba(247,243,233,.28); transform-origin: left;
}
.fils .f1 { left: 34px;  top: 26px; width: 92px;  transform: rotate(19deg); }
.fils .f2 { left: 128px; top: 58px; width: 110px; transform: rotate(-17deg); }
.fils .f3 { left: 240px; top: 30px; width: 70px;  transform: rotate(29deg); }
.fichier-corps { position: relative; display: flex; flex-direction: column; gap: 12px; }
.fichier-titre { font-size: 1.06rem; font-weight: 700; color: #F7F3E9; }
.fichier-sous { font-size: .78rem; line-height: 1.45; color: rgba(247,243,233,.6); }
.fichier-ligne { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pilule-jaune {
  padding: 10px 18px; border-radius: 100px;
  background: var(--jaune); color: #1A1815; font-size: .84rem; font-weight: 700;
}
.fichier-note { color: rgba(247,243,233,.45); letter-spacing: .1em; }
.carte-fichier:active { transform: scale(.99); }

/* Un domaine partagé : liseré de sa couleur, puis ce qu'il faut pour décider. */
.deck-liste { display: flex; flex-direction: column; gap: 12px; }
.deck-bande {
  display: flex; overflow: hidden; width: 100%; text-align: left;
  background: var(--surface); border: 0; border-radius: 16px;
  box-shadow: 0 1px 2px rgba(26,24,21,.09); transition: transform .14s;
}
.deck-bande:active { transform: scale(.99); }
.deck-liseré {
  flex: 0 0 auto; display: block; width: 6px; min-width: 6px; align-self: stretch;
  background: var(--tint, var(--jaune));
}
.deck-corps { flex: 1; min-width: 0; padding: 15px 16px; display: flex; flex-direction: column; gap: 9px; }
.deck-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.deck-nom { font-size: 1.06rem; font-weight: 700; line-height: 1.25; color: var(--text); }
/* La note, dans la teinte du domaine, comme sur le modèle. */
.deck-note {
  flex: 0 0 auto; padding: 4px 8px; border-radius: 6px;
  background: color-mix(in srgb, var(--tint, var(--jaune)) 42%, transparent);
  color: var(--text); font-family: var(--mono); font-size: .74rem; font-weight: 700;
}
.deck-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; }
.deck-coeurs { font-size: .76rem; color: var(--muted); white-space: nowrap; }
.deck-liste .deck-desc {
  margin: 0; font-size: .82rem; line-height: 1.5; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.deck-pied { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.deck-auteur { display: flex; align-items: center; gap: 8px; min-width: 0; }
.deck-initiales {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
  background: color-mix(in srgb, var(--tint, var(--jaune)) 55%, transparent); color: #1A1815;
  display: grid; place-items: center; font-size: .62rem; font-weight: 700;
  object-fit: cover;
}
.deck-initiales.grande { width: 40px; height: 40px; font-size: .8rem; }
.deck-signe {
  font-size: .76rem; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.deck-bouton {
  flex: 0 0 auto; padding: 7px 14px; border: 0; border-radius: 100px;
  background: var(--text); color: var(--surface); font-size: .78rem; font-weight: 700;
}
.deck-bouton[disabled] { opacity: .45; }
.deck-pose { font-size: .64rem; letter-spacing: .1em; color: var(--muted); white-space: nowrap; }
.fiche-importer[disabled] { opacity: .4; }

/* La fiche d'un jeu : ce qu'on reçoit, avant de le prendre. */
.fiche-carte {
  display: flex; overflow: hidden; border-radius: 18px; background: var(--surface);
  box-shadow: 0 1px 2px rgba(26,24,21,.09); margin-bottom: 16px;
}
.fiche-carte .deck-liseré { width: 9px; }
.fiche-corps { flex: 1; min-width: 0; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.fiche-titre { display: flex; flex-direction: column; gap: 4px; }
.fiche-nom { font-size: 1.5rem; font-weight: 700; line-height: 1.16; letter-spacing: -.025em; }
.fiche-auteur { display: flex; align-items: center; gap: 11px; }
.fiche-auteur-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.fiche-auteur-txt b { font-size: .95rem; }
.fiche-auteur-txt .mono { font-size: .6rem; letter-spacing: .1em; }
/* Les domaines qui viennent avec, en pastilles. */
.fiche-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.fiche-chip {
  display: flex; align-items: center; gap: 8px; padding: 8px 13px; border-radius: 100px;
  background: var(--surface); border: 1px solid var(--line); font-size: .8rem;
}
.fiche-chip i { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
/* La barre d'action, posée au bas de la feuille. */
.fiche-pied {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
  padding: 12px 16px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line); background: var(--bg);
}
.fiche-coeur {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--text) 22%, transparent);
  background: none; color: var(--text); font-size: 1.06rem;
}
.fiche-coeur.est-aime { background: var(--rose); border-color: var(--rose); color: #1A1815; }
.fiche-coeur[disabled] { opacity: .3; }
.fiche-importer {
  flex: 1; padding: 14px; border: 0; border-radius: 100px;
  background: var(--text); color: var(--surface); font-size: .96rem; font-weight: 700;
}
.fiche-note-main { font-family: var(--plume); font-size: 1.1rem; color: var(--muted); }
.fiche-chiffres { display: flex; gap: 9px; }
.fiche-chiffre {
  flex: 1; background: var(--bg); border-radius: 12px; padding: 11px;
  display: flex; flex-direction: column; gap: 3px;
}
.fiche-chiffre b { font-size: 1.2rem; font-weight: 700; }
.fiche-bloc { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.fiche-texte { margin: 0; font-size: .92rem; line-height: 1.6; color: var(--text); }
.fiche-credit { margin: 0; font-size: .76rem; line-height: 1.55; color: var(--muted); }
.fiche-apercu {
  display: flex; overflow: hidden; border-radius: 12px; background: var(--surface);
  box-shadow: 0 1px 2px rgba(26,24,21,.07);
}
/* Le liseré ne s'étire pas : seule la question prend la largeur. */
.fiche-apercu .deck-liseré { flex: 0 0 auto; width: 5px; }
.fiche-apercu .apercu-texte { flex: 1; padding: 13px 14px; font-size: .88rem; line-height: 1.4; }

/* ── Les pages de texte : conditions, confidentialité ─────────── */
.document {
  max-width: 640px; margin: 0 auto;
  padding: calc(20px + env(safe-area-inset-top)) 22px calc(60px + env(safe-area-inset-bottom));
}
.doc-retour {
  display: inline-block; margin-bottom: 26px; padding: 7px 14px 7px 10px;
  border: 1px solid var(--line); border-radius: 100px; background: var(--surface);
  font-size: .82rem; font-weight: 600; color: var(--text); text-decoration: none;
}
.doc-eyebrow {
  font-family: var(--mono); font-size: .6rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 8px;
}
.doc-titre { font-size: 1.85rem; line-height: 1.15; margin: 0 0 6px; }
.doc-date { margin: 0 0 26px; font-size: 1.05rem; }

/* Le rappel de ce qui reste à remplir : visible, et impossible à oublier. */
.doc-avis {
  border-left: 2px solid var(--rose); padding: 2px 0 2px 16px;
  display: flex; flex-direction: column; gap: 7px; margin-bottom: 32px;
}
.doc-avis .mono {
  font-family: var(--mono); font-size: .58rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--faint);
}
.doc-avis p { margin: 0; font-size: .92rem; line-height: 1.6; color: var(--muted); }

.document h2 {
  font-size: 1.06rem; margin: 30px 0 10px;
  padding-bottom: 8px; border-bottom: 1px solid var(--line);
}
.document h3 { font-size: .95rem; margin: 20px 0 6px; color: var(--text); }
.document p { margin: 0 0 12px; font-size: .95rem; line-height: 1.72; }
.document a { color: var(--text); }
/* Ce qui attend une main humaine : surligné comme au stabilo rose. */
.a-remplir {
  background: rgba(242,184,198,.5); border-radius: 3px; padding: 0 .2em;
  color: var(--text);
}
.doc-fin {
  margin: 44px 0 0; padding-top: 22px; border-top: 1px solid var(--line);
  text-align: center; font-size: 1.1rem; color: var(--faint);
}

/* ── La page de connexion ─────────────────────────────────────── */
.connexion {
  min-height: 100dvh; max-width: 420px; margin: 0 auto;
  padding: calc(38px + env(safe-area-inset-top)) 22px calc(28px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column;
}
.connexion .logo-memova { margin-bottom: 30px; }
.connexion-titre {
  margin: 0 0 8px; text-align: center;
  font-size: 1.9rem; font-weight: 700; line-height: 1.15;
}
.connexion-mot { margin: 0 0 30px; font-size: 1.12rem; }

.connexion-portes { display: flex; flex-direction: column; gap: 10px; }
/* Chaque porte a le vêtement de sa maison : Apple en encre, Google en blanc. */
.porte {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 15px 18px; border-radius: 100px;
  font-size: .96rem; font-weight: 600; border: 1.5px solid var(--text);
  background: var(--surface); color: var(--text);
  transition: transform .14s, opacity .14s;
}
.porte:active { transform: scale(.98); }
.porte-apple { background: var(--text); color: var(--surface); }
.porte-google { background: #FFF; color: #1A1815; border-color: rgba(26,24,21,.22); }
.porte-mail { background: var(--surface); border-color: var(--line); }
/* Une porte qui n'est pas encore branchée garde son allure : c'est au moment
   de l'ouvrir qu'on dit qu'elle n'est pas encore posée. */

.connexion-ou {
  display: flex; align-items: center; gap: 14px; margin: 22px 0 16px;
  color: var(--faint); font-family: var(--plume); font-size: 1.05rem;
}
.connexion-ou::before, .connexion-ou::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}

.lien-sans-compte {
  display: flex; flex-direction: column; gap: 4px; align-items: center;
  background: none; border: 0; padding: 6px 0;
  font-size: .95rem; font-weight: 600; color: var(--text);
}
.lien-sans-compte small { font-weight: 400; font-size: .78rem; color: var(--muted); }

.connexion-mail { display: flex; flex-direction: column; gap: 4px; }
.retour-nu {
  align-self: flex-start; background: none; border: 0; padding: 0 0 10px;
  font-size: 1.6rem; line-height: 1; color: var(--muted);
}
.code-champ {
  font-family: var(--mono); font-size: 1.5rem; letter-spacing: .5em; text-align: center;
}
.connexion-mail .btn { margin-top: 14px; }

.connexion-mentions {
  margin: auto 0 0; padding-top: 26px;
  font-size: .74rem; line-height: 1.55; color: var(--faint); text-align: center;
}

/* ── La porte d'entrée, quand un code protège l'application ───── */
.entrer-page {
  max-width: 380px; margin: 0 auto; padding: 18vh 22px 40px;
  display: flex; flex-direction: column; gap: 8px;
}
.entrer-page .manuscrit { text-align: center; margin-bottom: 18px; }
.entrer-form { display: flex; flex-direction: column; gap: 10px; }

/* Le pied de la liste des cartes : cinquante par page. */
.pagination {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 14px 0 4px;
}
.page-btn {
  padding: 9px 14px; border: 1px solid var(--line); border-radius: var(--r-s);
  background: var(--surface); box-shadow: var(--ombre);
  font-family: var(--plume); font-size: 1.14rem; line-height: 1; color: var(--text);
}
.page-btn[disabled] { opacity: .38; box-shadow: none; }
.page-rang { font-family: var(--plume); font-size: 1.1rem; color: var(--muted); }

/* ── Le calendrier, tracé à la main ───────────────────────────── */
.calendrier-tete {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin: 6px 0 14px; padding: 0 2px;
}
/* Les deux boutons de mois : des ronds dessinés au stylo, jamais parfaits. */
.calendrier-tete .rond {
  width: 40px; height: 40px; border: 1.8px solid var(--text); background: none;
  border-radius: 50% 46% 52% 48%; color: var(--text); font-size: 1.06rem;
  display: grid; place-items: center; transform: rotate(-2deg);
}
.calendrier-tete #mois-apres { border-radius: 48% 52% 46% 50%; transform: rotate(1.5deg); }
.calendrier-mois {
  font-family: var(--plume); font-size: 1.35rem; font-weight: 700;
  transform: rotate(-.6deg);
}
/* Les jours de la semaine, écrits à la main sous un trait tiré à la règle. */
.calendrier-jours {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px;
  padding: 0 2px; font-family: var(--plume); font-size: .95rem; font-weight: 700;
  color: var(--muted); text-align: center;
}
.calendrier-jours span:nth-child(odd) { transform: rotate(-1.6deg); }
.calendrier-jours span:nth-child(even) { transform: rotate(1.2deg); }
.calendrier-grille {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px;
  padding: 0 2px;
  border-top: 2px solid color-mix(in srgb, var(--text) 30%, transparent);
  margin-top: 8px; padding-top: 12px;
}
.jour {
  height: 56px; padding: 4px 0 0;
  border: 1.5px solid color-mix(in srgb, var(--text) 24%, transparent);
  border-radius: var(--coins, 9px 8px 10px 7px);
  transform: rotate(var(--penche, 0deg));
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.jour.vide { border: 0; }
.jour b { font-size: .86rem; font-weight: 500; color: var(--muted); }
.jour.est-rempli b { color: var(--text); }
.jour.est-passe { opacity: .85; }
/* Aujourd'hui est cerclé au stylo. */
.jour.est-aujourdhui {
  border-width: 2px; border-color: var(--text);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--text) 10%, transparent);
}
/* Les compteurs sont des touches de stabilo, écrites à la main. */
.pastille-du, .pastille-faites {
  font-family: var(--plume); font-size: 1rem; font-weight: 700; font-style: normal;
  line-height: 1.15; padding: 0 6px; border-radius: 7px; color: #1A1815;
  transform: rotate(var(--penche, 0deg));
}
.pastille-du { background: color-mix(in srgb, var(--rose) 85%, transparent); }
.pastille-faites { background: color-mix(in srgb, var(--menthe) 85%, transparent); }
.calendrier-legende {
  display: flex; justify-content: center; gap: 18px; margin: 18px 0 6px;
  font-family: var(--plume); font-size: 1.05rem; color: var(--muted);
}
.calendrier-legende span { display: flex; align-items: center; gap: 7px; }
.calendrier-legende i { width: 14px; height: 12px; border-radius: 4px 3px 5px 3px; }

/* La courbe d'apprentissage, au crayon : une ligne par famille de cartes. */
.courbe-apprentissage { position: relative; margin: 4px 0 8px; padding-right: 26px; }
.courbe-apprentissage svg { width: 100%; height: 130px; overflow: visible; }
.courbe-axe {
  fill: none; stroke: color-mix(in srgb, var(--text) 22%, transparent);
  stroke-width: 1.5; stroke-linecap: round;
}
.trace { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.trace-0 { stroke: var(--rose); }
.trace-1 { stroke: var(--jaune); }
.trace-2 { stroke: var(--bleu-postit); }
.trace-3 { stroke: var(--menthe); }
/* Le haut de l'échelle, écrit à la main dans la marge. */
.courbe-echelle {
  position: absolute; top: -4px; right: 0;
  font-family: var(--plume); font-size: 1rem; color: var(--muted);
}
.courbe-dates {
  display: flex; justify-content: space-between; margin-top: 2px; padding-right: 4px;
  font-family: var(--plume); font-size: .95rem; color: var(--muted);
}
.courbe-legende { flex-wrap: wrap; gap: 10px 16px; font-size: .95rem; }
.courbe-legende i { width: 18px; height: 3px; border-radius: 2px; }
.courbe-legende .trait-0 { background: var(--rose); }
.courbe-legende .trait-1 { background: var(--jaune); }
.courbe-legende .trait-2 { background: var(--bleu-postit); }
.courbe-legende .trait-3 { background: var(--menthe); }

/* ── Votre séance ─────────────────────────────────────────────── */
.seg-mode { margin-bottom: 16px; }
/* Devant la montagne, une phrase manuscrite plutôt qu'un chiffre écrasant. */

/* Le rappel du mode libre : vert menthe, comme une note rassurante. */
.bandeau-libre {
  display: flex; align-items: flex-start; gap: 11px; margin-bottom: 16px;
  padding: 13px 14px; border-radius: 14px;
  background: color-mix(in srgb, var(--menthe) 35%, transparent);
}
.bandeau-libre p { margin: 0; font-size: .82rem; line-height: 1.5; }
.bandeau-coche {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
  background: var(--text); color: var(--menthe);
  display: grid; place-items: center; font-size: .76rem; font-weight: 700;
}
.bloc-domaines { display: flex; flex-direction: column; gap: 9px; margin-bottom: 16px; }
.bloc-domaines-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.bloc-domaines-tete .ia-dest-lien { border: 0; background: none; }
.bloc-domaines .recherche { margin-bottom: 0; }
.coche {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--text) 30%, transparent);
  display: grid; place-items: center; font-size: .7rem; color: transparent;
}
.coche.est-cochee { background: var(--text); border-color: var(--text); color: var(--jaune); }
/* La carte de la séance, liseré jaune comme sur la maquette. */
.carte-seance {
  display: flex; overflow: hidden; border-radius: 18px; background: var(--surface);
  box-shadow: 0 1px 2px rgba(26,24,21,.09); margin-bottom: 14px;
}
.carte-seance .deck-liseré { width: 7px; background: var(--jaune); }
.carte-seance-corps { flex: 1; min-width: 0; padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.rond-plein { background: var(--text); border-color: var(--text); color: var(--jaune); }
/* Les deux chiffres de la séance. */

/* ── Cartes depuis un texte ───────────────────────────────────── */
.ia-bloc { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.ia-entete { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ia-mesure { font-size: .72rem; color: var(--muted); white-space: nowrap; }
.ia-zone {
  width: 100%; min-height: 118px; resize: none; overflow-y: auto;
  background: var(--surface); border: 1.5px solid var(--text); border-radius: 12px;
  padding: 14px 15px; font-size: .9rem; line-height: 1.55;
}
.ia-sources { display: flex; gap: 8px; flex-wrap: wrap; }
.ia-source {
  padding: 8px 13px; border-radius: 100px; background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--text) 20%, transparent);
  font-size: .78rem; font-weight: 600; color: var(--text); cursor: pointer;
}
.ia-carte {
  display: flex; flex-direction: column; gap: 11px; margin-bottom: 16px;
  background: var(--surface); border-radius: 16px; padding: 16px;
  box-shadow: 0 1px 2px rgba(26,24,21,.09);
}
.ia-carte-tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.ia-carte-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ia-carte-txt small { font-size: .72rem; line-height: 1.45; color: var(--muted); }
.ia-carte-txt b { font-size: .95rem; }
.ia-nombre { flex: 0 0 auto; font-size: 1.6rem; font-weight: 700; letter-spacing: -.03em; }
/* Le nombre se tape : les tranches de cinq ne suffisent pas quand on veut
   sept cartes, ou deux. Un filet sous le chiffre ne suffisait pas à le faire
   voir comme un champ — il lui faut sa boîte, et le mot qui dit à quoi elle
   sert. */
.ia-nombre-boite {
  flex: 0 0 auto; display: inline-flex; align-items: baseline; gap: 6px;
  padding: 6px 12px; border: 2px solid var(--line); border-radius: 10px;
  background: var(--bg); cursor: text;
}
.ia-nombre-boite:focus-within { border-color: var(--jaune); }
.ia-nombre-boite .mono {
  font-family: var(--mono); font-size: .54rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
}
.ia-nombre-boite input {
  width: 2.6em; padding: 0; text-align: right; color: inherit;
  background: none; border: 0; border-radius: 0;
  font-family: inherit; font-size: 1.6rem; font-weight: 700; letter-spacing: -.03em;
  -moz-appearance: textfield; appearance: textfield;
}
.ia-nombre-boite input::-webkit-outer-spin-button,
.ia-nombre-boite input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ia-nombre-boite input:focus { outline: none; }
.ia-nombre-boite:has(input:disabled) { opacity: .5; }
.ia-extremes { display: flex; justify-content: space-between; gap: 10px; font-size: .7rem; color: var(--muted); }
.ia-extremes .droite { text-align: right; }
.ia-extremes small { font-size: .68rem; opacity: .8; }
.ia-bascule { display: flex; align-items: center; gap: 12px; }
.ia-bascule .ia-carte-txt { flex: 1; }
/* L'interrupteur : un galet jaune sur fond d'encre. */
.interrupteur {
  flex: 0 0 auto; width: 48px; height: 28px; border-radius: 14px; border: 0;
  background: color-mix(in srgb, var(--text) 22%, transparent);
  display: flex; align-items: center; padding: 3px; transition: background .18s;
}
.interrupteur::after {
  content: ""; width: 22px; height: 22px; border-radius: 50%;
  background: var(--surface); transition: transform .18s;
}
.interrupteur[aria-pressed="true"] { background: var(--text); }
.interrupteur[aria-pressed="true"]::after { transform: translateX(20px); background: var(--jaune); }
.ia-choix { display: flex; gap: 8px; flex-wrap: wrap; }
/* Les thèmes d'un domaine : une rangée qui respire, pas un mur de pastilles. */
.ia-choix-themes { margin: 4px 0 14px; }
.ia-choix button {
  padding: 7px 12px; border-radius: 100px; font-size: .74rem; font-weight: 600;
  background: var(--bg); border: 1px solid color-mix(in srgb, var(--text) 20%, transparent);
  color: var(--text);
}
.ia-choix button.is-active { background: var(--text); border-color: var(--text); color: var(--surface); }
/* Où vont les cartes : deux fiches, une seule cochée. */
.ia-destinations { display: flex; flex-direction: column; gap: 9px; }
.ia-dest {
  display: flex; overflow: hidden; border-radius: 14px; background: var(--surface);
  border: 1.5px solid transparent; box-shadow: 0 1px 2px rgba(26,24,21,.08);
}
.ia-dest.est-choisi { border-color: var(--text); }
.ia-dest-corps {
  flex: 1; min-width: 0; padding: 13px 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.ia-dest-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ia-dest-txt b { font-size: .9rem; }
.ia-dest-txt .mono { font-size: .6rem; letter-spacing: .1em; color: var(--muted); }
.ia-dest-txt small { font-size: .72rem; color: var(--muted); }
.ia-dest-lien { flex: 0 0 auto; font-size: .78rem; text-decoration: underline; }
.ia-rond {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--text) 32%, transparent);
}
.ia-dest.est-choisi .ia-rond { border-color: var(--text); box-shadow: inset 0 0 0 4px var(--text); }
/* Créer un domaine sans quitter la page : la pop-up s'ouvre par-dessus. */
.ia-nouveau {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; margin-top: 10px; padding: 13px;
  border: 1.5px dashed color-mix(in srgb, var(--text) 26%, transparent);
  border-radius: 14px; background: none; color: var(--text);
  font-size: .9rem; font-weight: 700;
}
/* La relecture : une carte à la fois, corrigeable avant d'entrer. */
.relecture-tete {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-bottom: 16px; color: var(--muted);
}
#relecture .ia-source { flex: 0 0 auto; padding: 14px 16px; }
#relecture .ia-source.est-ouvert { background: var(--text); color: var(--surface); border-color: var(--text); }
#relecture .stage { margin-bottom: 16px; }
/* Plus basse qu'en séance : la carte partage l'écran avec les champs. */
#relecture .flashcard { width: 100%; aspect-ratio: 4 / 3; cursor: pointer; }
#relecture .face-text { font-size: 1.16rem; }
#relecture-edition { margin-top: 4px; }
/* Le pied : l'action, et ce qu'elle coûte. */
.ia-pied { display: flex; flex-direction: column; gap: 6px; margin: 20px 0 8px; }
.ia-pied-note { text-align: center; font-size: .72rem; color: var(--muted); }

/* ── Bibliothèque ─────────────────────────────────────────────── */
.deck-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.deck-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m);
  padding: 18px; display: flex; flex-direction: column; gap: 7px;
}
.deck-card .deck-desc { font-size: .85rem; color: var(--muted); }
/* Mention de source : petite, en bas de casse, elle ne doit pas crier. */
.deck-card .deck-credit { font-size: .72rem; color: var(--faint); line-height: 1.5; }
.deck-card .deck-foot { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.deck-card .deck-foot .btn { margin-left: auto; }
.share-row { display: flex; gap: 10px; }
.share-row .btn { flex: 1; }

/* ── Boutons et champs ────────────────────────────────────────── */
.btn {
  border: 1.5px solid var(--text); border-radius: 100px; padding: 11px 20px;
  background: var(--surface); color: var(--text); font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: transform .15s, opacity .15s;
}
.btn:active { transform: scale(.96); }
.btn:disabled { opacity: .4; }
.btn-primary { background: var(--text); color: var(--surface); }
.btn-soft { background: var(--surface); border-color: var(--line); color: var(--muted); font-weight: 600; }
.btn-block { width: 100%; }
.btn-tiny { padding: 6px 12px; font-size: .8rem; border-width: 1px; }
.btn-pass { flex: 1; background: var(--menthe); border-color: var(--menthe); color: #1A1815; }
.btn-fail { flex: 1; background: var(--rose); border-color: var(--rose); color: #1A1815; }
.btn-danger { color: var(--rouge); }
/* Les deux actions d'un domaine reprennent les couleurs des post-it. */
.btn-modifier { background: var(--jaune); border-color: var(--jaune); color: #1A1815; font-weight: 700; }
.btn-supprimer-postit { background: var(--rose); border-color: var(--rose); color: #1A1815; font-weight: 700; }

.input, .textarea {
  width: 100%; border: 1.5px solid var(--line); border-radius: var(--r-s);
  background: var(--surface); padding: 12px 14px; transition: border-color .15s;
}
/* Une seule ligne à l'œil ; la poignée permet d'agrandir au besoin. */
.textarea { resize: vertical; line-height: 1.45; min-height: 46px; }
.input:focus, .textarea:focus { outline: none; border-color: var(--text); }
.field { display: block; margin-bottom: 14px; }
.field-label { display: block; font-size: .64rem; color: var(--faint); margin: 16px 0 8px; }
/* Le domaine retenu, rappelé dans l'intitulé, en clair et sans capitales. */
#editor-domaine-actuel { text-transform: none; letter-spacing: .02em; color: var(--muted); }
.field .field-label { margin-top: 0; }

.seg { display: flex; gap: 4px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 100px; padding: 4px; }
.seg button {
  flex: 1; border: 0; background: none; color: var(--muted);
  border-radius: 100px; padding: 8px 6px; font-size: .83rem; font-weight: 600;
}
.seg button.is-active { background: var(--text); color: var(--surface); }

.switch { display: flex; align-items: center; gap: 11px; margin: 14px 0; font-size: .9rem; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch-track {
  width: 46px; height: 28px; border-radius: 100px; background: var(--bg-2);
  border: 1px solid var(--line); padding: 3px; transition: background .2s; flex: 0 0 auto;
}
.switch-dot {
  display: block; width: 20px; height: 20px; border-radius: 50%;
  background: var(--surface); box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .2s;
}
.switch input:checked + .switch-track { background: var(--jaune); border-color: var(--jaune); }
.switch input:checked + .switch-track .switch-dot { transform: translateX(18px); background: #1A1815; }

/* ── Séance ───────────────────────────────────────────────────── */
.setup-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-l); padding: 18px;
}
.setup-card .btn-block { margin-top: 14px; }
.seg-mode { margin-bottom: 16px; }

.compteur { display: flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: 14px; }
.rond {
  width: 46px; height: 46px; border-radius: 50%; flex: 0 0 auto;
  border: 1.5px solid var(--text); background: var(--surface); color: var(--text);
  font-size: 1.4rem; line-height: 1; transition: transform .15s;
}
.rond:active { transform: scale(.88); }
.compteur-bloc { display: flex; flex-direction: column; align-items: center; }
.compteur-valeur {
  width: 120px; border: 0; background: none; text-align: center;
  font-size: 2.6rem; font-weight: 700; letter-spacing: -.04em; color: var(--text);
  -moz-appearance: textfield;
}
.compteur-valeur::-webkit-outer-spin-button,
.compteur-valeur::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.compteur-valeur:focus { outline: none; }
.compteur-total { font-family: var(--mono); font-size: .68rem; color: var(--faint); margin-top: -4px; }
.glissiere {
  width: 100%; margin: 4px 0 14px; -webkit-appearance: none; appearance: none;
  height: 4px; background: var(--bg-2); outline: none;
}
.glissiere::-webkit-slider-thumb {
  -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%;
  background: var(--text); cursor: pointer;
}
.glissiere::-moz-range-thumb {
  width: 24px; height: 24px; border: 0; border-radius: 50%; background: var(--text); cursor: pointer;
}

.test-head { display: flex; align-items: center; gap: 12px; margin: 8px 0 18px; }
.progress-bar { flex: 1; height: 4px; background: var(--bg-2); overflow: hidden; }
#progress-fill { height: 100%; width: 0; background: var(--jaune); transition: width .4s; }
.progress-text { font-size: .68rem; color: var(--muted); }

.stage { perspective: 1400px; }
/* La largeur est bornée par la hauteur libre : la carte ne pousse jamais
   les boutons de réponse sous la barre d'onglets. */
.flashcard { width: min(100%, 45vh); aspect-ratio: 3 / 4; position: relative; margin: 0 auto; }
@supports (height: 1dvh) { .flashcard { width: min(100%, 45dvh); } }
.flashcard-inner {
  position: absolute; inset: 0;
  -webkit-transform-style: preserve-3d; transform-style: preserve-3d;
  transition: transform .62s cubic-bezier(.4,.1,.2,1);
}
.flashcard.is-flipped .flashcard-inner { transform: rotateY(180deg); }
.flashcard.no-anim .flashcard-inner { transition: none; }

/* La face cachée est masquée deux fois : par « backface-visibility », et par
   une bascule d'opacité à mi-rotation. Safari iOS ignore parfois la première
   et laissait alors apparaître la réponse en miroir. */
.face { opacity: 0; transition: opacity 0s .31s; }
.flashcard .face-front,
.flashcard.is-flipped .face-back { opacity: 1; }
.flashcard.no-anim .face { transition: none; }
.flashcard.is-flipped .face-front { opacity: 0; }

.face {
  position: absolute; inset: 0;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  transform: rotateY(0deg);
  background: var(--surface); border: 1px solid var(--line);
  border-top: 6px solid var(--accent, var(--jaune));
  border-radius: var(--r-m); box-shadow: var(--ombre-l); overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 38px 22px 32px; text-align: center;
}
.face-back { transform: rotateY(180deg); }
.face-tag {
  position: absolute; top: 13px; left: 14px; right: 14px;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--mono); font-size: .6rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted);
}
/* Le domaine suit l'étiquette de la face : « QUESTION | Composition de l'ADN ».
   Il cède la place le premier quand le nom est trop long. */
.face-domaine {
  flex: 0 1 auto; min-width: 0; padding-left: 9px;
  border-left: 1px solid var(--line);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--faint);
}
.face-hint {
  position: absolute; bottom: 13px; left: 0; right: 0;
  font-family: var(--plume); font-size: .95rem; color: var(--faint);
}
/* Une carte se lit d'un coup d'œil : le texte qui déborde rétrécit jusqu'à
   tenir, plutôt que d'obliger à faire défiler pour voir la fin. */
.face-text {
  order: 1; flex: 0 1 auto; min-height: 0;
  font-size: 1.28rem; font-weight: 700; line-height: 1.4;
  max-height: 100%; overflow: hidden; white-space: pre-wrap; z-index: 1;
}
.face-media { order: 2; width: 100%; flex: 1; min-height: 0; display: flex; margin-top: 14px; }
.face-media:empty { display: none; }
.face-media .img-wrap {
  position: relative; flex: 1; min-height: 0; border-radius: var(--r-s); overflow: hidden;
  background: var(--surface-2);
}
.face-media .img-main {
  width: 100%; height: 100%; object-fit: contain; display: block; position: relative; z-index: 1;
}
.img-backdrop { display: none; }

/* ── L'atelier des leçons ────────────────────────────────────── */
/* Un cours n'est pas une carte : il s'écrit et se lit sur une page entière, pas
   dans une fenêtre qui surgit. D'où le plein écran, et le papier ligné dessous —
   les lignes suivent exactement l'interligne du texte, sinon l'œil décroche. */
.atelier {
  position: fixed; inset: 0; z-index: 130; background: var(--bg);
  display: flex; flex-direction: column;
  /* Sur iPhone, « inset: 0 » mesure l'écran barres comprises : le pied passait
     sous la barre de Safari, hors d'atteinte du doigt. La hauteur dynamique
     s'arrête, elle, à ce qu'on voit vraiment. */
  height: 100%; height: 100dvh; max-height: 100dvh;
}
.atelier-tete {
  flex: 0 0 auto; display: grid; grid-template-columns: 38px 1fr auto;
  align-items: center; gap: 10px; padding: calc(8px + env(safe-area-inset-top)) 14px 10px;
  border-bottom: 1px solid var(--line); background: var(--surface);
}
.atelier-domaine { color: var(--muted); letter-spacing: .04em; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }

/* La barre d'outils : trois rangs, chacun défilant si l'écran est étroit —
   jamais de débordement, jamais de bouton hors d'atteinte. */
.atelier-outils {
  flex: 0 0 auto; background: var(--surface-2); border-bottom: 1px solid var(--line);
  padding: 6px 10px 8px;
}
.outils-rang {
  display: flex; align-items: center; gap: 6px; overflow-x: auto; padding: 3px 0;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.outils-rang::-webkit-scrollbar { display: none; }
.outils-titre { flex: 0 0 auto; color: var(--muted); font-size: .68rem; letter-spacing: .06em; }
.outil {
  flex: 0 0 auto; min-width: 38px; height: 34px; padding: 0 9px;
  border: 1.5px solid var(--line); border-radius: 9px; background: var(--surface);
  font-size: .9rem; font-weight: 600; display: inline-flex; align-items: center;
  justify-content: center; cursor: pointer;
}
.outil.est-actif { background: var(--text); color: var(--surface); border-color: var(--text); }
.outil-large { padding: 0 12px; font-size: .82rem; font-weight: 600; }
.outil-sep { flex: 0 0 auto; width: 1px; height: 22px; background: var(--line); margin: 0 2px; }
.pastille {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  border: 1.5px solid var(--line); cursor: pointer;
}
.pastille-jaune { background: var(--jaune); }
.pastille-rose { background: var(--rose); }
.pastille-bleu { background: var(--bleu-postit); }
.pastille-menthe { background: var(--menthe); }
.pastille-encre { background: var(--text); }
.pastille-rouge { background: #B3392F; }
.pastille-vert { background: #2E6B4F; }
.pastille-bleu-encre { background: #2C4E86; }

.atelier-corps {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 16px 16px calc(24px + env(safe-area-inset-bottom));
}
.atelier-titre {
  width: 100%; border: 0; background: none; padding: 0 0 10px;
  font-size: 1.55rem; font-weight: 700; line-height: 1.2; color: var(--text);
}
.atelier-titre::placeholder { color: var(--muted); font-weight: 400; }
.atelier-titre:read-only { cursor: default; }

/* Le papier : la même encre et la même police que le reste, sur des lignes
   d'écolier. L'interligne est fixe pour que les lignes tombent juste. */
.papier-ligne {
  --interligne: 30px;
  min-height: 50vh; padding: 3px 14px 24px; border-radius: 10px;
  background-color: var(--surface);
  background-image: repeating-linear-gradient(var(--surface) 0 calc(var(--interligne) - 1px),
                                              var(--line) calc(var(--interligne) - 1px) var(--interligne));
  background-position: 0 6px;
  border: 1px solid var(--line);
  color: var(--text); font-family: var(--sans); font-size: 1rem;
  line-height: var(--interligne); outline: none;
  overflow-wrap: anywhere;
}
.papier-ligne:focus { border-color: var(--text); }
/* Une ligne par ligne, comme sur un cahier : aucune marge entre les
   paragraphes. Sauter une ligne, c'est alors laisser un paragraphe vide — et
   reculer l'efface, ce qui remonte le texte d'une seule ligne. Avec une marge,
   reculer sautait par-dessus le blanc et recollait à la phrase d'avant. */
.papier-ligne > *:first-child { margin-top: 0; }
.papier-ligne p { margin: 0; min-height: var(--interligne); }
.papier-ligne h2 { font-size: 1.28rem; line-height: var(--interligne); margin: 0; }
.papier-ligne h3 { font-size: 1.08rem; line-height: var(--interligne); margin: 0; }
.papier-ligne ul, .papier-ligne ol { margin: 0; padding-left: 1.4em; }
.papier-ligne li { line-height: var(--interligne); }
.papier-ligne hr { border: 0; border-top: 2px solid var(--line);
  margin: calc(var(--interligne) / 2 - 1px) 0; }
/* Rien ne déborde du téléphone : ni une image, ni un tableau, ni un long mot. */
.papier-ligne img { max-width: 100%; height: auto; border-radius: 8px; display: block;
  margin: 4px 0; }
.papier-ligne table {
  display: block; width: max-content; max-width: 100%; overflow-x: auto;
  border-collapse: collapse; margin: 0; font-size: .93rem;
}
.papier-ligne td, .papier-ligne th {
  border: 1px solid var(--line); padding: 6px 9px; min-width: 84px; vertical-align: top;
}
.papier-ligne th { background: var(--surface-2); font-weight: 700; }

.atelier-pied {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line); background: var(--surface);
}
.atelier-pied .btn { flex: 1; margin: 0; }
.atelier-domaines {
  flex: 0 0 auto; padding: 10px 14px; border-top: 1px solid var(--line);
  background: var(--surface-2); max-height: 34vh; overflow-y: auto;
}

/* Le choix des exercices : chaque question a besoin d'air autour d'elle, sinon
   les trois réglages se lisent comme un seul bloc. */
#exo-choix .field-label {
  display: block; margin: 26px 0 12px; font-size: .82rem; letter-spacing: .04em;
}
#exo-choix .field-label:first-of-type { margin-top: 18px; }
#exo-choix .ia-choix { gap: 10px; }
#exo-choix .ia-choix button { padding: 10px 16px; font-size: .8rem; }
#exo-choix .field { display: block; margin: 26px 0 0; }
#exo-choix .textarea { margin-top: 12px; line-height: 1.5; }
#exo-choix .note { margin: 20px 0 4px; line-height: 1.55; }
#exo-choix .sheet-foot { margin-top: 26px; }
#exo-source { margin: 6px 0 4px; font-size: 1.1rem; }
#exo-rang { margin: 6px 0 2px; color: var(--muted); }

/* Les exercices tirés d'un cours : un énoncé, des propositions, une réponse
   qui ne se montre que si on la demande. */
.atelier-pied-lecture { flex-wrap: wrap; }
.atelier-pied-lecture .btn-contour { flex: 1 1 auto; }
.exo-carte {
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 18px 16px; margin: 12px 0 4px;
}
.exo-enonce { font-size: 1.06rem; line-height: 1.55; margin: 0; }
.exo-choix { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.exo-prop {
  text-align: left; padding: 11px 13px; border: 1.5px solid var(--line);
  border-radius: 10px; background: var(--surface-2); font-size: .95rem; line-height: 1.4;
}
.exo-prop.est-choisi { border-color: var(--text); background: var(--surface); font-weight: 600; }
.exo-reponse {
  margin: 16px 0 0; padding-top: 12px; border-top: 1px dashed var(--line);
  font-weight: 600; line-height: 1.5;
}
/* Pourquoi c'est cette réponse : la règle, pas la paraphrase. */
.exo-explication { margin: 10px 0 0; color: var(--muted); line-height: 1.55; font-size: .92rem; }
.exo-verdict { display: flex; gap: 10px; }
.exo-verdict .btn { flex: 1; }
/* Le vert des post-it, pour ce qui mène à l'exercice et à la réussite. */
.btn-menthe {
  background: var(--menthe); border-color: var(--menthe); color: #1A1815; font-weight: 700;
}
.atelier-pied-lecture .btn-menthe { flex: 1 1 auto; margin: 0; }
/* Le bilan d'une série : la note, le mot, puis ce qu'il faut revoir. */
#exo-bilan .bilan-titre { text-align: center; margin: 18px 0 6px; }
#exo-bilan .bilan-mot { text-align: center; margin: 0 0 22px; }
#exo-bilan .field-label { display: block; margin: 8px 0 12px; }
.exo-faute {
  background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--rose);
  border-radius: 12px; padding: 13px 14px; margin-bottom: 10px;
}
.exo-faute-enonce { margin: 0; line-height: 1.5; }
.exo-faute-reponse { margin: 8px 0 0; font-weight: 700; line-height: 1.5; }
.exo-faute-pourquoi { margin: 6px 0 0; color: var(--muted); font-size: .9rem; line-height: 1.5; }
.outil[disabled] { opacity: .35; }

/* ── Les leçons ──────────────────────────────────────────────── */
/* Un cours se lit d'une traite : on lui donne la largeur d'un livre de poche,
   une ligne aérée, et rien qui clignote autour. */
.lecons-groupe { margin: 18px 0 8px; color: var(--muted); letter-spacing: .04em; }
.lecons-groupe:first-child { margin-top: 4px; }
.lecon-ligne { cursor: pointer; }
.lecon-domaine { color: var(--muted); letter-spacing: .04em; margin: 0 0 6px; }
.lecon-titre { font-size: 1.5rem; line-height: 1.2; margin: 0 0 18px; }
.lecon-texte { font-size: 1.02rem; line-height: 1.7; max-width: 62ch; }
.lecon-texte p { margin: 0 0 1.05em; }
.lecon-texte p:last-child { margin-bottom: 0; }
/* Le champ d'écriture suit le texte : on n'écrit pas un cours dans un guichet. */
.lecon-champ { min-height: 40vh; line-height: 1.6; }

/* ── Où se place le titre sur la carte ───────────────────────── */
.face.titre-haut   { justify-content: flex-start; }
.face.titre-milieu { justify-content: center; }
.face.titre-bas    { justify-content: flex-end; }
/* Ces réglages ne valent que hors pleine carte : là, l'image est en position
   absolue et doit garder toute la surface. */
.face.titre-bas:not(.fond):not(.plein) .face-text  { order: 3; }
.face.titre-bas:not(.fond):not(.plein) .face-media { order: 2; margin: 0 0 14px; }
.face.titre-milieu:not(.fond):not(.plein) .face-media { flex: 0 1 auto; max-height: 58%; }
/* Le titre posé en bas occuperait la place de l'invite. */
.face.titre-bas .face-hint { display: none; }

/* Images qui occupent toute la carte */
.face.fond, .face.plein { padding: 18px 0 0; }
.face.fond .face-media, .face.plein .face-media { position: absolute; inset: 0; margin: 0; z-index: 0; }
.face.fond .img-wrap, .face.plein .img-wrap { border-radius: 0; background: #0c0a12; }
.face.fond .img-main { object-fit: cover; }
.face.plein .img-main { object-fit: contain; }
.face.plein .img-backdrop {
  display: block; position: absolute; inset: -9%; width: 118%; height: 118%;
  object-fit: cover; filter: blur(30px) saturate(1.2) brightness(.85); z-index: 0;
}
/* Pas de « backdrop-filter » ici : sur Safari il aplatit le contexte 3D
   de la carte et fait transparaître la face avant en miroir. */
.face.fond .face-text, .face.plein .face-text {
  z-index: 2; max-width: 86%; margin: 0 auto; color: #1A1815;
  background: #FCFAF4; padding: 13px 18px; border-radius: var(--r-s);
  box-shadow: 0 8px 24px rgba(0,0,0,.3); font-size: 1.16rem;
}
.face.fond .face-tag, .face.plein .face-tag,
.face.fond .face-hint, .face.plein .face-hint {
  z-index: 2; color: #1A1815; width: fit-content; margin: 0 auto;
  padding: 4px 11px; border-radius: 3px; background: #FCFAF4;
  box-shadow: 0 2px 10px rgba(0,0,0,.2);
}
.face.fond .face-tag, .face.plein .face-tag {
  position: static; order: 0; margin-bottom: 10px;
  max-width: calc(100% - 36px);   /* la pastille garde le nom du domaine dedans */
  flex: 0 0 auto;
}
/* La réponse se lit toujours au centre de la carte : la position réglée
   dans l'éditeur ne vaut que pour la question. */
.face.face-back { justify-content: center; }
.face.face-back .face-text  { order: 1; }
.face.face-back .face-media { order: 2; margin: 14px 0 0; }
.face.face-back .face-tag { position: absolute; top: 13px; order: 0; margin-bottom: 0; }

/* L'état de la carte, en petites capitales, sous le tirage. */
.test-meta { display: flex; justify-content: center; gap: 8px; margin-top: 42px; }
#card-box {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: .6rem; letter-spacing: .14em;
  color: var(--muted); text-align: center;
}
.point-separateur {
  width: 5px; height: 5px; border-radius: 3px; background: var(--line-fort, var(--line));
  display: inline-block;
}

/* ── Le geste : glisser à droite pour réussi, à gauche pour manqué ──── */

/* L'indice se tient à cheval sur le bord bas de la carte : moitié dedans,
   moitié dehors. Il ne peut donc être ni recouvert par une image pleine, ni
   confondu avec le contenu de la carte. */
.stage { position: relative; }
.geste-indice {
  position: absolute; left: 0; right: 0; bottom: -26px; z-index: 4;
  align-items: center; justify-content: center; gap: 14px;
  pointer-events: none;
}
/* Le geste vaut des deux côtés : l'indice reste donc visible tout du long. */
.geste-indice { display: flex; }
.geste-indice .manuscrit {
  font-family: var(--plume); font-size: .95rem; color: var(--faint);
  background: var(--bg); padding: 2px 10px; border-radius: 100px; margin: 0;
}
.geste-indice i {
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-style: normal; font-size: 1.2rem; line-height: 1;
  background: var(--surface);
  box-shadow: 0 2px 10px rgba(26,24,21,.14);
  transition: transform .18s, border-color .18s, background .18s;
}
.rond-manque { border: 1.5px solid rgba(168,68,60,.55); color: #A8443C; }
.rond-reussi { border: 1.5px solid rgba(62,122,87,.55); color: #3E7A57; }

/* « manipulation » laisse défiler et pincer, mais retire le double-tap qui
   zoome : sans quoi Safari avale la seconde touche, et la carte ne se
   retourne plus quand on veut revoir la question. */
.flashcard { touch-action: manipulation; }
.flashcard {
  transition: transform .34s cubic-bezier(.2,.85,.3,1);
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.flashcard.en-glissement {
  transition: none;
  touch-action: none;
  will-change: transform;      /* la carte part sur sa propre couche */
}
/* Le contenu ne capte rien : le geste appartient à la carte entière. */
.flashcard .face-text, .flashcard .face-tag, .flashcard .face-hint,
.flashcard img { pointer-events: none; }

/* Le rond du côté visé s'affirme, sans quitter sa place. */
.stage:has(.vers-reussi) .rond-reussi {
  transform: scale(1.14); border-color: #3E7A57; background: rgba(74,142,104,.22);
}
.stage:has(.vers-manque) .rond-manque {
  transform: scale(1.14); border-color: #A8443C; background: rgba(197,74,64,.2);
}

/* Le verdict s'écrit au dos pendant le geste, et se renforce à mesure que la
   carte s'éloigne : à mi-chemin il s'annonce, au seuil il est franc. */
.marque-verdict {
  position: absolute; top: 44px; z-index: 3; pointer-events: none;
  font-family: var(--mono); font-size: .6rem; letter-spacing: .16em; text-transform: uppercase;
  padding: 7px 11px; border-radius: 9px; border: 1.5px solid currentColor;
  opacity: 0;
}
.marque-reussi { left: 16px; color: #3E7A57; background: rgba(74,142,104,.14); transform: rotate(-7deg); }
.marque-manque { right: 16px; color: #A8443C; background: rgba(197,74,64,.12); transform: rotate(7deg); }
.flashcard.vers-droite .marque-reussi,
.flashcard.vers-gauche .marque-manque { opacity: var(--avancement, 0); }
.flashcard.vers-reussi .marque-reussi { transform: rotate(-7deg) scale(1.08); }
.flashcard.vers-manque .marque-manque { transform: rotate(7deg) scale(1.08); }
.face.fond .marque-verdict, .face.plein .marque-verdict { top: auto; bottom: 20px; }

/* La carte répondue s'en va du côté du geste. */
.flashcard.partie-droite, .flashcard.partie-gauche {
  transition: transform .34s ease-in, opacity .34s ease-in; opacity: 0;
}
.flashcard.partie-droite { transform: translateX(115%) rotate(11deg); }
.flashcard.partie-gauche { transform: translateX(-115%) rotate(-11deg); }
/* Elle revient de l'autre bord, sans bruit, pour la carte suivante. */
.flashcard.arrive { animation: carte-arrive .34s cubic-bezier(.2,.85,.3,1); }
@keyframes carte-arrive {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

.actions-carte { display: flex; gap: 8px; margin-top: 14px; }
.actions-carte button {
  flex: 1; padding: 12px 8px; border-radius: 12px; background: var(--surface);
  border: 1px solid var(--line); color: var(--text);
  display: flex; align-items: center; justify-content: center; gap: 7px;
  font-size: .81rem; font-weight: 600;
}
.actions-carte i { width: 9px; height: 9px; border-radius: 5px; display: block; }
.point-passer { background: var(--gris-postit); }
.point-favori { background: var(--jaune); }
.point-modifier { background: var(--bleu-postit); }
.point-supprimer { background: var(--rose); }
.actions-carte #carte-favori.est-favori { background: var(--jaune); border: 1.5px solid var(--text); }
.actions-carte #carte-favori.est-favori i { background: #1A1815; }

.promo { text-align: center; font-family: var(--plume); font-size: 1.1rem; color: var(--muted); margin: 14px 0 0; }

/* ── Le compte rendu d'une séance ──────────────────────────────── */
#test-done { display: flex; flex-direction: column; gap: 14px; padding-top: 6px; }
.bilan-tete { display: flex; align-items: center; }
.bilan-tete .mono {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted);
}
.bilan-titre { font-size: 2rem; line-height: 1.12; margin: 0; }
.bilan-mot { margin: -6px 0 2px; font-size: 1.12rem; }

.bilan-chiffres { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* Le score comme un bout de papier collé : à peine arrondi. */
.bilan-score {
  background: var(--rose); border-radius: 3px; padding: 15px;
  display: flex; flex-direction: column; justify-content: center; gap: 2px; color: #1A1815;
}
.bilan-score.est-parfait { background: var(--menthe); }
.bilan-fraction { font-size: 2.4rem; font-weight: 700; line-height: 1; }
.bilan-score .manuscrit { margin: 0; font-size: 1.05rem; color: rgba(26,24,21,.72); }
.bilan-detail {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m);
  padding: 15px; display: flex; flex-direction: column; justify-content: center; gap: 9px;
}
.bilan-ligne { display: flex; align-items: center; gap: 9px; font-size: .84rem; }
.bilan-ligne i { width: 10px; height: 10px; border-radius: 5px; flex: none; }
.puce-reussies { background: var(--menthe); }
.puce-reprendre { background: var(--rose); }
.puce-passer { background: var(--gris-postit); }

.bilan-serie {
  display: flex; align-items: center; gap: 12px; padding: 15px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m);
}
/* Un galet, pas un rond : la série se compte à la main. */
.bilan-galet {
  width: 38px; height: 38px; flex: none; display: grid; place-items: center;
  border-radius: 48% 52% 46% 50%; background: var(--jaune); color: #1A1815;
  font-family: var(--plume); font-size: 1.15rem; font-weight: 700;
}
.bilan-serie div { display: flex; flex-direction: column; gap: 2px; }
.bilan-serie-titre { font-weight: 600; font-size: .95rem; }
.bilan-serie-mot { font-size: .78rem; color: var(--muted); }

.bilan-bloc { display: flex; flex-direction: column; gap: 9px; }
.bilan-bloc .mono {
  font-family: var(--mono); font-size: .6rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted);
}
.bilan-bloc > div { display: flex; flex-direction: column; gap: 8px; }
.bilan-carte {
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  border-left: 5px solid var(--tint, var(--rose));
  padding: 13px 14px; font-size: .88rem; line-height: 1.4;
}
.bilan-reste { margin: 0; font-size: 1.02rem; }
.bilan-suite-ligne {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  border-left: 5px solid var(--tint, var(--jaune)); padding: 12px 14px;
}
.bilan-suite-ligne span { font-weight: 600; font-size: .9rem; }
.bilan-suite-ligne small { font-size: .76rem; color: var(--muted); white-space: nowrap; }

/* Ce qu'on a touché en chemin, en pastilles. */
.bilan-touches { display: flex; flex-wrap: wrap; gap: 9px; }
.touche {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px;
  border-radius: 100px; font-size: .78rem; color: #1A1815;
}
.t-favori { background: rgba(245,214,90,.42); }
.t-modif { background: rgba(169,196,232,.4); }

.done-actions { display: flex; flex-direction: column; gap: 10px; }

/* ── Réglages : le profil et les performances ─────────────────── */
#view-reglages .bilan-tete { margin-bottom: 14px; }
#view-reglages .bilan-tete .mono {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted);
}

/* La fiche de profil, tranche jaune sur le côté comme un dossier. */
.profil {
  display: flex; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-m); overflow: hidden; margin-bottom: 18px;
}
.profil-liseré { width: 6px; flex: none; background: var(--jaune); }
.profil-corps { flex: 1; display: flex; align-items: center; gap: 14px; padding: 16px; min-width: 0; }
.profil-initiale {
  width: 46px; height: 46px; flex: none; display: grid; place-items: center;
  border-radius: 14px; background: var(--text); color: var(--jaune);
  font-size: 1.3rem; font-weight: 700;
}
.profil-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.profil-nom { font-size: 1.15rem; font-weight: 600; }
.profil-champ { font-size: 1.05rem; font-weight: 600; padding: 6px 10px; }
.profil-txt .manuscrit { margin: 0; font-size: 1rem; }
.lien-discret { background: none; border: 0; padding: 0; font-size: .78rem; font-weight: 500; color: var(--text); }

.bloc-reglage { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.bloc-reglage > .mono {
  font-family: var(--mono); font-size: .6rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted);
}
.perf-tuiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
/* Encadrées de la couleur d'un post-it : chaque chiffre a la sienne. */
.perf-tuile {
  background: var(--surface); border: 2px solid var(--tint, var(--line)); border-radius: 14px;
  padding: 14px; display: flex; flex-direction: column; gap: 5px;
}
.perf-tuile b { font-size: 1.4rem; line-height: 1; }
.perf-tuile .mono {
  font-family: var(--mono); font-size: .55rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}
.palier-rang i { width: 10px; height: 10px; border-radius: 5px; display: block; }

/* Une mention en marge, comme une note portée au crayon dans le cahier :
   un filet à gauche, de l'air autour, et le texte du corps — pas la
   petite typo grise des légendes. */
.mention {
  margin: 22px 0 26px; padding: 2px 0 2px 16px;
  border-left: 2px solid var(--tint, var(--jaune));
  display: flex; flex-direction: column; gap: 7px;
}
.mention .mono {
  font-family: var(--mono); font-size: .58rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--faint);
}
.mention p { margin: 0; font-size: .95rem; line-height: 1.6; color: var(--muted); }
.note.center { text-align: center; }

/* La feuille du profil : un aperçu qui suit ce qu'on tape. */
.profil-apercu {
  display: flex; align-items: center; gap: 14px; padding: 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m);
  margin-bottom: 18px;
}
.profil-apercu .profil-initiale { width: 54px; height: 54px; font-size: 1.5rem; }
.profil-apercu .input { flex: 1; min-width: 0; }

.pseudo-titre { font-size: 1.5rem; line-height: 1.2; margin: 6px 0 8px; text-align: center; }
#pseudo-sheet .manuscrit.center { margin-bottom: 20px; }
#pseudo-sheet .lien-nu { display: block; margin: 14px auto 0; color: var(--muted); }
.profil-apercu .manuscrit { margin: 0; font-size: 1.05rem; }
#profil-couleurs { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#profil-couleurs .swatch { width: 36px; height: 36px; aspect-ratio: auto; }

/* ── Courbe de l'oubli ────────────────────────────────────────── */
.courbe { display: flex; flex-direction: column; gap: 8px; margin: 16px 0 20px; }
.palier {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m);
  padding: 12px 14px; display: flex; align-items: center; gap: 12px;
  border-left: 5px solid var(--tint, var(--jaune));
}
.palier-rang {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--mono); font-size: .76rem;
  background: var(--surface-2); color: var(--muted);
}
.palier-nom { flex: 1; font-size: .88rem; font-weight: 600; line-height: 1.25; }
.palier-nom small { display: block; color: var(--faint); font-weight: 400; font-size: .74rem; }
.palier-champ { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.palier-champ input {
  width: 60px; border: 1.5px solid var(--line); border-radius: var(--r-s);
  background: var(--surface); padding: 8px 6px; text-align: center;
  font-weight: 700; -moz-appearance: textfield;
}
.palier-champ input::-webkit-outer-spin-button,
.palier-champ input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.palier-champ input:focus { outline: none; border-color: var(--text); }
.palier-champ select {
  border: 1.5px solid var(--line); border-radius: var(--r-s);
  background: var(--surface); padding: 8px 4px; font-size: .82rem;
}
.palier-champ .signe { font-weight: 700; color: var(--muted); }
.reglage-actions { display: flex; flex-direction: column; gap: 10px; margin-bottom: 26px; }

/* ── Bouton flottant et barre d'onglets ───────────────────────── */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
  background: var(--surface); border-top: 1px solid var(--line);
}
.tab {
  flex: 1; border: 0; background: none; color: var(--faint);
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 6px 0 4px; font-family: var(--mono); font-size: .56rem;
  letter-spacing: .1em; text-transform: uppercase;
  transition: color .18s, transform .18s;
}
.tab svg { width: 21px; height: 21px; fill: currentColor; }
.tab.is-active { color: var(--text); }
.tab.is-active svg {
  background: var(--jaune); border-radius: 4px; padding: 2px;
  width: 25px; height: 25px; margin-bottom: -2px; color: #1A1815;
}
.tab:active { transform: scale(.9); }

/* ── Feuille modale ───────────────────────────────────────────── */
/* Une feuille n'est plus un panneau qui monte du bas : c'est une page entière.
   Le panneau laissait toujours une bande de la page d'en dessous, qui recevait
   les touches à la place de ce qu'on visait, et sa hauteur se mesurait sur
   l'écran barres comprises — le pied tombait sous la barre du navigateur. Une
   page pleine n'a ni l'un ni l'autre défaut. Seule la confirmation garde sa
   petite boîte au milieu : ce n'est pas un écran, c'est une question. */
.sheet {
  position: fixed; inset: 0; z-index: 80; display: flex; align-items: stretch;
  height: 100%; height: 100dvh; max-height: 100dvh;
}
/* Toutes les feuilles sont sur le même plan : c'est donc l'ordre de la page qui
   décide laquelle passe devant. L'éditeur est déclaré tôt et s'ouvre pourtant
   par-dessus la liste des cartes — sans ces deux lignes, le voile de la liste
   recouvre ses champs, et le doigt tombe dans le vide. La confirmation, elle,
   doit passer avant tout, y compris l'éditeur. */
/* L'éditeur s'ouvre aussi depuis une séance, qui occupe tout l'écran au plan
   120 : il doit passer devant elle, et la confirmation devant lui. */
#editor.sheet { z-index: 145; }
/* L'atelier des leçons occupe tout l'écran, au plan 130 : ce qui s'ouvre
   par-dessus lui doit monter plus haut, sans quoi la feuille s'affiche
   derrière et le bouton paraît mort. */
#exercices-sheet.sheet { z-index: 140; }
#confirme.sheet { z-index: 150; }
.sheet-backdrop { position: absolute; inset: 0; background: rgba(26,24,21,.45); }
/* Une feuille courte s'arrête à son contenu : demander un nom n'occupe pas
   tout l'écran. Elle vient après la règle générale, sinon celle-ci l'emporte. */

.sheet-body {
  position: relative; width: 100%;
  /* Toute la page : la partie défilante a son repère, et rien ne dépasse. */
  height: 100%; max-height: 100%;
  background: var(--bg); border-radius: 0;
  display: flex; flex-direction: column; overflow: hidden;
  padding-top: env(safe-area-inset-top);
  animation: glisse .22s cubic-bezier(.2,.8,.3,1);
}
/* Elle vient de la droite, comme on tourne une page — plus du bas. */
@keyframes glisse { from { transform: translateX(4%); opacity: .6; } to { transform: none; opacity: 1; } }
/* Le voile n'a plus de raison d'être : il n'y a plus rien derrière à voiler. */
.sheet:not(.sheet-centree) .sheet-backdrop { display: none; }
.sheet-head {
  flex: 0 0 auto;
  /* Trois colonnes de largeur fixe aux extrémités : le titre reste centré
     même sans bouton à droite. */
  display: grid; grid-template-columns: 38px 1fr 38px; align-items: center; gap: 12px;
  padding: 14px 16px; border-bottom: 1px solid var(--line); background: var(--bg);
}
.sheet-head h2 { text-align: center; }
.sheet-centree .sheet-body,
.sheet-body.sheet-courte { height: auto; max-height: 88dvh; border-radius: var(--r-l); }

.sheet-scroll {
  flex: 1 1 auto; min-height: 0;      /* la clé du défilement dans une colonne flex */
  overflow-y: auto; overscroll-behavior: contain;
  padding: 4px 16px calc(20px + env(safe-area-inset-bottom));
  -webkit-overflow-scrolling: touch;
}
.sheet-foot { display: flex; flex-direction: column; gap: 10px; margin: 18px 0 6px; }
/* L'enregistrement se fait à l'encre ; la suite se propose en jaune. */
#btn-save-next {
  background: var(--jaune); border-color: var(--jaune); color: #1A1815; font-weight: 700;
}
/* La suppression est tenue à distance des enregistrements : sur un téléphone,
   le clavier qui se referme décale la page et le doigt manque sa cible. */
/* La barre de recherche et son filtre, côte à côte. */
.barre-filtre { display: flex; align-items: stretch; gap: 8px; margin-bottom: 12px; }
.barre-filtre .recherche { flex: 1; margin-bottom: 0; }
.btn-filtre {
  flex: 0 0 auto; width: 46px; border-radius: var(--r-s);
  border: 1.5px solid var(--line); background: var(--surface);
  display: grid; place-items: center;
}
.btn-filtre svg {
  width: 20px; height: 20px; fill: none; stroke: var(--text);
  stroke-width: 1.8; stroke-linecap: round;
}
.btn-filtre.est-actif { background: var(--text); border-color: var(--text); }
.btn-filtre.est-actif svg { stroke: var(--surface); }
/* Le tiroir des filtres, déplié sous la barre. */
.panneau-filtre {
  display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px;
  padding: 14px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--line);
}
.panneau-filtre .field-label { margin-top: 4px; }
.panneau-filtre .ia-source { align-self: flex-start; }
.panneau-filtre .ia-source.est-ouvert {
  background: var(--jaune); border-color: var(--jaune); color: #1A1815;
}
/* L'étoile d'une carte, dans son éditeur. */
.zone-favori { margin-top: 24px; }
.btn-favori {
  width: 100%; padding: 13px; border-radius: 14px;
  border: 1.5px solid color-mix(in srgb, var(--text) 22%, transparent);
  background: none; color: var(--text); font-size: .9rem; font-weight: 700;
}
.btn-favori.est-favori { background: var(--jaune); border-color: var(--jaune); color: #1A1815; }

/* Ranger une carte à la main : les paliers, en petites touches. */
.zone-palier {
  margin-top: 30px; padding-top: 22px;
  border-top: 1px dashed color-mix(in srgb, var(--text) 20%, transparent);
}
.zone-palier .note { margin: 4px 0 12px; }
.paliers-choix { display: flex; flex-wrap: wrap; gap: 7px; }
/* Le rang, puis la durée : le chiffre se tient un peu en retrait.*/
.palier-choix .mono { margin-right: 7px; opacity: .5; font-size: .72em; }
.palier-choix {
  padding: 7px 12px; border-radius: 100px;
  border: 1px solid var(--line); background: var(--surface);
  font-family: var(--mono); font-size: .68rem; color: var(--muted);
}
.palier-choix.is-active {
  background: var(--text); border-color: var(--text); color: var(--surface); font-weight: 700;
}
.fold {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m);
  margin: 16px 0; overflow: hidden;
}
.fold summary {
  padding: 14px 16px; font-weight: 700; cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between;
}
.fold summary::-webkit-details-marker { display: none; }
.fold summary::after { content: "⌄"; color: var(--faint); font-size: 1.2rem; line-height: 1; }
.fold[open] summary::after { content: "⌃"; }
.fold-body { padding: 0 16px 16px; }

/* Recto et verso se choisissent côte à côte : la comparaison est immédiate. */
.faces-cote { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.face-editor { margin-bottom: 6px; min-width: 0; }
.faces-cote .image-preview.has-image { height: 96px; }
.faces-cote .image-controls { flex-wrap: wrap; }
.faces-cote .btn-tiny { padding: 6px 10px; font-size: .74rem; }
.image-slot { display: flex; flex-direction: column; gap: 9px; }
.image-preview { display: none; }
.image-preview.has-image {
  display: block; height: 120px; border-radius: var(--r-s); overflow: hidden; background: var(--surface-2);
}
.image-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.image-controls { display: flex; gap: 8px; }
.overlay-fields { display: flex; flex-direction: column; gap: 8px; }

/* Une rangée courte, et les trois points qui déplient tout le nuancier. */
.couleur-rapide { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.couleur-rapide .swatch { width: 32px; height: 32px; aspect-ratio: auto; }
.swatch-plus {
  width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--line);
  background: var(--surface); color: var(--muted);
  font-size: 1rem; line-height: 1; letter-spacing: .05em;
  display: grid; place-items: center; transition: transform .14s, border-color .14s;
}
.swatch-plus:active { transform: scale(.9); }
.swatch-plus.is-open { border-color: var(--text); color: var(--text); }
#domain-palette-complete { margin-top: 14px; }
.hex-champ {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r-s);
  padding: 6px 10px; font-family: var(--mono); font-size: .82rem; color: var(--muted);
}
.hex-champ input {
  width: 78px; border: 0; background: none; padding: 0;
  font-family: var(--mono); font-size: .82rem; text-transform: uppercase;
}
.hex-champ input:focus { outline: none; }

.palette { display: grid; grid-template-columns: repeat(12, 1fr); gap: 5px; }
.swatch { aspect-ratio: 1; border-radius: 50%; border: 0; padding: 0; transition: transform .14s; }
.swatch.is-active { transform: scale(1.3); box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--text); }
.color-row { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.color-free {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 100px;
  padding: 5px 14px 5px 5px; font-size: .84rem; font-weight: 600; color: var(--muted);
}
.color-free input[type="color"] {
  width: 30px; height: 30px; border: 0; border-radius: 50%; padding: 0;
  background: none; cursor: pointer;
}
.color-free input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 50%; }
.color-free input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; border-radius: 50%; }
.color-name {
  display: block; margin: 12px 0 4px;
  font-family: var(--plume); font-size: 1.05rem; color: var(--muted);
}

.preview-stage { perspective: 1200px; margin: 18px auto 0; max-width: 250px; }
.preview-card .face { padding: 30px 16px 24px; }
.preview-card .face-text { font-size: .95rem; }
.preview-card .face.fond .face-text,
.preview-card .face.plein .face-text { font-size: .85rem; padding: 9px 13px; }
.preview-card .face-tag, .preview-card .face-hint { font-size: .58rem; }

.word-meter { margin: 4px 0 8px; display: flex; align-items: center; gap: 10px; }
.word-bar { flex: 1; height: 4px; background: var(--bg-2); overflow: hidden; }
#word-fill { height: 100%; width: 0; background: var(--jaune); transition: width .3s; }
#word-fill.over { background: var(--rouge); }
.word-count { font-family: var(--mono); font-size: .64rem; color: var(--faint); }
.error { color: var(--rouge); font-size: .86rem; font-weight: 600; }

/* ── Demande de confirmation ──────────────────────────────────── */
.sheet-centree { align-items: center; justify-content: center; padding: 24px; }
.sheet-centree .sheet-backdrop { display: block; }
.papier-confirme {
  position: relative; overflow: hidden; width: 100%; max-width: 380px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px;
  padding: 24px 22px 20px; box-shadow: var(--ombre-l);
  animation: monte .26s cubic-bezier(.2,.8,.3,1);
}
/* Un bout de papier froissé : plis en biais, taches d'encre, grain fin. */
.papier-confirme::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(104deg, transparent 0 37.6%, var(--pli-ombre) 38%, transparent 38.5%),
    linear-gradient(104deg, transparent 0 38.5%, var(--pli-lumiere) 39%, transparent 39.6%),
    linear-gradient(69deg, transparent 0 71%, var(--pli-ombre) 71.4%, transparent 72%),
    linear-gradient(159deg, transparent 0 19%, var(--pli-lumiere) 19.5%, transparent 20.2%),
    radial-gradient(ellipse 26px 15px at 17% 82%, var(--tache), transparent 72%),
    radial-gradient(ellipse 10px 8px at 88% 24%, var(--tache), transparent 72%),
    var(--grain);
  background-size: auto, auto, auto, auto, auto, auto, 90px 90px;
}
.papier-confirme > * { position: relative; z-index: 1; }
.confirme-titre {
  margin: 0; font-family: var(--plume); font-weight: 700; font-size: 1.5rem; line-height: 1.2;
}
.confirme-actions { display: flex; gap: 10px; margin-top: 20px; }
.confirme-actions .btn { flex: 1; }
/* Le bouton de confirmation prend le rose des post-it, écriture en encre. */
#confirme-oui { background: var(--rose); border-color: var(--rose); color: #1A1815; }

/* ── Notification ─────────────────────────────────────────────── */
.toast {
  position: fixed; left: 16px; right: 16px; bottom: calc(var(--barre) + 16px); z-index: 120;
  background: var(--text); color: var(--surface);
  padding: 13px 18px; border-radius: var(--r-m); box-shadow: var(--ombre-l);
  font-size: .89rem; font-weight: 600; text-align: center; animation: monte .28s;
}
.toast.is-error { background: var(--rouge); color: #FCFAF4; }

/* ── Grand écran ──────────────────────────────────────────────── */
@media (min-width: 760px) {
  main { max-width: 860px; padding: 18px 28px 120px; }
  h1 { font-size: 1.9rem; }
  .feuille { margin-inline: -28px; padding-inline: 34px 40px; }
  .feuille::before { left: 42px; }
  .pensee { font-size: 1.7rem; line-height: 32px; }
  .stat-row { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .stat-row .stat:first-child { grid-column: auto; }
  .postits, .domain-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .deck-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .carte-encre { max-width: 560px; }
  .flashcard { aspect-ratio: 3 / 2; max-width: 560px; }
  .face-text { font-size: 1.42rem; }
  .face.fond .face-text, .face.plein .face-text { font-size: 1.42rem; padding: 15px 22px; }
  .carte-difficulte { max-width: 560px; margin: 18px auto 0; }
  .done-actions { flex-direction: row; justify-content: center; }
  .done-actions .btn { width: auto; padding: 12px 30px; }
  .setup-card { max-width: 520px; }
  .courbe, .reglage-actions { max-width: 620px; }
  .reglage-actions { flex-direction: row; }
  .tabbar {
    left: 50%; right: auto; bottom: 20px; transform: translateX(-50%);
    width: auto; gap: 4px; border: 1px solid var(--line);
    border-radius: 100px; padding: 6px 10px; box-shadow: var(--ombre-l);
  }
  .tab { flex-direction: row; gap: 8px; padding: 8px 16px; border-radius: 100px; font-size: .62rem; }
  .toast { left: 50%; right: auto; transform: translateX(-50%); min-width: 300px; }
  .sheet { align-items: center; justify-content: center; padding: 24px; }
  .sheet-body { max-width: 560px; height: auto; max-height: 88vh; max-height: 88dvh;
    border-radius: var(--r-l); animation: monte .3s; }
  .preview-stage { max-width: 300px; }
}