/* ═══════════════════════════════════════════════════════════════
   FLORIN — composants gravés
   ═══════════════════════════════════════════════════════════════ */

/* ── Hachures ──────────────────────────────────────────────────
   En taille-douce on ne remplit pas : on hachure. Ces trames
   servent de « couleur » partout où un aplat serait attendu.       */

.hatch {
  background-image: repeating-linear-gradient(
    45deg,
    var(--line-faint) 0 var(--hair),
    transparent var(--hair) 4px
  );
}
.hatch--cross {
  background-image:
    repeating-linear-gradient(45deg, var(--line-faint) 0 var(--hair), transparent var(--hair) 5px),
    repeating-linear-gradient(-45deg, var(--line-faint) 0 var(--hair), transparent var(--hair) 5px);
}
.hatch--accent {
  background-image: repeating-linear-gradient(
    45deg,
    var(--accent-wash) 0 var(--hair),
    transparent var(--hair) 4px
  );
}

/* ── Boutons ───────────────────────────────────────────────────
   Un bouton est un cartouche gravé : double filet, lettrage espacé,
   et une hachure qui monte pour le remplir au survol.               */

.btn {
  --btn-fg: var(--fg);
  --btn-line: var(--line);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  padding: 0.78em 1.5em;
  border: var(--hair) solid var(--btn-line);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--btn-fg);
  font-size: var(--t-2xs);
  font-weight: 600;
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition:
    color var(--d-base) var(--ease-out),
    box-shadow var(--d-base) var(--ease-out),
    border-color var(--d-base) var(--ease-out),
    transform var(--d-fast) var(--ease-out);
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--btn-fill, var(--ink));
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform var(--d-base) var(--ease-out);
}
.btn:hover, .btn:focus-visible { color: var(--btn-hover-fg, var(--surface)); }
.btn:hover::before, .btn:focus-visible::before { transform: scaleY(1); }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.42; pointer-events: none; }

.btn--accent {
  --btn-line: var(--accent);
  --btn-fg: var(--accent-deep);
  --btn-fill: var(--accent);
  --btn-hover-fg: var(--surface);
}
.btn--ink {
  --btn-line: var(--ink);
  --btn-fill: var(--ink);
}
.on-plate .btn--ink { --btn-line: var(--fg); --btn-fill: var(--fg); --btn-hover-fg: var(--ink-deep); }

/* Bouton plein : la plaque est déjà encrée. */
.btn--solid {
  --btn-fg: #ffffff;
  --btn-line: var(--accent);
  --btn-fill: var(--accent-deep);
  --btn-hover-fg: #ffffff;
  background: var(--accent);
}
.btn--solid:hover { background: var(--accent-deep); border-color: var(--accent-deep); }

.btn--quiet {
  border-color: transparent;
  box-shadow: none;
  padding-inline: 0.4em;
  color: var(--fg-muted);
  letter-spacing: 0.06em;
  text-transform: none;
  font-size: var(--t-sm);
  font-weight: 500;
}
.btn--quiet::before { display: none; }
.btn--quiet:hover { color: var(--accent); }

.btn--lg { padding: 1em 2em; font-size: var(--t-xs); }
.btn--sm { padding: 0.55em 1em; font-size: var(--t-3xs); }
.btn--block { inline-size: 100%; }

.btn__arrow {
  display: inline-block;
  transition: transform var(--d-base) var(--ease-press);
}
.btn:hover .btn__arrow { transform: translateX(4px); }
[dir="rtl"] .btn__arrow { transform: scaleX(-1); }
[dir="rtl"] .btn:hover .btn__arrow { transform: scaleX(-1) translateX(4px); }

/* ── Plaque : le cartouche encadré ─────────────────────────────
   Le conteneur de base. Double filet, et quatre ornements d'angle
   dessinés en pseudo-éléments (deux suffisent, chacun portant deux
   angles via un dégradé conique).                                  */

.plate {
  position: relative;
  background: var(--surface-raised);
  border: var(--hair) solid transparent;
  border-radius: var(--r-md);
  box-shadow: var(--sh-md);
  padding: var(--s6);
}
.plate--flush { padding: 0; }
.plate--sunk { background: var(--surface-sunk); }
.plate--quiet { background: transparent; box-shadow: none; border-color: var(--line-soft); }
.plate--accent { border-color: var(--line-accent); box-shadow: var(--sh-lg); }

