:root { --fuchsia:#d6157e; --creme:#fbf8f2; --noir:#2a2622; --gris:#8a8172; --filet:#d9d2c6; --haut:56px; }
* { margin:0; padding:0; box-sizing:border-box; }
body { background:var(--creme); color:var(--noir);
  font-family:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif; font-size:16px; line-height:1.55; }
header { position:sticky; top:0; height:var(--haut); background:var(--creme); z-index:5;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:0 20px; border-bottom:1px solid var(--filet); }
.retour { font-family:"Helvetica Neue",sans-serif; font-weight:700; letter-spacing:.08em;
  font-size:15px; color:var(--noir); text-decoration:none; white-space:nowrap; }
.retour em { color:var(--fuchsia); font-style:normal; }
.chap { font-size:12.5px; color:var(--gris); font-weight:300; text-align:center; flex:1;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.prog { font-size:12px; color:var(--fuchsia); font-weight:600; white-space:nowrap; }
main { max-width:1280px; margin:0 auto; padding:14px 12px 6px; }
.lecteur { display:flex; align-items:center; justify-content:center; gap:16px; }
.spread { position:relative; border-radius:4px; overflow:hidden;
  box-shadow:0 6px 30px rgba(42,38,34,.13); flex:0 1 auto;
  max-width:min(1080px, calc((100vh - var(--haut) - 130px) * 1.428)); }
.spread img { display:block; width:100%; height:auto; }
.spread a { position:absolute; display:block; border-radius:6px; }
.spread a:hover { outline:2px solid var(--fuchsia); outline-offset:1px; background:rgba(214,21,126,.06); }
.fleche { width:46px; height:46px; min-width:46px; border:1.5px solid var(--fuchsia); border-radius:50%;
  color:var(--fuchsia); display:flex; align-items:center; justify-content:center;
  font-size:20px; text-decoration:none; transition:.2s; }
.fleche:hover { background:var(--fuchsia); color:var(--creme); }
.fleche.off { opacity:.22; }
details.texte { max-width:1080px; margin:12px auto 0; }
details.texte summary { cursor:pointer; color:var(--fuchsia); font-size:13px; font-weight:600;
  list-style:none; display:inline-block; padding:4px 0; }
details.texte summary::before { content:"▸ "; }
details.texte[open] summary::before { content:"▾ "; }
.colonnes { columns:2 340px; column-gap:44px; padding:8px 4px; font-size:14px; }
.colonnes h3 { font-family:"Helvetica Neue",sans-serif; font-size:17px; margin:10px 0 3px; break-after:avoid; }
.colonnes .ss { font-weight:300; color:var(--gris); margin-bottom:6px; }
.colonnes p { margin:7px 0; }
footer { display:flex; flex-direction:column; align-items:center; gap:10px;
  font-size:11.5px; color:var(--gris); padding:16px 0 22px; }
footer a { color:var(--fuchsia); }
.cta { background:var(--fuchsia); color:var(--creme) !important; text-decoration:none;
  padding:10px 22px; border-radius:22px; font-size:14px; font-weight:600; }
.accueil { text-align:center; }
.grande-couv img { max-width:min(880px,94vw); border-radius:4px;
  box-shadow:0 6px 30px rgba(42,38,34,.13); }
.lance { margin:18px 0 30px; }
.sommaire { text-align:left; padding-bottom:10px; }
.sommaire h2 { font-family:"Helvetica Neue",sans-serif; margin-bottom:16px; }
.cartes { display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:16px; }
.carte { border:1px solid var(--filet); border-radius:8px; overflow:hidden; text-decoration:none;
  color:var(--noir); background:#fff9; transition:.2s; }
.carte:hover { border-color:var(--fuchsia); transform:translateY(-2px); }
.carte img { width:100%; height:auto; display:block; border-bottom:1px solid var(--filet); }
.carte strong { display:block; font-family:"Helvetica Neue",sans-serif; font-size:13.5px; padding:10px 12px; }
.anim { opacity:1; }
.anim.vu { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .anim{opacity:1;transform:none;transition:none;} }
@media (max-width:700px) {
  .lecteur { flex-direction:column; }
  .lecteur .fleche { position:fixed; bottom:14px; z-index:6; background:var(--creme); }
  #prev { left:14px; } #next { right:14px; }
  .spread { max-width:100%; }
}

/* ── animations des figures ── */
@property --a { syntax:"<angle>"; inherits:false; initial-value:0deg; }
.spread svg.anime { position:absolute; display:block; pointer-events:none;
  animation:sortie .8s ease forwards; animation-delay:var(--total,2s); }
@keyframes sortie { to { opacity:0; } }
.anime .tr { stroke-dasharray:1; stroke-dashoffset:1; animation:trace 1.1s ease forwards; }
@keyframes trace { to { stroke-dashoffset:0; } }
.anime .rf { animation-name:trace, remplir; animation-duration:1.1s,.6s;
  animation-fill-mode:forwards,forwards; animation-timing-function:ease,ease; }
@keyframes remplir { to { fill-opacity:1; } }
.anime .ap { opacity:0; animation:apparait .7s ease forwards; }
@keyframes apparait { to { opacity:1; } }
.voile { position:absolute; background:#fbf8f2; pointer-events:none;
  -webkit-mask:conic-gradient(from -90deg, transparent var(--a), #000 0);
  mask:conic-gradient(from -90deg, transparent var(--a), #000 0);
  animation:compas 1.7s ease-in-out forwards, voilefin .5s ease forwards 1.7s; }
@keyframes compas { to { --a:360deg; } }
@keyframes voilefin { to { opacity:0; } }
.rejouer { position:absolute; right:10px; bottom:10px; z-index:3;
  background:#fbf8f2; color:#d6157e; border:1.5px solid #d6157e; border-radius:50%;
  width:34px; height:34px; font-size:16px; cursor:pointer; opacity:.75; }
.rejouer:hover { opacity:1; background:#d6157e; color:#fbf8f2; }
@media (prefers-reduced-motion:reduce) {
  .spread svg.anime, .voile { display:none; } }

/* pulsation des points et connecteurs */
.anime .pp { opacity:0; transform-origin:center; transform-box:fill-box;
  animation:pulse .55s cubic-bezier(.2,1.5,.4,1) forwards; }
@keyframes pulse { from { opacity:0; transform:scale(.3); } to { opacity:1; transform:scale(1); } }

/* défilements directionnels */
.anime .gd { opacity:0; transform:translateX(-26px);
  animation:glisseGD .7s ease forwards; }
@keyframes glisseGD { to { opacity:1; transform:translateX(0); } }
.anime .vt { opacity:0; transform:translateY(-20px);
  animation:glisseVT .6s ease forwards; }
@keyframes glisseVT { to { opacity:1; transform:translateY(0); } }

/* sommaire matrice (SVG scalable) */
.spread svg.mx { position:absolute; display:block; }
.spread svg.mx a rect { transition:.15s; }
.spread svg.mx a:hover rect { stroke:#d6157e; stroke-width:1.6; fill:#d6157e; fill-opacity:.08; }