/* ==========================================================================
   Napoli — page d'accueil grand public.

   Direction « Un soir, à 21 h 40 » (2026-09-04).

   LE SOCLE EST CELUI DE L'APPLICATION MOBILE, PAS DU PORTAIL.
   `home_screen.dart:304` pose `Scaffold(backgroundColor: sageGreenAccessible)` :
   le sol de l'accueil est le sauge #5F7268, et les cinq onglets avec lui. Cette
   page prend le même sol, la même lueur verte, et le conteneur du B2C —
   `NapoliCard` : blanc plein, rayon 24, AUCUNE bordure, profondeur déclarée une
   seule fois (une bordure sous une ombre donne la « carte fantôme »).

   Ce qu'elle n'emprunte PAS : `NapoliCarnet`. La réglure au pas de 34, le filet
   de marge terre cuite, les lignes à pastille dans la marge et la trame à sept
   colonnes sont la grammaire du PORTAIL VÉTÉRINAIRE (DESIGN.md § Le carnet, et
   `napoli_carnet.dart`). `landing_pro/` les porte, à raison. Ici elles diraient
   « logiciel de clinique » à quelqu'un qui vient chercher une application pour
   son chien.

   Palette, typographie, rayons et ombres viennent de DESIGN.md, source de
   vérité unique. Thème clair seul, comme l'app.
   ========================================================================== */

@font-face {
  font-family: 'Fraunces';
  src: url('assets/fonts/Fraunces.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('assets/fonts/HankenGrotesk.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* ---- Palette DESIGN.md, avec son nom Dart ---- */
  --sauge: #8DA399;            /* sageGreen */
  --sauge-lisible: #5F7268;    /* sageGreenAccessible */
  --vert-profond: #2F3E33;     /* deepSage */
  --blanc: #FFFFFF;            /* surfaceWhite */
  --lin: #F5F2EB;              /* backgroundLight */
  --taupe: #BCAAA4;            /* warmTaupe */
  --terre-profond: #B95B36;    /* terracottaDeep */
  --lavande: #B39DDB;          /* careLavender */
  --lavande-profond: #6B57A8;  /* softLavenderDeep */
  --or: #F4C01E;               /* goldenHoney */
  --encre: #1C1C1E;            /* textPrimaryLight */
  --encre-douce: #6B6B6B;      /* textSecondaryLight */
  --separateur: #E0E0E0;       /* dividerLight */

  /* Le sol de l'accueil. */
  --sol: var(--sauge-lisible);

  /* NapoliSpacing : 4 / 8 / 16 / 24 / 32 / 48. Aucune autre valeur. */
  --xs: 4px; --sm: 8px; --md: 16px; --lg: 24px; --xl: 32px; --xxl: 48px;

  /* L'échelle de rayons, gradée par ampleur (Règle de l'Échelle Montante). */
  --r-champ: 8px;
  --r-bouton: 12px;
  --r-squishy: 16px;
  --r-bento: 20px;
  --r-carte: 24px;
  --r-pilule: 100px;

  /* Sur le sauge, un halo sauge est invisible : l'ombre passe au vert profond.
     C'est la seule dérogation à la Règle du Halo Sauge, et elle ne vaut que sur
     ce fond — exactement comme dans le portail refondu. */
  --ombre-carte:
    0 3px 12px rgba(47, 62, 51, .10),
    0 12px 40px rgba(47, 62, 51, .20);
  --ombre-geste: 0 6px 16px rgba(47, 62, 51, .28), 0 2px 8px rgba(47, 62, 51, .14);

  --serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --sans: 'Hanken Grotesk', 'Helvetica Neue', system-ui, sans-serif;

  /* La lueur du fond. Verte, jamais grise : c'est la règle du système. */
  --lueur: radial-gradient(1280px 1280px at 92% -5%,
    rgba(141, 163, 153, .34) 0%,
    rgba(141, 163, 153, 0) 72%);

  --bord: clamp(16px, 4vw, 56px);
  --contenu: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--sol);
  color: var(--encre);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--serif);
  font-variation-settings: 'SOFT' 60, 'WONK' 1, 'opsz' 144;
  font-weight: 600;
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; }
a { color: inherit; text-decoration: none; }

