/* wondarchive — le site plaquette. Trois tons, comme l'application : bandeau
   presque noir, panneaux un cran au-dessus, contenu sur la creme. Pas de script
   necessaire : tout se lit sans, la seule animation est en CSS. */
@font-face { font-family: 'Instrument Sans'; src: url('/static/polices/instrument-sans.woff2') format('woff2'); font-weight: 400 700; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('/static/polices/fraunces.woff2') format('woff2'); font-weight: 400 700; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('/static/polices/plex-mono.woff2') format('woff2'); font-weight: 400 600; font-display: swap; }

:root {
  --fond: #f7f6f2; --surface: #fff; --champ: #eeece6; --bord: #e1ded6; --bord-fort: #c6c1b5;
  --encre: #1b1a18; --encre-2: #4f4c45; --encre-3: #6f6a60;
  --accent: #234a72; --accent-2: #e6edf5; --ok: #266a4e; --ok-f: #e3efe8; --or: #d9a441; --alerte: #a03a28;
  --bandeau: #0f1013; --panneau: #16181c; --panneau-2: #20242b;
  --c-encre: #f1eee7; --c-encre-2: #c0bcb2; --c-encre-3: #8f939b; --c-bord: #2e323a;
  --ui: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --titre: 'Fraunces', Georgia, 'Times New Roman', serif;
  --mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
  --t-2: 11px; --t-1: 13px; --t0: 16px; --t1: 18px; --t2: 22px; --t3: 30px; --t4: 44px;
  --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px; --e7: 48px; --e8: 72px; --e9: 96px;
  --r1: 4px; --r2: 10px;
  --o1: 0 1px 2px rgba(20,18,12,.06); --o2: 0 14px 36px rgba(20,18,12,.16);
}
@media (prefers-color-scheme: dark) {
  :root {
    --fond: #15171b; --surface: #1c1f24; --champ: #242830; --bord: #2c3038; --bord-fort: #3f444e;
    --encre: #ebe8e1; --encre-2: #c0bcb2; --encre-3: #9a9da5; --accent: #7aa6d8; --accent-2: #22303f;
    --ok: #5aa583; --ok-f: #1f2f27; --alerte: #c96b52; --panneau: #0f1013; --panneau-2: #1b1f25;
    --o1: 0 1px 2px rgba(0,0,0,.4); --o2: 0 14px 36px rgba(0,0,0,.5);
  }
}
* { box-sizing: border-box; }
html { color-scheme: light dark; scroll-behavior: smooth; }
html, body { overflow-x: hidden; }
body { margin: 0; background: var(--fond); color: var(--encre); font: 400 var(--t0)/1.6 var(--ui); -webkit-font-smoothing: antialiased; }
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; }
img { max-width: 100%; height: auto; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* ================================================================= bandeau */
.barre { position: sticky; top: 0; z-index: 30; background: var(--bandeau); color: var(--c-encre); border-bottom: 1px solid #23262b; }
.barre .dedans { display: flex; align-items: center; gap: var(--e5); height: 56px; }
.marque { display: flex; align-items: center; gap: 9px; color: var(--c-encre); text-decoration: none; font: 600 var(--t1)/1 var(--titre); }
.marque img { height: 20px; width: auto; display: block; }
.nav { display: flex; gap: var(--e4); margin-left: var(--e3); }
.nav a { color: var(--c-encre-2); text-decoration: none; font-size: var(--t-1); padding: 6px 2px; border-bottom: 2px solid transparent; }
.nav a:hover, .nav a[aria-current] { color: var(--c-encre); border-bottom-color: var(--or); }
.barre .droite { margin-left: auto; display: flex; gap: var(--e2); align-items: center; }
.bouton { display: inline-block; font: 500 var(--t-1)/1 var(--ui); border: 1px solid var(--bord-fort); background: var(--surface); color: var(--encre); border-radius: var(--r1); padding: 10px 16px; text-decoration: none; cursor: pointer; white-space: nowrap; }
.bouton:hover { border-color: var(--encre-3); }
.bouton.plein { background: var(--or); border-color: var(--or); color: #221a06; }
.bouton.plein:hover { filter: brightness(1.06); }
.bouton.sombre { background: transparent; border-color: var(--c-bord); color: var(--c-encre); }
.bouton.sombre:hover { border-color: var(--c-encre-3); }
.bouton.grand { font-size: var(--t0); padding: 13px 20px; }
.menu-mobile { display: none; }

.dedans { max-width: 1120px; margin: 0 auto; padding: 0 var(--e5); }

/* ==================================================================== hero */
.hero { background: var(--panneau); color: var(--c-encre); padding: var(--e8) 0 var(--e7); }
.hero .dedans { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: var(--e6); align-items: center; }
.hero .sur { font: 500 var(--t-2)/1.4 var(--mono); color: var(--or); letter-spacing: .06em; text-transform: uppercase; margin: 0 0 var(--e3); }
.hero h1 { font: 700 clamp(32px, 4.8vw, 54px)/1.06 var(--titre); letter-spacing: -.015em; margin: 0 0 var(--e4); text-wrap: balance; }
.hero p { margin: 0 0 var(--e5); color: var(--c-encre-2); font-size: var(--t1); max-width: 74ch; }
.hero p b { color: var(--c-encre); font-weight: 600; }
.hero .actions { display: flex; gap: var(--e3); flex-wrap: wrap; align-items: center; }
.hero .actions small { color: var(--c-encre-3); font-size: var(--t-1); }
.preuves { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e4); margin-top: var(--e7); padding-top: var(--e5); border-top: 1px solid var(--c-bord); }
.preuves b { display: block; font: 600 var(--t3)/1 var(--mono); color: var(--c-encre); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.preuves b em { font-style: normal; font-size: var(--t-1); color: var(--c-encre-3); font-weight: 400; margin-left: 4px; }
.preuves span { display: block; font-size: var(--t-1); color: var(--c-encre-3); margin-top: 6px; line-height: 1.45; }

/* le fil du redressement, en CSS seul : des feuilles qui arrivent de travers */
.fil { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e3); }
.feuille { aspect-ratio: 3/4; background: var(--panneau-2); border: 1px solid var(--c-bord); border-radius: var(--r2); display: grid; place-items: center; overflow: hidden; position: relative; }
.feuille svg { width: 62%; height: auto; animation: redresser 9s cubic-bezier(.34, 1.2, .4, 1) infinite; }
.feuille:nth-child(1) svg { --de: 90deg; animation-delay: 0s; }
.feuille:nth-child(2) svg { --de: 180deg; animation-delay: 2.2s; }
.feuille:nth-child(3) svg { --de: 270deg; animation-delay: 4.4s; }
.feuille:nth-child(4) svg { --de: 90deg; animation-delay: 6.6s; }
@keyframes redresser {
  0%, 12% { transform: rotate(var(--de)); opacity: .55; }
  22%, 88% { transform: rotate(0deg); opacity: 1; }
  100% { transform: rotate(0deg); opacity: 1; }
}
.feuille .ok { position: absolute; top: 10px; right: 10px; width: 18px; height: 18px; border-radius: 99px; background: var(--ok); color: #fff; font: 700 11px/18px var(--mono); text-align: center; opacity: 0; animation: coche 9s linear infinite; }
.feuille:nth-child(1) .ok { animation-delay: 0s; } .feuille:nth-child(2) .ok { animation-delay: 2.2s; }
.feuille:nth-child(3) .ok { animation-delay: 4.4s; } .feuille:nth-child(4) .ok { animation-delay: 6.6s; }
@keyframes coche { 0%, 24% { opacity: 0; } 30%, 88% { opacity: 1; } 100% { opacity: 0; } }
.fil-legende { font-size: var(--t-1); color: var(--c-encre-3); margin: var(--e3) 0 0; }

/* =================================================================== corps */
main { padding: var(--e8) 0 var(--e9); }
main > .dedans > section { margin-bottom: var(--e8); }
h1.page-titre { font: 700 clamp(28px, 4vw, 42px)/1.1 var(--titre); letter-spacing: -.015em; margin: 0 0 var(--e3); text-wrap: balance; max-width: 36ch; }
.chapo { color: var(--encre-2); font-size: var(--t1); max-width: 94ch; margin: 0 0 var(--e6); }
.chapo b { color: var(--encre); font-weight: 600; }
h2 { font: 600 var(--t3)/1.15 var(--titre); letter-spacing: -.01em; margin: 0 0 var(--e3); text-wrap: balance; }
h3 { font: 600 var(--t1)/1.25 var(--titre); margin: 0 0 var(--e2); }
p { max-width: 94ch; }
.intro { color: var(--encre-2); max-width: 94ch; margin: 0 0 var(--e5); }
.tete-page { background: var(--panneau); color: var(--c-encre); padding: var(--e7) 0 var(--e6); }
.tete-page h1 { color: var(--c-encre); }
.tete-page .chapo { color: var(--c-encre-2); margin-bottom: 0; }
.tete-page .chapo b { color: var(--c-encre); }
.fil-ariane { font: 400 var(--t-1)/1 var(--mono); color: var(--c-encre-3); margin: 0 0 var(--e4); }
.fil-ariane a { color: var(--c-encre-2); text-decoration: none; }
.fil-ariane a:hover { color: var(--c-encre); }

.grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--e4); }
.carte { background: var(--surface); border: 1px solid var(--bord); border-radius: var(--r2); padding: var(--e5); box-shadow: var(--o1); }
.carte h3 { margin-top: 0; }
.carte p { margin: 0; font-size: var(--t-1); color: var(--encre-3); line-height: 1.6; }
.carte p + p { margin-top: var(--e2); }
.carte .num { font: 500 var(--t-2)/1 var(--mono); color: var(--or); letter-spacing: .08em; text-transform: uppercase; display: block; margin-bottom: var(--e2); }
.carte a { color: var(--accent); }
.carte.lien { text-decoration: none; color: inherit; display: block; transition: border-color .15s; }
.carte.lien:hover { border-color: var(--bord-fort); }

.etapes { counter-reset: e; display: grid; gap: var(--e3); }
.etape { background: var(--surface); border: 1px solid var(--bord); border-radius: var(--r2); padding: var(--e4) var(--e5); display: grid; grid-template-columns: auto 1fr; gap: var(--e4); align-items: start; box-shadow: var(--o1); }
.etape::before { counter-increment: e; content: counter(e); font: 700 var(--t2)/1 var(--mono); color: var(--or); }
.etape h3 { margin: 0 0 4px; }
.etape p { margin: 0; font-size: var(--t-1); color: var(--encre-2); }

table { width: 100%; border-collapse: collapse; font-size: var(--t-1); background: var(--surface); border: 1px solid var(--bord); border-radius: var(--r2); overflow: hidden; }
th { text-align: left; font: 600 var(--t-2)/1.3 var(--ui); text-transform: uppercase; letter-spacing: .06em; color: var(--encre-3); padding: 11px 12px; border-bottom: 1px solid var(--bord); background: var(--champ); vertical-align: bottom; }
td { padding: 10px 12px; border-bottom: 1px solid var(--bord); color: var(--encre-2); vertical-align: top; line-height: 1.5; }
tr:last-child td { border-bottom: 0; }
td.q { font-weight: 600; color: var(--encre); }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; }
td.n { font-family: var(--mono); color: var(--encre); }
td.oui { color: var(--ok); font-family: var(--mono); }
td.non { color: var(--bord-fort); font-family: var(--mono); }
tr.nous td { background: #fbf5e4; }
@media (prefers-color-scheme: dark) { tr.nous td { background: #332b19; } }
.cadre-table { overflow-x: auto; }
td small { display: block; color: var(--encre-3); font-size: var(--t-2); }

/* ------------------------------------------------------------------ tarifs */
.offres { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--e4); align-items: start; }
.offre { background: var(--surface); border: 1px solid var(--bord); border-radius: var(--r2); box-shadow: var(--o1); display: flex; flex-direction: column; overflow: hidden; }
.offre.phare { border-color: var(--or); box-shadow: 0 0 0 2px rgba(217,164,65,.28), var(--o2); }
.offre .haut { padding: var(--e5) var(--e5) var(--e4); border-bottom: 1px solid var(--bord); }
.offre h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; }
.etiq { font: 500 9px/1 var(--mono); background: var(--or); color: #221a06; border-radius: 99px; padding: 4px 7px; text-transform: uppercase; letter-spacing: .06em; }
.offre .pour { font-size: var(--t-1); color: var(--encre-3); margin: 0; min-height: 40px; }
.offre .prix { font: 600 var(--t4)/1 var(--mono); margin-top: var(--e3); font-variant-numeric: tabular-nums; }
.offre .prix small { font: 400 var(--t-1) var(--ui); color: var(--encre-3); margin-left: 6px; }
.offre .mois { font-size: var(--t-2); color: var(--encre-3); margin: 4px 0 0; }
.offre ul { list-style: none; margin: 0; padding: var(--e4) var(--e5); display: flex; flex-direction: column; gap: 9px; flex: 1; }
.offre li { font-size: var(--t-1); color: var(--encre-2); position: relative; padding-left: 15px; line-height: 1.5; }
.offre li::before { content: ''; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 99px; background: var(--ok); }
.offre li b { color: var(--encre); }
.offre .contre { padding: var(--e3) var(--e5); border-top: 1px solid var(--bord); display: grid; grid-template-columns: auto 1fr 1fr; gap: 6px var(--e3); font-size: var(--t-2); align-items: baseline; background: var(--champ); }
.offre .contre .titre { grid-column: 1 / -1; font: 600 9px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--encre-3); margin-bottom: 2px; }
.offre .contre .lab { color: var(--encre-3); }
.offre .contre .eux { color: var(--encre-3); font-family: var(--mono); text-align: right; text-decoration: line-through; }
.offre .contre .nous { font: 600 var(--t-1) var(--mono); color: var(--ok); text-align: right; }
.offre .pied { padding: var(--e4) var(--e5) var(--e5); display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; }
.offre .sur { font: 500 var(--t-2)/1 var(--mono); color: var(--or); letter-spacing: .1em; text-transform: uppercase; display: block; margin-bottom: var(--e2); }
.offre .prix s { font-size: var(--t2); color: var(--encre-3); margin-right: 8px; text-decoration-thickness: 2px; }
.offre .places { font: 500 var(--t-2)/1 var(--mono); color: var(--ok); }
.reassur { display: flex; gap: var(--e4); flex-wrap: wrap; font-size: var(--t-2); color: var(--encre-3); max-width: none; margin: var(--e4) 0 0; padding: var(--e3) 0; border-top: 1px solid var(--bord); border-bottom: 1px solid var(--bord); }
.reassur span::before { content: '✓ '; color: var(--ok); }
th.muet, td.muet { color: var(--encre-3); }
td.n small { display: block; font: 400 var(--t-2)/1.3 var(--ui); color: var(--encre-3); }
.promo-bloc { padding-bottom: 0 !important; }
.promo { display: flex; align-items: center; justify-content: space-between; gap: var(--e5); flex-wrap: wrap; background: var(--panneau); color: var(--c-encre); border: 1px solid var(--or); border-radius: var(--r2); padding: var(--e5) var(--e6); box-shadow: 0 0 0 2px rgba(217,164,65,.28), var(--o2); }
.promo .sur { display: block; font: 500 var(--t-2)/1 var(--mono); color: var(--or); letter-spacing: .1em; text-transform: uppercase; margin-bottom: var(--e2); }
.promo .gros { font: 600 var(--t4)/1.1 var(--titre); color: var(--c-encre); margin-bottom: 6px; }
.promo p { margin: 0; color: var(--c-encre-2); max-width: 80ch; }
.promo .agir { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; }
.promo .places { font: 500 var(--t-2)/1 var(--mono); color: var(--or); }
.rassure { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e4); }
.rassure > div { background: var(--surface); border: 1px solid var(--bord); border-radius: var(--r2); padding: var(--e4) var(--e4) var(--e4) 40px; position: relative; box-shadow: var(--o1); }
.rassure > div::before { content: '✓'; position: absolute; left: 14px; top: 14px; font: 700 var(--t1)/1 var(--mono); color: var(--ok); }
.rassure b { display: block; font: 600 var(--t0)/1.3 var(--titre); margin-bottom: 4px; }
.rassure span { font-size: var(--t-1); color: var(--encre-3); line-height: 1.5; display: block; }
.duel { display: flex; align-items: center; justify-content: space-between; gap: var(--e5); flex-wrap: wrap; margin-top: var(--e5); background: var(--panneau); color: var(--c-encre); border: 1px solid var(--c-bord); border-left: 4px solid var(--or); border-radius: var(--r2); padding: var(--e5) var(--e6); box-shadow: var(--o2); }
.duel > div { font-size: var(--t0); color: var(--c-encre-2); max-width: 76ch; flex: 1 1 380px; }
.duel b { color: var(--c-encre); }
.duel a:not(.bouton) { color: var(--c-encre); }
.tuiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e4); }
.tuile { background: var(--surface); border: 1px solid var(--bord); border-radius: var(--r2); padding: var(--e5); box-shadow: var(--o1); }
.tuile.large { grid-column: 1 / -1; background: var(--panneau); color: var(--c-encre); border-color: var(--c-bord); border-left: 4px solid var(--or); }
.tuile .num { font: 500 var(--t-2)/1 var(--mono); color: var(--or); letter-spacing: .08em; text-transform: uppercase; display: block; margin-bottom: var(--e2); }
.tuile h3 { margin: 0 0 6px; font-size: var(--t1); }
.tuile p { margin: 0; font-size: var(--t-1); color: var(--encre-2); line-height: 1.6; max-width: none; }
.tuile.large h3 { color: var(--c-encre); font-size: var(--t2); }
.tuile.large p { color: var(--c-encre-2); max-width: none; font-size: var(--t0); }
.tuile.large a { color: var(--c-encre); }
td.n b { color: var(--encre); }
.ligne-libre { display: flex; align-items: center; gap: var(--e4); flex-wrap: wrap; background: var(--surface); border: 1px dashed var(--bord-fort); border-radius: var(--r2); padding: var(--e4) var(--e5); margin-bottom: var(--e4); }
.ligne-libre b { font: 600 var(--t1)/1.2 var(--titre); }
.ligne-libre span { font-size: var(--t-1); color: var(--encre-3); }
.ligne-libre .prix-libre { margin-left: auto; font: 600 var(--t2)/1 var(--mono); }
.ligne-libre .prix-libre small { display: block; font: 400 var(--t-2)/1.3 var(--ui); color: var(--encre-3); text-align: right; margin-top: 4px; }
.fondateurs { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--e6); align-items: center; background: var(--panneau); color: var(--c-encre); border: 1px solid var(--or); border-radius: var(--r2); padding: var(--e6); box-shadow: 0 0 0 2px rgba(217,164,65,.28), var(--o2); }
.fondateurs .sur { display: block; font: 500 var(--t-1)/1 var(--mono); color: var(--or); letter-spacing: .1em; text-transform: uppercase; margin-bottom: var(--e3); }
.fondateurs h2 { margin: 0 0 var(--e3); color: var(--c-encre); font-size: var(--t4); }
.fondateurs p { margin: 0 0 var(--e4); color: var(--c-encre-2); max-width: 72ch; }
.fondateurs .actions { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; }
.fondateurs .actions small { color: var(--c-encre-3); font-size: var(--t-2); }
.fondateurs ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; border-left: 1px solid var(--c-bord); padding-left: var(--e5); }
.fondateurs li { font-size: var(--t-1); color: var(--c-encre-2); position: relative; padding-left: 15px; line-height: 1.5; }
.fondateurs li::before { content: ''; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 99px; background: var(--or); }
.fondateurs li b { color: var(--c-encre); }
tr.phare td { background: #fbf5e4; font-weight: 600; color: var(--encre); }
@media (prefers-color-scheme: dark) { tr.phare td { background: #332b19; } }

/* ---------------------------------------------------------------- fonctionnalites */
.legende-etats { display: flex; gap: var(--e4); flex-wrap: wrap; font-size: var(--t-1); color: var(--encre-3); margin: 0 0 var(--e4); }
.legende-etats i { font-style: normal; position: relative; padding-left: 15px; }
.legende-etats i::before, .fonction li::before { content: ''; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 99px; background: var(--ok); }
.legende-etats i.prepa::before, .fonction li.prepa::before { background: transparent; border: 1px solid var(--or); width: 4px; height: 4px; }
.fonctions { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--e4); align-items: start; }
.fonction { background: var(--surface); border: 1px solid var(--bord); border-radius: var(--r2); padding: var(--e5); box-shadow: var(--o1); }
.fonction .num { font: 500 var(--t-2)/1 var(--mono); color: var(--or); letter-spacing: .08em; text-transform: uppercase; display: block; margin-bottom: var(--e2); }
.fonction h3 { margin: 0 0 var(--e3); }
.fonction h3 a { color: inherit; text-decoration: none; }
.fonction h3 a:hover { text-decoration: underline; }
.fonction ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.fonction li { font-size: var(--t-1); color: var(--encre-2); position: relative; padding-left: 15px; line-height: 1.5; }
.fonction li.prepa { color: var(--encre-3); }
.fonction li.prepa em { font: 500 var(--t-2)/1 var(--mono); color: var(--or); font-style: normal; text-transform: uppercase; letter-spacing: .05em; margin-left: 6px; white-space: nowrap; }

/* ---------------------------------------------------------------- divers */
.avert { border: 1px solid var(--bord); border-left: 3px solid var(--or); background: var(--surface); border-radius: var(--r2); padding: var(--e5); box-shadow: var(--o1); }
.avert h3 { margin-top: 0; }
.avert p { font-size: var(--t-1); color: var(--encre-2); margin: 0 0 var(--e3); }
.avert p:last-child { margin: 0; }
.faq details { background: var(--surface); border: 1px solid var(--bord); border-radius: var(--r2); padding: var(--e3) var(--e5); margin-bottom: var(--e2); }
.faq summary { cursor: pointer; font: 600 var(--t0)/1.4 var(--ui); color: var(--encre); }
.faq details p { margin: var(--e3) 0 0; font-size: var(--t-1); color: var(--encre-2); }
dl.glossaire dt { font: 600 var(--t1)/1.25 var(--titre); margin: var(--e5) 0 4px; }
dl.glossaire dd { margin: 0; color: var(--encre-2); max-width: 94ch; }
.appel { background: var(--panneau); color: var(--c-encre); border-radius: var(--r2); padding: var(--e6) var(--e6); display: flex; align-items: center; gap: var(--e5); flex-wrap: wrap; margin-top: var(--e8); }
.appel h2 { color: var(--c-encre); margin: 0 0 4px; font-size: var(--t2); }
.appel p { margin: 0; color: var(--c-encre-2); font-size: var(--t-1); }
.appel .actions { margin-left: auto; display: flex; gap: var(--e2); }
.note { font-size: var(--t-1); color: var(--encre-3); line-height: 1.6; max-width: 100ch; }
.note code, p code { font-family: var(--mono); background: var(--champ); padding: 1px 5px; border-radius: 3px; font-size: .92em; }
.placeholder { background: #fff6da; color: #6a4a08; border: 1px dashed var(--or); border-radius: var(--r1); padding: 2px 6px; font-family: var(--mono); font-size: var(--t-2); }
@media (prefers-color-scheme: dark) { .placeholder { background: #332b19; color: #e8c476; } }
.liste-pages { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--e3); }
.liste-pages a { display: block; background: var(--surface); border: 1px solid var(--bord); border-radius: var(--r2); padding: var(--e3) var(--e4); text-decoration: none; color: var(--encre); }
.liste-pages a:hover { border-color: var(--bord-fort); }
.liste-pages small { display: block; color: var(--encre-3); font-size: var(--t-2); margin-top: 3px; }
.journal article { border-bottom: 1px solid var(--bord); padding: var(--e4) 0; }
.journal article:last-child { border-bottom: 0; }
.journal .date { font: 400 var(--t-2)/1 var(--mono); color: var(--encre-3); }
.journal h3 { margin: 6px 0 4px; }
.journal p { margin: 0; color: var(--encre-2); font-size: var(--t-1); }

/* ==================================================================== pied */
footer { background: var(--panneau); color: var(--c-encre-2); padding: var(--e7) 0 var(--e6); font-size: var(--t-1); }
footer .colonnes { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr; gap: var(--e5); }
footer h4 { font: 600 var(--t-2)/1 var(--ui); text-transform: uppercase; letter-spacing: .08em; color: var(--c-encre-3); margin: 0 0 var(--e3); }
footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
footer a { color: var(--c-encre-2); text-decoration: none; }
footer a:hover { color: var(--c-encre); }
footer .marque { margin-bottom: var(--e3); }
footer .bas { margin-top: var(--e6); padding-top: var(--e4); border-top: 1px solid var(--c-bord); color: var(--c-encre-3); display: flex; gap: var(--e4); flex-wrap: wrap; justify-content: space-between; }

@media (max-width: 900px) {
  .hero .dedans { grid-template-columns: 1fr; }
  .rassure { grid-template-columns: 1fr; }
  .tuiles { grid-template-columns: 1fr; }
  .fondateurs { grid-template-columns: 1fr; }
  .fondateurs ul { border-left: 0; padding-left: 0; border-top: 1px solid var(--c-bord); padding-top: var(--e4); }
  .preuves { grid-template-columns: 1fr; }
  footer .colonnes { grid-template-columns: 1fr 1fr; }
  .nav { display: none; }
  .menu-mobile { display: block; }
  .menu-mobile summary { list-style: none; color: var(--c-encre-2); font-size: var(--t-1); cursor: pointer; padding: 6px 8px; border: 1px solid var(--c-bord); border-radius: var(--r1); }
  .menu-mobile ul { position: absolute; left: 0; right: 0; top: 56px; background: var(--panneau); list-style: none; margin: 0; padding: var(--e3) var(--e5); display: flex; flex-direction: column; gap: 6px; border-bottom: 1px solid var(--c-bord); }
  .menu-mobile a { color: var(--c-encre); text-decoration: none; display: block; padding: 8px 0; }
}