@font-face{ font-family:"Spectral"; src:url("../fonts/Spectral-SemiBold.ttf") format("truetype"); font-weight:600; font-style:normal; font-display:swap }
@font-face{ font-family:"Spectral"; src:url("../fonts/Spectral-Italic.ttf") format("truetype"); font-weight:400; font-style:italic; font-display:swap }
:root{
  --papier:#F7F2E8; --papier-2:#FFFDF8; --papier-3:#EFE7D8; --ligne:#E2D6C3;
  --encre:#2A1C23; --encre-2:#54434B; --discret:#6E5E66;
  --prune:#4A2734; --prune-2:#6B3A4C; --cuivre:#97582A; --jaune:#FFD84D; --violet:#5B2C86;
  --serif:"Spectral", Georgia, "Times New Roman", serif;
  --sans:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --r:14px; color-scheme:light;
}
*{ box-sizing:border-box }
html{ font-size:112.5%; -webkit-text-size-adjust:100% }
html.grand{ font-size:131.25% }
body{ margin:0; background:var(--papier); color:var(--encre); font:400 1rem/1.6 var(--sans) }
img{ max-width:100%; height:auto; display:block }
.nw{ white-space:nowrap }
a{ color:var(--cuivre); text-underline-offset:.18em }
a:hover{ color:var(--prune) }
:focus-visible{ outline:3px solid var(--violet); outline-offset:3px; border-radius:4px }
.enveloppe{ max-width:68rem; margin:0 auto; padding-inline:clamp(16px, 4vw, 32px) }
.saut{ position:absolute; left:-999px; top:8px; background:var(--prune); color:#fff; padding:8px 14px; border-radius:8px; z-index:9 }
.saut:focus{ left:12px }
.apercu{ background:var(--jaune); color:#2A1C23; text-align:center; font:600 .85rem/1.4 var(--sans); padding:8px 16px }

/* en-tête */
.tete{ border-bottom:1px solid var(--ligne); background:color-mix(in srgb, var(--papier) 92%, white) }
.tete .enveloppe{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 24px; padding-block:14px }
.marque{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--prune); margin-right:auto }
.marque svg{ width:38px; height:38px; flex:none }
.marque span{ font:600 1.05rem/1 var(--serif); letter-spacing:.32em; text-transform:uppercase }
.nav{ display:flex; flex-wrap:wrap; gap:4px 18px; align-items:center }
.nav a{ color:var(--encre-2); text-decoration:none; font-weight:600; font-size:.92rem; padding:6px 0 }
.nav a:hover, .nav a[aria-current]{ color:var(--prune); text-decoration:underline }
.taille{ border:1px solid var(--ligne); background:var(--papier-2); color:var(--encre); border-radius:999px; font:600 .85rem/1 var(--sans); padding:8px 12px; cursor:pointer }
.taille:hover{ border-color:var(--encre-2) }

/* titres */
h1, h2, h3{ font-family:var(--serif); font-weight:600; color:var(--prune); line-height:1.15; text-wrap:balance; margin:0 }
h1{ font-size:clamp(2rem, 5.2vw, 3.3rem); letter-spacing:-.01em }
h2{ font-size:clamp(1.5rem, 3.2vw, 2.1rem) }
h3{ font-size:1.2rem }
.chapeau{ font:italic 400 clamp(1.15rem, 2.2vw, 1.4rem)/1.45 var(--serif); color:var(--encre-2); max-width:36em; margin:0 }
.sur-titre{ font:700 .72rem/1.2 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--cuivre); margin:0 0 10px }
.bloc{ padding-block:clamp(40px, 7vw, 76px) }
.bloc + .bloc{ border-top:1px solid var(--ligne) }
.pile{ display:grid; gap:18px }
.texte{ max-width:38em }
.texte p{ margin:0 0 1em }

