/* ═══════════════════════════════════════════════════════════════════
   Propulse WORK — app.css

   Une seule direction : l'aurore (appli/DESIGN.md). Les jetons sont
   écrits ici une fois et jamais réinventés d'un écran à l'autre.

   Les couleurs --l1, --l2 et --ac sont réglées par l'app (le ciel du
   matin) ; tout le reste est fixe.

   Trois largeurs, une seule scène :
     · téléphone (< 620)  — plein écran, les feuilles montent du bas ;
     · tablette (620–899) — la même chose, pas plus large que la main ;
     · PC (≥ 900)         — la scène prend TOUT l'écran : le texte en
                            colonne à gauche, la mascotte grande à
                            droite, les feuilles glissent par la droite.
   Le 12/09 l'app était un téléphone simulé au milieu d'un écran noir :
   Ismail l'a vu « compressé, avec du vide à côté ». C'était ça.

   ⚠ LE 13/09, L'AUDIT A MESURÉ 14 TAILLES DE TEXTE, 21 CIBLES SOUS 44 PX,
   UNE LOUPE TRACÉE À LA MAIN, 7 RAYONS ET UN CIEL QUI BOUGEAIT EN BOUCLE
   DERRIÈRE LE TEXTE. Le contrat interdit les cinq. D'où les jetons --f1 à
   --f5, --cible, --r1 à --r3, et plus aucune animation infinie. Une taille,
   un rayon ou une durée qui n'est pas un jeton n'a rien à faire ici.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --nuit: #07070c;
  --encre: #f5f3ff;
  --encre-2: #c2bed8;
  --encre-3: #a8a3c2;
  --voile: rgb(245 243 255 / .08);
  --voile-2: rgb(245 243 255 / .14);
  --trait: rgb(245 243 255 / .16);

  --l1: #ff6a1f;
  --l2: #1e5f8c;
  --ac: #ff9a3c;

  --titre: 'Bricolage Grotesque', system-ui, sans-serif;
  --texte: 'Inter', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;

  /* L'ÉCHELLE — cinq tailles, et aucune autre (contrat, règle d'interface 5). */
  --f1: 11px;    /* les repères en mono : dates, étiquettes, où ça vit */
  --f2: 13px;    /* le texte second : raisons, aides, détails */
  --f3: 16px;    /* le texte courant, les champs, les boutons — 16 et pas 15 : en dessous, iOS zoome dans les champs */
  --f4: 22px;    /* les titres de carte et de feuille */
  --f5: 32px;    /* le grand titre de l'écran */

  /* la plus petite chose qu'un pouce doit pouvoir toucher (règle d'interface 10) */
  --cible: 44px;

  /* UNE FAMILLE DE RAYONS : petit, moyen, grand — et la pilule */
  --r1: 10px;
  --r2: 16px;
  --r3: 22px;
  --pilule: 999px;

  --ombre: 0 16px 40px rgb(0 0 0 / .55);

  /* UN SEUL MOUVEMENT : 220 ms, une seule courbe (règle d'interface 8) */
  --t: .22s;
  --courbe: cubic-bezier(.22, .61, .36, 1);

  --marge: 26px;      /* la marge de la colonne de texte */
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--nuit); height: 100%; }
body {
  margin: 0; background: var(--nuit); color: var(--encre);
  font: 400 var(--f3)/1.6 var(--texte); -webkit-font-smoothing: antialiased;
  min-height: 100dvh; overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}
:focus-visible { outline: 2px solid var(--ac); outline-offset: 3px; border-radius: var(--r1); }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
/* ce qui s'explique au toucher ne doit pas ouvrir le menu du navigateur */
button[data-r], .bascule-l, .emporter, .cl { -webkit-touch-callout: none; user-select: none; }

/* ── la scène : plein écran, partout ──────────────────────────────── */
.app {
  position: relative; width: 100%; min-height: 100dvh; overflow: hidden;
  background: var(--nuit); display: flex; flex-direction: column;
}

/* ── l'aurore : deux lueurs, le grain, le voile ───────────────────────
   ⚠ ELLES NE RESPIRENT PLUS. Jusqu'au 13/09 les deux lueurs bougeaient en
   boucle, 14 et 20 secondes, derrière tout ce qu'on lisait. Le contrat est
   net — « rien ne clignote, ne défile ni ne s'anime en fond pendant que je
   lis » — et il tranche lui-même le conflit : « quand les deux se
   contredisent, c'est le TDAH qui gagne ». Le caractère reste dans la
   matière : les lueurs, le grain, un ciel neuf chaque matin. */
.ciel { position: absolute; inset: 0; overflow: hidden; }
.ciel::before, .ciel::after {
  content: ''; position: absolute; border-radius: 50%; filter: blur(22px);
  transition: background var(--t) var(--courbe), opacity var(--t) var(--courbe);
}
.ciel::before {
  width: 460px; height: 460px; left: -140px; top: -170px;
  background: radial-gradient(circle, var(--l1), transparent 62%); opacity: .42;
}
.ciel::after {
  width: 420px; height: 420px; right: -120px; bottom: -110px;
  background: radial-gradient(circle, var(--l2), transparent 64%); opacity: .5;
}

.grain {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: .055; mix-blend-mode: overlay; pointer-events: none;
}

/* la mascotte, PETITE : une présence, pas une affiche (Ismail, 12/09 :
   « pas besoin qu'elle prenne autant de place »). Le repère n'est pas la
   tête, ce sont les doigts (à 78 % de la hauteur du dessin) : ils tombent
   au ras du bouton. Le ventre s'efface en fondu avant la coupe du dessin,
   pour qu'aucun bord franc ne dépende de l'état. */
