/* ==========================================================================
   Napoli Care — page d'accueil publique du portail vétérinaire.

   Motif unique : le carnet. Quatorze semaines réglées, une marge, sept jours
   par ligne. Vierge dans le premier écran ; il se couvre d'entrées à mesure
   qu'on descend.

   Le socle est celui du portail, à l'unité près (`lib/design_system/
   napoli_carnet.dart`, refonte du 2026-09-03) : FOND SAUGE avec sa lumière
   verte fixe, PAGES DE LIN posées dessus, filet de marge terre cuite, réglure
   au pas de 34. On est déjà dans le carnet avant de se connecter — l'écran de
   login n'est plus une rupture, c'est la page suivante.

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

@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 ---- */
  --lin: #F5F2EB;
  --blanc: #FFFFFF;
  --sauge: #8DA399;
  --sauge-lisible: #5F7268;
  --vert-profond: #2F3E33;
  --taupe: #BCAAA4;
  --terre: #D4896B;
  --terre-profond: #B95B36;
  --lavande-profond: #6B57A8;
  --encre: #1C1C1E;
  --encre-douce: #6B6B6B;

  /* ---- Les trois pièces du carnet, reprises de NapoliCarnet ---- */

  /* Le fond. Même aplat que les cinq onglets de l'app et que le portail. */
  --sol: var(--sauge-lisible);
  /* La page. Lin, jamais blanc : une feuille est une page, pas une carte. */
  --page: var(--lin);

  /* NapoliCarnet.rule (0x42BCAAA4) et .ruleStrong (0x6BBCAAA4). */
  --regle: rgba(188, 170, 164, .26);
  --regle-forte: rgba(188, 170, 164, .42);
  /* NapoliCarnet.marginRule (0x9EB95B36) — le filet de marge. */
  --marge: rgba(185, 91, 54, .62);

  /* NapoliCarnet.lineHeight. Toute ligne de contenu mesure ce pas ou un
     multiple exact : le texte s'écrit SUR la ligne au lieu de flotter. */
  --pas: 34px;
  /* NapoliCarnet.marginInset. */
  --marge-x: 56px;
  /* NapoliCarnet.pageGutter — la gouttière intérieure, après le filet. */
  --gouttiere-page: clamp(16px, 2vw, 28px);
  --indent: calc(var(--marge-x) + var(--gouttiere-page));

  --rayon-page: 24px;
  /* NapoliCarnet.pageShadow. Au vert profond et non au sauge : c'est la seule
     dérogation à la Règle du Halo Sauge, et elle ne vaut que sur ce fond, où
     un halo sauge est purement invisible. */
  --ombre-page:
    0 3px 12px rgba(47, 62, 51, .10),
    0 12px 40px rgba(47, 62, 51, .20);

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

  /* La lumière verte du fond, reprise de NapoliCarnet.groundLight. Elle est
     déclarée ici parce que DEUX surfaces doivent la porter à l'identique : le
     fond fixe, et le bandeau une fois décollé. */
  --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 aussi au
   système : sélection, curseur, anneau de focus, ascenseur. La page ayant
   désormais deux fonds, chacune se règle sur celui qu'elle 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: 4px;
}
/* Sur le vert, un anneau sauge est invisible et une sélection sauge aussi. */
.nav :focus-visible,
.hero :focus-visible,
.pied :focus-visible { outline-color: var(--lin); }
.nav ::selection,
.hero ::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; }
}

/* La lumière du fond est verte : c'est la règle du système, pas un dégradé
   décoratif. Reprise de NapoliCarnet.groundLight — même centre, même teinte,
   et fixe pendant que le carnet défile devant elle. */
.lumiere {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--lueur), var(--sol);
}

/* ---------- Le bandeau ----------
   Celui du portail : monogramme, nom en Fraunces clair, filet, rôle. La Règle
   du Texte sur l'Aplat s'y applique — surfaceWhite pour ce qui compte, lin
   pour le secondaire, jamais un gris. */

.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 page de lin passe dessous,
   et un voile translucide faisait tomber « Portail vétérinaire » à 3,29:1. Il
   reprend la lueur du fond en `background-attachment: fixed`, donc 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);
}
.nav__marque { display: flex; align-items: center; gap: 11px; }
.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;
  font-size: 14px;
  color: var(--lin);
}
.nav__lien:hover { color: var(--blanc); }

