/* ==================================================================
   Éditions Tête Chercheuse
   Le code des couvertures — titre bicolore à contour, badges, aplats —
   est réservé aux BLOCS ILLUSTRÉS. Le mobilier du site reste celui d'un
   éditeur : Zilla Slab, filets fins, papier, respiration.
   Chaque collection est représentée par une MINIATURE DE PAGE, pas par
   une icône : la maison se juge sur sa fabrication, il faut la montrer.
   ================================================================== */
:root{
  --teal:#0A3F4B;
  --teal-clair:#0F6E7E;
  --nuit:#052A33;
  --or:#FFC531;
  --or-sombre:#A8791A;
  --creme:#FFF4E0;
  --papier:#FAF6EC;
  --papier-2:#F3EDDF;
  --corail:#E1573A;
  --encre:#17262C;
  --gris:#586870;
  --gris-clair:#8B989E;
  --filet:#E0D7C5;

  --titre:'Zilla Slab',Georgia,'Times New Roman',serif;
  --texte:'Karla',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--papier);color:var(--encre);
  font-family:var(--texte);font-size:17px;line-height:1.68;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
/* grain de papier, très discret, sur toute la page */
body::after{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--titre);font-weight:600;line-height:1.14;margin:0;letter-spacing:-.008em}
p{margin:0 0 1.1em}
a{color:var(--teal-clair)}
.wrap{width:min(1160px,100% - 2.6rem);margin-inline:auto;position:relative;z-index:2}
.narrow{width:min(700px,100% - 2.6rem);margin-inline:auto;position:relative;z-index:2}
:focus-visible{outline:3px solid var(--or);outline-offset:3px;border-radius:3px}

.eyebrow{
  font-family:var(--texte);font-size:.72rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--teal-clair);
  margin:0 0 .9rem;display:flex;align-items:center;gap:.7rem;
}
.eyebrow::after{content:"";height:1px;flex:1;background:var(--filet);max-width:90px}
.sec-head.center .eyebrow{justify-content:center}
.sec-head.center .eyebrow::before{content:"";height:1px;flex:1;background:var(--filet);max-width:90px}
.on-dark .eyebrow{color:var(--or)}
.on-dark .eyebrow::after,.on-dark .eyebrow::before{background:rgba(255,197,49,.35)}

/* ---------------- EN-TÊTE ---------------- */
.site-header{
  position:sticky;top:0;z-index:60;background:var(--nuit);
  border-bottom:1px solid rgba(255,244,224,.14);
}
.site-header .wrap{display:flex;align-items:center;gap:1.5rem;min-height:72px}
.brand{display:inline-flex;align-items:center;gap:.75rem;text-decoration:none;color:var(--creme);margin-right:auto}
.brand-txt{display:flex;flex-direction:column;line-height:1.06}
.brand-txt em{
  font-family:var(--texte);font-style:normal;font-size:.58rem;font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;color:var(--or);
}
.brand-txt strong{font-family:var(--titre);font-weight:600;font-size:1.17rem;letter-spacing:-.012em}
.nav{display:flex;align-items:center;gap:1.9rem}
.nav a{
  font-size:.93rem;font-weight:500;color:#C0CCD0;text-decoration:none;
  padding:.3rem 0;border-bottom:2px solid transparent;white-space:nowrap;
  transition:color .15s,border-color .15s;
}
.nav a:hover{color:var(--creme);border-bottom-color:var(--or)}
.nav .nav-cta{border:1.5px solid rgba(255,244,224,.3);border-radius:100px;padding:.45rem 1.05rem;color:var(--creme)}
.nav .nav-cta:hover{background:var(--or);border-color:var(--or);color:var(--nuit)}
.nav-toggle{display:none;background:none;border:0;color:var(--creme);padding:.4rem;cursor:pointer}
@media (max-width:900px){
  .nav-toggle{display:block}
  .site-header .wrap{position:relative}
  .nav{
    display:none;position:absolute;top:100%;left:-1.3rem;right:-1.3rem;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--nuit);padding:.4rem 1.3rem 1.2rem;
    border-bottom:1px solid rgba(255,244,224,.14);
  }
  .nav.open{display:flex}
  .nav a{padding:.85rem 0;border-bottom:1px solid rgba(255,244,224,.1)}
  .nav .nav-cta{margin-top:.9rem;text-align:center}
}

