/* ── Variables du thème ─────────────────────────────────────────────────── */
:root {
  color-scheme: light;
  --background: oklch(1.0000 0 0);
  --foreground: oklch(0.2101 0.0318 264.6645);
  --card: oklch(1.0000 0 0);
  --card-foreground: oklch(0.2101 0.0318 264.6645);
  --popover: oklch(1.0000 0 0);
  --popover-foreground: oklch(0.2101 0.0318 264.6645);
  --primary: oklch(0.6716 0.1368 48.5130);
  --primary-foreground: oklch(1.0000 0 0);
  --secondary: oklch(0.5360 0.0398 196.0280);
  --secondary-foreground: oklch(1.0000 0 0);
  --muted: oklch(0.9670 0.0029 264.5419);
  --muted-foreground: oklch(0.5510 0.0234 264.3637);
  --accent: oklch(0.9491 0 0);
  --accent-foreground: oklch(0.2101 0.0318 264.6645);
  --destructive: oklch(0.6368 0.2078 25.3313);
  --destructive-foreground: oklch(0.9851 0 0);
  --border: oklch(0.9276 0.0058 264.5313);
  --input: oklch(0.9276 0.0058 264.5313);
  --ring: oklch(0.6716 0.1368 48.5130);
  --chart-1: oklch(0.5940 0.0443 196.0233);
  --chart-2: oklch(0.7214 0.1337 49.9802);
  --chart-3: oklch(0.8721 0.0864 68.5474);
  --chart-4: oklch(0.6268 0 0);
  --chart-5: oklch(0.6830 0 0);
  --radius: 0.75rem;
  --sidebar: oklch(0.9670 0.0029 264.5419);
  --sidebar-foreground: oklch(0.2101 0.0318 264.6645);
  --sidebar-primary: oklch(0.6716 0.1368 48.5130);
  --sidebar-primary-foreground: oklch(1.0000 0 0);
  --sidebar-accent: oklch(1.0000 0 0);
  --sidebar-accent-foreground: oklch(0.2101 0.0318 264.6645);
  --sidebar-border: oklch(0.9276 0.0058 264.5313);
  --sidebar-ring: oklch(0.6716 0.1368 48.5130);
  --font-sans: Outfit, ui-sans-serif, sans-serif, system-ui;
  --font-serif: Merriweather, ui-serif, serif;
  --font-mono: JetBrains Mono, ui-monospace, monospace;
  --shadow-color: #000000;
  --shadow-opacity: 0.05;
  --shadow-blur: 4px;
  --shadow-spread: 0px;
  --shadow-offset-x: 0px;
  --shadow-offset-y: 1px;
  --letter-spacing: 0rem;
  --spacing: 0.25rem;
  --shadow-2xs: 0px 1px 4px 0px hsl(0 0% 0% / 0.03);
  --shadow-xs: 0px 1px 4px 0px hsl(0 0% 0% / 0.03);
  --shadow-sm: 0px 1px 4px 0px hsl(0 0% 0% / 0.05), 0px 1px 2px -1px hsl(0 0% 0% / 0.05);
  --shadow: 0px 1px 4px 0px hsl(0 0% 0% / 0.05), 0px 1px 2px -1px hsl(0 0% 0% / 0.05);
  --shadow-md: 0px 1px 4px 0px hsl(0 0% 0% / 0.05), 0px 2px 4px -1px hsl(0 0% 0% / 0.05);
  --shadow-lg: 0px 1px 4px 0px hsl(0 0% 0% / 0.05), 0px 4px 6px -1px hsl(0 0% 0% / 0.05);
  --shadow-xl: 0px 1px 4px 0px hsl(0 0% 0% / 0.05), 0px 8px 10px -1px hsl(0 0% 0% / 0.05);
  --shadow-2xl: 0px 1px 4px 0px hsl(0 0% 0% / 0.13);
  --tracking-normal: 0rem;
}

/* Deux fichiers variables : une seule requête couvre toutes les graisses.
   Auto-hébergés — la CSP 'self' de l'apex interdirait fonts.gstatic.com. */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/polices/outfit-92684e4a.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('/polices/jetbrains-mono-1e06740a.woff2') format('woff2');
}