/* ---------- Boutons ----------
   Un seul geste plein par surface, et il prend la matière qui le détache de
   son fond : sur le vert, le geste EST la page — lin plein, texte vert
   profond, comme l'intercalaire actif du portail. Sur une page de lin, il
   redevient le bouton sauge du portail. */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 26px;
  border: none;
  border-radius: 12px;
  background: var(--lin);
  color: var(--vert-profond);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .2px;
  cursor: pointer;
  box-shadow: 0 6px 18px -10px rgba(47, 62, 51, .55);
  transition: transform .4s cubic-bezier(.2, 1.6, .4, 1), box-shadow .3s ease, background .2s ease;
}
.bouton:hover { background: var(--blanc); box-shadow: 0 12px 28px -12px rgba(47, 62, 51, .65); }
.bouton:active { transform: scale(.95); }
.bouton--petit { min-height: 44px; padding: 0 18px; font-size: 13px; }
.bouton--sobre {
  background: transparent;
  color: var(--lin);
  /* Le contour porte seul la limite du bouton : à .45 il ne donnait que
     2,17:1 sur le sauge, sous le seuil de 3:1 des éléments non textuels. */
  border: 1px solid rgba(245, 242, 235, .7);
  box-shadow: none;
}
.bouton--sobre:hover { background: rgba(245, 242, 235, .12); color: var(--blanc); box-shadow: none; }
/* Le geste plein d'une page de lin — celui du pied de page du portail. */
.bouton--page {
  background: var(--sauge-lisible);
  color: var(--blanc);
  box-shadow: 0 6px 18px -10px rgba(47, 62, 51, .5);
}
.bouton--page:hover { background: var(--vert-profond); box-shadow: 0 12px 28px -12px rgba(47, 62, 51, .6); }

/* ---------- Hero — posé directement sur le vert ---------- */

/* La largeur inclut le bord : ce qui reste APRÈS le padding vaut exactement
   `--contenu`, comme une `.page` dans sa `.feuille`. Sans cela, le carnet du
   héros mesurait 2 × `--bord` de moins que les pages suivantes — deux fois le
   même objet à deux largeurs, visible dès qu'on faisait défiler. */
.hero {
  position: relative;
  max-width: calc(var(--contenu) + 2 * var(--bord));
  margin: 0 auto;
  padding: clamp(36px, 5vw, 64px) var(--bord) 0;
}
.hero__titre {
  font-size: clamp(34px, 5.2vw, 68px);
  line-height: 1.04;
  letter-spacing: -.03em;
  max-width: 22ch;
  color: var(--lin);
}
/* La formule qui tenait le titre. Elle garde la serif et la chute en blanc,
   à un cran en dessous du H1 : c'est elle qu'on lit juste après la promesse,
   et c'est elle qui donne son sens au carnet vide. */
.hero__formule {
  margin-top: clamp(14px, 1.6vw, 22px);
  font-family: var(--serif);
  font-variation-settings: 'SOFT' 60, 'WONK' 1, 'opsz' 96;
  font-weight: 600;
  font-size: clamp(22px, 2.9vw, 38px);
  line-height: 1.12;
  letter-spacing: -.02em;
  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. Elle prend sa propre ligne :
   la coupure d'un texte équilibré tombait au milieu de la première phrase,
   « il se passe / 90 jours », ce qui casse les deux. */
.hero__formule em {
  display: block;
  font-style: normal;
  color: var(--blanc);
}
.hero__chapo {
  margin-top: 24px;
  max-width: 58ch;
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.64;
  color: var(--lin);
}
.hero__actions {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}
.hero__note {
  margin-top: 13px;
  font-size: 13px;
  font-style: italic;
  color: var(--lin);
}
.hero__legende {
  margin: 18px 0 clamp(40px, 6vw, 76px);
  font-size: 14px;
  line-height: 1.6;
  color: var(--lin);
  /* Elle court sous le carnet, sur sa largeur : à 68ch elle tombait sur trois
     lignes courtes le long d'un grand vide. */
  max-width: none;
}

/* ---------- La page ----------
   La primitive du portail : une feuille de lin posée sur le vert, coins à 24,
   ombre au vert profond, filet de marge terre cuite à 56 px du bord. Elle
   déclare son élévation UNE FOIS — par l'ombre, jamais par une bordure qui en
   doublerait le contour. */

.page {
  position: relative;
  max-width: var(--contenu);
  margin: 0 auto;
  background: var(--page);
  border-radius: var(--rayon-page);
  box-shadow: var(--ombre-page);
}
.page::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--marge-x);
  width: 1px;
  background: var(--marge);
  pointer-events: none;
  z-index: 2;
}
.page__corps {
  padding:
    clamp(34px, 4.5vw, 58px)
    clamp(20px, 3vw, 44px)
    clamp(38px, 5vw, 66px)
    var(--indent);
}
/* Ce qui reprend toute la largeur de la page, marge comprise : les lignes
   écrites, dont la pastille vit DANS la marge. */
