/*
 * .hero-doc — reproduction fidèle du mockup "Dossier fiscal" fourni par
 * Sébastien (dossier-fiscal-demo.html), utilisée comme visuel du hero
 * home pro. Design intentionnellement identique à l'original (couleurs,
 * polices, mise en page) : seuls le fond de page, le chrome de navigateur
 * et les contrôles de navigation externes (boutons/points/légende) ont
 * été retirés pour ne garder que les feuillets eux-mêmes, posés dans le
 * hero. Classes préfixées hero-doc__ (au lieu des classes génériques de
 * l'original comme .leaf/.cover/.body) pour ne rien collisionner avec le
 * reste du site — le rendu visuel n'en est pas affecté.
 * Volontairement hors du système de tokens (tokens.css) : ce document
 * reproduit une charte cabinet tierce, pas la charte DeclarAid.
 *
 * Exceptions demandées explicitement (tout le reste — mise en page,
 * contenu, autres couleurs — reste identique à l'original) :
 * - le timing de la transition de .hero-doc__leaf, la perspective de
 *   .hero-doc__stage et l'ombrage de tranche (::before) ci-dessous,
 *   retravaillés pour un flip plus "mécanisme numérique précis" que
 *   "page de livre papier" — courbe sans rebond, plus de profondeur 3D ;
 * - --paper ci-dessous, passé de la teinte crème d'origine (#FBF7EF) à un
 *   blanc pur, la page devant lire "blanche" plutôt que "jaune clair" ;
 * - les ombres portées (.hero-doc__deck-shadow, .hero-doc__book, flip,
 *   peek) teintées marine (rgb(30,42,94), --color-accent-secondary)
 *   plutôt qu'un noir neutre, et le halo passé du jaune (--color-accent)
 *   au marine sur les deux taches — un noir/jaune générique lisait "trop
 *   jaune" une fois les ombres allégées ; une teinte de marque unique et
 *   froide lit plus "tech/expert" qu'un noir par défaut.
 *
 * Plus bas : section ".hero-doc-viewer" — chrome d'interface ajouté autour
 * du document (halo, tilt 3D, boutons, progression). Contrairement au
 * document lui-même, ce chrome est la charte DeclarAid : construit avec
 * les tokens de tokens.css (seules les valeurs de glassmorphism, sans
 * équivalent dans les tokens actuels, restent en brut, commentées).
 */
.hero-doc {
  --ink: #16233A;
  --ink-soft: #4A5A70;
  --ink-faint: #8090A3;
  --paper: #FFFFFF;
  --paper-line: #E3DDCC;
  --bronze: #2E5AA8;
  --bronze-deep: #22458A;
  --bronze-soft: #8FB4E8;
  --cerfa-box: #EEF1F6;
  --cerfa-border: #B9C4D1;
  --cerfa-head: #DCE3EC;
  --serif: 'Source Serif 4', ui-serif, Georgia, serif;
  --sans: 'IBM Plex Sans', -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  width: 100%;
  /* position+z-index : empilement déterministe face aux couches de chrome
     ajoutées autour (halo, pastilles) — aucun effet visuel propre. */
  position: relative;
  z-index: 2;
}

.hero-doc__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 210 / 297;
  perspective: 1500px;
  -webkit-perspective: 1500px;
}

/* --static — variante pour une page unique non interactive (section "Le
   document que vos clients attendent de vous") : le ratio A4 fixe de
   .hero-doc__stage, pensé pour empiler des feuillets identiques dans le
   flip du hero, force soit une coupe du texte sur mobile (contenu plus
   dense qu'un feuillet du hero) soit un vide énorme sur desktop (contenu
   moins dense que le ratio l'impose). Ici la hauteur suit le contenu :
   .hero-doc__book/.hero-doc__leaf repassent en flux normal (position:
   relative garde leur propre contexte de positionnement pour ::before/
   ::after), .hero-doc__deck-shadow/.hero-doc__stack-behind (restés en
   position absolute) s'ajustent alors sur cette hauteur naturelle. */
.hero-doc__stage--static {
  aspect-ratio: auto;
}