/* Ornements d'angle — des équerres gravées. */
.plate--ornate::before,
.plate--ornate::after {
  content: "";
  position: absolute;
  inline-size: 14px;
  block-size: 14px;
  border: var(--hair) solid var(--accent);
  pointer-events: none;
}
.plate--ornate::before {
  inset-block-start: 5px;
  inset-inline-start: 5px;
  border-inline-end: 0;
  border-block-end: 0;
}
.plate--ornate::after {
  inset-block-end: 5px;
  inset-inline-end: 5px;
  border-inline-start: 0;
  border-block-start: 0;
}

.plate__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s4) var(--s6);
  border-block-end: var(--hair) solid var(--line);
}
.plate__body { padding: var(--s6); }
.plate__foot {
  padding: var(--s3) var(--s6);
  border-block-start: var(--hair) solid var(--line);
  background: var(--surface-sunk);
  font-size: var(--t-sm);
  color: var(--fg-muted);
}

/* ── Microtexte ────────────────────────────────────────────────
   Le liseré de sécurité : un texte minuscule répété, illisible à
   l'œil nu, qui sert de séparateur. Purement décoratif, donc retiré
   de l'arbre d'accessibilité par aria-hidden dans le HTML.          */


/* ── Bande de sécurité (le bandeau de cotations) ──────────────── */