.pleine-largeur {
  margin-left: calc(-1 * var(--indent));
  margin-right: calc(-1 * clamp(20px, 3vw, 44px));
}

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

.page__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: 20ch;
  color: var(--vert-profond);
}
/* Les paragraphes d'introduction prennent la largeur de leur encart. La mesure
   confortable de 62ch laissait, sur une page de 1180, une colonne de vide à
   droite de chaque chapô — et `pleine-largeur` ne pouvait rien y faire, cette
   classe ne déplace que les marges, elle ne lève pas la mesure. */
.page__chapo {
  margin-top: 16px;
  max-width: none;
  font-size: 16px;
  line-height: 1.66;
  color: var(--encre-douce);
}
/* L'intertitre de section du portail : Fraunces 22, et le trait qui ferme. */
.page__intertitre {
  margin-top: clamp(28px, 4vw, 44px);
  font-variation-settings: 'SOFT' 60, 'WONK' 1, 'opsz' 24;
  font-size: 22px;
  font-weight: 700;
  color: var(--vert-profond);
}
.page__note {
  margin-top: 26px;
  max-width: 72ch;
  font-size: 13px;
  line-height: 1.68;
  color: var(--encre-douce);
}
.page__mention {
  margin-top: 24px;
  font-size: 12px;
  font-style: italic;
  color: var(--encre-douce);
}

/* ---------- Le cahier ----------
   La même page, mais sa marge porte les dates : la colonne des semaines EST la
   marge, et le filet terre cuite la ferme. Pas de bande taupe, pas de pliure
   projetée — le portail n'en a pas, et deux grammaires pour un seul objet
   étaient précisément l'incohérence. */

.cahier {
  --marge-x: var(--gouttiere);
  --gouttiere: 56px;
  padding: 0;
  overflow: hidden;
}
/* Le cahier du héros est une page à part entière, posée sur le vert. Celui
   d'une page de contenu s'écrit DANS la feuille, d'un bord à l'autre : il
   reprend la marge de sa page au lieu d'en ouvrir une seconde. */
.hero .cahier { margin: clamp(40px, 5.5vw, 68px) 0 0; }
.page__corps .cahier {
  margin-top: clamp(28px, 4vw, 44px);
  margin-bottom: 0;
}

.cahier__entete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 20px;
  padding: 20px clamp(20px, 3vw, 30px) 16px var(--indent);
  border-bottom: 1px solid var(--regle-forte);
}
.cahier__quoi {
  font-family: var(--serif);
  font-variation-settings: 'SOFT' 60, 'WONK' 1, 'opsz' 24;
  font-size: 19px;
  font-weight: 700;
  color: var(--vert-profond);
}
.cahier__quand { font-size: 13px; color: var(--encre-douce); }

.carnet {
  position: relative;
  display: grid;
  grid-template-columns: var(--gouttiere) repeat(7, minmax(0, 1fr));
}

.carnet__coin { border-bottom: 1px solid var(--regle-forte); }
.carnet__entete {
  grid-column: 2 / -1;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border-bottom: 1px solid var(--regle-forte);
}
.carnet__initiale {
  padding: 8px 0 8px 12px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.6px;
  color: var(--encre-douce);
}
/* Samedi et dimanche portent leur initiale plus appuyée. Elles étaient en terre
   cuite à 80 % d'opacité : 4,07:1 avant l'opacité, donc illisibles à 9 px une
   fois le fond passé au lin. Le rythme de la semaine se lit dans la teinte des
   cases, la couleur d'alerte reste à l'alerte. */
