/* ============================================================
   antoninatger.com — page d'accueil dynamique
   Tout est rangé sous .accueil pour ne rien changer aux autres pages.
   Les effets (apparitions, textes qui s'allument…) sont dans site.css
   (communs) et static/js/accueil.js (propres à l'accueil).
   ============================================================ */

.accueil { --ease: cubic-bezier(.2,.7,.2,1); overflow-x: clip; }
.accueil h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); letter-spacing: -.01em; line-height: 1.08; }
.accueil .eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.accueil .eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--accent); flex: none; }
.accueil .petit { font-size: .9rem; }

/* ---------- 1. ouverture ---------- */
.accueil .ouverture { min-height: calc(100vh - 76px); min-height: calc(100svh - 76px); display: grid; align-items: center; padding: 40px 0 70px; position: relative; }
.accueil .ouverture .wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; align-items: center; }
.accueil .ouverture h1 { font-size: clamp(3rem, 7.4vw, 6.2rem); letter-spacing: -.02em; line-height: .98; margin: .2em 0 .3em; }
.accueil .ouverture h1 em { font-style: italic; color: var(--accent); }
.accueil .ouverture .lead { max-width: 36em; }
.accueil .portes { display: grid; gap: 10px; margin-top: 28px; max-width: 540px; }
.accueil .porte { border-radius: 6px; transition: border-color .25s, transform .25s var(--ease), box-shadow .25s; }
.accueil .porte:hover { transform: translateX(6px); box-shadow: 0 8px 24px -14px rgba(20,34,44,.35); }
.accueil .porte svg { transition: transform .25s var(--ease); }
.accueil .porte:hover svg { transform: translateX(4px); }
.accueil .ouverture__photo { margin: 0; }
.accueil .cadre { position: relative; border-radius: 6px; overflow: hidden; aspect-ratio: 4 / 5; background: var(--tag); }
.accueil .cadre img { width: 100%; height: 100%; object-fit: cover; will-change: transform; display: block; }
.anim .accueil .ouverture__photo .cadre { clip-path: inset(100% 0 0 0); transition: clip-path 1.4s var(--ease) .25s; }
.anim .accueil .ouverture__photo.vu .cadre { clip-path: inset(0 0 0 0); }
.accueil .ouverture__photo figcaption { font-size: .82rem; color: var(--ink-mute); margin-top: 10px; }
.accueil .defiler { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-mute); }
.accueil .defiler::after { content: ""; width: 1px; height: 38px; background: linear-gradient(var(--ink-mute), transparent); animation: accueil-goutte 2s var(--ease) infinite; transform-origin: top; }
@keyframes accueil-goutte { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
@media (max-width: 900px) {
  .accueil .ouverture { min-height: 0; padding: 30px 0 50px; }
  .accueil .ouverture .wrap { grid-template-columns: 1fr; gap: 32px; }
  .accueil .cadre { aspect-ratio: 4 / 3; }
  .accueil .defiler { display: none; }
}

/* ---------- bande de références ---------- */
.accueil .bande { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--surface); overflow: hidden; padding: 22px 0; }
.accueil .bande__piste { display: flex; gap: 56px; width: max-content; }
.anim .accueil .bande__piste { animation: accueil-bande 38s linear infinite; }
.accueil .bande:hover .bande__piste, .accueil .bande:focus-within .bande__piste, .accueil .bande:focus .bande__piste { animation-play-state: paused; }
@keyframes accueil-bande { to { transform: translateX(-50%); } }
.accueil .bande__el { display: flex; align-items: baseline; gap: 12px; white-space: nowrap; color: var(--ink); }
.accueil .bande__el:hover { text-decoration: none; color: var(--accent); }
.accueil .bande__el b { font-family: var(--serif); font-size: 1.5rem; font-weight: 600; }
.accueil .bande__el span { color: var(--ink-soft); font-size: .92rem; }
.accueil .bande__el::after { content: "✦"; color: var(--accent); margin-left: 44px; font-size: .8rem; }
html:not(.anim) .accueil .bande { overflow-x: auto; }

