/* Marge, page de présentation : « Bleu d'encre ». Blanc lumineux, grands aplats bleu d'encre,
   une touche corail ; Besley pour les titres, Familjen Grotesk pour le texte, Spline Sans Mono
   pour les annotations ; le signe de correction (mot barré, ajout au-dessus) comme motif.
   Habillage : la feuille qui part chez l'imprimeur (repères de marge, traits de coupe, mires,
   cahiers pliés, folios, gamme de contrôle) ; les filets sont en tirets.
   Finitions d'après les principes d'Apple (HIG) : grille de 8 px, zones cliquables de 44 px au
   moins, retour à la pression, courbes et durées standard, arrondis concentriques, contrastes AA. */

@font-face { font-family: "Besley"; font-style: normal; font-weight: 600; font-display: swap; src: url("polices/besley-600.woff2") format("woff2"); }
@font-face { font-family: "Besley"; font-style: normal; font-weight: 800; font-display: swap; src: url("polices/besley-800.woff2") format("woff2"); }
@font-face { font-family: "Besley"; font-style: italic; font-weight: 600; font-display: swap; src: url("polices/besley-600-italique.woff2") format("woff2"); }
@font-face { font-family: "Besley"; font-style: italic; font-weight: 800; font-display: swap; src: url("polices/besley-800-italique.woff2") format("woff2"); }
@font-face { font-family: "Familjen Grotesk"; font-weight: 400; font-display: swap; src: url("polices/familjen-grotesk-400.woff2") format("woff2"); }
@font-face { font-family: "Familjen Grotesk"; font-weight: 500; font-display: swap; src: url("polices/familjen-grotesk-500.woff2") format("woff2"); }
@font-face { font-family: "Familjen Grotesk"; font-weight: 600; font-display: swap; src: url("polices/familjen-grotesk-600.woff2") format("woff2"); }
@font-face { font-family: "Spline Sans Mono"; font-weight: 400; font-display: swap; src: url("polices/spline-sans-mono-400.woff2") format("woff2"); }
@font-face { font-family: "Spline Sans Mono"; font-weight: 500; font-display: swap; src: url("polices/spline-sans-mono-500.woff2") format("woff2"); }

body.encre {
  /* couleurs */
  --blanc: #ffffff; --bleu: #1d2b6b; --bleu-nuit: #141f52; --bleu-teinte: #eef1fa; --bleu-trait: #d5dbf0;
  --texte: #12172e; --texte-2: #4a5070; --sur-bleu: #c9d0ee;
  --corail: #ff6b4a;          /* surlignage, points, jalon de Marge : jamais pour du texte */
  --corail-texte: #b23a1e;    /* corail lisible : 6:1 sur blanc */
  --corail-fond: #c23f22;     /* fond d'étiquette sous texte blanc : 5,2:1 */
  --corail-pale: #ffe7e1;
  /* polices */
  --titre: "Besley", Georgia, serif; --texte-police: "Familjen Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Spline Sans Mono", ui-monospace, monospace;
  --livre: "Source Serif 4", Georgia, serif;
  /* grille de 8 */
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 20px; --e-6: 24px; --e-8: 32px; --e-10: 40px;
  --e-12: 48px; --e-16: 64px; --e-20: 80px; --e-24: 96px; --e-28: 112px;
  /* arrondis : l'intérieur plus la marge donne l'extérieur */
  --r-1: 8px; --r-2: 12px; --r-3: 16px; --r-4: 24px; --r-5: 32px;
  /* profondeur */
  --elev-1: 0 1px 2px rgb(10 16 48 / .08), 0 8px 24px -12px rgb(10 16 48 / .3);
  --elev-2: 0 2px 4px rgb(5 10 40 / .2), 0 32px 64px -24px rgb(5 10 40 / .55);
  /* mouvement */
  --ease: cubic-bezier(.25, .1, .25, 1); --ease-out: cubic-bezier(0, 0, .58, 1);
  --t-instant: 100ms; --t-rapide: 200ms; --t-normal: 300ms; --t-lent: 500ms;
  margin: 0; background: var(--blanc); color: var(--texte); font: 400 17px/1.6 var(--texte-police); -webkit-font-smoothing: antialiased;
}
body.encre ::selection { background: #ffd9cf; color: var(--texte); }
body.encre a { color: var(--bleu); text-underline-offset: 4px; transition: color var(--t-rapide) var(--ease); }
body.encre a:hover { color: var(--corail-texte); }
body.encre :focus-visible { outline: none; box-shadow: 0 0 0 2px var(--blanc), 0 0 0 5px var(--corail); }
body.encre a:not(.pilule):focus-visible { border-radius: var(--e-1); }
.encre h1, .encre h2 { font-family: var(--titre); font-weight: 800; letter-spacing: -.02em; text-wrap: balance; }
.encre h3 { font-family: var(--titre); font-weight: 600; letter-spacing: -.01em; text-wrap: balance; }
.encre h1 i, .encre h2 i { font-weight: 600; }
.encre p { text-wrap: pretty; }
.cadre { max-width: 1200px; margin: 0 auto; padding: 0 var(--e-8); }

/* en-tête : sur l'aplat bleu */
.tete { position: sticky; top: 0; z-index: 20; background: var(--bleu); color: var(--blanc); transition: box-shadow var(--t-normal) var(--ease); }
.tete.defile { box-shadow: 0 8px 24px -12px rgb(10 16 48 / .6); }
.tete-rang { display: flex; align-items: center; gap: var(--e-8); height: 64px; }
.sigle { display: inline-flex; align-items: center; min-height: 44px; font: italic 800 30px/1 var(--titre); letter-spacing: -.02em; text-decoration: none; }
body.encre .tete .sigle { color: var(--blanc); }
.sigle-point { color: var(--corail); font-style: normal; }
.tete nav { margin-left: auto; display: flex; gap: var(--e-6); font: 500 15px var(--texte-police); }
body.encre .tete nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--sur-bleu); text-decoration: none; }
body.encre .tete nav a:hover { color: var(--blanc); }