.carnet__initiale--repos { color: var(--vert-profond); }

.carnet__date {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: var(--ligne, 34px);
  padding-right: 11px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .2px;
  color: var(--encre-douce);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.carnet__jour {
  display: flex;
  align-items: center;
  height: var(--ligne, 34px);
  padding-left: 12px;
  border-bottom: 1px solid var(--regle);
  min-width: 0;
  transition: background .25s ease;
}
/* Samedi et dimanche : le rythme de la semaine se voit dans le papier. */
.carnet__jour--repos { background: rgba(188, 170, 164, .1); }
/* Les jours hors des 90 : le cahier ne commence pas au rendez-vous, il
   l'entoure. */
.carnet__jour--hors { background: rgba(188, 170, 164, .18); }
.carnet:hover .carnet__jour:hover { background: rgba(141, 163, 153, .16); }

/* ---------- Ce qui s'écrit dedans ---------- */

.entree {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  opacity: 0;
  transform: translateY(-3px);
  transition:
    opacity .5s ease var(--retard, 0ms),
    transform .5s cubic-bezier(.16, 1, .3, 1) var(--retard, 0ms);
}
.carnet--ecrit .entree,
.entree--seule { opacity: 1; transform: none; }

.entree__marque {
  width: 7px; height: 7px;
  border-radius: 100px;
  background: var(--teinte, var(--sauge-lisible));
  flex-shrink: 0;
}
/* Un traitement non donné laisse un rond creux : le manque s'écrit aussi. */
.entree__marque--creux {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--terre-profond);
}

/* La coche du jour tenu n'est pas un point : elle se trace, comme on coche une
   case au stylo. C'est le seul mouvement de la page, répété 80 fois. */
.coche {
  width: 13px; height: 13px;
  flex-shrink: 0;
  overflow: visible;
}
.coche path {
  fill: none;
  stroke: var(--teinte, var(--sauge-lisible));
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 13;
  stroke-dashoffset: 13;
  transition: stroke-dashoffset .42s cubic-bezier(.55, 0, .3, 1) var(--retard, 0ms);
}
.carnet--ecrit .coche path { stroke-dashoffset: 0; }
.entree__mot {
  font-size: 12px;
  color: var(--encre-douce);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.entree__mot--fort { color: var(--vert-profond); font-weight: 700; }
.entree__mot--alerte { color: var(--terre-profond); font-weight: 700; }

/* La légende vit dans le carnet, sur sa dernière ligne. */
.cahier__legende {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px 22px;
  margin: 0;
  padding: 13px clamp(20px, 3vw, 30px) 15px var(--indent);
  border-top: 1px solid var(--regle-forte);
  font-size: 12.5px;
  color: var(--encre-douce);
}
.puce {
  width: 7px; height: 7px;
  border-radius: 100px;
  background: var(--teinte, var(--sauge-lisible));
  display: inline-block;
  margin-right: -14px;
}
.puce--creux { background: transparent; box-shadow: inset 0 0 0 1.5px var(--terre-profond); }
/* La coche de légende est déjà tracée : elle nomme le signe, elle ne l'écrit pas. */
.coche--legende path { stroke-dashoffset: 0; }

/* ---------- Le bilan des 90 jours ----------
   Trois volets, pas trois tuiles : la page reste la page. Aucun rectangle
   posé dessus, aucune ombre, aucun rayon — « aucune carte sur une page de
   carnet » (DESIGN.md). Ce qui sépare les volets est le filet du carnet
   redressé à la verticale ; ce qui dit l'alerte est la pastille et le mot,
   jamais la surface — colorer un volet entier confondrait le message et son
   support. La liste précédente arrêtait chaque ligne au premier tiers ; ici
   les trois chiffres se lisent d'un seul regard, de gauche à droite, et la
   colonne qui demande une décision ferme la lecture. */

.bilan {
  list-style: none;
  margin: clamp(30px, 3.8vw, 48px) 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--regle-forte);
  border-bottom: 1px solid var(--regle-forte);
  /* Le bloc traverse la feuille mais ne franchit pas le filet de marge : à
     gauche il commence là où commence le texte de la page. */
  padding-left: var(--indent);
  padding-right: var(--gouttiere-page);
}
.bilan__volet {
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 2.8vw, 32px) clamp(18px, 2.4vw, 34px);
}
.bilan__volet:first-child { padding-left: 0; }
.bilan__volet + .bilan__volet { border-left: 1px solid var(--regle); }
/* La colonne qui demande une décision est tenue par le filet de marge du
   carnet — terre cuite, comme toute alerte du portail — et non par un aplat
   coloré : le statut se porte par le trait, la pastille et le mot. */