.hero-doc__book.hero-doc__book--static,
.hero-doc__leaf.hero-doc__leaf--static {
  position: relative;
  inset: auto;
}

.hero-doc__deck-shadow {
  position: absolute;
  inset: 6px 4px -10px 10px;
  background: var(--color-accent-secondary);
  filter: blur(22px);
  opacity: .14;
  border-radius: 2px;
  z-index: 0;
}

.hero-doc__stack-behind {
  position: absolute;
  inset: 0;
  border-radius: 5px;
  background: var(--paper);
  z-index: 1;
}

.hero-doc__stack-behind--1 {
  transform: translate(5px, 5px) rotate(0.9deg);
  opacity: .9;
}

.hero-doc__stack-behind--2 {
  transform: translate(9px, 9px) rotate(1.7deg);
  opacity: .7;
}

.hero-doc__book {
  position: absolute;
  inset: 0;
  z-index: 2;
  transform-style: preserve-3d;
  border-radius: 5px;
  box-shadow: 0 30px 60px -18px rgba(30, 42, 94, .22);
  cursor: pointer;
}

.hero-doc__leaf {
  position: absolute;
  inset: 0;
  background: var(--paper);
  border-radius: 5px;
  transform-origin: left center;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* Courbe symétrique (lent-vite-lent), pas un expo-out : seule la moitié
     de la rotation est visible (l'autre est masquée par backface-visibility
     hidden), or cette moitié visible tombe sur le DÉBUT du mouvement en
     avançant (0→-90°) mais sur la FIN en reculant (-90°→0). Avec une
     courbe asymétrique, une moitié hérite du segment rapide et l'autre du
     lent — les deux sens se voyaient donc différemment alors que le code
     est identique. Symétrique : les deux sens reçoivent le même traitement. */
  transition: transform .5s cubic-bezier(.65, 0, .35, 1), box-shadow .5s cubic-bezier(.65, 0, .35, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Ombrage de tranche : s'assombrit à mesure que le feuillet tourne, comme
   son verso s'éloignant de la lumière — même transition bidirectionnelle
   que le flip (::before, 2 états, pas de keyframes). Un filet clair fin
   est superposé côté pli (là où la lumière accroche le papier qui se
   courbe) pour une impression plus matérielle que le seul assombrissement. */
.hero-doc__leaf::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, .5) 4%, transparent 9%),
    linear-gradient(90deg, rgba(0, 0, 0, .4), transparent 60%);
  opacity: 0;
  transition: opacity .5s cubic-bezier(.65, 0, .35, 1);
  pointer-events: none;
}

.hero-doc__leaf.is-flipped::before {
  opacity: 1;
}

.hero-doc__leaf.is-flipped {
  transform: translateZ(-10px) rotateY(-180deg);
  box-shadow: -18px 0 30px -14px rgba(30, 42, 94, .22);
}

/* .is-peeking — nudge d'affordance ponctuel sur la couverture (voir
   js/hero-document.js) : suggère que le document se feuillette avant tout
   premier clic, en réutilisant la même transition que le vrai flip. */
.hero-doc__leaf.is-peeking {
  transform: rotateY(-28deg);
  box-shadow: -10px 0 22px -14px rgba(30, 42, 94, .18);
}

@media (prefers-reduced-motion: reduce) {
  .hero-doc__leaf,
  .hero-doc__leaf::before {
    transition: none;
  }
}

.hero-doc__running-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(10px, 3.4%, 16px) clamp(12px, 4.6%, 20px) clamp(6px, 2%, 10px);
  border-bottom: 1px solid var(--paper-line);
  margin-bottom: clamp(20px, 6.5%, 30px);
  flex: 0 0 auto;
}

.hero-doc__mark {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 12.5px;
  color: var(--ink);
  letter-spacing: .01em;
}

.hero-doc__mark span {
  color: var(--bronze);
}

.hero-doc__doc-title {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .04em;
  color: var(--ink-faint);
}

