/* ==========================================================================
   LA FEUILLE DES PAGES DE VOTE — le carnet ET /faire.

   Périmètre élargi à la refonte : ce fichier ne sert plus le seul carnet. `/faire`
   le charge APRÈS `digest_etapes.css`, et c'est ainsi qu'il reçoit ses états de choix
   sans qu'on aille modifier le fichier de /resultats, que /faire partage.

   Il ne redéfinit jamais une classe partagée de `style.css` (`.pli`, `.carte`,
   `.etat-note`, `.vide`, `.etiquette`…) : il les COMPOSE, et n'écrit ici que ce qui est
   propre aux pages de vote. Toutes les valeurs passent par les échelles de `:root`
   (`--fs-*`, `--esp-*`, `--lh-*`, `--rayon-*`) : un littéral qui subsiste porte le
   commentaire qui dit pourquoi.
   ========================================================================== */

@media (min-width: 641px) {
  .feuillet { width: 640px; max-width: 640px; }
}

/* Les deux animations vivent ici mais sont DÉCLENCHÉES par style.css (l'échéance qui
   pulse, le sceau qui tombe). Ne pas les supprimer en croyant qu'elles ne servent à
   rien : `grep feuilletGuichet app/static/css` répond depuis les deux fichiers. */
@keyframes feuilletGuichet {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--torii) 45%, transparent); opacity: 1; }
  55%      { box-shadow: 0 0 0 6px color-mix(in srgb, var(--torii) 0%, transparent); opacity: .55; }
}

@keyframes feuilletChute {
  0%   { transform: rotate(-6deg) translateY(-46px) scale(1.3); opacity: 0; }
  55%  { transform: rotate(-6deg) translateY(4px) scale(0.97); opacity: 1; }
  75%  { transform: rotate(-6deg) translateY(-3px) scale(1.02); }
  100% { transform: rotate(-6deg) translateY(0) scale(1); opacity: 1; }
}

/* --------------------------------------------------------------------------
   Questions
   -------------------------------------------------------------------------- */

.q {
  margin: 0 0 var(--esp-5);
  padding-bottom: var(--esp-4);
  border-bottom: 1px solid var(--border);
}
.q:last-of-type { border-bottom: none; margin-bottom: var(--esp-1); }

.q__libelle {
  display: block;
  font-weight: 700;
  font-size: var(--fs-300);
  margin-bottom: var(--esp-1);
}
.q__aide {
  display: block;
  font-size: var(--fs-200);
  color: var(--muted);
  margin-bottom: var(--esp-3);
}
.q__champ { display: flex; flex-direction: column; gap: var(--esp-2); }

/* LA NOTE D'ÉTAT D'UNE QUESTION ne porte plus ni taille, ni graisse, ni couleur propres.
   Elle en portait, et c'était le défaut : `color: var(--matcha-text)` était posé une fois
   pour toutes, si bien qu'un ÉCHEC d'enregistrement s'affichait dans le vert de l'accord.
   Les modificateurs que le script posait (`q__etat--ok`, `q__etat--erreur`) n'avaient, eux,
   aucune règle — ils ne changeaient rien.
   Le gabarit ajoute désormais `.etat-note` (style.css) sur le même élément : c'est elle qui
   donne le ton neutre au repos et le vermillon sous `[data-echec]`, dans les mêmes mots et
   la même couleur que sur toutes les autres pages. Ici on ne règle plus que la place. */
.q__etat {
  display: inline-block;
  margin-top: var(--esp-2);
}