/* Les surfaces que le navigateur dessine à notre place appartiennent au système
   au même titre que les autres : sélection, curseur, anneau de focus, ascenseur.
   La page ayant deux fonds, chacun se règle sur celui qu'il porte. */
::selection { background: rgba(141, 163, 153, .34); color: var(--encre); }
:root { accent-color: var(--sauge-lisible); caret-color: var(--vert-profond); }
:focus-visible {
  outline: 2px solid var(--sauge-lisible);
  outline-offset: 3px;
  border-radius: var(--xs);
}
/* Sur le vert, un anneau sauge est invisible et une sélection sauge aussi. */
.nav :focus-visible,
.hero__dit :focus-visible,
.ecran__barre :focus-visible,
.pied :focus-visible { outline-color: var(--lin); }
.nav ::selection,
.hero__dit ::selection,
.pied ::selection { background: rgba(245, 242, 235, .30); color: var(--blanc); }
@supports (scrollbar-color: red red) {
  html { scrollbar-color: rgba(245, 242, 235, .45) transparent; scrollbar-width: thin; }
}
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.saut {
  position: absolute;
  left: -9999px;
  top: 10px;
  z-index: 40;
  padding: 12px 18px;
  border-radius: var(--r-bouton);
  background: var(--lin);
  color: var(--vert-profond);
  font-size: 14px;
  font-weight: 700;
}
.saut:focus { left: var(--bord); }

.lumiere { position: fixed; inset: 0; z-index: -1; background: var(--lueur), var(--sol); }

/* ---------- Le bandeau ----------
   La Règle du Texte sur l'Aplat : sur le sauge, `surfaceWhite` pour ce qui
   compte (5,13:1), `backgroundLight` pour le secondaire (4,59:1). Les gris et
   les verts du système y sont invisibles. */

.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 15px var(--bord);
  background-color: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color .3s ease, border-color .3s ease;
}
/* Une fois décollé, le bandeau devient OPAQUE : une carte blanche passe dessous
   et un voile translucide ferait tomber le secondaire sous 3,3:1. Il reprend la
   lueur en `background-attachment: fixed`, calée sur la fenêtre comme
   `.lumiere` — sans quoi il découperait une bande plate dans le dégradé. */
.nav[data-collee='true'] {
  background-color: var(--sol);
  background-image: var(--lueur);
  background-attachment: fixed;
  border-bottom-color: rgba(245, 242, 235, .22);
}
/* Le logotype est un lien : il tient la cible tactile de 44 px comme le
   reste, sans quoi il est le seul contrôle de la page à y déroger. */