.hero-doc__running-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(6px, 2%, 10px) clamp(12px, 4.6%, 20px) clamp(10px, 3.4%, 14px);
  border-top: 1px solid var(--paper-line);
  flex: 0 0 auto;
}

.hero-doc__running-foot span {
  font-family: var(--mono);
  font-size: 8.6px;
  color: var(--ink-faint);
  letter-spacing: .02em;
}

.hero-doc__running-foot .hero-doc__pageno {
  font-weight: 600;
  color: var(--ink-soft);
}

.hero-doc__content {
  flex: 1 1 auto;
  padding: clamp(10px, 3.6%, 18px) clamp(12px, 4.6%, 20px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-doc__sample-chip {
  position: absolute;
  top: clamp(10px, 3.2%, 16px);
  right: clamp(10px, 3.6%, 18px);
  font-family: var(--mono);
  font-size: 7.6px;
  letter-spacing: .04em;
  color: var(--bronze-deep);
  background: #EAF1FB;
  border: 1px solid #C3D8F0;
  padding: 3px 6px;
  border-radius: 20px;
}

.hero-doc__section-title {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--ink);
  font-size: clamp(11.5px, 3.1%, 13.5px);
  margin: 0 0 3px;
  line-height: 1.25;
}

.hero-doc__section-note {
  font-size: clamp(8px, 2.15vw, 9.6px);
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 0 0 clamp(16px, 6%, 30px);
  font-style: italic;
}

.hero-doc__cerfa {
  width: 100%;
  border-collapse: collapse;
  font-size: clamp(7.6px, 2.05vw, 9.2px);
  margin-bottom: clamp(18px, 6.5%, 32px);
}

.hero-doc__cerfa caption {
  text-align: left;
  font-family: var(--sans);
  font-weight: 700;
  color: var(--ink);
  background: var(--cerfa-head);
  border: 1px solid var(--cerfa-border);
  padding: 4px 7px;
  font-size: clamp(7.6px, 2.05vw, 9px);
  letter-spacing: .02em;
  text-transform: uppercase;
}

.hero-doc__cerfa td {
  border: 1px solid var(--cerfa-border);
  padding: 3.5px 7px;
  color: var(--ink);
  vertical-align: middle;
}

.hero-doc__cerfa tr.hero-doc__cerfa-subhead td {
  background: var(--cerfa-box);
  font-weight: 700;
  font-size: clamp(7.2px, 1.95vw, 8.4px);
  letter-spacing: .02em;
}

.hero-doc__cerfa td.hero-doc__cerfa-code {
  font-family: var(--mono);
  font-weight: 600;
  color: var(--bronze-deep);
  width: 15%;
  text-align: center;
  background: #F1F5FB;
}

.hero-doc__cerfa td.hero-doc__cerfa-amount {
  font-family: var(--mono);
  font-weight: 600;
  text-align: right;
  width: 22%;
  white-space: nowrap;
}

.hero-doc__cerfa td.hero-doc__cerfa-label {
  color: var(--ink-soft);
}

.hero-doc__cerfa tr.hero-doc__cerfa-total td {
  font-weight: 700;
  color: var(--ink);
  border-top: 2px solid var(--ink);
}

.hero-doc__stamp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border: 1px solid var(--ink);
  font-family: var(--mono);
  font-weight: 700;
  font-size: 9px;
  color: var(--ink);
}

/* ---------- couverture ---------- */
.hero-doc__cover {
  justify-content: space-between;
}

.hero-doc__cover-top {
  padding: clamp(20px, 7%, 32px) clamp(16px, 6%, 26px) 0;
  margin-bottom: clamp(18px, 7%, 32px);
}