/* ---------- 2. le texte qui s'allume ---------- */
.accueil .manifeste__colle { padding: 90px 0; }
.anim .accueil .manifeste { height: 200vh; }
.anim .accueil .manifeste__colle { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; padding: 0; }
.accueil .manifeste p { font-family: var(--serif); font-size: clamp(1.7rem, 3.6vw, 3.1rem); line-height: 1.18; font-weight: 500; letter-spacing: -.01em; margin: 0; max-width: 24em; color: var(--ink); }
.accueil .manifeste em, .accueil .manifeste .fort { color: var(--accent); font-style: italic; }
.anim .accueil .manifeste .w { color: rgba(20,34,44,.14); transition: color .35s; }
.anim .accueil .manifeste .w.on { color: var(--ink); }
.anim .accueil .manifeste .w.fort.on { color: var(--accent); }
.accueil .manifeste .signature { font-size: .95rem; color: var(--ink-soft); margin-top: 28px; display: block; }

/* ---------- 3. chiffres ---------- */
.accueil .chiffres { padding: 40px 0 110px; }
.accueil .chiffres .wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.accueil .chiffre { border-top: 1px solid var(--ink); padding-top: 18px; }
.accueil .chiffre b { display: block; font-family: var(--serif); font-size: clamp(3rem, 6.5vw, 5.4rem); font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.accueil .chiffre span { color: var(--ink-soft); font-size: .95rem; }
@media (max-width: 760px) { .accueil .chiffres .wrap { grid-template-columns: 1fr 1fr; } }

/* ---------- 4. une séance en trois temps ---------- */
.accueil .recit { background: var(--ink); color: var(--paper); padding: 110px 0 60px; }
.accueil .recit h2, .accueil .recit h3 { color: var(--paper); }
.accueil .recit .eyebrow { color: #c9d6df; }
.accueil .recit__grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; margin-top: 40px; }
.accueil .recit__visuel { position: sticky; top: 16vh; height: 70vh; border-radius: 6px; overflow: hidden; background: rgba(255,255,255,.06); }
.accueil .recit__visuel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.08); transition: opacity .9s var(--ease), transform 1.6s var(--ease); }
.accueil .recit__visuel img.actif { opacity: 1; transform: scale(1); }
.accueil .recit__num { position: absolute; left: 18px; bottom: 14px; font-family: var(--serif); font-size: 5rem; line-height: 1; color: #fff; text-shadow: 0 2px 30px rgba(0,0,0,.5); }
.accueil .etape { min-height: 88vh; display: flex; flex-direction: column; justify-content: center; opacity: .25; transition: opacity .6s var(--ease); }
.accueil .etape.actif { opacity: 1; }
.accueil .etape .n { font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--nuit-accent); margin-bottom: 14px; }
.accueil .etape h3 { font-size: clamp(2rem, 3.6vw, 3rem); }
.accueil .etape p { font-size: 1.15rem; color: #c9d6df; max-width: 30em; }
.accueil .etape__img { display: none; }
html:not(.anim) .accueil .etape { opacity: 1; min-height: 0; padding: 40px 0; }
@media (max-width: 900px) {
  .accueil .recit__grille { grid-template-columns: 1fr; gap: 0; margin-top: 10px; }
  .accueil .recit__visuel { display: none; }
  .accueil .etape { min-height: 0; padding: 36px 0; opacity: 1; }
  .accueil .etape__img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; margin-bottom: 22px; }
  .anim .accueil .etape .etape__img { clip-path: inset(0 0 100% 0); transition: clip-path 1.1s var(--ease); }
  .anim .accueil .etape.vu .etape__img { clip-path: inset(0 0 0 0); }
}