.band {
  position: relative;
  z-index: var(--z-band);
  block-size: var(--band-h);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--ink-deep);
  color: rgba(239, 233, 218, 0.7);
  font-family: var(--font-serial);
  font-size: var(--t-3xs);
  letter-spacing: 0.1em;
  user-select: none;
  /* Un ruban noir au-dessus d'un site blanc campe la page mieux qu'un
     filet gris — et c'est le seul choix tenable : les variations de
     cours sont écrites en dur plus bas (#5fb894, #e0705f), des teintes
     choisies pour du texte clair sur fond sombre. Éclaircir le fond
     les rendrait illisibles sans qu'on puisse les corriger par un
     jeton. */
  border-block-end: 1px solid var(--accent);
}
.band__track {
  display: flex;
  flex: none;
  gap: var(--s6);
  padding-inline-end: var(--s6);
  animation: band-run 72s linear infinite;
  will-change: transform;
}
.band:hover .band__track { animation-play-state: paused; }
[dir="rtl"] .band__track { animation-name: band-run-rtl; }
@keyframes band-run { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes band-run-rtl { from { transform: translateX(0); } to { transform: translateX(50%); } }

.band__item { display: inline-flex; align-items: center; gap: var(--s2); white-space: nowrap; }
.band__sym { color: var(--accent-light); }
.band__up { color: #5fb894; }
.band__dn { color: #e0705f; }
.band__seal {
  color: var(--ink-deep);
  background: var(--accent-light);
  padding: 0.2em 0.55em;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

/* Dans les sections sombres, `--accent` s'éclaircit pour rester lisible
   sur le noir — mais un bouton plein de cette teinte ne peut plus porter
   de texte blanc : 3,0:1. On y prend le noir de la section. */
.on-plate .btn--solid { --btn-fg: #0d1117; --btn-hover-fg: #0d1117; }

/* ── Angles ──────────────────────────────────────────────────────
   La direction précédente ne s'arrondissait pas : elle dessinait des
   filets gravés, et ses jetons de rayon ne servaient qu'à deux ou
   trois endroits. « Comptoir » arrondit franchement, ce qui demande
   de poser le rayon composant par composant. */
.notice,
.acc__item,
.ledger-scroll,
.case,
.empty,
.pick,
.search,
.facial,
.input,
.toast,
.side__link { border-radius: var(--r-md); }
.stamp,
.flow__s { border-radius: var(--r-pill); }

/* ── Timbres & états ─────────────────────────────────────────── */

.stamp {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: 0.32em 0.7em;
  border: var(--hair) solid var(--line);
  font-family: var(--font-text);
  font-size: var(--t-3xs);
  font-weight: 600;
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--fg-muted);
  white-space: nowrap;
  background: transparent;
}
.stamp--ok     { color: var(--ok);     border-color: color-mix(in srgb, var(--ok) 45%, transparent);     background: var(--ok-wash); }
.stamp--warn   { color: var(--warn);   border-color: color-mix(in srgb, var(--warn) 45%, transparent);   background: var(--warn-wash); }
.stamp--danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); background: var(--danger-wash); }
.stamp--info   { color: var(--info);   border-color: color-mix(in srgb, var(--info) 45%, transparent);   background: var(--info-wash); }
.stamp--accent { color: var(--accent); border-color: var(--line-accent); background: var(--accent-wash); }
button.stamp { cursor: pointer; transition: color var(--d-fast) var(--ease-out), border-color var(--d-fast) var(--ease-out); }
button.stamp:hover { color: var(--accent); border-color: var(--line-accent); }

.dot { inline-size: 5px; block-size: 5px; border-radius: 50%; background: currentColor; flex: none; }
.dot--live { position: relative; }
.dot--live::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: var(--hair) solid currentColor;
  animation: dot-ring 2.6s var(--ease-out) infinite;
}
@keyframes dot-ring {
  0%   { transform: scale(0.5); opacity: 0.9; }
  75%, 100% { transform: scale(2.4); opacity: 0; }
}

/* ── Sceau circulaire ──────────────────────────────────────────
   Le tampon sec : un anneau gravé, un texte qui en fait le tour,
   un monogramme au centre. Le texte tourne lentement.              */

.seal {
  position: relative;
  inline-size: var(--seal-size, 7rem);
  block-size: var(--seal-size, 7rem);
  flex: none;
  display: grid;
  place-items: center;
  color: var(--accent);
}
.seal__ring { position: absolute; inset: 0; animation: seal-turn 44s linear infinite; }
[dir="rtl"] .seal__ring { animation-direction: reverse; }
@keyframes seal-turn { to { transform: rotate(360deg); } }
.seal__ring text {
  font-family: var(--font-text);
  font-size: 7.4px;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  fill: currentColor;
}
.seal__core {
  position: relative;
  display: grid;
  place-items: center;
  gap: 2px;
  text-align: center;
}
.seal__core svg { inline-size: 1.6rem; block-size: 1.6rem; }
.seal__core span {
  font-family: var(--font-serial);
  font-size: 6.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

/* Filigrane : visible seulement quand on « incline le papier ». */
.watermark {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--d-slow) var(--ease-out);
}
.watermark__host:hover .watermark { opacity: 0.14; }

/* ── Registre (tableaux) ───────────────────────────────────────
   Un tableau est un registre comptable : réglure fine, colonnes de
   chiffres alignées, en-têtes en lettrage espacé.                   */

.ledger-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.ledger {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
}
.ledger th {
  text-align: start;
  padding: var(--s3) var(--s4);
  font-size: var(--t-3xs);
  font-weight: 600;
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--fg-faint);
  border-block-end: 1px solid var(--line);
  white-space: nowrap;
  background: var(--surface-sunk);
}
.ledger td {
  padding: var(--s4);
  border-block-end: var(--hair) solid var(--line-faint);
  color: var(--fg-muted);
  vertical-align: top;
}
.ledger td:first-child { color: var(--fg); font-weight: 500; }
.ledger tbody tr { transition: background-color var(--d-fast) linear; }
.ledger tbody tr:nth-child(even) { background: color-mix(in srgb, var(--surface-sunk) 45%, transparent); }
.ledger tbody tr:hover { background: var(--accent-wash); }
.ledger .n { text-align: end; font-family: var(--font-serial); }

/* ── Formulaires ───────────────────────────────────────────────
   Un champ est une ligne à remplir sur un formulaire officiel :
   pas de boîte, une réglure sous le texte, un fond très légèrement
   creusé.                                                           */

.field { display: block; }
.field__label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  margin-block-end: var(--s2);
  font-size: var(--t-3xs);
  font-weight: 600;
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--fg-muted);
}
.field__hint { font-size: var(--t-xs); color: var(--fg-faint); margin-block-start: var(--s2); line-height: 1.55; }
.field__error { display: none; margin-block-start: var(--s2); font-size: var(--t-xs); color: var(--danger); }
.field[data-invalid] .field__error { display: block; }
.field[data-invalid] .input { border-block-end-color: var(--danger); background: var(--danger-wash); }