.hero-doc__wordmark {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hero-doc__crest {
  width: 26px;
  height: 26px;
  border: 1.4px solid var(--bronze);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-weight: 700;
  color: var(--bronze);
  font-size: 12px;
  border-radius: 50%;
}

.hero-doc__wordmark-name {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(12px, 3.3vw, 14px);
  color: var(--ink);
  letter-spacing: .01em;
}

.hero-doc__wordmark-name small {
  display: block;
  font-family: var(--mono);
  font-size: 7.5px;
  color: var(--ink-faint);
  letter-spacing: .08em;
  font-weight: 500;
  margin-top: 1px;
}

.hero-doc__cover-mid {
  padding: 0 clamp(16px, 6%, 26px);
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-doc__rule {
  width: 34px;
  height: 2px;
  background: var(--bronze);
  margin-bottom: 14px;
}

.hero-doc__cover-title {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--ink);
  font-size: clamp(19px, 5.6vw, 25px);
  line-height: 1.18;
  margin: 0 0 8px;
}

.hero-doc__cover-sub {
  font-size: clamp(9.5px, 2.5vw, 11px);
  color: var(--ink-soft);
  line-height: 1.5;
  max-width: 80%;
}

.hero-doc__idbox {
  margin-top: clamp(18px, 5%, 24px);
  border: 1px solid var(--paper-line);
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.hero-doc__idbox div {
  padding: 8px 12px;
  border-right: 1px solid var(--paper-line);
}

.hero-doc__idbox div:last-child {
  border-right: none;
}

.hero-doc__idbox-key {
  font-family: var(--mono);
  font-size: 7.6px;
  color: var(--ink-faint);
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.hero-doc__idbox-value {
  font-size: 9.6px;
  color: var(--ink);
  font-weight: 600;
}

.hero-doc__cover-bottom {
  padding: clamp(12px, 4%, 18px) clamp(16px, 6%, 26px) clamp(16px, 5%, 22px);
  border-top: 1px solid var(--paper-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hero-doc__pw-label {
  font-family: var(--mono);
  font-size: 7px;
  color: var(--ink-faint);
  letter-spacing: .04em;
  line-height: 1.5;
}

/* ---------- sommaire ---------- */
.hero-doc__toc-list {
  display: flex;
  flex-direction: column;
}

.hero-doc__toc-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: clamp(11px, 4%, 18px) 0;
  border-bottom: 1px dotted var(--paper-line);
}

.hero-doc__toc-num {
  font-family: var(--mono);
  font-size: 8.6px;
  color: var(--bronze-deep);
  width: 14px;
  flex: 0 0 auto;
}

.hero-doc__toc-text {
  font-size: clamp(8.4px, 2.2vw, 9.6px);
  color: var(--ink);
  flex: 1 1 auto;
}

.hero-doc__toc-page {
  font-family: var(--mono);
  font-size: 8.6px;
  color: var(--ink-faint);
}

/* ---------- synthèse ---------- */
.hero-doc__sched {
  width: 100%;
  border-collapse: collapse;
  font-size: clamp(7.8px, 2.1vw, 9px);
}

.hero-doc__sched td {
  padding: 7px 7px;
  border-bottom: 1px solid var(--paper-line);
  color: var(--ink);
}

.hero-doc__sched tr.hero-doc__sched-group td {
  padding-top: clamp(16px, 6%, 26px);
  font-family: var(--mono);
  font-size: 7.2px;
  letter-spacing: .05em;
  color: var(--bronze-deep);
  border-bottom: none;
  text-transform: uppercase;
}

.hero-doc__sched td.hero-doc__sched-chk {
  width: 22px;
  text-align: center;
}

/* ---------- notes ---------- */
.hero-doc__notes p {
  font-size: clamp(8.2px, 2.15vw, 9.4px);
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0 0 clamp(14px, 5%, 22px);
}

.hero-doc__notes h3 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(8.6px, 2.2vw, 9.6px);
  color: var(--ink);
  margin: clamp(14px, 5%, 20px) 0 8px;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.hero-doc__notes dl {
  margin: 0 0 6px;
}

.hero-doc__notes dt {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 8.4px;
  color: var(--bronze-deep);
  margin-top: clamp(10px, 4%, 16px);
}

.hero-doc__notes dd {
  margin: 2px 0 0;
  font-size: 8.4px;
  color: var(--ink-soft);
  line-height: 1.5;
}

/* =====================================================================
   .hero-doc-viewer — chrome d'interface DeclarAid autour du document
   (halo ambiant, tilt 3D au survol, boutons de page, progression). Ne
   modifie jamais .hero-doc__* : posé en couches au-dessus/autour.
   Construit avec les tokens du site (voir tokens.css), à l'exception du
   verre dépoli des boutons/pastilles (rgba blanches + blur), sans
   équivalent dans les tokens actuels — indiqué à chaque usage.
   ===================================================================== */
.hero-doc-viewer {
  position: relative;
  width: 100%;
}

/* Halo ambiant : deux taches de couleur floutées, clippées dans une boîte
   de la taille du document (pas plus grande) pour ne jamais provoquer de
   débordement/scroll horizontal — seul leur flou "respire" au-delà. */
.hero-doc-viewer__glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  pointer-events: none;
}

.hero-doc-viewer__glow span {
  position: absolute;
  width: 60%;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(56px);
  opacity: .28;
}

/* Ombre de contact : la carte semble reposer sur un léger halo teinté
   plutôt qu'une ombre neutre — effet "objet qui flotte" plus premium. */
.hero-doc-viewer__contact-shadow {
  position: absolute;
  z-index: 0;
  left: 10%;
  right: 10%;
  bottom: -8%;
  height: 26%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, var(--color-accent-secondary), transparent 72%);
  opacity: .13;
  filter: blur(26px);
  pointer-events: none;
}

/* Halo entièrement marine (--color-accent-secondary) sur les deux taches :
   le jaune (--color-accent) donnait un halo perçu comme "jaune" une fois
   les ombres neutres allégées — une teinte froide et unique lit plus
   "tech/expert" qu'un mélange jaune + marine. */
.hero-doc-viewer__glow span:first-child {
  top: -18%;
  left: -16%;
  background: var(--color-accent-secondary);
  opacity: .22;
  animation: heroDocGlowDrift1 17s ease-in-out infinite alternate;
}

.hero-doc-viewer__glow span:last-child {
  bottom: -20%;
  right: -14%;
  background: var(--color-accent-secondary);
  animation: heroDocGlowDrift2 21s ease-in-out infinite alternate;
}

@keyframes heroDocGlowDrift1 {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(10%, 8%) scale(1.15); }
}

@keyframes heroDocGlowDrift2 {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(-8%, -10%) scale(1.12); }
}