/* pilules (boutons) : capsule, 44 px au moins, enfoncement à la pression */
.pilule { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 var(--e-6); border-radius: 999px;
  font: 600 16px/1 var(--texte-police); text-decoration: none; white-space: nowrap;
  transition: background var(--t-rapide) var(--ease), color var(--t-rapide) var(--ease), transform var(--t-instant) var(--ease-out); }
.pilule:active { transform: scale(.97); }
body.encre .pilule-claire { background: var(--blanc); color: var(--bleu); }
body.encre .pilule-claire:hover { background: var(--bleu-teinte); color: var(--bleu); }
body.encre .pilule-pleine { background: var(--bleu); color: var(--blanc); box-shadow: var(--elev-1); }
body.encre .pilule-pleine:hover { background: var(--bleu-nuit); color: var(--blanc); }
.pilule-petite { min-height: 44px; padding: 0 var(--e-5); font-size: 15px; }
.en-attente { opacity: .55; cursor: not-allowed; }
.en-attente:active { transform: none; }

/* la une : grand aplat bleu d'encre */
.une { background: var(--bleu); color: var(--blanc); padding: var(--e-20) 0 var(--e-28); overflow: hidden; }
.une-grille { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--e-12); align-items: center; }
.une h1 { margin: 0; font-size: clamp(44px, 4.6vw, 68px); line-height: 1.04; color: var(--blanc); }
.insecable { white-space: nowrap; }
/* le signe de correction : le mot fautif barré de corail, la correction posée au-dessus */
.corr { position: relative; display: inline-block; padding-top: .7em; }
.corr s { text-decoration: none; background: linear-gradient(var(--corail), var(--corail)) 0 58% / 100% .09em no-repeat; transition: background-size 600ms var(--ease) 300ms; }
.corr .ajout { position: absolute; left: .08em; top: .8em; font: 500 .34em/1 var(--mono); color: #ff8a6e; white-space: nowrap; transform: rotate(-3deg);
  transform-origin: left bottom; transition: opacity var(--t-lent) var(--ease) 900ms, transform var(--t-lent) var(--ease) 900ms; }
/* le signe d'insertion des correcteurs, dessiné : les polices ne l'ont pas toutes */
.corr .ajout::before, .etiquette-marge::before { content: ""; display: inline-block; width: .8em; height: .62em; margin-right: .35em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1.5 8.5 6 1.5l4.5 7' fill='none' stroke='%23ff6b4a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.anime .une h1:not(.vue) .corr s { background-size: 0 .09em; }
.anime .une h1:not(.vue) .corr .ajout { opacity: 0; transform: rotate(-3deg) translateY(.3em); }
.une-chapeau { margin: var(--e-6) 0 0; max-width: 32em; font-size: 19px; line-height: 1.55; color: var(--sur-bleu); }
.une-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-4) var(--e-8); margin-top: var(--e-10); }
body.encre .lien-clair { display: inline-flex; align-items: center; min-height: 44px; color: var(--blanc); font-weight: 500;
  text-decoration: underline; text-decoration-color: rgb(255 255 255 / .4); text-underline-offset: 6px; }
body.encre .lien-clair:hover { color: var(--blanc); text-decoration-color: var(--corail); }
.une-attente { margin: var(--e-3) 0 0; font-size: 15px; color: var(--sur-bleu); }
.une-promesses { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-6); margin: var(--e-10) 0 0; padding: 0; list-style: none; font: 500 15px var(--texte-police); color: var(--sur-bleu); }
.une-promesses li { display: inline-flex; align-items: center; gap: var(--e-2); }
.une-promesses li::before { content: ""; width: 8px; height: 8px; border-radius: 1px; background: var(--corail); }

/* la une : Marge relit une page en direct. Un faisceau descend, chaque coquille s'allume en corail
   et sa carte s'ajoute en haut de la pile. Sans script : la page relue et les trois cartes. */
.une-lecteur { position: relative; margin: 0; }
.lecteur { border-radius: 2px; background: var(--blanc); box-shadow: var(--elev-2); }
.lecteur-barre { display: flex; justify-content: space-between; gap: var(--e-4); padding: var(--e-3) var(--e-5);
  background: var(--bleu-teinte); font: 500 12.5px var(--mono); color: var(--texte-2); font-variant-numeric: tabular-nums; }
.lecteur-etat { color: var(--bleu); }
.lecteur-page { position: relative; padding: var(--e-5) var(--e-6) var(--e-8); font: 400 16px/1.6 var(--livre); color: var(--texte); }
.lecteur-page p { margin: 0; }
.faute { border-radius: 3px; background: rgb(255 107 74 / .38); transition: background-color var(--t-normal) var(--ease); }
.faisceau { display: none; position: absolute; left: 0; right: 0; top: 0; height: 30px; pointer-events: none;
  border-bottom: 2px solid var(--bleu); background: linear-gradient(rgb(29 43 107 / 0), rgb(29 43 107 / .08) 55%, rgb(29 43 107 / .2)); }
