/* C’est réglo, interface « bulletin corrigé ». Les noms des variables sont gardés pour ne pas réécrire les règles du résultat. */
:root {
  --fond: #FDFDFB; --feuille: #FFFFFF; --gris: #EDEEEA; --encre: #121417; --texte-courant: #2C3036; --doux: #555B63;
  --filet: #D5D7D1; --trait: #B5B8B1; --trait-fort: #121417;
  --rouge: #C4161C; --jaune: #FFE047;
  --accent: #121417; --accent-fonce: #2B2F35; --accent-fond: #EDEEEA; --sombre: #1B1F24;
  --cuivre: #C9A100; --cuivre-texte: #6B5600; --cuivre-fond: #FFF6CC; --surligne: #FFE047; --surligne-pale: #FFF4B8;
  --erreur: #C4161C; --erreur-fond: #FBE9E7; --verifier: #7A5000; --verifier-fond: #FBEFD3;
  --ok: #1D7048; --ok-fond: #E3F1E8; --info: #3F4650; --info-fond: #EDEEEA;
  --ombre: none;
  --courbe: cubic-bezier(.2, .8, .2, 1);
  --titre: "Atkinson Hyperlegible Next", "Segoe UI", system-ui, sans-serif;
  --texte: "Atkinson Hyperlegible Next", "Segoe UI", system-ui, sans-serif;
  --chiffre: "Atkinson Hyperlegible Mono", Consolas, monospace;
  --main: "Kalam", "Segoe Print", cursive;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fond); color: var(--encre); font: 16px/1.55 var(--texte); overflow-x: clip; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

h1 { font: 700 clamp(32px, 5vw, 50px)/1.08 var(--titre); margin: 0; letter-spacing: -0.03em; text-wrap: balance; }
h2 { font: 700 26px/1.2 var(--titre); margin: 0; letter-spacing: -0.02em; text-wrap: balance; }
h3 { font: 600 18px/1.3 var(--texte); margin: 0; }

.aide { font-size: 14px; color: var(--doux); margin: 0; }

.onglets { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--filet); }
.onglets button { background: none; border: 0; border-bottom: 3px solid transparent; padding: 10px 14px; font-weight: 600; color: var(--doux); cursor: pointer; }
.onglets button[aria-selected="true"] { color: var(--encre); border-bottom-color: var(--encre); }