.lapin {
  position: absolute; z-index: 1; right: -8px; bottom: 165px;
  height: min(21vh, 150px); width: auto; opacity: .94; pointer-events: none;
  filter: drop-shadow(0 10px 30px rgb(0 0 0 / .5));
  -webkit-mask-image: linear-gradient(#000 82%, transparent 100%);
  mask-image: linear-gradient(#000 82%, transparent 100%);
  transition: opacity var(--t) var(--courbe), transform var(--t) var(--courbe);
}
/* ⚠ ELLE NE PARAÎT QUE SUR LES ÉCRANS VIDES. Sur la pile et pendant la
   séance, elle passait derrière les cartes et le champ : jolie, et en trop.
   « Une seule chose à l'écran » vaut aussi pour la mascotte. */
.app[data-etat="plein"] .lapin,
.app[data-etat="seance"] .lapin { opacity: 0; transform: translateY(14px); }

/* le voile : ce qui rend le texte lisible quel que soit le ciel */
.app::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(180deg, rgb(7 7 12 / .62) 0%, rgb(7 7 12 / .12) 26%,
    rgb(7 7 12 / .1) 62%, rgb(7 7 12 / .58) 100%);
}
/* une feuille ouverte assombrit le reste — et un clic dessus la ferme */
.app:has(.feuille[data-ouverte])::after {
  content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: rgb(7 7 12 / .38); animation: apparait var(--t) var(--courbe);
}
@keyframes apparait { from { opacity: 0; } }

/* ── le haut : la date, quatre ronds ──────────────────────────────── */
.haut {
  position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 18px 18px 0 var(--marge);
}
/* ⚠ La date peut passer sur deux lignes : avec quatre ronds de 44 px sur un
   téléphone, une date forcée sur une ligne débordait sous les ronds. */
.date { margin: 0; font: 500 var(--f1)/1.35 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--encre-3); max-width: 11rem; }
.outils { display: flex; gap: 4px; flex: 0 0 auto; }
.rond {
  width: var(--cible); height: var(--cible); border-radius: 50%; border: 1px solid var(--trait);
  background: var(--voile); cursor: pointer; display: grid; place-items: center; color: var(--encre-2); padding: 0;
  transition: background var(--t) var(--courbe), border-color var(--t) var(--courbe), color var(--t) var(--courbe);
}
.rond:hover { background: var(--voile-2); color: var(--encre); }
.rond .icone { width: 20px; height: 20px; display: block; }
/* pas une icône : l'échantillon du ciel choisi, qui change avec lui */
.rond > i { width: 16px; height: 16px; border-radius: 50%; background: linear-gradient(135deg, var(--l1), var(--l2)); display: block; }
.rond[aria-pressed="true"] { background: var(--ac); border-color: var(--ac); color: #1a0d02; }

/* ── l'écran du matin : un seul état visible à la fois ────────────── */
.matin { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; padding: 0 var(--marge); }
.matin > div { flex: 1; display: flex; flex-direction: column; padding-top: 34px; }

.sur { margin: 0; font: 500 var(--f1)/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ac); }
h1 { margin: 10px 0 0; font: 700 var(--f5)/1.08 var(--titre); letter-spacing: -.026em; }
h1 em { font-style: normal; color: var(--ac); }
h1:focus, h2:focus { outline: none; }
h2 { margin: 10px 0 0; font: 700 var(--f4)/1.15 var(--titre); letter-spacing: -.02em; }
.d { margin: 16px 0 0; font-size: var(--f3); line-height: 1.62; color: var(--encre-2); max-width: 22rem; }
.quoi, .pourquoi { margin: 22px 0 0; padding-left: 14px; border-left: 2px solid var(--ac); font-size: var(--f2); line-height: 1.55; color: var(--encre-2); }
.pourquoi:empty { display: none; }
.quoi b { color: var(--encre); font-weight: 600; }
.depuis { margin: 8px 0 0; font: 400 var(--f1) var(--mono); color: var(--encre-3); }

/* ── LA PILE — disposition tranchée par Ismail le 12/09 sur trois ─────
   Celle de devant se lit, les autres se COMPTENT. Elles ne portent aucun
   texte lisible, et c'est le point : on veut savoir combien il en reste
   sans ajouter trois choses à lire sur un écran qui n'en veut qu'une.
   ⚠ Les cartes sont ancrées EN BAS. Centrées, elles se recouvraient
   presque entièrement et la pile perdait sa seule raison d'être. */
.phrase { margin: 18px 0 0; font-size: var(--f3); line-height: 1.55; color: var(--encre-2); }
.phrase b { color: var(--encre); font-weight: 600; }