.input {
  inline-size: 100%;
  padding: 0.7em 0.75em;
  background: var(--surface-sunk);
  border: 0;
  border-block-end: 1.5px solid var(--line);
  border-radius: var(--r-xs) var(--r-xs) 0 0;
  font-size: var(--t-base);
  color: var(--fg);
  transition: border-color var(--d-fast) var(--ease-out), background-color var(--d-fast) var(--ease-out);
}
.input::placeholder { color: var(--fg-faint); }
.input:hover { border-block-end-color: var(--fg-faint); }
.input:focus { outline: none; border-block-end-color: var(--accent); background: var(--surface-raised); }
.input:focus-visible { box-shadow: var(--focus); }
textarea.input { min-block-size: 8rem; resize: vertical; line-height: var(--lh-body); }
select.input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%234a6b5e' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.8em center;
  padding-inline-end: 2.1em;
}
[dir="rtl"] select.input { background-position: left 0.8em center; padding-inline-end: 0.75em; padding-inline-start: 2.1em; }

/* Champ de valeur faciale — le montant se saisit en gros Didone. */
.facial {
  display: flex;
  align-items: stretch;
  border: var(--hair) solid var(--line);
  box-shadow: var(--sh-sm);
  background: var(--surface-raised);
  transition: border-color var(--d-fast) var(--ease-out);
}
.facial:focus-within { border-color: var(--accent); box-shadow: var(--focus); }
.facial__sym {
  display: grid;
  place-items: center;
  padding-inline: 0.85em;
  font-family: var(--font-title);
  font-size: var(--t-xl);
  color: var(--accent);
  border-inline-end: var(--hair) solid var(--line-soft);
}
.facial__in {
  flex: 1;
  min-inline-size: 0;
  padding: 0.5em 0.75em;
  border: 0;
  background: none;
  font-family: var(--font-title);
  font-size: var(--t-2xl);
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.facial__in:focus { outline: none; }
.facial__in::-webkit-outer-spin-button,
.facial__in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.facial__in[type="number"] { -moz-appearance: textfield; }

/* Sélecteur segmenté — des onglets de registre. */
.segmented { display: inline-flex; border: var(--hair) solid var(--line); }
.segmented__opt { position: relative; }
.segmented__opt + .segmented__opt { border-inline-start: var(--hair) solid var(--line); }
.segmented__opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.segmented__opt span {
  display: block;
  padding: 0.45em 0.9em;
  font-size: var(--t-3xs);
  font-weight: 600;
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--fg-muted);
  cursor: pointer;
  transition: background-color var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out);
}
.segmented__opt input:checked + span { background: var(--ink); color: var(--surface); }
.segmented__opt input:focus-visible + span { box-shadow: var(--focus); }

/* Cartes de choix — des coupons à cocher. */
.pick { position: relative; display: block; cursor: pointer; }
.pick input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.pick__box {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s4);
  border: var(--hair) solid var(--line);
  background: var(--surface-raised);
  transition: border-color var(--d-fast) var(--ease-out), box-shadow var(--d-fast) var(--ease-out);
}
.pick:hover .pick__box { border-color: var(--fg-faint); }
.pick input:checked + .pick__box {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-wash);
}
.pick input:focus-visible + .pick__box { box-shadow: var(--focus); }
.pick__t { font-weight: 600; font-size: var(--t-base); display: block; }
.pick__s { font-family: var(--font-serial); font-size: var(--t-3xs); color: var(--fg-faint); display: block; }

.check {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  cursor: pointer;
  font-size: var(--t-sm);
  color: var(--fg-muted);
  line-height: 1.5;
}
.check input {
  appearance: none;
  flex: none;
  inline-size: 1rem; block-size: 1rem;
  margin-block-start: 0.15rem;
  border: var(--hair) solid var(--line);
  background: var(--surface-sunk);
  display: grid;
  place-content: center;
  cursor: pointer;
  transition: background-color var(--d-fast) var(--ease-out), border-color var(--d-fast) var(--ease-out);
}
.check input::after {
  content: "";
  inline-size: 0.5rem; block-size: 0.28rem;
  border-inline-start: 1.5px solid var(--surface);
  border-block-end: 1.5px solid var(--surface);
  transform: rotate(-45deg) scale(0);
  transition: transform var(--d-fast) var(--ease-press);
}
.check input:checked { background: var(--accent); border-color: var(--accent); }
.check input:checked::after { transform: rotate(-45deg) scale(1); }