.trouvailles { display: grid; gap: var(--e-2); min-height: 168px; margin: var(--e-4) 0 0; padding: 0; list-style: none; }
.trouvailles li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-3); padding: var(--e-3) var(--e-4);
  border-radius: var(--r-2); background: var(--blanc); box-shadow: var(--elev-1); color: var(--texte); }
.trouvailles .mots { font: 400 18px var(--livre); }
.trouvailles s { color: var(--texte-2); text-decoration: line-through 2px var(--corail); }
.trouvailles .vers { font-size: 15px; }
.trouvailles b { font-weight: 600; color: var(--bleu); }
.trouvailles .ou { flex: none; font: 500 12px var(--mono); color: var(--texte-2); }
.lecteur-compteur { margin: var(--e-4) 0 0; font: 500 14px var(--mono); color: var(--sur-bleu); }
.lecteur-compteur b { margin-right: var(--e-2); font: 800 34px/1 var(--titre); color: var(--blanc); vertical-align: -3px; font-variant-numeric: tabular-nums; }
.une-lecteur figcaption { margin-top: var(--e-3); font-size: 13px; line-height: 1.45; color: var(--sur-bleu); }
/* animée : les fautes ne s'allument qu'au passage du faisceau, les cartes arrivent une à une */
.anime .lecteur .faisceau { display: block; }
.anime .lecteur .faute:not(.trouvee) { background: transparent; }
.anime .lecteur .faute.trouvee { animation: impulsion 900ms ease-out; }
.anime .trouvailles li:not(.montree) { display: none; }
.anime .trouvailles li.montree { animation: arrivee 500ms cubic-bezier(.2, .9, .3, 1.2); }
@keyframes impulsion { from { box-shadow: 0 0 0 0 rgb(255 107 74 / .7); } to { box-shadow: 0 0 0 14px rgb(255 107 74 / 0); } }
@keyframes arrivee { from { opacity: 0; transform: translateX(28px) scale(.97); } }
.sur { padding: var(--e-1) var(--e-3); border-radius: 999px; background: var(--corail-pale); color: var(--corail-texte); font-weight: 600; font-size: 13px; }
.vers { font: 400 20px var(--texte-police); color: var(--texte-2); }

/* blocs */
.bloc { padding: var(--e-28) 0; }
.bloc-teinte { background: var(--bleu-teinte); }
.bloc-tete { max-width: 760px; margin-bottom: var(--e-16); }
.bloc h2 { margin: 0; font-size: clamp(34px, 3.4vw, 48px); line-height: 1.08; color: var(--bleu); }
.bloc-tete p { margin: var(--e-4) 0 0; font-size: 19px; line-height: 1.55; color: var(--texte-2); }
.precision { margin: var(--e-8) 0 0; font-size: 15px; color: var(--texte-2); }

/* ---------- l'habillage : la feuille qui part chez l'imprimeur ----------
   Tout est décoratif (aria-hidden) et sans attribut style (CSP) : pseudo-éléments et dégradés. */
/* les repères de marge, en tirets, comme dans le logiciel de mise en page */
@media (min-width: 1280px) {
  main { position: relative; }
  main::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; z-index: 3; box-sizing: border-box; width: 1200px; transform: translateX(-50%);
    border-left: 1px dashed rgb(29 43 107 / .18); border-right: 1px dashed rgb(29 43 107 / .18); pointer-events: none; }
}
/* les traits de coupe aux quatre coins d'une feuille (classe coupe : « feuille » sert à l'application) */
.coupe { position: relative; --repere: rgb(29 43 107 / .5); --hors: 26px; --trait: 16px; }
.coupe::after { content: ""; position: absolute; inset: calc(-1 * var(--hors)); pointer-events: none;
  background:
    linear-gradient(var(--repere), var(--repere)) left 0 top var(--hors) / var(--trait) 1px no-repeat,
    linear-gradient(var(--repere), var(--repere)) left var(--hors) top 0 / 1px var(--trait) no-repeat,
    linear-gradient(var(--repere), var(--repere)) right 0 top var(--hors) / var(--trait) 1px no-repeat,
    linear-gradient(var(--repere), var(--repere)) right var(--hors) top 0 / 1px var(--trait) no-repeat,
    linear-gradient(var(--repere), var(--repere)) left 0 bottom var(--hors) / var(--trait) 1px no-repeat,
    linear-gradient(var(--repere), var(--repere)) left var(--hors) bottom 0 / 1px var(--trait) no-repeat,
    linear-gradient(var(--repere), var(--repere)) right 0 bottom var(--hors) / var(--trait) 1px no-repeat,
    linear-gradient(var(--repere), var(--repere)) right var(--hors) bottom 0 / 1px var(--trait) no-repeat; }