.pile { position: relative; height: 330px; margin-top: 16px; }
.carte {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 20px; border-radius: var(--r3);
  background: #12121c; border: 1px solid var(--trait);
  transition: transform var(--t) var(--courbe), opacity var(--t) var(--courbe);
}
.carte[data-rang="0"] { transform: none; z-index: 4; border-color: rgb(255 154 60 / .55); box-shadow: var(--ombre); }
.carte[data-rang="1"] { transform: translateY(-26px) scale(.955); z-index: 3; opacity: .8; background: #14141f; }
.carte[data-rang="2"] { transform: translateY(-48px) scale(.912); z-index: 2; opacity: .55; background: #15151f; }
.carte[data-rang="3"] { transform: translateY(-67px) scale(.87); z-index: 1; opacity: .32; background: #16161f; }
.carte:not([data-rang="0"]) { height: 128px; }
.carte:not([data-rang="0"]) > * { visibility: hidden; }
.carte h2 { margin: 0; font: 700 var(--f4)/1.16 var(--titre); letter-spacing: -.02em; }
.carte .raison { margin: 10px 0 0; font-size: var(--f2); line-height: 1.5; color: var(--encre-2); }
.eti { margin: 0 0 9px; font: 500 var(--f1) var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ac); }
/* LE COÛT, AVANT DE COMMENCER — ce que l'app a vu, jamais une estimation (règle 3) */
.cout { margin: 12px 0 0; font: 400 var(--f1)/1.5 var(--mono); color: var(--encre-3); }
.cout b { color: var(--encre-2); font-weight: 500; }

.tourner {
  display: block; margin: 14px auto 0; background: none; min-height: var(--cible);
  border: 1px solid var(--trait); border-radius: var(--pilule); padding: 0 20px;
  font: 400 var(--f2) var(--texte); color: var(--encre-3); cursor: pointer;
  transition: color var(--t) var(--courbe), border-color var(--t) var(--courbe);
}
.tourner:hover { color: var(--encre); border-color: var(--encre-3); }

/* CE QUI EST FINI SE VOIT, sur l'écran du matin (règle 7) — et ce qui est en
   sourdine se DIT. Une ligne, jamais un badge, et rien quand il n'y a rien. */
.fini {
  display: block; width: 100%; min-height: var(--cible); margin: 6px 0 0; padding: 0 2px;
  background: none; border: 0; text-align: left; cursor: pointer;
  font: 400 var(--f2)/1.45 var(--texte); color: var(--encre-3);
  transition: color var(--t) var(--courbe);
}
.fini:hover { color: var(--encre-2); }
.fini::after { content: ' →'; color: var(--ac); }

/* L'OUTIL LUI-MÊME (14/09) — en tête de Maintenant, et SEULEMENT quand quelque chose cloche. Pas de rouge (le
   contrat le réserve, l'audit le mesure) : le trait de l'accent dit « c'est ici qu'on agit », et le mot suffit sans
   la couleur. Le fond est à peine teinté, et assez opaque pour que le ciel ne passe pas sous le texte.
   ⚠ IL PREND LA PLACE DE LA PHRASE DU JOUR. Posé en plus d'elle, avec une étiquette et un lien sur sa propre ligne,
   il poussait « Commencer » 88 px sous le bord d'un téléphone de 690 px (mesuré par work-outil.mjs) ; et « une seule
   presse » ne se dit pas honnêtement quand plus rien n'est vérifié. Tout le bloc est le lien. */
.outil { position: relative; z-index: 2; margin: 14px 0 0; }
.outil__lien {
  display: block; min-height: var(--cible); padding: 10px 14px;
  border-left: 2px solid var(--ac); border-radius: 0 var(--r2) var(--r2) 0;
  background: color-mix(in srgb, var(--ac) 9%, rgb(7 7 12 / .78));
  color: var(--encre); text-decoration: none;
  transition: background var(--t) var(--courbe);
}
.outil__lien:hover { background: color-mix(in srgb, var(--ac) 15%, rgb(7 7 12 / .78)); }
.outil__titre { display: block; font: 600 var(--f3)/1.4 var(--texte); color: var(--encre); }
.outil__titre::after { content: '\00a0→'; color: var(--ac); }
.outil__d { display: block; margin-top: 2px; max-width: 34rem; font-size: var(--f2); line-height: 1.5; color: var(--encre-2); }
.app[data-outil-dit] .phrase { display: none; }
.app[data-outil-dit] .matin > div { padding-top: 16px; }
@media (min-width: 900px) { .outil { max-width: 680px; margin-top: 26px; } }
/* …et dans les listes qui viennent de la surveillance : arrêtée, elles décrivent le monde de son dernier passage */
.fige { margin: 0 0 14px; padding-left: 12px; border-left: 2px solid var(--ac); font-size: var(--f2); line-height: 1.5; color: var(--encre); }

/* ── LA SÉANCE — on est entré, le ciel se calme ───────────────────── */
.app[data-etat="seance"] .ciel::before { opacity: .17; }
.app[data-etat="seance"] .ciel::after { opacity: .26; }

.minuteur { display: flex; align-items: center; gap: 10px; margin-top: 20px; font: 400 var(--f1) var(--mono); color: var(--encre-3); }
.jauge { flex: 1; height: 3px; border-radius: var(--pilule); background: rgb(245 243 255 / .12); overflow: hidden; }
.jauge i { display: block; height: 100%; width: 0; background: var(--ac); border-radius: var(--pilule); transition: width var(--t) var(--courbe); }
/* L'APP COUPE : à la cible, elle dit qu'on peut s'arrêter là (règle 4) */
.decoupe { margin: 12px 0 0; padding-left: 14px; border-left: 2px solid var(--trait); font-size: var(--f2); line-height: 1.5; color: var(--encre-2); }
.champ {
  width: 100%; background: rgb(7 7 12 / .55); border: 1px solid var(--trait); border-radius: var(--r2);
  padding: 13px 15px; color: var(--encre); font: 400 var(--f3)/1.5 var(--texte); resize: none;
}
.champ::placeholder { color: var(--encre-3); }
.champ:focus { outline: none; border-color: var(--ac); }

/* les actions vivent en bas, là où le pouce arrive */
.actes { margin-top: auto; padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 10px; }
.go {
  background: var(--voile); border: 1px solid rgb(245 243 255 / .26);
  border-radius: var(--r3); padding: 17px; width: 100%; font: 600 var(--f3) var(--texte); color: var(--encre);
  cursor: pointer; transition: background var(--t) var(--courbe), border-color var(--t) var(--courbe), transform var(--t) var(--courbe);
}
.go:hover { background: var(--voile-2); border-color: rgb(245 243 255 / .4); }
.go:active { transform: scale(.985); }
.go--plein { background: var(--ac); border-color: var(--ac); color: #1a0d02; }
.go--plein:hover { background: var(--ac); filter: brightness(1.06); }
.mineurs { display: flex; gap: 8px; }
.mn {
  flex: 1; min-height: var(--cible); background: none; border: 0; padding: 0 11px; border-radius: var(--r2); cursor: pointer;
  font: 400 var(--f2) var(--texte); color: var(--encre-3);
  transition: color var(--t) var(--courbe), background var(--t) var(--courbe);
}
.mn:hover { color: var(--encre-2); background: rgb(245 243 255 / .05); }

/* le champ d'une ligne : le vide-tête et « où j'en suis » */
.ligne { display: flex; gap: 8px; align-items: stretch; }
.ligne--haut { margin-top: 14px; }
.ligne input, .ligne textarea {
  flex: 1; min-width: 0; background: rgb(7 7 12 / .55); border: 1px solid var(--trait);
  border-radius: var(--r2); padding: 12px 15px; color: var(--encre); font: 400 var(--f3)/1.5 var(--texte);
  resize: none;
}
.ligne input::placeholder, .ligne textarea::placeholder { color: var(--encre-3); }
.ligne input:focus, .ligne textarea:focus { outline: none; border-color: var(--ac); }
.ligne button {
  flex: 0 0 auto; min-height: var(--cible); background: var(--ac); border: 0; border-radius: var(--r2); padding: 0 16px;
  font: 600 var(--f3) var(--texte); color: #1a0d02; cursor: pointer;
}
.aide { margin: 0; font: 400 var(--f1)/1.5 var(--mono); color: var(--encre-3); }
form .aide { margin-top: -2px; }

/* UN SIGNE IMMÉDIAT : ce qui attend le serveur le dit tout de suite (règle d'interface 3) */
[aria-busy="true"] { opacity: .72; cursor: progress; }

/* ── les feuilles : elles montent du bas, jamais de modale ────────── */
.feuille {
  position: absolute; z-index: 5; inset: auto 0 0 0; max-height: 86%;
  background: rgb(10 10 16 / .9); backdrop-filter: blur(20px);
  border-top: 1px solid rgb(245 243 255 / .12); border-radius: var(--r3) var(--r3) 0 0;
  padding: 16px 20px 24px; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: rgb(245 243 255 / .18) transparent;
  transform: translateY(102%); transition: transform var(--t) var(--courbe);
}
.feuille[data-ouverte] { transform: translateY(0); }
.poignee { width: 38px; height: 4px; border-radius: var(--pilule); background: rgb(245 243 255 / .22); margin: 0 auto 10px; }
.fh { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.fh h2 { margin: 0; font-size: var(--f4); }
.fh button {
  flex: 0 0 auto; min-height: var(--cible); min-width: var(--cible); margin-right: -10px; padding: 0 10px;
  background: none; border: 0; color: var(--encre-3); font: 400 var(--f2) var(--texte); cursor: pointer;
}
.fh button:hover { color: var(--encre); }
/* la loupe de l'en-tête : la même porte que celle du haut, depuis la feuille */
.fh h2 { margin-right: auto; }
.fh .fh-chercher { margin-right: 0; padding: 0; display: grid; place-items: center; }
.fh .fh-chercher .icone { width: 20px; height: 20px; display: block; }
.lab { margin: 16px 0 8px; font: 500 var(--f1) var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--encre-3); }

/* les notes du vide-tête */
.notes { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.note {
  display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 12px;
  background: var(--voile); border: 1px solid rgb(245 243 255 / .08); border-radius: var(--r2);
  transition: opacity var(--t) var(--courbe), transform var(--t) var(--courbe);
}
.note[data-reprise] { border-color: var(--ac); }
.note__t { flex: 1; min-width: 0; font-size: var(--f3); line-height: 1.45; overflow-wrap: anywhere; }
.note__q { display: block; margin-top: 3px; font: 400 var(--f1) var(--mono); color: var(--encre-3); }
.note__a { display: flex; gap: 4px; flex: 0 0 auto; }
.note__a button {
  min-height: var(--cible); min-width: var(--cible); display: grid; place-items: center;
  background: none; border: 1px solid var(--trait); border-radius: var(--r1); padding: 0 10px;
  font: 500 var(--f1) var(--mono); color: var(--encre-3); cursor: pointer;
  transition: color var(--t) var(--courbe), border-color var(--t) var(--courbe);
}
.note__a button .icone { width: 16px; height: 16px; display: block; }
.note__a button:hover { color: var(--encre); border-color: var(--encre-3); }
.note__a button[data-faire-reprise][aria-pressed="true"] { color: var(--ac); border-color: var(--ac); }
.vide-notes { margin: 14px 0 0; font-size: var(--f2); line-height: 1.5; color: var(--encre-3); }

/* le ciel du matin */
.ciels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cl {
  position: relative; border: 1px solid var(--trait); border-radius: var(--r2); padding: 0; height: 74px;
  cursor: pointer; overflow: hidden; background: #0a0a10;
  transition: border-color var(--t) var(--courbe), transform var(--t) var(--courbe);
}
.cl:hover { transform: translateY(-2px); }
.cl[aria-pressed="true"] { border-color: var(--encre); }
.cl i { position: absolute; border-radius: 50%; filter: blur(9px); }
.cl i:nth-child(1) { width: 56px; height: 56px; left: -14px; top: -16px; opacity: .75; }
.cl i:nth-child(2) { width: 48px; height: 48px; right: -14px; bottom: -14px; opacity: .6; }
.cl span { position: absolute; left: 0; right: 0; bottom: 7px; font: 500 var(--f1) var(--mono); letter-spacing: .06em; color: var(--encre-2); text-align: center; }
.rangee { display: flex; gap: 8px; align-items: center; }
.tirage {
  flex: 1; min-height: var(--cible); background: var(--voile); border: 1px solid rgb(245 243 255 / .18); border-radius: var(--r2);
  padding: 0 12px; font: 600 var(--f2) var(--texte); color: var(--encre); cursor: pointer;
  transition: background var(--t) var(--courbe);
}
.tirage:hover { background: var(--voile-2); }
.garder { min-height: var(--cible); background: none; border: 1px solid rgb(245 243 255 / .18); border-radius: var(--r2); padding: 0 14px; font: 400 var(--f2) var(--texte); color: var(--encre-3); cursor: pointer; }
.garder[aria-pressed="true"] { color: var(--ac); border-color: var(--ac); }
.trois { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pick { display: flex; flex-direction: column; gap: 6px; align-items: center; background: rgb(245 243 255 / .04); border: 1px solid rgb(245 243 255 / .1); border-radius: var(--r2); padding: 10px 6px; }
.pick input { appearance: none; -webkit-appearance: none; width: 100%; height: var(--cible); border: 0; border-radius: var(--r1); background: none; cursor: pointer; padding: 0; }
.pick input::-webkit-color-swatch-wrapper { padding: 0; }
.pick input::-webkit-color-swatch { border: 1px solid rgb(255 255 255 / .16); border-radius: var(--r1); }
.pick span { font: 400 var(--f1) var(--mono); letter-spacing: .04em; color: var(--encre-3); }
.bascule-l { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 12px 14px; background: rgb(245 243 255 / .04); border: 1px solid rgb(245 243 255 / .1); border-radius: var(--r2); cursor: pointer; }
.bascule-l input { position: absolute; opacity: 0; width: 0; height: 0; }
.bascule { flex: 0 0 auto; width: 34px; height: 19px; border-radius: var(--pilule); background: #23232e; position: relative; transition: background var(--t) var(--courbe); }
.bascule::after { content: ''; position: absolute; top: 2.5px; left: 2.5px; width: 14px; height: 14px; border-radius: 50%; background: var(--encre-3); transition: transform var(--t) var(--courbe), background var(--t) var(--courbe); }
.bascule-l input:checked + .bascule { background: color-mix(in srgb, var(--ac) 40%, #23232e); }
.bascule-l input:checked + .bascule::after { transform: translateX(15px); background: var(--ac); }
.bascule-l em { font-style: normal; font-size: var(--f2); color: var(--encre-2); }
.bascule-l em b { display: block; color: var(--encre); font-weight: 600; font-size: var(--f2); }
.mesure { margin: 14px 0 0; font: 400 var(--f1) var(--mono); color: var(--encre-3); display: flex; justify-content: space-between; gap: 8px; }
.mesure b { color: #7fd6a2; font-weight: 500; }
.mesure b[data-faible] { color: var(--ac); }

/* LA FICHE : une liste de faits, chacun corrigeable d'un geste.
   ⚠ Le fait est un BOUTON pleine largeur, pas un champ posé là en permanence.
   Treize champs ouverts en même temps, ce sont treize choses à l'écran — et la
   première des dix règles n'en veut qu'une. Le champ n'apparaît qu'au moment
   où on le touche. */
.faits { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.fait { display: block; width: 100%; min-height: var(--cible); text-align: left; padding: 9px 12px; background: var(--voile);
  border: 1px solid rgb(245 243 255 / .08); border-radius: var(--r2); cursor: pointer; font: inherit;
  transition: border-color var(--t) var(--courbe); }
.fait:hover { border-color: rgb(245 243 255 / .2); }
.fait b { display: block; font: 500 var(--f1) var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--encre-3); }
.fait span { display: block; margin-top: 3px; font-size: var(--f3); line-height: 1.4; color: var(--encre); overflow-wrap: anywhere; }
.fait span.rien { color: var(--encre-3); font-style: italic; }
.fait--requis b::after { content: ' ·'; color: var(--ac); }
.fait-champ { display: flex; gap: 6px; align-items: stretch; margin-top: 5px; }
.fait-champ input, .fait-champ select, .fait-champ textarea {
  flex: 1; min-width: 0; min-height: var(--cible); padding: 8px 10px; background: #0a0a10; color: var(--encre);
  border: 1px solid var(--ac); border-radius: var(--r1); font: inherit; font-size: var(--f3);
}
.fait-champ button { flex: 0 0 auto; min-height: var(--cible); min-width: var(--cible); padding: 0 12px; background: none; border: 1px solid var(--trait);
  border-radius: var(--r1); font: 500 var(--f1) var(--mono); color: var(--encre-2); cursor: pointer; }
.fait-aide { display: block; margin-top: 5px; font: 400 var(--f1) var(--mono); color: var(--encre-3); }

/* LA PHRASE D'INTRODUCTION D'UNE FEUILLE. Elle était écrite cinq fois en
   style en dur, et le contrôle du moteur l'a dit — « nommer le motif dans
   app.css ». Cinq copies d'une même décision, ce sont cinq endroits à changer
   le jour où elle change. */
.d--intro { margin-top: 0; font-size: var(--f2); }

/* LE SOCLE, EN LECTURE. Un document de quinze mille caractères se lit comme
   un texte, pas comme une liste : la mesure de lecture est bornée, et les
   titres respirent. */
.socle-lu { margin-top: 14px; max-width: 62ch; }
.socle-t { display: block; margin: 18px 0 6px; font: 700 var(--f3) var(--titre); letter-spacing: -.01em; color: var(--encre); }
.socle-t:first-child { margin-top: 0; }
.socle-p { display: block; font-size: var(--f3); line-height: 1.62; color: var(--encre-2); }
.socle-v { display: block; height: 9px; }
.socle-c { padding-left: 11px; border-left: 2px solid var(--trait); color: var(--encre-3); }
.socle-lu code { font: 400 var(--f2) var(--mono); color: var(--ac); }
.socle-retour { margin-bottom: 4px; }

/* LA RANGÉE D'ACTIONS D'UNE ENTRÉE : « s'y mettre », « sa fiche », « épingler ».
   ⚠ Elle vient SOUS le texte, jamais à côté du titre. Une action posée à
   droite d'un nom se lit avant le nom — on décide avant d'avoir lu. */
.entree__a { display: flex; gap: 6px; margin-top: 9px; flex-wrap: wrap; }
.entree__a button {
  display: inline-flex; align-items: center; min-height: var(--cible); min-width: var(--cible); justify-content: center;
  background: none; border: 1px solid var(--trait); border-radius: var(--r1); padding: 0 14px;
  font: 500 var(--f1) var(--mono); color: var(--encre-3); cursor: pointer;
  transition: color var(--t) var(--courbe), border-color var(--t) var(--courbe);
}
.entree__a button:hover { color: var(--encre); border-color: var(--encre-3); }
.entree__a button[data-sy-mettre] { color: var(--encre-2); }
.entree__a button[aria-pressed="true"] { color: var(--ac); border-color: var(--ac); }
.entree .ou { display: block; margin-top: 6px; font: 500 var(--f1) var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ac); }
/* UN RÉSULTAT MÈNE QUELQUE PART, et c'est un vrai bouton : toute la ligne se
   touche, le clavier y va, un lecteur d'écran l'annonce. Les petits boutons
   d'action restent À CÔTÉ, jamais dedans — un bouton dans un bouton ne se lit
   plus, ni au doigt ni à la voix. */
.aller {
  display: block; width: 100%; min-height: var(--cible); margin: 0; padding: 0;
  background: none; border: 0; text-align: left; color: inherit; font: inherit; cursor: pointer;
}
.aller > span { display: block; margin: 3px 0 0; font-size: var(--f2); line-height: 1.45; color: var(--encre-2); }
.entree:has(> .aller) { transition: border-color var(--t) var(--courbe); }
.entree:has(> .aller:hover), .entree:has(> .aller:focus-visible) { border-color: rgb(245 243 255 / .3); }
[data-trouve] { margin-top: 14px; }
.ligne input[type="search"] { -webkit-appearance: none; appearance: none; }
/* la croix native du champ : bleue, minuscule, d'une autre famille — une seule couleur d'accent */
.ligne input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.apercu-ciel, .frise { width: 100%; height: auto; display: block; border-radius: var(--r2); margin: 4px 0 6px; }

/* ── la ligne discrète du matin : elle informe, elle n'alarme pas ── */
.attention {
  margin-top: 2px; min-height: var(--cible); background: none; border: 0; border-top: 1px solid rgb(245 243 255 / .1);
  padding: 8px 4px 0; width: 100%; text-align: left; cursor: pointer;
  font: 400 var(--f2) var(--texte); color: var(--encre-3);
  transition: color var(--t) var(--courbe);
}
.attention:hover { color: var(--encre-2); }
.attention span::after { content: ' →'; color: var(--ac); }

/* ── les quatre lieux, en vrais boutons ───────────────────────────── */
.lieux, .etats-parc { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 4px 0 6px; }
.lieu-c, .etat-c {
  display: block; text-align: left; padding: 13px 14px; border-radius: var(--r2); cursor: pointer;
  background: rgb(245 243 255 / .04); border: 1px solid var(--trait);
  transition: background var(--t) var(--courbe), border-color var(--t) var(--courbe), transform var(--t) var(--courbe);
}
.lieu-c:hover, .etat-c:hover { background: var(--voile); transform: translateY(-2px); }
.lieu-c b, .etat-c b { display: block; font: 700 var(--f3) var(--titre); color: var(--encre); }
.lieu-c span, .etat-c span { display: block; margin-top: 3px; font-size: var(--f2); line-height: 1.4; color: var(--encre-2); }
.lieu-c em { display: block; margin-top: 7px; font-style: normal; font: 500 var(--f1) var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--encre-3); }
.lieu-c[data-ici] { background: var(--voile); border-color: rgb(245 243 255 / .3); }
.lieu-c[data-ici] em { color: var(--ac); }

/* LES ÉTATS DU PARC (bloc 1 de la fusion, 15/09) : un chiffre qui se lit d'un coup d'œil, et la case qui filtre la
   liste se voit choisie — le bord de l'accent, jamais un aplat qui crierait.
   ⚠ LE DESSIN DES LIEUX, PAS LEUR NOM. Les cases portaient d'abord `.lieux .lieu-c`, et l'audit du plan, qui compte
   les quatre lieux fixes par ces classes, en a lu huit — « 1 · 3 · 1 · 2 » après « Mes affaires ». Une case d'état
   n'est pas un lieu : elle partage les règles, pas la classe. */
.etats-parc { margin: 12px 0 2px; }
.etat-c b { font-size: var(--f4); line-height: 1.1; }
.etat-c[aria-pressed="true"] { background: var(--voile); border-color: var(--ac); }
.etat-c[aria-pressed="true"] span { color: var(--encre); }

/* LE BAS DE « CE QUI TOURNE » (bloc 1, maquette validée le 15/09) : ajouter un site et les archives, deux gestes qui
   déplient ce qu'ils disent sous eux — jamais une fenêtre par-dessus. */
.bas-feuille { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 16px; }
.bas-feuille .go { width: auto; padding: 12px 18px; }
[data-tourne-intro] { max-width: none; }
[data-tourne-ajout] .aide { margin-top: 8px; }

/* LA FICHE D'UN SITE, CE QUI COMPTE EN HAUT (bloc 1, maquette validée le 15/09, situations 2, 4 et 8) : une chose, le
   geste qui va avec, et son verdict dessous. Le reste de la fiche passe sous « sa fiche ». */
.ou-vient { margin: 0 0 12px; font: 400 var(--f1)/1.45 var(--mono); letter-spacing: .04em; color: var(--encre-3); }
.haut-fiche {
  margin: 4px 0 0; padding: 14px 16px; border-radius: var(--r2);
  background: var(--voile); border: 1px solid rgb(245 243 255 / .1);
}
.haut-fiche > .lab:first-child { margin-top: 0; }
.attend { list-style: none; margin: 12px 0 0; padding: 0; }
.attend li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 0;
  border-top: 1px solid rgb(245 243 255 / .08); font-size: var(--f2); color: var(--encre-2);
}
.attend b { font-weight: 600; color: var(--encre); overflow-wrap: anywhere; }
.attend span { font: 400 var(--f1) var(--mono); color: var(--encre-3); white-space: nowrap; }
.action-verdict[data-verdict="en-cours"] { border-left-color: var(--ac); color: var(--encre); }
/* sur téléphone, une adresse se lit en entier : le bouton passe dessous */
@media (max-width: 619px) {
  .ligne--pile { flex-wrap: wrap; }
  .ligne--pile input, .ligne--pile button { flex: 1 1 100%; }
}

/* LE RESTE DE LA FICHE D'UN SITE, REPLIÉ (bloc 1, C2b, maquette validée le 15/09, situation 2) : une ligne par
   sujet, qui dit l'essentiel et s'ouvre au toucher. */
.pli { border-top: 1px solid rgb(245 243 255 / .1); }
.pli:last-of-type { border-bottom: 1px solid rgb(245 243 255 / .1); }
.pli summary {
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: var(--cible); padding: 10px 2px; cursor: pointer;
}
.pli summary::-webkit-details-marker { display: none; }
.pli summary:focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; border-radius: var(--r1); }
.pli summary b { font: 700 var(--f3) var(--titre); color: var(--encre); }
.pli summary span { font-size: var(--f2); line-height: 1.4; color: var(--encre-3); text-align: right; }
.pli summary span::after { content: '\00a0→'; color: var(--ac); }
.pli[open] summary span::after { content: ''; }
.pli > div { padding: 0 2px 14px; }
.pli p { margin: 0 0 8px; font-size: var(--f2); line-height: 1.5; color: var(--encre-2); }
.releves { list-style: none; margin: 0 0 8px; padding: 0; font: 400 var(--f1)/2 var(--mono); color: var(--encre-3); }
.releves li { display: flex; gap: 14px; }
.releves time { min-width: 5ch; color: var(--encre-2); }

/* LES SECOURS D'UN SITE (bloc 1, C3, maquette validée le 15/09, situations 4 et 6) : une question en place, jamais
   une fenêtre ; la sauvegarde se coche, et la question dit vers quoi on revient.
   ⚠ LES RÈGLES D'UNE `.entree` SONT ÉCRITES PLUS BAS, et à poids égal elles gagnent : sans deux classes ici, la date
   d'une sauvegarde prenait la taille d'un titre, et la question la couleur d'un détail. */
.secours { display: flex; flex-direction: column; gap: 8px; }
.secours__aide { margin: 12px 0 0; }
.secours > .secours__aide { margin: 0; }
.points { border: 0; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; min-width: 0; }
.point {
  display: flex; align-items: flex-start; gap: 12px; min-height: var(--cible); padding: 9px 12px;
  border-radius: var(--r1); border: 1px solid var(--trait); cursor: pointer;
}
.point:has(input:checked) { border-color: var(--ac); }
.point input { flex: 0 0 auto; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--ac); }
.points .point b { display: block; font: 500 var(--f2) var(--mono); color: var(--encre); }
.points .point small { display: block; margin-top: 1px; font: 400 var(--f2) var(--texte); color: var(--encre-3); }
.confirme { margin: 12px 0 0; padding: 4px 0 2px 14px; border-left: 2px solid var(--ac); }
.confirme p, .entree .confirme p { margin: 0; font-size: var(--f2); line-height: 1.5; color: var(--encre); }
.confirme .mineurs { margin-top: 10px; flex-wrap: wrap; }
.confirme .go { width: auto; flex: 0 0 auto; min-height: var(--cible); padding: 11px 18px; }
.choix-extension { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: var(--f2); color: var(--encre-3); }
/* 16 px et pas 13 : en dessous, iOS zoome dans le champ */
.choix-extension select {
  flex: 1; min-height: var(--cible); min-width: 0; max-width: 100%; padding: 8px 10px; border-radius: var(--r1);
  border: 1px solid var(--trait); background: rgb(7 7 12 / .55); color: var(--encre); font: 400 var(--f3) var(--texte);
}
.choix-extension select:focus { outline: none; border-color: var(--ac); }
.cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ── ce qui réclame, les gens, le parc : trois degrés, jamais de rouge ── */
.entree--dur { border-color: var(--ac); }
.entree--tiede { border-color: rgb(245 243 255 / .26); }
.entree .quand { display: block; margin-top: 2px; font: 400 var(--f1) var(--mono); color: var(--encre-3); }
.entree .calme { color: var(--encre-3); }
.entree .pourquoi { display: block; margin-top: 6px; font-style: normal; font-size: var(--f2); line-height: 1.5; color: var(--encre-3); }
.entree .pourquoi::before { content: none; }
/* ce qui est en sourdine le DIT, jusqu'à quand */
.entree .en-sourdine { display: block; margin-top: 6px; font: 500 var(--f1) var(--mono); letter-spacing: .05em; color: var(--encre-3); }
.lieu h3 { text-transform: lowercase; }

/* les portes du journal et du socle, dans « Mes affaires » */
.porte-journal {
  display: block; width: 100%; text-align: left; margin: 4px 0 2px;
  padding: 14px 16px; border-radius: var(--r2); cursor: pointer;
  background: rgb(245 243 255 / .04); border: 1px solid var(--trait);
  transition: background var(--t) var(--courbe), border-color var(--t) var(--courbe);
}
.porte-journal:hover { background: var(--voile); border-color: var(--encre-3); }
.porte-journal b { display: block; font: 700 var(--f3) var(--titre); color: var(--encre); }
.porte-journal span { display: block; margin-top: 3px; font-size: var(--f2); line-height: 1.45; color: var(--encre-2); }

/* le registre : ce que l'app sait faire, par lieu */
.lieu { margin: 18px 0 0; }
.lieu h3 { margin: 0; font: 700 var(--f3) var(--titre); }
.lieu p { margin: 2px 0 8px; font-size: var(--f2); color: var(--encre-3); }
.entrees { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.entree { padding: 10px 12px; background: var(--voile); border: 1px solid rgb(245 243 255 / .08); border-radius: var(--r2); }
.entree b { display: block; font-size: var(--f3); }
/* « attend : » annonce la tâche : il ne doit pas être plus gros qu'elle (capture du 13/09) */
.entree p b { display: inline; font-size: inherit; }
.entree p { margin: 3px 0 0; font-size: var(--f2); line-height: 1.45; color: var(--encre-2); }
.entree small { display: block; margin-top: 5px; font: 400 var(--f1) var(--mono); color: var(--encre-3); }
.entree em { display: block; margin-top: 3px; font-style: normal; font: 400 var(--f1) var(--mono); color: var(--encre-3); }
/* ⚠ Ces deux préfixes n'appartiennent QU'au registre. Non bornés, ils
   étiquetaient « geste : » et « d'où : » sur les fiches des gens et du parc,
   où ces mots ne veulent rien dire. */
[data-registre] .entree small::before { content: 'd’où : '; }
[data-registre] .entree em::before { content: 'geste : '; }
.emporter { display: flex; gap: 8px; margin-top: 14px; }
.emporter button, .emporter label {
  flex: 1; min-height: var(--cible); display: flex; align-items: center; justify-content: center; text-align: center;
  background: var(--voile); border: 1px solid rgb(245 243 255 / .18);
  border-radius: var(--r2); padding: 0 12px; font: 600 var(--f2) var(--texte); color: var(--encre); cursor: pointer;
}
.emporter input { display: none; }
.discret { margin: 12px 0 0; font: 400 var(--f1) var(--mono); color: var(--encre-3); }

/* ── la bulle d'explication : une phrase, d'où ça vient, jamais plus ─ */
.bulle {
  position: absolute; z-index: 9; max-width: 300px; padding: 11px 13px;
  background: rgb(14 14 22 / .96); border: 1px solid rgb(245 243 255 / .2); border-radius: var(--r2);
  box-shadow: var(--ombre); font-size: var(--f2); line-height: 1.5; color: var(--encre-2);
  pointer-events: none; transition: opacity var(--t) var(--courbe);
}
.bulle b { display: block; color: var(--encre); font-weight: 600; margin-bottom: 2px; }
.bulle small { display: block; margin-top: 6px; font: 400 var(--f1) var(--mono); color: var(--encre-3); }
.bulle small::before { content: 'd’où : '; }
.bulle em { display: block; margin-top: 3px; font-style: normal; font: 400 var(--f1) var(--mono); color: var(--ac); }

/* le mode « c'est quoi ça ? » : tout ce qui s'explique se signale */
.app[data-mode-explique] [data-r] { outline: 1.5px dashed rgb(255 154 60 / .55); outline-offset: 3px; }
.app[data-mode-explique] .bandeau-explique { transform: translateY(0); }
.bandeau-explique {
  position: absolute; z-index: 6; left: 0; right: 0; bottom: 0; padding: 12px 20px 16px;
  background: rgb(10 10 16 / .96); border-top: 1px solid rgb(245 243 255 / .12);
  font-size: var(--f2); color: var(--encre-2); text-align: center; transform: translateY(102%);
  transition: transform var(--t) var(--courbe);
}
.bandeau-explique b { color: var(--ac); }

/* le mot en passant : il confirme et propose d'annuler */
.toast {
  position: absolute; z-index: 8; left: 20px; right: 20px; bottom: 236px;   /* au-dessus de tout champ, dans tous les états */
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: rgb(14 14 22 / .96); border: 1px solid rgb(245 243 255 / .2); border-radius: var(--r2);
  padding: 4px 6px 4px 14px; font-size: var(--f2); box-shadow: var(--ombre);
}
.toast span { padding: 8px 0; }
.toast button { flex: 0 0 auto; min-height: var(--cible); min-width: var(--cible); background: none; border: 0; color: var(--ac); font: 600 var(--f2) var(--texte); cursor: pointer; padding: 0 10px; }

/* ── LE TRANCHEUR — la décision du matin (noyau n° 3, construit le 13/09) ──
   Dessin validé par Ismail sur `appli/trancheur.html`. Quand la décision est
   devant, la pile quitte sa hauteur fixe : ses propositions se lisent en
   entier, et les cartes de derrière s'effacent — une seule chose à l'écran. */
.pile[data-decision] { height: auto; }
.pile[data-decision] .carte:not([data-rang="0"]) { display: none; }
.carte--decision[data-rang="0"] { position: relative; }
.carte--decision .raison { margin: 0 0 6px; }
.props { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.prop {
  display: block; width: 100%; min-height: var(--cible); padding: 11px 13px; text-align: left; cursor: pointer;
  border-radius: var(--r2); background: var(--voile); border: 1px solid rgb(245 243 255 / .18); color: var(--encre); font: inherit;
  transition: background var(--t) var(--courbe), border-color var(--t) var(--courbe), transform var(--t) var(--courbe), opacity var(--t) var(--courbe);
}
.prop:hover { background: var(--voile-2); border-color: rgb(245 243 255 / .34); }
.prop:active { transform: scale(.985); }
/* la recommandée se voit sans crier : un bord, une étiquette — jamais un bouton plein qui pousserait à cliquer sans lire */
.prop[data-reco] { border-color: color-mix(in srgb, var(--ac) 70%, transparent); }
.prop[aria-pressed="true"] { background: color-mix(in srgb, var(--ac) 14%, transparent); border-color: var(--ac); }
.props[data-choisi] .prop:not([aria-pressed="true"]) { opacity: .45; }
.prop__t { display: block; font-size: var(--f3); font-weight: 600; line-height: 1.35; }
.prop__a { display: block; margin-top: 3px; font-size: var(--f2); line-height: 1.45; color: var(--encre-2); }
.prop__reco { display: inline-block; margin-top: 7px; padding: 2px 8px; border-radius: var(--pilule); border: 1px solid var(--ac); font: 500 var(--f1) var(--mono); letter-spacing: .06em; color: var(--ac); }
/* « lire l'argument » : SOUS la proposition, jamais dedans — un bouton dans un bouton ne se lit plus */
.lire {
  display: inline-flex; align-items: center; min-height: var(--cible); margin: 4px 0 0; padding: 0 14px; cursor: pointer;
  border-radius: var(--pilule); border: 1px solid color-mix(in srgb, var(--ac) 50%, transparent); background: none;
  font: 500 var(--f2) var(--texte); color: var(--ac); transition: background var(--t) var(--courbe);
}
.lire:hover { background: color-mix(in srgb, var(--ac) 10%, transparent); }
.aucune { margin: 14px 0 0; padding: 12px 13px; border-radius: var(--r2); border: 1px dashed rgb(245 243 255 / .24); font-size: var(--f2); line-height: 1.5; color: var(--encre-2); }
.ecrit { margin: 12px 0 0; padding: 11px 13px; border-radius: var(--r2); background: color-mix(in srgb, var(--ac) 10%, transparent); border: 1px solid color-mix(in srgb, var(--ac) 40%, transparent); font-size: var(--f2); line-height: 1.5; color: var(--encre); }
.ecrit b { color: var(--ac); font-weight: 600; }
/* ce que la réponse va changer — le contrat : « me montrer ce que ma réponse va changer » */
.apercu-doc { margin: 8px 0 0; font: 400 var(--f1)/1.55 var(--mono); color: var(--encre-3); overflow-wrap: anywhere; }
.apercu-doc b { color: var(--encre-2); font-weight: 500; }
.carte--decision .ligne { margin-top: 10px; }
.carte--decision .mineurs { margin-top: 6px; }

/* la feuille de l'argument */
.schema-logique { width: 100%; height: auto; display: block; margin: 4px 0 6px; }
.schema-logique .s-boite { fill: #12121c; stroke: rgb(245 243 255 / .16); }
.schema-logique .s-boite--ac { stroke: var(--ac); stroke-opacity: .6; }
.schema-logique .s-eti { fill: var(--ac); }
.schema-logique .s-texte { fill: var(--encre-2); }
.schema-logique .s-fleche { stroke: var(--ac); }
.schema-logique .s-pointilles { fill: none; stroke: rgb(245 243 255 / .3); stroke-dasharray: 5 5; }
.lab--ac { color: var(--ac); }
.arg { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.arg__el { padding: 10px 12px 4px; background: var(--voile); border: 1px solid rgb(245 243 255 / .08); border-radius: var(--r2); }
.arg__el[data-toi] { border-color: color-mix(in srgb, var(--ac) 55%, transparent); }
.arg__texte { margin: 0; font-size: var(--f3); line-height: 1.5; color: var(--encre); }
.arg__source { display: block; margin-top: 5px; font: 400 var(--f1)/1.5 var(--mono); color: var(--encre-3); }
.arg__nature { display: inline-block; margin-top: 5px; padding: 1px 8px; border-radius: var(--pilule); border: 1px solid var(--trait); font: 500 var(--f1) var(--mono); color: var(--encre-2); }
/* ce qui vient de moi se marque : un avis ne doit jamais passer pour une preuve */
.arg__nature[data-mienne] { border-color: color-mix(in srgb, var(--ac) 50%, transparent); color: var(--ac); }
.arg__el .entree__a { margin-top: 4px; }
.arg__el textarea { min-height: 96px; resize: vertical; }

/* la vue d'ensemble : l'ordre que je propose, qu'il change */
.ordre { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.decision { display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; background: var(--voile); border: 1px solid rgb(245 243 255 / .08); border-radius: var(--r2); }
.decision--jour { border-color: color-mix(in srgb, var(--ac) 55%, transparent); }
.decision__n { font: 700 var(--f4) var(--titre); color: var(--ac); text-align: center; }
.decision__c { min-width: 0; }
.decision__c b { display: block; font-size: var(--f3); line-height: 1.35; }
.decision__c > span { display: block; margin-top: 2px; font-size: var(--f2); line-height: 1.45; color: var(--encre-2); }
.decision__c .ou { display: block; margin-top: 4px; font: 500 var(--f1) var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--encre-3); overflow-wrap: anywhere; }
.decision__b { display: flex; flex-direction: column; gap: 4px; }
.decision__b button {
  min-height: var(--cible); min-width: 84px; padding: 0 10px; border-radius: var(--r1); background: none; border: 1px solid var(--trait);
  font: 500 var(--f1) var(--mono); color: var(--encre-3); cursor: pointer; transition: color var(--t) var(--courbe), border-color var(--t) var(--courbe);
}
.decision__b button:hover { color: var(--encre); border-color: var(--encre-3); }
.decision__b button:disabled { opacity: .35; cursor: default; }

/* ── LA PREMIÈRE ACTION, PRÊTE (13/09) — dans la séance, sous le temps ──
   Un bloc calme : le texte à relire, les boutons qui ouvrent son application,
   et ce que l'app sait, en trois lignes au plus. « C'est fait » reste la seule
   action pleine de l'écran. */
.action-prete { margin-top: 18px; padding: 14px 16px 12px; border-radius: var(--r2); background: var(--voile); border: 1px solid rgb(245 243 255 / .1); }
.action-prete .lab { margin-top: 0; }
.action-titre { margin: 0; font-size: var(--f2); line-height: 1.5; color: var(--encre-2); }
.action-titre b { color: var(--encre); font-weight: 600; }
.action-texte { margin-top: 10px; min-height: 88px; resize: none; }
.action-envois { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.action-envois .go {
  width: auto; min-width: 0; flex: 1 1 auto; min-height: var(--cible); padding: 11px 16px;
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
}
.action-envois .mn { flex: 0 0 auto; }
.action-date { margin: 8px 0 0; font: 700 var(--f4)/1.2 var(--titre); color: var(--encre); }
.action-erreur { margin: 8px 0 0; padding-left: 12px; border-left: 2px solid var(--ac); font-size: var(--f3); line-height: 1.5; color: var(--encre); }
.action-verifier { margin: 8px 0 0; font-size: var(--f2); line-height: 1.5; color: var(--encre-2); }
.action-verifier b { color: var(--encre); font-weight: 600; }
.action-sait { margin: 10px 0 0; padding-left: 18px; font-size: var(--f2); line-height: 1.55; color: var(--encre-3); }

/* LE GESTE ET SON VERDICT (14/09) — sa fiche du CRM à un geste, et le bouton qui agit pour de vrai. Le verdict
   est la phrase du moteur, telle quelle : le trait dit où on en est, mais le mot suffit sans la couleur. */
.action-envois a.mn { display: inline-flex; align-items: center; text-decoration: none; }
.action-geste { margin-top: 8px; }
.action-verdict { margin: 10px 0 0; padding-left: 12px; border-left: 2px solid var(--trait); font-size: var(--f2); line-height: 1.5; color: var(--encre-2); }
.action-verdict[data-verdict="reussi"] { border-left-color: var(--encre); color: var(--encre); }
.action-verdict[data-verdict="echec"] { border-left-color: var(--ac); color: var(--encre); }

/* ── tablette : le même écran, pas plus large que la main ─────────── */
@media (min-width: 620px) and (max-width: 899px) {
  .haut, .matin { width: 100%; max-width: 640px; margin-inline: auto; }
  .feuille { max-width: 640px; margin-inline: auto; }
  .lapin { right: max(-18px, calc((100vw - 640px) / 2 - 18px)); }
  .date { max-width: none; }
}

/* ── PC : la scène prend tout l'écran ─────────────────────────────── */
@media (min-width: 900px) {
  :root {
    --marge: clamp(48px, 9vw, 170px);
    /* le grand titre grandit avec l'écran ; il reste UNE taille par écran */
    --f5: clamp(36px, 3.1vw, 46px);
  }
  /* les lueurs grandissent avec la fenêtre — sinon deux taches dans les coins */
  .ciel::before { width: 58vw; height: 58vw; left: -16vw; top: -26vw; filter: blur(40px); }
  .ciel::after { width: 56vw; height: 56vw; right: 16vw; bottom: -30vw; filter: blur(40px); }   /* elle monte du bas, entre le texte et la mascotte */

  .haut { padding: 34px clamp(40px, 7vw, 140px) 0 var(--marge); }
  .date { max-width: none; white-space: nowrap; }

  /* la colonne de texte, à gauche */
  .matin { padding: 0 clamp(48px, 10vw, 160px) 0 var(--marge); }
  .matin > div { justify-content: center; padding: 30px 0 70px; max-width: 680px; }
  h1 { margin-top: 14px; }
  /* en séance, le sujet EST la seule chose à l'écran : il prend le grand titre */
  .matin > [data-etat="seance"] h2 { font-size: var(--f5); }
  .d { max-width: 32rem; margin-top: 20px; }
  .quoi { max-width: 32rem; }

  /* les actions suivent le texte, elles ne sont plus collées en bas */
  .actes { margin-top: 42px; padding-bottom: 0; }
  div.actes { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
  .go { width: auto; min-width: 250px; padding: 17px 36px; flex: 0 0 auto; }
  div.actes .aide { flex: 1 1 auto; }
  div.actes .mineurs { flex: 0 0 100%; }
  .mn { flex: 0 0 auto; padding: 0 16px; }
  form.actes { max-width: 560px; }
  .notes { max-width: 560px; }
  .fini { max-width: 560px; }

  /* la mascotte, petite, dans le coin bas droit */
  .lapin { right: clamp(40px, 7vw, 140px); bottom: 64px; height: min(24vh, 190px); opacity: 1; }
  /* Sur PC il y a la place : elle reste partout, la colonne de texte ne
     l'atteint pas. C'est le téléphone qui l'efface. */
  .app[data-etat="plein"] .lapin,
  .app[data-etat="seance"] .lapin { opacity: 1; transform: none; }

  /* les feuilles glissent par la droite, l'écran du matin reste visible */
  .feuille {
    inset: 0 0 0 auto; width: min(470px, 92vw); max-height: none; border-radius: 0; border-top: 0;
    border-left: 1px solid rgb(245 243 255 / .12); padding: 30px 30px 36px;
    transform: translateX(102%); box-shadow: -30px 0 80px rgb(0 0 0 / .45);
  }
  .feuille[data-ouverte] { transform: translateX(0); }
  /* ⚠ L'OMBRE D'UNE FEUILLE FERMÉE RESTAIT DESSINÉE (15/09, vu en faisant la maquette du bloc 1). Rangée hors écran
     à droite, chacune projetait son ombre sur le bord droit de la feuille ouverte : une bande sombre par feuille
     fermée, et WORK en a une douzaine. */
  .feuille:not([data-ouverte]) { box-shadow: none; }
  .poignee { display: none; }

  /* Le mot en passant vit sous la colonne de texte, pas dans le coin droit :
     la mascotte y est, et les deux se marchaient dessus. */
  .toast { left: var(--marge); right: auto; width: min(440px, 46vw); bottom: 28px; }
  .bulle { max-width: 360px; }
  .bandeau-explique { padding: 14px 24px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .app:has(.feuille[data-ouverte])::after { animation: none; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}