/* ---------- 5. interventions : trois cases ---------- */
.accueil .interventions-accueil { padding: 120px 0; }
.accueil .grille-fiches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 44px; }
.accueil .fiche-case { min-height: 360px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 28px; display: flex; flex-direction: column; color: var(--ink); transition: transform .35s var(--ease), box-shadow .35s, border-color .35s, opacity .9s var(--ease); }
.accueil .fiche-case:hover, .anim .accueil .fiche-case.vu:hover { transform: translateY(-8px); box-shadow: 0 24px 48px -28px rgba(20,34,44,.45); border-color: var(--accent); color: var(--ink); text-decoration: none; }
.accueil .fiche-case .num { font-family: var(--serif); font-size: 3.4rem; line-height: 1; color: var(--accent-light); -webkit-text-stroke: 1px var(--accent); margin-bottom: 18px; }
.accueil .fiche-case h3 { font-size: 1.75rem; }
.accueil .fiche-case p { color: var(--ink-soft); flex: 1; }
.accueil .fiche-case .tags { margin-bottom: 16px; }
.accueil .fiche-case .pied { display: flex; justify-content: space-between; font-size: .88rem; color: var(--ink-soft); border-top: 1px solid var(--border); padding-top: 14px; }
.accueil .fiche-case .pied span:last-child { color: var(--accent); font-weight: 500; }
.accueil .interventions__bas { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 36px; }
.accueil .interventions__bas .muted { font-size: .95rem; }
@media (max-width: 900px) { .accueil .grille-fiches { grid-template-columns: 1fr; } .accueil .fiche-case { min-height: 0; } }

/* ---------- 6. repères ---------- */
.accueil .reperes { padding: 120px 0; }
.accueil .frise { position: relative; margin: 50px 0 0; padding: 0; list-style: none; border-left: 0; }
.accueil .frise li::before { display: none; }   /* la frise de la page À propos (site.css) met un point à gauche */
.accueil .frise::before, .accueil .frise__trait { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--border); }
.accueil .frise__trait { background: var(--accent); transform-origin: top; transform: scaleY(var(--p, 1)); }
.accueil .frise li { position: relative; width: 50%; padding: 0 48px 54px 0; text-align: right; margin: 0; }
.accueil .frise li:nth-of-type(even) { margin-left: 50%; padding: 0 0 54px 48px; text-align: left; }
.accueil .frise li::after { content: ""; position: absolute; top: 10px; right: -7px; width: 12px; height: 12px; border-radius: 50%; background: var(--paper); border: 2px solid var(--accent); }
.accueil .frise li:nth-of-type(even)::after { right: auto; left: -7px; }
.accueil .frise .an { font-family: var(--serif); font-size: 2.2rem; font-weight: 600; color: var(--accent); line-height: 1; display: block; margin-bottom: 6px; }
.accueil .frise b { display: block; font-size: 1.08rem; margin-bottom: 2px; }
.accueil .frise .q { color: var(--ink-soft); font-size: .95rem; }
@media (max-width: 760px) {
  .accueil .frise::before, .accueil .frise__trait { left: 6px; }
  .accueil .frise li, .accueil .frise li:nth-of-type(even) { width: 100%; margin-left: 0; padding: 0 0 40px 36px; text-align: left; }
  .accueil .frise li::after, .accueil .frise li:nth-of-type(even)::after { left: 0; right: auto; }
}

/* ---------- 7. témoignages et retours ---------- */
.accueil .temoins { padding: 40px 0 120px; }
.accueil .pile { margin-top: 40px; }
.accueil .temoin { position: sticky; top: calc(100px + var(--k) * 22px); background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: clamp(28px, 5vw, 56px); margin: 0 0 40vh; box-shadow: 0 30px 60px -40px rgba(20,34,44,.5); transform-origin: 50% 0; }
.accueil .temoin:last-child { margin-bottom: 0; }
html:not(.anim) .accueil .temoin { position: static; margin-bottom: 24px; }
.accueil .temoin blockquote { margin: 0 0 22px; padding: 0; border: 0; font-family: var(--serif); font-size: clamp(1.3rem, 2.4vw, 1.9rem); line-height: 1.3; font-style: italic; color: var(--ink); }
.accueil .temoin blockquote::before { content: "“"; display: block; font-size: 4.5rem; line-height: .6; color: var(--accent); font-style: normal; margin-bottom: 10px; }
.accueil .temoin figcaption { color: var(--ink-soft); font-size: .95rem; margin: 0; }
.accueil .temoin figcaption b { color: var(--ink); }

