/* ═══════════════════════════════════════════════════════════════
   FLORIN — remise à zéro, typographie gravée, mise en page
   Propriétés logiques partout : l'arabe se retourne sans exception.
   ═══════════════════════════════════════════════════════════════ */

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

/* L'attribut `hidden` doit l'emporter sur nos règles de disposition.

   La feuille du navigateur ne le pose qu'en `[hidden] { display: none }`,
   au poids d'un sélecteur d'attribut : n'importe quelle classe à nous qui
   déclare un `display` le bat. C'est arrivé sur l'état vide de la FAQ —
   `.empty { display: grid }` — dont le panneau « aucune réponse ne
   correspond » restait affiché en permanence sous les résultats, dans
   les quinze langues. Le JS faisait pourtant son travail : il basculait
   bien l'attribut, et personne ne le voyait.

   Le même attribut pilote les étapes du tunnel de paiement (facture en
   attente, paiement confirmé, bouton de simulation). Une règle unique
   au niveau du reset vaut mieux que de corriger classe par classe et
   d'attendre la prochaine.                                             */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--band-h) + var(--s5));
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}

body {
  min-height: 100svh;
  background-color: var(--surface);
  color: var(--fg);
  font-family: var(--font-text);
  font-size: var(--t-md);
  line-height: var(--lh-body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

img, svg, video, canvas { display: block; max-width: 100%; }
img, video { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
:where(a) { color: inherit; }
p, li, dd { text-wrap: pretty; }
h1, h2, h3, h4 { text-wrap: balance; }

:focus-visible {
  outline: none;
  box-shadow: var(--focus);
  border-radius: var(--r-xs);
}

::selection { background: var(--accent); color: var(--surface); }

/* ── La fibre du papier ────────────────────────────────────────
   Pas un « grain » photographique : une trame de fibres courtes,
   comme le papier chiffon d'une coupure. Fixée au viewport, en
   multiplication, jamais interactive.                             */


/* ── Titrage ─────────────────────────────────────────────────── */

.title {
  font-family: var(--font-title);
  /* Une Didone tire sa force du contraste des pleins et des déliés ;
     une grotesque, de sa masse. D'où 700 là où l'ancienne direction
     se contentait de 500. */
  font-weight: 700;
  font-optical-sizing: auto;
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-title);
}
/* L'italique servait à distinguer la seconde phrase du héros. Une
   grotesque n'a pas d'italique digne de ce nom : on distingue par la
   couleur. */
.title em {
  font-style: normal;
  font-weight: inherit;
  color: var(--accent);
}

.t1 { font-size: var(--t-4xl); }
.t2 { font-size: var(--t-3xl); }
.t3 { font-size: var(--t-2xl); }
.t4 { font-size: var(--t-xl); }

/* Valeur faciale — le grand chiffre d'une coupure. Contour gravé
   plutôt que plein, comme les chiffres au verso d'un billet.      */
.denomination {
  font-family: var(--font-title);
  font-size: var(--t-5xl);
  line-height: 0.8;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1px var(--line-accent);
  text-stroke: 1px var(--line-accent);
  user-select: none;
}
.denomination--solid {
  color: var(--accent);
  -webkit-text-stroke: 0;
  text-stroke: 0;
}

/* ── Mentions gravées ────────────────────────────────────────── */

/* Le petit lettrage espacé des cartouches officiels. */
.engraved {
  font-family: var(--font-text);
  font-size: var(--t-2xs);
  font-weight: 600;
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--fg-faint);
  line-height: 1;
}
.engraved--ink { color: var(--fg); }
.engraved--accent { color: var(--accent); }

/* Numéro de série : toujours à l'encre rouge, toujours en mono. */
.serial {
  font-family: var(--font-serial);
  font-size: var(--t-2xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--serial);
  font-variant-numeric: tabular-nums;
}

.num {
  font-family: var(--font-serial);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* Cartouche de section : « ‹ 03 › SÉCURITÉ » entre deux filets. */
.cartouche {
  display: flex;
  align-items: center;
  gap: var(--s3);
  font-family: var(--font-text);
  font-size: var(--t-2xs);
  font-weight: 600;
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--fg-faint);
}
.cartouche::before,
.cartouche::after {
  content: "";
  height: var(--hair);
  background: var(--line);
}
.cartouche::before { inline-size: var(--s6); flex: none; }
.cartouche::after { flex: 1; }
.cartouche b {
  font-family: var(--font-serial);
  font-weight: 500;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
}

.lede {
  font-size: var(--t-lg);
  line-height: 1.72;
  color: var(--fg-muted);
  max-inline-size: var(--measure);
}

.muted { color: var(--fg-muted); }
.faint { color: var(--fg-faint); }
.accent { color: var(--accent); }

/* Lien : le trait se grave de gauche à droite au survol. */
.link {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 0% var(--hair);
  background-position-x: 0;
  background-position-y: 100%;
  background-repeat: no-repeat;
  padding-block-end: 2px;
  box-shadow: inset 0 -1px 0 -0.5px var(--line-soft);
  transition: background-size var(--d-base) var(--ease-out);
}
.link:hover, .link:focus-visible { background-size: 100% var(--hair); }

/* ── Prose ───────────────────────────────────────────────────── */

.prose { max-inline-size: var(--maxw-prose); }
.prose > * + * { margin-block-start: var(--s4); }
.prose h2 {
  font-family: var(--font-title);
  font-size: var(--t-2xl);
  font-weight: 700;
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-title);
  margin-block-start: var(--s8);
  padding-block-start: var(--s5);
  border-block-start: var(--hair) solid var(--line);
}
.prose h3 {
  font-size: var(--t-lg);
  font-weight: 600;
  margin-block-start: var(--s6);
}
.prose h4 {
  font-size: var(--t-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tr-caps);
  color: var(--fg-faint);
  margin-block-start: var(--s5);
}
.prose p, .prose li { color: var(--fg-muted); }
.prose strong { color: var(--fg); font-weight: 600; }
.prose ul, .prose ol { padding-inline-start: var(--s5); }
.prose li + li { margin-block-start: var(--s2); }
.prose li::marker { color: var(--accent); }
.prose a { color: var(--fg); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.prose code {
  font-family: var(--font-serial);
  font-size: 0.86em;
  background: var(--surface-sunk);
  padding: 0.1em 0.36em;
  border-radius: var(--r-xs);
}
.prose blockquote {
  border-inline-start: 2px solid var(--accent);
  padding-inline-start: var(--s4);
  font-style: italic;
  color: var(--fg-muted);
}

/* ── Mise en page ────────────────────────────────────────────── */

.wrap {
  inline-size: 100%;
  max-inline-size: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--wide { max-inline-size: var(--maxw-wide); }
.wrap--narrow { max-inline-size: 54rem; }

.section { padding-block: clamp(var(--s9), 8vw, var(--s12)); }
.section--tight { padding-block: clamp(var(--s7), 5vw, var(--s9)); }
.section--ruled { border-block-start: var(--hair) solid var(--line); }

.stack > * + * { margin-block-start: var(--s4); }
.stack-sm > * + * { margin-block-start: var(--s2); }
.stack-lg > * + * { margin-block-start: var(--s6); }
.stack-xl > * + * { margin-block-start: var(--s8); }

.row { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.row--between { justify-content: space-between; }
.row--tight { gap: var(--s2); }
.row--loose { gap: var(--s5); }
.row--top { align-items: flex-start; }
.row--end { align-items: flex-end; }

.grid { display: grid; gap: var(--s5); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Registre : notes en marge + corps, comme un feuillet annoté. */
.registre {
  display: grid;
  grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
  gap: clamp(var(--s5), 4.5vw, var(--s9));
  align-items: start;
}
.registre__marge { position: sticky; inset-block-start: calc(var(--header-h) + var(--s6)); }

@media (max-width: 62rem) {
  .grid-4, .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .registre { grid-template-columns: minmax(0, 1fr); }
  .registre__marge { position: static; }
}
@media (max-width: 44rem) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
}

/* ── Deux colonnes de largeurs libres ──────────────────────────
   Une quinzaine d'endroits veulent deux colonnes déséquilibrées :
   texte + éventail de cartes, formulaire + récapitulatif, notes +
   corps. Le ratio diffère à chaque fois, donc il vivait dans un
   attribut `style` — et c'était le défaut : un style inline ne peut
   être surchargé par AUCUNE requête média. Ces grilles restaient donc
   à deux colonnes sur téléphone, à 130 px chacune, où une carte de
   paiement tombait à 154 px de large et un paragraphe à quatre mots
   par ligne.

   Le ratio reste propre à chaque instance, mais il passe par une
   variable : c'est la requête média qui décide s'il s'applique. */
.split { display: grid; gap: var(--s6); }
@media (min-width: 44.001rem) {
  .split { grid-template-columns: var(--split, minmax(0, 1fr) minmax(0, 1fr)); }
}

@media (max-width: 52rem) { .hide-sm { display: none !important; } }
@media (min-width: 52.001rem) { .only-sm { display: none !important; } }

.sr-only {
  position: absolute;
  inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  inset-inline-start: var(--s4);
  inset-block-start: var(--s4);
  z-index: var(--z-toast);
  transform: translateY(-250%);
  background: var(--ink);
  color: var(--surface);
  padding: var(--s2) var(--s4);
  font-size: var(--t-sm);
  transition: transform var(--d-base) var(--ease-out);
}
.skip-link:focus-visible { transform: translateY(0); }

hr {
  border: 0;
  border-block-start: var(--hair) solid var(--line);
  margin-block: var(--s7);
}

/* ── Le repérage des plaques ───────────────────────────────────
   L'animation signature de la maison. Sur une presse taille-douce,
   chaque couleur passe sur une plaque distincte ; si le papier est
   mal calé, les plaques sont décalées et l'image est « hors
   repère ». Ici, les blocs arrivent hors repère — la plaque cuivre
   décalée de quelques pixels — puis se recalent.

   Comme toute animation d'entrée du site, elle n'est armée que si
   ui.js pose [data-print] sur <html>. Sans script, sans mouvement
   ou dans un onglet d'arrière-plan, tout est déjà en repère.       */

html[data-print] [data-register] {
  opacity: 0;
  transition:
    opacity var(--d-print) var(--ease-out),
    transform var(--d-print) var(--ease-out),
    filter var(--d-print) var(--ease-out);
  transition-delay: var(--delay, 0ms);
  transform: translate3d(calc(var(--off, 5px) * -1), var(--off, 5px), 0);
  filter: drop-shadow(var(--off, 5px) 0 0 var(--accent-wash));
}
html[data-print] [data-register][data-inked] {
  opacity: 1;
  transform: none;
  filter: none;
}

/* ── Mouvement réduit ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Impression ─────────────────────────────────────────────── */
@media print {
  .band, .site-header, .site-footer__mega, .btn, .seal { display: none !important; }
  body { background: #fff; color: #000; font-size: 10.5pt; }
  .section { padding-block: 1.2rem; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8.5pt; color: #555; }
}