/* Conteneur du tilt 3D (voir js/hero-document.js) : le survol/mousemove
   pousse --hero-doc-rx/--hero-doc-ry, appliqués ici en plus du léger
   soulèvement (scale) — indépendant du flip 3D interne des feuillets. */
.hero-doc-viewer__stage-wrap {
  position: relative;
  z-index: 1;
  transform: perspective(1200px) rotateX(var(--hero-doc-rx, 0deg)) rotateY(var(--hero-doc-ry, 0deg)) scale(var(--hero-doc-scale, 1));
  transition: transform .5s cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .hero-doc-viewer__stage-wrap {
    transform: none !important;
    transition: none;
  }
}

/* Boutons page précédente/suivante — verre dépoli au-dessus du papier.
   rgba blanches + backdrop-filter : effet de verre sans équivalent token,
   valeurs brutes assumées ici (voir note en tête de fichier). */
.hero-doc-viewer__nav {
  position: absolute;
  top: 50%;
  z-index: 20;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .6);
  background: rgba(255, 255, 255, .5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--color-heading);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(23, 23, 23, .16), 0 1px 2px rgba(23, 23, 23, .08);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, opacity .2s ease;
}

.hero-doc-viewer__nav:hover {
  background: rgba(255, 255, 255, .85);
  box-shadow: 0 12px 26px rgba(23, 23, 23, .2), 0 1px 2px rgba(23, 23, 23, .1);
  transform: translateY(-50%) scale(1.08);
}

.hero-doc-viewer__nav:active {
  transform: translateY(-50%) scale(.94);
}

.hero-doc-viewer__nav:disabled {
  opacity: .25;
  cursor: default;
  pointer-events: none;
}

.hero-doc-viewer__nav--prev {
  left: -14px;
}

.hero-doc-viewer__nav--next {
  right: -14px;
}