.convention, .recherche { display: grid; gap: 8px; background: var(--feuille); border: 1px solid var(--filet); padding: 16px 18px; }
.convention label, .recherche label, .contrat-options label { font-weight: 600; }
.convention-ligne { display: flex; flex-wrap: wrap; gap: 8px; }
.convention-ligne input { flex: 1 1 280px; min-width: 0; }
input, select, textarea { background: var(--feuille); border: 1px solid var(--trait); border-radius: 10px; padding: 10px 12px; }
textarea { width: 100%; resize: vertical; font-size: 14px; }
.principal { background: var(--accent); color: #fff; border: 0; border-radius: 999px; padding: 11px 20px; font-weight: 600; cursor: pointer; }
.principal:hover { background: var(--accent-fonce); }
.discret { background: var(--feuille); border: 1px solid var(--trait); border-radius: 999px; padding: 10px 14px; cursor: pointer; }
.lien { background: none; border: 0; padding: 0; color: var(--accent); text-decoration: underline; cursor: pointer; }

.progression { margin: 0; padding: 12px 14px; background: var(--info-fond); color: var(--info); font-size: 15px; display: flex; align-items: center; gap: 10px; }
.progression::before { content: ""; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: tourne .8s linear infinite; flex: none; }
@keyframes tourne { to { transform: rotate(360deg); } }
.lu-titre { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px; }
.contrat-options { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

/* Lecture : ce que l'outil a lu, corrigeable avant analyse */
.lu { background: var(--feuille); border: 1px solid var(--filet); }
.lu > summary { padding: 14px 18px; cursor: pointer; font-weight: 600; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; }
.lu > summary small { font-weight: 400; color: var(--doux); }
.champs { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; padding: 4px 18px 18px; }
.champs label { display: grid; gap: 4px; font-size: 13px; color: var(--doux); }
.champs input { font-family: var(--chiffre); font-size: 14px; padding: 8px 10px; color: var(--encre); }
.lignes-lues { padding: 0 18px 18px; overflow-x: auto; }
.lignes-lues table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 13px; }
.lignes-lues th, .lignes-lues td { padding: 5px 8px; border-bottom: 1px solid var(--filet); text-align: right; }
.lignes-lues th:first-child, .lignes-lues td:first-child { text-align: left; }
.lignes-lues td { font-family: var(--chiffre); }
.lignes-lues td:first-child { font-family: var(--texte); }
.alerte-lecture { margin: 0 18px 14px; padding: 10px 12px; background: var(--verifier-fond); color: var(--verifier); font-size: 14px; }

/* Rapport */
.bilan { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1px; background: var(--filet); border: 1px solid var(--filet); }
.bilan div { background: var(--feuille); padding: 16px 18px; display: grid; gap: 2px; }
.bilan b { font: 600 30px/1.1 var(--chiffre); font-variant-numeric: tabular-nums; }
.bilan span { font-size: 14px; color: var(--doux); }
.bilan .somme b { background: linear-gradient(transparent 55%, var(--surligne) 55%); justify-self: start; }
.rapport { display: grid; gap: 18px; }
.mois { background: var(--feuille); border: 1px solid var(--filet); }
.mois > header { padding: 14px 18px; border-bottom: 1px solid var(--filet); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; align-items: baseline; }
.mois > header span { color: var(--doux); font-size: 14px; }
.constats { list-style: none; margin: 0; padding: 0; }
.constat { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 4px 14px; padding: 14px 18px; border-top: 1px solid var(--filet); }
.constat:first-child { border-top: 0; }
.niveau { font: 600 12px/1 var(--texte); letter-spacing: .04em; text-transform: uppercase; padding: 6px 8px; border-radius: 3px; align-self: start; text-align: center; }
.niveau.erreur { background: var(--erreur-fond); color: var(--erreur); }
.niveau.verifier { background: var(--verifier-fond); color: var(--verifier); }
.niveau.conforme { background: var(--ok-fond); color: var(--ok); }
.niveau.info { background: var(--info-fond); color: var(--info); }
.constat p { margin: 4px 0 0; color: var(--encre); }
.constat .calcul { font: 13px/1.5 var(--chiffre); color: var(--doux); }
.constat .du { font-weight: 700; color: var(--erreur); }
.refs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.refs button { font: 500 13px/1 var(--chiffre); background: var(--info-fond); border: 1px solid var(--trait); border-radius: 3px; padding: 6px 8px; cursor: pointer; }
.texte-officiel { margin-top: 10px; padding: 12px 14px; border-left: 3px solid var(--accent); background: var(--fond); font-size: 14px; white-space: pre-line; }
.texte-officiel cite { display: block; font-style: normal; font-size: 12px; color: var(--doux); margin-bottom: 6px; }
.conformes summary { padding: 12px 18px; cursor: pointer; color: var(--doux); font-size: 14px; border-top: 1px solid var(--filet); }

.bloc { background: var(--feuille); border: 1px solid var(--filet); padding: 18px; display: grid; gap: 12px; }
.themes { display: grid; gap: 6px; }
.themes details { border: 1px solid var(--filet); }
.themes summary { padding: 10px 12px; cursor: pointer; font-weight: 600; }
.themes .article { padding: 10px 14px; border-top: 1px solid var(--filet); font-size: 14px; white-space: pre-line; }
.themes .article cite { display: block; font-style: normal; font-size: 12px; color: var(--doux); margin-bottom: 4px; }
.grille { overflow-x: auto; }
.grille table { border-collapse: collapse; min-width: 520px; width: 100%; font-size: 13px; }
.grille th, .grille td { padding: 6px 8px; border-bottom: 1px solid var(--filet); text-align: right; }
.grille th:first-child, .grille td:first-child { text-align: left; }

.courrier-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.courrier-options label { display: grid; gap: 4px; font-size: 13px; color: var(--doux); }
.courrier { font: 14px/1.55 var(--chiffre); min-height: 420px; white-space: pre-wrap; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.note { font-size: 13px; color: var(--doux); }

.resultat-code { background: var(--feuille); border: 1px solid var(--filet); padding: 14px 18px; display: grid; gap: 6px; }
.resultat-code h3 { font-family: var(--chiffre); }
.resultat-code p { margin: 0; white-space: pre-line; font-size: 14px; }
.resultat-code small { color: var(--doux); }
#resultats-code { display: grid; gap: 10px; }

@media (max-width: 560px) {
  .constat { grid-template-columns: minmax(0, 1fr); }
  .niveau { justify-self: start; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Chiffres à confirmer : la seule chose que l'utilisateur ait à faire, et seulement quand la photo l'exige */
.confirmer { border-color: #E3C48A; background: #FFF8EA; }
.question { display: grid; gap: 8px; padding: 14px 0; border-top: 1px solid #EEDDB8; }
.question:first-of-type { border-top: 0; }
.question p { margin: 0; }
.extrait { width: 100%; height: auto; border: 1px solid var(--filet); border-radius: 3px; background: #fff; }
.champs-q { display: flex; flex-wrap: wrap; gap: 10px; }
.champs-q label { display: grid; gap: 4px; font-size: 13px; color: var(--doux); flex: 1 1 140px; min-width: 0; }
.champs-q input { font-family: var(--chiffre); }
.question .principal { justify-self: start; }

/* Contrat : la phrase du contrat sur laquelle repose chaque constat */
.citation { margin: 10px 0 0; padding: 10px 14px; border-left: 3px solid var(--filet); background: var(--fond); font-size: 14px; color: var(--encre); font-style: italic; }
.citation span { display: block; font-style: normal; font: 600 11px/1.4 var(--texte); letter-spacing: .05em; text-transform: uppercase; color: var(--doux); margin-bottom: 4px; }
.choix-statut { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Parcours unique : déposer, lire, conclure ---------- */
.evitement { position: absolute; left: 12px; top: -60px; background: var(--encre); color: #fff; padding: 10px 14px; z-index: 10; }
.evitement:focus { top: 12px; }

.coller { display: grid; gap: 8px; }
.coller label { font-weight: 600; }
.coller .principal { justify-self: start; }
.ligne-champ { display: flex; flex-wrap: wrap; gap: 8px; }
.ligne-champ input { flex: 1 1 260px; min-width: 0; }

.principal, .discret, .lien, .refs button { transition: background-color .18s ease, border-color .18s ease, transform .12s ease; }
.principal:active, .discret:active { transform: translateY(1px); }
.discret:hover { border-color: var(--encre); }
:focus-visible { outline: 2px solid var(--encre); outline-offset: 3px; }

.fichiers { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--filet); border: 1px solid var(--filet); }
.fichiers li { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 16px; background: var(--feuille); font-size: 15px; }
.fichiers .nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fichiers .etat { color: var(--doux); font-size: 14px; text-align: right; }
.pastille { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--filet); }
.fichiers .en-cours .pastille { border-color: var(--accent); border-right-color: transparent; animation: tourne .8s linear infinite; }
.fichiers .fini .pastille { background: var(--ok); border-color: var(--ok); }
.fichiers .rate .pastille { background: var(--erreur); border-color: var(--erreur); }
.fichiers .rate .etat { color: var(--erreur); }
@keyframes tourne { to { transform: rotate(360deg); } }
@media (max-width: 560px) {
  .fichiers li { grid-template-columns: 14px minmax(0, 1fr); }
  .fichiers .etat { grid-column: 2; text-align: left; }
}

#resultat { display: grid; gap: 18px; scroll-margin-top: 16px; }
#resultat:focus { outline: none; }
.verdict { display: grid; gap: 12px; }
.provisoire { margin: 0; font-size: 14px; color: var(--verifier); }
.verdict-bloc { background: var(--feuille); border: 1px solid var(--filet); border-left: 5px solid var(--ok); padding: 22px 24px; display: grid; gap: 10px; }
.verdict-bloc.mauvais { border-left-color: var(--erreur); }
.verdict-bloc h2 { font-size: clamp(24px, 3.4vw, 32px); }
.verdict-bloc h2 em { font-style: normal; font-family: var(--chiffre); font-variant-numeric: tabular-nums; background: linear-gradient(transparent 58%, var(--surligne) 58%); }
.sur-titre { margin: 0; font-size: 14px; color: var(--doux); }
.secondaire { margin: 0; color: var(--doux); font-size: 15px; }
.points { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 0; }
.points li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 9px 0; border-top: 1px solid var(--filet); }
.points li span { color: var(--doux); font-size: 14px; }
.points li b { margin-left: auto; font: 600 15px/1 var(--chiffre); font-variant-numeric: tabular-nums; color: var(--erreur); }

.section { background: var(--feuille); border: 1px solid var(--filet); }
.section > summary { list-style: none; cursor: pointer; padding: 16px 20px; display: grid; gap: 2px; position: relative; padding-right: 48px; }
.section > summary::-webkit-details-marker { display: none; }
.section > summary span { font-weight: 600; font-size: 17px; }
.section > summary small { color: var(--doux); font-size: 14px; }
.section > summary::after { content: ""; position: absolute; right: 22px; top: 50%; width: 9px; height: 9px; border-right: 2px solid var(--doux); border-bottom: 2px solid var(--doux); transform: translateY(-70%) rotate(45deg); transition: transform .2s ease; }
.section[open] > summary::after { transform: translateY(-30%) rotate(-135deg); }
.section > summary:hover span { color: var(--accent); }
.section[open] { display: grid; gap: 14px; padding-bottom: 18px; }
.section[open] > :not(summary) { margin-left: 20px; margin-right: 20px; }
.section[open] > textarea { width: calc(100% - 40px); }
@media (max-width: 600px) { .section[open] > :not(summary) { margin-left: 12px; margin-right: 12px; } .section[open] > textarea { width: calc(100% - 24px); } }
.section > p { margin: 0; }
.section .mois { border-color: var(--filet); }
.courrier-section .courrier { min-height: 360px; }
.ton { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.ton label { display: inline-flex; gap: 6px; align-items: center; }
.coordonnees > summary { cursor: pointer; color: var(--accent); font-size: 15px; }
.coordonnees[open] > summary { margin-bottom: 10px; }
.changer-convention { display: grid; gap: 6px; padding-top: 12px; border-top: 1px solid var(--filet); }
.changer-convention label { font-size: 14px; font-weight: 600; }
.lu-fiche { display: grid; gap: 8px; }
.lu-fiche .lignes-lues, .lu-fiche .alerte-lecture { padding: 0; margin: 0; }
.recommencer { margin: 0; text-align: center; }
.code-travail { background: var(--feuille); border: 1px solid var(--filet); }
.code-travail > summary { cursor: pointer; padding: 14px 20px; font-weight: 600; }
.code-travail[open] { padding-bottom: 16px; }
.code-travail .recherche { background: none; border: 0; padding: 0 20px; }
.code-travail #resultats-code { padding: 12px 20px 0; }

.apparait { animation: apparait .35s ease both; }
/* Pas d'opacité : un onglet en arrière-plan fige l'animation, et le résultat resterait voilé */
@keyframes apparait { from { transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .apparait, .fichiers .en-cours .pastille { animation: none; } }
.champs-q label { flex: 1 1 140px; min-width: 0; }
.champs-q input { width: 100%; min-width: 0; }

/* ---------- Chaleur : la marque en cuivre, une page posée sur un bureau ---------- */

.verdict-bloc { border-radius: 18px; }
.verdict-bloc.mauvais { background: linear-gradient(90deg, var(--erreur-fond), var(--feuille) 60%); }
.verdict-bloc.bon { background: linear-gradient(90deg, var(--ok-fond), var(--feuille) 60%); }
.section, .code-travail, .fichiers, .bloc, .mois { border-radius: 16px; }
.fichiers li:first-child { border-radius: 16px 16px 0 0; } .fichiers li:last-child { border-radius: 0 0 16px 16px; }
.vers-document { margin: 2px 0 0; font-size: 15px; }
.vers-document a { color: var(--accent); font-weight: 600; }

/* ---------- Le document surligné ---------- */
.annote { display: grid; gap: 14px; scroll-margin-top: 16px; }
.annote > header { display: grid; gap: 4px; }
.doc-onglets { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.doc-onglets button { flex: none; background: var(--feuille); border: 1px solid var(--trait); border-radius: 999px; padding: 7px 14px; font-weight: 600; font-size: 14px; color: var(--doux); cursor: pointer; display: inline-flex; gap: 6px; align-items: center; transition: background-color .18s, color .18s, border-color .18s; }
.doc-onglets button:hover { border-color: var(--accent); color: var(--accent); }
.doc-onglets button[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.doc-onglets .compte { min-width: 20px; height: 20px; border-radius: 10px; background: var(--erreur); color: #fff; font: 600 12px/20px var(--texte); text-align: center; padding: 0 5px; }
.doc-onglets button[aria-selected="true"] .compte { background: #fff; color: var(--erreur); }
.annote-corps { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.feuille-doc { display: grid; gap: 14px; min-width: 0; }
.page { position: relative; margin: 0; background: #fff; border: 1px solid var(--filet); border-radius: 4px; box-shadow: 0 2px 4px rgba(60, 40, 20, .06), 0 18px 34px -22px rgba(60, 40, 20, .35); overflow: hidden; }
.page img { display: block; width: 100%; height: auto; }
.bande { position: absolute; left: 2%; right: 2%; padding: 0; border: 0; border-radius: 3px; cursor: pointer; background: rgba(255, 210, 90, .42); mix-blend-mode: multiply; box-shadow: inset 4px 0 0 var(--erreur); transition: background-color .18s; }
.bande.verifier { background: rgba(255, 224, 150, .32); box-shadow: inset 4px 0 0 #C9922E; }
.bande:hover, .bande.eclaire { background: rgba(255, 196, 60, .62); }
.bande span { position: absolute; right: -2px; top: 50%; transform: translate(0, -50%); mix-blend-mode: normal; background: var(--erreur); color: #fff; font: 600 11px/1 var(--texte); padding: 4px 6px; border-radius: 999px; white-space: nowrap; }
.bande.verifier span { background: var(--verifier); }
.texte-contrat { background: #fff; border: 1px solid var(--filet); border-radius: 10px; padding: clamp(16px, 3vw, 28px); max-height: 75vh; overflow: auto; white-space: pre-wrap; font: 14px/1.7 var(--titre); overflow-wrap: anywhere; box-shadow: 0 18px 34px -22px rgba(60, 40, 20, .35); }
.bande-texte { background: rgba(255, 210, 90, .55); box-shadow: inset 0 -2px 0 var(--erreur); border-radius: 2px; padding: 1px 0; cursor: pointer; }
.bande-texte.verifier { background: rgba(255, 224, 150, .45); box-shadow: inset 0 -2px 0 #C9922E; }
.bande-texte.eclaire { background: rgba(255, 196, 60, .8); }
.bande-texte sup { font: 600 10px/1 var(--texte); background: var(--erreur); color: #fff; border-radius: 999px; padding: 2px 5px; margin-right: 3px; }
.bande-texte.verifier sup { background: var(--verifier); }
.reperes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow: auto; }
.repere { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; padding: 14px; background: var(--feuille); border: 1px solid var(--filet); border-left: 4px solid var(--erreur); border-radius: 14px; cursor: pointer; transition: border-color .2s, box-shadow .2s; }
.repere.verifier { border-left-color: #C9922E; }
.repere:hover { box-shadow: 0 6px 18px -12px rgba(60, 40, 20, .45); }
.repere.eclaire { animation: eclat 1.4s ease; }
@keyframes eclat { 0%, 40% { box-shadow: 0 0 0 3px var(--surligne); } 100% { box-shadow: none; } }
.repere .num { width: 26px; height: 26px; border-radius: 50%; background: var(--erreur); color: #fff; font: 600 13px/26px var(--texte); text-align: center; }
.repere.verifier .num { background: var(--verifier); }
.repere h3 { font-size: 16px; }
.repere p { margin: 4px 0 0; font-size: 14px; }
.repere .montant { font: 600 14px/1.3 var(--chiffre); color: var(--erreur); }
.repere.verifier .montant { color: var(--verifier); font-family: var(--texte); }
.repere .calcul { font: 13px/1.5 var(--chiffre); color: var(--doux); }
.repere .verrou { color: var(--doux); display: flex; gap: 6px; align-items: center; }
.repere .verrou::before { content: ""; width: 11px; height: 12px; flex: none; background: var(--doux); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 12'%3E%3Cpath d='M2 5V3.5a3.5 3.5 0 0 1 7 0V5h1v7H1V5zm1.5 0h4V3.5a2 2 0 0 0-4 0z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 12'%3E%3Cpath d='M2 5V3.5a3.5 3.5 0 0 1 7 0V5h1v7H1V5zm1.5 0h4V3.5a2 2 0 0 0-4 0z'/%3E%3C/svg%3E") center / contain no-repeat; }
@media (max-width: 760px) {
  .annote-corps { grid-template-columns: minmax(0, 1fr); }
  .reperes { position: static; max-height: none; }
}

/* ---------- L'offre : ce que le paiement apporte, dit simplement ---------- */
.offre { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 0; background: var(--feuille); border: 1px solid var(--filet); border-radius: 18px; overflow: hidden; scroll-margin-top: 80px; }
.offre-texte { padding: clamp(18px, 3vw, 28px); display: grid; gap: 10px; align-content: start; }
.offre-texte .sur-titre { color: var(--cuivre-texte); font-weight: 600; }
.inclus { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.inclus li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; font-size: 15px; }
.inclus li::before { content: "✓"; color: var(--ok); font-weight: 700; }
.offre-prix { background: var(--cuivre-fond); border-left: 1px solid var(--filet); padding: clamp(18px, 3vw, 28px); display: grid; gap: 10px; align-content: center; }
.offre-prix b { font: 600 40px/1 var(--titre); color: var(--encre); }
.offre-prix span { color: var(--doux); font-size: 14px; }
.offre-prix .principal { padding: 13px 18px; font-size: 16px; }
@media (max-width: 680px) {
  .offre { grid-template-columns: minmax(0, 1fr); }
  .offre-prix { border-left: 0; border-top: 1px solid var(--filet); }
}
@media (prefers-reduced-motion: reduce) { .repere.eclaire { animation: none; box-shadow: 0 0 0 3px var(--surligne); } }

/* ---------- Le verdict qui frappe : un montant, une phrase, un geste ---------- */
.choc { padding: clamp(22px, 4vw, 36px); gap: 12px; background: linear-gradient(160deg, #FBE9E1 0%, var(--feuille) 55%); border-left-width: 6px; }
.choc-intro { margin: 6px 0 0; font: 500 clamp(18px, 2.4vw, 22px)/1.3 var(--titre); color: var(--encre); }
.choc-montant { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.choc-montant b { font: 600 clamp(48px, 9vw, 84px)/1 var(--titre); color: var(--erreur); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.choc-montant small { font: 500 18px/1.2 var(--texte); color: var(--doux); }
.choc-sous { margin: 0; color: var(--doux); max-width: 60ch; }
.choc .points { margin-top: 6px; }
.choc .points li b { font-size: 16px; }
.appel { display: grid; gap: 4px; justify-items: start; margin-top: 10px; padding: 16px 24px; border-radius: 16px; background: var(--accent); color: #fff; text-decoration: none; box-shadow: 0 12px 26px -14px rgba(22, 24, 28, .6); transition: background-color .18s, transform .12s; justify-self: start; max-width: 100%; }
.appel span { font: 600 clamp(18px, 2.6vw, 21px)/1.2 var(--texte); }
.appel span::after { content: " →"; }
.appel small { font-size: 14px; opacity: .9; }
.appel:hover { background: var(--accent-fonce); }
.appel:active { transform: translateY(1px); }
.astuce { padding: 10px 12px; background: var(--cuivre-fond); border-radius: 6px; color: var(--encre); }

/* Le courrier voilé : il existe, on en voit la forme, pas le contenu */
.lettre-voilee { position: relative; margin-top: 10px; padding: 18px 20px 22px; background: #fff; border: 1px solid var(--filet); border-radius: 4px; box-shadow: 0 16px 30px -22px rgba(60, 40, 20, .45); transform: rotate(-0.6deg); overflow: hidden; }
.lettre-a { margin: 0 0 10px; text-align: right; font: 600 13px/1.3 var(--texte); color: var(--encre); }
.lettre-objet { margin: 0 0 12px; font: 600 13px/1.4 var(--texte); color: var(--encre); }
.lettre-corps { display: grid; gap: 7px; filter: blur(.6px); }
.lettre-corps i { display: block; height: 7px; border-radius: 4px; background: #E1E2DC; }
.lettre-corps br { display: block; content: ""; height: 6px; }
.lettre-voilee::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, rgba(255, 255, 255, .85)); }
.lettre-sceau { position: absolute; right: 16px; bottom: 14px; z-index: 1; background: var(--accent); color: #fff; font: 600 13px/1 var(--texte); padding: 8px 12px; border-radius: 999px; }
/* La case qui précède le paiement : accès immédiat demandé, rétractation abandonnée (L221-28, 13°) */
.renonce { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; margin: 0; padding: 12px 14px; border: 1.5px solid var(--trait-fort); background: var(--feuille); font-size: 13.5px; line-height: 1.45; color: var(--texte-courant); cursor: pointer; }
.renonce input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--encre); cursor: pointer; }
.renonce:has(input:checked) { background: var(--ok-fond); border-color: var(--ok); }
#debloquer[aria-disabled="true"] { opacity: .45; }
.note.alerte { color: var(--rouge); font-weight: 600; }
.paliers { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.paliers li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; padding: 7px 10px; border-radius: 6px; font-size: 13px; color: var(--doux); }
.paliers li span { font-weight: 600; color: var(--encre); }
.paliers li small { grid-column: 1; font-size: 12px; }
.paliers li b { grid-column: 2; grid-row: 1 / span 2; align-self: center; font: 600 14px/1 var(--texte); color: var(--encre); }
.paliers li.actuel { background: var(--feuille); box-shadow: inset 0 0 0 1px var(--cuivre); }

/* ---------- L'atelier : l'analyse se voit pendant qu'elle se fait ---------- */
.atelier { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: clamp(18px, 3vw, 32px); align-items: start; background: var(--feuille); border: 1px solid var(--filet); border-radius: 18px; padding: clamp(18px, 3vw, 28px); scroll-margin-top: 80px; box-shadow: var(--ombre); }
.atelier-apercu { position: sticky; top: 16px; }
.feuille-scan { position: relative; aspect-ratio: 210 / 297; background: #fff; border: 1px solid var(--filet); border-radius: 4px; overflow: hidden; box-shadow: 0 2px 4px rgba(60, 40, 20, .06), 0 20px 30px -20px rgba(60, 40, 20, .45); transform: rotate(-1.2deg); }
.feuille-scan img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.feuille-scan img:not([src]) { visibility: hidden; }
.feuille-scan::before { content: ""; position: absolute; inset: 14% 12%; background: repeating-linear-gradient(transparent 0 9px, #ECEDE8 9px 13px); }
.feuille-scan:has(img[src])::before { display: none; }
.balayage { position: absolute; left: 0; right: 0; top: 0; height: 34%; background: linear-gradient(to bottom, rgba(255, 225, 92, 0), rgba(255, 225, 92, .35) 80%, rgba(255, 210, 40, .85) 100%); border-bottom: 2px solid var(--cuivre); animation: balaye 2.2s cubic-bezier(.45, 0, .55, 1) infinite alternate; }
@keyframes balaye { from { transform: translateY(-100%); } to { transform: translateY(300%); } }
.atelier-suivi { display: grid; gap: 14px; min-width: 0; }
.atelier-suivi .sur-titre { color: var(--cuivre-texte); font-weight: 600; }
.atelier-suivi h2 { font-size: clamp(22px, 3vw, 28px); }
.etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.etapes li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; padding: 8px 0; color: var(--doux); transition: color .3s; }
.etapes li b { font-weight: 600; }
.etapes li small { display: block; font-size: 13px; color: var(--doux); }
.etapes li small:empty { display: none; }
.etapes .coche { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--trait); margin-top: 1px; position: relative; transition: background-color .3s, border-color .3s; }
.etapes li.en-cours { color: var(--encre); }
.etapes li.en-cours .coche { border-color: var(--cuivre); border-right-color: transparent; animation: tourne .8s linear infinite; }
.etapes li.fait { color: var(--encre); }
.etapes li.fait .coche { background: var(--ok); border-color: var(--ok); }
.etapes li.fait .coche::after { content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.etapes li.fait small { color: var(--ok); font-weight: 600; }
.fil { display: grid; gap: 4px; min-height: 0; font: 13px/1.45 var(--chiffre); }
.fil:empty { display: none; }
.fil div { padding: 6px 10px; border-radius: 4px; background: var(--fond); color: var(--encre); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; animation: entre .25s ease; }
.fil div::before { content: "✓ "; color: var(--ok); font-weight: 700; }
.fil div.ko { background: var(--erreur-fond); }
.fil div.ko::before { content: "✗ "; color: var(--erreur); }
.fil div:nth-child(n + 3) { opacity: .65; }
.fil div:nth-child(n + 4) { opacity: .4; }
@keyframes entre { from { transform: translateY(-6px); } }
.atelier .fichiers { font-size: 14px; }
.atelier .fichiers li { padding: 8px 12px; }
/* Une fois fini, l'atelier se replie en une ligne de bilan au-dessus du résultat */
.atelier[data-etat="fini"] { grid-template-columns: minmax(0, 1fr); padding: 16px 20px; }
.atelier[data-etat="fini"] .atelier-apercu, .atelier[data-etat="fini"] .fil, .atelier[data-etat="fini"] .fichiers li.fini { display: none; }
.atelier[data-etat="fini"] .atelier-suivi h2 { font-size: 20px; }
.atelier[data-etat="fini"] .etapes { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 4px 18px; }
.atelier[data-etat="fini"] .etapes li { padding: 4px 0; }
.atelier[data-etat="fini"] .etapes li b { font-size: 14px; font-weight: 500; color: var(--doux); }
@media (max-width: 640px) {
  .atelier { grid-template-columns: minmax(0, 1fr); }
  .atelier-apercu { position: static; width: 120px; justify-self: center; }
}
@media (prefers-reduced-motion: reduce) { .balayage, .etapes li.en-cours .coche, .fil div { animation: none; } }

/* Le bilan chiffré, quand tout est juste */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 6px; }
.stats div { background: var(--feuille); border: 1px solid var(--filet); border-radius: 8px; padding: 12px 14px; display: grid; gap: 2px; }
.stats b { font: 600 30px/1 var(--titre); color: var(--ok); font-variant-numeric: tabular-nums; }
.stats span { font-size: 14px; color: var(--doux); }
.atelier[data-etat="fini"] .fichiers:not(:has(.rate)) { display: none; }
.annote-corps:not(:has(.reperes)) { grid-template-columns: minmax(0, 560px); }
@media (max-width: 640px) { .fil div { white-space: normal; } .fil div:nth-child(n + 4) { display: none; } }

/* ---------- Pleine largeur sur ordinateur : l'écran entier travaille ---------- */

@media (min-width: 1000px) {

  .atelier { grid-template-columns: clamp(220px, 20vw, 300px) minmax(0, 1fr); padding: clamp(24px, 3vw, 40px); }
  .atelier-suivi { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); grid-template-areas: "etat etat" "titre titre" "etapes fil" "fichiers fichiers"; column-gap: clamp(24px, 3vw, 48px); align-items: start; }
  .atelier-suivi .sur-titre { grid-area: etat; } .atelier-suivi h2 { grid-area: titre; }
  .atelier-suivi .etapes { grid-area: etapes; } .atelier-suivi .fil { grid-area: fil; } .atelier-suivi .fichiers { grid-area: fichiers; }
  .atelier-suivi h2 { font-size: clamp(26px, 2.4vw, 34px); }
  .atelier[data-etat="fini"] .atelier-suivi { grid-template-areas: "etat" "titre" "etapes" "fichiers"; grid-template-columns: minmax(0, 1fr); }
  .tete-resultat.avec-offre { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(20px, 2.4vw, 36px); align-items: start; }
  .tete-resultat.avec-offre .offre { grid-template-columns: minmax(0, 1fr); position: sticky; top: 16px; }
  .tete-resultat.avec-offre .offre-prix { order: -1; border-left: 0; border-bottom: 1px solid var(--filet); }
  .annote-corps { grid-template-columns: minmax(0, 1.15fr) minmax(360px, 1fr); gap: clamp(20px, 2.6vw, 40px); }
  .annote-corps:not(:has(.reperes)) { grid-template-columns: minmax(0, 1.15fr) minmax(360px, 1fr); }
}
.tete-resultat { display: grid; gap: 18px; }
.tete-resultat .verdict { align-content: start; }

/* ---------- Le panneau du document choisi ---------- */
.panneau { display: grid; gap: 12px; align-content: start; position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow: auto; padding-right: 4px; }
.panneau .reperes { position: static; max-height: none; overflow: visible; }
.panneau-tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 12px; padding-bottom: 10px; border-bottom: 2px solid var(--encre); }
.panneau-tete h3 { font: 600 26px/1.15 var(--titre); }
.panneau-tete span { font: 600 14px/1 var(--texte); padding: 7px 10px; border-radius: 999px; }
.panneau-tete span.mauvais { background: var(--erreur-fond); color: var(--erreur); }
.panneau-tete span.moyen { background: var(--verifier-fond); color: var(--verifier); }
.panneau-tete span.bon { background: var(--ok-fond); color: var(--ok); }
.panneau-titre { margin: 8px 0 0; font: 600 13px/1 var(--texte); letter-spacing: .06em; text-transform: uppercase; color: var(--doux); display: flex; gap: 8px; align-items: center; }
.panneau-titre small { background: var(--ok-fond); color: var(--ok); border-radius: 999px; padding: 3px 7px; letter-spacing: 0; }
.tout-juste { margin: 0; padding: 14px 16px; border-radius: 8px; background: var(--ok-fond); color: var(--ok); font-weight: 600; }
.infos, .justes { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.infos li { padding: 12px 14px; border-radius: 8px; background: var(--info-fond); font-size: 14px; }
.infos li p { margin: 4px 0 0; color: var(--encre); }
.justes li { border-radius: 8px; background: var(--feuille); border: 1px solid var(--filet); font-size: 15px; }
.justes li > span, .justes summary { display: flex; gap: 10px; align-items: center; padding: 10px 14px; }
.justes li > span::before, .justes summary::before { content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.4l2.6 2.6L13 6.6' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.justes summary { cursor: pointer; list-style: none; }
.justes summary::-webkit-details-marker { display: none; }
.justes summary::after { content: "+"; margin-left: auto; color: var(--doux); font-weight: 600; }
.justes details[open] summary::after { content: "-"; }
.justes details > :not(summary) { margin: 0 14px 12px 42px; font-size: 14px; }
@media (max-width: 760px) { .panneau { position: static; max-height: none; overflow: visible; } }

/* ---------- Le résultat s'installe : cascade et reflet, sans jamais conditionner la visibilité ---------- */
.repere { animation: monte .45s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--i, 0) * 80ms); }
@keyframes monte { from { transform: translateY(10px); } }
.tete-resultat > :nth-child(2) { animation-delay: .12s; }
.bande { overflow: hidden; }
.bande span { right: 4px; }
.bande::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .75) 50%, transparent 70%); transform: translateX(-110%); animation: reflet 1.1s ease .5s 2; pointer-events: none; }
@keyframes reflet { to { transform: translateX(110%); } }
@media (prefers-reduced-motion: reduce) { .repere, .bande::after { animation: none; } }
.atelier-suivi > *, .tete-resultat > * { min-width: 0; }

/* ---------- La fiche expliquée : chaque ligne se touche, chaque erreur se lit en clair ---------- */
.zone { position: absolute; left: 2%; right: 2%; padding: 0; border: 0; background: transparent; border-radius: 3px; cursor: help; }
.zone:hover, .zone.active { background: rgba(22, 24, 28, .06); box-shadow: inset 0 0 0 1px rgba(22, 24, 28, .3); }
.bulle { position: absolute; left: 4%; right: 4%; z-index: 5; display: grid; gap: 4px; padding: 12px 14px; background: var(--encre); color: #F7F7F4; border-radius: 12px; box-shadow: 0 14px 30px -14px rgba(20, 14, 8, .6); font-size: 14px; line-height: 1.45; animation: monte .2s ease backwards; }
.bulle b { font-size: 15px; }
.bulle small { color: var(--surligne); font-weight: 600; }
.bulle p { margin: 0; }
.bulle .calcul { font: 13px/1.4 var(--chiffre); color: #D6DADF; }
.en-clair { color: var(--encre); }
.detail-erreur { display: grid; gap: 8px; margin-top: 8px; padding-top: 10px; border-top: 1px dashed var(--trait); }
.detail-erreur p { margin: 0; }
.detail-erreur b { font-weight: 600; }
.que-faire { padding: 8px 10px; border-radius: 6px; background: var(--accent-fond); }
.loi { display: grid; gap: 6px; font-size: 14px; }
.loi .refs { margin: 0; }
.refs button { display: grid; gap: 2px; text-align: left; }
.refs button small { font: 500 12px/1.3 var(--texte); color: var(--doux); }
.ref-css { font: 500 13px/1.3 var(--chiffre); background: var(--info-fond); border: 1px solid var(--trait); border-radius: 3px; padding: 6px 8px; }
.salaire-explique { background: var(--feuille); border: 1px solid var(--filet); border-radius: 8px; }
.salaire-explique > summary { list-style: none; cursor: pointer; padding: 12px 14px; display: grid; gap: 2px; position: relative; padding-right: 40px; }
.salaire-explique > summary::-webkit-details-marker { display: none; }
.salaire-explique > summary span { font-weight: 600; }
.salaire-explique > summary small { color: var(--doux); font-size: 14px; }
.salaire-explique > summary::after { content: "+"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-weight: 600; color: var(--doux); }
.salaire-explique[open] > summary::after { content: "-"; }
.salaire-explique[open] { display: grid; gap: 10px; padding-bottom: 14px; }
.salaire-explique[open] > :not(summary) { margin: 0 14px; }
.barre-salaire { display: flex; height: 14px; border-radius: 7px; overflow: hidden; gap: 2px; }
.barre-salaire i { display: block; min-width: 3px; }
.parts { list-style: none; padding: 0; display: grid; gap: 4px; font-size: 14px; }
.parts li { display: grid; grid-template-columns: minmax(0, 1fr) auto 52px; gap: 10px; align-items: baseline; padding: 4px 0; border-bottom: 1px solid var(--filet); }
.parts li span { display: flex; gap: 8px; align-items: center; }
.parts li span i { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.parts li b { font: 600 14px/1 var(--chiffre); font-variant-numeric: tabular-nums; }
.parts li small { color: var(--doux); text-align: right; }
.parts li.total { grid-template-columns: minmax(0, 1fr) auto; font-weight: 600; }

/* =====================================================================
   Interface « bulletin corrigé » : la page est l'objet qu'elle vérifie.
   Pas de cartes, pas de pilules, pas de barre flottante : des filets, des colonnes, des chiffres alignés.
   Trois encres : le noir de l'impression, le rouge du stylo qui corrige, le jaune du feutre qui surligne.
   ===================================================================== */
body { background: var(--fond); color: var(--encre); font: 400 16px/1.55 var(--texte); }
body > :not(.evitement) { width: min(1180px, 100% - 48px); margin-inline: auto; }
main { display: block; }
h1, h2, h3 { color: var(--encre); }
.rouge { color: var(--rouge); }
mark { background: linear-gradient(transparent 8%, var(--jaune) 8%, var(--jaune) 92%, transparent 92%); color: inherit; padding: 0 .1em; }
.evitement { position: absolute; left: -999px; top: 8px; background: var(--encre); color: #fff; padding: 8px 12px; z-index: 5; }
.evitement:focus { left: 12px; }

/* ---- En-tête de bulletin ---- */
.entete { display: grid; grid-template-columns: auto 1fr; margin-top: 28px; border: 1.5px solid var(--trait-fort); background: var(--feuille); }
.entete-gauche { padding: 16px 22px; border-right: 1.5px solid var(--trait-fort); display: grid; align-content: center; gap: 2px; }
.marque { font: 800 19px/1 var(--texte); letter-spacing: .06em; color: var(--encre); text-decoration: none; }
.nature { margin: 0; font: 400 13px/1.3 var(--chiffre); color: var(--doux); }
.entete-droite { margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); }
.entete-droite div { padding: 12px 18px; border-right: 1px solid var(--filet); display: grid; gap: 2px; align-content: center; }
.entete-droite div:last-child { border-right: 0; }
.entete-droite dt { font: 400 12px/1 var(--chiffre); text-transform: uppercase; letter-spacing: .08em; color: var(--doux); }
.entete-droite dd { margin: 0; font-weight: 600; }
.entete-liens { grid-column: 1 / -1; display: flex; border-top: 1.5px solid var(--trait-fort); background: var(--gris); }
.entete-liens a { padding: 10px 18px; font: 500 14px/1.2 var(--chiffre); color: var(--encre); text-decoration: none; border-right: 1px solid var(--filet); }
.entete-liens a:hover { background: var(--feuille); }
.entete-liens .entete-depot { margin-left: auto; border-right: 0; border-left: 1.5px solid var(--trait-fort); background: var(--encre); color: #fff; font-weight: 700; }
.entete-liens .entete-depot:hover { background: #2B2F35; }

/* ---- Premier écran ---- */
.ouverture { padding-top: 44px; container-type: inline-size; }
/* Le titre occupe toute la largeur : chaque ligne a sa propre taille, calculée sur sa longueur mesurée
   (taille mesurée dans le navigateur, police chargée : la phrase tient dans 98,5 % du cadre ; sur téléphone, deux lignes à taille lisible) */
.ouverture h1 { font-family: var(--texte); font-weight: 800; letter-spacing: -0.035em; line-height: .9; margin: 0; }
.ouverture h1 { white-space: nowrap; font-size: 5.03vw; font-size: 5.03cqi; }
.ouverture h1 span { display: inline; }
.chapo { margin: 16px 0 0; font-size: clamp(16px, 1.3vw, 18px); color: var(--doux); max-width: 56ch; }
/* Sous le titre, la phrase court aussi sur toute la largeur : une seule ligne quand l’écran le permet (17 px à 1 180 px), sinon plusieurs lignes pleine largeur */
.ouverture .chapo { max-width: none; margin-top: 14px; font-size: 17px; }
@media (min-width: 1180px) { .ouverture .chapo { white-space: nowrap; font-size: 1.44cqi; } }

/* Les tableaux du bulletin et de la facture */
.table-cadre { margin-top: 32px; overflow-x: auto; border-top: 1.5px solid var(--trait-fort); border-bottom: 1.5px solid var(--trait-fort); }
.bulletin, .facture { width: 100%; border-collapse: collapse; }
.bulletin caption { caption-side: bottom; text-align: left; padding: 10px 0; font: 400 13px/1.4 var(--chiffre); color: var(--doux); }
.bulletin th, .bulletin td, .facture th, .facture td { padding: 10px 14px; text-align: left; vertical-align: baseline; }
.bulletin thead th, .facture thead th { font: 400 12px/1 var(--chiffre); text-transform: uppercase; letter-spacing: .08em; color: var(--doux); background: var(--gris); border-bottom: 1px solid var(--trait-fort); }
.bulletin tbody th, .facture tbody th { font-weight: 600; }
.bulletin tbody tr + tr > *, .facture tbody tr + tr > * { border-top: 1px solid var(--filet); }
.bulletin .n, .facture .n { text-align: right; font: 400 15px/1.3 var(--chiffre); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bulletin thead .n, .facture thead .n { font: 400 12px/1 var(--chiffre); }
.bulletin .art, .bulletin .ok { color: var(--doux); font-size: 14px; }
.bulletin .faux .art { color: var(--rouge); font-weight: 700; }
.bulletin tbody th { min-width: 15ch; }
.bulletin tfoot th, .bulletin tfoot td { border-top: 1.5px solid var(--trait-fort); padding-block: 18px; }
.bulletin tfoot th { font: 700 16px/1.3 var(--texte); }
mark.somme { color: var(--encre); font: 700 22px/1 var(--chiffre); padding: 2px 8px; }

/* Le stylo rouge : on barre, puis on écrit à côté */
.barre { position: relative; display: inline-block; }
.barre::after { content: ""; position: absolute; left: -4px; right: -4px; top: 50%; height: 2.5px; border-radius: 2px; background: var(--rouge); transform: rotate(-2deg); transform-origin: left center; }
.corr { display: inline-block; margin-left: 10px; font: 700 19px/1 var(--main); color: var(--rouge); transform: translateY(4px) rotate(-3deg); }
mark.somme { background-repeat: no-repeat; background-size: 100% 100%; }
/* La correction en direct : le stylo barre d'un geste, écrit le bon chiffre lettre par lettre,
   puis le feutre passe sur le total. L'état final est l'état par défaut : si l'animation ne joue pas,
   tout reste lisible, et la classe « fini » coupe les animations une fois la séquence terminée. */
.en-direct .barre::after { animation: trait .38s cubic-bezier(.7, 0, .3, 1) var(--d, 0s) backwards; }
.en-direct .corr { animation: ecrit .75s steps(9, end) var(--d, 0s) backwards; }
.en-direct mark.somme { animation: feutre .7s cubic-bezier(.6, 0, .3, 1) var(--d, 0s) backwards; }
.en-direct .faux .art { animation: signale .3s ease var(--d, 0s) backwards; }
.fini .barre::after, .fini .corr, .fini mark.somme, .fini .faux .art { animation: none !important; }
@keyframes trait { from { transform: rotate(-2deg) scaleX(0); } }
@keyframes ecrit { from { clip-path: inset(-30% 100% -30% -10%); } to { clip-path: inset(-30% -10% -30% -10%); } }
@keyframes feutre { from { background-size: 0% 100%; } }
@keyframes signale { from { color: var(--encre); } }

/* Le dépôt : un grand rectangle d'encre, sans arrondi */
.depot-ligne { margin-top: 28px; display: grid; grid-template-columns: 1fr auto; border: 1.5px solid var(--trait-fort); }
.depot { position: relative; display: grid; gap: 4px; padding: 16px 22px; background: var(--encre); color: #fff; cursor: pointer; transition: background-color .2s; }
.depot:hover, .depot.survol { background: #2B2F35; }
.depot:focus-within { outline: 3px solid var(--jaune); outline-offset: -6px; }
.depot input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.depot-titre { font: 800 clamp(18px, 1.7vw, 22px)/1.15 var(--texte); letter-spacing: -0.02em; }
.depot-titre::after { content: " →"; }
.depot-sous { font: 400 13px/1.4 var(--chiffre); color: #C9CDD2; }
.essais { display: grid; border-left: 1.5px solid var(--trait-fort); }
.exemple { border: 0; background: var(--feuille); padding: 10px 22px; font: 600 15px/1.3 var(--texte); color: var(--encre); cursor: pointer; text-align: left; text-decoration: underline; text-underline-offset: 4px; }
.exemple + .exemple { border-top: 1px solid var(--filet); }
.exemple:hover { background: var(--gris); }
.coller-lien { margin: 12px 0 0; font-size: 15px; }
.lien { color: var(--encre); text-underline-offset: 3px; }
.coller { margin-top: 12px; max-width: 640px; }

/* ---- Blocs de présentation ---- */
.v-bloc { padding-top: 84px; }
.v-bloc h2 { font: 800 clamp(24px, 2.4vw, 32px)/1.1 var(--texte); letter-spacing: -0.025em; padding-bottom: 14px; border-bottom: 1.5px solid var(--trait-fort); }

/* La note de calcul de l'accueil */
#calcul .chapo { margin-top: 14px; }
.notes { display: grid; grid-template-columns: 1fr 1fr; margin-top: 28px; border-top: 1.5px solid var(--trait-fort); }
.note-accueil { padding: 22px 28px 24px 0; display: grid; gap: 14px; align-content: start; }
.note-accueil + .note-accueil { padding: 22px 0 24px 28px; border-left: 1px solid var(--filet); }
.note-accueil h3 { margin: 0; font: 700 18px/1.3 var(--texte); }
.regle { margin: 0; font: 400 13px/1.55 var(--chiffre); color: var(--doux); padding-left: 12px; border-left: 3px solid var(--jaune); }
.somme-finale { display: flex; justify-content: flex-end; align-items: center; gap: 18px; padding: 16px 0; margin: 0; border-top: 1.5px solid var(--trait-fort); border-bottom: 1.5px solid var(--trait-fort); font: 400 15px/1 var(--chiffre); color: var(--doux); }

/* Les opérations, partagées par l'accueil et le résultat */
.operations { list-style: none; margin: 0; padding: 0; }
.operations li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 8px 0; border-bottom: 1px dotted var(--trait); font-size: 15px; }
.operations b { font: 500 15px/1.3 var(--chiffre); white-space: nowrap; }
.operations .resultat { border-bottom: 1.5px solid var(--trait-fort); font-weight: 700; }
.operations .resultat b { font: 700 19px/1 var(--main); color: var(--rouge); }
.pourquoi { margin: 0; font-size: 15px; color: var(--doux); }
.pourquoi b { color: var(--encre); }

.rubriques { list-style: none; margin: 0; padding: 0; }
.rubriques li { display: grid; grid-template-columns: 56px minmax(0, 1.1fr) minmax(0, 1.6fr) 110px; gap: 20px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--filet); }
.rubriques .code { font: 400 15px/1 var(--chiffre); color: var(--doux); }
.rubriques b { font: 700 17px/1.25 var(--texte); }
.rubriques .detail { color: var(--doux); font-size: 15px; }
.rubriques .etat { justify-self: end; font: 700 13px/1 var(--chiffre); text-transform: uppercase; letter-spacing: .06em; }
.rubriques .a-venir b, .rubriques .a-venir .detail, .rubriques .a-venir .etat { color: #80868D; }
.rubriques li:not(.a-venir) .etat { background: linear-gradient(transparent 15%, var(--jaune) 15%, var(--jaune) 85%, transparent 85%); padding: 2px 4px; }

.index { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 64px; }
.index li { break-inside: avoid; display: flex; align-items: baseline; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--filet); font-size: 15px; }
.index span { flex: 0 1 auto; }
.index i { flex: 1 1 24px; min-width: 24px; border-bottom: 2px dotted var(--trait); transform: translateY(-4px); }
.index b { font: 700 14px/1 var(--chiffre); white-space: nowrap; }

.lettre-bloc { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px; align-items: start; }
.lettre-bloc h2 { border-bottom: 0 !important; padding-bottom: 0 !important; }
.lettre-bloc .chapo { margin-top: 18px; }
.lettre { background: #fff; border: 1px solid var(--filet); box-shadow: 0 30px 50px -36px rgba(18, 20, 23, .45); padding: 32px 36px 0; display: grid; gap: 12px; font-size: 14px; line-height: 1.65; max-height: 420px; overflow: hidden; position: relative; transform: rotate(1.4deg); }
.lettre p { margin: 0; }
.lettre::after { content: ""; position: absolute; inset: auto 0 0; height: 110px; background: linear-gradient(rgba(255, 255, 255, 0), #fff); }
.lettre-tete { font: 400 12px/1.3 var(--chiffre); text-transform: uppercase; letter-spacing: .06em; color: var(--doux); }

.facture th:first-child { width: 22%; }
.facture tbody th { font: 700 16px/1.3 var(--texte); }
.facture td { color: var(--doux); font-size: 15px; }
.facture .n { color: var(--encre); font-weight: 700; font-size: 16px; }
.facture tbody tr:first-child .n { color: var(--doux); font-weight: 400; }
.note-tarif { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1.5px solid var(--trait-fort); }
.note-tarif li { display: grid; gap: 2px; padding: 14px 16px; font: 400 13px/1.45 var(--chiffre); color: var(--doux); }
.note-tarif li + li { border-left: 1px solid var(--filet); }
.note-tarif b { font: 700 15px/1.3 var(--texte); color: var(--encre); }
@media (max-width: 900px) { .note-tarif { grid-template-columns: 1fr 1fr; } .note-tarif li:nth-child(3) { border-left: 0; } .note-tarif li:nth-child(n + 3) { border-top: 1px solid var(--filet); } }

.guides { list-style: none; margin: 0; padding: 0; counter-reset: g; }
.guides li { counter-increment: g; border-bottom: 1px solid var(--filet); }
.guide { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 2px 20px; align-items: baseline; padding: 16px 0; }
a.guide { color: var(--encre); text-decoration: none; padding-inline: 8px; margin-inline: -8px; transition: background-color .2s; }
a.guide:hover { background: var(--gris); }
a.guide .bientot { color: var(--encre); }
a.guide .bientot::after { content: " →"; display: inline-block; transition: transform .25s var(--courbe); }
a.guide:hover .bientot::after { transform: translateX(4px); }
.guide::before { content: counter(g, decimal-leading-zero); grid-row: span 2; font: 400 15px/1 var(--chiffre); color: var(--doux); }
.guide .q { font: 700 17px/1.3 var(--texte); }
.guide .r { grid-column: 2; color: var(--doux); font-size: 15px; }
.guide .bientot { grid-column: 3; grid-row: 1 / span 2; align-self: center; font: 700 12px/1 var(--chiffre); text-transform: uppercase; letter-spacing: .06em; color: #80868D; }

.mentions ol { list-style: none; counter-reset: m; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-bottom: 1.5px solid var(--trait-fort); }
.mentions li { counter-increment: m; display: grid; align-content: start; gap: 6px; padding: 18px 18px 20px; font: 400 13px/1.55 var(--chiffre); color: var(--doux); }
.mentions li + li { border-left: 1px solid var(--filet); }
.mentions li::before { content: counter(m) "."; font: 700 13px/1 var(--chiffre); color: var(--rouge); }
.mentions b { font: 700 15px/1.3 var(--texte); color: var(--encre); }
@media (max-width: 1020px) { .mentions ol { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mentions li + li { border-left: 0; } .mentions li:nth-child(even) { border-left: 1px solid var(--filet); } .mentions li:nth-child(n + 3) { border-top: 1px solid var(--filet); } }
@media (max-width: 640px) { .mentions ol { grid-template-columns: 1fr; } .mentions li:nth-child(even) { border-left: 0; } .mentions li + li { border-top: 1px solid var(--filet); } .mentions li { padding: 14px 4px 16px; } }
.a-valider { background: #FDE7C2; color: #6B4300; padding: 1px 6px; }

.recherche-code-section .code-travail { margin-top: 0; }

.pied { margin-top: 110px; padding-bottom: 48px; display: grid; gap: 22px; color: var(--doux); }
.pied p { margin: 0; }
.pied-rappel { text-align: center; font: 700 19px/1.3 var(--main); color: var(--rouge); transform: rotate(-1deg); }
.pied-cadre { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; border: 1.5px solid var(--trait-fort); background: var(--feuille); }
.pied-marque { display: grid; align-content: center; gap: 4px; padding: 24px 28px; border-right: 1.5px solid var(--trait-fort); }
.pied-marque p { font: 400 13px/1.3 var(--chiffre); }
.pied-infos { margin: 0; display: grid; grid-template-columns: 1.3fr 1fr 1.2fr; }
.pied-infos div { display: grid; align-content: center; gap: 6px; padding: 20px 22px; border-right: 1px solid var(--filet); }
.pied-infos dt { font: 400 11px/1.2 var(--chiffre); text-transform: uppercase; letter-spacing: .08em; color: var(--doux); }
.pied-infos dd { margin: 0; font: 600 15px/1.45 var(--texte); color: var(--encre); }
.pied-infos dd span:not(.a-valider) { font: 400 13px/1.4 var(--texte); color: var(--doux); }
.pied-liens { display: grid; align-content: center; gap: 2px; padding: 16px 26px; background: var(--gris); border-left: 1.5px solid var(--trait-fort); }
.pied-liens a { font: 500 14px/1.3 var(--chiffre); color: var(--encre); text-decoration: none; padding: 5px 0; }
.pied-liens a::before { content: "→ "; color: var(--doux); }
.pied-liens a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pied-bas { text-align: center; font: 400 12px/1.5 var(--chiffre); }
@media (max-width: 1020px) {
  .pied-cadre { grid-template-columns: 1fr; }
  .pied-marque { border-right: 0; border-bottom: 1.5px solid var(--trait-fort); }
  .pied-liens { border-left: 0; border-top: 1.5px solid var(--trait-fort); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}
@media (max-width: 640px) {
  .pied { margin-top: 72px; }
  .pied-infos { grid-template-columns: 1fr; }
  .pied-infos div { border-right: 0; border-top: 1px solid var(--filet); padding: 14px 18px; }
  .pied-infos div:first-child { border-top: 0; }
  .pied-marque { padding: 18px; }
  .pied-liens { padding: 12px 18px; grid-template-columns: 1fr 1fr; }
  .pied-rappel { font-size: 17px; }
}

/* Pendant une analyse, la présentation s'efface : le résultat a toute la place */
body.en-analyse .vitrine, body.en-analyse .ouverture .chapo, body.en-analyse .entete-liens a:not(.entete-depot) { display: none; }
body.en-analyse .ouverture { padding-top: 28px; }
body.en-analyse .ouverture h1 span { display: inline; font-size: clamp(26px, 2.8vw, 36px); }
main > .atelier, main > #resultat { margin-top: 28px; }

/* =====================================================================
   Le résultat, dans la même écriture : filets noirs, angles droits, pas d'ombres portées
   ===================================================================== */
.atelier, .verdict-bloc, .offre, .section, .code-travail, .fichiers, .bloc, .mois, .repere, .page, .stats div, .salaire-explique,
.infos li, .justes li, .tout-juste, .que-faire, .astuce, .texte-contrat, .lettre-voilee, .feuille-scan, .bulle, .appel, .principal, .discret,
input, select, textarea, .doc-onglets button, .refs button, .ref-css, .ref-ferme, .panneau-tete span, .paliers li, .resultat-code, .texte-officiel { border-radius: 0 !important; }
.atelier, .verdict-bloc, .offre, .section, .code-travail, .mois, .salaire-explique { border: 1.5px solid var(--trait-fort) !important; box-shadow: none !important; }
.verdict-bloc.mauvais, .verdict-bloc.bon, .choc { background: var(--feuille) !important; border-left-width: 6px !important; }
.verdict-bloc.mauvais { border-left-color: var(--rouge) !important; }
.verdict-bloc.bon { border-left-color: var(--ok) !important; }
.choc-montant b { font-family: var(--chiffre) !important; letter-spacing: -0.03em; color: var(--rouge) !important; }
.choc-intro { font-family: var(--texte) !important; font-weight: 700 !important; }
.verdict-bloc h2 em { font-family: var(--chiffre); }
.appel, .principal { background: var(--encre) !important; box-shadow: none !important; }
.appel:hover, .principal:hover { background: #2B2F35 !important; }
.offre-prix { background: var(--gris) !important; }
.offre-prix b { font-family: var(--chiffre) !important; }
.repere { border: 1px solid var(--filet) !important; border-left: 4px solid var(--rouge) !important; box-shadow: none !important; }
.repere.verifier { border-left-color: #C9922E !important; }
.repere .num { border-radius: 0 !important; background: var(--rouge); }
.repere .montant { color: var(--rouge); }
.bande { border-radius: 0 !important; background: rgba(255, 224, 71, .5) !important; box-shadow: inset 4px 0 0 var(--rouge) !important; }
.bande span { border-radius: 0 !important; background: var(--rouge) !important; }
.page { box-shadow: 0 30px 50px -36px rgba(18, 20, 23, .45) !important; }
.doc-onglets button[aria-selected="true"] { background: var(--encre); border-color: var(--encre); }
.panneau-tete { border-bottom: 1.5px solid var(--trait-fort) !important; }
.panneau-tete h3 { font-family: var(--texte) !important; font-weight: 800 !important; }
.stats b { font-family: var(--chiffre) !important; }
.astuce { background: var(--gris) !important; border-left: 3px solid var(--jaune); }
.fichiers { border: 1.5px solid var(--trait-fort) !important; }

/* La note de calcul dans le résultat */
.detail-erreur .note-calcul { display: grid; gap: 8px; padding: 10px 0 2px; }
.note-titre { margin: 0; font: 700 12px/1 var(--chiffre); text-transform: uppercase; letter-spacing: .08em; color: var(--doux); }
.detail-erreur .operations li { font-size: 14px; }
.detail-erreur .operations b { font-size: 14px; }
.detail-erreur .pourquoi { font-size: 14px; }
.ref-ferme { display: grid; gap: 2px; padding: 6px 8px; border: 1px dashed var(--trait); font: 500 13px/1.3 var(--chiffre); color: var(--doux); }
.ref-ferme small { font: 500 12px/1.3 var(--texte); }

/* ---- Tablette ---- */
@media (max-width: 900px) {
  .entete { grid-template-columns: 1fr; }
  .entete-gauche { border-right: 0; border-bottom: 1.5px solid var(--trait-fort); }
  .rubriques li { grid-template-columns: 48px minmax(0, 1fr) auto; }
  .rubriques .detail { grid-column: 2 / -1; grid-row: 2; }
  .index { columns: 1; }
  .lettre-bloc { grid-template-columns: 1fr; gap: 36px; }
  .notes { grid-template-columns: 1fr; }
  .note-accueil { padding: 22px 0; }
  .note-accueil + .note-accueil { padding: 22px 0; border-left: 0; border-top: 1px solid var(--filet); }
}
/* ---- Téléphone ---- */
@media (max-width: 640px) {
  body > :not(.evitement) { width: calc(100% - 32px); }
  .entete { margin-top: 16px; }
  .entete-gauche { padding: 12px 16px; }
  .entete-droite div { padding: 8px 10px; }
  .entete-droite dt { font-size: 10px; }
  .entete-droite dd { font-size: 13px; line-height: 1.25; }
  .entete-liens { flex-wrap: wrap; }
  .entete-liens a { flex: 1 1 auto; text-align: center; padding: 10px 8px; }
  .entete-liens .entete-depot { flex-basis: 100%; margin-left: 0; border-left: 0; border-top: 1.5px solid var(--trait-fort); }
  .ouverture { padding-top: 36px; }
  .ouverture h1 { white-space: normal; font-size: 32px; line-height: 1.02; }
  .ouverture h1 span { display: block; }
  .bulletin { display: flex; flex-direction: column; }
  .bulletin caption { display: block; order: 3; }
  .bulletin thead { display: none; }
  .bulletin tbody, .bulletin tfoot { display: block; }
  .bulletin tbody tr, .bulletin tfoot tr { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
  .bulletin tbody tr + tr { border-top: 1px solid var(--filet); }
  .bulletin tbody tr + tr > * { border-top: 0; }
  .bulletin tbody td:nth-child(2), .bulletin tbody td:nth-child(3), .bulletin tbody td:nth-child(5) { display: none; }
  .bulletin th, .bulletin td { padding: 12px 8px; }
  .bulletin tbody th { min-width: 0; font-size: 15px; }
  .bulletin tfoot tr { align-items: center; border-top: 1.5px solid var(--trait-fort); }
  .bulletin tfoot th, .bulletin tfoot td { display: block; border-top: 0; padding: 16px 8px; font-size: 15px; }
  mark.somme { font-size: 20px; }
  .corr { display: block; margin: 6px 0 0; font-size: 19px; }
  .depot-ligne { grid-template-columns: 1fr; }
  .essais { border-left: 0; border-top: 1.5px solid var(--trait-fort); }
  .exemple { padding: 14px 16px; text-align: center; }
  .v-bloc { padding-top: 64px; }
  .operations li { flex-wrap: wrap; gap: 2px 12px; }
  .operations b { margin-left: auto; }
  .somme-finale { justify-content: space-between; }
  .rubriques li { grid-template-columns: 40px minmax(0, 1fr); gap: 4px 12px; }
  .rubriques .etat { grid-column: 2; justify-self: start; }
  .rubriques .detail { grid-row: auto; }
  .lettre { padding: 26px 22px 0; transform: none; }
  .facture thead { display: none; }
  .facture tr { display: grid; grid-template-columns: 1fr auto; padding: 14px 0; }
  .facture tbody tr + tr > * { border-top: 0; }
  .facture tbody tr + tr { border-top: 1px solid var(--filet); }
  .facture th, .facture td { padding: 2px 0; }
  .facture td:not(.n) { grid-column: 1 / -1; grid-row: 2; }
  .facture .n { grid-column: 2; grid-row: 1; }
  .guide { grid-template-columns: 40px minmax(0, 1fr); gap: 4px 12px; }
  .guide .bientot { grid-column: 2; grid-row: auto; justify-self: start; }
}
@media (prefers-reduced-motion: reduce) { .en-direct .barre::after, .en-direct .corr, .en-direct mark.somme, .en-direct .faux .art { animation: none; } }

/* =====================================================================
   Les objets papier : copie à petits carreaux, documents tamponnés, liste cochée.
   Même langage que la lettre posée de travers : une vraie feuille, son ombre, sa légère inclinaison.
   ===================================================================== */
.tete-bloc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 48px; align-items: end; padding-bottom: 14px; border-bottom: 1.5px solid var(--trait-fort); }
.v-bloc .tete-bloc h2 { border: 0; padding: 0; }
.tete-bloc .chapo { margin: 0; }

/* La copie à petits carreaux, avec sa marge rouge */
.copies { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; margin-top: 52px; padding-inline: 10px; }
.copies + .somme-finale { margin-top: 56px; }
.copie { position: relative; background-color: #fff;
  background-image: linear-gradient(90deg, transparent 52px, #E59A9A 52px, #E59A9A 54px, transparent 54px), linear-gradient(#DCE5F1 1px, transparent 1px), linear-gradient(90deg, #DCE5F1 1px, transparent 1px);
  background-size: 100% 100%, 22px 22px, 22px 22px; background-position: 0 0, 0 11px, 0 0;
  border: 1px solid #E3E5E0; box-shadow: 0 1px 2px rgba(18, 20, 23, .06), 0 34px 50px -36px rgba(18, 20, 23, .5);
  padding: 26px 32px 28px 76px; transition: transform .4s var(--courbe); }
.copie-1 { transform: rotate(-1.2deg); }
.copie-2 { transform: rotate(1.3deg) translateY(16px); }
.copie:hover { transform: rotate(0) translateY(-4px); }
.copie h3 { margin: 0 0 12px; font: 700 17px/1.3 var(--texte); }
.calc { list-style: none; margin: 0; padding: 0; }
.calc li { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 44px; font-size: 15.5px; }
.calc b { font: 500 16px/1 var(--chiffre); white-space: nowrap; }
.calc .egal { margin-top: 6px; border-top: 2px solid var(--encre); font-weight: 700; }
.entoure { position: relative; font: 700 25px/1 var(--main) !important; color: var(--rouge); padding: 4px 6px; }
.entoure::after { content: ""; position: absolute; inset: -9px -14px -7px -12px; border: 2.2px solid var(--rouge); border-radius: 48% 52% 50% 46%; transform: rotate(-5deg); }
.marge { margin: 14px 0 0; text-align: right; font: 700 16px/1.25 var(--main); color: var(--rouge); transform: rotate(-2.5deg); }

/* Les documents en papier, avec leur coup de tampon */
.papiers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin-top: 48px; padding-inline: 6px; }
.papier-doc h3 { margin: 22px 0 6px; font: 700 17px/1.3 var(--texte); }
.papier-doc p { margin: 0; color: var(--doux); font-size: 15px; }
.mini-feuille { position: relative; aspect-ratio: 21 / 26; background: #fff; border: 1px solid #E3E5E0; box-shadow: 0 1px 2px rgba(18, 20, 23, .06), 0 28px 42px -30px rgba(18, 20, 23, .5); padding: 18px 16px; overflow: hidden; transition: transform .4s var(--courbe), box-shadow .4s var(--courbe); }
.papier-doc:nth-child(1) .mini-feuille { transform: rotate(-2deg); }
.papier-doc:nth-child(2) .mini-feuille { transform: rotate(1.6deg); }
.papier-doc:nth-child(3) .mini-feuille { transform: rotate(-1deg); }
.papier-doc:nth-child(4) .mini-feuille { transform: rotate(2.2deg); }
.papier-doc:hover .mini-feuille { transform: rotate(0) translateY(-8px); box-shadow: 0 1px 2px rgba(18, 20, 23, .06), 0 40px 50px -30px rgba(18, 20, 23, .5); }
.mini-titre { margin: 0 0 14px; padding-bottom: 8px; border-bottom: 1.5px solid var(--encre); font: 700 11px/1.25 var(--chiffre); text-transform: uppercase; letter-spacing: .05em; }
.mini-texte { display: grid; gap: 9px; }
.mini-texte i { display: block; height: 6px; border-radius: 3px; background: #E4E6E1; }
.mini-texte i:nth-child(3n + 1) { width: 92%; } .mini-texte i:nth-child(3n + 2) { width: 78%; } .mini-texte i:nth-child(3n) { width: 86%; }
.mini-tableau { display: grid; }
.mini-tableau i { display: block; height: 18px; border-bottom: 1px solid #E4E6E1; background: linear-gradient(90deg, #E4E6E1 0 42%, transparent 42% 66%, #E4E6E1 66% 84%, transparent 84%) center / 100% 6px no-repeat; }
.tampon-doc { position: absolute; right: 12px; bottom: 20px; padding: 7px 10px; border: 2.5px solid currentColor; border-radius: 4px; color: #8A9096; font: 700 14px/1 var(--chiffre); text-transform: uppercase; letter-spacing: .08em; transform: rotate(-12deg); mix-blend-mode: multiply; }
.tampon-doc.pret { color: var(--ok); }
.papier-doc.a-venir .mini-feuille { background: #FAFAF8; }
.papier-doc.a-venir h3 { color: #80868D; }

/* La liste de contrôle, sur une feuille lignée, cochée au stylo rouge */
.liste-controle { max-width: 900px; margin: 52px auto 0; background-color: #fff;
  border: 1px solid #E3E5E0; box-shadow: 0 1px 2px rgba(18, 20, 23, .06), 0 34px 50px -36px rgba(18, 20, 23, .5); padding: 26px 44px 30px; transform: rotate(-.7deg); }
.liste-titre { margin: 0 0 14px; font: 700 12px/1 var(--chiffre); text-transform: uppercase; letter-spacing: .1em; color: var(--doux); }
.liste-controle ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(5, 44px); grid-auto-flow: column; column-gap: 52px; }
.liste-controle li { display: flex; align-items: center; gap: 14px; height: 44px; font-size: 16px; min-width: 0; border-bottom: 1px solid #DCE4EF; }
.case { position: relative; flex: none; width: 21px; height: 21px; border: 1.8px solid var(--encre); }
.case i { position: absolute; left: 1px; top: -15px; font: 700 31px/1 var(--main); font-style: normal; color: var(--rouge); transform: rotate(-6deg); }

/* La même copie à carreaux pour le calcul du résultat */
.detail-erreur .note-calcul { position: relative; padding: 14px 16px 14px 46px; background-color: #fff;
  background-image: linear-gradient(90deg, transparent 32px, #E59A9A 32px, #E59A9A 34px, transparent 34px), linear-gradient(#DCE5F1 1px, transparent 1px), linear-gradient(90deg, #DCE5F1 1px, transparent 1px);
  background-size: 100% 100%, 18px 18px, 18px 18px; border: 1px solid #E3E5E0; box-shadow: 0 22px 30px -26px rgba(18, 20, 23, .5); }
.detail-erreur .operations li { border-bottom: 0; padding: 6px 0; }
.detail-erreur .operations .resultat { border-top: 2px solid var(--encre); margin-top: 4px; }
.detail-erreur .pourquoi { margin-top: 6px; font: 700 15px/1.3 var(--main); color: var(--rouge); }
.detail-erreur .pourquoi b { color: var(--rouge); }

/* Les gestes en direct : entourer, annoter, tamponner, cocher. L'état final est l'état par défaut. */
.en-direct .entoure::after { animation: entourer .55s cubic-bezier(.6, 0, .4, 1) calc(var(--d, 0s) + .6s) backwards; }
.en-direct .entoure { animation: ecrit .6s steps(6, end) var(--d, 0s) backwards; }
.en-direct .marge { animation: ecrit 1s steps(14, end) var(--d, 0s) backwards; }
.en-direct .tampon-doc { animation: tamponner .32s cubic-bezier(.3, 1.5, .5, 1) var(--d, 0s) backwards; }
.en-direct .case i { animation: ecrit .3s steps(4, end) var(--d, 0s) backwards; }
.fini .entoure::after, .fini .entoure, .fini .marge, .fini .tampon-doc, .fini .case i { animation: none !important; }
@keyframes entourer { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes tamponner { from { transform: rotate(-12deg) scale(1.9); } }
@media (prefers-reduced-motion: reduce) { .en-direct .entoure::after, .en-direct .entoure, .en-direct .marge, .en-direct .tampon-doc, .en-direct .case i { animation: none; } }

@media (max-width: 900px) {
  .tete-bloc { grid-template-columns: 1fr; }
  .copies { grid-template-columns: 1fr; gap: 40px; }
  .copie-2 { transform: rotate(1.3deg); }
  .papiers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
}
@media (max-width: 640px) {
  .copies, .papiers { padding-inline: 4px; }
  .copie { padding: 20px 18px 22px 58px; background-image: linear-gradient(90deg, transparent 40px, #E59A9A 40px, #E59A9A 42px, transparent 42px), linear-gradient(#DCE5F1 1px, transparent 1px), linear-gradient(90deg, #DCE5F1 1px, transparent 1px); }
  .calc li { font-size: 14.5px; }
  .papier-doc h3 { font-size: 16px; }
  .mini-feuille { padding: 12px 10px; }
  .mini-titre { font-size: 9.5px; }
  .tampon-doc { font-size: 11px; padding: 5px 7px; right: 8px; }
  .liste-controle { padding: 22px 20px 24px; }
  .liste-controle ul { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
  .liste-controle li { height: auto; min-height: 44px; }
  .liste-controle li { font-size: 15px; }
}

/* =====================================================================
   Pages de texte : pages légales et guides. « En bref » en cases sur toute la largeur,
   puis un sommaire qui reste visible à gauche et le texte à droite.
   ===================================================================== */
.page-tete { padding-top: 48px; padding-bottom: 22px; border-bottom: 1.5px solid var(--trait-fort); }
.page-rubrique { margin: 0 0 10px; font: 700 12px/1 var(--chiffre); text-transform: uppercase; letter-spacing: .1em; color: var(--rouge); }
.page-tete h1 { margin: 0; font: 800 clamp(30px, 3.8vw, 50px)/1.05 var(--texte); letter-spacing: -0.03em; }
.page-chapo { margin: 14px 0 0; font-size: 18px; color: var(--doux); }
.en-bref { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); border-bottom: 1.5px solid var(--trait-fort); }
.en-bref li { display: grid; align-content: start; gap: 6px; padding: 18px 20px 20px; font-size: 14.5px; color: var(--doux); }
.en-bref li + li { border-left: 1px solid var(--filet); }
.en-bref b { font: 700 19px/1.25 var(--texte); color: var(--encre); }
.page-corps { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 64px; padding-top: 44px; }
.sommaire { position: sticky; top: 24px; align-self: start; }
.sommaire p { margin: 0 0 10px; font: 700 12px/1 var(--chiffre); text-transform: uppercase; letter-spacing: .1em; color: var(--doux); }
.sommaire ol { margin: 0; padding: 0; list-style: none; counter-reset: s; border-top: 1px solid var(--filet); }
.sommaire li { counter-increment: s; border-bottom: 1px solid var(--filet); }
.sommaire a { display: grid; grid-template-columns: 28px 1fr; padding: 9px 0; font-size: 14.5px; color: var(--encre); text-decoration: none; }
.sommaire a::before { content: counter(s, decimal-leading-zero); font: 400 13px/1.5 var(--chiffre); color: var(--doux); }
.sommaire a:hover { color: var(--rouge); }
.texte { min-width: 0; font-size: 17px; line-height: 1.7; }
.texte section { scroll-margin-top: 20px; }
.texte section + section { margin-top: 44px; }
.texte h2 { margin: 0 0 14px; padding-top: 16px; border-top: 1.5px solid var(--trait-fort); font: 800 24px/1.2 var(--texte); letter-spacing: -0.02em; }
.texte h3 { margin: 24px 0 8px; font: 700 18px/1.3 var(--texte); }
.texte p { margin: 0 0 14px; }
.texte ul, .texte ol { margin: 0 0 14px; padding-left: 1.3em; }
.texte li { margin-bottom: 6px; }
.texte a { color: var(--encre); text-underline-offset: 3px; }
.texte strong { color: var(--encre); }
.texte .art { font: 500 .88em var(--chiffre); white-space: nowrap; }
.texte .retenir { margin: 18px 0; padding: 14px 18px; border-left: 4px solid var(--jaune); background: var(--feuille); box-shadow: 0 18px 30px -28px rgba(18, 20, 23, .5); }
.texte .retenir p:last-child { margin-bottom: 0; }
.texte .attention { margin: 18px 0; padding: 14px 18px; border-left: 4px solid var(--rouge); background: var(--feuille); }
.texte .attention p:last-child { margin-bottom: 0; }
.texte .main { font: 700 18px/1.4 var(--main); color: var(--rouge); }
.texte table { width: 100%; border-collapse: collapse; margin: 6px 0 18px; font-size: 15px; border-top: 1.5px solid var(--trait-fort); border-bottom: 1.5px solid var(--trait-fort); }
.texte th, .texte td { padding: 10px 12px; text-align: left; vertical-align: top; }
.texte thead th { font: 400 12px/1.2 var(--chiffre); text-transform: uppercase; letter-spacing: .06em; color: var(--doux); background: var(--gris); border-bottom: 1px solid var(--trait-fort); }
.texte tbody tr + tr > * { border-top: 1px solid var(--filet); }
.texte td.n, .texte th.n { text-align: right; font-family: var(--chiffre); white-space: nowrap; }
.texte dl.fiche { display: grid; grid-template-columns: 210px 1fr; margin: 0 0 14px; border-top: 1px solid var(--filet); }
.texte dl.fiche dt, .texte dl.fiche dd { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--filet); }
.texte dl.fiche dt { font: 400 13px/1.6 var(--chiffre); text-transform: uppercase; letter-spacing: .04em; color: var(--doux); }
.texte dl.fiche dd { font-weight: 600; color: var(--encre); }
.appel-guide { display: grid; gap: 4px; margin-top: 48px; padding: 18px 22px; background: var(--encre); color: #fff; text-decoration: none; border: 1.5px solid var(--trait-fort); }
.appel-guide span { font: 800 20px/1.2 var(--texte); }
.appel-guide span::after { content: " →"; }
.appel-guide small { font: 400 13px/1.4 var(--chiffre); color: #C9CDD2; }
.appel-guide:hover { background: #2B2F35; }
.sources { margin-top: 40px; padding-top: 14px; border-top: 1px solid var(--filet); font: 400 13px/1.6 var(--chiffre); color: var(--doux); }
.sources p { margin: 0 0 8px; }
.sources p:first-child { font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--encre); }
.sources ul { margin: 0 0 10px; padding-left: 1.2em; }
.mise-a-jour { margin-top: 30px; font: 400 13px/1.5 var(--chiffre); color: var(--doux); }
@media (max-width: 900px) {
  .page-corps { grid-template-columns: 1fr; gap: 28px; }
  .sommaire { position: static; }
  .en-bref li + li { border-left: 0; border-top: 1px solid var(--filet); }
}
@media (max-width: 640px) {
  .page-tete { padding-top: 32px; }
  .page-chapo { font-size: 16px; }
  .texte { font-size: 16px; }
  .texte h2 { font-size: 21px; }
  .texte table { display: block; overflow-x: auto; }
  .texte dl.fiche { grid-template-columns: 1fr; }
  .texte dl.fiche dt { border-bottom: 0; padding-bottom: 0; }
}

/* =====================================================================
   La marque et son encoche verte ; le sceau gaufré, en relief dans le papier
   ===================================================================== */
:root { --vert: #16803C; }
.marque { display: inline-flex; align-items: center; gap: 6px; }
.coche-marque { width: 1em; height: 1em; flex: none; color: var(--vert); transform: translateY(-1px); }
.ouverture { position: relative; isolation: isolate; }
.sceau { position: absolute; z-index: -1; top: -10px; right: -170px; width: 540px; height: 540px; pointer-events: none;
  filter: drop-shadow(-1px -1px 0 rgba(18, 20, 23, .085)) drop-shadow(1.5px 1.5px 0 rgba(255, 255, 255, .95)); }
.sceau circle { fill: none; stroke: #EFEFEA; stroke-width: 3; }
.sceau text { fill: #ECECE6; font: 700 21px var(--chiffre); letter-spacing: 5px; }
.sceau-coche { fill: none; stroke: #ECECE6; stroke-width: 22; stroke-linecap: round; stroke-linejoin: round; }
body.en-analyse .sceau { display: none; }
@media (max-width: 900px) { .sceau { width: 380px; height: 380px; right: -150px; top: 0; } }
@media (max-width: 640px) { .sceau { width: 280px; height: 280px; right: -110px; top: 10px; } }

/* ---- Impression du courrier (bouton « Enregistrer en PDF ») : seule la lettre sort, en page A4 ---- */
#feuille-impression { display: none; }
@media print {
  @page { size: A4; margin: 22mm 20mm; }
  body.impression-courrier > * { display: none !important; }
  body.impression-courrier > #feuille-impression { display: block !important; width: auto; margin: 0; white-space: pre-wrap; tab-size: 8; font: 11pt/1.5 Arial, sans-serif; color: #000; }
}

/* ---- Page d’accueil (index.html) : tout au centre, une fiche de paie corrigée sous les yeux ---- */
body.accueil > :not(.evitement) { width: min(1120px, 100% - 40px); }
.acc-barre { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 0; }
.acc-barre nav { display: flex; align-items: center; gap: 4px; }
.acc-barre nav a { padding: 9px 14px; font: 500 14px/1 var(--chiffre); color: var(--encre); text-decoration: none; }
.acc-barre nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.acc-barre .acc-barre-cta { background: var(--encre); color: #fff; font-weight: 700; }
.acc-barre .acc-barre-cta:hover { background: #2B2F35; text-decoration: none; }

.acc-haut { text-align: center; padding: 64px 0 0; display: grid; justify-items: center; container-type: inline-size; }
.acc-pastille { margin: 0 0 26px; padding: 8px 16px; border: 1.5px solid var(--trait-fort); background: var(--feuille); font: 500 13px/1 var(--chiffre); letter-spacing: .02em; }
.acc-pastille span { color: var(--rouge); padding: 0 4px; }
.acc-haut h1 { font-weight: 800; font-size: clamp(38px, 8.4cqi, 92px); line-height: .98; letter-spacing: -0.045em; text-wrap: balance; }
.acc-feutre { color: inherit; padding: 0 .08em; background: linear-gradient(transparent 58%, var(--jaune) 58%, var(--jaune) 92%, transparent 92%) no-repeat 0 0 / 100% 100%; animation: feutre .8s cubic-bezier(.6, 0, .3, 1) .5s backwards; }
.acc-chapo { margin: 26px 0 0; max-width: 60ch; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.55; color: var(--texte-courant); }
.acc-action { margin: 34px 0 0; }
.acc-bouton { display: inline-flex; align-items: center; gap: 16px; padding: 20px 34px; background: var(--rouge); color: #fff; text-decoration: none; font: 800 20px/1 var(--texte); letter-spacing: -0.01em; box-shadow: 0 1px 0 #8E0F14, 0 12px 28px -12px rgba(196, 22, 28, .55); transition: transform .16s var(--courbe), box-shadow .16s ease, background-color .16s ease; }
.acc-bouton span { transition: transform .2s var(--courbe); }
.acc-bouton:hover { background: #A81217; transform: translateY(-2px); box-shadow: 0 1px 0 #8E0F14, 0 18px 34px -14px rgba(196, 22, 28, .6); }
.acc-bouton:hover span { transform: translateX(5px); }
.acc-bouton:active { transform: translateY(0); }
.acc-main { margin: 16px 0 0; font: 700 19px/1.3 var(--main); color: var(--encre); transform: rotate(-1.5deg); }

/* La feuille : un vrai papier, légèrement de travers, posé sur la table */
.acc-scene { margin: 72px auto 0; max-width: 780px; display: grid; justify-items: center; gap: 18px; }
.acc-feuille { position: relative; width: 100%; background: #fff; padding: 30px 34px 26px; transform: rotate(-1.2deg);
  box-shadow: 0 1px 1px rgba(18, 20, 23, .06), 0 10px 20px -6px rgba(18, 20, 23, .12), 0 40px 70px -24px rgba(18, 20, 23, .28);
  animation: pose 1s cubic-bezier(.2, .8, .2, 1) backwards; }
@keyframes pose { from { transform: translateY(46px) rotate(2.5deg); opacity: 0; } }
.acc-feuille-tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 12px 28px; padding: 0 150px 16px 0; border-bottom: 2px solid var(--encre); }
.acc-feuille-tete > div { display: grid; gap: 2px; text-align: left; }
.acc-feuille-tete b { font: 800 18px/1 var(--texte); letter-spacing: .06em; }
.acc-feuille-tete > div span { font: 400 13px/1.2 var(--chiffre); color: var(--doux); }
.acc-feuille-tete dl { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; }
.acc-feuille-tete dl div { text-align: left; }
.acc-feuille-tete dt { font: 400 11px/1 var(--chiffre); text-transform: uppercase; letter-spacing: .08em; color: var(--doux); }
.acc-feuille-tete dd { margin: 3px 0 0; font-weight: 600; font-size: 14px; }
.acc-feuille .table-cadre { margin-top: 6px; border: 0; }
.acc-feuille .bulletin thead th { background: none; border-bottom: 1px solid var(--trait); }
.acc-feuille .bulletin tfoot th, .acc-feuille .bulletin tfoot td { border-top: 2px solid var(--encre); padding-top: 14px; font-weight: 800; font-size: 17px; }
.acc-feuille .bulletin tfoot th { text-align: left; }
.acc-tampon { position: absolute; top: 18px; right: 26px; padding: 8px 14px; border: 3.5px solid var(--rouge); color: var(--rouge); font: 800 22px/1 var(--texte); letter-spacing: .1em; transform: rotate(-9deg); opacity: .9; mix-blend-mode: multiply; }
.acc-note { position: absolute; right: -14px; bottom: -30px; font: 700 23px/1 var(--main); color: var(--rouge); transform: rotate(-4deg); white-space: nowrap; }
.en-direct .acc-tampon { animation: tamponner .34s cubic-bezier(.3, 1.6, .5, 1) var(--d, 0s) backwards; }
.en-direct .acc-note { animation: ecrit .9s steps(12, end) var(--d, 0s) backwards; }
.fini .acc-tampon, .fini .acc-note { animation: none !important; }
.acc-scene figcaption { margin-top: 18px; font: 400 13px/1.4 var(--chiffre); color: var(--doux); text-align: center; }

/* Les chiffres qui fondent la confiance */
.acc-chiffres { list-style: none; margin: 88px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1.5px solid var(--trait-fort); border-bottom: 1.5px solid var(--trait-fort); }
.acc-chiffres li { display: grid; justify-items: center; align-content: start; gap: 8px; padding: 30px 16px; text-align: center; }
.acc-chiffres li + li { border-left: 1px solid var(--filet); }
.acc-chiffres b { font: 800 clamp(30px, 3.6vw, 44px)/1 var(--texte); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.acc-chiffres span { font: 400 13px/1.45 var(--chiffre); color: var(--doux); }

.acc-etapes-bloc { margin-top: 96px; text-align: center; }
.acc-etapes-bloc h2 { font-size: clamp(28px, 3.4vw, 40px); }
.acc-etapes { list-style: none; counter-reset: e; margin: 36px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.acc-etapes li { counter-increment: e; display: grid; justify-items: center; align-content: start; gap: 10px; padding: 30px 24px 28px; background: var(--feuille); border: 1.5px solid var(--trait-fort); }
.acc-etapes li::before { content: counter(e); display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--rouge); color: var(--rouge); font: 700 20px/1 var(--main); transform: rotate(-6deg); }
.acc-etapes b { font: 800 22px/1.2 var(--texte); }
.acc-etapes span { font-size: 15px; color: var(--doux); max-width: 30ch; }

.acc-fin { margin-top: 110px; padding: 72px 24px; background: var(--encre); color: #fff; text-align: center; display: grid; justify-items: center; gap: 26px; }
.acc-fin h2 { color: #fff; font-size: clamp(26px, 3.6vw, 44px); line-height: 1.12; }
.acc-fin p { margin: 0; font: 400 13px/1.5 var(--chiffre); color: #B9BEC6; }
.acc-bouton-clair { background: #fff; color: var(--encre); box-shadow: none; }
.acc-bouton-clair:hover { background: var(--jaune); box-shadow: none; }

@media (max-width: 820px) {
  .acc-chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .acc-chiffres li:nth-child(3) { border-left: 0; }
  .acc-chiffres li:nth-child(n + 3) { border-top: 1px solid var(--filet); }
  .acc-etapes { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .acc-barre nav a:not(.acc-barre-cta) { display: none; }
  .acc-haut { padding-top: 34px; }
  .acc-pastille { font-size: 11px; padding: 7px 10px; }
  .acc-bouton { width: 100%; justify-content: center; padding: 19px 20px; }
  .acc-scene { margin-top: 52px; }
  .acc-feuille { padding: 20px 16px 18px; transform: rotate(-.8deg); }
  .acc-feuille .col-base { display: none; }
  .acc-feuille .bulletin th, .acc-feuille .bulletin td { padding: 9px 6px; }
  .acc-feuille .bulletin .n { font-size: 13px; }
  .acc-tampon { top: 12px; right: 10px; font-size: 15px; padding: 6px 9px; border-width: 2.5px; }
  .acc-note { right: 0; bottom: -28px; font-size: 19px; }
  .acc-feuille-tete { padding-right: 96px; }
  .acc-fin { padding: 52px 18px; }
}
@media (prefers-reduced-motion: reduce) { .acc-feuille, .acc-feutre, .en-direct .acc-tampon, .en-direct .acc-note { animation: none; } }
.acc-chiffres b.acc-mot { font-size: clamp(24px, 2.6vw, 32px); padding-top: 6px; }

/* Les coordonnées demandées juste avant le PDF */
.trous-pdf { display: grid; gap: 12px; margin-top: 14px; padding: 16px 18px; border: 1.5px solid var(--trait-fort); background: var(--feuille); }
.trous-pdf p { margin: 0; }
.trous-champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
.trous-champs label { display: grid; gap: 4px; font-weight: 600; font-size: 14px; }
@media (max-width: 640px) { .trous-champs { grid-template-columns: 1fr; } }