.nav__marque { display: flex; align-items: center; gap: 11px; min-height: 44px; }
.nav__marque img { width: 30px; height: 30px; }
.nav__nom {
  font-family: var(--serif);
  font-variation-settings: 'SOFT' 60, 'WONK' 1, 'opsz' 30;
  font-size: 21px; font-weight: 700; color: var(--blanc);
}
.nav__filet { width: 1px; height: 16px; background: rgba(245, 242, 235, .45); }
.nav__role { font-size: 13px; color: var(--lin); }
.nav__espace { flex-grow: 1; }
.nav__lien {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 2px;
  font-size: 14px; color: var(--lin);
}
.nav__lien:hover { color: var(--blanc); text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Le geste plein ----------
   `SquishyButton` : 56 px de haut, rayon 16, un bombé et non un dégradé
   décoratif, liseré blanc en guise de reflet, et surtout la compression à 0,95
   qui rebondit en `elasticOut`. C'est le composant qui porte le caractère du
   produit ; une page qui le vend sans le faire sentir se prive de son argument.
   Sur le sauge, il prend le lin — un bouton sauge sur un fond sauge n'existe
   pas ; dans une carte blanche, il retrouve son sauge. */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 var(--lg);
  border: none;
  border-radius: var(--r-squishy);
  background: linear-gradient(135deg, var(--lin) 0%, var(--blanc) 100%);
  box-shadow: var(--ombre-geste), inset 0 1px 0 rgba(255, 255, 255, .5);
  color: var(--vert-profond);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.2px;
  text-align: center;
  cursor: pointer;
  transition: transform .4s cubic-bezier(.2, 1.7, .4, 1), box-shadow .3s ease;
}
.bouton:hover { box-shadow: 0 10px 26px rgba(47, 62, 51, .34), 0 3px 10px rgba(47, 62, 51, .16), inset 0 1px 0 rgba(255, 255, 255, .5); }
.bouton:active { transform: scale(.95); }
.bouton--carte {
  background: linear-gradient(135deg, var(--sauge-lisible) 0%, #6F8478 100%);
  color: var(--blanc);
  box-shadow: 0 6px 16px rgba(141, 163, 153, .5), 0 2px 8px rgba(141, 163, 153, .28), inset 0 1px 0 rgba(255, 255, 255, .2);
}
.bouton--carte:hover { box-shadow: 0 10px 24px rgba(141, 163, 153, .6), 0 3px 10px rgba(141, 163, 153, .34), inset 0 1px 0 rgba(255, 255, 255, .2); }

/* ---------- Le héros ---------- */

.hero {
  position: relative;
  max-width: var(--contenu);
  margin: 0 auto;
  padding: clamp(24px, 4vw, 56px) var(--bord) clamp(40px, 6vw, 80px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
}
.hero__titre {
  font-size: clamp(33px, 4.4vw, 58px);
  line-height: 1.05;
  letter-spacing: -.03em;
  max-width: 15ch;
  color: var(--lin);
}
/* La chute passe en blanc franc : sur le sauge, c'est le seul cran de plus qui
   reste — 5,13:1 contre 4,59:1 pour le lin. */
.hero__titre em { font-style: normal; color: var(--blanc); }
.hero__chapo {
  margin-top: var(--lg);
  max-width: 52ch;
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.64;
  color: var(--lin);
}
.hero__actions { margin-top: var(--xl); display: flex; flex-wrap: wrap; gap: var(--md); }
.hero__note {
  margin-top: var(--md);
  max-width: 50ch;
  font-size: 13px;
  font-style: italic;
  line-height: 1.6;
  color: var(--lin);
}

/* ---------- L'écran ----------
   L'accueil de l'application, posé sur le sol de la page — qui est déjà le
   sien. Pas de coque, pas de capture, pas de cadre : la continuité EST
   l'argument. Une bordure de téléphone dirait « voici une image de l'app » là
   où la page peut dire « vous y êtes ». */

.ecran { justify-self: end; width: 100%; max-width: 400px; }

.ecran__barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sm);
  min-height: 48px;
}
/* La capsule d'identité de l'accueil : pilule, hauteur 48, vignette ronde 36,
   prénom en Fraunces 22. Sur l'aplat sauge de l'app elle est en `deepSage` ;
   ici le fond de page EST déjà ce sauge, donc elle prend le blanc translucide
   qui la détache sans introduire une quatrième valeur de vert. */
.capsule {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 18px 0 6px;
  border-radius: var(--r-pilule);
  background: rgba(47, 62, 51, .34);
}
.capsule__vignette {
  width: 36px; height: 36px;
  border-radius: var(--r-pilule);
  background: var(--lin);
  padding: 4px;
}
.capsule__nom {
  font-family: var(--serif);
  font-variation-settings: 'SOFT' 60, 'WONK' 1, 'opsz' 24;
  font-size: 22px;
  font-weight: 700;
  color: var(--blanc);
}
/* La jauge de série. L'or ne porte jamais de texte clair et ne se lit pas seul
   sur du clair : il remplit, et son texte bascule en vert profond — c'est ce
   que DESIGN.md impose à tout bandeau doré. Sur le sauge il tient 3,5:1, donc
   il n'a besoin d'aucun liseré. */