/* boutons */
.btns{ display:flex; flex-wrap:wrap; gap:10px; align-items:center }
.btn{ display:inline-flex; align-items:center; gap:8px; padding:13px 20px; border-radius:999px; font:700 .95rem/1 var(--sans); text-decoration:none; border:1.5px solid var(--prune); color:var(--prune); background:transparent }
.btn:hover{ background:var(--prune); color:#fff }
.btn.plein{ background:var(--prune); color:#fff }
.btn.plein:hover{ background:var(--encre) }

/* accueil */
.une{ display:grid; grid-template-columns:minmax(0, 1.15fr) minmax(0, .85fr); gap:clamp(28px, 5vw, 64px); align-items:center }
.grille{ margin:0 }
.feuilles{ position:relative; perspective:1600px; transform-style:preserve-3d }
.feuille{ background:var(--papier-2); border:1px solid var(--ligne); border-radius:var(--r); padding:clamp(14px, 2.5vw, 22px); box-shadow:0 18px 40px -28px rgba(74,39,52,.45);
  transform-origin:left center; backface-visibility:hidden; transition:transform .9s cubic-bezier(.45,.05,.3,1), opacity .9s }
.feuille.dessous{ position:absolute; inset:0; box-shadow:none }
.feuille.dessus{ position:relative; z-index:2 }
.feuille.tourne{ transform:rotateY(-105deg); opacity:.2 }
.feuille.fixe{ transition:none }
.grille .a-trouver{ margin:12px 0 4px; font:700 .68rem/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--cuivre); text-align:center }
.grille .mots{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:2px 12px; min-height:2.7em;
  font:600 .8rem/1.3 var(--sans); letter-spacing:.05em; color:var(--discret) }
.grille .mots li{ aspect-ratio:auto; display:inline; font:inherit; transition:color .3s }
.grille .mots li.trouve{ color:var(--encre); text-decoration:line-through; text-decoration-color:var(--jaune); text-decoration-thickness:.32em }
.grille ol{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(9, 1fr); gap:2px }
.grille ol li{ aspect-ratio:1; display:grid; place-items:center; font:700 clamp(.9rem, 2.4vw, 1.35rem)/1 var(--sans); color:var(--encre-2); transition:background-color .18s, color .18s }
.grille li.m{ background:var(--jaune); color:var(--encre) }
.grille li.m.d{ border-radius:999px 0 0 999px } .grille li.m.f{ border-radius:0 999px 999px 0 }
.grille li.m.h{ border-radius:999px 999px 0 0 } .grille li.m.b{ border-radius:0 0 999px 999px }
.lien{ border:0; background:none; padding:0; font:inherit; color:var(--cuivre); text-decoration:underline; text-underline-offset:.18em; cursor:pointer }
.atouts{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(18px, 3vw, 36px); margin-top:8px }
.atouts h3{ margin-bottom:6px }
.atouts p{ margin:0; color:var(--encre-2) }
.famille{ display:grid; gap:22px }
.famille + .famille{ margin-top:clamp(36px, 6vw, 60px) }
.livres{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap:clamp(18px, 3vw, 32px) }
.livre{ display:grid; grid-template-rows:auto 1fr; gap:14px; min-width:0 }
.livre .couv{ background:var(--papier-3); border-radius:6px; padding:16px; display:grid; place-items:center }
.livre .couv img{ max-height:20rem; width:auto; box-shadow:0 14px 24px -16px rgba(42,28,35,.6); border-radius:2px }
.livre h3 a{ color:inherit; text-decoration:none }
.livre h3 a:hover{ text-decoration:underline }
.livre p{ margin:6px 0 12px; color:var(--encre-2); font-size:.95rem }
.livre .meta{ font-size:.8rem; color:var(--discret); margin:0 0 4px; letter-spacing:.02em }
.encart{ background:var(--prune); color:#F6E9EE; border-radius:var(--r); padding:clamp(22px, 4vw, 40px); display:grid; grid-template-columns:minmax(0, 1.4fr) auto; gap:20px 36px; align-items:center }
.encart h2{ color:#fff }
.encart p{ margin:10px 0 0; color:#E9D6DD }
.encart .btn{ border-color:#fff; color:#fff }
.encart .btn:hover{ background:#fff; color:var(--prune) }

/* fiche livre */
.fil{ font-size:.85rem; color:var(--discret); margin:0 0 18px }
.fil a{ color:inherit }
.fiche{ display:grid; grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr); gap:clamp(24px, 5vw, 60px); align-items:start }
.fiche .couv{ background:var(--papier-3); border-radius:var(--r); padding:clamp(18px, 4vw, 36px); display:grid; place-items:center; position:sticky; top:16px }
.fiche .couv img{ box-shadow:0 20px 34px -20px rgba(42,28,35,.65); border-radius:2px }
.faits{ display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none }
.faits li{ border:1px solid var(--ligne); background:var(--papier-2); border-radius:999px; padding:6px 12px; font-size:.85rem; color:var(--encre-2) }
.description{ max-width:38em }
.description p{ margin:0 0 1em }
.description ul{ margin:0 0 1em; padding-left:1.2em }
.description li{ margin:.25em 0 }
.vues{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(12px, 2.5vw, 24px) }
.vues figure{ margin:0; display:grid; gap:10px }
.vues img{ border-radius:10px; border:1px solid var(--ligne); width:100% }
.vues figcaption{ font:600 .95rem/1.35 var(--serif); color:var(--prune) }
.note{ font-size:.88rem; color:var(--discret) }

/* pages de texte */
.page{ max-width:44em }
.page h2{ font-size:1.35rem; margin:1.8em 0 .5em }
.page p, .page li{ color:var(--encre-2) }
.etapes{ counter-reset:e; list-style:none; padding:0; margin:0; display:grid; gap:14px }
.etapes li{ counter-increment:e; display:grid; grid-template-columns:2.4rem minmax(0,1fr); gap:12px; align-items:start }
.etapes li::before{ content:counter(e); width:2.2rem; height:2.2rem; border-radius:50%; background:var(--jaune); color:var(--encre); display:grid; place-items:center; font:700 1rem/1 var(--sans) }
.coord{ background:var(--papier-2); border:1px solid var(--ligne); border-radius:var(--r); padding:18px 22px; display:grid; gap:6px; overflow-wrap:anywhere }
.lettre{ background:var(--papier-2); border:1px solid var(--ligne); border-radius:var(--r); padding:clamp(20px, 3vw, 30px); display:grid; gap:12px }
.lettre form{ display:flex; flex-wrap:wrap; gap:10px }

/* pied */
.pied{ border-top:1px solid var(--ligne); margin-top:clamp(32px, 6vw, 64px) }
.pied .enveloppe{ display:flex; flex-wrap:wrap; gap:10px 28px; padding-block:26px; font-size:.85rem; color:var(--discret) }
.pied a{ color:inherit }
.pied .fin{ flex-basis:100%; margin:0 }

@media (max-width: 760px){
  .une, .fiche, .encart{ grid-template-columns:minmax(0, 1fr) }
  .fiche .couv{ position:static }
  .fiche .couv img{ max-height:26rem; width:auto }
  .atouts, .vues{ grid-template-columns:minmax(0, 1fr) }
  .vues img{ max-width:26rem }
}