.une .coupe { --repere: rgb(255 255 255 / .7); }
/* la mire de repérage au-dessus de la page de la une, et celle des plis */
.une .lecteur::before { content: ""; position: absolute; left: 50%; top: -30px; width: 18px; height: 18px; margin-left: -9px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.75' stroke-width='1'%3E%3Ccircle cx='9' cy='9' r='5'/%3E%3Cpath d='M9 0v18M0 9h18'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; }
.mire { display: block; width: 22px; height: 22px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cg fill='none' stroke='%231d2b6b' stroke-width='1.1'%3E%3Ccircle cx='11' cy='11' r='6'/%3E%3Cpath d='M11 0v22M0 11h22'/%3E%3C/g%3E%3Ccircle cx='11' cy='11' r='2.4' fill='%231d2b6b'/%3E%3C/svg%3E") center / contain no-repeat; }
/* le pli entre deux cahiers : un tiret, la mire au milieu, le cahier à gauche */
.pli { position: relative; display: flex; justify-content: space-between; align-items: flex-end; margin: 0; padding-bottom: var(--e-2);
  border-bottom: 1px dashed rgb(29 43 107 / .35); font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--texte-2); }
.pli .mire { position: absolute; left: 50%; bottom: -11px; margin-left: -11px; background-color: var(--blanc); }
/* la rubrique numérotée, au fil d'un tiret */
body.encre .rubrique { display: flex; align-items: center; gap: var(--e-3); margin: 0 0 var(--e-5); font: 500 13px var(--mono); color: var(--bleu); white-space: nowrap; }
.rubrique::after { content: ""; flex: 1; max-width: 240px; border-top: 1px dashed rgb(29 43 107 / .4); }
body.encre .bloc-encre .rubrique { color: var(--sur-bleu); }
.bloc-encre .rubrique::after { border-color: rgb(255 255 255 / .35); }
/* le folio, en pied de partie */
.bloc { padding-bottom: var(--e-12); }
body.encre .folio { margin: var(--e-12) 0 0; font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--texte-2); }
body.encre .bloc-encre .folio { color: var(--sur-bleu); }
body.encre .questions .folio { grid-column: 1 / -1; margin-top: 0; }
/* au bas de la feuille : la gamme de contrôle et la ligne d'information */
.pied-tirage { padding-top: var(--e-6); }
.gamme { display: flex; margin: 0; }
.gamme span { width: 26px; height: 14px; background: var(--bleu); }
.gamme span:nth-child(2) { background: #4a5590; } .gamme span:nth-child(3) { background: #7780b0; }
.gamme span:nth-child(4) { background: #a5abcf; } .gamme span:nth-child(5) { background: var(--bleu-trait); }
.gamme span:nth-child(6) { background: var(--bleu-teinte); } .gamme span:nth-child(7) { background: var(--corail); }
.gamme span:nth-child(8) { background: #ff9c85; } .gamme span:nth-child(9) { background: #ffcdc1; }
.gamme span:nth-child(10) { background: var(--texte); }
.ligne-info { display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-6); margin: var(--e-3) 0 0; font: 400 11px var(--mono); color: var(--texte-2); }

/* la chronologie */
.chrono { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)) minmax(0, 1.5fr) minmax(0, 1fr); margin: 0; padding: var(--e-10) 0 0; list-style: none; }
.chrono::before, .chrono::after { content: ""; position: absolute; left: 0; top: 49px; height: 2px; }
.chrono::before { right: 0; background: var(--bleu-trait); }
.chrono::after { width: 70.6%; background: var(--bleu); transform-origin: left; transition: transform 2400ms linear; }
.chrono li { position: relative; padding-right: var(--e-6); transition: opacity var(--t-lent) var(--ease); }
/* le point de lecture : posé par le script sur le jalon atteint (pas d'attribut style : CSP) */
.curseur { position: absolute; left: 0; top: 0; z-index: 2; width: 20px; height: 20px; border-radius: 50%; background: var(--corail);
  box-shadow: 0 0 0 6px rgb(255 107 74 / .25); pointer-events: none; transition: transform 380ms var(--ease), opacity var(--t-normal); }
.chrono-marge.passee .jalon { animation: impulsion 1200ms ease-out 2; }
.jalon { position: relative; z-index: 1; display: block; width: 20px; height: 20px; border-radius: 50%; background: var(--bleu); border: 4px solid var(--blanc); box-shadow: 0 0 0 2px var(--bleu); }
.chrono b { display: block; margin-top: var(--e-6); font: 600 18px/1.2 var(--titre); color: var(--texte); hyphens: manual; }
.chrono .quand { display: block; margin-top: var(--e-2); font: 500 13px var(--mono); color: var(--bleu); }
.chrono .quoi { display: block; margin-top: var(--e-2); font-size: 15px; line-height: 1.45; color: var(--texte-2); }
.chrono-marge .jalon { width: 24px; height: 24px; margin-top: -2px; background: var(--corail); box-shadow: 0 0 0 2px var(--corail), 0 0 0 8px var(--corail-pale); }
.chrono-marge b { font-size: 28px; font-weight: 800; color: var(--corail-texte); }
.chrono-marge .quand { color: var(--corail-texte); }
.chrono-marge .quoi { color: var(--texte); }
/* annotation en marge, comme sur une épreuve : le motif en petit */
.etiquette-marge { position: absolute; top: calc(-1 * var(--e-10)); left: 0; color: var(--corail-texte); font: 500 13px/1.4 var(--mono); white-space: nowrap; transform: rotate(-2deg); transform-origin: left; }
.chrono-apres .jalon { background: var(--blanc); box-shadow: 0 0 0 2px #9aa3c9; border-color: var(--blanc); outline: 2px dashed #9aa3c9; outline-offset: -2px; }
.anime .chrono:not(.vue)::after { transform: scaleX(0); }
.anime .chrono li:not(.passee) { opacity: .25; }
.chrono.arrivee .curseur { opacity: 0; }

/* pourquoi à ce moment-là : sous la frise, trois colonnes, filets bleus */
.raisons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: var(--e-20); padding-top: var(--e-10);
  border-top: 1px dashed var(--bleu-trait); }