.serie {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--r-pilule);
  background: var(--or);
  font-size: 13px;
  font-weight: 600;
  color: var(--vert-profond);
  white-space: nowrap;
  transition: transform .4s cubic-bezier(.2, 1.7, .4, 1);
}
.serie b { font-weight: 800; font-variant-numeric: tabular-nums; }
.serie--avance { transform: scale(1.08); }
.flamme { width: 12px; height: 14px; fill: var(--vert-profond); flex-shrink: 0; }

/* ---------- La carte ----------
   `NapoliCard`, la carte du produit B2C : surface blanche JAMAIS teintée (le
   blanc EST le signal d'élévation), rayon 24, profondeur déclarée une seule
   fois. Aucune bordure : un liseré sous une ombre donne la carte fantôme. */

.carte {
  background: var(--blanc);
  border-radius: var(--r-carte);
  box-shadow: var(--ombre-carte);
  padding: var(--lg);
}
.carte--jour { margin-top: var(--lg); }
.carte--large {
  max-width: var(--contenu);
  margin: 0 auto;
  padding: clamp(28px, 4vw, 48px) clamp(20px, 3.5vw, 48px) clamp(32px, 4.5vw, 52px);
}

.bloc { padding: 0 var(--bord); margin-top: var(--lg); }
.bloc:last-of-type { margin-bottom: clamp(40px, 6vw, 84px); }

.bloc__titre {
  font-variation-settings: 'SOFT' 60, 'WONK' 1, 'opsz' 96;
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.1;
  letter-spacing: -.025em;
  max-width: 22ch;
  color: var(--vert-profond);
}
.bloc__chapo {
  margin-top: var(--md);
  max-width: 64ch;
  font-size: 16px;
  line-height: 1.66;
  color: var(--encre-douce);
}
.bloc__intertitre {
  margin-top: var(--xl);
  font-variation-settings: 'SOFT' 60, 'WONK' 1, 'opsz' 24;
  font-size: 22px;
  font-weight: 700;
  color: var(--vert-profond);
}
.bloc__note {
  margin-top: var(--md);
  max-width: 74ch;
  font-size: 13.5px;
  line-height: 1.72;
  color: var(--encre-douce);
}
.bloc__note b { color: var(--encre); font-weight: 700; }
.ecran__mention {
  margin-top: var(--md);
  font-size: 12px;
  font-style: italic;
  line-height: 1.55;
  color: var(--lin);
}

/* ---------- Les tâches du jour ---------- */

.carte__entete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sm);
  padding-bottom: 14px;
}
.carte__titre {
  font-family: var(--serif);
  font-variation-settings: 'SOFT' 60, 'WONK' 1, 'opsz' 24;
  font-size: 20px;
  font-weight: 700;
  color: var(--vert-profond);
}
.carte__heure {
  font-size: 13px;
  font-weight: 600;
  color: var(--encre-douce);
  font-variant-numeric: tabular-nums;
}