/* ── Base ───────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }

body {
  font-family: var(--font-sans);
  letter-spacing: var(--tracking-normal);
  background: var(--background);
  color: var(--foreground);
  max-width: 42rem;
  margin: 0 auto;
  padding: calc(var(--spacing) * 10) calc(var(--spacing) * 5) calc(var(--spacing) * 16);
  line-height: 1.55;
}

h1 { font-size: 1.5rem; margin: 0 0 calc(var(--spacing) * 2); }
h2 { font-size: 1.1rem; margin: calc(var(--spacing) * 8) 0 calc(var(--spacing) * 2); }

a { color: var(--primary); }

/* Absent jusqu'ici : la navigation au clavier ne montrait rien de fiable. */
:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
  border-radius: calc(var(--radius) - 4px);
}

code, .jeton { font-family: var(--font-mono); font-size: .88em; }

/* ── Ossature ───────────────────────────────────────────────────────────── */
header {
  display: flex;
  align-items: baseline;
  gap: calc(var(--spacing) * 4);
  margin-bottom: calc(var(--spacing) * 8);
}
header a.marque { font-weight: 600; text-decoration: none; color: var(--foreground); }
header nav { margin-left: auto; font-size: .9rem; color: var(--muted-foreground); }

footer {
  margin-top: calc(var(--spacing) * 12);
  font-size: .85rem;
  color: var(--muted-foreground);
}

/* ── Formulaires ────────────────────────────────────────────────────────── */
form { display: flex; flex-wrap: wrap; gap: calc(var(--spacing) * 2); align-items: center; }
form.en-ligne { display: inline; }
form.espace-haut { margin-top: calc(var(--spacing) * 4); }

input[type=email], input[type=text] {
  flex: 1;
  min-width: 14rem;
  padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
  font: inherit;
  border: 1px solid var(--input);
  border-radius: calc(var(--radius) - 2px);
  background: var(--background);
  color: var(--foreground);
}
input::placeholder { color: var(--muted-foreground); }

button {
  padding: calc(var(--spacing) * 2) calc(var(--spacing) * 4);
  font: inherit;
  border-radius: calc(var(--radius) - 2px);
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--background);
  color: var(--foreground);
}
button:hover { background: var(--accent); color: var(--accent-foreground); }

button.principal {
  background: var(--primary);
  color: var(--primary-foreground);
  border-color: transparent;
  box-shadow: var(--shadow-sm);
}
button.principal:hover { background: var(--primary); color: var(--primary-foreground); }

button.lien {
  border: 0;
  padding: 0;
  background: none;
  color: var(--primary);
  text-decoration: underline;
  box-shadow: none;
}
button.lien:hover { background: none; }

label.option {
  flex-basis: 100%;
  display: flex;
  gap: calc(var(--spacing) * 2);
  align-items: flex-start;
  font-size: .9rem;
  color: var(--muted-foreground);
}
label.option input { flex: 0 0 auto; min-width: 0; margin-top: calc(var(--spacing) * 1.2); }

/* ── Composants ─────────────────────────────────────────────────────────── */
p.chapo { color: var(--muted-foreground); margin-top: 0; }
.vide { color: var(--muted-foreground); font-style: italic; }
.pour-agents { font-size: .85rem; color: var(--muted-foreground); margin-top: calc(var(--spacing) * 8); }
.prive { white-space: nowrap; }

.jeton {
  display: block;
  padding: calc(var(--spacing) * 3);
  margin: calc(var(--spacing) * 2) 0;
  background: var(--muted);
  color: var(--foreground);
  border-radius: calc(var(--radius) - 2px);
  word-break: break-all;
}

