/* Les pages de texte du site : la même table de nuit que l'accueil, et le contenu écrit sur une feuille de classeur posée dessus
   (trous à gauche, marge rouge, coches au stylo bleu). Aucune animation, aucun script : ces pages doivent s'ouvrir tout de suite. */
@font-face { font-family: "Poppins"; font-weight: 300; font-display: swap; src: url("/fonts/poppins-300.woff") format("woff"); }
@font-face { font-family: "Poppins"; font-weight: 400; font-display: swap; src: url("/fonts/poppins-400.woff") format("woff"); }
@font-face { font-family: "Poppins"; font-weight: 500; font-display: swap; src: url("/fonts/poppins-500.woff") format("woff"); }
@font-face { font-family: "Poppins"; font-weight: 700; font-display: swap; src: url("/fonts/poppins-700.woff") format("woff"); }

:root {
  color-scheme: dark;
  --nuit: #081320; --abysse: #040a12; --encre: #0B1F33; --bleu: #2B8FD6; --ciel: #9FD3F5; --or: #FFD166;
  --papier: #F6F2EA; --stylo: #2456c4; --gris: #40566b;
  --txt: #ffffff; --txt2: rgba(226, 238, 250, .8); --txt3: rgba(210, 226, 242, .56);
  --trait: rgba(255, 255, 255, .14);
  --f: "Poppins", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --bord: max(20px, env(safe-area-inset-left, 0px));
  --bord-d: max(20px, env(safe-area-inset-right, 0px));
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--abysse); -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
body { margin: 0; background: var(--abysse); color: var(--txt); font-family: var(--f); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; border-radius: 6px; }
.saut { position: fixed; left: 12px; top: -60px; z-index: 50; background: #fff; color: var(--encre); padding: 10px 14px; border-radius: 10px; }
.saut:focus { top: 12px; }
.dans { max-width: 1180px; margin: 0 auto; padding-left: var(--bord); padding-right: var(--bord-d); }

/* ---------- la barre du haut ---------- */
.barre { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 8px 18px; flex-wrap: wrap;
  padding: calc(11px + env(safe-area-inset-top, 0px)) var(--bord-d) 11px var(--bord); background: rgba(4, 10, 18, .86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--trait); }
.marque { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; font-size: 14px; letter-spacing: .22em; color: #fff; }
.vmark { display: inline-block; width: 30px; height: 30px; flex: none; border-radius: 9px; background: linear-gradient(135deg, #2B8FD6, #0B3D66); position: relative; box-shadow: 0 6px 18px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .28); }
.vmark::before { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 84'%3E%3Cpath d='M20 24 L42 66 L64 24' fill='none' stroke='%23fff' stroke-width='9' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M34 24 L42 40 L50 24' fill='none' stroke='%239FD3F5' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='66' cy='18' r='5' fill='%23FFD166'/%3E%3C/svg%3E") center / contain no-repeat; }
.nav { display: flex; gap: 2px; margin-left: auto; }
.nav a { padding: 7px 12px; border-radius: 999px; font-size: 14.5px; text-decoration: none; color: var(--txt2); white-space: nowrap; }
.nav a:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.nav a[aria-current] { color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .34); }
.bouton { font-family: inherit; display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px; border-radius: 999px; background: var(--or); color: #1b1503; font-weight: 500; font-size: 16px; text-decoration: none; border: 0; cursor: pointer; transition: transform .18s ease, background .18s ease; }
.bouton:hover { transform: translateY(-1px); background: #ffdb85; }
.bouton.petit { min-height: 40px; padding: 0 18px; font-size: 14px; }
.bouton.contour { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5); }
.bouton.contour:hover { background: rgba(255, 255, 255, .08); }
.bouton.encre { background: var(--encre); color: #fff; }
.bouton.encre:hover { background: #12304d; }

/* ---------- le haut de page, sur la table ---------- */
.tete { background: radial-gradient(110% 150% at 82% -20%, #173653 0%, var(--nuit) 46%, var(--abysse) 100%); padding: clamp(34px, 5vw, 70px) 0 clamp(84px, 10vw, 150px); }
.tete .dans { max-width: 1260px; padding-left: max(var(--bord), clamp(70px, 9.5vw, 140px)); }
.fil { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 10px; padding: 0; margin: 0 0 clamp(18px, 2.4vw, 30px); font-size: 14px; color: var(--txt3); }
.fil li + li::before { content: "/"; margin-right: 10px; opacity: .5; }
.fil a { color: var(--txt2); text-decoration: none; }
.fil a:hover { text-decoration: underline; }
.tete h1 { margin: 0 0 22px; font-weight: 300; font-size: clamp(34px, 5.2vw, 72px); letter-spacing: -.035em; line-height: 1.03; max-width: 15em; text-wrap: balance; }
.chapo { margin: 0; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.5; color: var(--txt2); max-width: 34em; text-wrap: pretty; }
.tete .cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* ---------- la feuille ---------- */
.feuille { position: relative; max-width: 1260px; margin: calc(-1 * clamp(44px, 5vw, 76px)) auto 0; background: linear-gradient(180deg, #fbf9f4, var(--papier) 30%, #f1ece2); color: var(--encre); box-shadow: 0 30px 90px rgba(0, 0, 0, .62), 0 2px 0 rgba(255, 255, 255, .5) inset; }
.feuille::before { content: ""; position: absolute; left: clamp(14px, 2.6vw, 38px); top: 0; bottom: 0; width: 22px; background: radial-gradient(circle, #101b28 0 9.5px, rgba(16, 27, 40, .3) 10px, rgba(0, 0, 0, 0) 11px) 50% 110px / 22px 520px repeat-y; }
.feuille::after { content: ""; position: absolute; left: clamp(52px, 7vw, 104px); top: 0; bottom: 0; width: 1.5px; background: rgba(210, 96, 78, .38); }
.feuille > .dans { max-width: none; position: relative; z-index: 1; padding-left: max(var(--bord), clamp(70px, 9.5vw, 140px)); padding-right: max(var(--bord-d), clamp(20px, 4vw, 60px)); padding-block: clamp(44px, 6vw, 84px) clamp(54px, 7vw, 96px); }
.feuille h2 { margin: clamp(48px, 6vw, 80px) 0 16px; font-weight: 300; font-size: clamp(27px, 3.1vw, 42px); letter-spacing: -.03em; line-height: 1.1; max-width: 19em; text-wrap: balance; }
.feuille h2:first-child, .feuille .memo + h2 { margin-top: 0; }
.feuille h3 { margin: 30px 0 6px; font-weight: 500; font-size: 20px; letter-spacing: -.01em; line-height: 1.3; max-width: 30em; }
.feuille p, .feuille .texte li { margin: 0 0 14px; max-width: 37em; color: #22384d; text-wrap: pretty; }
.feuille .texte { padding-left: 1.1em; margin: 0 0 14px; }
.feuille .texte li { margin-bottom: 6px; }
.feuille a { color: #1c47a8; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.feuille a:hover { color: var(--encre); }
.feuille strong { font-weight: 500; color: var(--encre); }
.source { font-size: 14.5px; color: var(--gris); }
.fiches + p, .portes + p, .coches + p { margin-top: 20px; }

/* une ligne par chose installée : la case cochée au stylo pour ce qui est prêt, la case en pointillé pour ce qui reste à construire */
.fiches { list-style: none; margin: 24px 0 0; padding: 0; border-top: 1.5px solid rgba(11, 31, 51, .8); }
.fiches li { display: grid; grid-template-columns: 30px minmax(0, 14.5em) minmax(0, 1fr); gap: 4px 18px; padding: 18px 0 20px; border-bottom: 1px solid rgba(11, 31, 51, .2); }
.fiches i { position: relative; width: 26px; height: 26px; margin-top: 1px; border: 1.8px solid var(--encre); border-radius: 4px; }
.fiches i::after { content: ""; position: absolute; left: -3px; top: -13px; width: 40px; height: 38px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 38'%3E%3Cpath d='M6 20c3 3 6 7 8 12C19 20 27 10 37 3' fill='none' stroke='%232456c4' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.fiches li.et i { border-style: dashed; border-color: rgba(11, 31, 51, .6); }
.fiches li.et i::after { display: none; }
.fiches b { font-weight: 500; font-size: 18px; letter-spacing: -.01em; line-height: 1.3; }
.fiches b a { color: var(--encre); }
.fiches p { margin: 0; max-width: 34em; font-size: 16px; line-height: 1.55; }
.fiches .ex { margin-top: 6px; color: var(--stylo); font-weight: 300; font-style: italic; }
.fiches .etat { display: block; margin-top: 3px; font-size: 13.5px; font-weight: 400; color: #8a5a00; }

/* les portes vers les autres pages */
.portes { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 0 clamp(20px, 3vw, 44px); }
.portes li { border-top: 1.5px solid rgba(11, 31, 51, .8); }
.portes a { display: block; padding: 16px 0 24px; text-decoration: none; color: var(--encre); }
.portes b { display: block; font-weight: 500; font-size: 20px; letter-spacing: -.01em; line-height: 1.25; }
.portes a:hover b { text-decoration: underline; text-decoration-color: var(--stylo); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.portes span { display: block; margin-top: 5px; font-size: 15px; line-height: 1.5; color: var(--gris); }

/* les garanties, cochées */
.coches { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(20px, 3vw, 44px); }
.coches li { display: grid; grid-template-columns: 30px 1fr; gap: 0 16px; padding: 20px 0; border-top: 1.5px solid rgba(11, 31, 51, .8); }
.coches i { position: relative; width: 26px; height: 26px; margin-top: 2px; border: 1.8px solid var(--encre); border-radius: 4px; }
.coches i::after { content: ""; position: absolute; left: -3px; top: -13px; width: 40px; height: 38px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 38'%3E%3Cpath d='M6 20c3 3 6 7 8 12C19 20 27 10 37 3' fill='none' stroke='%232456c4' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.coches b { display: block; font-size: 19px; font-weight: 500; letter-spacing: -.01em; line-height: 1.25; margin-bottom: 4px; }
.coches span { display: block; font-size: 15px; line-height: 1.5; color: var(--gris); }

/* le pense-bête jaune : ce qui n'existe pas encore */
.memo { position: relative; max-width: 30em; margin: clamp(40px, 5vw, 64px) 0 clamp(40px, 5vw, 64px) clamp(0px, 3vw, 40px); padding: 38px 28px 34px; background: linear-gradient(160deg, #ffe592, var(--or) 68%, #f2bf4c); color: #2d2203; border-radius: 2px 2px 30px 2px; box-shadow: 0 22px 36px rgba(11, 31, 51, .2), 0 2px 4px rgba(11, 31, 51, .16); transform: rotate(-1.2deg); }
.memo::before { content: ""; position: absolute; left: 50%; top: -15px; width: 118px; height: 32px; margin-left: -59px; background: rgba(255, 255, 255, .7); transform: rotate(2.5deg); box-shadow: 0 1px 2px rgba(11, 31, 51, .16); }
.memo h3 { margin: 0 0 12px; font-size: 22px; font-weight: 500; letter-spacing: -.02em; line-height: 1.18; text-wrap: balance; }
.feuille .memo p { margin: 0 0 8px; font-size: 15.5px; line-height: 1.5; color: #2d2203; }
.feuille .memo a { color: #2d2203; }

/* les étapes, entourées au stylo */
.pas { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 2.6vw, 40px); counter-reset: e; }
.pas li { counter-increment: e; position: relative; padding-top: 80px; }
.pas li::before { content: counter(e); position: absolute; left: 0; top: 0; width: 60px; height: 60px; display: grid; place-items: center; font-size: 28px; font-weight: 500; color: var(--stylo); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M9 34C6 16 22 5 36 6c14 1 23 11 22 26-1 15-13 26-28 25C16 56 6 46 8 30c1-9 8-17 18-21' fill='none' stroke='%232456c4' stroke-width='2.600' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.pas b { display: block; font-size: 19px; font-weight: 500; letter-spacing: -.01em; line-height: 1.22; margin-bottom: 8px; text-wrap: balance; }
.pas span { display: block; font-size: 15px; line-height: 1.5; color: var(--gris); }

/* le talon à détacher */
.talon { position: relative; z-index: 1; border-top: 2px dashed rgba(11, 31, 51, .45); }
.talon::before { content: ""; position: absolute; left: clamp(60px, 8vw, 118px); top: -15px; width: 28px; height: 28px; background: var(--papier) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%230B1F33' stroke-width='1.600' stroke-linecap='round'%3E%3Ccircle cx='6' cy='7' r='3'/%3E%3Ccircle cx='6' cy='17' r='3'/%3E%3Cpath d='M8.500 8.800L21 17M8.500 15.200L21 7'/%3E%3C/g%3E%3C/svg%3E") center / 22px no-repeat; }
.talon .dans { max-width: none; display: flex; align-items: center; justify-content: space-between; gap: 18px 40px; flex-wrap: wrap; padding-left: max(var(--bord), clamp(70px, 9.5vw, 140px)); padding-right: max(var(--bord-d), clamp(20px, 4vw, 60px)); padding-block: clamp(28px, 4vw, 46px); }
.talon b { display: block; font-size: clamp(22px, 2.4vw, 32px); font-weight: 300; letter-spacing: -.025em; line-height: 1.1; }
.talon span { display: block; margin-top: 6px; font-size: 15.5px; color: var(--gris); }

/* ---------- le pied de page ---------- */
.pied { margin-top: clamp(50px, 7vw, 100px); background: var(--abysse); color: var(--txt3); font-size: 14px; }
.pied .dans { padding-block: 40px calc(26px + env(safe-area-inset-bottom, 0px)); }
.plan { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 28px 26px; margin: 0 0 34px; }
.plan b { display: block; margin-bottom: 8px; color: #fff; font-weight: 500; font-size: 14.5px; }
.plan a { display: block; padding: 4px 0; color: var(--txt2); text-decoration: none; }
.plan a:hover { color: #fff; text-decoration: underline; }
.bas { display: flex; flex-wrap: wrap; gap: 10px 30px; align-items: center; padding-top: 22px; border-top: 1px solid var(--trait); font-size: 13px; }
.bas .marque { margin-right: auto; }
.bas p { margin: 0; max-width: 46em; }

@media (max-width: 900px) {
  .nav { order: 3; width: calc(100% + var(--bord) + var(--bord-d)); margin: 0 calc(-1 * var(--bord-d)) 0 calc(-1 * var(--bord)); padding: 0 var(--bord); overflow-x: auto; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .barre .bouton { margin-left: auto; }
  .pas { grid-template-columns: 1fr 1fr; gap: 30px 20px; }
}
@media (max-width: 720px) {
  body { font-size: 16.5px; }
  .feuille::before, .feuille::after { display: none; }
  .feuille > .dans, .talon .dans, .tete .dans { padding-left: var(--bord); padding-right: var(--bord-d); }
  .fiches li { grid-template-columns: 30px minmax(0, 1fr); }
  .fiches li > div { grid-column: 2; }
  .coches { grid-template-columns: 1fr; }
  .talon::before { left: 24px; }
  .memo { margin-left: 0; }
}
@media (max-width: 520px) { .pas { grid-template-columns: 1fr; } .bouton.petit { padding: 0 14px; font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { .bouton { transition: none; } }
@media print { .barre, .talon, .pied, .tete .cta { display: none; } .tete { background: none; color: #000; padding: 0 0 20px; } .tete h1, .chapo, .fil, .fil a { color: #000; } .feuille { box-shadow: none; margin: 0; } }