.taches { list-style: none; margin: 0; padding: 0; }
.tache { border-top: 1px solid var(--separateur); }
.tache--faite,
.tache--prescrite {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 10px var(--xs);
}
.tache__quoi { font-size: 15px; color: var(--encre); }
.tache--faite .tache__quoi { color: var(--encre-douce); }
.tache__quand {
  font-size: 12px;
  color: var(--encre-douce);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* La ligne qu'on coche soi-même : un vrai bouton, atteignable au clavier, qui
   annonce son état, et haut de 56 px comme toute cible du système. */
.tache__geste {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 10px var(--xs);
  margin: 0;
  border: none;
  border-radius: var(--r-champ);
  background: transparent;
  font-family: var(--sans);
  text-align: left;
  cursor: pointer;
  transition: background .2s ease, transform .3s cubic-bezier(.2, 1.7, .4, 1);
}
.tache__geste:hover { background: rgba(141, 163, 153, .12); }
.tache__geste:active { transform: scale(.98); }
.tache__quand--fait { color: var(--sauge-lisible); font-weight: 700; }

/* La case à cocher du système : rayon 8 comme un champ, bordure taupe 1,5 px au
   repos, bascule de TEINTE au coché — jamais d'épaisseur, le champ ne bouge
   pas. */
.tache__case {
  width: 22px; height: 22px;
  display: grid;
  place-items: center;
  border-radius: var(--r-champ);
  box-shadow: inset 0 0 0 1.5px var(--taupe);
  transition: box-shadow .3s ease, background .3s ease;
}
.tache__case--faite,
.tache__geste[aria-pressed='true'] .tache__case {
  background: rgba(95, 114, 104, .12);
  box-shadow: inset 0 0 0 1.5px var(--sauge-lisible);
}
.tache__case--libre { background: rgba(107, 87, 168, .12); box-shadow: inset 0 0 0 1.5px var(--lavande-profond); }
/* Une prescription n'est pas une tâche cochée : c'est un objet verrouillé. Le
   cadenas dit ce que la coche ne dirait pas — vous pouvez l'attester, pas la
   réécrire. */
.tache__case--verrou { background: rgba(95, 114, 104, .12); box-shadow: inset 0 0 0 1.5px var(--sauge-lisible); }
.cadenas { width: 14px; height: 14px; fill: none; stroke: var(--sauge-lisible); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.tache__case--libre .coche path { stroke: var(--lavande-profond); }

/* La coche se trace, comme on coche une case au stylo : c'est le geste, pas son
   résultat. Un seul moment animé sur toute la page. */
.coche { width: 13px; height: 13px; flex-shrink: 0; overflow: visible; }
.coche path {
  fill: none;
  stroke: var(--sauge-lisible);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 13;
  stroke-dashoffset: 13;
  transition: stroke-dashoffset .42s cubic-bezier(.55, 0, .3, 1);
}
.coche--tracee path { stroke-dashoffset: 0; }
.tache__geste[aria-pressed='true'] .coche path { stroke-dashoffset: 0; }

/* L'écho : la ligne s'est écrite. Il réserve sa hauteur pour que la carte ne
   saute pas quand il apparaît. */
.carte__echo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sm) var(--md);
  margin-top: 14px;
  min-height: 30px;
  font-size: 12.5px;
  color: var(--encre-douce);
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity .45s ease .3s, transform .45s cubic-bezier(.16, 1, .3, 1) .3s;
}
.ecran[data-fait='true'] .carte__echo { opacity: 1; transform: none; }
.carte__rejouer {
  border: none;
  background: none;
  padding: 6px 2px;
  min-height: 30px;
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--sauge-lisible);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.carte__rejouer:hover { color: var(--vert-profond); }

/* Une consigne du portail est posée sur son propre fond : elle n'est pas une
   saisie du propriétaire, et cela doit se voir sans avoir à le dire. */
.tache--prescrite { background: rgba(95, 114, 104, .08); border-radius: var(--r-champ); }
.tache--prescrite .tache__quoi { color: var(--encre); font-weight: 600; }
.taches--large { margin-top: var(--lg); }
.taches--large .tache:last-child { border-bottom: 1px solid var(--separateur); }