.raisons-titre { grid-column: 1 / -1; margin: 0 0 var(--e-6); font: 500 13px var(--mono); color: var(--corail-texte); letter-spacing: 0; }
.raisons article { padding: 0 var(--e-10) 0 0; }
.raisons article + article { padding-left: var(--e-10); border-left: 1px dashed var(--bleu-trait); }
.raisons h4 { margin: 0; font: 600 24px/1.2 var(--titre); letter-spacing: -.01em; color: var(--bleu); text-wrap: balance; }
.raisons p { margin: var(--e-3) 0 0; font-size: 18px; color: var(--texte-2); }

/* comment ça marche : trois étapes, chacune avec un mini-écran de l’outil */
.etapes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-8); margin: 0; padding: 0; list-style: none; counter-reset: none; }
.etapes > li { position: relative; }
.etape-num { display: inline-block; margin-right: var(--e-3); font: italic 800 27px/1 var(--titre); color: var(--corail-texte); }
.etapes h3 { margin: var(--e-6) 0 0; font-size: 27px; line-height: 1.15; color: var(--bleu); }
.ecran { box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; gap: var(--e-3); height: 208px;
  padding: var(--e-6); border-radius: var(--r-4); background: var(--bleu-teinte); border: 1px solid var(--bleu-trait); }
.ecran p { margin: 0; }
.ecran-titre { font: 800 22px/1.1 var(--titre); letter-spacing: -.02em; color: var(--bleu); }
.ecran-fichier { display: flex; align-items: center; gap: var(--e-3); padding: var(--e-3) var(--e-4); border-radius: var(--r-2);
  background: var(--blanc); box-shadow: var(--elev-1); font: 400 13px var(--mono); color: var(--texte); min-width: 0; }
.ecran-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ecran-pdf { flex: none; padding: 2px 6px; border-radius: 4px; background: var(--corail-pale); color: var(--corail-texte); font: 500 11px var(--mono); }
.ecran-bouton { align-self: flex-start; padding: 10px 18px; border-radius: 999px; background: var(--bleu); color: var(--blanc); font: 600 14px var(--texte-police); }
.ecran-jalons { display: flex; align-items: center; margin: var(--e-2) 0 0; padding: 0; list-style: none; }
.ecran-jalons li { position: relative; flex: 1; height: 14px; }
.ecran-jalons li::before { content: ""; position: absolute; left: 0; top: 0; width: 14px; height: 14px; border-radius: 50%; box-sizing: border-box;
  border: 2px solid #9aa3c9; background: var(--blanc); z-index: 1; }
.ecran-jalons li::after { content: ""; position: absolute; left: 14px; right: 0; top: 6px; height: 2px; background: var(--bleu-trait); }
.ecran-jalons li:last-child { flex: none; width: 14px; }
.ecran-jalons li:last-child::after { display: none; }
.ecran-jalons .fait::before { border-color: var(--bleu); background: var(--bleu); }
.ecran-jalons .fait::after { background: var(--bleu); }
.ecran-jalons .en-cours::before { border-color: var(--corail); background: var(--corail); box-shadow: 0 0 0 5px rgb(255 107 74 / .2); }
.ecran-pourcent { font: 500 14px var(--texte-police); color: var(--texte-2); }
.ecran-pourcent b { font: 800 30px/1 var(--titre); color: var(--corail-texte); margin-left: var(--e-1); }
.ecran-barre { height: 6px; border-radius: 3px; background: var(--bleu-trait); overflow: hidden; }
.ecran-barre span { display: block; width: 45%; height: 100%; background: var(--bleu); }
.ecran-decision { justify-content: space-between; background: var(--blanc); box-shadow: var(--elev-1); }
.ecran-tete { display: flex; justify-content: space-between; align-items: center; font: 500 13px var(--mono); color: var(--texte); }
.ecran-mots { display: flex; align-items: baseline; gap: var(--e-3); font: 400 26px/1.1 var(--livre); }
.ecran-mots s { color: var(--texte-2); text-decoration: line-through 2px var(--corail); }
.ecran-mots .vers { font: 400 18px var(--texte-police); color: var(--texte-2); }
.ecran-mots b { font-weight: 600; color: var(--bleu); }
.ecran-choix { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-3); }
.ecran-choix span { display: flex; align-items: center; justify-content: center; height: 48px; border-radius: var(--r-2);
  font: 800 22px var(--titre); }