.encart {
  padding: calc(var(--spacing) * 4) calc(var(--spacing) * 4.5);
  margin: calc(var(--spacing) * 5) 0;
  background: var(--card);
  color: var(--card-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
}
.encart.alerte {
  background: color-mix(in oklab, var(--destructive) 8%, var(--card));
  border-color: var(--destructive);
}

table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td {
  text-align: left;
  padding: calc(var(--spacing) * 2) calc(var(--spacing) * 1.5);
  border-bottom: 1px solid var(--border);
}
th {
  font-weight: 600;
  color: var(--muted-foreground);
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .03em;
}

/* ── Accueil ────────────────────────────────────────────────────────────── */
/* La colonne de 42rem est faite pour lire un texte ; l'accueil aligne des
   cartes de front, d'où une largeur à part. Elle ne sert qu'à cette page. */
body.large { max-width: 52rem; }
body.large h1 { font-size: 2rem; line-height: 1.15; }
body.large h2 { font-size: 1.35rem; margin-top: calc(var(--spacing) * 14); }

h3 { font-size: 1rem; margin: calc(var(--spacing) * 6) 0 calc(var(--spacing) * 1.5); }

/* Le deuxième niveau du titre : lu comme une phrase, pas comme un chapô. */
.accroche {
  font-size: 1.2rem;
  line-height: 1.35;
  margin: 0 0 calc(var(--spacing) * 4);
}

/* a.bouton a l'apparence d'un <button> sans en être un : ces liens mènent
   ailleurs, ils ne soumettent rien — un <button> mentirait au lecteur d'écran. */
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacing) * 3);
  margin: calc(var(--spacing) * 6) 0;
}
a.bouton {
  display: inline-block;
  padding: calc(var(--spacing) * 2.5) calc(var(--spacing) * 5);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 2px);
  color: var(--foreground);
  text-decoration: none;
}
a.bouton:hover { background: var(--accent); color: var(--accent-foreground); }
a.bouton.principal {
  background: var(--primary);
  color: var(--primary-foreground);
  border-color: transparent;
  box-shadow: var(--shadow-sm);
}
a.bouton.principal:hover { background: var(--primary); color: var(--primary-foreground); }

ul.reassurance {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacing) * 2) calc(var(--spacing) * 4);
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: .9rem;
  color: var(--muted-foreground);
}
ul.reassurance li + li::before { content: "·"; margin-right: calc(var(--spacing) * 4); }

.grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: calc(var(--spacing) * 4);
  margin: calc(var(--spacing) * 5) 0;
}
/* .encart porte des marges verticales qui n'ont pas de sens dans une grille. */
.grille .encart { margin: 0; }
.grille h3 { margin-top: 0; }
.grille p { margin-bottom: 0; font-size: .95rem; color: var(--muted-foreground); }

/* Les atouts : la même grille, mais sans carte. Trois phrases n'ont pas besoin
   d'un fond ni d'une bordure pour se distinguer — l'icône suffit à ouvrir la
   colonne, et le titre reste sur une ligne. */
.atouts h3 {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  font-size: 1.05rem;
}
.atouts svg {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  color: var(--primary);
}

ol.etapes {
  list-style: none;
  counter-reset: etape;
  padding: 0;
  margin: calc(var(--spacing) * 6) 0;
}
ol.etapes > li {
  counter-increment: etape;
  position: relative;
  padding-left: calc(var(--spacing) * 11);
  margin-bottom: calc(var(--spacing) * 8);
}
ol.etapes > li::before {
  content: counter(etape);
  position: absolute;
  left: 0;
  top: calc(var(--spacing) * -0.5);
  width: calc(var(--spacing) * 7);
  height: calc(var(--spacing) * 7);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--primary);
  color: var(--primary-foreground);
  font-size: .85rem;
  font-weight: 600;
}
ol.etapes h3 { margin: 0 0 calc(var(--spacing) * 1.5); }
ol.etapes p { margin-top: 0; }

/* ── L'écran d'accueil : l'app posée au milieu des autres ────────────────── */
/* Une tranche, pas un téléphone : la rangée du milieu est nette, celles du
   dessus et du dessous sont coupées par le cadre (marges négatives, le tout
   rogné par overflow). La vôtre est la seule en couleur et la seule nommée ;
   les voisines n'ont qu'une barre grise en guise d'étiquette — assez pour
   qu'on lise « des apps », pas assez pour qu'on les lise. */
.avec-visuel {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--spacing) * 7);
}
.avec-visuel > p { flex: 1; min-width: 0; }
.ecran-accueil {
  flex: none;
  width: 17rem;
  overflow: hidden;
  padding: 0 calc(var(--spacing) * 4);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) * 1.2);
  background: linear-gradient(150deg,
    color-mix(in oklab, var(--primary) 12%, var(--background)), var(--muted));
  box-shadow: var(--shadow-md);
}
.ecran-accueil .rangee {
  display: flex;
  justify-content: space-between;
  gap: calc(var(--spacing) * 3);
  padding: calc(var(--spacing) * 2.5) 0;
}
/* Ces deux rangées-là n'existent que pour être coupées — au ras des icônes : il
   suffit de deviner qu'il y a des apps au-dessus et en dessous, en montrer plus
   ferait grandir le visuel sans rien dire de neuf. La rangée du haut garde son
   étiquette (on la coupe par le haut, l'icône part la première), celle du bas
   n'en montre que le sommet. */