/* ---------- Les fragments d'application ----------
   La page ne RECONSTITUE plus l'app : elle en montre des morceaux, découpés
   dans des captures du simulateur.

   LE SOCLE. Chaque fragment est posé sur un rectangle du sol de l'app —
   #5F7268, le même aplat que les cinq onglets. Ce n'est pas un cadre
   décoratif, c'est la seule mise en scène juste : dans l'application, ces
   cartes SONT blanches sur ce vert, et c'est précisément ce contraste que le
   design system est allé chercher le 2026-08-18 (« sur le lin, les cartes
   blanches étaient crème sur crème et ne se détachaient pas »). Posées
   directement sur les feuilles blanches de cette page, elles disparaissaient
   de la même façon — vu au rendu, pas déduit.

   Et aucune ombre sur ces cartes : sur le sauge, le halo du système est
   invisible, l'app n'en projette pas, le blanc se détache seul. Une ombre
   ajoutée ici mentirait sur ce que fait l'écran.

   `.appli--nu` retire le socle pour les fragments déjà posés sur le sol de la
   page (section « Et le soir est fermé ») : un socle sauge sur un fond sauge
   ne serait qu'un rectangle sans objet. */

.appli {
  margin: 0;
  background: var(--sol);
  border-radius: var(--r-carte);
  padding: var(--lg);
}
.appli img { display: block; width: 100%; height: auto; }

/* Dans une paire, les deux socles prennent la même hauteur et la carte se
   centre dedans. Deux morceaux d'app de hauteurs différentes posés côte à côte
   donnent deux rectangles verts inégaux, et l'œil lit l'inégalité avant de lire
   le contenu — une marge asymétrique passe pour un oubli. */
.duo .appli { display: grid; align-content: center; }
.appli--nu { background: none; border-radius: 0; padding: 0; }

/* Une paire de fragments : côte à côte quand la place existe, empilés sinon.
   `align-items: start` — deux morceaux d'app de hauteurs différentes ne
   s'étirent pas l'un sur l'autre, ils s'alignent par le haut comme dans
   l'écran d'où ils viennent. */
.duo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  align-items: stretch;
  gap: var(--lg);
  margin-top: var(--xl);
}

/* ---------- Le dit et le montré, côte à côte ----------
   Un `figure.appli` SEUL dans une carte pleine largeur laissait entre 560 et
   660 px de blanc mort à sa droite, sur toute la hauteur de la capture : la
   carte fait 1180 px de large et ne s'adapte jamais à son contenu, dont chaque
   mesure est plafonnée — titre 22ch, chapô 64ch, note 74ch pour la lisibilité,
   captures à 420–520 px pour ne pas les flouter. Le texte et la capture
   partagent désormais la largeur, et le côté ALTERNE d'un bloc à l'autre
   (`--inverse`) : sans quoi tout reste aligné sur le même bord sur 7 000 px de
   défilement.

   Colonnes PROPORTIONNELLES et non fixes. Une piste de 460 px figée laissait,
   vers 960 px de fenêtre, une colonne de texte de 318 px plus étroite que
   l'image qu'elle présente — l'inverse de la hiérarchie voulue. Le texte garde
   ici la piste la plus large à toutes les tailles.

   La règle qui gouverne tout ceci vit dans DESIGN.md, § Layout › Named Rules —
   « La Règle de la Capture Accompagnée » (2026-09-06), corollaire des pistes
   proportionnelles compris. Ce fichier l'applique, il ne l'édicte pas. */

