/* Moi Président : le site, troisième version (27/10). Le registre de l'icône et du logo : le bleu de l'image clé,
   l'or des lettres du logo pour l'action, le rouge du téléphone pour la sortie ; les écrans du jeu en aplat ; le papier
   crème pour ce qu'on lit et ce qu'on signe.
   Aucune police chargée d'un tiers : les titres prennent la police du système en chasse comprimée (la SF Compressed de
   l'app sur iPhone et Mac, Bahnschrift sous Windows, Roboto Condensed sous Android). Aucun script ni style en ligne : la
   politique de sécurité du site les refuse. La note à signer de l'accueil marche avec des cases à cocher et :has() ;
   sans :has(), elle montre toutes les réponses d'un coup. */
:root {
  --bleu: #051144; /* la couleur mesurée sur l'aplat de l'image d'ouverture (ouverture-bureau.webp) : une seule nuance de bleu */
  --bleu-2: #0F1D5E;
  --nuit: #0A0E1F;
  --surface: #141B44;
  --creme: #F2E9D8;
  --papier: #FBF7EF;
  --encre: #17161B;
  --encre-2: #4C4740;
  --texte-2: #C3BFD3;
  --or: #FDC92F;
  --or-vif: #FFDB5C;
  --or-app: #D2AE5C;
  --or-encre: #7A5A10;
  --rouge: #BF1520;
  --rouge-sombre: #9E0F18;
  --baisse: #B3261E;
  --titre: -apple-system, BlinkMacSystemFont, "Bahnschrift", "sans-serif-condensed", "Roboto Condensed", "Arial Narrow", system-ui, sans-serif;
  --texte: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  --marge: clamp(20px, 4vw, 40px);
  --espace: clamp(88px, 11vw, 168px);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--nuit); color: var(--creme); font-family: var(--texte); font-size: 19px; line-height: 1.55; }
@media (min-width: 960px) { body { font-size: 20px; } }
img, svg { max-width: 100%; display: block; }
img { height: auto; }
a { color: var(--or); text-underline-offset: 4px; text-decoration-thickness: 2px; }
a:hover { color: var(--or-vif); }
:focus-visible { outline: 3px solid var(--or); outline-offset: 4px; border-radius: 8px; }
p { text-wrap: pretty; margin: 0; }
p + p { margin-top: 0.9em; }
strong { font-weight: 700; }
.cadre { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 var(--marge); }
[id] { scroll-margin-top: 16px; }

/* Les titres : la chasse comprimée de l'app, en noir */
h1, h2, h3 { font-family: var(--titre); font-weight: 900; font-stretch: 50%; line-height: 0.94; letter-spacing: 0; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(60px, 7.4vw, 108px); }
h2 { font-size: clamp(48px, 5.8vw, 86px); }
h3 { font-size: clamp(30px, 2.6vw, 36px); line-height: 1; }
.chapeau { font-size: clamp(20px, 1.7vw, 23px); line-height: 1.5; margin-top: 24px; max-width: 32em; }

/* Le lien d'évitement, visible au clavier seulement */
.evitement { position: absolute; left: 16px; top: -80px; z-index: 10; background: var(--or); color: var(--bleu); padding: 12px 18px; border-radius: 12px; font-weight: 800; text-decoration: none; }
.evitement:focus { top: 12px; }