.ecran-choix .oui { background: var(--bleu); color: var(--blanc); }
.ecran-choix .non { border: 1px solid var(--bleu-trait); color: var(--bleu); }
.ecran-mots s { text-decoration: none; background: linear-gradient(var(--corail), var(--corail)) 0 58% / 100% 2px no-repeat; }
/* animés à l'entrée dans l'écran, de gauche à droite */
.ecran-fichier, .ecran-jalons li::before, .ecran-jalons li::after, .ecran-barre span, .ecran-mots s { transition: all 500ms var(--ease); }
.anime .etapes:not(.vue) .ecran-fichier { opacity: 0; transform: translateY(-16px); }
.etapes.vue .ecran-fichier { transition-delay: 300ms; }
.etapes.vue .ecran-bouton { animation: presse 600ms var(--ease) 1100ms; }
.anime .etapes:not(.vue) .ecran-jalons li::before { border-color: #9aa3c9; background: var(--blanc); box-shadow: none; }
.anime .etapes:not(.vue) .ecran-jalons li::after { background: var(--bleu-trait); }
.etapes.vue .ecran-jalons li:nth-child(1)::before, .etapes.vue .ecran-jalons li:nth-child(1)::after { transition-delay: 1300ms; }
.etapes.vue .ecran-jalons li:nth-child(2)::before, .etapes.vue .ecran-jalons li:nth-child(2)::after { transition-delay: 1700ms; }
.etapes.vue .ecran-jalons li:nth-child(3)::before, .etapes.vue .ecran-jalons li:nth-child(3)::after { transition-delay: 2100ms; }
.etapes.vue .ecran-jalons li:nth-child(4)::before { transition-delay: 2500ms; }
.anime .etapes:not(.vue) .ecran-barre span { width: 0; }
.etapes.vue .ecran-barre span { transition: width 1800ms var(--ease) 1300ms; }
.anime .etapes:not(.vue) .ecran-mots s { background-size: 0 2px; }
.etapes.vue .ecran-mots s { transition-delay: 3000ms; transition-duration: 400ms; }
.etapes.vue .ecran-choix .oui { animation: presse 600ms var(--ease) 3600ms; }
@keyframes presse { 40% { transform: scale(.94); filter: brightness(.85); } }
.etapes > li > p { margin: var(--e-3) 0 0; font-size: 18px; color: var(--texte-2); }

/* la preuve : un essai réel, entre la une et la frise */
.preuve-rang { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--e-8); align-items: center; padding-top: var(--e-12); padding-bottom: var(--e-12); }
.preuve-chiffre { grid-row: span 2; margin: 0; font: 800 112px/.9 var(--titre); letter-spacing: -.04em; color: var(--bleu); font-variant-numeric: tabular-nums; }
.preuve-texte { margin: 0; max-width: 30em; font-size: 24px; line-height: 1.35; color: var(--texte); }
.preuve-texte b { font-weight: 600; color: var(--corail-texte); }
.preuve-note { margin: var(--e-2) 0 0; font: 400 13px var(--mono); color: var(--texte-2); }

/* livrables : en rangées, vitrines concentriques (8 + 16 = 24) */
.livrables { display: grid; gap: var(--e-16); }
.livrable { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: var(--e-12); align-items: center; }
.livrable-inverse .vitrine { order: 2; }
.livrable h3 { margin: 0; font-size: 30px; line-height: 1.15; color: var(--bleu); }
.livrable-texte p { margin: var(--e-3) 0 0; font-size: 18px; color: var(--texte-2); }
.livrable-texte .precision { margin-top: var(--e-4); font-size: 13px; }
.voir-exemple { margin: var(--e-16) 0 0; text-align: center; }
.vitrine { padding: var(--e-4); border-radius: 2px; background: var(--blanc); box-shadow: 0 1px 2px rgb(10 16 48 / .1); }
.vitrine img { display: block; width: 100%; height: auto; box-shadow: var(--elev-1); }
.vitrine-pdf { position: relative; padding-bottom: var(--e-16); }
.pdf-page { position: relative; }
.surlignage { position: absolute; left: 3.2%; top: 52%; width: 13.3%; height: 11%; border-radius: 2px; background: var(--corail); mix-blend-mode: multiply; opacity: .45;
  transform-origin: left; transition: transform 600ms var(--ease) 300ms; }
.anime .vitrine-pdf:not(.vue) .surlignage { transform: scaleX(0); }
.bulle { transition: opacity 400ms var(--ease) 1000ms, transform 400ms cubic-bezier(.2, .9, .3, 1.2) 1000ms; }
.anime .vitrine-pdf:not(.vue) .bulle { opacity: 0; transform: translateY(10px) scale(.96); }
/* la liste du maquettiste se remplit ligne à ligne */
.releve tbody tr { transition: opacity 350ms var(--ease), transform 350ms var(--ease); }
.anime .releve:not(.vue) tbody tr { opacity: 0; transform: translateY(6px); }
.releve.vue tbody tr:nth-child(2) { transition-delay: 150ms; } .releve.vue tbody tr:nth-child(3) { transition-delay: 300ms; }
.releve.vue tbody tr:nth-child(4) { transition-delay: 450ms; } .releve.vue tbody tr:nth-child(5) { transition-delay: 600ms; }
.bulle { position: absolute; left: 12%; bottom: var(--e-4); width: min(340px, 70%); overflow: hidden; border-radius: var(--r-1);
  background: var(--blanc); box-shadow: var(--elev-2); }
.bulle p { margin: 0; }
.bulle-tete { display: flex; justify-content: space-between; gap: var(--e-3); padding: 6px 12px; background: var(--corail); color: var(--texte);
  font: 600 13px var(--texte-police); }