/* Barre de progression + compteur — lecture "où en est-on dans le
   dossier", sous le document. */
.hero-doc-viewer__meta {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

.hero-doc-viewer__progress {
  flex: 1 1 auto;
  height: 3px;
  border-radius: var(--radius-pill);
  background: var(--color-border);
  overflow: hidden;
}

.hero-doc-viewer__progress span {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--color-accent-secondary);
  transition: width .45s cubic-bezier(.22, 1, .36, 1);
}

.hero-doc-viewer__counter {
  flex: 0 0 auto;
  margin: 0;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-tertiary);
}

/* Pastilles de réassurance flottantes — dans .hero-doc-viewer__stage-wrap,
   donc soumises au même tilt 3D que le document (parallaxe naturelle,
   aucun JS). Élément externe (.hero-doc-viewer__badge) : position + survol
   — un :hover CSS pur, sans JS, qui réagit dans les deux sens (s'écarte,
   puis revient). Élément interne (__badge-inner) : entrée + flottement
   continu. Les deux transforms se composent sans jamais entrer en
   conflit, chacun ne portant qu'une seule préoccupation. */
.hero-doc-viewer__badge {
  position: absolute;
  z-index: 15;
  transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}

.hero-doc-viewer__badge--top {
  top: -10px;
  right: 20px;
}

.hero-doc-viewer__badge--bottom {
  bottom: 30px;
  left: -10px;
}

.hero-doc-viewer__badge--top:hover {
  transition-duration: .3s;
  transform: translate(16px, -18px);
}

.hero-doc-viewer__badge--bottom:hover {
  transition-duration: .3s;
  transform: translate(-17px, 16px);
}

.hero-doc-viewer__badge-inner {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--color-background);
  border: 1px solid var(--color-border);
  box-shadow: 0 10px 24px rgba(23, 23, 23, .12), 0 2px 6px rgba(23, 23, 23, .06);
  font-size: 11px;
  font-weight: 600;
  color: var(--color-heading);
  white-space: nowrap;
  opacity: 0;
  --badge-rot: 0deg;
  animation: heroDocBadgeIn .6s cubic-bezier(.22, 1, .36, 1) forwards, heroDocBadgeFloat 5s ease-in-out infinite;
}

.hero-doc-viewer__badge-inner svg {
  flex-shrink: 0;
  color: var(--color-success-text);
}

.hero-doc-viewer__badge--top .hero-doc-viewer__badge-inner {
  --badge-rot: -2deg;
  animation-delay: 1.9s, 2.5s;
}

.hero-doc-viewer__badge--bottom .hero-doc-viewer__badge-inner {
  --badge-rot: 2deg;
  animation-delay: 2.15s, 2.75s;
}

.hero-doc-viewer__badge--bottom .hero-doc-viewer__badge-inner svg {
  color: var(--color-accent-secondary);
}

@keyframes heroDocBadgeIn {
  from { opacity: 0; transform: translateY(8px) scale(.9) rotate(var(--badge-rot)); }
  to { opacity: 1; transform: translateY(0) scale(1) rotate(var(--badge-rot)); }
}