.accueil .retours { margin-top: 90px; }
.accueil .retours__tete { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.accueil .retours__fenetre { overflow: hidden; margin: 0 -20px; padding: 10px 20px 24px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.accueil .retours__piste { display: flex; gap: 20px; width: max-content; }
.anim .accueil .retours__piste { animation: accueil-bande var(--duree, 40s) linear infinite; }
.accueil .retours__fenetre:hover .retours__piste, .accueil .retours__fenetre:focus-within .retours__piste { animation-play-state: paused; }
html:not(.anim) .accueil .retours__fenetre { overflow-x: auto; }
.accueil .retour { flex: 0 0 min(380px, 80vw); margin: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 24px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 18px 40px -34px rgba(20,34,44,.5); }
.accueil .retour__haut { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.accueil .retour__note { font-family: var(--serif); font-size: 2rem; font-weight: 600; line-height: 1; color: var(--accent); white-space: nowrap; }
.accueil .retour__note small { font-size: .9rem; color: var(--ink-mute); font-weight: 500; }
.accueil .retour blockquote { margin: 0; padding: 0; border: 0; font-family: var(--serif); font-style: italic; font-size: 1.3rem; line-height: 1.3; color: var(--ink); flex: 1; }
.accueil .retour figcaption { font-size: .9rem; color: var(--ink-soft); margin: 0; }
.accueil .retour figcaption b { color: var(--ink); }
.accueil .tag--jeu { background: var(--bleu-clair); color: var(--bleu-fonce); }

/* ---------- 8. comment ça se passe ---------- */
.accueil .deroule { padding: 110px 0; background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.accueil .grille-pas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; margin-top: 44px; }
.accueil .pas { border-top: 2px solid var(--ink); padding-top: 20px; }
.accueil .pas b { font-family: var(--serif); font-size: 1.6rem; display: block; margin-bottom: 8px; }
.accueil .pas p { color: var(--ink-soft); margin: 0; }
@media (max-width: 800px) { .accueil .grille-pas { grid-template-columns: 1fr; } }

/* ---------- 9. jeux ---------- */
.accueil .jeux-accueil { padding: 120px 0; }
.accueil .grille-jeux { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 30px; }
.accueil .jeu { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 24px; color: var(--ink); display: flex; flex-direction: column; gap: 8px; transition: transform .3s var(--ease), border-color .3s, opacity .9s var(--ease); }
.accueil .jeu:hover, .anim .accueil .jeu.vu:hover { transform: translateY(-6px) rotate(-.6deg); border-color: var(--accent); color: var(--ink); text-decoration: none; }
.accueil .jeu h3 { font-size: 1.45rem; margin: 6px 0 0; }
.accueil .jeu p { color: var(--ink-soft); font-size: .95rem; flex: 1; margin: 0; }
.accueil .jeu .ico { width: 44px; height: 44px; border-radius: 50%; background: var(--accent-light); display: grid; place-items: center; }
.accueil .jeu .ico svg { width: 24px; height: 24px; stroke: var(--accent); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.accueil .jeu__pied { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.accueil .jouer { color: var(--accent); font-weight: 600; font-size: .95rem; transition: transform .25s var(--ease); }
.accueil .jeu:hover .jouer { transform: translateX(4px); }
@media (max-width: 900px) { .accueil .grille-jeux { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .accueil .grille-jeux { grid-template-columns: 1fr; } }

/* ---------- 10. blog : trois billets avec photo ---------- */
.accueil .fil { padding: 110px 0 90px; background: var(--ink); color: var(--paper); }
.accueil .fil h2 { color: var(--paper); margin: 0; }
.accueil .fil .eyebrow { color: #c9d6df; }
.accueil .fil__tete { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.accueil .plus { color: var(--nuit-accent); font-weight: 500; white-space: nowrap; }
.accueil .plus:hover { color: #fff; }
.accueil .fil__grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 40px; }
.accueil .carte-billet { color: var(--paper); display: flex; flex-direction: column; }
.accueil .carte-billet:hover { color: var(--paper); text-decoration: none; }
.accueil .carte-billet__img { aspect-ratio: 16 / 10; border-radius: 6px; overflow: hidden; background: rgba(255,255,255,.06); margin-bottom: 18px; }
.accueil .carte-billet__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--ease); }
.accueil .carte-billet:hover .carte-billet__img img { transform: scale(1.05); }
.accueil .carte-billet time { color: #a3b4b0; font-size: .85rem; }
.accueil .carte-billet h3 { color: var(--paper); font-size: 1.6rem; margin: 6px 0 8px; }
.accueil .carte-billet:hover h3 { color: var(--nuit-accent); }
.accueil .carte-billet p { color: #c9d6df; font-size: .96rem; margin: 0; }
.accueil .fil__bas { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; padding-top: 50px; }
.accueil .btn--sombre { background: transparent; color: var(--paper); border-color: rgba(255,255,255,.35); }
.accueil .btn--sombre:hover { border-color: var(--paper); color: var(--paper); }
@media (max-width: 900px) { .accueil .fil__grille { grid-template-columns: 1fr; gap: 40px; } }

/* ---------- 11. fin ---------- */
.accueil .fin { padding: 140px 0; text-align: center; }
.accueil .fin h2 { font-size: clamp(2.6rem, 7vw, 5.6rem); margin-bottom: .3em; }
.accueil .fin p { color: var(--ink-soft); font-size: 1.15rem; max-width: 34em; margin: 0 auto 30px; }

/* ---------- ajouts : images de la frise, cartes d'élèves, visuels des jeux ---------- */
.accueil .frise__images { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.accueil .frise li:nth-of-type(odd) .frise__images { justify-content: flex-end; }
.accueil .frise__images img { width: min(320px, 100%); aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; box-shadow: 0 14px 30px -20px rgba(20,34,44,.5); }
.accueil .frise__images--couv img { width: 96px; aspect-ratio: 2 / 3; border-radius: 3px; }
.accueil .frise__lien { display: inline-block; margin-top: 8px; font-size: .92rem; font-weight: 500; }
@media (max-width: 760px) { .accueil .frise li:nth-of-type(odd) .frise__images { justify-content: flex-start; } }
.accueil .temoin__qui { margin-bottom: 18px; }
.accueil .temoin__note { float: right; font-family: var(--serif); font-size: 2rem; font-weight: 600; line-height: 1; color: var(--accent); }
.accueil .temoin__note small { font-size: .9rem; color: var(--ink-mute); font-weight: 500; }
.accueil .temoin--eleve { background: #f7fafc; }
.accueil .jeu { padding: 0 0 22px; overflow: hidden; }
.accueil .jeu > *:not(.jeu__visuel) { margin-left: 22px; margin-right: 22px; }
.accueil .jeu > .ico { margin-top: 22px; }
.accueil .jeu__visuel { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #111; margin-bottom: 8px; }
.accueil .jeu__visuel img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.accueil .jeu:hover .jeu__visuel img { transform: scale(1.06); }

/* ---------- 6 bis. D'où je parle : trois colonnes ---------- */
.accueil .facettes { padding: 120px 0; }
.accueil .facettes__intro { font-family: var(--serif); font-style: italic; font-size: clamp(1.25rem, 2vw, 1.55rem); color: var(--ink-soft); max-width: 34em; }
.accueil .facettes__grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 44px; align-items: stretch; }
.accueil .facette { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; transition: transform .35s var(--ease), box-shadow .35s, opacity .9s var(--ease); }
.accueil .facette:hover, .anim .accueil .facette.vu:hover { transform: translateY(-6px); box-shadow: 0 26px 50px -32px rgba(20,34,44,.45); }
.accueil .facette__visuel { aspect-ratio: 4 / 3; overflow: hidden; background: var(--tag); }
.accueil .facette__visuel img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--ease); }
.accueil .facette:hover .facette__visuel img { transform: scale(1.04); }
.accueil .facette__visuel--couv { display: flex; align-items: center; justify-content: center; gap: 14px; background: var(--ink); padding: 26px; }
.accueil .facette__visuel--couv img { width: auto; height: 100%; max-height: 190px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 3px; box-shadow: 0 16px 30px -12px rgba(0,0,0,.7); }
.accueil .facette:hover .facette__visuel--couv img { transform: translateY(-4px); }
.accueil .facette__corps { padding: 26px 26px 24px; display: flex; flex-direction: column; flex: 1; }
.accueil .facette h3 { font-size: 2rem; margin: 0; }
.accueil .facette__sous { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); font-weight: 500; margin: 6px 0 18px; }
/* petite chronologie dans chaque colonne : la ligne se dessine, les points s'allument */
.accueil .facette__points { list-style: none; margin: 0 0 18px; padding: 0 0 0 24px; display: grid; gap: 14px; align-content: start; position: relative; }
.accueil .facette__points::before, .accueil .facette__trait { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 2px; background: var(--border); }
.accueil .facette__trait { background: var(--accent); transform-origin: top; transform: scaleY(var(--p, 1)); }
.accueil .facette__points li { margin: 0; display: grid; grid-template-columns: 1fr; gap: 1px; position: relative; }
.accueil .facette__points li::before { content: ""; position: absolute; left: -24px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); border: 2px solid var(--accent); box-sizing: border-box; transition: background .3s, transform .3s var(--ease); }
.accueil .facette__points li.on::before, html:not(.anim) .accueil .facette__points li::before { background: var(--accent); transform: scale(1.15); }
.anim .accueil .facette__points li { opacity: .35; transition: opacity .5s var(--ease); }
.anim .accueil .facette__points li.on { opacity: 1; }
.accueil .facette__points .an { font-family: var(--serif); font-size: 1.1rem; font-weight: 600; color: var(--accent); line-height: 1.2; }
.accueil .facette__points .txt { color: var(--ink-soft); font-size: .95rem; line-height: 1.45; }
/* vignettes à côté des dates */
.accueil .facette__points li.avec-vignette { grid-template-columns: 1fr 66px; column-gap: 12px; align-items: start; }
.accueil .facette__points li.avec-vignette > .an, .accueil .facette__points li.avec-vignette > .txt { grid-column: 1; }
.accueil .facette__vignette { grid-column: 2; grid-row: 1 / span 2; width: 66px; height: 50px; object-fit: cover; border-radius: 4px; box-shadow: 0 8px 18px -10px rgba(20,34,44,.6); transition: transform .3s var(--ease); }
.accueil .facette__vignette--couv { width: 48px; height: 68px; object-position: center 65%; border-radius: 3px; justify-self: end; }
.accueil .facette__points li.on .facette__vignette { transform: rotate(-2deg); }
/* dates cliquables : le lien couvre la ligne ; un lien déjà présent dans le texte passe au-dessus */
.accueil .facette__point-lien { position: absolute; inset: -6px -10px; z-index: 1; border-radius: 8px; transition: background .2s; }
.accueil .facette__points li.cliquable .txt a { position: relative; z-index: 2; }
.accueil .facette__points li.cliquable .txt::after { content: " →"; color: var(--accent); opacity: 0; transition: opacity .2s, margin .2s var(--ease); margin-left: -4px; }
.accueil .facette__points li.cliquable:hover .facette__point-lien { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.accueil .facette__points li.cliquable:hover .txt { color: var(--ink); }
.accueil .facette__points li.cliquable:hover .txt::after, .accueil .facette__points li.cliquable:focus-within .txt::after { opacity: 1; margin-left: 0; }
.accueil .facette__point-lien:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: none) { .accueil .facette__points li.cliquable .txt::after { opacity: .7; margin-left: 0; } }
/* liste courte des lieux */
.accueil .facette__lieux { background: var(--paper); border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; margin: 0 0 18px; display: grid; gap: 4px; font-size: .9rem; }
.accueil .facette__lieux b { font-family: var(--serif); font-size: 1.25rem; color: var(--ink); }
.accueil .facette__lieux span { color: var(--ink-soft); line-height: 1.45; }
.accueil .facette__lieux a { font-weight: 500; }
.accueil .facette__lien { font-weight: 500; margin-top: auto; }
@media (max-width: 960px) { .accueil .facettes__grille { grid-template-columns: 1fr; max-width: 560px; } }

/* ---------- mini-animations des vignettes de jeux ----------
   Elles démarrent quand la case apparaît à l'écran (classe .vu) et accélèrent au survol. */
.accueil .jeu__visuel { position: relative; }
.accueil .jeu__visuel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.28) 50%, transparent 65%); transform: translateX(-120%); pointer-events: none; }
.accueil .jeu:hover .jeu__visuel::after { transition: transform .9s ease; transform: translateX(120%); }
.accueil .jeu__anim { position: absolute; right: 10px; bottom: 10px; width: 74px; height: 74px; border-radius: 50%; background: rgba(12,22,30,.8); box-shadow: 0 8px 20px -8px rgba(0,0,0,.7); display: grid; place-items: center; transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.accueil .jeu:hover .jeu__anim { transform: scale(1.12) rotate(-3deg); }
.accueil .aj { width: 62px; height: 62px; overflow: visible; }
.accueil .aj * { animation-play-state: paused; }
.accueil .jeu.vu .aj *, html:not(.anim) .accueil .aj * { animation-play-state: running; }

/* Fakemètre : la jauge hésite puis tranche */
.aj--jauge .aj-arc { fill: none; stroke-width: 5; stroke-linecap: round; }
.aj--jauge .aj-rouge { stroke: #e74c3c; } .aj--jauge .aj-orange { stroke: #f39c12; } .aj--jauge .aj-vert { stroke: #2ecc71; }
.aj--jauge .aj-aiguille { transform-origin: 32px 44px; animation: aj-aiguille 4.5s cubic-bezier(.5,0,.3,1) infinite; }
.aj--jauge .aj-aiguille line { stroke: #fff; stroke-width: 2.6; stroke-linecap: round; }
.aj--jauge .aj-aiguille circle { fill: #fff; }
.aj--jauge .aj-texte { fill: #e6edf2; font: 600 8px 'Inter', sans-serif; text-anchor: middle; letter-spacing: .02em; }
@keyframes aj-aiguille { 0% { transform: rotate(-70deg); } 18% { transform: rotate(40deg); } 30% { transform: rotate(-35deg); } 44% { transform: rotate(20deg); } 56% { transform: rotate(-10deg); } 70%, 88% { transform: rotate(62deg); } 100% { transform: rotate(-70deg); } }

/* Radar'naque : le radar balaie et repère les arnaques */
.aj--radar .aj-anneau { fill: none; stroke: rgba(46,204,113,.45); stroke-width: 1.2; }
.aj--radar .aj-balayage { transform-origin: 32px 32px; animation: aj-tour 2.4s linear infinite; }
.aj--radar .aj-point { fill: #e74c3c; opacity: 0; animation: aj-point 2.4s linear infinite; }
.aj--radar .aj-p2 { animation-delay: 1.3s; } .aj--radar .aj-p3 { animation-delay: 1.7s; }
.aj--radar .aj-p1 { animation-delay: .35s; }
.aj--radar .aj-alerte { fill: #fff; font: 700 9px 'Outfit', sans-serif; text-anchor: middle; opacity: 0; animation: aj-point 2.4s linear .35s infinite; }
@keyframes aj-tour { to { transform: rotate(360deg); } }
@keyframes aj-point { 0% { opacity: 0; } 4% { opacity: 1; } 55% { opacity: .15; } 100% { opacity: 0; } }

/* Arène de rhétorique : deux bulles se répondent */
.aj--bulles .aj-bulle path { stroke: none; }
.aj--bulles .aj-b1 path { fill: #fff; } .aj--bulles .aj-b2 path { fill: #c0392b; }
.aj--bulles text { font: 700 7.5px 'Outfit', sans-serif; text-anchor: middle; }
.aj--bulles .aj-b1 text { fill: #1a1510; } .aj--bulles .aj-b2 text { fill: #fff; }
.aj--bulles .aj-bulle { transform-box: fill-box; animation: aj-bulle 3.2s cubic-bezier(.2,.7,.2,1) infinite; opacity: 0; }
.aj--bulles .aj-b1 { transform-origin: 20% 100%; }
.aj--bulles .aj-b2 { transform-origin: 80% 100%; animation-delay: .8s; }
@keyframes aj-bulle { 0% { opacity: 0; transform: scale(.4); } 10% { opacity: 1; transform: scale(1.08); } 16%, 70% { opacity: 1; transform: scale(1); } 82%, 100% { opacity: 0; transform: scale(.9); } }

/* Planète connaissance : un satellite en orbite, les étoiles scintillent */
.aj--planete .aj-globe { fill: #3b82c4; stroke: #9fd0ff; stroke-width: 1.2; }
.aj--planete .aj-anneau-p { fill: none; stroke: #f0b3ab; stroke-width: 1.6; }
.aj--planete .aj-orbite { transform-origin: 32px 32px; animation: aj-tour 5s linear infinite; }
.aj--planete .aj-lune { fill: #f7e27a; }
.aj--planete .aj-etoile { fill: #fff; animation: aj-scintille 2.2s ease-in-out infinite; }
.aj--planete .aj-e2 { animation-delay: .7s; } .aj--planete .aj-e3 { animation-delay: 1.4s; }
@keyframes aj-scintille { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }

.accueil .jeu:hover .aj-balayage { animation-duration: 1.2s; }
.accueil .jeu:hover .aj-orbite { animation-duration: 2.2s; }

/* ---------- D'où je parle : une colonne ouverte, les deux autres repliées ---------- */
.accueil .facette { cursor: pointer; outline-offset: 4px; }
.accueil .facette.ouverte { cursor: default; }
.accueil .facette__accroche { font-family: var(--serif); font-size: 1.15rem; line-height: 1.3; color: var(--ink); margin: -6px 0 14px; }
.accueil .facette__deplier { display: none; font-size: .82rem; color: var(--accent); font-weight: 500; margin-top: auto; }
.accueil .facette:not(.ouverte) .facette__deplier { display: block; }
.accueil .facette:not(.ouverte) .facette__detail { display: none; }
.accueil .facette__detail { display: flex; flex-direction: column; flex: 1; animation: facette-ouvre .6s cubic-bezier(.2,.7,.2,1); }
@keyframes facette-ouvre { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.accueil .sur-tel { display: none; }
@media (hover: none) { .accueil .sur-ordi { display: none; } .accueil .sur-tel { display: inline; } }
@media (min-width: 961px) {
  .accueil .facettes__grille { grid-template-columns: var(--cols, 1fr 2.2fr 1fr); transition: grid-template-columns .6s cubic-bezier(.2,.7,.2,1); align-items: start; }
  .accueil .facette:not(.ouverte) { opacity: .92; }
  .accueil .facette:not(.ouverte):hover { opacity: 1; }
  .accueil .facette:not(.ouverte) .facette__visuel { aspect-ratio: 1 / 1; }
  .accueil .facette:not(.ouverte) .facette__visuel--couv { aspect-ratio: auto; padding: 18px 10px; gap: 6px; }
  .accueil .facette:not(.ouverte) .facette__visuel--couv img { max-height: 120px; }
  .accueil .facette:not(.ouverte) h3 { font-size: 1.6rem; }
  .accueil .facette.ouverte .facette__visuel { aspect-ratio: 16 / 7; }
}
@media (max-width: 960px) {
  .accueil .facette:not(.ouverte) .facette__visuel { aspect-ratio: 16 / 6; }
  .accueil .facette:not(.ouverte) .facette__visuel--couv { aspect-ratio: auto; padding: 14px; }
  .accueil .facette:not(.ouverte) .facette__visuel--couv img { max-height: 90px; }
}

/* ============================================================
   Charte « Trois piliers » : accueil
   ============================================================ */
.accueil .ouverture h1 { font-size: clamp(2.8rem, 6.6vw, 5.4rem); line-height: 1.02; }
.accueil .ouverture h1 em { font-style: normal; color: var(--bleu); }
.accueil .manifeste p { font-weight: 500; }
.accueil .manifeste em, .accueil .manifeste .fort { font-style: normal; }
.accueil .manifeste p, .accueil .temoin blockquote, .accueil .retour blockquote, .accueil .facette__accroche, .accueil .facettes__intro { font-style: normal; letter-spacing: -.01em; }
.accueil .chiffre b, .accueil .an, .accueil .facette__points .an, .accueil .recit__num, .accueil .fiche-case .num { letter-spacing: -.025em; font-weight: 600; }
/* sections sombres : la nuit du pilier (bleu nuit par défaut, sapin pour le blog) */
.accueil .recit, .accueil .fil { background: var(--nuit); }
.accueil .fil .btn--sombre { border-color: rgba(255,255,255,.35); }
/* « D'où je parle » : chaque colonne dans la couleur de son pilier */
.accueil .facette { border-top: 4px solid var(--accent); }
.accueil .facette__visuel--couv { background: var(--nuit); }
.accueil .deroule.fond-teinte, .accueil .interventions-accueil.fond-teinte { border-color: transparent; }