.v-opt {
  min-height: 44px;
  padding: 0 var(--esp-4);
  border: 1px solid var(--border);
  border-radius: var(--rayon-pilule);
  background: var(--paper);
  color: var(--ink);
  font-family: inherit;
  font-size: var(--fs-300);
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.v-opt:hover { border-color: var(--gold); background: var(--gold-soft); }
.v-opt:focus-visible { outline: 2px dashed var(--torii-dark); outline-offset: 2px; }
.v-opt--actif {
  border-color: var(--torii);
  background: var(--torii-soft);
  color: var(--torii-dark);
}
/* Le choix qu'on vient de poser s'enfonce légèrement : la même confirmation physique que
   partout ailleurs, et la seule que le doigt perçoive avant de lire la note d'état. */
.v-opt:active { transform: translateY(1px); }

.v-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
  min-height: 44px;
  padding: var(--esp-2) 0;
  border-bottom: 1px solid var(--border);
}
.v-row:last-child { border-bottom: none; }

.v-label { font-size: var(--fs-300); font-weight: 600; }
.v-detail { font-size: var(--fs-200); color: var(--muted); }

/* Un bouton d'option qui porte un DÉTAIL n'est plus une pastille : c'est un pavé de
   texte sur deux lignes. Laissé en pilule avec libellé et détail sur la même ligne, il
   devenait illisible — « Le silence vaut abstentionUn vote se clôt… ».
   La pastille reste pour les options courtes (Oui/Non, 1-2-3-4). */
.v-opt:has(.v-detail) {
  display: block;
  border-radius: var(--rayon-3);
  padding: var(--esp-3) var(--esp-4);
  text-align: left;
  width: 100%;
}
.v-opt:has(.v-detail) .v-label { display: block; margin-bottom: var(--esp-1); }
.v-opt:has(.v-detail) .v-detail { display: block; line-height: var(--lh-ui); }

/* Et la rangée qui les contient passe en colonne : trois pavés côte à côte sur 390 px
   ne laisseraient que quelques mots par ligne. */
.v-row:has(.v-detail) { flex-direction: column; align-items: stretch; }

.v-num {
  width: 84px;
  min-height: 40px;
  padding: var(--esp-2) var(--esp-3);
  border: 1px solid var(--border);
  border-radius: var(--rayon-2);
  background: var(--paper);
  color: var(--ink);
  font-family: inherit;
  font-size: var(--fs-300);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.v-num:focus-visible { outline: 2px dashed var(--torii-dark); outline-offset: 2px; }

/* Curseur repris du motif déjà validé sur /periode (period-range-input) --
   même geste (poignée ronde, piste transparente sous une piste visuelle
   séparée), redéclaré ici pour ne pas dépendre de style.css. */
.v-slider {
  width: 100%;
  height: 36px;
  margin: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
}
.v-slider::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  height: 8px;
  border-radius: var(--rayon-1);
  background: var(--panel-raised);
  box-shadow: inset 0 0 0 1px var(--border);
}
.v-slider::-moz-range-track {
  height: 8px;
  border-radius: var(--rayon-1);
  background: var(--panel-raised);
  box-shadow: inset 0 0 0 1px var(--border);
}
.v-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -7px;   /* centre la poignée de 22px sur une piste de 8px */
  border-radius: 50%;
  background: var(--torii);
  border: 3px solid var(--paper);
  box-shadow: var(--shadow-sm);
  cursor: grab;
}
.v-slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--torii);
  border: 3px solid var(--paper);
  box-shadow: var(--shadow-sm);
  cursor: grab;
}
.v-slider:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--torii-dark); outline-offset: 2px; }

/* Le total du widget « points » se réécrit à chaque pixel de glissé, sous une colonne de
   curseurs parfaitement alignés : en chasse proportionnelle, « Total : 100/100 » et
   « Total : 88/100 » n'ont pas la même largeur et la ligne tressaute. */