/* ── Accordéon ─────────────────────────────────────────────────
   Les rubriques d'un registre : filet en haut, croix gravée qui
   pivote, panneau qui se déplie sans saut de mise en page.          */

.acc { border-block-start: var(--hair) solid var(--line); }
.acc__item { border-block-end: var(--hair) solid var(--line); }
/* Enveloppe de titre autour du bouton d'accordéon. Elle existe
   pour la hiérarchie et pour la navigation par titres, pas pour
   l'apparence : elle ne doit donc rien peser. */
.acc__h { margin: 0; font: inherit; }

.acc__btn {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s5);
  inline-size: 100%;
  padding: var(--s5) 0;
  text-align: start;
  font-family: var(--font-title);
  font-size: var(--t-lg);
  font-weight: 600;
  color: var(--fg);
  transition: color var(--d-fast) var(--ease-out);
}
.acc__btn:hover { color: var(--accent); }
.acc__sign {
  position: relative;
  flex: none;
  inline-size: 0.9rem; block-size: 0.9rem;
  margin-block-start: 0.42rem;
  transition: transform var(--d-base) var(--ease-out);
}
.acc__sign::before, .acc__sign::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: 50%;
  block-size: 1px;
  background: currentColor;
}
.acc__sign::after { transform: rotate(90deg); }
.acc__btn[aria-expanded="true"] .acc__sign { transform: rotate(45deg); }
/* Ouverture de l'accordéon.

   Le motif est celui d'origine — une grille dont l'unique piste passe
   de `0fr` à `1fr`, ce qui anime jusqu'à la hauteur exacte du contenu
   sans plafond arbitraire.

   Seul le SÉLECTEUR a changé. Il visait le panneau comme frère du
   bouton ; envelopper le bouton dans un <h3>, pour que les 47
   questions soient des titres et non des boutons nus, a rompu ce
   voisinage. La variante `:has()` écrite pour le rétablir s'apparie en
   JavaScript mais ne s'est pas appliquée de façon fiable.

   L'état est donc porté par un attribut que le script pose sur
   l'élément (`setAccOpen` dans ui.js). Un sélecteur descendant ne
   dépend d'aucune relation de voisinage : il survivra au prochain
   changement de balisage, ce que les deux formes précédentes n'ont
   pas fait.                                                          */
.acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--d-base) var(--ease-out); }
.acc__item[data-open] .acc__panel { grid-template-rows: 1fr; }
.acc__inner { overflow: hidden; min-block-size: 0; }
.acc__inner > div {
  padding-block-end: var(--s5);
  max-inline-size: var(--measure);
  color: var(--fg-muted);
  font-size: var(--t-base);
}
.acc__inner > div > * + * { margin-block-start: var(--s3); }
.acc__inner ul { padding-inline-start: var(--s5); }
.acc__inner li::marker { color: var(--accent); }

/* ── Encarts ───────────────────────────────────────────────────
   Un avis officiel : filet épais en tête de colonne, hachure au
   fond, pas de coin arrondi.                                       */

.notice {
  display: flex;
  gap: var(--s3);
  padding: var(--s4) var(--s5);
  border-inline-start: 2.5px solid var(--accent);
  background: var(--accent-wash);
  font-size: var(--t-sm);
  color: var(--fg-muted);
  line-height: 1.62;
}
.notice--info   { border-color: var(--info);   background: var(--info-wash); }
.notice--ok     { border-color: var(--ok);     background: var(--ok-wash); }
.notice--warn   { border-color: var(--warn);   background: var(--warn-wash); }
.notice--danger { border-color: var(--danger); background: var(--danger-wash); }
.notice strong { color: var(--fg); }

/* ── État vide ─────────────────────────────────────────────── */
.empty {
  display: grid;
  place-items: center;
  gap: var(--s3);
  padding: var(--s9) var(--s5);
  text-align: center;
  color: var(--fg-faint);
}
.empty__t { font-family: var(--font-title); font-size: var(--t-lg); color: var(--fg-muted); }