.ecran-accueil .rangee:first-child { margin-top: calc(var(--spacing) * -12); }
.ecran-accueil .rangee:last-child { margin-bottom: calc(var(--spacing) * -15); }
.ecran-accueil .appli {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--spacing) * 1.5);
  width: 2.9rem;
}
.ecran-accueil .icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: calc(var(--radius) * 0.8);
  background: color-mix(in oklab, var(--foreground) 12%, var(--background));
}
.ecran-accueil .appli b {
  width: 2.1rem;
  height: .34rem;
  border-radius: 999px;
  background: color-mix(in oklab, var(--foreground) 18%, transparent);
}
.ecran-accueil .icone.mienne {
  background: var(--primary);
  color: var(--primary-foreground);
  box-shadow: var(--shadow-md);
}
.ecran-accueil .icone.mienne svg { width: 1.5rem; height: 1.5rem; }
.ecran-accueil .appli b.nom {
  width: auto;
  height: auto;
  background: none;
  font-size: .62rem;
  font-weight: 600;
  color: var(--foreground);
  white-space: nowrap;
}

/* Côte à côte tant qu'il reste deux colonnes lisibles ; en dessous, le visuel
   passe sous le texte plutôt que de l'étrangler. */
@media (max-width: 44rem) {
  .avec-visuel { flex-direction: column; }
  .ecran-accueil { width: 100%; max-width: 20rem; align-self: center; }
}

/* Conversation simulée : montrer l'échange coûte moins de mots que le décrire.
   Deux <p> et un dégradé d'alignement — pas de capture d'écran à refaire à
   chaque changement de texte. */
.discussion {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 2);
  margin: calc(var(--spacing) * 3) 0;
}
.replique {
  margin: 0;
  align-self: flex-start;
  max-width: 85%;
  padding: calc(var(--spacing) * 2.5) calc(var(--spacing) * 3.5);
  border-radius: var(--radius);
  background: var(--muted);
  color: var(--foreground);
  font-size: .95rem;
}
.replique.de-vous {
  align-self: flex-end;
  background: var(--primary);
  color: var(--primary-foreground);
}
.replique b {
  display: block;
  margin-bottom: calc(var(--spacing) * 1);
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  opacity: .75;
}
.replique .adresse { font-family: var(--font-mono); font-size: .9em; word-break: break-all; }

/* La réponse « je travaille » : ce qu'affiche une IA le temps de fabriquer.
   Sa seule raison d'être est de faire alterner les tours de parole — l'étape 1
   se termine sur l'IA, l'étape 2 reprend sur vous. */
.replique.travail { color: var(--muted-foreground); font-style: italic; }
/* L'italique et le gris ne valent que pour l'attente : sans ça, l'étiquette
   « Votre IA » ne s'écrirait pas pareil d'une bulle à l'autre. */
.replique.travail b { color: var(--foreground); font-style: normal; }
.points { display: inline-flex; gap: .25em; margin-left: .4em; }
.points i {
  width: .3em;
  height: .3em;
  border-radius: 50%;
  background: currentColor;
  animation: points 1.2s ease-in-out infinite;
}
.points i:nth-child(2) { animation-delay: .2s; }
.points i:nth-child(3) { animation-delay: .4s; }
@keyframes points { 0%, 60%, 100% { opacity: .25 } 30% { opacity: .9 } }
@media (prefers-reduced-motion: reduce) { .points i { animation: none; opacity: .5 } }

/* ── Le carrousel d'exemples ────────────────────────────────────────────── */
/* Sans JavaScript : trois boutons radio hors écran portent l'état, les cartes
   en sont les étiquettes. La CSP de l'apex n'autorise aucun script inline —
   et il n'y a rien ici qu'une case à cocher ne sache déjà faire.

   Tout passe par :has(), ce qui libère les radios de l'ordre du document :
   chacun vit dans sa propre carte. Un radio posé en tête du carrousel obligeait
   le navigateur, en lui donnant le focus, à faire remonter la page à chaque
   clic. */
.carrousel { margin: calc(var(--spacing) * 6) 0; }

/* Hors écran, mais pas display: none : le radio doit rester focalisable,
   c'est lui qui donne la navigation aux flèches entre les trois vues. */