.v-total {
  font-family: "Shippori Mincho", Georgia, serif;
  font-weight: 700;
  font-size: var(--fs-400);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.v-total--erreur {
  color: var(--torii-dark);
  background: var(--warn-soft);
  border-radius: var(--rayon-2);
  padding: var(--esp-1) var(--esp-2);
}

/* Petits boutons de réordonnancement -- 44px francs même si l'affordance
   visuelle reste petite, car ce sont les cibles les plus souvent ratées au
   pouce sur une liste dense. */
.v-move {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--rayon-2);
  background: var(--paper);
  color: var(--muted);
  font-size: var(--fs-300);
  line-height: 1;
  cursor: pointer;
  flex: none;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.v-move:hover { border-color: var(--torii); color: var(--torii); }
.v-move:focus-visible { outline: 2px dashed var(--torii-dark); outline-offset: 2px; }
/* Un bouton de déplacement désactivé (première ou dernière ligne) n'a pas de libellé à
   protéger : il ne porte qu'un chevron. On l'atténue donc par la COULEUR, jamais par
   l'opacité — la règle du site vaut aussi quand le texte est un caractère. */
.v-move:disabled { color: var(--usuzumi); border-color: var(--border); cursor: default; }

.v-texte {
  width: 100%;
  min-height: 84px;
  padding: var(--esp-3);
  border: 1px solid var(--border);
  border-radius: var(--rayon-2);
  background: var(--paper);
  color: var(--ink);
  font-family: inherit;
  font-size: var(--fs-300);
  line-height: 1.5;   /* hors échelle : entre --lh-ui et --lh-lecture, écart > 0,05 des deux */
  resize: vertical;
}
.v-texte:focus-visible { outline: 2px dashed var(--torii-dark); outline-offset: 2px; }

.v-select {
  min-height: 44px;
  padding: var(--esp-2) var(--esp-3);
  border: 1px solid var(--border);
  border-radius: var(--rayon-2);
  background: var(--paper);
  color: var(--ink);
  font-family: inherit;
  font-size: var(--fs-300);
}
.v-select:focus-visible { outline: 2px dashed var(--torii-dark); outline-offset: 2px; }

/* ==========================================================================
   /faire — ce que digest_etapes.css ne dit pas.

   Ce fichier est chargé APRÈS le sien : on n'y ajoute QUE les règles manquantes, sans
   jamais retirer ni redéfinir les siennes (il sert aussi /resultats).
   ========================================================================== */

/* OUI ≠ NON. `[data-valeur="oui"]` n'avait aucune règle : il retombait sur le vermillon
   générique de `.cat-vote--actif`, à trois points de RVB du refus. Mesuré avant
   correction : accord = fond 233,201,190 / texte 151,40,26 ; refus = fond 236,208,199 /
   texte 151,40,26. Deux gestes opposés, le même bouton rose — on ne pouvait pas relire son
   propre choix sans lire le libellé.
   L'accord prend donc la famille --matcha, qui veut dire « oui » partout ailleurs sur le
   site. Les trois autres états restent ceux de digest_etapes.css : ★ indispensable en or
   (attente/repère), « je laisse » en neutre, « je ne veux pas » en vermillon. */
.faire-choix[data-valeur="oui"].cat-vote--actif {
  background: var(--matcha-soft);
  border-color: var(--matcha);
  color: var(--matcha-text);
}

/* L'ACTION DE MASSE, QUAND ELLE NE S'APPLIQUE À RIEN, DOIT DISPARAÎTRE.
   `faire.js` pose `hidden` sur le bloc et son commentaire annonçait cette règle-ci —
   elle n'existait pas. Or `.faire-groupe { display: flex }` (digest_etapes.css) l'emporte
   sur le `display: none` que le navigateur attache à [hidden] : le bloc restait à l'écran,
   réduit à une pastille vide, en tête de page, à la place du premier geste utile. */
.faire-groupe[hidden] { display: none; }

/* ==========================================================================
   LE CARNET — en-tête, avancement, sommaire.

   UNE SEULE GÉNÉRATION. Il y en avait deux, écrites à des moments différents et laissées
   côte à côte : une table des matières verticale à filets pointillés (« lue verticalement
   sur la page de garde et le pied de feuillet », un contexte qui n'existe plus) et, 150
   lignes plus bas, le sommaire en pastilles du carnet actuel. À spécificité égale, la
   seconde gagnait — SAUF sur les propriétés qu'elle ne redéclarait pas. `flex-direction:
   column` de la première survivait ainsi en silence : les pastilles s'étiraient en dix-sept
   lignes pleine largeur, 656 px de sommaire poussaient les feuillets hors de l'écran, et
   personne n'arrivait plus sur quelque chose à faire.
   La génération morte est supprimée ; ce qu'elle faisait d'utile (numéro à chasse fixe,
   état en capitales, focus visible) est repris ici.
   ========================================================================== */

.carnet-tete { margin-bottom: var(--esp-4); }

/* La barre d'avancement : « 6 scellés · 3 en vote · 8 à venir ». La proportion est posée
   en style inline par le gabarit — pas de JS pour afficher une valeur connue au rendu. */
.carnet-avance {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  margin: var(--esp-3) 0 var(--esp-1);
  flex-wrap: wrap;
}
.carnet-avance__barre {
  flex: 1 1 180px; min-width: 140px; max-width: 320px;
  height: 6px; border-radius: var(--rayon-1);
  background: var(--panel-raised);
  box-shadow: inset 0 0 0 1px var(--border);
  overflow: hidden;
}
.carnet-avance__barre > span { display: block; height: 100%; background: var(--torii); }
/* Chasse fixe : les trois compteurs changent de valeur d'un feuillet scellé à l'autre,
   et la ligne ne doit pas se réaligner sous eux. Pas de `margin-top` : le texte est
   maintenant un item d'une rangée centrée, l'ancienne marge le décalait vers le bas. */
.carnet-avance__texte {
  font-size: var(--fs-200);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* L'ENCADRÉ « À VOUS » : le bloc le plus utile de la page, il nomme LE feuillet où cette
   personne est attendue. Il doit accrocher sans crier — un bord et un fond d'or, pas de
   rouge plein, pas d'animation permanente.
   Ses trois parties étaient posées par le gabarit sans qu'aucune règle ne les distingue :
   l'étiquette, le titre et l'échéance sortaient à la même taille, tous les trois soulignés
   par le lien qui les contient. On leur rend leur hiérarchie. */
.carnet-avous {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--esp-1) var(--esp-3);
  background: var(--gold-soft);
  border: 1px solid var(--gold);
  border-left: 3px solid var(--gold);
  border-radius: var(--rayon-3);
  padding: var(--esp-3) var(--esp-4);
  margin: var(--esp-1) 0 var(--esp-5);
  color: var(--gold-text);
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.carnet-avous:hover { border-color: var(--gold-text); }
.carnet-avous:focus-visible { outline: 2px dashed var(--torii-dark); outline-offset: 2px; }

.carnet-avous__label {
  flex: none;
  font-size: var(--fs-100);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
/* Le titre porte le feuillet : c'est lui qu'on lit, donc c'est lui qui a la voix du
   carnet et la seule taille de titre du bloc. */
.carnet-avous__titre {
  font-family: "Shippori Mincho", Georgia, serif;
  font-size: var(--fs-500);
  font-weight: 700;
  line-height: var(--lh-serre);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
/* L'échéance file à droite quand la place le permet, et repasse sous le titre sinon :
   c'est une information de calendrier, pas une partie du nom du feuillet. */
.carnet-avous__echeance {
  margin-left: auto;
  font-size: var(--fs-200);
  font-variant-numeric: tabular-nums;
}

/* Le sommaire : des pastilles cliquables qui amènent au feuillet, et qui disent son état
   dans les mêmes mots que la carte qu'elles référencent — pas une seconde convention de
   couleur à apprendre. L'état est TOUJOURS écrit ; la couleur ne fait que le redoubler. */
.carnet-index { display: flex; flex-wrap: wrap; gap: var(--esp-2); margin: var(--esp-4) 0; }
.carnet-index__ligne {
  display: inline-flex; align-items: baseline; gap: var(--esp-2);
  padding: var(--esp-1) var(--esp-3) var(--esp-2);
  border: 1px solid var(--border);
  border-radius: var(--rayon-pilule);
  text-decoration: none;
  font-size: var(--fs-200);
  color: var(--ink);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.carnet-index__ligne:hover { border-color: var(--torii); background: var(--panel); }
.carnet-index__ligne:focus-visible { outline: 2px dashed var(--torii-dark); outline-offset: 2px; }

/* Chasse fixe pour le numéro japonais : 序, 一, 十五 n'ont pas la même largeur, et sans
   gouttière constante les dix-sept pastilles perdent leur alignement de départ. */
.carnet-index__num {
  flex: none;
  width: 22px;
  text-align: center;
  font-family: "Shippori Mincho", Georgia, serif;
}
.carnet-index__etat {
  flex: none;
  font-size: var(--fs-100);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* Les trois états, dans le vocabulaire visuel du site : en vote et scellé prennent le
   vermillon (l'un en pointillés, l'autre plein, c'est la bordure qui les sépare),
   verrouillé s'efface par la COULEUR et jamais par l'opacité — un `opacity: 0.6` posé ici
   faisait retomber --muted, qui tient pourtant 5,29:1, à 2,45:1 : le pire contraste du
   site, et invisible à l'audit tant qu'on ne mesure que la couleur déclarée. */
.carnet-index__ligne--scelle { border-color: color-mix(in srgb, var(--torii) 45%, transparent); }
.carnet-index__ligne--scelle .carnet-index__num,
.carnet-index__ligne--scelle .carnet-index__etat { color: var(--torii-dark); }

.carnet-index__ligne--ouvert,
.carnet-index__ligne--rouvert { border-color: var(--torii); border-style: dashed; }
.carnet-index__ligne--ouvert .carnet-index__num,
.carnet-index__ligne--ouvert .carnet-index__etat,
.carnet-index__ligne--rouvert .carnet-index__num,
.carnet-index__ligne--rouvert .carnet-index__etat { color: var(--torii-dark); }

/* Verrouillé : la même bordure diluée que la carte `.feuillet--blanc` qu'il référence,
   et RIEN de vermillon — la couleur de marque est réservée à ce qui est vivant. */
.carnet-index__ligne--blanc {
  color: var(--muted);
  border-style: dashed;
  border-color: color-mix(in srgb, var(--border) 55%, transparent);
}
.carnet-index__ligne--blanc .carnet-index__num,
.carnet-index__ligne--blanc .carnet-index__titre,
.carnet-index__ligne--blanc .carnet-index__etat { color: var(--muted); font-weight: 400; }

/* ==========================================================================
   La piste horizontale du carnet.
   Écrite ici et non par le designer des feuillets : c'est le CONTENEUR, pas la
   page. Motif repris tel quel de `.frise-wrap` (style.css) et `.tobi-path-wrap`
   (tobiishi.css), déjà éprouvés sur ce site — on ne réinvente pas une mécanique
   de défilement qui fonctionne.
   ========================================================================== */

.carnet-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 4px;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--esp-3);
  /* Le défilement latéral est voulu ICI, et nulle part ailleurs : la page ne doit
     jamais déborder (règle des phases 69-73). */
  max-width: 100%;
}
.carnet-scroll:focus-visible { outline: 2px dashed var(--torii); outline-offset: 3px; }

.carnet-feuillets {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-4);
  /* max-content : la piste fait la largeur de ses feuillets, condition pour que le
     défilement horizontal existe au lieu de faire retourner les cartes à la ligne. */
  min-width: max-content;
  padding: var(--esp-1);
}

/* ==========================================================================
   Phase 86 — la mise en COLONNE, séparée du vocabulaire d'état.

   Ces propriétés faisaient partie de la règle `.feuillet`, désormais partagée avec
   /dashboard et les pages verrouillées. Les y laisser aurait affiché un feuillet blanc
   du tableau de bord en colonne de 620 px avec accrochage de défilement — un objet de
   carnet posé au milieu d'une page qui n'en est pas un. Hors du carnet, un feuillet est
   un bloc normal, pleine largeur.
   ========================================================================== */

.carnet-feuillets > .feuillet {
  flex: 0 0 auto;
  width: min(88vw, 620px);
  max-width: min(88vw, 620px);
  scroll-snap-align: start;
  max-height: min(76vh, 760px);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
}

/* LA SUITE D'UNE DÉCISION SCELLÉE (classe partagée `.suite`, style.css).
   Un vote réel ne se réécrit pas : quand un fait postérieur le dépasse, on l'affiche
   comme dépassé. Dans la colonne étroite d'un feuillet, la ligne se détache du filet de
   provenance qui la suit. */
.feuillet .suite { margin-top: var(--esp-4); }

/* --- Phase 121 : les pages vivantes, sous le carnet ---------------------------
   La trace et l'album sont revenus de l'Atelier. Ils ne défilent pas avec les
   feuillets — un feuillet se vote puis se scelle, ces pages-là se remplissent
   sur place et ne se scellent jamais — donc une section à part, en dessous.

   Deux colonnes au-dessus de 560 px : ce sont deux entrées courtes, les empiler
   sur grand écran laisserait une colonne de blanc à droite. */
.carnet-vivant__titre { margin-top: var(--esp-6); }
.carnet-vivant {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--esp-3);
  margin-top: var(--esp-3);
}
.carnet-vivant > li {
  margin: 0;
  padding: var(--esp-4);
  border: 1px solid var(--border);
  border-radius: var(--rayon-2);
  background: var(--panel);
  transition: border-color 0.15s ease;
}
.carnet-vivant > li:hover { border-color: var(--torii); }
.carnet-vivant > li > a {
  display: flex;
  align-items: baseline;
  gap: var(--esp-2);
  font-size: var(--fs-400);
}
/* Le glose japonais suit le titre sans le concurrencer, comme dans la barre du haut. */
.carnet-vivant .nav-jp { font-size: var(--fs-200); color: var(--muted); }
.carnet-vivant .frise-detail { margin-top: var(--esp-2); }

/* ==========================================================================
   Responsive -- 390px d'abord. On resserre surtout les fentes.
   ========================================================================== */

@media (max-width: 640px) {
  .feuillet { padding: var(--esp-5) var(--esp-4); max-height: min(80vh, 700px); }
  .feuillet--scelle { padding-block: var(--esp-5); }
  .feuillet__decision { padding: var(--esp-4); font-size: var(--fs-400); }
  .sceau-scelle { width: 62px; height: 62px; font-size: var(--fs-100); top: var(--esp-3); right: var(--esp-4); }
  .feuillet__titre { padding-right: 60px; } /* réserve pour le sceau en coin, comme sur la page de garde */
  .v-row { flex-wrap: wrap; }
  .carnet-feuillets { gap: var(--esp-3); }
  /* SUR TÉLÉPHONE, LE SOMMAIRE SE RESSERRE — il est le seul obstacle entre l'arrivée sur
     la page et le premier feuillet. Dix-sept pastilles à deux par ligne font un demi-écran
     de sommaire ; à trois, elles en font un tiers. Rien n'est retiré : le titre se coupe,
     mais le numéro japonais et le MOT d'état restent entiers — ce sont eux qui portent le
     repère et la décision, et l'état ne doit jamais tenir à la seule couleur. */
  .carnet-index { gap: var(--esp-1); }
  .carnet-index__ligne { gap: var(--esp-1); padding-inline: var(--esp-2); }
  .carnet-index__num { width: auto; }
  .carnet-index__titre { max-width: 30vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* L'échéance repasse sous le titre : `margin-left: auto` n'a plus de sens quand la
     ligne s'enroule, il collerait l'échéance au bord droit sur sa propre ligne. */
  .carnet-avous__echeance { margin-left: 0; flex-basis: 100%; }
}

/* ==========================================================================
   Mouvement réduit
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .feuillet__echeance::before { animation: none !important; }
  .feuillet--scelle.vient-d-etre-scelle .sceau-scelle {
    animation: none !important;
    transform: rotate(-6deg);
    opacity: 1;
  }
  .v-opt:active { transform: none; }
}