/* Les boutons : la pilule or pour l'action, l'encre sur le papier */
.bouton { display: inline-flex; align-items: center; justify-content: center; min-height: 58px; padding: 0 30px; border-radius: 999px; border: 0; background: var(--or); color: var(--bleu); font: 800 19px/1.15 var(--texte); text-decoration: none; text-align: center; cursor: pointer; transition: transform 0.12s ease-out, background-color 0.12s ease-out; }
.bouton:hover { background: var(--or-vif); color: var(--bleu); }
.bouton:active { transform: scale(0.97); }
.bouton-encre, .aplat-creme .bouton-encre, .lecture .bouton-encre { background: var(--encre); color: var(--papier); font-weight: 800; }
.bouton-encre:hover, .aplat-creme .bouton-encre:hover, .lecture .bouton-encre:hover { background: #2E2C33; color: var(--papier); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 32px; }
.lien-fort { font-weight: 700; }

/* La barre du haut : l'icône, le nom, quatre liens */
.barre { background: var(--bleu); }
.barre .cadre { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 84px; }
.marque { display: flex; align-items: center; gap: 12px; flex-shrink: 0; border-radius: 12px; }
.marque-icone { width: 46px; height: 46px; border-radius: 11px; }
.marque-logo { width: auto; height: 50px; }
.liens { display: flex; align-items: center; gap: 4px 26px; }
.liens a { display: inline-flex; align-items: center; min-height: 48px; color: var(--creme); font-weight: 600; font-size: 18px; text-decoration: none; }
.liens a:hover { color: var(--or); }
.liens a[aria-current="page"] { color: var(--or); }
@media (max-width: 760px) {
  .liens .large { display: none; }
  .liens { gap: 18px; }
  .marque-logo { height: 44px; }
  .marque-icone { width: 40px; height: 40px; border-radius: 9px; }
}
@media (max-width: 370px) { .marque-icone { display: none; } }

/* La fiche de l'app : ce qu'un habitué de l'App Store cherche d'abord */
.fiche-app { display: flex; align-items: center; gap: 18px; }
.fiche-app img { width: 76px; height: 76px; border-radius: 17px; flex-shrink: 0; box-shadow: 0 0 0 2px #24317A; }
.fiche-app p { margin: 0; line-height: 1.35; }
.fiche-nom { font-weight: 800; font-size: 21px; }
.fiche-detail { color: var(--texte-2); font-size: 18px; }

/* L'ouverture : le bureau la nuit, le téléphone qui sonne, la question */
.ouverture { background: var(--bleu); overflow: hidden; }
.ouverture-image { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.ouverture-texte { padding: 36px 0 var(--espace); }
.ouverture-logo { display: none; }
.ouverture .chapeau { color: #ECE4D4; }
.ouverture-rangee { display: flex; flex-wrap: wrap; align-items: center; gap: 28px 36px; margin-top: 36px; }
@media (min-width: 600px) and (max-width: 1279px) {
  .ouverture-image { aspect-ratio: 16 / 10; object-position: 50% 45%; }
}
/* Sur grand écran, l'image clé passe derrière le texte. Son tiers gauche est un aplat du même bleu ; elle fait 1,556 fois
   sa hauteur et le téléphone occupe ses 65 à 86 %. On la place pour que le texte reste sur l'aplat, que le téléphone reste
   entier et que l'image couvre le bord droit. */
@media (min-width: 1280px) {
  .ouverture {
    --large: clamp(440px, 34vw, 520px);
    --fin: calc(max((100vw - 1240px) / 2, 0px) + var(--marge) + var(--large) + 36px);
    --h: max(760px, calc((100vw - var(--fin)) / 1.04));
    --gauche: calc(var(--fin) - 0.33 * 1.556 * var(--h));
    position: relative;
    background: var(--bleu);
  }
  /* l'image est posée sur un calque dont le bord gauche se fond dans le bleu de la page : plus de rectangle visible */
  .ouverture::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("/img/ouverture-bureau.webp") no-repeat;
    background-size: auto 100%;
    background-position: var(--gauche) bottom;
    -webkit-mask-image: linear-gradient(to right, transparent var(--gauche), #000 calc(var(--gauche) + 160px));
    mask-image: linear-gradient(to right, transparent var(--gauche), #000 calc(var(--gauche) + 160px));
    pointer-events: none;
  }
  .ouverture-image { display: none; }
  .ouverture .cadre { position: relative; z-index: 1; min-height: var(--h); display: flex; align-items: center; }
  /* le grand logo de l'ouverture est visible : le petit de la barre ferait doublon */
  .accueil .barre .marque { display: none; }
  .accueil .barre .cadre { justify-content: flex-end; }
  .ouverture-texte { width: var(--large); padding: 48px 0 64px; }
  .ouverture-logo { display: block; width: clamp(320px, 26vw, 420px); margin: 0 0 4px -16px; }
  .ouverture h1 { font-size: clamp(64px, 6vw, 96px); }
}

/* Les grands blocs de l'accueil, chacun sur son aplat */
.bloc { padding: var(--espace) 0; }
.aplat-nuit { background: var(--nuit); }
.aplat-bleu { background: var(--bleu); }
.aplat-creme { background: var(--creme); color: var(--encre); }
.aplat-creme a { color: var(--or-encre); }
.aplat-creme a:hover { color: #4F3A08; }
.aplat-rouge { background: var(--rouge); }

/* L'écran du jeu : la capture dans un bord noir, sans reflet ni bouton */
.ecran { width: min(100%, 380px); margin: 0 auto; padding: 11px; background: #000; border-radius: 56px; box-shadow: 0 0 0 3px #2C3252; }
@media (max-width: 599px) { .ecran { width: min(100%, 330px); padding: 9px; border-radius: 48px; } .ecran img { border-radius: 39px; } }
.ecran img { width: 100%; border-radius: 45px; }

/* La note du cabinet, à lire, trancher et signer sur la page */
.essai { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; align-items: start; }
.essai-texte { max-width: 520px; }
@media (min-width: 960px) {
  .essai { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 80px; }
  .essai-texte { position: sticky; top: 48px; }
}
.note { background: var(--creme); color: var(--encre); border-radius: 30px; padding: clamp(22px, 4vw, 48px); }
@media (max-width: 599px) { .note { margin: 0 calc(-1 * var(--marge) + 8px); border-radius: 26px; } .avis li, .reponse label { padding-left: 16px; padding-right: 16px; } }
.note-entete { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; color: var(--or-encre); font-weight: 700; font-size: 18px; }
.note h3 { font-size: clamp(36px, 3.6vw, 52px); margin-top: 14px; }
.note-contexte { margin-top: 16px; font-size: 19px; }
.note-source { color: var(--encre-2); font-size: 18px; margin-top: 10px; }
.note h4 { font: 900 28px/1 var(--titre); font-stretch: 50%; margin: 36px 0 14px; }
.avis { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.avis li { background: var(--papier); border-radius: 18px; padding: 16px 20px; }
.avis blockquote { margin: 0; }
.avis p { font-size: 19px; }
.avis .qui { color: var(--encre-2); font-size: 18px; margin-top: 6px; }

.reponses { border: 0; margin: 36px 0 0; padding: 0; min-width: 0; }
.reponses legend { font: 900 28px/1 var(--titre); font-stretch: 50%; padding: 0; margin: 0 0 14px; }
.reponse { position: relative; }
.reponse + .reponse { margin-top: 10px; }
.case { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.reponse label { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 4px 14px; align-items: start; min-height: 64px; padding: 18px 20px; background: var(--papier); border-radius: 18px; cursor: pointer; transition: background-color 0.12s ease-out; }
.reponse label::before { content: ""; grid-row: 1 / span 3; width: 28px; height: 28px; margin-top: 1px; border-radius: 50%; background: var(--papier); box-shadow: inset 0 0 0 2.5px var(--encre-2); }
.reponse label:hover { background: #FFFFFF; }
.reponse-titre { font-weight: 800; font-size: 20px; line-height: 1.3; }
.reponse-effet { font-size: 18px; line-height: 1.45; color: var(--encre-2); }
.reponse-effet strong { color: var(--encre); }
.case:checked + label { background: #FFFFFF; box-shadow: inset 0 0 0 3px var(--encre); }
.case:checked + label::before { box-shadow: inset 0 0 0 9px var(--encre); }
.case:focus-visible + label { outline: 3px solid var(--or-encre); outline-offset: 3px; }

.signer { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.signer label { cursor: pointer; user-select: none; -webkit-user-select: none; }
.signer .case:checked + label { background: var(--encre); color: var(--papier); box-shadow: none; }
.signer .case:focus-visible + label { outline: 3px solid var(--or-encre); outline-offset: 4px; }
.signer-aide { color: var(--encre-2); font-size: 18px; }
.libelle-signe { display: none; }
.rappel { display: none; margin-top: 18px; font-weight: 700; color: var(--baisse); }

/* Le décret signé : sans :has(), toutes les suites restent lisibles l'une sous l'autre */
.decret { margin-top: 32px; background: var(--papier); border-radius: 22px; padding: clamp(22px, 3.4vw, 36px); position: relative; }
.decret-entete { display: flex; justify-content: space-between; gap: 12px; font-weight: 800; font-size: 18px; padding-bottom: 12px; border-bottom: 3px solid var(--encre); }
.decret h4 { margin: 20px 0 0; font-size: clamp(30px, 3vw, 40px); }
.suite + .suite { margin-top: 28px; }
.suite-article { margin-top: 12px; font-size: 20px; }
.suite-prevision { margin-top: 18px; }
.prevision { margin: 10px 0 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 18px; font-size: 19px; }
.prevision dt { font-weight: 700; }
.prevision dd { margin: 0; font-variant-numeric: tabular-nums; }
.decret-fin { margin-top: 26px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.decret-lieu { color: var(--encre-2); font-size: 18px; }
.paraphe { width: 170px; height: 64px; margin-top: 4px; }
.paraphe path { fill: none; stroke: var(--bleu); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 420; }
.sceau { width: 112px; height: 112px; flex-shrink: 0; }
.sceau-disque { fill: var(--or-app); }
.sceau-anneau { fill: none; stroke: var(--or-encre); stroke-width: 2.4; }
.sceau-arc { fill: none; }
.sceau-texte { fill: var(--encre); font: 800 9.5px var(--texte); letter-spacing: 0.5px; }
.sceau-rf { fill: var(--encre); font: italic 900 34px var(--titre); }
.decret-ensuite { margin-top: 26px; font-size: 19px; }

@supports selector(:has(*)) {
  .decret, .suite, .decret-ensuite { display: none; }
  .note:has(#signer:checked):has(.reponses .case:checked) :is(.decret, .decret-ensuite) { display: block; }
  .note:has(#reponse-1:checked) .suite-1,
  .note:has(#reponse-2:checked) .suite-2,
  .note:has(#reponse-3:checked) .suite-3 { display: block; }
  .note:has(#signer:checked):not(:has(.reponses .case:checked)) .rappel { display: block; }
  .note:has(#signer:checked):has(.reponses .case:checked) .libelle-signer { display: none; }
  .note:has(#signer:checked):has(.reponses .case:checked) .libelle-signe { display: inline; }
  .note:has(#signer:checked):has(.reponses .case:checked) .signer-aide { display: none; }
  .suite-tout { display: none; }
}

/* La signature et le sceau : le geste du jeu, une seule fois, quand le décret apparaît */
@media (prefers-reduced-motion: no-preference) {
  .note:has(#signer:checked) .paraphe path { animation: tracer 0.9s ease-out 0.15s backwards; }
  .note:has(#signer:checked) .sceau { animation: sceller 0.38s cubic-bezier(0.2, 0.9, 0.3, 1.2) 0.95s backwards; }
  .note:has(#signer:checked) .decret { animation: poser 0.32s ease-out backwards; }
}
@keyframes tracer { from { stroke-dashoffset: 420; } to { stroke-dashoffset: 0; } }
@keyframes sceller { from { opacity: 0; transform: scale(1.7) rotate(-14deg); } to { opacity: 1; transform: scale(1) rotate(-6deg); } }
@keyframes poser { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.sceau { transform: rotate(-6deg); }

/* La journée : les quatre calculs à leur heure, sur une ligne */
.journee { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 24px; }
.journee li { display: grid; gap: 6px; align-content: start; }
.heure { font: 900 clamp(48px, 5vw, 72px)/0.9 var(--titre); font-stretch: 50%; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rendez-vous { font-weight: 800; font-size: 21px; color: #E4DCCC; }
@media (min-width: 760px) { .journee { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; } }

/* Le vrai pouvoir : deux écrans côte à côte, un titre et une phrase sous chacun */
.ecrans { display: grid; grid-template-columns: minmax(0, 1fr); gap: 72px; margin-top: 56px; }
.ecran-bloc h3 { margin-top: 32px; }
.ecran-bloc p { margin-top: 14px; color: #E4DCCC; max-width: 30em; }
@media (min-width: 760px) {
  .ecrans { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; align-items: start; }
  .ecran-bloc .ecran { margin: 0; }
}

/* Les questions en clair : la question en titre, la réponse dessous, deux colonnes sur grand écran */
.questions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px 64px; margin-top: 56px; }
.question-bloc h3 { font-size: clamp(28px, 2.4vw, 34px); }
.question-bloc p { margin-top: 12px; color: #E4DCCC; max-width: 30em; }
@media (min-width: 960px) { .questions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 72px; } }

/* Le moteur : trois faits, sur le papier */
.faits { list-style: none; margin: 64px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.faits h3 { margin-bottom: 14px; }
.faits p { color: var(--encre); }
@media (min-width: 960px) { .faits { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px; } }
.aplat-creme .note-bas { margin-top: 56px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.mention { color: var(--encre-2); font-size: 18px; }

/* Le prix : ce qui est gratuit, ce qui est payant */
.prix { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; }
@media (min-width: 960px) { .prix { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 80px; align-items: start; } }
.offres { margin: 0; display: grid; gap: 40px; }
.offre dt { font: 900 clamp(32px, 2.8vw, 40px)/1 var(--titre); font-stretch: 50%; }
.offre dd { margin: 10px 0 0; color: #E4DCCC; max-width: 34em; }
.offre .tarif { display: block; color: var(--creme); font-weight: 800; font-size: 21px; font-variant-numeric: tabular-nums; margin-bottom: 4px; }
@media (min-width: 960px) { .offres { padding-top: 12px; } }

/* La sortie : le rouge du téléphone, la question une dernière fois */
.sortie { text-align: center; }
.sortie-icone { width: 168px; height: 168px; border-radius: 38px; margin: 0 auto 36px; }
.sortie h2 { font-size: clamp(56px, 7vw, 104px); }
.sortie .chapeau { margin: 22px auto 0; color: #FFF3E6; }
.sortie .actions { justify-content: center; }
.sortie a:not(.bouton) { color: #FFFFFF; }
@media (prefers-reduced-motion: no-preference) {
  .sortie-icone { animation: sonner 1.1s ease-in-out 0.6s 3; transform-origin: 50% 60%; }
}
@keyframes sonner {
  0%, 46%, 100% { transform: rotate(0); }
  6%, 18%, 30% { transform: rotate(-7deg); }
  12%, 24%, 36% { transform: rotate(7deg); }
}

/* Le pied de page : le nom revient, les liens, l'éditeur */
.pied { background: var(--nuit); padding: 72px 0 64px; color: var(--texte-2); font-size: 18px; }
.pied-haut { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; }
.pied-marque { display: flex; align-items: center; gap: 16px; }
.pied-marque img:first-child { width: 64px; height: 64px; border-radius: 14px; }
.pied-marque img:last-child { width: auto; height: 64px; }
.pied nav { display: flex; flex-wrap: wrap; gap: 0 28px; margin-top: 40px; }
.pied nav a { display: inline-flex; align-items: center; min-height: 48px; color: var(--creme); text-decoration: none; font-weight: 600; }
.pied nav a:hover { color: var(--or); }
.pied p { margin-top: 18px; max-width: 46em; }

/* Les pages à lire : le titre sur le bleu, le texte sur le papier, dans une colonne au centre */
.tete-page .cadre, .lecture .cadre { max-width: calc(800px + 2 * var(--marge)); }
.tete-page { background: var(--bleu); padding: clamp(48px, 7vw, 96px) 0 clamp(52px, 7vw, 96px); }
.tete-page h1 { font-size: clamp(54px, 7vw, 100px); max-width: 15ch; }
.tete-page .chapeau { color: #ECE4D4; }
.tete-page .chapeau a { color: var(--or); }
.lecture { background: var(--creme); color: var(--encre); padding: clamp(48px, 7vw, 96px) 0 clamp(72px, 9vw, 128px); }
.texte { max-width: 800px; }
.lecture h2 { font-size: clamp(38px, 4vw, 52px); margin: 64px 0 18px; }
.lecture h2:first-child { margin-top: 0; }
.lecture h3 { font-size: clamp(28px, 2.6vw, 34px); margin: 36px 0 10px; }
.lecture p, .lecture li, .lecture dd { color: #26242A; }
.lecture ul, .lecture ol { padding-left: 1.2em; margin: 14px 0; }
.lecture li { margin: 8px 0; }
.lecture ul + p, .lecture dl + p, .lecture .tableau + p { margin-top: 0.9em; }
.lecture a { color: var(--or-encre); font-weight: 600; }
.lecture a:hover { color: #4F3A08; }
.maj { color: var(--encre-2); font-size: 18px; }
.encadre { background: var(--papier); border-radius: 22px; padding: 22px 26px; margin: 24px 0; }
.lecture dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 22px; margin: 16px 0; }
.lecture dt { font-weight: 700; }
.lecture dd { margin: 0; }
@media (max-width: 600px) { .lecture dl { grid-template-columns: minmax(0, 1fr); gap: 2px; } .lecture dd { margin-bottom: 12px; } }
.lecture pre { background: var(--papier); border-radius: 16px; padding: 16px 18px; overflow-x: auto; font: 16px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--encre); }
.tableau { overflow-x: auto; margin: 18px 0; }
.lecture table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 18px; font-variant-numeric: tabular-nums; background: var(--papier); border-radius: 16px; overflow: hidden; }
.lecture th, .lecture td { text-align: left; padding: 12px 14px; border-bottom: 1px solid #E6DCC8; vertical-align: top; }
.lecture thead th { font-weight: 700; color: var(--encre); }
.lecture tbody tr:last-child td { border-bottom: 0; }
.lecture .actions { margin-top: 18px; }
.adresse { font-weight: 700; color: var(--encre); user-select: all; -webkit-user-select: all; }
.tete-seule { min-height: min(62svh, 640px); display: flex; align-items: center; }
.question { margin-top: 30px; }
.question h3 { margin-top: 0; }
.question p { margin-top: 8px; }

/* La presse : les visuels à télécharger */
.visuels { list-style: none; margin: 18px 0 0; padding: 0 !important; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px; }
.visuels li { margin: 0 !important; }
.visuels a { display: block; text-decoration: none; font-weight: 600; font-size: 18px; line-height: 1.35; }
.visuels img { width: 100%; border-radius: 14px; margin-bottom: 10px; background: var(--nuit); }
.lecture h3.sous-visuels { margin-top: 40px; }

/* L'entrée des blocs : le titre, puis le texte, puis l'écran, quand ils arrivent à l'écran (navigateurs récents) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .entree > * { animation: monter linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
    .entree > :nth-child(2) { animation-range: entry 8% entry 78%; }
    .entree > :nth-child(3) { animation-range: entry 16% entry 86%; }
  }
}
@keyframes monter { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }

/* L'impression et les PDF : le papier blanc, sans la nuit ni la navigation */
@media print {
  body { background: #FFFFFF; color: #17161B; font-size: 12pt; }
  .barre, .pied, .actions, .evitement { display: none; }
  .tete-page, .lecture { background: #FFFFFF; color: #17161B; padding: 0; }
  .tete-page h1 { font-size: 30pt; color: #17161B; }
  .tete-page .chapeau { color: #17161B; }
  .encadre, .lecture pre, .lecture table { background: #F6F1E6; }
  .lecture h2 { break-after: avoid; }
  .question, .lecture table { break-inside: avoid; }
  a { color: #17161B; }
}