.hors-ecran {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
/* Le contour du focus est repris par l'étiquette, plus bas : le laisser aussi
   sur le radio dessinerait un carré de 1px au coin du carrousel. */
.hors-ecran:focus-visible { outline: none; }

.scene { overflow: hidden; }
.piste {
  display: flex;
  align-items: stretch;
  transition: transform .5s cubic-bezier(.4, 0, .2, 1);
}
/* Les trois vues font la hauteur de la plus haute : c'est la fenêtre qui est
   constante, comme une vraie capture, et non l'inverse. Une app plus courte
   laisse du blanc *dans* sa fenêtre, ce qui se lit tout seul. */
.piste > .vue { flex: 0 0 100%; min-width: 0; display: flex; }
.piste > .vue > .capture { flex: 1; display: flex; flex-direction: column; }
.piste > .vue > .capture > .fenetre { flex: 1; }
.carrousel:has(#ex-2:checked) .piste { transform: translateX(-100%); }
.carrousel:has(#ex-3:checked) .piste { transform: translateX(-200%); }
@media (prefers-reduced-motion: reduce) { .piste { transition: none } }

/* Les cartes : mêmes encarts qu'avant, devenus des commandes. L'état actif se
   lit sans la couleur seule — la carte se soulève et son titre change. */
.choix label { cursor: pointer; }
.choix .titre { display: block; font-weight: 600; margin-bottom: calc(var(--spacing) * 1.5); }
.choix .texte { display: block; font-size: .95rem; color: var(--muted-foreground); }
.choix label:hover { border-color: var(--primary); }
.choix label:has(:checked) { border-color: var(--primary); box-shadow: var(--shadow-md); }
.choix label:has(:checked) .titre { color: var(--primary); }
/* Le radio étant invisible, c'est son étiquette qui doit montrer le focus. */
.choix label:has(:focus-visible) { outline: 2px solid var(--ring); outline-offset: 2px; }

/* ── La capture : une app en ligne, dessinée plutôt que photographiée ────── */
/* Du HTML et non une image : net sur tous les écrans, quelques centaines
   d'octets, et rien à refaire quand le thème ou le texte bouge. La barre
   d'adresse n'est pas un décor — c'est la promesse de la page, montrée. */

/* La composition : une fenêtre, et un téléphone qui la chevauche. La fenêtre
   est un peu moins large que la scène — l'espace laissé à droite est celui où
   le téléphone déborde, sans quoi il faudrait le poser sur les données. */
.capture { position: relative; }
.fenetre {
  display: flex;
  flex-direction: column;
  margin-right: 10rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--background);
  box-shadow: var(--shadow-md);
}
.capture .barre {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 3);
  padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
  background: var(--muted);
  border-bottom: 1px solid var(--border);
}
.capture .pastilles { display: flex; gap: calc(var(--spacing) * 1.5); flex: none; }
.capture .pastilles i { width: .6rem; height: .6rem; border-radius: 50%; background: var(--border); }
.capture .adresse {
  flex: 1;
  min-width: 0;
  padding: calc(var(--spacing) * 0.5) calc(var(--spacing) * 3);
  border-radius: 999px;
  background: var(--background);
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--muted-foreground);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.capture .ecran { padding: calc(var(--spacing) * 5) calc(var(--spacing) * 5) calc(var(--spacing) * 4); }
.fenetre .ecran { flex: 1; display: flex; flex-direction: column; }
.fenetre > .ecran > .pied { margin-top: auto; padding-top: calc(var(--spacing) * 4); }
/* La gouttière : le téléphone recouvre ces quelques rem-là, et rien d'autre. */
.fenetre .ecran { padding-right: calc(var(--spacing) * 26); }
.capture .titre-app { display: block; font-size: 1.05rem; font-weight: 600; }
.capture .sous { margin: calc(var(--spacing) * 0.5) 0 calc(var(--spacing) * 4); font-size: .78rem; color: var(--muted-foreground); }
.capture .section {
  display: block;
  margin: calc(var(--spacing) * 5) 0 calc(var(--spacing) * 1);
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted-foreground);
}
.capture .pied { margin: calc(var(--spacing) * 4) 0 0; font-size: .72rem; color: var(--muted-foreground); }

.capture ul { list-style: none; padding: 0; margin: 0; }
.capture li {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2.5);
  padding: calc(var(--spacing) * 2.5) 0;
  border-top: 1px solid var(--border);
  font-size: .88rem;
}
.capture li:first-child { border-top: 0; padding-top: 0; }