/* ---------------- SECTIONS ---------------- */
section{padding:5.5rem 0;position:relative}
.on-dark{background:var(--teal);color:var(--creme);overflow:hidden}
.on-dark h2,.on-dark h3{color:var(--creme)}
.band-2{background:var(--papier-2)}
.sec-head{max-width:640px;margin-bottom:3rem}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head h2{font-size:clamp(1.85rem,4vw,2.7rem);margin-bottom:.8rem}
.sec-head p{color:var(--gris);font-size:1.07rem;margin:0}
.on-dark .sec-head p{color:#B4C2C7}

/* ---------------- HÉROS ---------------- */
.hero{overflow:hidden;padding:4.5rem 0 5rem}
/* Le fond du heros est un champ de lettres — la matiere de la maison —
   plutot qu'un halo de rayons, qui ne veut rien dire ici. */
.letterfield{
  position:absolute;inset:0;z-index:0;pointer-events:none;user-select:none;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(38px,1fr));
  align-content:start;gap:0;overflow:hidden;
  font-family:var(--titre);font-weight:500;font-size:1.05rem;color:var(--creme);
  -webkit-mask-image:radial-gradient(120% 90% at 68% 30%,#000 0%,rgba(0,0,0,.55) 45%,transparent 78%);
          mask-image:radial-gradient(120% 90% at 68% 30%,#000 0%,rgba(0,0,0,.55) 45%,transparent 78%);
}
.letterfield span{opacity:.085;text-align:center;line-height:2.35}
.hero-glow{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(52% 46% at 24% 34%,rgba(10,63,75,.92) 0%,rgba(10,63,75,.55) 55%,transparent 80%);
}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:3.6rem;align-items:center}
.kicker{
  display:flex;align-items:center;gap:.85rem;margin:0 0 1.5rem;
  font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--or);
}
.kicker::before{content:"";width:34px;height:1px;background:var(--or);flex:none}
.hero h1{
  font-family:var(--titre);font-weight:600;
  font-size:clamp(2.05rem,5.6vw,4.3rem);line-height:1.04;
  letter-spacing:-.022em;margin-bottom:1.6rem;color:var(--creme);
  text-wrap:balance;
}
.hero h1 .mot{position:relative;color:var(--or);white-space:nowrap;display:inline-block}
.hero h1 .mot svg{
  position:absolute;left:0;right:0;bottom:-.16em;width:100%;height:.19em;overflow:visible;
}
.hero .lead{font-size:1.13rem;color:#C4D1D5;max-width:40ch;margin-bottom:2rem}
.hero-note{
  display:flex;align-items:center;gap:.55rem;margin:1.4rem 0 0;
  font-size:.85rem;color:#9DAFB4;
}
.hero-note i{width:7px;height:7px;border-radius:50%;background:var(--or);flex:none}
.hero .lead b{color:var(--creme);font-weight:600}
.hero-cta{display:flex;flex-wrap:wrap;gap:.85rem;align-items:center}
.btn{
  display:inline-block;font-family:var(--texte);font-weight:600;font-size:.98rem;
  text-decoration:none;padding:.82rem 1.55rem;border-radius:100px;
  transition:background-color .16s,color .16s,border-color .16s;
}
.btn-or{background:var(--or);color:var(--nuit)}
.btn-or:hover{background:var(--creme)}
.btn-ghost{border:1.5px solid rgba(255,244,224,.3);color:var(--creme)}
.btn-ghost:hover{border-color:var(--or);color:var(--or)}

/* ---------------- LA GRILLE DU HÉROS ---------------- */
.specimen{position:relative}
/* feuille posee derriere : le specimen se lit comme un cahier, pas comme un encart */
.specimen::before{
  content:"";position:absolute;inset:14px -12px -14px 12px;border-radius:10px;
  background:rgba(255,244,224,.14);transform:rotate(2.2deg);
}
.grid-panel{
  position:relative;background:var(--creme);border-radius:10px;
  padding:1.25rem;box-shadow:0 22px 44px rgba(0,0,0,.34),0 2px 0 rgba(255,255,255,.35) inset;
  transform:rotate(-1.1deg);
}
.spec-caption{
  position:relative;margin:1.15rem 0 0;text-align:center;
  font-size:.79rem;color:#9DAFB4;line-height:1.5;
}
.spec-caption b{color:var(--creme);font-weight:600}
.grid-tag{
  position:absolute;top:-12px;left:16px;background:var(--or);color:var(--nuit);
  font-family:var(--texte);font-weight:700;font-size:.64rem;letter-spacing:.13em;
  text-transform:uppercase;padding:.26rem .78rem;border-radius:100px;
  box-shadow:0 4px 10px rgba(0,0,0,.25);
}
.ws{display:grid;grid-template-columns:repeat(11,1fr);gap:2px;font-family:var(--titre);font-weight:600}
.ws b{
  aspect-ratio:1;display:grid;place-items:center;border-radius:5px;
  font-size:clamp(.72rem,1.85vw,1.02rem);color:#3B4A50;
  transition:background-color .28s ease,color .28s ease;
}
.ws b.on{color:#fff;background:var(--hl)}
.ws-words{display:flex;flex-wrap:wrap;gap:.35rem;margin:1rem 0 0;padding:.85rem 0 0;border-top:1px solid #DCD0B4}
.ws-words span{
  font-size:.69rem;font-weight:700;letter-spacing:.09em;color:#938870;
  border:1px solid #DCD0B4;border-radius:100px;padding:.14rem .55rem;
  transition:background-color .3s ease,color .3s ease,border-color .3s ease;
}
.ws-words span.found{color:#fff;border-color:transparent}

/* ---------------- COLLECTIONS : miniatures de pages ---------------- */
/* cinq collections : jamais de carte seule sur sa ligne.
   5 colonnes en large, 3 en intermediaire (3+2), 1 sur telephone. */
.cols{display:grid;grid-template-columns:1fr;gap:1.5rem}
@media (min-width:660px){.cols{grid-template-columns:repeat(3,1fr);gap:1.3rem}}
@media (min-width:1060px){.cols{grid-template-columns:repeat(5,1fr);gap:1.15rem}}
.col{
  background:#fff;border:1px solid var(--filet);border-radius:10px;
  overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 1px 2px rgba(23,38,44,.05),0 10px 26px rgba(23,38,44,.07);
  transition:transform .2s ease,box-shadow .2s ease;
}
.col:hover{transform:translateY(-4px);box-shadow:0 2px 5px rgba(23,38,44,.08),0 20px 40px rgba(23,38,44,.12)}
.col-top{background:var(--cc);padding:1.5rem 1.4rem .1rem;overflow:hidden}
/* la miniature : une page de livre, pas une icône */
.page{
  background:#FFFCF4;border-radius:3px;padding:.75rem;
  box-shadow:0 6px 16px rgba(0,0,0,.28),0 1px 0 rgba(255,255,255,.5) inset;
  transform:rotate(-1.6deg);transform-origin:bottom center;
  aspect-ratio:4/3.1;display:flex;flex-direction:column;
}
.page-h{
  font-family:var(--texte);font-size:.44rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:#A99C7E;margin-bottom:.45rem;flex:none;
}
.page-b{flex:1;display:flex;align-items:center;justify-content:center;min-height:0}
/* mini-grille de lettres — dimensionnee par la HAUTEUR de la page,
   sinon elle deborde des que la carte s'elargit */
.mini-ws{
  display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(6,1fr);
  gap:1px;height:100%;aspect-ratio:7/6;margin-inline:auto;
}
.mini-ws i{
  display:grid;place-items:center;border-radius:2px;
  font-family:var(--titre);font-style:normal;font-weight:600;
  font-size:clamp(.4rem,1vw,.52rem);color:#4A5A61;min-width:0;
}
.mini-ws i.hi{background:var(--cc);color:#fff}
/* lignes de texte simulées */
.lines{width:100%;display:flex;flex-direction:column;gap:.28rem}
.lines s{display:block;height:3.5px;border-radius:2px;background:#D2C6AA;text-decoration:none}
.lines s.q{height:6px;background:var(--cc);width:78%;margin-bottom:.22rem}
.lines s.w1{width:100%}.lines s.w2{width:92%}.lines s.w3{width:64%}
/* suspects */
.susp{display:flex;gap:.4rem;width:100%;justify-content:center;align-items:flex-end}
.susp span{position:relative;display:block}
.susp svg{display:block}
.susp span.out::after{
  content:"";position:absolute;inset:-2px;
  background:linear-gradient(45deg,transparent 46%,var(--corail) 46% 54%,transparent 54%);
}
/* échelle de test */
.scale{width:100%;display:flex;flex-direction:column;gap:.42rem}
.scale div{display:flex;align-items:center;gap:.3rem}
.scale s{height:3px;border-radius:2px;background:#DDD3BC;flex:1;text-decoration:none}
.scale u{
  width:6px;height:6px;border-radius:50%;border:1px solid #C9BEA4;
  display:block;text-decoration:none;flex:none;
}
.scale u.on{background:var(--cc);border-color:var(--cc)}
/* labyrinthe */
.maze{width:100%}

.col-body{padding:1.3rem 1.4rem 1.4rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.col h3{font-size:1.12rem;line-height:1.2}
.col p{margin:0;font-size:.92rem;color:var(--gris);flex:1;line-height:1.6}
.col-age{
  align-self:flex-start;font-size:.71rem;font-weight:700;letter-spacing:.07em;
  color:var(--cc);border:1px solid currentColor;border-radius:100px;padding:.15rem .62rem;
}

/* ---------------- MÉTHODE ---------------- */
.methode-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:2rem 2.4rem}
#methode .hero-glow{background:radial-gradient(70% 60% at 78% 8%,rgba(255,197,49,.07),transparent 70%)}
.regle{position:relative;padding-left:2.6rem}
.regle .n{
  position:absolute;left:0;top:.1rem;font-family:var(--titre);font-weight:700;
  font-size:.86rem;color:var(--or);letter-spacing:.04em;
}
.regle h3{font-size:1.05rem;margin-bottom:.4rem}
.regle p{margin:0;font-size:.94rem;color:#B4C2C7;line-height:1.6}

/* la progression, montrée */
.ramp{
  margin-top:3.5rem;padding:2rem;border-radius:12px;
  background:rgba(255,244,224,.06);border:1px solid rgba(255,244,224,.15);
}
.ramp-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.8rem;margin-bottom:1.6rem}
.ramp-head h3{font-size:1.15rem}
.ramp-head span{font-size:.9rem;color:#9FB0B6}
.ramp-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:1.4rem}
.step{text-align:center}
.step .g{
  display:grid;gap:1.5px;background:rgba(255,244,224,.1);padding:5px;border-radius:5px;
  margin:0 auto .8rem;width:min(100%,132px);
}
.step .g i{aspect-ratio:1;background:rgba(255,244,224,.22);border-radius:1px;display:block}
.step .g i.f{background:var(--or)}
.step b{display:block;font-family:var(--titre);font-size:.95rem;color:var(--creme);font-weight:600}
.step em{display:block;font-style:normal;font-size:.78rem;color:#93A5AB;margin-top:.15rem}

.methode-note{
  margin-top:2.4rem;padding:1.7rem 1.9rem;border-radius:12px;
  background:rgba(0,0,0,.16);border-left:3px solid var(--or);
}
.methode-note p{margin:0;color:#C0CDD1;font-size:.98rem}
.methode-note strong{color:var(--creme)}

/* ---------------- PARENTS ---------------- */
.conseils{display:grid;grid-template-columns:repeat(auto-fit,minmax(265px,1fr));gap:1.6rem}
.conseil{
  background:#fff;border:1px solid var(--filet);border-radius:10px;padding:1.7rem;
  box-shadow:0 1px 2px rgba(23,38,44,.04);
}
.conseil .num{
  font-family:var(--texte);font-weight:700;font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--corail);display:block;margin-bottom:.8rem;
}
.conseil h3{font-size:1.05rem;margin-bottom:.5rem;line-height:1.25}
.conseil p{margin:0;font-size:.93rem;color:var(--gris);line-height:1.62}

/* ---------------- LA MAISON ---------------- */
.apropos h2{font-size:clamp(1.85rem,4vw,2.7rem);margin-bottom:1.4rem}
.apropos p{color:var(--gris);font-size:1.08rem}
.apropos p.intro::first-letter{
  float:left;font-family:var(--titre);font-weight:700;font-size:3.4rem;
  line-height:.82;color:var(--or-sombre);margin:.14em .12em 0 0;
}
.apropos .signature{
  margin-top:2.2rem;padding-top:1.5rem;border-top:1px solid var(--filet);
  font-size:.92rem;color:var(--gris-clair);
}

/* ---------------- PIED DE PAGE ---------------- */
.site-footer{background:var(--nuit);color:#A5B4BA;padding:3.8rem 0 0;font-size:.94rem;position:relative;z-index:2}
.footer-grid{display:grid;grid-template-columns:1.8fr 1fr 1fr 1.2fr;gap:2.8rem;padding-bottom:2.8rem}
.site-footer h4{
  font-family:var(--texte);font-size:.7rem;font-weight:700;letter-spacing:.17em;
  text-transform:uppercase;color:var(--creme);margin:0 0 1.1rem;
}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin-bottom:.58rem}
.site-footer a{color:#A5B4BA;text-decoration:none;transition:color .15s}
.site-footer a:hover{color:var(--or)}
.footer-brand p{margin:1.1rem 0 0;max-width:34ch;color:#8FA0A7;font-size:.92rem}
.footer-bottom{
  border-top:1px solid rgba(255,244,224,.12);padding:1.5rem 0 2.2rem;
  display:flex;flex-wrap:wrap;gap:.6rem 1.8rem;justify-content:space-between;
  font-size:.79rem;color:#75868C;
}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:2.6rem}
  .hero .lead{max-width:none}
  /* sans bornage, la grille du heros passe a 60 px la tuile sur tablette */
  .specimen{max-width:430px;margin-inline:auto;width:100%}
  /* le champ de lettres concurrence le texte sur une colonne etroite */
  .letterfield span{opacity:.05}
  .letterfield{
    -webkit-mask-image:radial-gradient(150% 55% at 50% 6%,#000 0%,rgba(0,0,0,.4) 40%,transparent 72%);
            mask-image:radial-gradient(150% 55% at 50% 6%,#000 0%,rgba(0,0,0,.4) 40%,transparent 72%);
  }
  .hero-glow{background:radial-gradient(90% 55% at 50% 30%,rgba(10,63,75,.95) 0%,rgba(10,63,75,.7) 55%,transparent 85%)}
  .footer-grid{grid-template-columns:1fr 1fr;gap:2.2rem}
}
@media (max-width:520px){
  section{padding:3.6rem 0}
  .footer-grid{grid-template-columns:1fr}
  .grid-panel{transform:none;padding:.85rem}
  .ramp{padding:1.3rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ws b,.ws-words span,.col{transition:none}
}

/* ==================================================================
   Pages intérieures — bandeau de titre et mise en page d'article
   ================================================================== */
.page-head{
  background:var(--teal);color:var(--creme);
  padding:3.6rem 0 3.8rem;position:relative;overflow:hidden;
}
.page-head .hero-glow{
  background:radial-gradient(60% 70% at 80% 10%,rgba(255,197,49,.09),transparent 72%);
}
.page-head h1{
  font-family:var(--titre);font-weight:600;
  font-size:clamp(1.95rem,4.6vw,3.1rem);line-height:1.06;
  letter-spacing:-.02em;margin:0 0 1rem;text-wrap:balance;max-width:20ch;
}
.page-head .lead{
  font-size:1.12rem;color:#C4D1D5;max-width:56ch;margin:0;
}
.page-head .kicker{margin-bottom:1.2rem}

/* fil d'ariane discret */
.ariane{
  font-size:.83rem;color:#8FA3A9;margin:0 0 1.4rem;
}
.ariane a{color:#B6C6CB;text-decoration:none}
.ariane a:hover{color:var(--or)}

/* corps d'article */
.article{padding:4.5rem 0}
.article h2{font-size:clamp(1.4rem,2.8vw,1.9rem);margin:2.8rem 0 .9rem}
.article h2:first-child{margin-top:0}
.article h3{font-size:1.1rem;margin:1.8rem 0 .5rem}
.article p,.article li{color:var(--gris);font-size:1.04rem}
.article ul{padding-left:1.25rem;margin-bottom:1.3rem}
.article li{margin-bottom:.5rem}
.article strong{color:var(--encre)}
.article table{width:100%;border-collapse:collapse;margin:1.7rem 0;font-size:.96rem}
.article th,.article td{text-align:left;padding:.72rem .85rem;border-bottom:1px solid var(--filet);vertical-align:top}
.article th{
  font-family:var(--texte);font-size:.7rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--gris-clair);
}
.article td{color:var(--gris)}
.article .encadre{
  background:#fff;border:1px solid var(--filet);border-left:3px solid var(--or);
  border-radius:0 10px 10px 0;padding:1.4rem 1.6rem;margin:2rem 0;
}
.article .encadre p{margin:0;font-size:.99rem}
.article .encadre p + p{margin-top:.8rem}

/* bloc « à compléter » — visible exprès */
.a-completer{
  background:#FFF6DC;border:1px dashed #C99A2E;border-radius:10px;
  padding:1.2rem 1.4rem;margin:1.6rem 0;font-size:.95rem;color:#6B4E10;
}
.a-completer::before{
  content:"Information en cours de publication";
  display:block;font-family:var(--texte);font-size:.66rem;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:#A87A16;margin-bottom:.45rem;
}
.a-completer p{margin:0;color:#6B4E10;font-size:.95rem}

/* ---------- collection en pleine page ---------- */
.coll-bloc{
  display:grid;grid-template-columns:260px 1fr;gap:2.8rem;align-items:start;
  padding:2.8rem 0;border-top:1px solid var(--filet);
}
.coll-bloc:first-of-type{border-top:0;padding-top:1rem}
.coll-visuel{background:var(--cc);border-radius:12px;padding:1.6rem 1.5rem .1rem;overflow:hidden}
.coll-corps h2{font-size:1.6rem;margin:0 0 .3rem}
.coll-meta{
  display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.1rem;padding:0;list-style:none;
}
.coll-meta li{
  font-size:.74rem;font-weight:700;letter-spacing:.06em;
  border-radius:100px;padding:.18rem .7rem;color:#fff;background:var(--cc);
}
.coll-meta li.creux{background:transparent;color:var(--cc);border:1px solid currentColor}
.coll-promesse{font-family:var(--titre);font-size:1.16rem;color:var(--encre);margin:0 0 .9rem}
.coll-corps p{color:var(--gris);font-size:1rem}
.coll-regle{
  margin-top:1.2rem;padding:1rem 1.2rem;background:#fff;
  border:1px solid var(--filet);border-radius:10px;
}
.coll-regle b{
  display:block;font-family:var(--texte);font-size:.68rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--cc);margin-bottom:.35rem;
}
.coll-regle p{margin:0;font-size:.95rem}
@media (max-width:820px){
  .coll-bloc{grid-template-columns:1fr;gap:1.6rem}
  .coll-visuel{max-width:300px}
}

/* ---------- teasers de la page d'accueil ---------- */
.teaser-foot{margin-top:2.4rem;display:flex;flex-wrap:wrap;gap:.9rem;align-items:center}
.lien-fort{
  font-family:var(--texte);font-weight:600;font-size:.98rem;text-decoration:none;
  color:var(--teal-clair);border-bottom:2px solid var(--or);padding-bottom:.15rem;
}
.on-dark .lien-fort{color:var(--creme)}
.lien-fort:hover{border-bottom-color:currentColor}

/* ---------- appel final ---------- */
.cloture{
  background:var(--nuit);border-radius:16px;padding:2.6rem;margin:0 0 -2rem;
  display:grid;grid-template-columns:1fr auto;gap:1.8rem;align-items:center;
}
.cloture h2{font-family:var(--titre);font-weight:600;font-size:clamp(1.35rem,2.8vw,1.9rem);color:var(--creme);margin:0 0 .5rem}
.cloture p{margin:0;color:#A2B2B8;max-width:52ch;font-size:.99rem}
@media (max-width:760px){.cloture{grid-template-columns:1fr;padding:1.8rem}}

/* état actif de la navigation */
.nav a.actif{color:var(--creme);border-bottom-color:var(--or)}
/* les cartes de collection de l'accueil sont des liens */
a.col{text-decoration:none;color:inherit}
a.col h3{color:var(--encre)}

/* ==================================================================
   Héros — feuilletage des cinq collections
   Une page de chaque collection, chacune avec sa propre animation.
   La grille de mots mêlés n'est qu'une des cinq.
   ================================================================== */
.showcase{
  position:relative;background:var(--creme);border-radius:10px;
  padding:1.3rem;transform:rotate(-1.1deg);
  box-shadow:0 22px 44px rgba(0,0,0,.34),0 2px 0 rgba(255,255,255,.35) inset;
}
/* La pastille chevauche le bord du panneau : moitie sur le fond teal du
   heros, moitie sur la page creme. Un fond a la couleur de collection
   disparaissait donc dans le heros pour la collection Mots Meles, dont la
   couleur EST le teal du fond. Fond creme constant, couleur de collection
   portee par le texte et le liseré : lisible sur les deux fonds, pour les
   cinq collections. */
.sc-tag{
  position:absolute;top:-12px;left:16px;z-index:3;
  background:var(--creme);color:var(--sc,#0A3F4B);
  font-family:var(--texte);font-weight:700;font-size:.64rem;letter-spacing:.13em;
  text-transform:uppercase;padding:.3rem .85rem;border-radius:100px;
  box-shadow:inset 0 0 0 1.5px var(--sc,#0A3F4B),0 5px 14px rgba(0,0,0,.32);
  transition:color .45s ease,box-shadow .45s ease;white-space:nowrap;
}
.sc-stage{position:relative;aspect-ratio:1/.86}
.slide{
  position:absolute;inset:0;opacity:0;pointer-events:none;
  display:flex;flex-direction:column;justify-content:center;
  transform:translateY(12px) scale(.985);
  transition:opacity .45s ease,transform .45s ease;
}
.slide.is-on{opacity:1;transform:none;pointer-events:auto}

/* --- 1. mots mêlés : la grille existante --- */
.slide .ws{gap:2px}

/* --- 2. sans écran : labyrinthe dont le tracé se dessine --- */
.sc-maze{width:100%;height:auto}
.sc-maze .trace{
  stroke-dasharray:420;stroke-dashoffset:420;
}
.slide.is-on .sc-maze .trace{
  animation:tracer 2.6s ease-out .25s forwards;
}
@keyframes tracer{to{stroke-dashoffset:0}}

/* --- 3. enfants curieux : question puis réponse --- */
.q-num{
  font-family:var(--texte);font-size:.62rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:#A99C7E;margin:0 0 .7rem;
}
.q-txt{
  font-family:var(--titre);font-weight:600;font-size:1.32rem;line-height:1.2;
  color:#1F2E34;margin:0 0 .8rem;
}
.q-rep{
  font-size:.9rem;line-height:1.62;color:#5B6970;margin:0;
  opacity:0;transform:translateY(6px);transition:opacity .5s ease,transform .5s ease;
}
.slide.is-on .q-rep{opacity:1;transform:none;transition-delay:.5s}
.q-rep b{color:#1F2E34;font-weight:600}

/* --- 4. enquêtes : les suspects s'éliminent un par un --- */
.sc-susp{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem .5rem;justify-items:center}
.sc-susp figure{margin:0;position:relative;width:46px}
.sc-susp svg{display:block;width:100%;height:auto}
.sc-susp .barre{
  position:absolute;inset:2px 0;opacity:0;
  background:linear-gradient(45deg,transparent 45%,var(--corail) 45% 55%,transparent 55%);
}
.slide.is-on .sc-susp .barre{animation:barrer .35s ease forwards}
.slide.is-on .sc-susp figure:nth-child(1) .barre{animation-delay:.5s}
.slide.is-on .sc-susp figure:nth-child(2) .barre{animation-delay:.9s}
.slide.is-on .sc-susp figure:nth-child(4) .barre{animation-delay:1.3s}
.slide.is-on .sc-susp figure:nth-child(5) .barre{animation-delay:1.7s}
.slide.is-on .sc-susp figure:nth-child(6) .barre{animation-delay:2.1s}
@keyframes barrer{from{opacity:0;transform:scaleX(.4)}to{opacity:1;transform:none}}
.sc-verdict{
  text-align:center;margin:.8rem 0 0;font-size:.8rem;color:#8A8069;
  opacity:0;transition:opacity .4s ease;
}
.slide.is-on .sc-verdict{opacity:1;transition-delay:2.5s}
.sc-verdict b{color:#2E5EAA}

/* --- 5. tests : une réponse se coche, un profil apparaît --- */
.sc-test{display:flex;flex-direction:column;gap:.75rem}
.sc-test .ligne{display:flex;align-items:center;gap:.45rem}
.sc-test .ligne s{height:4px;border-radius:2px;background:#D8CCB2;flex:1;text-decoration:none}
.sc-test .ligne u{
  width:11px;height:11px;border-radius:50%;border:1.5px solid #C9BEA4;flex:none;
  text-decoration:none;transition:background-color .3s ease,border-color .3s ease;
}
.slide.is-on .sc-test .ligne u.rep{background:#B04180;border-color:#B04180}
.slide.is-on .sc-test .ligne:nth-child(1) u.rep{transition-delay:.45s}
.slide.is-on .sc-test .ligne:nth-child(2) u.rep{transition-delay:.8s}
.slide.is-on .sc-test .ligne:nth-child(3) u.rep{transition-delay:1.15s}
.slide.is-on .sc-test .ligne:nth-child(4) u.rep{transition-delay:1.5s}
.sc-profil{
  margin-top:.4rem;padding:.6rem .85rem;border-radius:8px;background:#F6EAF1;
  font-size:.82rem;color:#7A2B57;opacity:0;transform:translateY(6px);
  transition:opacity .4s ease,transform .4s ease;
}
.slide.is-on .sc-profil{opacity:1;transform:none;transition-delay:1.9s}
.sc-profil b{font-weight:700}

/* --- pastilles de navigation --- */
.sc-dots{display:flex;gap:.45rem;justify-content:center;margin-top:1rem}
.sc-dots button{
  width:9px;height:9px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,244,224,.28);transition:background-color .25s ease,transform .25s ease;
}
.sc-dots button:hover{background:rgba(255,244,224,.6)}
.sc-dots button[aria-current="true"]{background:var(--or);transform:scale(1.25)}

@media (prefers-reduced-motion:reduce){
  .slide,.q-rep,.sc-verdict,.sc-profil,.sc-test .ligne u{transition:none}
  .slide.is-on .sc-maze .trace{animation:none;stroke-dashoffset:0}
  .slide.is-on .sc-susp .barre{animation:none;opacity:1}
}