.bulle-tete span + span { font-weight: 400; }
.bulle-texte { padding: 10px 12px 12px; font-size: 15px; color: var(--texte); }
.releve { width: 100%; border-collapse: collapse; background: #fff; font-size: 15px; }
.releve th { height: 44px; padding: 0 var(--e-4); background: var(--bleu); color: #fff; text-align: left; font: 500 12.5px var(--mono); }
.releve td { height: 44px; padding: 0 var(--e-4); border-bottom: 1px solid #eceff8; }
.releve tr:last-child td { border-bottom: 0; }
.releve td:nth-child(-n+2) { color: var(--texte-2); font: 400 14px var(--mono); }
.releve td:nth-child(n+3) { font: 400 16px var(--livre); }
.releve s { color: var(--texte-2); text-decoration: line-through 2px var(--corail); }

/* confidentialité : l'aplat bleu revient */
.bloc-encre { background: var(--bleu); color: var(--blanc); }
.bloc-encre h2 { color: var(--blanc); }
.bloc-encre .bloc-tete p { color: var(--sur-bleu); }
.quatre { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; }
.quatre > div { padding: var(--e-6) var(--e-8) var(--e-2) 0; border-top: 1px dashed rgb(255 255 255 / .3); }
.quatre > div + div { padding-left: var(--e-8); border-left: 1px dashed rgb(255 255 255 / .18); }
.quatre dt { font: 600 24px/1.15 var(--titre); color: var(--blanc); }
.quatre dd { margin: var(--e-2) 0 0; font-size: 17px; line-height: 1.5; color: var(--sur-bleu); }
.lien-politique { margin: var(--e-10) 0 0; }
body.encre .bloc-encre a { display: inline-flex; align-items: center; min-height: 44px; color: var(--blanc); }
body.encre .bloc-encre a:hover { color: #ffd2c6; }
body.encre .bloc-encre .a-completer { color: var(--texte); }

/* offres : la maison sur l'aplat bleu, l'auteur sur une carte blanche ; arrondis des vitrines */
.offres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-8); align-items: stretch; }
.offre { display: flex; flex-direction: column; padding: var(--e-10); border-radius: var(--r-4); background: var(--blanc);
  box-shadow: var(--elev-1); border: 1px solid var(--bleu-trait); }
.offre-maison { background: var(--bleu); color: var(--blanc); border-color: var(--bleu); box-shadow: var(--elev-2); }
.offre-pour { margin: 0; font: 500 13px var(--mono); color: var(--texte-2); }
.offre-maison .offre-pour { color: var(--sur-bleu); }
.offre h3 { margin: var(--e-3) 0 0; font: 800 44px/1.05 var(--titre); letter-spacing: -.02em; color: var(--bleu); }
.offre-maison h3 { color: var(--blanc); }
.offre-unite { font: 600 22px var(--titre); letter-spacing: -.01em; }
.offre-detail { margin: var(--e-2) 0 0; font-size: 15px; color: var(--texte-2); }
.offre-texte { margin: var(--e-5) 0 0; font-size: 17px; color: var(--texte-2); }
.offre-maison .offre-texte { color: var(--sur-bleu); }
.offre ul { display: grid; gap: var(--e-3); margin: var(--e-6) 0 0; padding: 0; list-style: none; }
.offre li { position: relative; padding-left: var(--e-6); font-size: 16px; line-height: 1.45; }
.offre li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 1px; background: var(--corail); }
.offre-action { margin: 0; padding-top: var(--e-8); margin-top: auto; }
.offre-note { margin: var(--e-4) 0 0; font-size: 13px; color: var(--texte-2); }
.une-auteur { margin: var(--e-5) 0 0; font-size: 16px; color: var(--sur-bleu); }
body.encre .une-auteur a { color: var(--blanc); font-weight: 500; text-decoration-color: var(--corail); }
body.encre .une-auteur a:hover { color: var(--blanc); }

/* vos questions : volets dépliables */
.questions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--e-12); align-items: start; }
.questions .bloc-tete { margin: 0; }
.faq { border-top: 1px dashed var(--bleu-trait); }
.faq details { border-bottom: 1px dashed var(--bleu-trait); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); min-height: 44px; padding: var(--e-5) 0;
  font: 600 22px/1.25 var(--titre); color: var(--texte); cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 14px; height: 14px; margin-right: var(--e-1);
  background: linear-gradient(var(--bleu), var(--bleu)) center / 14px 2px no-repeat, linear-gradient(var(--bleu), var(--bleu)) center / 2px 14px no-repeat;
  transition: transform var(--t-normal) var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--bleu); }
.faq details p { margin: 0; padding: 0 var(--e-10) var(--e-6) 0; font-size: 17px; color: var(--texte-2); }

/* l'appel final : 32 = 0 + 32, la pilule y est posée au centre */
.appel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--e-12); align-items: start;
  padding: var(--e-16) var(--e-12); border-radius: var(--r-5); background: var(--bleu-teinte); }
.appel h2 { max-width: 14ch; margin: 0; }
.appel-texte > p { margin: var(--e-5) 0 0; font-size: 18px; color: var(--texte-2); }
.appel .appel-compte, .appel .appel-direct { font-size: 15px; }
.appel-liste { display: grid; gap: var(--e-3); margin: var(--e-6) 0 0; padding: 0; list-style: none; }
.appel-liste li { position: relative; padding-left: var(--e-6); font-size: 17px; line-height: 1.45; color: var(--texte); }
.appel-liste li::before { content: ""; position: absolute; left: 0; top: .6em; width: 8px; height: 8px; border-radius: 1px; background: var(--corail); }
body.encre .appel-direct a, body.encre .appel-compte a { display: inline-block; padding: 12px 0; }