.capture .jour {
  flex: none;
  width: 2.2rem;
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted-foreground);
}
/* La seule colonne élastique : c'est elle qui pousse le reste à droite. */
.capture .quoi { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.capture .note { flex: none; font-size: .76rem; color: var(--muted-foreground); }
.capture .qui {
  flex: none;
  padding: calc(var(--spacing) * 0.5) calc(var(--spacing) * 2);
  border-radius: 999px;
  background: var(--muted);
  font-size: .74rem;
}
.capture .case {
  flex: none;
  width: 1.05rem;
  height: 1.05rem;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 8px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
  line-height: 1;
}
.capture .case.fait { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); }
.capture li.fait .quoi { color: var(--muted-foreground); text-decoration: line-through; }
.capture .montant { flex: none; font-family: var(--font-mono); font-size: .78rem; }
.capture .montant.plus { color: var(--secondary); }

/* La jauge se remplit par dixièmes : une largeur en attribut style serait
   refusée par la CSP, qui n'autorise pas plus le style inline que le script. */
.capture .jauge { flex: none; width: 3.5rem; height: .4rem; border-radius: 999px; background: var(--muted); overflow: hidden; }
.capture .jauge i { display: block; height: 100%; background: var(--primary); }
.capture .jauge i.t2 { width: 20%; }
.capture .jauge i.t3 { width: 30%; }
.capture .jauge i.t4 { width: 40%; }
.capture .jauge i.t5 { width: 50%; }
.capture .jauge i.t7 { width: 70%; }
.capture .jauge i.t8 { width: 80%; }
.capture .jauge i.t9 { width: 90%; }
.capture .compte { flex: none; width: 2.4rem; text-align: right; font-family: var(--font-mono); font-size: .76rem; color: var(--muted-foreground); }

/* ── Couche 1 : la réponse ──────────────────────────────────────────────── */
/* Ce qu'aucun tableur ne fait — dire la conclusion avant de montrer les
   données. Le bandeau ne remplace pas la liste, il se pose au-dessus d'elle. */
.reponse {
  margin-bottom: calc(var(--spacing) * 4);
  padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
  border-radius: calc(var(--radius) - 2px);
  background: color-mix(in oklab, var(--primary) 10%, var(--background));
  border: 1px solid color-mix(in oklab, var(--primary) 25%, var(--background));
}
.reponse .surtitre {
  display: block;
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--primary);
}
.reponse .verdict { margin: calc(var(--spacing) * 1) 0 0; font-size: 1.1rem; line-height: 1.25; }
.reponse .suite { margin: calc(var(--spacing) * 1) 0 0; font-size: .8rem; color: var(--muted-foreground); }
/* Sur le téléphone, la réponse est tout l'écran du haut : elle prend la place
   que la liste lui laisse. */
.reponse.grand { text-align: center; padding: calc(var(--spacing) * 5) calc(var(--spacing) * 4); }
.reponse.grand .verdict { font-size: 1.8rem; font-weight: 600; margin-top: calc(var(--spacing) * 2); }

/* La ligne du jour, pour que le bandeau et le tableau se répondent. */
.capture li.aujourdhui {
  background: var(--accent);
  border-radius: calc(var(--radius) - 6px);
  padding-left: calc(var(--spacing) * 2);
  padding-right: calc(var(--spacing) * 2);
  margin: 0 calc(var(--spacing) * -2);
}
.capture li.aujourdhui .jour { color: var(--primary); }

/* ── Couche 3 : ce que l'app décide, ce qu'elle fabrique ─────────────────── */
/* Le tour suivant, en gris à côté du tour courant : c'est la rotation qui
   sépare l'app du tableau de corvées scotché au frigo. */
.capture .apres { flex: none; font-size: .74rem; color: var(--muted-foreground); }
.capture .apres::before { content: "→ "; }

/* Les courses : la carte promet « la liste de courses commune », l'écran la
   montre. En pastilles plutôt qu'en troisième tableau — trois listes de suite
   se seraient confondues. */
.capture .pastilles-courses {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  margin: calc(var(--spacing) * 4) 0 0;
  font-size: .88rem;
}
/* Le titre tient sur la ligne des articles : une section à lui seul aurait
   coûté deux fois sa hauteur pour trois mots. */
