/* ==========================================================================
   L’Argentier — feuille de style partagée du site (largentier.fr)
   Piste « Trébuchet », octobre 2026.

   Plan
   (a) Variables : fondations (couleurs, typographie, espacements, rayons,
       ombres, grille) et mouvement (durées, courbes)
   (b) Base et typographie
   (c) Composants (boutons, champs, cartes, badges, statuts, écart, balance,
       tableaux, filtres, questions, bandeau, boîte de dialogue…)
   (d) Mise en page et sections de l’accueil
   (d bis) Décodeur (/decodeur), classes « dec- »
   (d ter) Experts-comptables (/cabinets), classes « cab- »
   (d quater) Pages annexes (mentions légales, merci, 404), classes « ann- »
   (e) Responsive : une seule stratégie, deux points de rupture
       - ≤ 1 039 px : en-tête compact (menu ≡) ; ≤ 959 px : la grille de 1 200 px se replie
         naturellement (flex-wrap) ;
       - ≤ 759 px : mise en page mobile de la maquette (390 px, gouttières 20 px).
   (f) Mouvement : séquence du héros, cascade, révélations, mode Calme.
   Les valeurs sont celles des maquettes (specs 01 à 05), reprises telles quelles.
   ========================================================================== */

/* --------------------------------------------------------------------------
   (a) Variables
   -------------------------------------------------------------------------- */