.bilan__volet + .bilan__volet--alerte { border-left-color: var(--marge); }

/* L'en-tête garde la même hauteur avec ou sans étiquette : sans elle, le
   chiffre du volet remontait de 20 px et les trois ne s'alignaient plus. */
.bilan__entete {
  display: flex;
  align-items: center;
  gap: 10px;
  /* Hauteur FIXE, pas un minimum : l'étiquette mesurait 22,6 px pour 22 de
     minimum, et ces 0,6 px décalaient tout le troisième volet vers le bas —
     chiffre, libellé et commentaire ne s'alignaient plus sur les deux autres. */
  height: 24px;
}
.bilan__pastille {
  width: 8px; height: 8px;
  border-radius: 2px;
  background: var(--teinte, var(--sauge-lisible));
  flex-shrink: 0;
}
/* Le traitement manquant garde le rond creux de la légende du cahier : le
   manque s'écrit du même signe d'un bout à l'autre de la page. */
.bilan__pastille--creux {
  border-radius: 100px;
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--terre-profond);
}
/* Terre cuite profonde, jamais l'accent nominal : blanc sur terracotta ne
   donne que 2,77:1. */
.bilan__etiquette {
  padding: 0 10px;
  line-height: 19px;
  border-radius: 100px;
  background: var(--terre-profond);
  color: var(--lin);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
}
.bilan__chiffre {
  display: block;
  margin-top: 14px;
  font-family: var(--serif);
  font-variation-settings: 'SOFT' 60, 'WONK' 1, 'opsz' 144;
  font-size: clamp(38px, 4.3vw, 56px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.025em;
  color: var(--vert-profond);
  font-variant-numeric: tabular-nums;
}
/* L'unité est une note, pas un chiffre : elle repasse en Hanken et perd la
   moitié de la taille, sinon « kg » pèse autant que « 4,5 ». */
.bilan__unite {
  font-family: var(--sans);
  font-size: .34em;
  font-weight: 700;
  letter-spacing: 0;
  margin-left: .2em;
}
.bilan__quoi {
  display: block;
  margin-top: 12px;
  font-size: 15px;
  font-weight: 700;
  color: var(--encre);
}
.bilan__detail {
  display: block;
  margin-top: 7px;
  font-size: 13px;
  line-height: 1.62;
  color: var(--encre-douce);
}
.bilan__volet--alerte .bilan__chiffre,
.bilan__volet--alerte .bilan__quoi { color: var(--terre-profond); }

/* ---------- Une journée dépliée ----------
   La même ligne de carnet, à l'échelle où l'on peut lire qui a écrit quoi. Sa
   marge est celle de la page : une seule marge court au dos. */

.journee {
  list-style: none;
  margin-top: clamp(22px, 3vw, 32px);
  padding: 0;
  border-top: 1px solid var(--regle-forte);
}
.ligne {
  display: grid;
  grid-template-columns: var(--marge-x) minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--gouttiere-page);
  min-height: calc(var(--pas) * 2);
  padding-right: var(--gouttiere-page);
  border-bottom: 1px solid var(--regle);
}
.ligne:last-child { border-bottom: 1px solid var(--regle-forte); }
/* Ce qui vient du portail est posé sur son propre fond : la consigne n'est pas
   une saisie du propriétaire, et cela doit se voir sans le dire. */