.capture .pastilles-courses b { margin-right: calc(var(--spacing) * 1); }
.capture .pastilles-courses span {
  padding: calc(var(--spacing) * 1) calc(var(--spacing) * 3);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: .8rem;
}
.capture .pastilles-courses .plus-tard { border-style: dashed; color: var(--muted-foreground); }


/* L'étiquette à imprimer : le bord en tirets dit « ça se découpe ». */
.capture .etiquette {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 4);
  flex-wrap: wrap;
  margin-bottom: calc(var(--spacing) * 4);
}
.capture .vignette {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 3);
  padding: calc(var(--spacing) * 2.5) calc(var(--spacing) * 3.5);
  border: 1px dashed var(--border);
  border-radius: calc(var(--radius) - 4px);
  background: var(--muted);
}
.capture .qr { width: 2.6rem; height: 2.6rem; flex: none; fill: var(--foreground); }
.capture .mention { display: flex; flex-direction: column; min-width: 0; }
.capture .mention b { font-size: .84rem; }
.capture .mention span { font-size: .72rem; color: var(--muted-foreground); }
.capture .mention .lien {
  font-family: var(--font-mono);
  font-size: .62rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Un faux bouton : la capture n'est pas cliquable, elle est regardée. */
.capture .bouton-app {
  flex: none;
  padding: calc(var(--spacing) * 2) calc(var(--spacing) * 4);
  border-radius: calc(var(--radius) - 2px);
  background: var(--primary);
  color: var(--primary-foreground);
  font-size: .8rem;
  font-weight: 600;
}
.capture .section.haut { margin-top: 0; }

/* ── Le téléphone posé sur la fenêtre ───────────────────────────────────── */
/* Il ne répète pas la fenêtre : il montre ce que l'app met en avant quand
   l'écran est petit — la fonctionnalité en grand, puis le début de la liste,
   coupé par le bord de la vitre. Légèrement incliné, il se lit comme un objet
   posé là plutôt que comme un second cadre. */
.telephone {
  position: absolute;
  /* L'inclinaison fait sortir les coins de la boîte : sans ce retrait, la
     scène — qui rogne ce qui dépasse — en couperait un. */
  right: calc(var(--spacing) * 6);
  bottom: calc(var(--spacing) * 6);
  width: 13rem;
  padding: calc(var(--spacing) * 2.5);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) * 2);
  background: var(--background);
  box-shadow: var(--shadow-xl), 0 0 0 1px color-mix(in oklab, var(--foreground) 6%, transparent);
  transform: rotate(-4deg);
}
.telephone .encoche {
  display: block;
  width: 2.2rem;
  height: .28rem;
  margin: calc(var(--spacing) * 0.5) auto calc(var(--spacing) * 1.5);
  border-radius: 999px;
  background: var(--border);
}
.telephone .vitre {
  height: 19.5rem;
  overflow: hidden;
  border-radius: calc(var(--radius) * 1.4);
  background: var(--background);
}
/* L'écran est posé à sa taille naturelle puis réduit : toutes les règles
   .capture s'appliquent telles quelles, sans redéfinir chaque taille. */
.telephone .ecran {
  width: 18.5rem;
  padding: calc(var(--spacing) * 4);
  transform: scale(.66);
  transform-origin: top left;
}

/* Sous cette largeur, le visiteur est déjà sur un téléphone : la démonstration
   est faite, et la fenêtre récupère la place. */
@media (max-width: 48rem) {
  .fenetre { margin-right: 0; }
  .fenetre .ecran { padding-right: calc(var(--spacing) * 5); }
  .telephone { display: none; }
}

/* Sur un téléphone, la ligne ne tient plus : la préparation passe dessous et
   le reste garde son alignement. */
@media (max-width: 30rem) {
  .capture li { flex-wrap: wrap; }
  .capture .note { order: 1; flex-basis: 100%; padding-left: 2.2rem; }
  /* Même sort pour le tour suivant : il passe sous la corvée plutôt que de
     serrer son intitulé jusqu'aux points de suspension. */
  .capture .apres { order: 1; flex-basis: 100%; padding-left: 1.9rem; }
}

/* Le dépôt de fichier : cible large, cliquable en entier, pas un input nu. */
.depot {
  display: block;
  flex-basis: 100%;
  padding: calc(var(--spacing) * 6);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: var(--muted);
  cursor: pointer;
  text-align: center;
}
.depot input[type=file] { display: block; margin: calc(var(--spacing) * 3) auto 0; }
.depot:hover { border-color: var(--primary); }