/* ── Avis flottants ────────────────────────────────────────── */
.toasts {
  position: fixed;
  inset-inline-end: var(--s4);
  inset-block-end: var(--s4);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-inline-size: 15rem;
  max-inline-size: 24rem;
  padding: var(--s3) var(--s4);
  background: var(--ink-deep);
  color: #efe9da;
  box-shadow: var(--sh-lg);
  font-size: var(--t-sm);
  pointer-events: auto;
  animation: toast-in var(--d-base) var(--ease-press) both;
}
.toast[data-leaving] { animation: toast-out var(--d-base) var(--ease-out) both; }
.toast--ok .dot { color: #5fb894; }
.toast--err .dot { color: #e0705f; }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(6px); } }

/* ── Jauge ─────────────────────────────────────────────────── */
.gauge {
  block-size: 6px;
  background: var(--surface-sunk);
  border: var(--hair) solid var(--line-soft);
  overflow: hidden;
}
.gauge__fill {
  block-size: 100%;
  background-image: repeating-linear-gradient(
    -45deg, var(--accent) 0 2px, var(--accent-deep) 2px 4px
  );
  transition: inline-size var(--d-slow) var(--ease-out);
}
.gauge--ok .gauge__fill { background-image: repeating-linear-gradient(-45deg, var(--ok) 0 2px, color-mix(in srgb, var(--ok) 70%, black) 2px 4px); }
.gauge--warn .gauge__fill { background-image: repeating-linear-gradient(-45deg, var(--warn) 0 2px, var(--accent-deep) 2px 4px); }

/* ── Copie ─────────────────────────────────────────────────── */
.copy {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-family: var(--font-serial);
  font-size: var(--t-xs);
  color: var(--fg-muted);
  cursor: pointer;
  transition: color var(--d-fast) var(--ease-out);
}
.copy:hover { color: var(--accent); }

/* ── Séparateur ornementé ──────────────────────────────────── */
.fleuron {
  display: flex;
  align-items: center;
  gap: var(--s4);
  color: var(--accent);
}
.fleuron::before, .fleuron::after {
  content: "";
  flex: 1;
  block-size: var(--hair);
  background: var(--line);
}
.fleuron span { font-size: 0.7rem; letter-spacing: 0.3em; }

/* ── Attente ───────────────────────────────────────────────── */
.spinner {
  inline-size: 1em; block-size: 1em;
  border: 1.5px solid currentColor;
  border-inline-end-color: transparent;
  border-radius: 50%;
  display: inline-block;
  animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.skeleton {
  background-image: repeating-linear-gradient(45deg, var(--line-faint) 0 var(--hair), transparent var(--hair) 4px);
  background-color: var(--surface-sunk);
  color: transparent;
  animation: skeleton-pulse 1.6s var(--ease-in-out) infinite;
}
@keyframes skeleton-pulse { 50% { opacity: 0.55; } }

/* ── Trames guillochées ────────────────────────────────────────
   Il n'en reste qu'une : la texture de la carte.

   La direction « gravure de sécurité » en semait partout — rosettes
   derrière le héros, derrière le bloc tarifaire, derrière les écrans
   d'authentification, liseré d'ondes en séparateur de section. Sur du
   blanc, ces motifs n'ont plus de sens : à l'opacité qui les rendrait
   discrets, ils ne font que salir ; à une opacité visible, ils
   ramènent le certificat qu'on vient de quitter.

   Ils sont donc retirés, et leurs deux fichiers avec — la rosette et
   le liseré d'ondes pesaient 60 Ko à eux deux, téléchargés sur chaque
   visite. Ce qui les remplaçait visuellement (un halo derrière la
   carte) tient en un dégradé radial, sans requête.

   Le fichier restant sert de MASQUE et non d'image : la couleur vient
   de `background-color`, ce qui permet à une seule trame de servir sur
   les deux faces de carte.                                            */

.card-object__guilloche {
  background-color: currentColor;
  -webkit-mask-image: url("/assets/img/card-guilloche.svg?v=3785ace371");
  mask-image: url("/assets/img/card-guilloche.svg?v=3785ace371");
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  opacity: 0.12;
}

/* Le halo qui remplace les rosettes : un dégradé, pas un motif. */
.hero__rosette,
.tariff__rosette,
.auth__rosette,
.note-card__rosette {
  background: radial-gradient(circle at 50% 50%, var(--accent-wash), transparent 62%);
  pointer-events: none;
}

/* Le séparateur de section n'est plus un liseré d'ondes gravé mais un
   filet. La classe reste : elle est posée sur sept pages, et la
   renommer n'aurait rien changé à l'écran. */
.wave-rule {
  block-size: 1px;
  background-color: var(--line-soft);
}