:root {
  /* Les quatre couleurs principales */
  --nuit: #0F1B2B;            /* fond des sections sombres, encre sur clair */
  --argent: #C9D1DA;          /* texte courant sur nuit, filets */
  --papier: #F3F5F7;          /* fond des sections claires, texte sur nuit */
  --laiton: #B8955A;          /* action principale, pièces du fléau */
  /* Côté nuit */
  --nuit-profonde: #0A1420;   /* zone de dépôt, coffre */
  --pied-de-page: #08111C;    /* pied de page, bandeau cabinets, fond body */
  --surface: #15243A;         /* cartes posées sur la nuit */
  --surface-haute: #1B2B43;   /* ligne de relevé */
  --argent-secondaire: #959EA9;
  --laiton-clair: #D3B47E;    /* texte laiton sur nuit, focus sur nuit */
  --erreur-nuit: #F0B3A6;
  --erreur-nuit-bord: #E08A7A;
  /* Côté papier */
  --blanc: #FFFFFF;
  --encre-secondaire: #4F5864;
  --encre-tertiaire: #5E6875;
  --filet-champ: #7F8A97;
  --filet: #DDE2E8;
  --filet-moyen: #E3E7EC;
  --filet-leger: #EEF1F4;
  --filet-grille: #E9EDF1;
  --ligne-alternee: #FAFBFC;
  --ligne-survol: #F7F8FA;
  --laiton-fonce: #8A6D3B;    /* traits et puces laiton sur clair, focus sur clair */
  --laiton-encre: #7D6232;    /* texte laiton sur clair */
  --fond-laiton: #FBF8F2;
  --filet-laiton: #EADFC9;
  --erreur-clair: #A3392B;
  --laiton-survol: #CDAE73;
  /* Dégradés de texte */
  --degrade-argent: linear-gradient(180deg, #FFFFFF 0%, #E6EAEF 34%, #C9D1DA 62%, #9AA4B0 100%);
  --degrade-laiton: linear-gradient(180deg, #EAD3A4 0%, #CDAE73 42%, #B8955A 68%, #9A7743 100%);
  /* Matières */
  --coffre: linear-gradient(180deg, #15243A 0%, #101D2F 100%);
  --coffre-formulaire: linear-gradient(180deg, #17263C 0%, #111E30 100%);
  --mise-en-avant: linear-gradient(180deg, #17263C 0%, #0F1B2B 100%);
  --ombre-papier: 0 1px 2px rgba(15, 27, 43, 0.05), 0 40px 80px -48px rgba(15, 27, 43, 0.45);
  --ombre-coffre: 0 48px 96px -48px rgba(0, 0, 0, 0.75);
  --ombre-avant: 0 40px 80px -40px rgba(15, 27, 43, 0.55);
  /* Typographie */
  --police: 'Instrument Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  /* Échelle d’espacement (px) : 4 8 12 16 20 24 32 40 48 64 88 120 */
  --e-4: 4px; --e-8: 8px; --e-12: 12px; --e-16: 16px; --e-20: 20px; --e-24: 24px;
  --e-32: 32px; --e-40: 40px; --e-48: 48px; --e-64: 64px; --e-88: 88px; --e-120: 120px;
  /* Rayons */
  --r-4: 4px; --r-6: 6px; --r-8: 8px; --r-10: 10px; --r-12: 12px; --r-14: 14px; --r-16: 16px; --r-18: 18px; --r-pilule: 999px;
  /* Grille : contenu 1 120 px dans un conteneur de 1 200 px, marges 40 px (20 px sur mobile) */
  --conteneur: 1200px;
  --marge: 40px;
  /* Mouvement (spec 03) */
  --duree-valeur: 100ms;
  --duree-survol: 150ms;
  --duree-ligne: 300ms;
  --duree-barre: 500ms;
  --duree-tiroir: 600ms;
  --duree-balance: 1200ms; /* 700 à 1 200 : le fléau du héros se redresse de 3,0 à 4,2 s (spec 04 § 3.5) */
  /* Durées relevées sur les planches animées (spec 04 § 4.4, spec 05 § 1.4), dans les fourchettes de la spec 03 */
  --duree-fondu: 200ms;           /* valeur ou connecteur qui apparaît : 100 à 300 */
  --duree-barre-courte: 400ms;    /* barres de la cascade : 400 à 600 */
  --duree-barre-longue: 600ms;
  --duree-apparition: 400ms;      /* bloc « Écritures prêtes à importer », repère doré */
  --duree-balance-cascade: 4s;    /* oscillation de la grande balance, sur toute la cascade */
  --duree-etapes: 7s;             /* éclairage des quatre étapes, à tour de rôle */
  --courbe-sortie: cubic-bezier(.2, .8, .2, 1);
  --courbe-tiroir: cubic-bezier(.65, 0, .35, 1);
  --courbe-balance: cubic-bezier(.3, .7, .2, 1);
  --courbe-balance-cascade: cubic-bezier(.45, 0, .25, 1);
  --courbe-lineaire: linear;
  --courbe-survol: ease-out;
}

/* --------------------------------------------------------------------------
   (b) Base et typographie
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Instrument Sans';
  src: url('/assets/instrument-sans.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--pied-de-page);
  color: var(--argent);
  font-family: var(--police);
  font-size: 16px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; }
img { max-width: 100%; height: auto; }
h1, h2, h3, p, figure, blockquote, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, select { font: inherit; color: inherit; margin: 0; }
button { cursor: pointer; }
a { color: var(--papier); transition: color var(--duree-survol) var(--courbe-survol); }
a:hover { color: var(--laiton-clair); }
::placeholder { color: var(--argent-secondaire); opacity: 1; }
:focus-visible { outline: 2px solid var(--laiton-clair); outline-offset: 3px; }
.section--papier a { color: var(--nuit); }
.section--papier a:hover { color: var(--encre-secondaire); }
.section--papier ::placeholder { color: var(--encre-tertiaire); }
.section--papier :focus-visible, .pied :focus-visible { outline-color: var(--laiton-fonce); }
.pied :focus-visible { outline-color: var(--laiton-clair); }
sup { line-height: 0; }
strong { font-weight: 600; }
.nowrap { white-space: nowrap; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.pot-de-miel { display: none; }
.mobile { display: none; }
/* Lien d’évitement */
.sauter {
  position: absolute; left: 20px; top: -100px; z-index: 60;
  padding: 10px 14px; border-radius: var(--r-8);
  background: var(--laiton); color: var(--nuit); font-size: 15px; font-weight: 600; text-decoration: none;
}
.sauter:focus { top: 20px; color: var(--nuit); }

/* Rôles de texte (spec 01, § 6.2) */
.titre-accueil { font-size: 66px; line-height: 70px; font-weight: 500; letter-spacing: -0.035em; color: var(--papier); }
.titre-section { margin: 16px 0 0; font-size: 50px; line-height: 56px; font-weight: 500; letter-spacing: -0.035em; }
.titre-section--clair { color: var(--papier); }
.chapeau { margin: 16px 0 0; font-size: 19px; line-height: 30px; color: var(--encre-secondaire); }
.chapeau--clair { color: var(--argent); }
.etiquette {
  margin: 0; font-size: 11px; line-height: 16px; letter-spacing: 0.16em;
  text-transform: uppercase; font-weight: 600; color: var(--encre-secondaire);
}
.etiquette--laiton { color: var(--laiton-clair); }
.etiquette--argent2 { color: var(--argent-secondaire); }
.etiquette--nuit { color: var(--nuit); }
.texte-argent {
  background: var(--degrade-argent);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.texte-laiton {
  background: var(--degrade-laiton);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .texte-argent { background: none; color: #E6EAEF; }
  .texte-laiton { background: none; color: var(--laiton-clair); }
}

/* --------------------------------------------------------------------------
   (c) Composants
   -------------------------------------------------------------------------- */
/* Boutons */
.bouton {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 22px; border: 0; border-radius: var(--r-8);
  font-size: 15px; font-weight: 600; white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: background-color var(--duree-survol) var(--courbe-survol),
              border-color var(--duree-survol) var(--courbe-survol),
              color var(--duree-survol) var(--courbe-survol);
}
.bouton--laiton { height: 48px; background: var(--laiton); color: var(--nuit); }
.bouton--laiton:hover { background: var(--laiton-survol); color: var(--nuit); }
.bouton--laiton[disabled] { background: rgba(184, 149, 90, 0.35); color: rgba(15, 27, 43, 0.55); cursor: progress; }
.bouton--contour {
  gap: 8px; height: 48px; padding: 0 20px;
  border: 1px solid rgba(201, 209, 218, 0.3); background: transparent; color: var(--papier);
}
.bouton--contour:hover { border-color: var(--argent); color: var(--papier); }
.bouton--fantome {
  min-height: 44px; padding: 0 20px; border: 1px solid var(--laiton); background: transparent; color: var(--papier);
}
.bouton--fantome:hover { background: rgba(184, 149, 90, 0.14); color: var(--papier); }
.bouton--encre {
  height: 48px; border: 1px solid var(--nuit); background: transparent; color: var(--nuit);
}
.bouton--encre:hover { border-color: var(--nuit); background: var(--blanc); color: var(--nuit); }
.bouton--outil {
  gap: 8px; height: 40px; padding: 0 14px; border: 1px solid var(--argent);
  background: var(--blanc); color: var(--nuit); font-size: 14px;
}
.bouton--outil:hover { border-color: var(--nuit); background: var(--blanc); color: var(--nuit); }
.lien-fleche {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 600; text-decoration: underline; text-underline-offset: 4px;
}
.lien-fleche--clair { color: var(--papier); }

/* Champs */
.champ { display: flex; flex-direction: column; gap: 6px; }
.champ > label { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--papier); }
.champ-nuit {
  width: 100%; height: 46px; padding: 0 14px;
  border: 1px solid rgba(201, 209, 218, 0.5); border-radius: var(--r-8);
  background: rgba(10, 20, 32, 0.55); color: var(--papier); font-size: 16px;
  transition: border-color var(--duree-survol) var(--courbe-survol), box-shadow var(--duree-survol) var(--courbe-survol);
}
.champ-nuit:focus { outline: none; border-color: var(--laiton-clair); box-shadow: 0 0 0 3px rgba(211, 180, 126, 0.25); }
.champ-nuit[aria-invalid="true"] { border-color: var(--erreur-nuit-bord); }
.selecteur { position: relative; }
.selecteur select { padding: 0 36px 0 14px; font-size: 15px; appearance: none; -webkit-appearance: none; }
.selecteur select option { color: var(--nuit); background: var(--blanc); }
.selecteur svg { position: absolute; right: 14px; top: 17px; pointer-events: none; }
/* Message d’état d’un formulaire (succès ou erreur) : icône et texte, pas la couleur seule */
.etat {
  margin: 0; display: flex; align-items: flex-start; gap: 6px;
  font-size: 13px; line-height: 19px; color: var(--erreur-nuit); min-height: 20px;
}
.etat:empty::before { display: none; }
.etat::before {
  content: ''; flex: none; width: 14px; height: 14px; margin-top: 2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Ccircle cx='7' cy='7' r='5.6' stroke='%23F0B3A6' stroke-width='1.3'/%3E%3Cpath d='M7 4v3.6M7 9.6v.1' stroke='%23F0B3A6' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 14px 14px;
}
/* Bloc « état + mention » : les deux occupent la même case, l’état prend la place de la mention
   quand il s’affiche, sans décalage de mise en page. */
.sous-actions { display: grid; }
.sous-actions > * { grid-area: 1 / 1; }
.sous-actions.a-message > .mention { visibility: hidden; }
/* Message de validation (succès du formulaire cabinet) */
.reussite {
  display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px;
  border: 1px solid rgba(184, 149, 90, 0.5); border-radius: var(--r-10); background: rgba(184, 149, 90, 0.08);
  font-size: 14px; line-height: 21px; color: var(--papier);
}
.reussite[hidden] { display: none; }
.reussite svg { flex: none; margin-top: 5px; }
.reussite span { color: var(--argent); }
/* Groupe champ + bouton (capture d’adresse) */
.capture {
  display: flex; align-items: center; gap: 6px; padding: 5px;
  border: 1px solid rgba(201, 209, 218, 0.5); border-radius: var(--r-12); background: rgba(243, 245, 247, 0.04);
}
.capture__champ {
  width: 270px; height: 46px; padding: 0 12px; border: 0; border-radius: var(--r-8);
  background: transparent; color: var(--papier); font-size: 16px;
}
.capture__champ[aria-invalid="true"] { box-shadow: inset 0 0 0 1px var(--erreur-nuit-bord); }
.capture__bouton { height: 46px; padding: 0 20px; }

/* Cartes */
.carte-papier {
  border: 1px solid var(--filet); border-radius: var(--r-18); background: var(--blanc);
  box-shadow: var(--ombre-papier);
}
.carte-coffre {
  border: 1px solid rgba(201, 209, 218, 0.14); border-top-color: rgba(255, 255, 255, 0.18);
  border-radius: var(--r-18); background: var(--coffre); box-shadow: var(--ombre-coffre);
}

/* Badges et mentions */
.badge {
  display: inline-block; padding: 1px 8px; border-radius: var(--r-pilule);
  font-size: 11px; line-height: 16px; font-weight: 600; white-space: nowrap;
}
.badge--laiton-nuit { border: 1px solid rgba(211, 180, 126, 0.5); color: var(--laiton-clair); }
.badge--laiton-papier { border: 1px solid rgba(138, 109, 59, 0.55); background: rgba(184, 149, 90, 0.08); color: var(--laiton-encre); }
.badge--requis { border: 1px solid var(--laiton); color: var(--laiton-clair); }
.badge--argent { border: 1px solid rgba(201, 209, 218, 0.28); color: var(--argent); }
.badge--recommande {
  position: absolute; top: -13px; left: 28px; padding: 3px 12px; border-radius: var(--r-pilule);
  background: var(--laiton); color: var(--nuit); font-size: 12px; line-height: 18px; font-weight: 600;
}
.format {
  padding: 5px 12px; border: 1px solid rgba(201, 209, 218, 0.22); border-radius: var(--r-6);
  font-size: 13px; line-height: 20px; font-weight: 500; color: var(--papier);
}

/* Statuts : toujours un pictogramme et un mot */
.statut { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; }
.statut svg { flex: none; }
.statut--transit { color: var(--encre-secondaire); }
.pastille-statut {
  display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px 4px 9px;
  border: 1px solid rgba(201, 209, 218, 0.28); border-radius: var(--r-pilule);
  font-size: 12px; line-height: 18px; font-weight: 600; color: var(--argent); white-space: nowrap;
}
.pastille-statut--rapproche { border-color: rgba(184, 149, 90, 0.55); background: rgba(184, 149, 90, 0.10); color: var(--papier); }
.pastille-statut svg { flex: none; }

/* Cadre d’écart, sur nuit, avec son fléau en CSS */
.ecart-cadre {
  display: inline-flex; align-items: stretch; border: 1.5px solid var(--laiton);
  border-radius: var(--r-6); background: rgba(184, 149, 90, 0.06);
}
.ecart-cadre__etiquette {
  display: flex; align-items: center; padding: 0 14px; border-right: 1.5px solid var(--laiton);
  font-size: 11px; line-height: 16px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: var(--laiton-clair);
}
.ecart-cadre__valeur {
  display: grid; align-items: center; padding: 6px 14px 6px 16px;
  font-size: 28px; line-height: 38px; font-weight: 500; letter-spacing: -0.02em; color: var(--papier);
}
.ecart-cadre__valeur > span { grid-area: 1 / 1; white-space: nowrap; }
.ecart-cadre__attente { opacity: 0; color: var(--argent-secondaire); }
.ecart-cadre__fleau { position: relative; display: block; flex: none; width: 52px; margin-right: 12px; }
.fleau { position: absolute; left: 4px; top: 22px; width: 44px; height: 2px; transform-origin: 50% 50%; }
.fleau__barre { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--argent); }
.fleau__plateau { position: absolute; top: -7px; width: 7px; height: 7px; border-radius: 50%; background: var(--laiton-clair); }
.fleau__plateau--g { left: 3px; }
.fleau__plateau--d { right: 3px; }
.fleau__pivot {
  position: absolute; left: 22px; top: 24px; width: 0; height: 0;
  border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 7px solid var(--argent);
}

/* Balance, sur papier (168 × 78 px) */
.balance { position: relative; width: 168px; height: 78px; }
.balance__fleau { position: absolute; left: 9px; top: 18px; width: 150px; height: 3px; transform-origin: 50% 50%; }
.balance__barre {
  position: absolute; left: 0; right: 0; top: 0; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, #8C6D3B 0%, #CDAE73 50%, #8C6D3B 100%);
}
.balance__plateau {
  position: absolute; top: -12px; width: 12px; height: 12px; border-radius: 50%;
  background: linear-gradient(180deg, #E2C793 0%, #B8955A 60%, #8C6D3B 100%);
}
.balance__plateau--g { left: 6px; }
.balance__plateau--d { right: 6px; }
.balance__pivot {
  position: absolute; left: 78px; top: 21px; width: 0; height: 0;
  border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 10px solid var(--nuit);
}
.balance__fut { position: absolute; left: 83.5px; top: 31px; width: 1px; height: 36px; background: var(--nuit); }
.balance__socle { position: absolute; left: 54px; top: 67px; width: 60px; height: 1px; background: var(--nuit); }

/* Tableau de chiffres */
.tableau-cadre { overflow-x: auto; border: 1px solid var(--filet-moyen); border-radius: var(--r-10); }
.tableau {
  width: 100%; min-width: 1000px; border-collapse: separate; border-spacing: 0; table-layout: fixed;
  font-size: 13px; line-height: 19px;
}
.tableau th {
  position: sticky; top: 0; height: 40px; padding: 0 12px; text-align: left; background: var(--papier);
  border-bottom: 1px solid var(--filet); font-size: 12px; font-weight: 600; color: var(--encre-secondaire);
}
.tableau td { height: 44px; padding: 0 12px; border-bottom: 1px solid var(--filet-leger); }
.tableau th:first-child, .tableau td:first-child { padding: 0 14px; }
.tableau th:last-child, .tableau td:last-child { padding: 0 14px 0 12px; }
.tableau .droite { text-align: right; }
.tableau .zero { color: var(--encre-tertiaire); }
.tableau .net { font-weight: 600; }
.tableau .banque { color: var(--encre-secondaire); }
.tableau tbody tr:nth-child(odd) td { background: var(--ligne-alternee); }
.tableau tbody tr:last-child td { border-bottom-color: var(--filet); }
.tableau tbody tr:hover td { background: var(--ligne-survol); }
.tableau tfoot td { height: 46px; background: var(--papier); border-bottom: 0; font-weight: 600; }
.tableau tfoot .sous { font-weight: 400; color: var(--encre-secondaire); }

/* Filtres (pastilles) */
.filtres { display: flex; flex-wrap: wrap; gap: 6px; }
.filtre {
  display: inline-flex; align-items: center; height: 36px; padding: 0 12px;
  border: 1px solid var(--argent); border-radius: var(--r-pilule); background: var(--blanc);
  color: var(--nuit); font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: border-color var(--duree-survol) var(--courbe-survol), background-color var(--duree-survol) var(--courbe-survol);
}
.filtres .filtre:hover { border-color: var(--nuit); color: var(--nuit); }
.filtres .filtre--actif, .filtres .filtre--actif:hover { border-color: var(--nuit); background: var(--nuit); color: var(--blanc); }

/* Questions (accordéon) */
.faq-liste { border-top: 1px solid var(--argent); }
.faq-liste details { border-bottom: 1px solid var(--argent); }
.faq-liste summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  gap: 24px; min-height: 60px; padding: 12px 0;
}
.faq-liste summary::-webkit-details-marker { display: none; }
.faq__q { font-size: 17px; line-height: 25px; font-weight: 600; transition: color var(--duree-survol) var(--courbe-survol); }
.faq-liste summary:hover .faq__q { color: var(--encre-secondaire); }
.faq__cercle {
  flex: none; width: 28px; height: 28px; border: 1px solid var(--argent); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.faq__moins { display: none; }
.faq-liste details[open] .faq__moins { display: block; }
.faq-liste details[open] .faq__plus { display: none; }
.faq__reponse { padding: 0 52px 22px 0; font-size: 16px; line-height: 25px; color: var(--encre-secondaire); }

/* Points d’attention */
.avis { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--r-10); }
.avis--verifier { background: var(--fond-laiton); border: 1px solid var(--filet-laiton); }
.avis--info { background: var(--papier); border: 1px solid var(--filet-moyen); }
.avis__puce { flex: none; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; }
.avis--verifier .avis__puce { background: var(--laiton-fonce); }
.avis--info .avis__puce { border: 1.5px solid var(--encre-tertiaire); }
.avis p { font-size: 13px; line-height: 20px; }

/* Bandeau des liens de suivi (/c/…) : masqué par défaut, affiché avant le premier rendu
   par l’attribut posé dans le <head>, puis par la classe « visible » du script. */
.bandeau-cab {
  display: none; position: relative; z-index: 2;
  background: var(--pied-de-page); border-bottom: 1px solid rgba(201, 209, 218, 0.10);
  font-size: 14px; line-height: 21px; color: var(--argent);
}
html[data-suivi="cabinet"] .bandeau-cab, .bandeau-cab.visible { display: block; }
.bandeau-cab__contenu {
  max-width: var(--conteneur); margin: 0 auto; padding: 10px var(--marge);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 16px; text-align: center;
}
.bandeau-cab a { color: var(--papier); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }

/* Boîte de dialogue de qualification */
.boite {
  width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0;
  border: 1px solid rgba(201, 209, 218, 0.14); border-top-color: rgba(255, 255, 255, 0.2); border-radius: var(--r-18);
  background: var(--coffre-formulaire); color: var(--argent); box-shadow: var(--ombre-coffre);
}
.boite::backdrop { background: rgba(8, 17, 28, 0.72); }
.boite__corps { padding: 32px 28px 26px; }
.boite__titre { font-size: 22px; line-height: 30px; font-weight: 600; letter-spacing: -0.015em; color: var(--papier); padding-right: 40px; }
.boite__intro { margin: 10px 0 22px; font-size: 14px; line-height: 21px; color: var(--argent); }
.boite__fermer {
  position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(201, 209, 218, 0.3); background: transparent; color: var(--papier);
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.boite__fermer:hover { border-color: var(--argent); }
.boite fieldset { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; }
.boite legend { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--papier); margin-bottom: 10px; padding: 0; }
.puces { display: flex; flex-wrap: wrap; gap: 8px; }
.puce { position: relative; display: inline-flex; }
.puce input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.puce span {
  display: inline-flex; align-items: center; height: 40px; padding: 0 14px; border-radius: var(--r-pilule);
  border: 1px solid rgba(201, 209, 218, 0.3); font-size: 14px; font-weight: 500; color: var(--papier);
  transition: background-color var(--duree-survol) var(--courbe-survol), border-color var(--duree-survol) var(--courbe-survol), color var(--duree-survol) var(--courbe-survol);
}
.puce:hover span { border-color: var(--argent); }
.puce input:checked + span { background: var(--papier); border-color: var(--papier); color: var(--nuit); }
.puce input:focus-visible + span { outline: 2px solid var(--laiton-clair); outline-offset: 3px; }
.boite .champ { margin-bottom: 16px; }
.boite__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.boite__actions .etat { width: 100%; margin-bottom: 4px; }
.bouton--laiton.boite__envoyer { height: 44px; }
.bouton--contour.boite__passer { height: 44px; padding: 0 14px; font-size: 14px; }
.partage { display: grid; gap: 10px; margin-top: 4px; }
.partage .bouton { height: 48px; }

/* --------------------------------------------------------------------------
   (d) Mise en page et sections de l’accueil
   -------------------------------------------------------------------------- */
.conteneur { max-width: var(--conteneur); margin: 0 auto; padding: 88px var(--marge); }
.section--papier { background: var(--papier); color: var(--nuit); }
main { position: relative; z-index: 1; }

/* En-tête, bandeau et héros partagent un même fond : halo argenté et trame de points */
.haut {
  position: relative; overflow: hidden; overflow: clip; /* clip : découpe sans créer de zone défilable */
  background: radial-gradient(ellipse 60% 55% at 50% 0%, rgba(201, 209, 218, 0.14) 0%, rgba(201, 209, 218, 0.04) 50%, rgba(15, 27, 43, 0) 78%) center top / 100% 1120px no-repeat, var(--nuit);
}
.haut__trame {
  position: absolute; left: 0; right: 0; top: 0; height: 1000px; z-index: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(201, 209, 218, 0.13) 1px, transparent 1.4px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse 70% 62% at 50% 30%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 62% at 50% 30%, #000 20%, transparent 75%);
}

/* En-tête */
.entete { position: relative; z-index: 5; border-bottom: 1px solid rgba(201, 209, 218, 0.10); }
.entete__contenu {
  max-width: var(--conteneur); margin: 0 auto; padding: 0 var(--marge); min-height: 80px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.entete__logo { display: flex; align-items: center; }
.entete__logo img { height: 26px; width: auto; }
.entete__menu { display: contents; }
.nav-principale { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }
.nav-principale__lien { font-size: 15px; color: var(--argent); text-decoration: none; }
.nav-principale__lien:hover { color: var(--blanc); }
.entete__action { font-size: 15px; }
.menu-bouton {
  display: none; width: 44px; height: 44px; align-items: center; justify-content: center; padding: 0;
  border: 1px solid rgba(201, 209, 218, 0.3); border-radius: var(--r-8); background: transparent;
}
.menu-bouton__fermer { display: none; }
.menu-bouton[aria-expanded="true"] .menu-bouton__ouvrir { display: none; }
.menu-bouton[aria-expanded="true"] .menu-bouton__fermer { display: block; }

/* Héros */
.heros { position: relative; max-width: var(--conteneur); margin: 0 auto; padding: 64px var(--marge) 88px; }
.heros__texte { max-width: 920px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; }
.heros__pastille {
  display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 12px;
  border: 1px solid rgba(201, 209, 218, 0.22); border-radius: var(--r-pilule); background: rgba(243, 245, 247, 0.04);
  font-size: 13px; line-height: 20px; font-weight: 500; color: var(--papier);
}
.heros__point { width: 6px; height: 6px; border-radius: 50%; background: var(--laiton); flex: none; }
.heros__titre { margin: 28px 0 0; }
.heros__chapeau { margin: 22px 0 0; max-width: 680px; color: var(--argent); }
.heros__actions { margin-top: 34px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.heros__decodeur { height: 58px; border-color: rgba(201, 209, 218, 0.26); border-radius: var(--r-12); }
.heros__sous { margin: 16px auto 0; max-width: 920px; text-align: center; justify-items: center; }
.heros__mention { font-size: 13px; line-height: 20px; color: var(--argent-secondaire); }
.heros__sous .etat { justify-content: center; }

/* Illustration du héros : le virement qui se décompose */
.virement-figure { position: relative; max-width: 1080px; margin: 88px auto 0; }
.virement { position: relative; text-align: left; }
.virement__cote { position: absolute; top: -54px; height: 24px; }
.virement__cote--gauche { left: 0; width: 55.6%; }
.virement__cote--droite { right: 0; width: 44.4%; }
.virement__cote-trait { position: absolute; top: 4px; width: 1px; height: 16px; background: var(--argent-secondaire); }
.virement__cote-trait--g { left: 0; }
.virement__cote-trait--d { right: 0; }
.virement__cote-ligne { position: absolute; left: 0; right: 0; top: 12px; height: 1px; background: rgba(149, 158, 169, 0.7); }
.virement__cote-texte {
  position: absolute; left: 50%; top: 2px; transform: translateX(-50%); padding: 0 12px; background: var(--nuit);
  font-size: 11px; line-height: 20px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: var(--argent); white-space: nowrap;
}
.virement__croix { position: absolute; }
.virement__croix--hg { left: -24px; top: -24px; }
.virement__croix--hd { right: -24px; top: -24px; }
.virement__croix--bg { left: -24px; bottom: 26px; }
.virement__croix--bd { right: -24px; bottom: 26px; }
.virement__ligne {
  display: grid; grid-template-columns: 120px minmax(0, 1fr) auto auto; align-items: center; gap: 0 24px;
  min-height: 68px; padding: 0 22px 0 28px;
  border: 1px solid rgba(201, 209, 218, 0.16); border-top-color: rgba(255, 255, 255, 0.22); border-radius: var(--r-14);
  background: linear-gradient(180deg, #1B2B43 0%, #15243A 100%); box-shadow: 0 24px 48px -28px rgba(0, 0, 0, 0.7);
}
.virement__date { font-size: 14px; line-height: 20px; color: var(--argent-secondaire); }
.virement__libelle { font-size: 15px; line-height: 22px; font-weight: 600; letter-spacing: 0.05em; color: var(--papier); }
.virement__montant { font-size: 26px; line-height: 32px; font-weight: 500; letter-spacing: -0.02em; white-space: nowrap; }
.virement__statuts { display: grid; justify-items: end; }
.virement__statuts > span { grid-area: 1 / 1; }
.pastille-statut--justifier { opacity: 0; }
/* Le tiroir se révèle dans un cadre qui le découpe (marges négatives pour laisser passer l’ombre) */
.tiroir-clip { overflow: hidden; margin: 10px -80px -120px; padding: 0 80px 120px; }
.tiroir {
  display: flex; flex-wrap: wrap; border: 1px solid rgba(201, 209, 218, 0.12); border-radius: var(--r-14);
  background: linear-gradient(180deg, #121F32 0%, #0D1828 100%); box-shadow: 0 48px 96px -40px rgba(0, 0, 0, 0.75); overflow: hidden;
}
.tiroir__decomposition { flex: 1.3 1 420px; min-width: 0; padding: 22px 28px 22px; }
.tiroir__rapprochement { flex: 1 1 340px; min-width: 0; padding: 22px 28px 24px; border-left: 1px solid rgba(201, 209, 218, 0.10); background: rgba(10, 20, 32, 0.45); }
.tiroir .etiquette { margin: 0 0 4px; }
.tiroir__rangee {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 50px;
  border-bottom: 1px solid rgba(201, 209, 218, 0.09); font-size: 15px;
}
.tiroir__rangee--sans-filet { border-bottom: 0; }
.tiroir__montant { color: var(--papier); }
.tiroir__precision { font-size: 13px; color: var(--argent-secondaire); }
.tiroir__total { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; border-top: 1px solid rgba(201, 209, 218, 0.4); }
.tiroir__total .etiquette { margin: 0; }
.tiroir__total-montant { font-size: 26px; line-height: 32px; font-weight: 500; letter-spacing: -0.02em; }
.tiroir .ecart-cadre { margin-top: 14px; }
.tiroir__ecritures-tete { margin: 20px 0 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.tiroir__ecritures-tete .etiquette { margin: 0; }
.tiroir__formats { display: flex; flex-wrap: wrap; gap: 8px; }
.virement__legende { margin: 18px 0 0; text-align: right; font-size: 13px; line-height: 20px; color: var(--argent-secondaire); }

/* Comment ça marche : la cascade */
.fonctionnement__tete { max-width: 780px; }
.cascade { margin-top: 48px; padding: 30px 40px 26px; border-radius: var(--r-18); box-shadow: 0 1px 2px rgba(15, 27, 43, 0.05), 0 40px 80px -56px rgba(15, 27, 43, 0.4); }
.cascade__tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; }
.cascade__zoom { font-size: 13px; line-height: 20px; color: var(--encre-tertiaire); }
.cascade__sous { margin: 2px 0 0; font-size: 12px; line-height: 18px; letter-spacing: 0.04em; color: var(--encre-tertiaire); }
.cascade__corps { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 28px 40px; align-items: stretch; }
.cascade__graphique { flex: 1 1 780px; min-width: 0; overflow-x: auto; }
.cascade__interieur { width: 780px; }
.cascade__vue { display: grid; grid-template-columns: 180px 500px 100px; align-items: center; height: 28px; font-size: 12px; line-height: 16px; color: var(--encre-tertiaire); }
.cascade__vue-piste { position: relative; display: block; height: 28px; }
.cascade__vue-fond { position: absolute; left: 0; right: 0; top: 11px; height: 6px; border-radius: 3px; background: var(--filet-grille); }
.cascade__vue-barre { position: absolute; left: 0; top: 11px; width: 96.53%; height: 6px; border-radius: 3px; background: var(--nuit); }
.cascade__vue-zoom { position: absolute; left: 85.71%; width: 11.43%; top: 3px; height: 22px; border: 1.5px solid var(--laiton-fonce); border-radius: 3px; }
.cascade__vue .droite { text-align: right; }
.cascade__pont { display: block; }
.cascade__zone { position: relative; }
.cascade__grille {
  position: absolute; left: 180px; top: 0; width: 501px; height: 288px;
  background-image: repeating-linear-gradient(90deg, #C9D1DA 0px, #C9D1DA 1px, transparent 1px, transparent 125px),
                    repeating-linear-gradient(90deg, #E9EDF1 0px, #E9EDF1 1px, transparent 1px, transparent 31.25px);
  border-top: 1px solid var(--argent); border-bottom: 1px solid var(--argent);
}
.cascade__rangee { position: relative; display: grid; grid-template-columns: 180px 500px 100px; align-items: center; height: 48px; font-size: 15px; }
.cascade__rangee--gras { font-weight: 600; }
.cascade__piste { position: relative; display: block; height: 48px; }
.cascade__valeur { text-align: right; }
.cascade__valeur--gras { font-weight: 600; }
.barre { position: absolute; top: 14px; height: 20px; }
.barre--ventes { left: 0; width: 473.1px; background: var(--nuit); transform-origin: 0 50%; }
.barre--retenue { background: repeating-linear-gradient(135deg, #7F8A97 0px, #7F8A97 1px, #F3F5F7 1px, #F3F5F7 5px); box-shadow: inset 0 0 0 1px var(--filet-champ); transform-origin: 100% 50%; }
.barre--commissions { left: 380.2px; width: 92.9px; }
.barre--remboursements { left: 196.2px; width: 184px; }
.barre--litige { left: 151.2px; width: 45px; }
.barre--net { left: 0; width: 151.2px; background: var(--blanc); box-shadow: inset 0 0 0 1.5px var(--nuit); transform-origin: 0 50%; }
.barre--releve { left: 0; width: 151.2px; background: var(--argent); transform-origin: 0 50%; }
.axe-coupe { position: absolute; left: 12px; top: -2px; width: 2px; height: 24px; background: var(--blanc); transform: skewX(-22deg); }
.axe-coupe--2 { left: 18px; }
.barre--net .axe-coupe { background: var(--nuit); }
.connecteur { position: absolute; height: 28px; border-left: 1px dashed var(--encre-tertiaire); }
.connecteur--1 { left: 653.1px; top: 34px; }
.connecteur--2 { left: 560.2px; top: 82px; }
.connecteur--3 { left: 376.2px; top: 130px; }
.connecteur--4 { left: 331.2px; top: 178px; }
.repere { position: absolute; left: 330.2px; top: 150px; height: 140px; border-left: 2px dashed var(--laiton-fonce); transform-origin: 50% 0; }
.cascade__axe { position: relative; height: 30px; margin-left: 180px; width: 500px; font-size: 12px; line-height: 16px; color: var(--encre-tertiaire); }
.cascade__axe span { position: absolute; top: 10px; white-space: nowrap; }
.cascade__axe .a0 { left: 0; }
.cascade__axe .a1 { left: 125px; transform: translateX(-50%); }
.cascade__axe .a2 { left: 250px; transform: translateX(-50%); }
.cascade__axe .a3 { left: 375px; transform: translateX(-50%); }
.cascade__axe .a4 { right: 0; }
.ecart-col { flex: 1 1 200px; min-width: 200px; padding-left: 32px; border-left: 1px solid var(--filet-moyen); display: flex; flex-direction: column; }
.ecart-col .etiquette { margin: 6px 0 0; }
.ecart-valeurs { display: grid; margin-top: 8px; font-size: 36px; line-height: 42px; font-weight: 500; letter-spacing: -0.03em; }
.ecart-valeurs > span { grid-area: 1 / 1; white-space: nowrap; color: var(--nuit); }
.ecart-valeurs .ecart-final { color: var(--laiton-fonce); }
.ecart-valeurs .ecart-attente { opacity: 0; color: var(--encre-tertiaire); }
.ecart-valeurs .ecart-etape { opacity: 0; }
.ecart-col .balance { margin-top: 22px; }
.ecart-ok { margin: 16px 0 0; display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 20px; font-weight: 600; }
.ecart-ok svg { flex: none; }
.ecart-sous { margin: 6px 0 0; font-size: 13px; line-height: 19px; color: var(--encre-tertiaire); }
.cascade__pied { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--filet-leger); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.cascade__legende { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; font-size: 13px; line-height: 20px; color: var(--encre-secondaire); }
.cascade__legende > span { display: inline-flex; align-items: center; gap: 8px; }
.cascade__legende i { width: 16px; height: 10px; }
.cascade__legende .l-ventes { background: var(--nuit); }
.cascade__legende .l-retenues { background: repeating-linear-gradient(135deg, #7F8A97 0px, #7F8A97 1px, #F3F5F7 1px, #F3F5F7 4px); box-shadow: inset 0 0 0 1px var(--filet-champ); }
.cascade__legende .l-net { box-shadow: inset 0 0 0 1.5px var(--nuit); }
.cascade__legende .l-releve { background: var(--argent); }
.cascade__legende .l-note { color: var(--encre-tertiaire); }
.cascade__ecritures { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 14px; line-height: 21px; color: var(--encre-secondaire); }
.cascade__ecritures strong { color: var(--nuit); }
.etapes { margin: 36px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 24px; }
.etape { padding-top: 16px; border-top: 2px solid var(--nuit); display: flex; flex-direction: column; gap: 6px; }
.etape__num { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--encre-tertiaire); }
.etape__corps { display: flex; flex-direction: column; gap: 6px; }
.etape__titre { font-size: 17px; line-height: 24px; font-weight: 600; }
.etape__texte { font-size: 15px; line-height: 23px; color: var(--encre-secondaire); }
.etape__badge { align-self: flex-start; }

/* Le décodeur gratuit */
.decodeur { background: var(--nuit-profonde); border-top: 1px solid rgba(201, 209, 218, 0.08); }
.decodeur__conteneur { padding-bottom: 160px; }
.decodeur__tete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 48px; }
.decodeur__texte { flex: 1 1 560px; max-width: 680px; }
.encart-cadenas {
  flex: 0 1 360px; display: flex; align-items: flex-start; gap: 12px; padding: 14px 18px;
  border: 1px solid rgba(184, 149, 90, 0.45); border-radius: var(--r-10); background: rgba(184, 149, 90, 0.06);
  font-size: 15px; line-height: 22px; color: var(--papier);
}
.encart-cadenas svg { flex: none; margin-top: 3px; }
.depot-carte { margin-top: 44px; padding: 20px; }
.fichiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 12px; }
.fichier { padding: 14px 16px 16px; border: 1px solid rgba(201, 209, 218, 0.12); border-radius: var(--r-10); background: rgba(10, 20, 32, 0.5); }
.fichier__tete { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fichier__num { font-size: 12px; line-height: 18px; font-weight: 600; color: var(--laiton-clair); }
.fichier__titre { margin: 10px 0 0; font-size: 15px; line-height: 21px; font-weight: 600; color: var(--papier); }
.fichier__nom { margin: 4px 0 0; font-size: 12px; line-height: 18px; color: var(--argent-secondaire); }
.depot {
  margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px;
  padding: 22px 24px; border: 1.5px dashed rgba(201, 209, 218, 0.3); border-radius: var(--r-10);
  background: var(--nuit-profonde); box-shadow: inset 0 2px 14px rgba(0, 0, 0, 0.45);
  transition: border-color var(--duree-survol) var(--courbe-survol), background-color var(--duree-survol) var(--courbe-survol);
}
.depot.est-survole { border-color: var(--laiton-clair); background: #0D1828; }
.depot__texte { display: flex; align-items: center; gap: 16px; }
.depot__texte svg { flex: none; }
.depot__titre { font-size: 17px; line-height: 24px; font-weight: 600; color: var(--papier); }
.depot__sous { margin: 2px 0 0; font-size: 14px; line-height: 21px; color: var(--argent); }
.depot__actions { display: flex; flex-direction: row-reverse; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.depot__boutons { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.depot__aide { font-size: 14px; line-height: 21px; color: var(--argent); text-underline-offset: 4px; }
.depot__bouton { height: 44px; padding: 0 18px; }
.depot .bouton--contour { border-color: rgba(201, 209, 218, 0.35); }

/* Résultat de l’exemple : la carte remonte de 104 px (72 px sur mobile) sur le fond sombre du décodeur.
   flow-root empêche la marge négative de la carte de traverser la section et d’entraîner son fond. */
.resultat { display: flow-root; }
.resultat .conteneur { padding-top: 0; }
.resultat__carte { position: relative; margin-top: -104px; padding: 28px 32px 26px; }
.resultat__tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.resultat__sous { margin: 4px 0 0; font-size: 13px; line-height: 20px; color: var(--encre-tertiaire); }
.synthese { margin-top: 18px; display: flex; flex-wrap: wrap; border: 1px solid var(--filet-moyen); border-radius: var(--r-10); overflow: hidden; }
.tuile { flex: 1 1 170px; padding: 12px 18px 14px; }
.tuile--etroite { flex-basis: 150px; }
.tuile__libelle { font-size: 12px; line-height: 18px; color: var(--encre-secondaire); }
.tuile__montant { margin: 2px 0 0; font-size: 22px; line-height: 28px; font-weight: 500; letter-spacing: -0.02em; }
.tuile__sous { font-size: 12px; line-height: 18px; color: var(--encre-tertiaire); }
.tuile--net { background: var(--fond-laiton); }
.tuile--net .tuile__libelle { font-weight: 600; color: var(--laiton-encre); }
.tuile--net .tuile__montant { font-weight: 600; }
.operateur {
  flex: none; width: 34px; display: flex; align-items: center; justify-content: center; background: var(--papier);
  border-left: 1px solid var(--filet-moyen); border-right: 1px solid var(--filet-moyen); font-size: 18px; color: var(--encre-secondaire);
}
.resultat__outils { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.recherche {
  position: relative; flex: 0 1 320px; display: flex; align-items: center; height: 40px; padding: 0 12px 0 36px;
  border: 1px solid var(--filet-champ); border-radius: var(--r-8); background: var(--blanc);
  color: var(--encre-tertiaire); font-size: 14px; text-decoration: none;
  transition: border-color var(--duree-survol) var(--courbe-survol);
}
.recherche:hover { border-color: var(--nuit); color: var(--encre-tertiaire); }
.recherche svg { position: absolute; left: 12px; top: 12px; }
.resultat .tableau-cadre { margin-top: 14px; }
.resultat__suite { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; font-size: 13px; line-height: 20px; color: var(--encre-secondaire); }
.resultat__suite .lien-fleche { color: var(--nuit); }
.attention { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--filet-leger); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 12px 20px; }
.attention__titre { font-size: 15px; line-height: 22px; font-weight: 600; }
.attention__sous { margin: 2px 0 0; font-size: 13px; line-height: 20px; color: var(--encre-secondaire); }
/* Version mobile du résultat (synthèse en lignes, liste de fiches) */
.synthese-mobile { margin-top: 14px; border: 1px solid var(--filet-moyen); border-radius: var(--r-10); overflow: hidden; }
.synthese-mobile__ligne { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; min-height: 44px; padding: 0 12px 0 0; border-bottom: 1px solid var(--filet-moyen); }
.synthese-mobile__ligne--haute { min-height: 50px; }
.synthese-mobile__ligne--net { min-height: 50px; background: var(--fond-laiton); border-bottom: 0; }
.synthese-mobile__op { align-self: stretch; display: flex; align-items: center; justify-content: center; background: var(--papier); border-right: 1px solid var(--filet-moyen); font-size: 15px; color: var(--encre-secondaire); }
.synthese-mobile__libelle { padding-left: 10px; font-size: 13px; line-height: 19px; color: var(--encre-secondaire); }
.synthese-mobile__montant { font-size: 16px; line-height: 22px; font-weight: 500; }
.synthese-mobile__ligne--net .synthese-mobile__libelle { font-weight: 600; color: var(--laiton-encre); }
.synthese-mobile__ligne--net .synthese-mobile__montant { font-size: 18px; line-height: 24px; font-weight: 600; }
.fiches { margin: 12px 0 0; border-top: 1px solid var(--filet); }
.fiche { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 11px 2px; border-bottom: 1px solid var(--filet-leger); }
.fiche:last-child { border-bottom-color: var(--filet); }
.fiche__date, .fiche__montant { font-size: 14px; line-height: 21px; font-weight: 600; }
.fiche__montant { text-align: right; }
.fiche__statut { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; line-height: 18px; color: var(--encre-secondaire); }
.fiche__statut svg { flex: none; }
.fiche__ecart { font-size: 12px; line-height: 18px; color: var(--encre-secondaire); text-align: right; }
.fiches-total { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 12px 2px 4px; font-weight: 600; }
.fiches-total span:first-child { font-size: 14px; line-height: 21px; }
.fiches-total span:last-child { font-size: 15px; line-height: 21px; }

/* Experts-comptables */
.cabinets { position: relative; overflow: hidden; background: radial-gradient(ellipse 50% 70% at 85% 10%, rgba(201, 209, 218, 0.10) 0%, rgba(15, 27, 43, 0) 70%), var(--nuit); }
.cabinets__conteneur { position: relative; display: flex; flex-wrap: wrap; gap: 48px 72px; align-items: flex-start; }
.cabinets__texte { flex: 1 1 480px; min-width: 0; }
.cabinets__chapeau { margin-top: 18px; max-width: 560px; }
.promesses { margin: 28px 0 0; max-width: 560px; }
.promesses li { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: start; padding: 12px 0; border-top: 1px solid rgba(201, 209, 218, 0.12); }
.promesses li:last-child { border-bottom: 1px solid rgba(201, 209, 218, 0.12); }
.promesses svg { margin-top: 5px; }
.promesses span { font-size: 16px; line-height: 24px; color: var(--papier); }
.cabinets__invitation { margin: 24px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: 15px; line-height: 23px; color: var(--argent); }
.citation { margin: 32px 0 0; max-width: 560px; padding-left: 20px; border-left: 1px solid rgba(184, 149, 90, 0.6); }
.citation blockquote { font-size: 17px; line-height: 27px; color: var(--papier); }
.citation figcaption { margin-top: 10px; font-size: 14px; line-height: 20px; color: var(--argent-secondaire); }
.carte-pilote { flex: 0 1 460px; min-width: 0; padding: 30px 30px 28px; border-top-color: rgba(255, 255, 255, 0.2); background: var(--coffre-formulaire); }
.carte-pilote__titre { font-size: 20px; line-height: 28px; font-weight: 600; color: var(--papier); }
.carte-pilote__sous { margin: 6px 0 0; font-size: 14px; line-height: 21px; color: var(--argent); }
.carte-pilote__champs { margin-top: 22px; display: flex; flex-direction: column; gap: 16px; }
.carte-pilote__duo { display: flex; flex-wrap: wrap; gap: 16px; }
.carte-pilote__duo .champ { flex: 1 1 160px; }
.carte-pilote__bouton { margin-top: 4px; width: 100%; height: 50px; font-size: 16px; }
.carte-pilote__note { font-size: 13px; line-height: 20px; color: var(--argent-secondaire); }
.carte-pilote__lien {
  margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(201, 209, 218, 0.12);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: 14px; line-height: 21px; font-weight: 600; color: var(--papier); text-decoration: none;
}

/* Tarifs */
.tarifs .conteneur { padding-bottom: 80px; }
.tarifs__tete { max-width: 920px; margin: 0 auto; text-align: center; }
.tarifs__calendrier {
  margin: 14px 0 0; display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px;
  border: 1px solid rgba(138, 109, 59, 0.55); border-radius: var(--r-pilule); background: rgba(184, 149, 90, 0.08);
  font-size: 12px; line-height: 18px; font-weight: 600; color: var(--laiton-encre);
}
.tarifs__calendrier svg { display: none; }
.formules { margin-top: 48px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 20px; align-items: stretch; }
.formule { display: flex; flex-direction: column; padding: 30px 28px 28px; border: 1px solid var(--filet); border-radius: var(--r-18); background: var(--blanc); }
.formule--avant { position: relative; border-color: var(--nuit); background: var(--mise-en-avant); color: var(--argent); box-shadow: var(--ombre-avant); }
.formule__nom { font-size: 20px; line-height: 28px; font-weight: 600; }
.formule--avant .formule__nom { color: var(--papier); }
.formule__volume { margin: 4px 0 0; font-size: 14px; line-height: 21px; color: var(--encre-secondaire); }
.formule--avant .formule__volume { color: var(--argent); }
.formule__prix { margin: 26px 0 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.formule__montant { font-size: 48px; line-height: 52px; font-weight: 500; letter-spacing: -0.035em; }
.formule__periode { font-size: 14px; color: var(--encre-secondaire); }
.formule--avant .formule__periode { color: var(--argent); }
.formule__prix s { font-size: 14px; color: var(--encre-tertiaire); }
.formule--avant .formule__prix s { color: var(--argent-secondaire); }
.formule__mention { margin: 6px 0 0; font-size: 13px; line-height: 20px; font-weight: 600; color: var(--laiton-encre); }
.formule--avant .formule__mention { color: var(--laiton-clair); }
.formule .bouton { margin-top: 26px; display: flex; height: 48px; }
.inclus { margin-top: 20px; padding: 26px 28px; border: 1px solid var(--filet); border-radius: var(--r-18); background: var(--blanc); }
.inclus__titre { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 15px; line-height: 22px; font-weight: 600; }
.inclus ul { margin: 16px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 12px 28px; font-size: 15px; line-height: 22px; }
.inclus li { display: flex; align-items: flex-start; gap: 10px; }
.inclus svg { flex: none; margin-top: 3px; }
.tarifs__note { margin: 18px 0 0; text-align: center; font-size: 14px; line-height: 21px; color: var(--encre-secondaire); }

/* Échéance 2027 */
.echeance { position: relative; overflow: hidden; background: radial-gradient(ellipse 55% 80% at 12% 0%, rgba(184, 149, 90, 0.10) 0%, rgba(15, 27, 43, 0) 70%), var(--nuit); }
.echeance .conteneur { padding-bottom: 80px; }
.echeance__tete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 32px 64px; }
.echeance__date-col { flex: 1 1 520px; }
.echeance__date { margin: 16px 0 0; font-size: 84px; line-height: 86px; font-weight: 500; letter-spacing: -0.045em; }
.echeance__date sup { font-size: 0.42em; vertical-align: 0.95em; letter-spacing: 0; line-height: inherit; }
.echeance__texte-col { flex: 1 1 440px; max-width: 500px; }
.echeance__texte { font-size: 19px; line-height: 30px; color: var(--argent); }
.echeance__bouton { margin-top: 24px; gap: 8px; height: 48px; min-height: 0; }
.frise { margin-top: 48px; overflow-x: auto; }
.frise__interieur { position: relative; width: 1120px; height: 132px; }
.frise__axe { position: absolute; left: 40px; top: 58px; width: 1040px; height: 1px; background: rgba(201, 209, 218, 0.4); }
.frise__graduations { position: absolute; left: 40px; top: 52px; width: 1041px; height: 13px; background-image: repeating-linear-gradient(90deg, rgba(201, 209, 218, 0.55) 0px, rgba(201, 209, 218, 0.55) 1px, transparent 1px, transparent 86.667px); }
.frise__mois { position: absolute; left: 40px; top: 70px; width: 1040px; height: 20px; font-size: 11px; line-height: 16px; color: var(--argent-secondaire); }
.frise__mois span { position: absolute; white-space: nowrap; }
.frise__jalon { position: absolute; top: 0; }
.frise__jalon--1 { left: 40px; width: 230px; }
.frise__jalon--2 { left: 527.9px; width: 264px; }
.frise__jalon--3 { left: 993.3px; width: 0; }
.frise__barre { position: absolute; left: 0; top: 46px; height: 6px; border-radius: 3px; }
.frise__jalon--1 .frise__barre { width: 230px; background: rgba(201, 209, 218, 0.45); }
.frise__jalon--2 .frise__barre { width: 263.5px; background: var(--argent); }
.frise__titre { font-size: 12px; line-height: 18px; font-weight: 600; color: var(--papier); }
.frise__texte { font-size: 12px; line-height: 18px; color: var(--argent); }
.frise__point {
  position: absolute; left: -7px; top: 42px; width: 14px; height: 14px; border-radius: 50%;
  background: linear-gradient(180deg, #E2C793 0%, #B8955A 60%, #8C6D3B 100%); box-shadow: 0 0 0 4px rgba(184, 149, 90, 0.18);
}
.frise__jalon--3 .frise__titre { position: absolute; right: -40px; top: 96px; width: 220px; text-align: right; color: var(--laiton-clair); }
.frise__jalon--3 .frise__titre sup { font-size: 0.75em; }
.frise__jalon--3 .frise__texte { display: block; font-weight: 400; color: var(--argent); }
.frise-mobile { position: relative; margin-top: 40px; height: 346px; }
.frise-mobile__mois { position: absolute; left: 0; top: 0; width: 66px; height: 346px; font-size: 11px; line-height: 16px; color: var(--argent-secondaire); text-align: right; }
.frise-mobile__mois span { position: absolute; right: 0; white-space: nowrap; }
.frise-mobile__axe { position: absolute; left: 80px; top: 8px; width: 1px; height: 308px; background: rgba(201, 209, 218, 0.4); }
.frise-mobile__graduations { position: absolute; left: 76px; top: 8px; width: 9px; height: 309px; background-image: repeating-linear-gradient(180deg, rgba(201, 209, 218, 0.55) 0px, rgba(201, 209, 218, 0.55) 1px, transparent 1px, transparent 28px); }
.frise-mobile__barre { position: absolute; left: 77px; width: 7px; border-radius: 4px; }
.frise-mobile__barre--1 { top: 8px; height: 74px; background: rgba(201, 209, 218, 0.45); }
.frise-mobile__barre--2 { top: 166px; height: 85px; background: var(--argent); }
.frise-mobile__point {
  position: absolute; left: 73.5px; top: 309px; width: 14px; height: 14px; border-radius: 50%;
  background: linear-gradient(180deg, #E2C793 0%, #B8955A 60%, #8C6D3B 100%); box-shadow: 0 0 0 4px rgba(184, 149, 90, 0.18);
}
.frise-mobile__jalon { position: absolute; left: 104px; right: 0; }
.frise-mobile__jalon p { font-size: 13px; line-height: 19px; }
.frise-mobile__jalon p:first-child { font-weight: 600; color: var(--papier); }
.frise-mobile__jalon p:last-child { color: var(--argent); }
.frise-mobile__jalon--3 p:first-child { color: var(--laiton-clair); }
.frise-mobile__jalon--3 sup { font-size: 0.75em; }

/* Vos questions */
.faq__conteneur { display: grid; grid-template-columns: 320px minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: 'intro liste' 'contact liste'; gap: 0 72px; align-items: start; }
.faq__intro { grid-area: intro; max-width: 380px; }
.faq__contact { grid-area: contact; margin: 18px 0 0; max-width: 380px; font-size: 16px; line-height: 25px; color: var(--encre-secondaire); }
.faq__contact a { font-weight: 600; text-underline-offset: 4px; }
.faq .faq-liste { grid-area: liste; min-width: 0; }

/* Réservez votre accès anticipé */
.acces { position: relative; overflow: hidden; background: radial-gradient(ellipse 55% 75% at 50% 0%, rgba(201, 209, 218, 0.14) 0%, rgba(201, 209, 218, 0.04) 50%, rgba(15, 27, 43, 0) 78%), var(--nuit); }
.acces__conteneur { max-width: 760px; margin: 0 auto; padding: 96px var(--marge) 96px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.acces__symbole { width: 64px; height: 56px; }
.acces__titre { margin: 28px 0 0; }
.acces__chapeau { margin: 16px 0 0; max-width: 560px; color: var(--argent); }
.acces__capture { margin-top: 32px; width: 100%; max-width: 540px; }
.acces__capture .capture__champ { flex: 1 1 auto; min-width: 0; width: auto; height: 48px; padding: 0 14px; }
.acces__capture .capture__bouton { flex: none; height: 48px; padding: 0 22px; }
.acces__sous { margin-top: 16px; width: 100%; justify-items: center; }
.acces__sous .etat { justify-content: center; }
.acces__mention { font-size: 13px; line-height: 20px; color: var(--argent-secondaire); }

/* Pied de page */
.pied { margin-top: auto; background: var(--pied-de-page); border-top: 1px solid rgba(201, 209, 218, 0.10); }
.pied__contenu { max-width: var(--conteneur); margin: 0 auto; padding: 64px var(--marge) 36px; }
.pied__haut { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 40px 64px; }
.pied__marque { flex: 1 1 280px; max-width: 360px; display: flex; flex-direction: column; gap: 14px; }
.pied__marque img { height: 26px; width: auto; align-self: flex-start; }
.pied__devise { font-size: 15px; line-height: 23px; color: var(--argent); }
.pied__nav { flex: 2 1 520px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: 28px 32px; }
.pied__nav .etiquette { margin: 0 0 12px; color: var(--argent-secondaire); }
.pied__nav ul { display: flex; flex-direction: column; gap: 10px; font-size: 14px; line-height: 21px; }
.pied__nav a { color: var(--argent); text-decoration: none; }
.pied__nav a:hover { color: var(--blanc); }
.pied__bas { margin-top: 48px; padding-top: 22px; border-top: 1px solid rgba(201, 209, 218, 0.10); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px; }
.pied__mention { font-size: 13px; line-height: 20px; color: var(--argent-secondaire); }
.mouvement { display: flex; align-items: center; gap: 2px; font-size: 13px; line-height: 20px; color: var(--argent-secondaire); }
.mouvement__intitule { margin-right: 4px; }
.mouvement__choix {
  min-height: 44px; margin: -12px 0; padding: 12px 4px; border: 0; background: none; color: var(--argent); font-size: 13px; line-height: 20px;
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px;
  transition: color var(--duree-survol) var(--courbe-survol), text-decoration-color var(--duree-survol) var(--courbe-survol);
}
.mouvement__choix:hover { color: var(--blanc); }
.mouvement__choix[aria-pressed="true"] { color: var(--papier); text-decoration-color: var(--laiton); }
.mouvement__choix[disabled] { color: var(--argent-secondaire); text-decoration: none; cursor: default; }

/* --------------------------------------------------------------------------
   (d bis) Décodeur (/decodeur) : maquettes decodeur-ordinateur et decodeur-mobile.
   Classes préfixées « dec- » : rien ici ne s’applique à l’accueil.
   -------------------------------------------------------------------------- */
/* Haut de page : halo décentré vers la zone de dépôt (72 %), trame de points */
.dec-haut { background: radial-gradient(ellipse 55% 70% at 72% 0%, rgba(201, 209, 218, 0.13) 0%, rgba(201, 209, 218, 0.03) 50%, rgba(15, 27, 43, 0) 78%) center top / 100% 780px no-repeat, var(--nuit); }
.dec-haut .haut__trame {
  height: 900px;
  -webkit-mask-image: radial-gradient(ellipse 70% 62% at 60% 30%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 62% at 60% 30%, #000 20%, transparent 75%);
}
/* Bandeau des liens /d/… : au-dessus de l’en-tête, comme sur la maquette du décodeur */
.dec-bandeau .bandeau-cab__contenu { min-height: 44px; padding-top: 0; padding-bottom: 0; gap: 4px 16px; }
.dec-bandeau a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
/* Lien de la page courante dans la navigation */
.nav-principale__lien[aria-current="page"] { color: var(--papier); }
@media (min-width: 1040px) {
  .nav-principale__lien[aria-current="page"] { display: inline-flex; align-items: center; min-height: 80px; box-shadow: inset 0 -2px 0 var(--laiton); }
}

/* Héros : texte à gauche, dépôt à droite */
.dec-heros { position: relative; max-width: var(--conteneur); margin: 0 auto; padding: 56px var(--marge) 64px; display: flex; flex-wrap: wrap; gap: 48px 64px; align-items: flex-start; }
.dec-heros__texte { flex: 1 1 420px; min-width: 0; padding-top: 8px; }
.dec-heros__titre { margin: 16px 0 0; font-size: 56px; line-height: 60px; font-weight: 500; letter-spacing: -0.035em; color: var(--papier); }
.dec-heros__chapeau { margin: 18px 0 0; font-size: 18px; line-height: 29px; color: var(--argent); }
.dec-heros__cadenas { margin-top: 26px; }
.dec-heros__aide { margin-top: 18px; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 15px; font-weight: 600; color: var(--papier); text-underline-offset: 4px; }
.dec-depot { flex: 1 1 560px; min-width: 0; padding: 18px; box-shadow: 0 48px 96px -48px rgba(0, 0, 0, 0.8); }
.dec-zone {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 30px 28px 26px;
  border: 1.5px dashed rgba(201, 209, 218, 0.3); border-radius: var(--r-12); background: var(--nuit-profonde);
  box-shadow: inset 0 2px 16px rgba(0, 0, 0, 0.5); text-align: center;
  transition: border-color var(--duree-survol) var(--courbe-survol), background-color var(--duree-survol) var(--courbe-survol);
}
.dec-zone.est-survole { border-color: var(--laiton-clair); background: #0D1828; }
.dec-zone__titre { margin: 4px 0 0; font-size: 19px; line-height: 26px; font-weight: 600; color: var(--papier); }
.dec-zone__sous { max-width: 470px; font-size: 14px; line-height: 22px; color: var(--argent); }
.dec-zone__boutons { margin-top: 10px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.dec-zone__bouton { height: 46px; padding: 0 20px; }
.dec-zone .bouton--contour { border-color: rgba(201, 209, 218, 0.35); }
/* Message sous la zone de dépôt (fichier non reconnu, export Shopify manquant…) : toujours présent, vide s’il n’y a rien à dire */
.dec-message { font-size: 14px; line-height: 21px; }
.dec-message.est-visible { margin-top: 12px; padding: 10px 14px; border-radius: var(--r-10); }
.dec-message--erreur { border: 1px solid var(--erreur-nuit-bord); background: rgba(240, 179, 166, 0.08); color: var(--erreur-nuit); }
.dec-message--info { border: 1px solid rgba(184, 149, 90, 0.5); background: rgba(184, 149, 90, 0.08); color: var(--papier); }
/* Les quatre fichiers : badge, puis le nom du fichier reçu */
.dec-fichiers { margin-top: 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.dec-fichier { padding: 14px 16px 15px; border: 1px solid rgba(201, 209, 218, 0.12); border-radius: var(--r-10); background: rgba(10, 20, 32, 0.5); }
.dec-fichier__tete { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dec-fichier__num { font-size: 12px; line-height: 18px; font-weight: 600; color: var(--laiton-clair); }
.dec-fichier .badge { flex: none; }
.dec-fichier__titre { margin: 8px 0 0; font-size: 15px; line-height: 21px; font-weight: 600; color: var(--papier); }
.dec-fichier__nom { margin: 6px 0 0; display: flex; align-items: flex-start; gap: 6px; font-size: 12px; line-height: 18px; color: var(--argent-secondaire); }
.dec-fichier__nom[hidden] { display: none; }
.dec-fichier__nom svg { flex: none; margin-top: 3px; }
.dec-fichier__nom span { min-width: 0; overflow-wrap: anywhere; }

/* Comment obtenir mes fichiers ? (rubrique repliable, ouverte au départ) */
.dec-aide { background: var(--nuit-profonde); border-top: 1px solid rgba(201, 209, 218, 0.08); }
.dec-aide__conteneur { max-width: var(--conteneur); margin: 0 auto; padding: 40px var(--marge) 152px; }
.dec-aide__resume { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 48px; }
.dec-aide__resume::-webkit-details-marker { display: none; }
.dec-aide__titre { font-size: 24px; line-height: 32px; font-weight: 500; letter-spacing: -0.02em; color: var(--papier); }
.dec-aide__cercle { flex: none; width: 32px; height: 32px; border: 1px solid rgba(201, 209, 218, 0.3); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: border-color var(--duree-survol) var(--courbe-survol); }
.dec-aide__resume:hover .dec-aide__cercle { border-color: var(--argent); }
.dec-aide__chevron { transition: transform var(--duree-survol) var(--courbe-survol); }
.dec-aide__details[open] .dec-aide__chevron { transform: rotate(180deg); }
.dec-aide__liste { margin: 20px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.dec-aide__etape { padding: 18px 18px 20px; border: 1px solid rgba(201, 209, 218, 0.10); border-top-color: rgba(184, 149, 90, 0.55); border-radius: 0 0 12px 12px; background: rgba(21, 36, 58, 0.45); }
.dec-aide__tete { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dec-aide__num { font-size: 12px; line-height: 18px; font-weight: 600; color: var(--laiton-clair); }
.dec-aide__nom { margin: 10px 0 0; font-size: 16px; line-height: 22px; font-weight: 600; color: var(--papier); }
.dec-aide__texte { margin: 8px 0 0; font-size: 14px; line-height: 22px; color: var(--argent); }

/* Résultat : la carte remonte de 112 px (72 px sur mobile) sur la rubrique sombre */
.dec-resultat { display: flow-root; }
.dec-resultat__conteneur { max-width: var(--conteneur); margin: 0 auto; padding: 0 var(--marge) 72px; }
.dec-carte { position: relative; margin-top: -112px; }
.dec-carte[hidden] { display: none; }
.dec-carte__haut { padding: 26px 32px 24px; }
.dec-tete { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px 32px; }
.dec-tete__sous { margin: 6px 0 0; font-size: 14px; line-height: 21px; color: var(--encre-secondaire); }
.dec-tete__alerte { margin: 6px 0 0; max-width: 640px; font-size: 13px; line-height: 20px; color: var(--erreur-clair); }
.dec-tete__alerte[hidden] { display: none; }
.dec-tete__lien { margin-top: 6px; min-height: 32px; font-size: 14px; }
/* Cadre d’écart (papier) : filet laiton 1,5 px, fléau horizontal à 0,00 € */
.dec-ecart { flex: none; display: flex; align-items: stretch; border: 1.5px solid var(--laiton); border-radius: var(--r-8); background: var(--fond-laiton); }
.dec-ecart__etiquette { display: flex; flex-direction: column; justify-content: center; padding: 8px 14px; border-right: 1.5px solid var(--laiton); }
.dec-ecart__mot { font-size: 11px; line-height: 16px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: var(--laiton-encre); }
.dec-ecart__precision { font-size: 12px; line-height: 16px; color: var(--encre-secondaire); }
.dec-ecart__valeur { display: grid; align-items: center; padding: 6px 14px 6px 16px; font-size: 28px; line-height: 36px; font-weight: 500; letter-spacing: -0.02em; white-space: nowrap; color: var(--nuit); }
.dec-ecart__fleau { position: relative; display: block; flex: none; width: 60px; margin-right: 12px; }
.dec-fleau { position: absolute; left: 5px; top: 22px; width: 50px; height: 2px; transform-origin: 50% 50%; }
.dec-fleau__barre { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, #8C6D3B 0%, #CDAE73 50%, #8C6D3B 100%); }
.dec-fleau__plateau { position: absolute; top: -8px; width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(180deg, #E2C793 0%, #B8955A 60%, #8C6D3B 100%); }
.dec-fleau__plateau--g { left: 3px; }
.dec-fleau__plateau--d { right: 3px; }
.dec-fleau__pivot { position: absolute; left: 25.5px; top: 24px; width: 0; height: 0; border-left: 4.5px solid transparent; border-right: 4.5px solid transparent; border-bottom: 8px solid var(--nuit); }
.dec-ecart.est-incline .dec-fleau, .est-incline > .dec-fleau-svg { transform: rotate(-7deg); }
/* Synthèse : Ventes − Remboursements − Litiges et ajustements − Commissions = Net versé */
.dec-synthese { margin-top: 20px; display: flex; flex-wrap: wrap; border: 1px solid var(--filet-moyen); border-radius: var(--r-10); overflow: hidden; }
.dec-tuile { flex: 1 1 110px; display: flex; flex-direction: column; padding: 14px 18px 15px; }
.dec-tuile--ventes { flex: 1.2 1 130px; }
.dec-tuile--net { flex: 1.3 1 150px; background: var(--fond-laiton); }
.dec-tuile__libelle { font-size: 12px; line-height: 18px; color: var(--encre-secondaire); }
.dec-tuile__montant { margin: auto 0 0; padding-top: 2px; font-size: 24px; line-height: 30px; font-weight: 500; letter-spacing: -0.02em; white-space: nowrap; color: var(--nuit); }
.dec-tuile__sous { font-size: 12px; line-height: 18px; color: var(--encre-tertiaire); }
.dec-tuile--net .dec-tuile__libelle { font-weight: 600; color: var(--laiton-encre); }
.dec-tuile--net .dec-tuile__montant { font-weight: 600; }
.dec-operateur {
  position: relative; flex: none; width: 34px; display: flex; align-items: center; justify-content: center;
  background: var(--papier); border-left: 1px solid var(--filet-moyen); border-right: 1px solid var(--filet-moyen); font-size: 18px; color: var(--encre-secondaire);
}
/* Ancres des quatre blocs, collées en haut de la carte ; la section lue est soulignée de 2 px */
.dec-ancres { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 0 28px; padding: 0 32px; border-top: 1px solid var(--filet-moyen); border-bottom: 1px solid var(--filet-moyen); background: var(--blanc); }
.dec-ancres .dec-ancre { display: inline-flex; align-items: center; gap: 8px; min-height: 52px; font-size: 14px; font-weight: 600; color: var(--encre-secondaire); text-decoration: none; }
.dec-ancres .dec-ancre[hidden] { display: none; }
.dec-ancres .dec-ancre:hover, .dec-ancres .dec-ancre[aria-current] { color: var(--nuit); }
.dec-ancres .dec-ancre[aria-current] { box-shadow: inset 0 -2px 0 var(--nuit); }
.dec-compte { padding: 0 7px; border-radius: var(--r-pilule); background: var(--filet-leger); font-size: 12px; line-height: 20px; font-weight: 600; color: var(--encre-secondaire); }
.dec-ancre--attention .dec-compte { background: rgba(184, 149, 90, 0.14); color: var(--laiton-encre); }
.dec-ancres .dec-ancre[aria-current] .dec-compte { background: var(--nuit); color: var(--blanc); }
/* Blocs du résultat */
.dec-bloc { padding: 32px; border-top: 1px solid var(--filet-moyen); }
.dec-bloc--virements { padding-top: 28px; border-top: 0; }
.dec-bloc--tva { padding-bottom: 34px; }
.dec-bloc[hidden] { display: none; }
.dec-bloc__tete { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 24px; }
.dec-bloc__titre { font-size: 22px; line-height: 30px; font-weight: 600; letter-spacing: -0.015em; scroll-margin-top: 76px; }
.dec-bloc__sous { margin: 4px 0 0; font-size: 14px; line-height: 21px; color: var(--encre-secondaire); }
.dec-csv { flex: none; }
/* Outils du tableau : recherche, filtres, densité */
.dec-outils { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.dec-outils__gauche { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.dec-recherche { position: relative; width: 300px; max-width: 100%; }
.dec-recherche svg { position: absolute; left: 12px; top: 12px; pointer-events: none; }
.dec-recherche__champ { width: 100%; height: 40px; padding: 0 12px 0 36px; border: 1px solid var(--filet-champ); border-radius: var(--r-8); background: var(--blanc); color: var(--nuit); font-size: 14px; }
.dec-filtre__compte { font-weight: 500; color: var(--encre-secondaire); }
.filtre--actif .dec-filtre__compte { color: var(--argent); }
.dec-densite { display: inline-flex; padding: 3px; border: 1px solid var(--filet); border-radius: var(--r-8); background: var(--papier); }
.dec-densite__choix { height: 32px; padding: 0 12px; border: 0; border-radius: var(--r-6); background: transparent; color: var(--encre-secondaire); font-size: 13px; font-weight: 600; }
.dec-densite__choix[aria-pressed="true"] { background: var(--blanc); box-shadow: 0 1px 2px rgba(15, 27, 43, 0.12); color: var(--nuit); }
/* Tableaux de chiffres (spec 02 § 6) : en-tête et total collants, colonne Virement fixe, zéros atténués */
.dec-tableau-cadre { overflow: auto; border: 1px solid var(--filet-moyen); border-radius: var(--r-10); background: var(--blanc); }
.dec-tableau-cadre--virements { margin-top: 14px; max-height: min(580px, 70vh);
  /* WCAG 2.2, 2.4.11 : une ligne qui reçoit le focus ne se cache pas sous l’en-tête (48 px) ni sous le total (48 px) collants */
  scroll-padding-top: 52px; scroll-padding-bottom: 52px; }
/* Même règle pour la page : la barre d’ancres du résultat (54 px) reste collée en haut sur ordinateur */
@media (min-width: 760px) { html:has(.dec-ancres) { scroll-padding-top: 62px; } }
.dec-tableau-cadre--simple { margin-top: 18px; }
.dec-tableau { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 13px; line-height: 19px; }
.dec-tableau th { height: 40px; padding: 0 12px; background: var(--papier); border-bottom: 1px solid var(--filet); font-size: 12px; line-height: 16px; font-weight: 600; color: var(--encre-secondaire); text-align: left; }
.dec-tableau td { height: 44px; padding: 0 12px; border-bottom: 1px solid var(--filet-leger); background: var(--blanc); }
.dec-tableau th:first-child, .dec-tableau td:first-child { padding-left: 16px; }
.dec-tableau th:last-child, .dec-tableau td:last-child { padding-right: 16px; }
.dec-tableau .droite { text-align: right; }
.dec-tableau .zero { color: var(--encre-tertiaire); }
.dec-tableau .dec-net { font-weight: 600; }
.dec-tableau .dec-banque { color: var(--encre-secondaire); }
.dec-tableau tr.dec-ligne--alt td { background: var(--ligne-alternee); }
.dec-tableau tbody tr:last-child td { border-bottom: 0; }
.dec-tableau tfoot td { height: 48px; padding: 0 12px; background: var(--papier); border-top: 1px solid var(--argent); font-weight: 600; }
.dec-tableau tfoot td.dec-total-sous { font-weight: 400; color: var(--encre-secondaire); }
.dec-tableau .dec-vide { height: 64px; text-align: center; color: var(--encre-secondaire); }
.dec-tableau--virements { min-width: 1026px; }
.dec-tableau--virements th { position: sticky; top: 0; z-index: 2; height: 48px; }
.dec-tableau--virements th:first-child { left: 0; z-index: 3; }
.dec-tableau--virements td:first-child { position: sticky; left: 0; z-index: 1; }
.dec-tableau--virements tfoot td { position: sticky; bottom: 0; z-index: 2; }
.dec-tableau--virements tfoot td:first-child { left: 0; z-index: 3; }
.dec-col-virement { width: 104px; }
.dec-col-statut { width: 122px; }
.dec-col-nb { width: 64px; }
.dec-col-montant { width: 112px; }
.dec-col-remb { width: 124px; }
.dec-col-comm { width: 104px; }
.dec-col-ecart { width: 76px; }
.dec-tableau-cadre--compact .dec-tableau td { height: 36px; }
.dec-ligne { cursor: pointer; }
.dec-tableau .dec-ligne:hover td { background: #F1F4F7; }
.dec-tableau .dec-ligne.est-choisie td { background: var(--fond-laiton); }
.dec-tableau .dec-ligne.est-choisie td:first-child { box-shadow: inset 3px 0 0 var(--laiton); }
.dec-ligne__bouton { all: unset; cursor: pointer; font-weight: 500; }
.dec-ligne.est-choisie .dec-ligne__bouton { font-weight: 600; }
.dec-ligne__bouton:focus-visible { outline: 2px solid var(--laiton-fonce); outline-offset: 3px; }
/* Statuts : toujours un pictogramme et un mot */
.dec-statut { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.dec-statut svg { flex: none; }
.dec-statut--transit { color: var(--encre-secondaire); }
.dec-statut--erreur { color: var(--erreur-clair); }
.dec-reste { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.dec-reste svg { flex: none; }
/* Pages */
.dec-pages { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; font-size: 13px; line-height: 20px; color: var(--encre-secondaire); }
.dec-pages__outils { display: flex; align-items: center; gap: 12px; }
.dec-pages__choix { position: relative; }
.dec-pages__select { height: 36px; padding: 0 30px 0 12px; border: 1px solid var(--filet-champ); border-radius: var(--r-8); background: var(--blanc); color: var(--nuit); font-size: 13px; appearance: none; -webkit-appearance: none; }
.dec-pages__choix svg { position: absolute; right: 11px; top: 13px; pointer-events: none; }
.dec-pages__boutons { display: flex; gap: 4px; }
.dec-pages__bouton { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--argent); border-radius: var(--r-8); background: var(--blanc); color: var(--nuit); transition: border-color var(--duree-survol) var(--courbe-survol); }
.dec-pages__bouton:hover { border-color: var(--nuit); }
.dec-pages__bouton[disabled], .dec-pages__bouton[disabled]:hover { border-color: var(--filet); background: var(--papier); color: var(--encre-tertiaire); cursor: not-allowed; }
/* Virement sélectionné (tiroir sous le tableau) */
.dec-tiroir { margin-top: 12px; overflow: hidden; }
.dec-tiroir:empty { display: none; }
.dec-detail { padding: 20px 22px; border: 1px solid var(--filet-laiton); border-radius: var(--r-12); background: var(--fond-laiton); }
.dec-detail__tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.dec-detail__surtitre { font-size: 11px; line-height: 16px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: var(--laiton-encre); }
.dec-detail__titre { margin: 4px 0 0; font-size: 18px; line-height: 26px; font-weight: 600; }
.dec-detail__actions { display: flex; align-items: center; gap: 10px; }
.dec-outil { height: 40px; padding: 0 14px; border: 1px solid var(--argent); border-radius: var(--r-8); background: var(--blanc); color: var(--nuit); font-size: 14px; font-weight: 600; transition: border-color var(--duree-survol) var(--courbe-survol); }
.dec-outil:hover { border-color: var(--nuit); }
.dec-outil--carre { width: 40px; padding: 0; display: flex; align-items: center; justify-content: center; }
.dec-detail__tuiles { margin-top: 16px; display: flex; flex-wrap: wrap; border: 1px solid var(--filet-moyen); border-radius: var(--r-10); overflow: hidden; background: var(--blanc); }
.dec-detail__tuiles .dec-tuile { flex: 1 1 110px; }
.dec-detail__tuiles .dec-tuile:first-child { flex-basis: 90px; }
.dec-detail__grille { margin-top: 14px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr); gap: 12px; align-items: start; }
.dec-detail__grille--deux { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.dec-detail__banque { min-height: 88px; padding: 12px 16px; border: 1px solid var(--filet-moyen); border-radius: var(--r-10); background: var(--blanc); }
.dec-detail__libelle { font-size: 12px; line-height: 18px; color: var(--encre-secondaire); }
.dec-detail__valeur { margin: 2px 0 0; font-size: 18px; line-height: 26px; font-weight: 500; }
.dec-detail__sous { font-size: 12px; line-height: 18px; color: var(--encre-tertiaire); }
.dec-detail__ecart { min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border: 1.5px solid var(--laiton); border-radius: var(--r-10); background: var(--blanc); }
.dec-detail__ecart .dec-detail__libelle { font-weight: 600; color: var(--laiton-encre); }
.dec-detail__ecart-valeur { margin: 2px 0 0; font-size: 24px; line-height: 30px; font-weight: 500; letter-spacing: -0.02em; }
.dec-fleau-svg { flex: none; }
.dec-detail__points { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px; border: 1px solid var(--filet-moyen); border-radius: var(--r-10); background: var(--blanc); }
.dec-point { display: flex; align-items: flex-start; gap: 10px; }
.dec-point p { font-size: 13px; line-height: 20px; color: var(--nuit); }
.dec-point strong { font-weight: 600; }
.dec-point__puce { flex: none; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; border: 1.5px solid var(--encre-tertiaire); }
.dec-point--attention .dec-point__puce { border: 0; background: var(--laiton-fonce); }
.dec-point--erreur .dec-point__puce { border: 0; border-radius: 2px; background: var(--erreur-clair); }
.dec-detail__ventes { margin-top: 14px; }
.dec-detail__ventes[hidden] { display: none; }
.dec-detail__ventes .dec-tableau-cadre { margin-top: 0; }
.dec-tableau--transactions { min-width: 620px; }
/* Points d’attention : « À vérifier » (erreurs puis attention) et « Pour information » */
.dec-attention { margin-top: 20px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 32px; align-items: start; }
.dec-attention:empty { display: none; }
.dec-attention__titre { margin: 0 0 10px; display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 20px; font-weight: 600; }
.dec-attention__titre--verifier { color: var(--laiton-encre); }
.dec-attention__titre--info { color: var(--encre-secondaire); }
.dec-attention__puce { flex: none; width: 8px; height: 8px; border-radius: 50%; }
.dec-attention__titre--verifier .dec-attention__puce { background: var(--laiton-fonce); }
.dec-attention__titre--info .dec-attention__puce { border: 1.5px solid var(--encre-tertiaire); }
.dec-attention__liste--verifier { display: flex; flex-direction: column; gap: 10px; }
.dec-attention__liste--info { padding: 4px 14px; border: 1px solid var(--filet-moyen); border-radius: var(--r-10); background: var(--blanc); }
.dec-avis { display: flex; align-items: flex-start; gap: 12px; }
.dec-attention__liste--verifier .dec-avis { padding: 14px 16px; border: 1px solid var(--filet-laiton); border-radius: var(--r-10); background: var(--fond-laiton); }
.dec-attention__liste--info .dec-avis { padding: 12px 4px; }
.dec-attention__liste--info .dec-avis + .dec-avis { border-top: 1px solid var(--filet-leger); }
.dec-avis__puce { flex: none; width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; border: 1.5px solid var(--encre-tertiaire); }
.dec-avis--attention .dec-avis__puce { border: 0; background: var(--laiton-fonce); }
.dec-avis__titre { font-size: 14px; line-height: 21px; font-weight: 600; }
.dec-avis__texte { margin: 2px 0 0; font-size: 13px; line-height: 20px; color: var(--encre-secondaire); }
.dec-attention__liste--verifier .dec-avis__titre { font-size: 15px; line-height: 22px; }
.dec-attention__liste--verifier .dec-avis__texte { font-size: 14px; line-height: 21px; }
/* Erreur : repère plus fort (barre et puce carrée couleur Erreur), et le mot « Erreur » pour les lecteurs d’écran */
.dec-attention__liste--verifier .dec-avis--erreur { border-color: rgba(163, 57, 43, 0.45); background: #FCF4F2; box-shadow: inset 3px 0 0 var(--erreur-clair); }
.dec-avis--erreur .dec-avis__puce { border: 0; border-radius: 2px; background: var(--erreur-clair); }
.dec-avis--erreur .dec-avis__titre { color: var(--erreur-clair); }
/* Transferts PayPal */
.dec-tableau--paypal { min-width: 830px; }
.dec-pp-transfert { width: 150px; }
.dec-pp-nb { width: 90px; }
.dec-pp-ventes { width: 110px; }
.dec-pp-remb { width: 130px; }
.dec-pp-net { width: 120px; }
/* TVA par pays et par taux */
.dec-tableau--tva { min-width: 760px; }
.dec-tva-pays { width: 260px; }
.dec-tva-taux { width: 120px; }
.dec-tva-montant, .dec-tva-tva { width: 200px; }
.dec-pays { display: inline-flex; align-items: center; }
.dec-pays__code { display: inline-block; width: 28px; font-weight: 600; }
.dec-pays__nom { color: var(--encre-secondaire); }
.dec-oss { margin-left: 8px; padding: 0 6px; border: 1px solid var(--argent); border-radius: var(--r-4); font-size: 11px; line-height: 16px; font-weight: 600; color: var(--encre-secondaire); }
.dec-note { margin: 12px 0 0; font-size: 13px; line-height: 20px; color: var(--encre-secondaire); }
/* Inscription en bas de page (bloc nuit posé sur le papier) */
.dec-acces {
  position: relative; overflow: hidden; margin-top: 28px; padding: 40px 44px; border-radius: var(--r-18);
  background: radial-gradient(ellipse 60% 120% at 0% 0%, rgba(201, 209, 218, 0.12) 0%, rgba(15, 27, 43, 0) 70%), var(--nuit); color: var(--argent);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px 56px;
}
.dec-acces__texte { flex: 1 1 520px; max-width: 600px; }
.dec-acces__titre { margin: 14px 0 0; font-size: 30px; line-height: 36px; font-weight: 500; letter-spacing: -0.03em; color: var(--papier); }
.dec-acces__chapeau { margin: 12px 0 0; font-size: 16px; line-height: 25px; color: var(--argent); }
.dec-acces__formulaire { flex: 1 1 380px; min-width: 0; max-width: 460px; }
.dec-acces__capture .capture__champ { flex: 1 1 auto; min-width: 0; width: 0; height: 48px; padding: 0 14px; }
.dec-acces__capture .capture__bouton { flex: none; height: 48px; padding: 0 20px; }
.dec-acces__sous { margin-top: 12px; }
.dec-acces__mention { font-size: 13px; line-height: 20px; color: var(--argent-secondaire); }
.dec-acces ::placeholder { color: var(--argent-secondaire); }
.dec-acces :focus-visible { outline-color: var(--laiton-clair); }
.etat.est-reussi { color: var(--laiton-clair); }
.etat.est-reussi::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M2.5 7.4l3 3 6-6.8' stroke='%23D3B47E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* --------------------------------------------------------------------------
   (d ter) Experts-comptables (/cabinets) : maquettes cabinets-ordinateur et cabinets-mobile.
   Classes préfixées « cab- » : rien ici ne s’applique à l’accueil ni au décodeur. Sont repris tels
   quels : en-tête et menu, carte du pilote (formulaire pilote-cabinet), badges, encart cadenas,
   questions, appel final (.acces) et pied de page.
   -------------------------------------------------------------------------- */
/* Haut de page : halo décentré à gauche (25 %), sur la hauteur de l’en-tête et du héros, trame de points */
.cab-haut { background: radial-gradient(ellipse 55% 70% at 25% 0%, rgba(201, 209, 218, 0.13) 0%, rgba(201, 209, 218, 0.03) 50%, rgba(15, 27, 43, 0) 78%) center top / 100% 742px no-repeat, var(--nuit); }
.cab-haut .haut__trame {
  height: 900px; background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse 70% 62% at 30% 30%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 62% at 30% 30%, #000 20%, transparent 75%);
}

/* Héros : le problème à gauche, la demande de pilote à droite */
.cab-heros { position: relative; max-width: var(--conteneur); margin: 0 auto; padding: 72px var(--marge) 96px; display: flex; flex-wrap: wrap; gap: 48px 72px; align-items: flex-start; }
.cab-heros__texte { flex: 1 1 520px; min-width: 0; padding-top: 12px; }
.cab-heros__titre { margin: 18px 0 0; font-size: 58px; line-height: 62px; font-weight: 500; letter-spacing: -0.035em; color: var(--papier); }
.cab-heros__chapeau { margin: 22px 0 0; max-width: 560px; font-size: 19px; line-height: 30px; color: var(--argent); }
.cab-heros__actions { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.cab-heros__decodeur { height: 50px; padding: 0 22px; font-size: 16px; }
.cab-heros__poste { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; line-height: 21px; color: var(--argent-secondaire); }
.cab-heros__poste svg { flex: none; }
.cab-chiffres { margin: 44px 0 0; max-width: 560px; display: grid; grid-template-columns: auto auto minmax(0, 1fr); border-top: 1px solid rgba(201, 209, 218, 0.14); }
.cab-chiffres li { padding: 16px 16px 0; border-left: 1px solid rgba(201, 209, 218, 0.14); }
.cab-chiffres li:first-child { padding-left: 0; border-left: 0; }
.cab-chiffres li:last-child { padding-right: 0; }
.cab-chiffres__valeur { font-size: 30px; line-height: 36px; font-weight: 500; letter-spacing: -0.03em; color: var(--papier); white-space: nowrap; }
.cab-chiffres__libelle { margin: 4px 0 0; font-size: 13px; line-height: 19px; color: var(--argent-secondaire); }
/* Carte du pilote : celle de l’accueil, aux espacements de la maquette cabinets */
.cab-pilote .carte-pilote__sous { margin-top: 4px; }
.cab-pilote .carte-pilote__champs { margin-top: 20px; gap: 14px; }
.cab-pilote .carte-pilote__duo { gap: 14px; }
.cab-pilote .selecteur select { font-size: 16px; }

/* Ce que reçoit le cabinet : trois cartes posées sur le papier */
.cab-recevez { position: relative; } /* peint après le héros (positionné) : l’ombre de la carte du pilote passe dessous */
.cab-recevez__conteneur { padding-top: 96px; padding-bottom: 96px; }
.cab-recevez__titre { max-width: 760px; }
.cab-cartes { margin-top: 44px; display: flex; flex-wrap: wrap; gap: 20px; align-items: stretch; }
.cab-carte { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; padding: 26px; border: 1px solid var(--filet); border-radius: var(--r-18); background: var(--blanc); }
.cab-carte__badge { display: flex; margin: 0 0 12px; }
.cab-badge-neutre { border: 1px solid var(--argent); background: var(--papier); color: var(--encre-secondaire); }
.cab-carte__titre { font-size: 19px; line-height: 27px; font-weight: 600; letter-spacing: -0.01em; }
.cab-carte__corps { margin-top: 20px; flex: 1 1 auto; display: flex; flex-direction: column; }
.cab-carte__note { margin: auto 0 0; padding-top: 12px; font-size: 13px; line-height: 20px; color: var(--encre-secondaire); }
/* Cartes sans badge (décision 1) : la rangée du badge (20 px + 12 px) est gardée quand les cartes sont côte à côte,
   pour aligner titres et corps. Mesuré sur la largeur réelle de la rangée (hors barre de défilement) : trois cartes
   à partir de 1000 px (3 × 320 + 2 × 20), sinon deux, et la troisième passe seule sur sa ligne. Rien sur mobile. */
.cab-cartes { container: cab-cartes / inline-size; }
@media (min-width: 760px) {
  @container cab-cartes (min-width: 1000px) { .cab-carte > .cab-carte__titre:first-child { margin-top: 32px; } }
  @container cab-cartes (min-width: 660px) and (max-width: 999.98px) { .cab-carte:nth-child(2) > .cab-carte__titre:first-child { margin-top: 32px; } }
}
/* Carte 1 : le virement décomposé et son écart (fléau papier, 52 × 30 px) */
.cab-virement { padding: 10px 14px 12px; border: 1px solid var(--filet-moyen); border-radius: var(--r-10); background: var(--blanc); }
.cab-virement__etiquette { margin: 0 0 2px; }
.cab-virement__ligne { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; font-size: 13px; line-height: 19px; border-bottom: 1px solid var(--filet-leger); }
.cab-virement__ligne--sans-filet { border-bottom: 0; }
.cab-virement__ligne--net { border-bottom: 0; border-top: 1px solid var(--nuit); font-weight: 600; }
.cab-ecart { margin-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border: 1.5px solid var(--laiton); border-radius: var(--r-10); background: var(--fond-laiton); }
.cab-ecart__texte { display: flex; flex-direction: column; }
.cab-ecart__banque { font-size: 12px; line-height: 17px; color: var(--encre-secondaire); }
.cab-ecart__ligne { display: flex; align-items: baseline; gap: 8px; }
.cab-ecart__mot { font-size: 11px; line-height: 16px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: var(--laiton-encre); }
.cab-ecart__valeur { display: grid; font-size: 22px; line-height: 28px; font-weight: 500; letter-spacing: -0.02em; color: var(--nuit); }
.cab-ecart__valeur > span { grid-area: 1 / 1; white-space: nowrap; }
.cab-ecart__attente { opacity: 0; color: var(--encre-tertiaire); }
.cab-fleau { position: relative; display: block; flex: none; width: 52px; height: 30px; }
.cab-fleau__poutre { position: absolute; left: 3px; top: 14px; width: 46px; height: 2px; transform-origin: 50% 50%; }
.cab-fleau__barre { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, #8C6D3B 0%, #CDAE73 50%, #8C6D3B 100%); }
.cab-fleau__plateau { position: absolute; top: -7px; width: 7px; height: 7px; border-radius: 50%; background: linear-gradient(180deg, #E2C793 0%, #B8955A 60%, #8C6D3B 100%); }
.cab-fleau__plateau--g { left: 3px; }
.cab-fleau__plateau--d { right: 3px; }
.cab-fleau__pivot { position: absolute; left: 21.5px; top: 16px; width: 0; height: 0; border-left: 4.5px solid transparent; border-right: 4.5px solid transparent; border-bottom: 8px solid var(--nuit); }
/* Carte 2 : formats d’import */
.cab-formats { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.cab-formats li { padding: 12px 14px; border: 1px solid var(--filet-moyen); border-radius: var(--r-10); background: var(--ligne-alternee); }
.cab-formats__nom { font-size: 15px; line-height: 21px; font-weight: 600; }
.cab-formats__sous { margin: 2px 0 0; font-size: 12px; line-height: 17px; color: var(--encre-tertiaire); }
/* Carte 3 : comptes paramétrables */
.cab-comptes { padding: 4px 14px; border: 1px solid var(--filet-moyen); border-radius: var(--r-10); background: var(--ligne-alternee); }
.cab-comptes li { display: grid; grid-template-columns: minmax(0, 1fr) 18px 72px; align-items: center; gap: 10px; min-height: 46px; border-bottom: 1px solid var(--filet-leger); font-size: 13px; line-height: 19px; }
.cab-comptes li:last-child { border-bottom: 0; }
.cab-comptes__numero { display: flex; align-items: center; height: 32px; padding: 0 10px; border: 1px solid var(--argent); border-radius: var(--r-6); background: var(--blanc); font-size: 14px; font-weight: 600; letter-spacing: 0.04em; }

/* Décodeur gratuit : tester sur un dossier */
.cab-test { background: var(--nuit-profonde); border-top: 1px solid rgba(201, 209, 218, 0.08); }
.cab-test__conteneur { display: flex; flex-wrap: wrap; align-items: center; gap: 40px 72px; }
.cab-test__texte { flex: 1 1 480px; min-width: 0; }
.cab-test__chapeau { max-width: 520px; }
.cab-test__cadenas { margin-top: 22px; max-width: 520px; gap: 10px; padding: 12px 14px; border-radius: var(--r-8); }
.cab-test__bouton { margin-top: 26px; gap: 8px; height: 50px; padding: 0 22px; font-size: 16px; }
.cab-fichiers { flex: 1 1 420px; min-width: 0; padding: 14px; border-radius: var(--r-16); box-shadow: 0 36px 72px -36px rgba(0, 0, 0, 0.75); }
.cab-fichiers__intro { margin: 2px 4px 12px; font-size: 13px; line-height: 20px; color: var(--argent); }
.cab-fichiers__liste { display: flex; flex-direction: column; gap: 8px; }
.cab-fichiers__liste li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border: 1px solid rgba(201, 209, 218, 0.12); border-radius: var(--r-10); background: rgba(10, 20, 32, 0.5); }
.cab-fichiers__nom { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--papier); }
.cab-fichiers__num { margin-right: 8px; color: var(--laiton-clair); }
.cab-fichiers .badge { flex: none; }
.cab-fichiers__aide { margin: 10px 4px 0; display: inline-flex; align-items: center; min-height: 40px; font-size: 14px; line-height: 21px; color: var(--argent); text-underline-offset: 4px; }

/* Le pilote : trois étapes, calendrier, citation */
.cab-pilote-section { border-top: 1px solid var(--filet-moyen); }
.cab-deroulement { padding-top: 96px; padding-bottom: 96px; display: flex; flex-wrap: wrap; gap: 48px 72px; align-items: flex-start; }
.cab-deroulement__texte { flex: 1 1 560px; min-width: 0; }
.cab-etapes { margin: 36px 0 0; max-width: 600px; display: flex; flex-direction: column; gap: 22px; }
.cab-etape { padding-top: 14px; border-top: 2px solid var(--nuit); display: grid; grid-template-columns: 34px minmax(0, 1fr); }
.cab-etape__num { font-size: 13px; line-height: 22px; font-weight: 600; color: var(--encre-tertiaire); }
.cab-etape__titre { display: block; font-size: 17px; line-height: 23px; font-weight: 600; }
.cab-etape__texte { display: block; margin-top: 4px; font-size: 15px; line-height: 23px; color: var(--encre-secondaire); }
.cab-calendrier { margin-top: 40px; padding: 18px 22px; border: 1px solid var(--filet); border-radius: var(--r-12); background: var(--blanc); display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; }
.cab-calendrier__titre { font-size: 13px; line-height: 20px; font-weight: 600; color: var(--encre-secondaire); }
.cab-calendrier__jalon { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; font-size: 14px; line-height: 21px; }
.cab-calendrier__barre { flex: none; width: 22px; height: 6px; border-radius: 3px; background: var(--argent); }
.cab-calendrier__barre--nuit { background: var(--nuit); }
.cab-calendrier__texte { color: var(--encre-secondaire); }
.cab-bouton-pilote { height: 50px; padding: 0 24px; font-size: 16px; }
.cab-deroulement__bouton { margin-top: 28px; }
.cab-citation { flex: 0 1 400px; padding: 30px 32px; border-radius: var(--r-18); background: var(--nuit); color: var(--argent); }
.cab-citation svg { margin-bottom: 0; } /* bloc : sa marge fusionnerait avec celle de la citation */
.cab-citation blockquote { margin: 20px 0 0; font-size: 18px; line-height: 28px; color: var(--papier); }
.cab-citation figcaption { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(201, 209, 218, 0.14); font-size: 14px; line-height: 20px; color: var(--argent-secondaire); }

/* Vos questions (fond blanc), le contact sous le titre */
.cab-faq { background: var(--blanc); border-top: 1px solid var(--filet-moyen); }
.cab-faq__conteneur { display: flex; flex-wrap: wrap; gap: 40px 72px; align-items: flex-start; }
.cab-faq__intro { flex: 1 1 320px; max-width: 380px; }
.cab-faq__contact { margin: 18px 0 0; font-size: 16px; line-height: 25px; color: var(--encre-secondaire); }
.cab-faq__contact a { font-weight: 600; text-underline-offset: 4px; }
.cab-faq__liste { flex: 999 1 560px; min-width: 0; }

/* Appel final : celui de l’accueil, deux boutons */
.cab-appel__conteneur { max-width: 820px; }
.cab-appel__chapeau { max-width: 600px; }
.cab-appel__actions { margin-top: 32px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.cab-appel__decodeur { height: 50px; padding: 0 24px; font-size: 16px; }
.cab-appel__mention { margin: 16px 0 0; }

/* --------------------------------------------------------------------------
   (d quater) Pages annexes : mentions légales, merci, page 404.
   Classes préfixées « ann- » : rien ici ne s’applique à l’accueil, au décodeur ni aux
   Experts-comptables. Sont repris tels quels : en-tête et menu, boutons, étiquette, chapeau,
   symbole de l’appel final et pied de page. Aucun mouvement propre à ces pages.
   -------------------------------------------------------------------------- */
/* Haut de page : halo décentré à gauche (25 %), comme /cabinets, sur la hauteur de l’en-tête et du titre */
.ann-haut { background: radial-gradient(ellipse 55% 70% at 25% 0%, rgba(201, 209, 218, 0.13) 0%, rgba(201, 209, 218, 0.03) 50%, rgba(15, 27, 43, 0) 78%) center top / 100% 560px no-repeat, var(--nuit); }
.ann-haut .haut__trame {
  height: 560px;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 30% 20%, #000 15%, transparent 75%);
  mask-image: radial-gradient(ellipse 60% 70% at 30% 20%, #000 15%, transparent 75%);
}

/* Mentions légales : titre sur la nuit, texte en colonne de lecture (720 px) sur le papier,
   alignés sur la grille du site (bord gauche du logo) */
.ann-tete { position: relative; max-width: var(--conteneur); margin: 0 auto; padding: 64px var(--marge) 56px; }
.ann-tete__titre { font-size: 56px; line-height: 60px; font-weight: 500; letter-spacing: -0.035em; color: var(--papier); }
.ann-tete__maj { margin: 16px 0 0; font-size: 14px; line-height: 21px; color: var(--argent-secondaire); }
.ann-texte { position: relative; }
.ann-texte__colonne { max-width: var(--conteneur); margin: 0 auto; padding: 64px var(--marge) 88px; }
.ann-texte__colonne > * { max-width: 720px; }
.ann-bloc + .ann-bloc { margin-top: 40px; padding-top: 40px; border-top: 1px solid var(--filet); }
.ann-bloc__titre { font-size: 22px; line-height: 30px; font-weight: 600; letter-spacing: -0.015em; color: var(--nuit); }
.ann-bloc p, .ann-liste li { font-size: 16px; line-height: 25px; color: var(--encre-secondaire); }
.ann-bloc p { margin: 12px 0 0; }
.ann-bloc strong { color: var(--nuit); }
.ann-texte a, .ann-texte a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; overflow-wrap: anywhere; }
.ann-liste { margin: 16px 0 0; display: flex; flex-direction: column; gap: 12px; }
.ann-liste li { position: relative; padding-left: 20px; }
.ann-liste li::before { content: ''; position: absolute; left: 2px; top: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--laiton-fonce); }
.ann-retour { margin: 48px 0 0; padding-top: 24px; border-top: 1px solid var(--filet); font-size: 15px; line-height: 23px; font-weight: 600; }
.ann-retour a { display: inline-flex; align-items: center; min-height: 44px; }

/* Boutons des pages annexes : principal laiton et secondaire contour, côte à côte, centrés */
.ann-actions { margin-top: 32px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.ann-actions .bouton { height: 50px; padding: 0 24px; font-size: 16px; }

/* Merci : page de confirmation sur la nuit, sans menu ; logo en tête, bloc centré dans la hauteur restante */
.ann-merci { flex: 1 0 auto; display: flex; flex-direction: column; background: radial-gradient(ellipse 55% 75% at 50% 0%, rgba(201, 209, 218, 0.14) 0%, rgba(201, 209, 218, 0.04) 50%, rgba(15, 27, 43, 0) 78%), var(--nuit); }
.ann-merci .haut__trame { height: 760px; }
.ann-merci > main { flex: 1 0 auto; display: flex; align-items: center; justify-content: center; }
/* 404 : la nuit occupe la hauteur restante, le pied de page reste en bas */
.ann-haut--plein { flex: 1 0 auto; display: flex; flex-direction: column; }
.ann-haut--plein > main { flex: 1 0 auto; display: flex; align-items: center; justify-content: center; }
/* Bloc centré (merci, 404) */
.ann-centre { position: relative; width: 100%; max-width: 760px; padding: 96px var(--marge); display: flex; flex-direction: column; align-items: center; text-align: center; }
.ann-centre .ann-centre__titre { margin: 28px 0 0; }
.ann-centre .ann-centre__chapeau { margin: 16px 0 0; max-width: 560px; }
.ann-erreur { padding: 120px var(--marge) 136px; }
.ann-erreur__titre { margin: 16px 0 0; font-size: 56px; line-height: 60px; font-weight: 500; letter-spacing: -0.035em; color: var(--papier); }
.ann-erreur .ann-centre__chapeau { margin-top: 18px; }

@media (max-width: 759px) {
  /* Halo décentré comme /cabinets : 0,2,0 l’emporte sur le halo centré de .haut en (e) */
  .haut.ann-haut { background: radial-gradient(ellipse 55% 70% at 25% 0%, rgba(201, 209, 218, 0.13) 0%, rgba(201, 209, 218, 0.03) 50%, rgba(15, 27, 43, 0) 78%) center top / 100% 560px no-repeat, var(--nuit); }
  .ann-tete { padding: 40px var(--marge) 40px; }
  .ann-tete__titre { font-size: 36px; line-height: 40px; }
  .ann-tete__maj { margin-top: 12px; font-size: 13px; line-height: 20px; }
  .ann-texte__colonne { padding: 44px var(--marge) 60px; }
  .ann-bloc + .ann-bloc { margin-top: 32px; padding-top: 32px; }
  .ann-bloc__titre { font-size: 20px; line-height: 27px; }
  .ann-bloc p, .ann-liste li { font-size: 15px; line-height: 23px; }
  .ann-liste li::before { top: 9px; }
  .ann-retour { margin-top: 40px; padding-top: 16px; }

  .ann-actions { margin-top: 26px; width: 100%; flex-direction: column; gap: 8px; }
  .ann-actions .bouton { display: flex; width: 100%; height: auto; min-height: 52px; padding: 12px 20px; white-space: normal; text-align: center; }
  .ann-centre { padding: 64px var(--marge); }
  .ann-centre .ann-centre__titre { margin-top: 24px; }
  .ann-centre .ann-centre__chapeau { margin-top: 12px; }
  .ann-erreur { padding: 72px var(--marge) 80px; }
  .ann-erreur__titre { margin-top: 14px; font-size: 36px; line-height: 40px; }
}

/* --------------------------------------------------------------------------
   (e) Responsive
   -------------------------------------------------------------------------- */
/* ≤ 1 039 px : en-tête compact, menu dans un panneau sous la barre (au-dessus, les cinq liens tiennent sur une ligne) */
@media (max-width: 1039px) {
  .menu-bouton { display: flex; }
  .entete__menu {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    padding: 8px var(--marge) 20px; background: var(--nuit); border-bottom: 1px solid rgba(201, 209, 218, 0.10);
    box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.7);
  }
  .entete__menu.est-ouvert { display: block; }
  .nav-principale { display: block; }
  .nav-principale__lien { display: flex; align-items: center; min-height: 52px; padding: 2px 0; border-bottom: 1px solid rgba(201, 209, 218, 0.10); font-size: 17px; color: var(--papier); }
  .entete__action { margin-top: 16px; width: 100%; height: 48px; }
}
/* ≤ 759 px : mise en page mobile (spec 05) */
@media (max-width: 759px) {
  :root { --marge: 20px; }
  .ordi { display: none; }
  .mobile { display: block; }
  span.mobile, br.mobile { display: inline; }
  .conteneur { padding: 56px var(--marge) 60px; }
  .titre-section { margin: 12px 0 0; font-size: 30px; line-height: 36px; }
  .chapeau { margin: 12px 0 0; font-size: 16px; line-height: 25px; }
  .bouton { border-radius: var(--r-10); }

  .haut { background-size: 100% 1300px; background-image: radial-gradient(ellipse 95% 50% at 50% 0%, rgba(201, 209, 218, 0.15) 0%, rgba(201, 209, 218, 0.04) 50%, rgba(15, 27, 43, 0) 80%); }
  .haut__trame {
    height: 820px; background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(ellipse 95% 55% at 50% 28%, #000 20%, transparent 78%);
    mask-image: radial-gradient(ellipse 95% 55% at 50% 28%, #000 20%, transparent 78%);
  }
  .entete__contenu { min-height: 64px; gap: 16px; }
  .entete__logo img { height: 22px; }
  .heros { padding: 32px var(--marge) 44px; }
  .heros__pastille { gap: 8px; padding: 5px 12px 5px 10px; font-size: 12px; line-height: 18px; }
  .heros__titre { margin: 22px 0 0; font-size: 36px; line-height: 40px; text-wrap: balance; }
  .heros__chapeau { margin: 16px 0 0; font-size: 16px; line-height: 25px; }
  .heros__actions { margin-top: 22px; flex-direction: column; gap: 8px; }
  .heros .capture { display: flex; flex-direction: column; gap: 8px; padding: 0; border: 0; border-radius: 0; background: none; }
  .heros .capture__champ, .acces .capture__champ {
    width: 100%; height: 52px; padding: 0 14px; border: 1px solid rgba(201, 209, 218, 0.5); border-radius: var(--r-10); background: rgba(243, 245, 247, 0.04);
  }
  /* Champ bordé sur mobile : bordure et halo de la spec 02 § 4.3 */
  .heros .capture__champ:focus, .acces .capture__champ:focus { outline: none; border-color: var(--laiton-clair); box-shadow: 0 0 0 3px rgba(211, 180, 126, 0.25); }
  .heros .capture__champ[aria-invalid="true"], .acces .capture__champ[aria-invalid="true"] { border-color: var(--erreur-nuit-bord); box-shadow: none; }
  .heros .capture__bouton, .acces .capture__bouton { width: 100%; height: 52px; border-radius: var(--r-10); font-size: 16px; }
  .heros__decodeur { display: flex; height: 48px; border-radius: var(--r-10); }
  .heros__sous { margin-top: 12px; }
  .virement-figure { margin-top: 40px; }
  .virement__cote, .virement__croix { display: none; }
  .virement__ligne {
    grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'date statuts' 'libelle montant';
    gap: 6px 12px; min-height: 0; padding: 14px 16px; box-shadow: 0 20px 40px -24px rgba(0, 0, 0, 0.7);
  }
  .virement__date { grid-area: date; font-size: 13px; line-height: 18px; }
  .virement__statuts { grid-area: statuts; }
  .virement__libelle { grid-area: libelle; font-size: 14px; line-height: 20px; }
  .virement__montant { grid-area: montant; font-size: 22px; line-height: 28px; }
  .pastille-statut { gap: 6px; padding: 3px 10px 3px 8px; font-size: 11px; line-height: 16px; }
  .pastille-statut--justifier svg { width: 11px; height: 11px; }
  .pastille-statut--rapproche svg { width: 16px; height: 11px; }
  .tiroir-clip { margin: 8px -60px -100px; padding: 0 60px 100px; }
  .tiroir { box-shadow: 0 36px 72px -36px rgba(0, 0, 0, 0.75); }
  .tiroir__decomposition { padding: 16px 18px 14px; }
  .tiroir__rapprochement { padding: 14px 18px 18px; border-left: 0; border-top: 1px solid rgba(201, 209, 218, 0.10); }
  .tiroir .etiquette { margin: 0 0 2px; }
  .tiroir__rangee { gap: 12px; min-height: 44px; font-size: 14px; }
  .tiroir__rapprochement .tiroir__rangee { min-height: 40px; border-bottom: 0; }
  .tiroir__total { gap: 12px; min-height: 54px; }
  .tiroir__total-montant { font-size: 22px; line-height: 28px; }
  .tiroir .ecart-cadre { margin-top: 10px; display: flex; }
  .ecart-cadre__etiquette { padding: 0 12px; }
  .ecart-cadre__valeur { flex: 1 1 auto; padding: 6px 12px 6px 14px; font-size: 26px; line-height: 36px; }
  .ecart-cadre__fleau { margin-right: 10px; }
  .fleau { top: 21px; }
  .fleau__pivot { top: 23px; }
  .tiroir__ecritures-tete { margin: 16px 0 8px; gap: 6px 8px; }
  .tiroir__formats { gap: 6px; }
  .format { padding: 4px 10px; font-size: 12px; line-height: 18px; }
  .virement__legende { margin: 14px 0 0; font-size: 12px; line-height: 18px; }

  .cascade { margin-top: 26px; padding: 18px; border-radius: var(--r-16); box-shadow: 0 1px 2px rgba(15, 27, 43, 0.05), 0 30px 60px -44px rgba(15, 27, 43, 0.4); }
  .cascade__tete { display: block; }
  .cascade__corps { margin-top: 10px; display: block; }
  .cascade__graphique { overflow: visible; }
  .cascade__interieur { width: auto; }
  .cascade__rangee { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: auto; min-height: 46px; font-size: 14px; border-bottom: 1px solid var(--filet-leger); }
  .cascade__rangee--litige { border-bottom: 0; }
  .cascade__rangee--net { min-height: 48px; border-top: 1px solid var(--nuit); border-bottom: 0; }
  .cascade__rangee--releve { min-height: 46px; border-top: 1px solid var(--filet-leger); border-bottom: 0; }
  .cascade__piste { display: none; }
  .cascade__valeur { white-space: nowrap; }
  .cascade__rangee--ventes .cascade__valeur { font-weight: 600; }
  .ecart-col { padding-left: 0; border-left: 0; min-width: 0; }
  .ecart-panneau { margin-top: 6px; padding: 16px 14px 14px; border-radius: var(--r-12); background: var(--papier); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .ecart-texte { display: flex; flex-direction: column; }
  .ecart-col .etiquette { margin: 0; }
  .ecart-valeurs { margin-top: 4px; font-size: 30px; line-height: 36px; }
  .ecart-col .balance { margin-top: 0; flex: none; width: 132px; height: 64px; }
  .balance__fleau { left: 6px; top: 16px; width: 120px; }
  .balance__plateau { top: -10px; width: 10px; height: 10px; }
  .balance__plateau--g { left: 5px; }
  .balance__plateau--d { right: 5px; }
  .balance__pivot { left: 61px; top: 19px; border-left-width: 5px; border-right-width: 5px; border-bottom-width: 8px; }
  .balance__fut { left: 65.5px; top: 27px; height: 28px; }
  .balance__socle { left: 42px; top: 55px; width: 48px; }
  .ecart-ok { margin: 12px 0 0; }
  .cascade__pied { margin-top: 14px; padding-top: 14px; display: block; }
  .cascade__ecritures { display: block; font-size: 13px; line-height: 20px; }
  .cascade__ecritures .badge { display: block; width: fit-content; margin-top: 6px; }
  .etapes { margin: 28px 0 0; display: flex; flex-direction: column; gap: 18px; }
  .etape { padding-top: 12px; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 2px 0; }
  .etape__num { line-height: 22px; }
  .etape__corps { gap: 2px; }
  .etape__corps--badge { gap: 4px; }
  .etape__titre { font-size: 16px; line-height: 22px; }
  .etape__texte { font-size: 14px; line-height: 21px; }

  .decodeur { border-top: 0; }
  .decodeur__conteneur { padding-bottom: 104px; }
  .decodeur__tete { display: block; }
  .encart-cadenas { margin-top: 18px; gap: 10px; padding: 12px 14px; border-radius: var(--r-8); font-size: 14px; line-height: 21px; }
  .encart-cadenas svg { margin-top: 2px; }
  .depot-carte { margin-top: 22px; padding: 14px; border-radius: var(--r-16); box-shadow: 0 36px 72px -36px rgba(0, 0, 0, 0.75); }
  .fichiers { display: flex; flex-direction: column; gap: 8px; }
  .fichier { padding: 12px 14px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: 'num titre badge'; align-items: center; gap: 0 8px; }
  .fichier__tete { display: contents; }
  .fichier__num { grid-area: num; font-size: 14px; line-height: 20px; }
  .fichier .badge { grid-area: badge; flex: none; }
  .fichier__titre { grid-area: titre; margin: 0; font-size: 14px; line-height: 20px; }
  .depot { margin-top: 10px; flex-direction: column; align-items: center; gap: 8px; padding: 22px 16px 16px; text-align: center; }
  .depot__texte { flex-direction: column; gap: 8px; }
  .depot__texte svg { width: 26px; height: 26px; }
  .depot__titre { font-size: 16px; line-height: 23px; }
  .depot__sous { margin: 0; font-size: 13px; line-height: 20px; }
  .depot__actions { margin-top: 6px; width: 100%; flex-direction: column; gap: 8px; }
  .depot__boutons { width: 100%; flex-direction: column; gap: 8px; }
  .depot__bouton { width: 100%; height: 46px; padding: 0; border-radius: var(--r-8); }
  .depot__aide { margin-top: 4px; display: inline-flex; align-items: center; min-height: 44px; }

  .resultat .conteneur { padding: 0 var(--marge) 60px; }
  .resultat__carte { margin-top: -72px; padding: 18px 16px 16px; border-radius: var(--r-16); box-shadow: 0 1px 2px rgba(15, 27, 43, 0.05), 0 30px 60px -36px rgba(15, 27, 43, 0.45); }
  .resultat__tete { align-items: flex-start; gap: 12px; flex-wrap: nowrap; }
  .resultat__sous { margin: 2px 0 0; font-size: 12px; line-height: 18px; }
  .resultat__csv { flex: none; width: 44px; height: 44px; padding: 0; gap: 0; border-radius: var(--r-8); }
  .resultat__csv svg { width: 16px; height: 16px; }
  .resultat__outils { margin-top: 14px; }
  .filtres { width: 100%; flex-wrap: nowrap; }
  .filtre { flex: 1 1 auto; justify-content: center; padding: 0 10px; }
  .filtre__compte { font-weight: 500; color: var(--encre-secondaire); margin-left: 0.3em; }
  .filtre--actif .filtre__compte { color: var(--argent); }
  .resultat__suite { margin-top: 8px; font-size: 12px; line-height: 18px; }
  .resultat__suite .lien-fleche { min-height: 44px; font-size: 13px; }
  .attention { margin-top: 10px; padding-top: 14px; display: block; }
  .attention__titre { font-size: 14px; line-height: 21px; }
  .attention__sous { font-size: 12px; line-height: 18px; }
  .attention .avis { margin-top: 10px; padding: 12px; }

  .cabinets .conteneur { padding: 60px var(--marge) 64px; }
  .cabinets__conteneur { display: block; }
  .cabinets__chapeau { margin-top: 12px; }
  .promesses { margin-top: 22px; }
  .promesses svg { margin-top: 6px; }
  .promesses span { font-size: 15px; line-height: 23px; }
  .cabinets__invitation { margin-top: 20px; display: block; }
  .cabinets__invitation .lien-fleche { display: flex; width: fit-content; min-height: 44px; }
  .citation { margin-top: 18px; padding-left: 16px; }
  .citation blockquote { font-size: 16px; line-height: 25px; }
  .citation figcaption { margin-top: 8px; font-size: 13px; line-height: 20px; }
  .carte-pilote { margin-top: 32px; padding: 22px 18px 18px; border-radius: var(--r-16); box-shadow: 0 36px 72px -40px rgba(0, 0, 0, 0.75); }
  .carte-pilote__titre { font-size: 19px; line-height: 26px; }
  .carte-pilote__sous { margin-top: 4px; }
  .carte-pilote__champs { margin-top: 20px; gap: 14px; }
  .carte-pilote__duo { gap: 14px; }
  .carte-pilote .champ-nuit { height: 48px; }
  .carte-pilote .selecteur select { font-size: 16px; }
  .carte-pilote .selecteur svg { top: 18px; }
  .carte-pilote__bouton { height: 52px; border-radius: var(--r-10); }
  .carte-pilote__lien { margin-top: 16px; padding-top: 14px; min-height: 44px; }

  .tarifs .conteneur { padding: 60px var(--marge) 56px; }
  .tarifs__tete { max-width: none; text-align: left; }
  .tarifs__calendrier { margin-top: 16px; display: flex; align-items: flex-start; padding: 9px 12px; border-radius: var(--r-8); font-size: 13px; line-height: 19px; }
  .tarifs__calendrier svg { display: block; flex: none; margin-top: 2px; }
  .formules { margin-top: 26px; display: flex; flex-direction: column; gap: 14px; }
  .formule { padding: 22px 20px 20px; border-radius: var(--r-16); }
  .formule--avant { margin-top: 8px; padding: 26px 20px 20px; box-shadow: 0 32px 64px -36px rgba(15, 27, 43, 0.6); }
  .badge--recommande { top: -12px; left: 20px; }
  .formule__nom { font-size: 18px; line-height: 26px; }
  .formule__volume { margin-top: 2px; }
  .formule__prix { margin-top: 16px; }
  .formule__montant { font-size: 40px; line-height: 44px; }
  .formule__mention { margin-top: 4px; }
  .formule .bouton { margin-top: 18px; border-radius: var(--r-10); }
  .inclus { margin-top: 14px; padding: 20px 20px 18px; border-radius: var(--r-16); }
  .inclus ul { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
  .tarifs__note { margin-top: 16px; font-size: 13px; line-height: 20px; }

  .echeance { background-image: radial-gradient(ellipse 100% 45% at 10% 0%, rgba(184, 149, 90, 0.10) 0%, rgba(15, 27, 43, 0) 70%); }
  .echeance .conteneur { padding: 60px var(--marge) 60px; }
  .echeance__tete { display: block; }
  .echeance__date { margin-top: 14px; font-size: 56px; line-height: 58px; }
  .echeance__texte-col { max-width: none; }
  .echeance__texte { margin-top: 18px; font-size: 16px; line-height: 25px; }
  .echeance__bouton { margin-top: 20px; border-radius: var(--r-10); }
  .frise { display: none; }
  .frise-mobile { display: block; }

  .faq .conteneur { padding: 60px var(--marge) 60px; }
  .faq__conteneur { display: block; }
  .faq .faq-liste { margin-top: 22px; }
  .faq-liste summary { gap: 16px; }
  .faq__q { font-size: 16px; line-height: 23px; }
  .faq__reponse { padding: 0 0 18px; font-size: 15px; line-height: 23px; }
  .faq__contact { margin-top: 20px; max-width: none; font-size: 15px; line-height: 23px; }

  .acces { background-image: radial-gradient(ellipse 100% 55% at 50% 0%, rgba(201, 209, 218, 0.14) 0%, rgba(201, 209, 218, 0.04) 50%, rgba(15, 27, 43, 0) 78%); }
  .acces__conteneur { padding: 64px var(--marge) 64px; }
  .acces__symbole { width: 56px; height: 49px; }
  .acces__titre { margin-top: 24px; }
  .acces__chapeau { margin-top: 12px; }
  .acces__capture { margin-top: 26px; max-width: none; display: flex; flex-direction: column; gap: 8px; padding: 0; border: 0; border-radius: 0; background: none; }
  .acces__sous { margin-top: 14px; }

  .pied__contenu { padding: 48px var(--marge) 32px; }
  .pied__haut { display: block; }
  .pied__marque { max-width: none; gap: 12px; }
  .pied__marque img { height: 22px; }
  .pied__nav { margin-top: 32px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px 20px; }
  .pied__nav--contact { grid-column: 1 / -1; }
  .pied__nav .etiquette { margin-bottom: 8px; }
  .pied__nav ul { gap: 0; }
  .pied__nav a { display: inline-block; padding: 6px 0; }
  .pied__bas { margin-top: 32px; padding-top: 20px; }

  .boite__corps { padding: 26px 20px 22px; }
  .boite__titre { font-size: 20px; line-height: 27px; }
  .bandeau-cab__contenu { padding: 10px var(--marge); }
}
@media (max-width: 359px) {
  .filtres { flex-wrap: wrap; }
}
/* Décodeur, ≤ 959 px : quatre étapes « Comment obtenir mes fichiers ? » sur deux colonnes */
@media (max-width: 959px) {
  .dec-aide__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dec-detail__grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .dec-detail__points { grid-column: 1 / -1; }
}
/* Décodeur, ≤ 899 px : la synthèse et la décomposition passent en lignes, l’opérateur dans une colonne à gauche */
@media (max-width: 899px) {
  .dec-synthese, .dec-detail__tuiles { display: grid; grid-template-columns: 30px minmax(0, 1fr); }
  .dec-synthese::before, .dec-detail__tuiles::before { content: ''; grid-column: 1; grid-row: 1; background: var(--papier); border-right: 1px solid var(--filet-moyen); border-bottom: 1px solid var(--filet-moyen); }
  .dec-synthese .dec-tuile, .dec-detail__tuiles .dec-tuile {
    grid-column: 2; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'libelle montant' 'sous montant';
    align-content: center; align-items: center; column-gap: 10px; min-height: 48px; padding: 8px 12px 8px 20px; border-bottom: 1px solid var(--filet-moyen);
  }
  .dec-synthese .dec-tuile:last-child, .dec-detail__tuiles .dec-tuile:last-child { border-bottom: 0; }
  .dec-synthese .dec-tuile--ventes { min-height: 50px; }
  .dec-tuile__libelle { grid-area: libelle; font-size: 13px; line-height: 19px; }
  .dec-tuile__sous { grid-area: sous; font-size: 12px; line-height: 17px; }
  .dec-tuile__montant { grid-area: montant; margin: 0; padding: 0; font-size: 16px; line-height: 24px; letter-spacing: 0; }
  .dec-tuile--net .dec-tuile__montant { font-size: 18px; }
  .dec-operateur { grid-column: 1; width: auto; border-left: 0; border-bottom: 1px solid var(--filet-moyen); font-size: 15px; }
  .dec-operateur:nth-last-child(2) { border-bottom: 0; }
}
/* Décodeur, ≤ 759 px : maquette decodeur-mobile (390 px, gouttières 20 px) */
@media (max-width: 759px) {
  .dec-bandeau .bandeau-cab__contenu { display: block; min-height: 0; padding: 10px var(--marge); font-size: 13px; line-height: 20px; text-align: left; }
  .dec-bandeau a { min-height: 32px; }
  .dec-haut { background: radial-gradient(ellipse 95% 45% at 70% 0%, rgba(201, 209, 218, 0.14) 0%, rgba(201, 209, 218, 0.04) 50%, rgba(15, 27, 43, 0) 80%) center top / 100% 1216px no-repeat, var(--nuit); }
  .dec-haut .haut__trame { height: 760px; }

  .dec-heros { display: block; padding: 32px var(--marge) 40px; }
  .dec-heros__texte { padding-top: 0; }
  .dec-heros__titre { margin-top: 14px; font-size: 36px; line-height: 40px; }
  .dec-heros__chapeau { margin-top: 14px; font-size: 16px; line-height: 25px; }
  .dec-heros__aide { display: none; }
  .dec-depot { margin-top: 22px; padding: 12px; border-radius: var(--r-16); box-shadow: 0 36px 72px -36px rgba(0, 0, 0, 0.75); }
  .dec-zone { padding: 22px 16px 16px; border-radius: var(--r-10); box-shadow: inset 0 2px 14px rgba(0, 0, 0, 0.45); }
  .dec-zone__icone { width: 26px; height: 26px; }
  .dec-zone__titre { margin: 0; font-size: 16px; line-height: 23px; }
  .dec-zone__sous { font-size: 13px; line-height: 20px; }
  .dec-zone__boutons { margin-top: 6px; width: 100%; flex-direction: column; gap: 8px; }
  .dec-zone__bouton { width: 100%; height: 48px; border-radius: var(--r-8); }
  .dec-fichiers { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
  .dec-fichier { padding: 12px 14px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: 'num titre badge' '. nom nom'; align-items: start; gap: 0 8px; }
  .dec-fichier__tete { display: contents; }
  .dec-fichier__num { grid-area: num; font-size: 14px; line-height: 20px; }
  .dec-fichier .badge { grid-area: badge; margin-left: 2px; }
  .dec-fichier__titre { grid-area: titre; margin: 0; font-size: 14px; line-height: 20px; }
  .dec-fichier__nom { grid-area: nom; margin: 4px 0 0; }

  .dec-aide__conteneur { padding: 28px var(--marge) 104px; }
  .dec-aide__resume { gap: 16px; min-height: 44px; }
  .dec-aide__titre { font-size: 20px; line-height: 28px; }
  .dec-aide__liste { margin-top: 12px; display: block; }
  .dec-aide__etape { display: grid; grid-template-columns: 30px minmax(0, 1fr); padding: 14px 0; border: 0; border-top: 1px solid rgba(201, 209, 218, 0.10); border-radius: 0; background: none; }
  .dec-aide__tete { display: block; }
  .dec-aide__num { font-size: 13px; line-height: 22px; }
  .dec-aide__nom { margin: 0; font-size: 15px; line-height: 22px; }
  .dec-aide__texte { margin-top: 4px; }

  .dec-resultat__conteneur { padding: 0 var(--marge) 48px; }
  .dec-carte { margin-top: -72px; border-radius: var(--r-16); box-shadow: 0 1px 2px rgba(15, 27, 43, 0.05), 0 30px 60px -36px rgba(15, 27, 43, 0.45); }
  .dec-carte__haut { padding: 18px 16px 0; }
  .dec-tete { display: block; }
  .dec-tete__sous { margin-top: 4px; font-size: 12px; line-height: 18px; }
  .dec-tete__lien { display: none; }
  .dec-ecart { margin-top: 14px; }
  .dec-ecart__etiquette { padding: 6px 12px; }
  .dec-ecart__precision { font-size: 11px; line-height: 15px; }
  .dec-ecart__valeur { flex: 1 1 auto; padding: 6px 12px; font-size: 26px; line-height: 34px; }
  .dec-ecart__fleau { width: 56px; margin-right: 10px; }
  .dec-fleau { left: 4px; top: 21px; width: 48px; }
  .dec-fleau__pivot { left: 23.5px; top: 23px; }
  .dec-synthese { margin-top: 12px; }

  .dec-ancres { position: static; margin: 14px 16px 16px; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; border: 0; background: none; }
  .dec-ancres .dec-ancre { justify-content: space-between; min-height: 44px; padding: 0 12px; border: 1px solid var(--filet); border-radius: var(--r-8); background: var(--blanc); font-size: 13px; line-height: 18px; color: var(--nuit); }
  .dec-ancres .dec-ancre[aria-current] { border-color: var(--nuit); box-shadow: none; }

  .dec-bloc { padding: 22px 16px 18px; }
  .dec-bloc--virements { padding-bottom: 16px; border-top: 1px solid var(--filet-moyen); }
  .dec-bloc__tete { flex-wrap: nowrap; gap: 12px; }
  .dec-bloc__titre { font-size: 20px; line-height: 27px; scroll-margin-top: 16px; }
  .dec-bloc__sous { font-size: 13px; line-height: 20px; }
  .dec-csv { height: 40px; padding: 0 12px; gap: 6px; border-radius: var(--r-8); font-size: 13px; }
  .dec-outils { margin-top: 14px; display: block; }
  .dec-outils__gauche { display: block; }
  .dec-recherche { width: 100%; }
  .dec-recherche svg { top: 14px; }
  .dec-recherche__champ { height: 44px; font-size: 16px; }
  .dec-filtres { margin-top: 10px; }
  .dec-filtre--vide:not(.filtre--actif) { display: none; }
  .dec-densite { display: none; }

  .dec-fiches { margin: 12px -16px 0; border-top: 1px solid var(--filet); }
  .dec-fiche { border-bottom: 1px solid var(--filet-leger); }
  .dec-fiche:hover { background: var(--ligne-survol); }
  .dec-fiche.est-choisie { background: var(--fond-laiton); box-shadow: inset 3px 0 0 var(--laiton); }
  .dec-fiche__bouton { all: unset; box-sizing: border-box; display: grid; width: 100%; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 11px 12px 11px 14px; cursor: pointer; }
  .dec-fiche__bouton:focus-visible { outline: 2px solid var(--laiton-fonce); outline-offset: -3px; }
  .dec-fiche__date, .dec-fiche__net { font-size: 14px; line-height: 21px; font-weight: 600; }
  .dec-fiche__net { text-align: right; white-space: nowrap; }
  .dec-fiche__statut { font-size: 12px; line-height: 18px; color: var(--encre-secondaire); }
  .dec-fiche__statut svg { display: inline; vertical-align: -1px; margin-right: 6px; }
  .dec-fiche__statut--erreur { color: var(--erreur-clair); }
  .dec-fiche__detail { color: var(--encre-tertiaire); }
  .dec-fiche__ecart { font-size: 12px; line-height: 18px; color: var(--encre-secondaire); text-align: right; white-space: nowrap; }
  .dec-fiches .dec-vide { padding: 20px 16px; text-align: center; font-size: 13px; color: var(--encre-secondaire); }
  .dec-fiche-detail { overflow: hidden; padding: 4px 14px 16px; border-bottom: 1px solid var(--filet-laiton); background: var(--fond-laiton); box-shadow: inset 3px 0 0 var(--laiton); }
  .dec-fd__boite { padding: 4px 14px; border: 1px solid var(--filet-moyen); border-radius: var(--r-10); background: var(--blanc); }
  .dec-fd__ligne { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--filet-leger); font-size: 13px; line-height: 19px; }
  .dec-fd__ligne:nth-last-child(3) { border-bottom: 0; }
  .dec-fd__ligne--net { padding: 10px 0; border-top: 1px solid var(--nuit); border-bottom: 0; font-size: 14px; line-height: 20px; font-weight: 600; }
  .dec-fd__ligne--banque { border-top: 1px solid var(--filet-leger); border-bottom: 0; }
  .dec-fd__montant { white-space: nowrap; }
  .dec-fd__sous { display: block; font-size: 12px; line-height: 17px; color: var(--encre-tertiaire); }
  .dec-fd__ecart { margin-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border: 1.5px solid var(--laiton); border-radius: var(--r-10); background: var(--blanc); }
  .dec-fd__ecart-texte { display: flex; align-items: baseline; gap: 10px; }
  .dec-fd__ecart-mot { font-size: 11px; line-height: 16px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: var(--laiton-encre); }
  .dec-fd__ecart-valeur { font-size: 22px; line-height: 28px; font-weight: 500; letter-spacing: -0.02em; }
  .dec-fd__voir { margin-top: 10px; width: 100%; height: 44px; }
  .dec-fiches-total.mobile { display: grid; margin: 0 -16px; padding: 12px 16px; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: baseline; background: var(--papier); border-top: 1px solid var(--argent); font-weight: 600; }
  .dec-fiches-total span:first-child { font-size: 14px; line-height: 21px; }
  .dec-fiches-total span:last-child { font-size: 15px; line-height: 21px; white-space: nowrap; }
  .dec-pages { justify-content: center; font-size: 12px; line-height: 18px; text-align: center; }
  .dec-pages__outils { display: none; }
  .dec-pages--plusieurs .dec-pages__outils { display: flex; }
  .dec-pages--plusieurs .dec-pages__libelle, .dec-pages--plusieurs .dec-pages__choix { display: none; }

  .dec-attention { margin-top: 16px; display: block; }
  .dec-attention__colonne + .dec-attention__colonne { margin-top: 18px; }
  .dec-attention__titre { margin: 0 0 8px; }
  .dec-attention__titre--info { margin-bottom: 4px; }
  .dec-attention__liste--verifier { gap: 8px; }
  .dec-attention__liste--verifier .dec-avis { gap: 10px; padding: 12px; }
  .dec-attention__liste--verifier .dec-avis__titre { font-size: 14px; line-height: 20px; }
  .dec-attention__liste--verifier .dec-avis__texte { font-size: 13px; line-height: 20px; }
  .dec-avis__puce { margin-top: 6px; }
  .dec-attention__liste--info { padding: 0; border: 0; background: none; }
  .dec-attention__liste--info .dec-avis { gap: 10px; padding: 11px 2px; }
  .dec-attention__liste--info .dec-avis__titre, .dec-attention__liste--info .dec-avis__texte { font-size: 13px; line-height: 19px; }

  .dec-fiches-pp.mobile { margin-top: 10px; }
  .dec-fiche-pp { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 11px 2px; border-bottom: 1px solid var(--filet-leger); }
  .dec-fiche-pp:last-child { border-bottom: 0; }
  .dec-fiche-pp__date, .dec-fiche-pp__montant { font-size: 14px; line-height: 21px; font-weight: 600; }
  .dec-fiche-pp__montant { text-align: right; white-space: nowrap; }
  .dec-fiche-pp__ligne, .dec-fiche-pp__detail { grid-column: 1 / -1; font-size: 12px; line-height: 18px; }
  .dec-fiche-pp__ligne { color: var(--encre-secondaire); }
  .dec-fiche-pp__detail { color: var(--encre-tertiaire); }
  .dec-reste { gap: 6px; }

  .dec-tableau-cadre--tva { margin-top: 14px; }
  .dec-tableau--tva { min-width: 300px; font-size: 12px; line-height: 17px; }
  .dec-tableau--tva th { height: 36px; padding: 0 4px; font-size: 11px; line-height: 14px; }
  .dec-tableau--tva td { height: 40px; padding: 0 4px; }
  .dec-tableau--tva tfoot td { height: 44px; padding: 0 4px; }
  .dec-tableau--tva th:first-child, .dec-tableau--tva td:first-child { padding-left: 10px; }
  .dec-tableau--tva th:last-child, .dec-tableau--tva td:last-child { padding-right: 10px; }
  .dec-tva-pays { width: 68px; }
  .dec-tva-taux { width: 38px; }
  .dec-tva-montant { width: 73px; }
  .dec-tva-tva { width: 62px; }
  .dec-pays { display: inline-flex; align-items: center; white-space: nowrap; }
  .dec-pays__code { width: auto; }
  .dec-pays__nom { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .dec-oss { margin-left: 4px; padding: 0 4px; }
  .dec-note { font-size: 12px; line-height: 18px; }
  .dec-tableau--transactions { min-width: 0; }
  .dec-tableau--transactions .dec-tx-ordi { display: none; }
  .dec-tableau--transactions th:nth-child(3), .dec-tableau--transactions td:nth-child(3) { padding-left: 14px; }

  .dec-acces { display: block; margin-top: 20px; padding: 28px 20px 24px; border-radius: var(--r-16); background: radial-gradient(ellipse 90% 70% at 0% 0%, rgba(201, 209, 218, 0.12) 0%, rgba(15, 27, 43, 0) 70%), var(--nuit); }
  .dec-acces__titre { margin-top: 12px; font-size: 24px; line-height: 30px; }
  .dec-acces__chapeau { margin-top: 10px; font-size: 15px; line-height: 23px; }
  .dec-acces__formulaire { margin-top: 18px; max-width: none; }
  .dec-acces__capture { display: flex; flex-direction: column; gap: 8px; padding: 0; border: 0; border-radius: 0; background: none; }
  .dec-acces__capture .capture__champ { flex: none; width: 100%; height: 52px; padding: 0 14px; border: 1px solid rgba(201, 209, 218, 0.5); border-radius: var(--r-10); background: rgba(243, 245, 247, 0.04); }
  .dec-acces__capture .capture__champ:focus { outline: none; border-color: var(--laiton-clair); box-shadow: 0 0 0 3px rgba(211, 180, 126, 0.25); }
  .dec-acces__capture .capture__champ[aria-invalid="true"] { border-color: var(--erreur-nuit-bord); box-shadow: none; }
  .dec-acces__capture .capture__bouton { width: 100%; height: 52px; border-radius: var(--r-10); font-size: 16px; }
}
/* Experts-comptables, ≤ 759 px : maquette cabinets-mobile (390 px, gouttières 20 px) */
@media (max-width: 759px) {
  .cab-haut { background: radial-gradient(ellipse 55% 70% at 25% 0%, rgba(201, 209, 218, 0.13) 0%, rgba(201, 209, 218, 0.03) 50%, rgba(15, 27, 43, 0) 78%) center top / 100% 1103px no-repeat, var(--nuit); }

  .cab-heros { display: block; padding: 36px var(--marge) 56px; }
  .cab-heros__texte { padding-top: 0; }
  .cab-heros__titre { margin-top: 14px; font-size: 36px; line-height: 40px; }
  .cab-heros__chapeau { margin-top: 14px; font-size: 16px; line-height: 25px; }
  .cab-heros__actions { margin-top: 22px; display: block; }
  .cab-heros__decodeur { display: flex; width: 100%; height: 48px; padding: 0; border-color: rgba(201, 209, 218, 0.26); font-size: 15px; }
  .cab-heros__decodeur svg { flex: none; }
  .cab-heros__poste { display: block; margin-top: 10px; text-align: center; font-size: 13px; line-height: 20px; }
  .cab-heros__poste svg { display: none; }
  .cab-pilote { margin-top: 30px; padding: 22px 18px 20px; box-shadow: var(--ombre-coffre); }
  .cab-pilote .carte-pilote__titre { line-height: 28px; }

  .cab-recevez__conteneur { padding-top: 56px; padding-bottom: 56px; }
  .cab-cartes { margin-top: 26px; flex-direction: column; gap: 14px; }
  .cab-carte { flex: none; padding: 20px 18px; border-radius: var(--r-16); }
  .cab-carte__titre { font-size: 17px; line-height: 24px; }
  .cab-carte__corps { margin-top: 16px; }

  .cab-test__conteneur { display: block; }
  .cab-test__cadenas { margin-top: 16px; font-size: 14px; line-height: 22px; }
  .cab-test__cadenas svg { margin-top: 3px; }
  .cab-test__bouton { margin-top: 20px; display: flex; width: 100%; height: 52px; }
  .cab-fichiers { margin-top: 24px; }

  .cab-deroulement { display: block; }
  .cab-etapes { margin-top: 24px; max-width: none; gap: 18px; }
  .cab-etape__titre { font-size: 16px; }
  .cab-etape__texte { font-size: 14px; line-height: 21px; }
  .cab-calendrier { margin-top: 28px; padding: 16px; flex-direction: column; align-items: stretch; gap: 12px; }
  .cab-calendrier__texte { flex-basis: 100%; padding-left: 32px; }
  .cab-deroulement__bouton { margin-top: 22px; display: flex; width: 100%; height: 52px; }
  .cab-citation { margin-top: 32px; padding: 22px 20px; border-radius: var(--r-16); }
  .cab-citation blockquote { font-size: 16px; line-height: 25px; }

  .cab-faq .conteneur { padding: 56px var(--marge) 56px; }
  .cab-faq__conteneur { display: block; }
  .cab-faq__intro { max-width: none; }
  .cab-faq__contact { margin-top: 12px; font-size: 15px; line-height: 23px; }
  .cab-faq__liste { margin-top: 20px; }

  .cab-appel__actions { margin-top: 26px; width: 100%; flex-direction: column; gap: 8px; }
  .cab-appel__actions .bouton { display: flex; width: 100%; height: 52px; }
}

/* --------------------------------------------------------------------------
   (f) Mouvement
   Seulement transform et opacity. Chaque séquence (.sequence) se joue une fois :
   le script pose « est-lancee » au départ (chargement pour le héros, 40 % de
   visibilité pour la cascade) puis « est-jouee » à la fin. Avant le départ, les
   éléments sont dans leur état de départ ; sans script ou en mode Calme, ils sont
   dans leur état final (celui du CSS de base).
   -------------------------------------------------------------------------- */
@keyframes apparait { from { opacity: 0; } to { opacity: 1; } }
@keyframes disparait { from { opacity: 1; } to { opacity: 0; } }
@keyframes apparait-haut { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes apparait-bas { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes apparait-descend { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes passe { 0% { opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; } }
@keyframes tiroir-masque { from { opacity: 0; transform: translateY(-100%); } to { opacity: 1; transform: none; } }
@keyframes tiroir-contre { from { transform: translateY(100%); } to { transform: none; } }
@keyframes fleau-equilibre { from { transform: rotate(-8deg); } to { transform: rotate(0deg); } }
@keyframes barre-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes repere-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
/* La grande balance s’incline à chaque étape (103,03 € → 73,30 € → 14,40 €) puis se pose à 0,00 € ; 4 s */
@keyframes balance-oscille {
  0%, 25% { transform: rotate(-3deg); }
  32.5%, 42.5% { transform: rotate(3deg); }
  50%, 65% { transform: rotate(2.13deg); }
  72.5%, 82.5% { transform: rotate(.42deg); }
  100% { transform: rotate(0deg); }
}
/* Les quatre étapes s’éclairent à tour de rôle, puis toutes restent allumées ; 7 s */
@keyframes etape-1 { 0%, 15.7% { opacity: 1; } 18.6%, 92.9% { opacity: .4; } 100% { opacity: 1; } }
@keyframes etape-2 { 0% { opacity: .4; } 18.6%, 44.3% { opacity: 1; } 47.1%, 92.9% { opacity: .4; } 100% { opacity: 1; } }
@keyframes etape-3 { 0%, 44.3% { opacity: .4; } 47.1%, 84.3% { opacity: 1; } 87.1%, 92.9% { opacity: .4; } 100% { opacity: 1; } }
@keyframes etape-4 { 0%, 84.3% { opacity: .4; } 87.1%, 100% { opacity: 1; } }

/* Ouverture d’une réponse (questions) */
.faq-liste details[open] .faq__reponse { animation: apparait-haut var(--duree-survol) var(--courbe-survol) both; }

/* États de départ, seulement quand le script est là (classe js posée dans le <head>) et que le
   mouvement n’est ni réduit par le système ni mis en Calme. Si le script ne se charge pas,
   « attente-finie » rend l’état final après quelques secondes. */
@media (prefers-reduced-motion: no-preference) {
  html.js:is(:not(.attente-finie), .script-pret):not([data-mouvement="calme"]) .sequence:not(.est-lancee):not(.est-jouee) :is(.anim--masque, .anim--h1, .anim--h2, .anim--h3, .anim--h4, .anim--h5, .anim--k1, .anim--k2, .anim--x1, .anim--st1, .anim--ex, .anim--v, .anim--c, .anim--ok, .anim--xp, .anim--e4, .anim--ligne) { opacity: 0; }
  html.js:is(:not(.attente-finie), .script-pret):not([data-mouvement="calme"]) .sequence:not(.est-lancee):not(.est-jouee) :is(.anim--x0, .anim--st0, .anim--e0) { opacity: 1; }
  html.js:is(:not(.attente-finie), .script-pret):not([data-mouvement="calme"]) .sequence:not(.est-lancee):not(.est-jouee) .anim--fl { transform: rotate(-8deg); }
  html.js:is(:not(.attente-finie), .script-pret):not([data-mouvement="calme"]) .sequence:not(.est-lancee):not(.est-jouee) .anim--g { transform: rotate(-3deg); }
  html.js:is(:not(.attente-finie), .script-pret):not([data-mouvement="calme"]) .sequence:not(.est-lancee):not(.est-jouee) .anim--b { transform: scaleX(0); }
  html.js:is(:not(.attente-finie), .script-pret):not([data-mouvement="calme"]) .sequence:not(.est-lancee):not(.est-jouee) .anim--m { transform: scaleY(0); }
  html.js:is(:not(.attente-finie), .script-pret):not([data-mouvement="calme"]) .sequence:not(.est-lancee):not(.est-jouee) :is(.anim--s2, .anim--s3, .anim--s4) { opacity: .4; }
}

/* Séquence du héros (frise de la spec 03, en secondes) :
   tiroir 1,0 → 1,6 ; lignes 1,6 → 3,0 ; contrôle banque 2,0 → 2,5 ; fléau 3,0 → 4,2 ;
   écart « — » → 0,00 € 3,6 → 3,9 ; statut 3,9 → 4,5 ; écritures 4,5 → 4,8. */
.sequence.est-lancee .anim--masque { animation: tiroir-masque var(--duree-tiroir) var(--courbe-tiroir) 1s both; }
.sequence.est-lancee .anim--tiroir { animation: tiroir-contre var(--duree-tiroir) var(--courbe-tiroir) 1s both; }
.sequence.est-lancee .anim--h1 { animation: apparait-haut var(--duree-ligne) var(--courbe-sortie) 1.6s both; }
.sequence.est-lancee .anim--h2 { animation: apparait-haut var(--duree-ligne) var(--courbe-sortie) 1.85s both; }
.sequence.est-lancee .anim--h3 { animation: apparait-haut var(--duree-ligne) var(--courbe-sortie) 2.1s both; }
.sequence.est-lancee .anim--h4 { animation: apparait-haut var(--duree-ligne) var(--courbe-sortie) 2.35s both; }
.sequence.est-lancee .anim--h5 { animation: apparait-haut var(--duree-ligne) var(--courbe-sortie) 2.7s both; }
.sequence.est-lancee .anim--k1 { animation: apparait-haut var(--duree-ligne) var(--courbe-sortie) 2s both; }
.sequence.est-lancee .anim--k2 { animation: apparait-haut var(--duree-ligne) var(--courbe-sortie) 2.2s both; }
.sequence.est-lancee .anim--fl { animation: fleau-equilibre var(--duree-balance) var(--courbe-balance) 3s both; }
.sequence.est-lancee .anim--x0 { animation: disparait var(--duree-ligne) var(--courbe-lineaire) 3.6s both; }
.sequence.est-lancee .anim--x1 { animation: apparait var(--duree-ligne) var(--courbe-lineaire) 3.9s both; }
.sequence.est-lancee .anim--st0 { animation: disparait var(--duree-ligne) var(--courbe-lineaire) 3.9s both; }
.sequence.est-lancee .anim--st1 { animation: apparait var(--duree-ligne) var(--courbe-lineaire) 4.2s both; }
.sequence.est-lancee .anim--ex { animation: apparait var(--duree-ligne) var(--courbe-lineaire) 4.5s both; }

/* Cascade « Comment ça marche », à l’entrée dans l’écran (ordre de l’opération, de haut en bas) */
.sequence.est-lancee .anim--e0 { animation: disparait var(--duree-valeur) var(--courbe-lineaire) 1.05s both; }
.sequence.est-lancee .anim--e1 { animation: passe .65s var(--courbe-lineaire) 1.15s both; }
.sequence.est-lancee .anim--e2 { animation: passe .9s var(--courbe-lineaire) 1.8s both; }
.sequence.est-lancee .anim--e3 { animation: passe .7s var(--courbe-lineaire) 2.7s both; }
.sequence.est-lancee .anim--e4 { animation: apparait var(--duree-fondu) var(--courbe-lineaire) 3.4s both; }
.sequence.est-lancee .anim--g { animation: balance-oscille var(--duree-balance-cascade) var(--courbe-balance-cascade) both; }
.sequence.est-lancee .anim--ok { animation: apparait var(--duree-ligne) var(--courbe-lineaire) 4s both; }
.sequence.est-lancee .anim--xp { animation: apparait-bas var(--duree-apparition) var(--courbe-sortie) 6s both; }
.sequence.est-lancee .anim--s1 { animation: etape-1 var(--duree-etapes) var(--courbe-lineaire) both; }
.sequence.est-lancee .anim--s2 { animation: etape-2 var(--duree-etapes) var(--courbe-lineaire) both; }
.sequence.est-lancee .anim--s3 { animation: etape-3 var(--duree-etapes) var(--courbe-lineaire) both; }
.sequence.est-lancee .anim--s4 { animation: etape-4 var(--duree-etapes) var(--courbe-lineaire) both; }
@media (min-width: 760px) {
  .sequence.est-lancee .anim--b1 { animation: barre-x var(--duree-barre-longue) var(--courbe-sortie) .4s both; }
  .sequence.est-lancee .anim--v1 { animation: apparait var(--duree-fondu) var(--courbe-lineaire) .9s both; }
  .sequence.est-lancee .anim--c1 { animation: apparait var(--duree-fondu) var(--courbe-lineaire) 1.2s both; }
  .sequence.est-lancee .anim--b2 { animation: barre-x var(--duree-barre-courte) var(--courbe-sortie) 1.3s both; }
  .sequence.est-lancee .anim--v2 { animation: apparait var(--duree-fondu) var(--courbe-lineaire) 1.6s both; }
  .sequence.est-lancee .anim--c2 { animation: apparait var(--duree-fondu) var(--courbe-lineaire) 2s both; }
  .sequence.est-lancee .anim--b3 { animation: barre-x var(--duree-barre) var(--courbe-sortie) 2.1s both; }
  .sequence.est-lancee .anim--v3 { animation: apparait var(--duree-fondu) var(--courbe-lineaire) 2.5s both; }
  .sequence.est-lancee .anim--c3 { animation: apparait var(--duree-fondu) var(--courbe-lineaire) 2.8s both; }
  .sequence.est-lancee .anim--b4 { animation: barre-x var(--duree-barre-courte) var(--courbe-sortie) 2.9s both; }
  .sequence.est-lancee .anim--v4 { animation: apparait var(--duree-fondu) var(--courbe-lineaire) 3.2s both; }
  .sequence.est-lancee .anim--c4 { animation: apparait var(--duree-fondu) var(--courbe-lineaire) 3.6s both; }
  .sequence.est-lancee .anim--b5 { animation: barre-x var(--duree-barre) var(--courbe-sortie) 3.7s both; }
  .sequence.est-lancee .anim--v5 { animation: apparait var(--duree-fondu) var(--courbe-lineaire) 4.1s both; }
  .sequence.est-lancee .anim--b6 { animation: barre-x var(--duree-barre) var(--courbe-sortie) 4.4s both; }
  .sequence.est-lancee .anim--v6 { animation: apparait var(--duree-fondu) var(--courbe-lineaire) 4.8s both; }
  .sequence.est-lancee .anim--m { animation: repere-y var(--duree-apparition) var(--courbe-sortie) 5.2s both; }
}
@media (max-width: 759px) {
  /* Sur mobile, la cascade laisse la place à la liste chiffrée : les lignes descendent de 6 px */
  .sequence.est-lancee .anim--l1 { animation: apparait-descend var(--duree-ligne) var(--courbe-sortie) .6s both; }
  .sequence.est-lancee .anim--l2 { animation: apparait-descend var(--duree-ligne) var(--courbe-sortie) 1.4s both; }
  .sequence.est-lancee .anim--l3 { animation: apparait-descend var(--duree-ligne) var(--courbe-sortie) 2.3s both; }
  .sequence.est-lancee .anim--l4 { animation: apparait-descend var(--duree-ligne) var(--courbe-sortie) 3s both; }
  .sequence.est-lancee .anim--l5 { animation: apparait-descend var(--duree-ligne) var(--courbe-sortie) 4.1s both; }
  .sequence.est-lancee .anim--l6 { animation: apparait-descend var(--duree-ligne) var(--courbe-sortie) 4.6s both; }
  /* Héros : « Net versé selon Shopify » et « Crédité en banque » après le total (planche mobile, spec 05 § 1.4) */
  .sequence.est-lancee .anim--k1 { animation-delay: 2.9s; }
  .sequence.est-lancee .anim--k2 { animation-delay: 3.1s; }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 760px) {
  html.js:is(:not(.attente-finie), .script-pret):not([data-mouvement="calme"]) .sequence:not(.est-lancee):not(.est-jouee) .anim--ligne { opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 759px) {
  html.js:is(:not(.attente-finie), .script-pret):not([data-mouvement="calme"]) .sequence:not(.est-lancee):not(.est-jouee) :is(.anim--v, .anim--c) { opacity: 1; }
  html.js:is(:not(.attente-finie), .script-pret):not([data-mouvement="calme"]) .sequence:not(.est-lancee):not(.est-jouee) :is(.anim--b, .anim--m) { transform: none; }
}

/* Décodeur (spec 03) : résultats en 240 ms, décalage 40 ms, 20 lignes au plus (le délai est posé par le script) ;
   détail d’un virement en tiroir de 600 ms ; le fléau de l’écart se redresse à l’arrivée du résultat. */
@keyframes dec-fleau { from { transform: rotate(-7deg); } to { transform: rotate(0deg); } }
.dec-tableau .dec-ligne.dec-apparait td { animation: apparait 240ms var(--courbe-sortie) both; animation-delay: inherit; }
.dec-fiche.dec-apparait { animation: apparait-haut 240ms var(--courbe-sortie) both; }
.dec-tiroir__masque.est-ouvrant { animation: tiroir-masque var(--duree-tiroir) var(--courbe-tiroir) both; }
.dec-tiroir__masque.est-ouvrant > .dec-tiroir__corps { animation: tiroir-contre var(--duree-tiroir) var(--courbe-tiroir) both; }
.dec-ecart.est-anime .dec-fleau { animation: dec-fleau var(--duree-balance) var(--courbe-balance) .3s both; }
.dec-ecart.est-anime .dec-ecart__montant { animation: apparait var(--duree-ligne) var(--courbe-lineaire) .6s both; }

/* Experts-comptables : la carte « Chaque écart expliqué » se joue une fois, à l’entrée dans l’écran
   (séquence #sequence-cabinet, 3,6 s) : les cinq lignes du virement descendent de 4 px dans l’ordre
   du calcul (300 ms, une toutes les 250 ms), puis le fléau s’équilibre (1 200 ms) et l’écart passe
   de « — » à 0,00 € (fondus de 300 ms). */
@keyframes cab-ligne { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes cab-fleau { from { transform: rotate(-7deg); } to { transform: rotate(0deg); } }
@media (prefers-reduced-motion: no-preference) {
  html.js:is(:not(.attente-finie), .script-pret):not([data-mouvement="calme"]) .sequence:not(.est-lancee):not(.est-jouee) :is(.anim--cl1, .anim--cl2, .anim--cl3, .anim--cl4, .anim--cl5, .anim--cx1) { opacity: 0; }
  html.js:is(:not(.attente-finie), .script-pret):not([data-mouvement="calme"]) .sequence:not(.est-lancee):not(.est-jouee) .anim--cx0 { opacity: 1; }
  html.js:is(:not(.attente-finie), .script-pret):not([data-mouvement="calme"]) .sequence:not(.est-lancee):not(.est-jouee) .anim--cfl { transform: rotate(-7deg); }
}
.sequence.est-lancee .anim--cl1 { animation: cab-ligne var(--duree-ligne) var(--courbe-sortie) .4s both; }
.sequence.est-lancee .anim--cl2 { animation: cab-ligne var(--duree-ligne) var(--courbe-sortie) .65s both; }
.sequence.est-lancee .anim--cl3 { animation: cab-ligne var(--duree-ligne) var(--courbe-sortie) .9s both; }
.sequence.est-lancee .anim--cl4 { animation: cab-ligne var(--duree-ligne) var(--courbe-sortie) 1.15s both; }
.sequence.est-lancee .anim--cl5 { animation: cab-ligne var(--duree-ligne) var(--courbe-sortie) 1.4s both; }
.sequence.est-lancee .anim--cfl { animation: cab-fleau var(--duree-balance) var(--courbe-balance) 2s both; }
.sequence.est-lancee .anim--cx0 { animation: disparait var(--duree-ligne) var(--courbe-lineaire) 2.6s both; }
.sequence.est-lancee .anim--cx1 { animation: apparait var(--duree-ligne) var(--courbe-lineaire) 2.9s both; }

/* Mode Calme : états finaux, aucune transition, rien de masqué.
   Automatique avec « Réduire les animations » (la préférence système prime toujours, le choix
   « Animé » du site est alors inactif) ; toujours avec le réglage Calme mémorisé (clé « mouvement »).
   Seules exceptions au « pas de !important ». */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
html[data-mouvement="calme"] { scroll-behavior: auto; }
html[data-mouvement="calme"] *, html[data-mouvement="calme"] *::before, html[data-mouvement="calme"] *::after {
  animation: none !important; transition: none !important;
}