/* le formulaire de demande d'essai */
.formulaire { padding: var(--e-8); border-radius: 2px; background: var(--blanc); box-shadow: var(--elev-1); }
.zone { margin-bottom: var(--e-5); }
.zone label { display: block; margin-bottom: var(--e-2); font: 500 15px var(--texte-police); color: var(--texte); }
.facultatif { margin-left: var(--e-1); font-weight: 400; color: var(--texte-2); }
.zone input, .zone textarea { box-sizing: border-box; width: 100%; min-height: 48px; padding: var(--e-3) var(--e-4); border: 1px solid #c9cfe6;
  border-radius: var(--r-2); background: var(--blanc); color: var(--texte); font: 400 17px/1.4 var(--texte-police); caret-color: var(--corail);
  transition: border-color var(--t-rapide) var(--ease), box-shadow var(--t-rapide) var(--ease); }
.zone textarea { resize: vertical; }
body.encre .zone input:focus-visible, body.encre .zone textarea:focus-visible { border-color: var(--bleu); box-shadow: 0 0 0 4px rgb(29 43 107 / .18); }
.en-erreur input, .en-erreur textarea { border-color: var(--corail-texte); }
.aide-erreur { margin: var(--e-2) 0 0; font-size: 14px; color: var(--corail-texte); }
.erreur-formulaire { margin: 0 0 var(--e-5); padding: var(--e-3) var(--e-4); border-radius: var(--r-2); background: var(--corail-pale); color: var(--corail-texte); font-size: 15px; }
.piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.formulaire .pilule { width: 100%; margin-top: var(--e-2); border: 0; cursor: pointer; }
.mention { margin: var(--e-4) 0 0; font-size: 13px; color: var(--texte-2); }
.merci h3 { margin: 0; font-size: 28px; line-height: 1.15; color: var(--bleu); }
.merci p { margin: var(--e-3) 0 0; color: var(--texte-2); }


/* pied */
.bas { padding: var(--e-8) 0 var(--e-12); border-top: 1px dashed var(--bleu-trait); }
.bas-rang { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-6); font-size: 15px; color: var(--texte-2); }
body.encre .bas .sigle { color: var(--bleu); font-size: 24px; }
.bas nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: 0 var(--e-6); }
body.encre .bas nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--texte-2); text-decoration: none; }
body.encre .bas nav a:hover { color: var(--bleu); }

/* tablette */
@media (max-width: 1080px) {
  .une-grille { grid-template-columns: 1fr; gap: var(--e-16); }
  .une-lecteur { max-width: 640px; }
  .quatre { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--e-8); }
  .quatre > div:nth-child(3) { padding-left: 0; border-left: 0; }
}
@media (max-width: 900px) {
  .chrono { grid-template-columns: 1fr; padding-top: 0; }
  .chrono::before, .chrono::after { left: 10px; top: 0; width: 2px; height: auto; }
  .chrono::before { bottom: 0; }
  .chrono::after { height: 80%; transform-origin: top; }
  .anime .chrono:not(.vue)::after { transform: scaleY(0); }
  .chrono li { padding: 0 0 var(--e-8) var(--e-12); }
  .jalon { position: absolute; left: 0; top: 2px; }
  .chrono-marge .jalon { left: -2px; top: 0; margin: 0; }
  .chrono b { margin-top: 0; }
  .etiquette-marge { position: static; display: block; margin-bottom: var(--e-2); }
  .raisons, .etapes, .livrable, .questions, .appel, .offres { grid-template-columns: 1fr; gap: var(--e-10); }
  .raisons-titre { margin-bottom: 0; }
  .raisons article, .raisons article + article { padding: 0; border-left: 0; }
  .preuve-chiffre { font-size: 88px; }
  .preuve-texte { font-size: 20px; }
  .livrable-inverse .vitrine { order: 0; }
}
/* téléphone */
@media (max-width: 680px) {
  .cadre { padding: 0 var(--e-5); }
  .coupe { --hors: 14px; --trait: 8px; }  /* les traits restent dans la gouttière de 20 px */
  .une .lecteur::before { top: -18px; width: 12px; height: 12px; margin-left: -6px; }
  body.encre .tete nav a:not([href="/connexion"]) { display: none; }
  .tete .pilule-petite { display: none; }
  .une { padding: var(--e-12) 0 var(--e-20); }
  .bloc { padding: var(--e-20) 0; }
  .bloc-tete { margin-bottom: var(--e-10); }
  .lecteur-page { padding: var(--e-4) var(--e-4) var(--e-6); font-size: 15px; }
  .trouvailles .mots { font-size: 16px; }
  /* le relevé tient dans 350 px : sinon « salle et manger » poussait la page de 10 px */
  .releve th, .releve td { padding: 0 var(--e-2); }
  .releve td:nth-child(n+3) { font-size: 15px; }
  .quatre { grid-template-columns: 1fr; }
  .quatre > div, .quatre > div + div { padding-left: 0; border-left: 0; }
  .appel { padding: var(--e-10) var(--e-4); border-radius: var(--r-4); }
  .preuve-rang { grid-template-columns: 1fr; row-gap: var(--e-2); padding-top: var(--e-10); padding-bottom: var(--e-10); }
  .preuve-chiffre { grid-row: auto; font-size: 72px; }
  .preuve-texte { font-size: 19px; }
  .bulle { left: var(--e-2); width: auto; right: var(--e-2); }
  .offre { padding: var(--e-8) var(--e-5); }
  .offre h3 { font-size: 38px; }
  .formulaire { padding: var(--e-5); }
  .faq summary { font-size: 22px; }
  .faq details p { padding-right: 0; }
  .pilule { width: 100%; }
  .une-actions .lien-clair { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  body.encre *, body.encre *::before, body.encre *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}