.ligne--prescrite { background: rgba(95, 114, 104, .09); }
.ligne__pastille {
  width: 8px; height: 8px;
  border-radius: 2px;
  background: var(--teinte, var(--sauge-lisible));
  justify-self: center;
}
.ligne__pastille--creux {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--terre-profond);
  border-radius: 100px;
}
.ligne__quoi { font-size: 15px; color: var(--encre); }
.ligne__qui {
  font-size: 12px;
  color: var(--encre-douce);
  text-align: right;
}
.ligne--libre .ligne__quoi { color: var(--encre-douce); }

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

.questions {
  display: grid;
  /* `min()` et non `320px` seul : sur une page étroite, une piste de 320 px
     ne rentre pas dans la colonne de texte et débordait de la feuille. */
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 0 clamp(28px, 4vw, 56px);
  margin: clamp(26px, 3.5vw, 42px) 0 0;
}
.questions__item {
  padding: 20px 0;
  border-top: 1px solid var(--regle-forte);
}
.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; }

/* ---------- L'offre ---------- */

.inclus {
  list-style: none;
  margin: clamp(26px, 3.5vw, 38px) 0 0;
  padding: 0;
  max-width: 640px;
}
.inclus li {
  display: flex;
  align-items: center;
  min-height: var(--pas);
  padding: 8px 0;
  border-bottom: 1px solid var(--regle);
  font-size: 15px;
}
.inclus li:first-child { border-top: 1px solid var(--regle-forte); }

.offre__action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-top: clamp(26px, 3.5vw, 38px);
}
.offre__garanties { 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: clamp(16px, 2vw, 28px);
}
.pied__interieur {
  max-width: var(--contenu);
  margin: 0 auto;
  padding: 34px var(--bord) 42px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 14px 32px;
}
.pied__marque { font-size: 14px; font-weight: 700; color: var(--blanc); }
.pied__liens { display: flex; flex-wrap: wrap; gap: 22px; }
.pied__liens a { 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: 70ch;
}

/* ---------- 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;
  }
  .entree { opacity: 1; transform: none; }
}

/* ---------- Écrans étroits ----------
   Sept colonnes ne tiennent pas sous 900 px : les mots disparaissent, les
   marques restent. Sous 620, la page passe en marge étroite comme le portail
   (NapoliCarnet.marginInsetNarrow) — sauf le cahier, dont la marge porte des
   dates et ne peut pas descendre sous 46. */

@media (max-width: 900px) {
  .entree__mot { display: none; }
  .carnet__jour { justify-content: center; padding-left: 0; }
}
@media (max-width: 760px) {
  /* Le bandeau ne garde que la marque et l'action : le reste déborde. */
  .nav { gap: 10px; }
  .nav__filet, .nav__role, .nav__lien { display: none; }
  .nav__nom { font-size: 18px; white-space: nowrap; }

  /* La provenance passe sous l'entrée au lieu de la comprimer ; la pastille
     reste à hauteur du libellé qu'elle qualifie. */
  .ligne {
    grid-template-columns: var(--marge-x) minmax(0, 1fr);
    align-items: start;
    row-gap: 3px;
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .ligne__pastille { margin-top: 6px; }
  .ligne__qui { grid-column: 2; text-align: left; }
  /* En étroit, les trois volets se remettent les uns sous les autres et le
     filet vertical redevient horizontal : à 250 px de large, un chiffre en
     Fraunces 40 et son commentaire ne tenaient plus côte à côte. */
  .bilan { grid-template-columns: minmax(0, 1fr); padding-right: var(--gouttiere-page); }
  .bilan__volet { padding-left: 0; padding-right: 0; }
  .bilan__volet + .bilan__volet { border-left: none; border-top: 1px solid var(--regle); }
  .bilan__volet + .bilan__volet--alerte { border-top-color: var(--marge); }
}
@media (max-width: 620px) {
  :root { --marge-x: 28px; }
  .cahier { --gouttiere: 46px; }
  .carnet__date { font-size: 10px; padding-right: 6px; }
  .carnet__initiale { padding-left: 0; text-align: center; }
  .hero__titre, .hero__formule { max-width: none; }
  .cahier__entete { flex-direction: column; }
  .hero__actions { gap: 12px; }
  /* Les deux gestes du héros prennent la largeur ; ceux qui vivent dans une
     ligne — le bandeau, le pied de l'offre — gardent la leur. */
  .hero__actions .bouton { width: 100%; }
}