.media {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
}
.media--inverse { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.media .appli, .media__cote { max-width: 480px; }
.media .appli { margin: 0; }
/* Dans une colonne, les plafonds de lisibilité sont déjà posés par la piste
   elle-même : les rappeler ici rétrécirait le texte une seconde fois. */
.media__dit > .bloc__titre,
.media__dit > .bloc__chapo,
.media__dit > .bloc__note,
.media__dit > .inclus { max-width: none; }
.media__dit > .bloc__intertitre:first-child { margin-top: 0; }
.media__dit > .inclus { margin-top: var(--lg); }
.capacites + .media { margin-top: var(--xxl); }

/* La carte qui garde son contenu sur une seule colonne (celles qui portent un
   `.duo` allant jusqu'aux deux bords) : le chapô et la note y respirent plus
   large que la mesure de lecture stricte. À 64ch sous une carte de 1084 px,
   ils formaient une colonne étroite collée à gauche, et le titre au-dessus
   paraissait décroché du reste. */
.carte--pleine .bloc__chapo { max-width: 88ch; }
.carte--pleine .bloc__note { max-width: 92ch; }
/* Un chapô plus long que les autres : 305 signes, soit 1 953 px sur une seule
   ligne. À 88ch (788 px) il en réclamait trois, dont une dernière courte qui
   rouvrait le vide que ce chantier venait de fermer. Il prend donc toute la
   carte — 1 084 px, il lui en faut 985 — et `balance` répartit les deux lignes
   à égalité au lieu de laisser la seconde plus courte. */
.carte--pleine .bloc__chapo--long { max-width: none; text-wrap: balance; }

/* Le bloc de clôture : le seul de la page qui ne s'aligne pas à gauche. Il ne
   présente plus rien, il prend congé. */
.carte--centree { text-align: center; }
.carte--centree .bloc__titre { max-width: 30ch; margin-left: auto; margin-right: auto; }
.carte--centree .bloc__chapo { max-width: 64ch; margin-left: auto; margin-right: auto; }
.carte--centree .sortie { justify-content: center; }

/* Sous 1040 px, la piste de texte devenait plus étroite que la capture : les
   deux colonnes s'empilent, et le dit repasse toujours avant le montré. */
@media (max-width: 1040px) {
  .media, .media--inverse { grid-template-columns: minmax(0, 1fr); }
  .media--inverse .media__dit { order: -1; }
  .media--inverse .media__cote { margin-top: var(--xl); }
  .media .appli, .media__cote { max-width: 460px; }
  .carte--pleine .bloc__chapo,
  .carte--pleine .bloc__note { max-width: none; }
}

/* ---------- Le soir fermé ----------
   Le résultat du geste, montré et non décrit : les vrais anneaux, la vraie
   série. Posé directement sur le sol de la page, hors carte — c'est le seul
   bloc de la page qui n'est pas dans une feuille blanche, parce que dans
   l'app non plus ces éléments ne sont pas dans une carte. */

.ferme {
  max-width: var(--contenu);
  margin: 0 auto;
  padding: 0 var(--bord) clamp(40px, 6vw, 72px);
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
}
.ferme__dit { max-width: 46ch; }
.ferme__titre {
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.12;
  letter-spacing: -.025em;
  color: var(--blanc);
}
.ferme__chapo {
  margin-top: var(--md);
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.62;
  color: var(--lin);
}
.ferme__serie { margin-top: var(--lg); max-width: 420px; }

/* ---------- Ce que l'app note toute seule ----------
   La pastille d'icône du système : un CARRÉ ARRONDI et jamais un cercle (546
   rectangles contre 55 cercles dans l'app), rayon ~29 % du côté, fond de la
   couleur d'accent à α 0,10, icône pleine couleur. Grille à deux colonnes au
   plus : sur mobile, jamais trois. */

.capacites {
  list-style: none;
  margin: var(--xl) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: var(--lg) var(--xl);
}
.capacite { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: var(--md); align-items: start; }
.pastille {
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
}
.pastille svg { width: 22px; height: 22px; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pastille--sauge { background: rgba(95, 114, 104, .10); }
.pastille--sauge svg { stroke: var(--sauge-lisible); }
.pastille--lavande { background: rgba(107, 87, 168, .10); }
.pastille--lavande svg { stroke: var(--lavande-profond); }
.pastille--vert { background: rgba(47, 62, 51, .09); }
.pastille--vert svg { stroke: var(--vert-profond); }
.capacite__dit { font-size: 13.5px; line-height: 1.62; color: var(--encre-douce); }
.capacite__dit b { display: block; margin-bottom: 3px; font-size: 15px; color: var(--encre); font-weight: 700; }

/* ---------- Les quatre questions ---------- */

.questions {
  display: grid;
  /* DEUX colonnes au plus, jamais trois : à trois pistes, la quatrième question
     reste seule sur sa ligne et la grille se lit comme un reste. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(28px, 4vw, 56px);
  margin: var(--xl) 0 0;
}
@media (max-width: 720px) { .questions { grid-template-columns: minmax(0, 1fr); } }
.questions__item { padding: 20px 0; border-top: 1px solid var(--separateur); }
.questions dt {
  font-family: var(--serif);
  font-variation-settings: 'SOFT' 60, 'WONK' 1, 'opsz' 24;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--vert-profond);
}
.questions dd {
  margin: 9px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--encre-douce);
  max-width: 60ch;
}
.questions dd b { color: var(--encre); font-weight: 700; }

/* ---------- Le foyer, et la sortie ---------- */

.inclus { list-style: none; margin: var(--xl) 0 0; padding: 0; max-width: 640px; }
.inclus li {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: var(--sm) 0;
  border-bottom: 1px solid var(--separateur);
  font-size: 15px;
}
.inclus li:first-child { border-top: 1px solid var(--separateur); }

.sortie { display: flex; flex-wrap: wrap; align-items: center; gap: var(--md) var(--lg); margin-top: var(--xl); }
.sortie__mention { font-size: 13px; color: var(--encre-douce); }

/* ---------- Pied de page — de retour sur le vert ---------- */

.pied { border-top: 1px solid rgba(245, 242, 235, .18); margin-top: var(--lg); }
.pied__interieur {
  max-width: var(--contenu);
  margin: 0 auto;
  padding: var(--xl) var(--bord) var(--xxl);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 14px var(--xl);
}
.pied__marque { font-size: 14px; font-weight: 700; color: var(--blanc); }
.pied__liens { display: flex; flex-wrap: wrap; gap: 22px; }
.pied__liens a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 13px; color: var(--lin);
}
.pied__liens a:hover { color: var(--blanc); text-decoration: underline; text-underline-offset: 3px; }
.pied__avis {
  flex-basis: 100%;
  font-size: 12px;
  line-height: 1.6;
  color: var(--lin);
  max-width: 76ch;
}

/* ---------- Mouvement réduit ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-delay: 0ms !important;
    transition-duration: .001ms !important;
    transition-delay: 0ms !important;
  }
}

/* ---------- Écrans étroits ---------- */

@media (max-width: 1000px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 5vw, 44px); }
  /* Le soir fermé passe en colonne : les anneaux d'abord, la phrase dessous.
     C'est l'ordre de l'écran d'où ils viennent. */
  .ferme { grid-template-columns: minmax(0, 1fr); gap: var(--lg); justify-items: start; }
  .ferme__anneaux { max-width: 320px; }
  .hero__titre { max-width: 18ch; }
  .ecran { justify-self: start; max-width: 440px; }
}
@media (max-width: 760px) {
  .nav { gap: 10px; }
  .nav__filet, .nav__role { display: none; }
  .nav__nom { font-size: 18px; white-space: nowrap; }

  /* La provenance passe sous l'entrée au lieu de la comprimer ; la case reste à
     hauteur du libellé qu'elle qualifie. */
  .tache--faite, .tache--prescrite, .tache__geste {
    grid-template-columns: 22px minmax(0, 1fr);
    align-items: start;
    row-gap: 2px;
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .tache__quand { grid-column: 2; text-align: left; }
}
@media (max-width: 620px) {
  .hero__titre { max-width: none; }
  .hero__actions .bouton, .sortie .bouton { width: 100%; }
  .ecran { max-width: none; }
  .capsule__nom { font-size: 20px; }
}