@keyframes heroDocBadgeFloat {
  0%, 100% { transform: translateY(0) rotate(var(--badge-rot)); }
  50% { transform: translateY(-4px) rotate(var(--badge-rot)); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-doc-viewer__badge {
    transition: none;
  }

  .hero-doc-viewer__badge-inner {
    animation: none;
    opacity: 1;
    transform: rotate(var(--badge-rot));
  }
}

@media (max-width: 480px) {
  /* Les pastilles empiètent trop sur un document déjà à l'étroit en
     dessous de ~480px : mieux vaut les cacher que les faire chevaucher
     le texte du document. */
  .hero-doc-viewer__badge {
    display: none;
  }
}

/* =====================================================================
   Page statique "Formulaires couverts" (section "Le document que vos
   clients attendent de vous") : lisibilité + survol. Tout est scopé via
   des classes dédiées (--roomy, __sched-check, __sched-row) ou des
   sélecteurs combinés plus spécifiques que les règles de base — rien
   n'est modifié pour les pages du hero interactif (ex: .hero-doc__stamp
   "X" de sa page Synthèse, laissé tel quel).
   ===================================================================== */

/* --roomy : cette page est seule (hauteur libre, pas de gabarit A4 à
   respecter pour rester identique aux 8 autres feuillets du hero) — les
   tailles peuvent respirer davantage pour une meilleure lecture. */
.hero-doc--roomy .hero-doc__section-title {
  font-size: 17px;
}

.hero-doc--roomy .hero-doc__section-note {
  font-size: 12px;
  line-height: 1.6;
  margin-bottom: 18px;
}

.hero-doc--roomy .hero-doc__sched td {
  padding: 11px 8px;
  font-size: 12px;
}

/* Coche vectorielle plutôt que le tampon "X" (.hero-doc__stamp, propre à
   la page Synthèse du hero) : registre plus digital, cohérent avec un
   outil qui détecte automatiquement les formulaires applicables. */
.hero-doc__sched-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--cerfa-box);
  border: 1px solid var(--cerfa-border);
  color: var(--bronze-deep);
  transition: background .25s ease, border-color .25s ease, color .25s ease, transform .25s ease;
}

/* Survol de ligne : la coche se remplit, le libellé glisse légèrement —
   lecture plus active qu'une liste figée. */
.hero-doc__sched-row {
  transition: background-color .25s ease;
}

.hero-doc__sched-row td {
  transition: transform .25s ease, color .25s ease;
}

/* .is-auto-hover — équivalent de :hover posé par JS (voir
   js/hero-document-static-preview.js) : sur tactile, rien ne déclenche
   jamais un :hover, ce script rejoue donc la même mise en avant une fois,
   ligne par ligne, quand le mockup entre dans le viewport. */
.hero-doc__sched-row:hover,
.hero-doc__sched-row.is-auto-hover {
  background-color: var(--cerfa-box);
}

.hero-doc__sched-row:hover td:last-child,
.hero-doc__sched-row.is-auto-hover td:last-child {
  transform: translateX(3px);
  color: var(--bronze-deep);
}

.hero-doc__sched-row:hover .hero-doc__sched-check,
.hero-doc__sched-row.is-auto-hover .hero-doc__sched-check {
  background: var(--bronze-deep);
  border-color: var(--bronze-deep);
  color: #fff;
  transform: scale(1.12);
}

@media (prefers-reduced-motion: reduce) {
  .hero-doc__sched-check,
  .hero-doc__sched-row,
  .hero-doc__sched-row td {
    transition: none;
  }
}

/* Carte : légère élévation au survol (transform + ombre plus profonde),
   avec un reflet qui balaie la page en diagonale — écho discret du tilt
   3D et du halo du hero, en pur CSS puisque cette page est statique. */
.hero-doc__book.hero-doc__book--static {
  transition: transform .4s cubic-bezier(.22, 1, .36, 1), box-shadow .4s cubic-bezier(.22, 1, .36, 1);
}

.hero-doc__book.hero-doc__book--static:hover,
.hero-doc__book.hero-doc__book--static.is-auto-hover {
  transform: translateY(-6px);
  box-shadow: 0 44px 80px -22px rgba(30, 42, 94, .18), 0 14px 28px -14px rgba(30, 42, 94, .08);
}

.hero-doc__leaf.hero-doc__leaf--static::before {
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .6) 50%, transparent 65%);
  opacity: 1;
  transform: translateX(-130%);
  transition: transform .8s ease;
}

.hero-doc__book.hero-doc__book--static:hover .hero-doc__leaf.hero-doc__leaf--static::before,
.hero-doc__book.hero-doc__book--static.is-auto-hover .hero-doc__leaf.hero-doc__leaf--static::before {
  transform: translateX(130%);
}

@media (prefers-reduced-motion: reduce) {
  .hero-doc__book.hero-doc__book--static,
  .hero-doc__leaf.hero-doc__leaf--static::before {
    transition: none;
  }

  .hero-doc__book.hero-doc__book--static:hover {
    transform: none;
  }
}