/* ------------------------------------------------------------------
   Ligne « Histoires illustrées » — MÊME charte que le reste du site.
   Cette ligne avait au départ un thème à part (kraft, vert forêt,
   sérif Gloock). Décision Cyril du 06/08 : une seule marque, un seul
   design. Couleurs, polices, boutons, en-tête et pied de page sont
   désormais ceux d'iev.css.

   Le fichier reste AUTONOME (il ne charge pas iev.css) : les deux
   feuilles partagent des noms de classe (.carte, .bande, .visuel,
   .puce, .prix…) et les faire cohabiter donnerait un rendu hybride
   imprévisible. Les valeurs, elles, sont copiées à l'identique.
   Les anciens noms de variables (--kraft, --foret, --encre…) sont
   conservés en ALIAS : les styles en ligne des trois pages les
   utilisent encore, et ils pointent maintenant vers la charte.
   ------------------------------------------------------------------ */
:root{
  /* tokens du site (iev.css, thème « Dégradé pro ») */
  --bg:#FFF9F5; --surface:#FFFFFF; --ink:#2B2440; --sub:#6A6480;
  --line:#EFE6DD; --brand:#F2704A;
  --cta:linear-gradient(135deg,#FF9A5A,#F2668A);
  --accent:#7C6BF0; --gold:#E4922E;
  --heroBg:linear-gradient(140deg,#FFE8D6,#FFF0F5 55%,#EFEAFF);
  --chipBg:#FFFFFF; --chipInk:#2B2440;
  --radius:24px; --max:1180px;

  /* alias hérités : consommés par les styles en ligne des pages */
  --kraft:var(--bg);
  --kraft-fonce:color-mix(in srgb,var(--brand) 7%,var(--bg));
  --encre:var(--ink);
  --encre-doux:var(--sub);
  --foret:var(--brand);
  --foret-clair:#FF9A5A;
  --terre:var(--brand);
  --miel:var(--gold);
  --ciel:var(--accent);
  --rose:#F2668A;
  --blanc:var(--surface);
  --trait:var(--line);
  --ombre:0 20px 44px rgba(20,16,40,.10);
  --r:18px;
  --titre:"Baloo 2",system-ui,sans-serif;
  --corps:"Nunito Sans",system-ui,-apple-system,Segoe UI,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--corps);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--titre);font-weight:800;line-height:1.12;margin:0 0 .4em;letter-spacing:-.01em}
h1{font-size:clamp(34px,5vw,54px);line-height:1.05}
h2{font-size:clamp(26px,3.6vw,40px)}
h3{font-size:21px}
p{margin:.4em 0 1em}
.wrap{max-width:var(--max);margin:0 auto;padding:0 26px}
.centre{text-align:center}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* L'en-tête et le méga-menu vivent dans css/nav.css, partagé avec iev.css. */

/* ---------- boutons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--cta);color:#fff;border:0;cursor:pointer;
  font-family:inherit;font-weight:800;font-size:17px;padding:16px 32px;border-radius:999px;
  box-shadow:0 12px 28px color-mix(in srgb,var(--brand) 42%,transparent);
  transition:transform .15s ease,filter .15s ease;text-align:center;line-height:1.15;
}
.btn:hover{transform:translateY(-2px);filter:brightness(.95)}
.btn.petit{padding:11px 22px;font-size:15px;box-shadow:0 8px 20px color-mix(in srgb,var(--brand) 40%,transparent)}
/* « principal » et « terre » sont les anciens noms : même bouton de marque. */
.btn.principal,.btn.terre{background:var(--cta);color:#fff}
/* Sur un aplat dégradé (bande d'appel), le bouton plein se noie : il passe en blanc. */
.bande.foret .btn,.bande.foret .btn.terre{background:#fff;color:var(--brand);box-shadow:0 14px 30px rgba(20,16,40,.22)}
.btn.clair,.btn.secondaire{background:transparent;color:var(--ink);box-shadow:none;
  border:2px solid color-mix(in srgb,var(--ink) 22%,transparent);font-size:16px;padding:15px 26px}
.btn.clair:hover,.btn.secondaire:hover{filter:none;border-color:var(--ink)}
.btn.large{width:100%}
.btn:disabled{opacity:.6;cursor:default;transform:none}
.pilule{display:inline-block;background:var(--cta);color:#fff;border-radius:999px;
  padding:11px 22px;font-weight:800;font-size:15px;
  box-shadow:0 8px 20px color-mix(in srgb,var(--brand) 40%,transparent)}

/* ---------- séparateurs ---------- */
/* Le site n'a pas de bords déchirés : les sections se distinguent par leur
   fond. Les classes restent définies (elles sont encore dans le HTML) mais
   ne dessinent plus rien. */
.dents,.vague{display:none}

/* ---------- fil d'ariane ---------- */
.fil{font-size:13px;color:var(--sub);padding:18px 0 2px;font-weight:600}
.fil a:hover{color:var(--ink);text-decoration:underline}

/* ---------- filtres par occasion ---------- */
.filtres{display:flex;gap:10px;overflow-x:auto;padding:6px 0 18px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.filtres::-webkit-scrollbar{display:none}
.filtre{
  flex:0 0 auto;background:var(--surface);border:2px solid var(--line);border-radius:999px;
  padding:11px 20px;font-family:inherit;font-weight:800;font-size:15px;cursor:pointer;
  white-space:nowrap;color:var(--ink);transition:all .15s;
}
.filtre:hover[aria-pressed="false"]{border-color:var(--brand)}
.filtre[aria-pressed="true"]{background:var(--cta);border-color:transparent;color:#fff}

/* ---------- héros du catalogue ---------- */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);gap:48px;
  align-items:center;padding:22px 0 40px}
.hero-vis{position:relative}
/* Un cadre carré où deux couvertures peuvent se superposer le temps d'un
   fondu (héros et cartes partagent ce mécanisme). */
.cadre{position:relative;aspect-ratio:1/1;width:100%;background:var(--line);overflow:hidden}
.cadre>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.cadre>img.entre{opacity:0;transition:opacity .55s ease}
.cadre>img.entre.visible{opacity:1}
.hero-cadre{border-radius:calc(var(--radius) + 6px);box-shadow:0 30px 70px rgba(20,16,40,.18)}
.hero-couv{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.hero-galerie{display:flex;gap:10px;justify-content:center;margin-top:-34px;position:relative}
.hero-galerie .visage{padding:0;border:0;background:none;border-radius:50%;cursor:pointer;
  transition:transform .18s ease}
.hero-galerie .visage img{width:68px;height:68px;border-radius:50%;object-fit:cover;display:block;
  border:3px solid var(--bg);box-shadow:0 10px 22px rgba(20,16,40,.22);background:var(--line);
  transition:border-color .18s ease,transform .18s ease}
.hero-galerie .visage:hover img{transform:scale(1.08)}
.hero-galerie .visage[aria-pressed="true"] img{border-color:var(--brand);transform:scale(1.14)}
.hero-galerie .visage:focus-visible{outline:3px solid var(--brand);outline-offset:3px}
.hero-legende{text-align:center;color:var(--sub);font-size:.9rem;margin:14px 0 0}
@media (max-width:860px){
  .hero{grid-template-columns:1fr;gap:26px}
  /* Sur mobile la promesse passe avant le visuel. */
  .hero>div:first-child{order:1}
  .hero-vis{order:2;max-width:420px;margin:0 auto}
}

/* ---------- grille du catalogue ---------- */
.grille{display:grid;gap:22px;grid-template-columns:repeat(auto-fill,minmax(288px,1fr));padding:8px 0 46px}
.carte{display:flex;flex-direction:column;color:inherit;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.carte:hover{transform:translateY(-5px);border-color:var(--brand);box-shadow:0 20px 44px rgba(20,16,40,.16)}
/* Le cadre d'une illustration est TOUJOURS carré, comme les pages du livre. */
.visuel{background:color-mix(in srgb,var(--brand) 7%,var(--bg));overflow:hidden;position:relative;
  aspect-ratio:1/1;display:grid;place-items:center;padding:22px}
.visuel .cadre{border-radius:8px;box-shadow:0 14px 30px rgba(20,16,40,.22);transition:transform .4s ease}
.carte:hover .visuel .cadre{transform:scale(1.04)}
.visuel .etiquette{position:absolute;top:14px;left:14px;background:var(--surface);color:var(--ink);
  font-weight:800;font-size:12px;letter-spacing:.02em;padding:6px 10px;border-radius:999px;
  box-shadow:0 6px 16px rgba(20,16,40,.14)}
.carte .corps{display:flex;flex-direction:column;flex:1;padding:16px 20px 20px}
.carte h3{margin:0 0 3px;font-size:19px}
.carte .sous{color:var(--sub);font-size:14px;margin:0 0 6px}
.carte .age{color:var(--sub);font-size:13px;margin:0 0 12px;font-weight:600}
.carte .bas{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto}
.carte .visages{display:flex;align-items:center}
.carte .visages img{width:26px;height:26px;border-radius:50%;object-fit:cover;border:2px solid var(--surface);
  margin-right:-8px;background:var(--line)}
.carte .visages em{font-style:normal;color:var(--sub);font-size:12px;font-weight:600;margin-left:14px;white-space:nowrap}
.carte .prix{font-weight:800;font-size:15px;color:var(--brand);margin:0;white-space:nowrap}
.carte .prix s{color:var(--sub);font-weight:600;margin-left:6px}
/* L'appel à lire est un vrai bouton visuel : c'est lui qui donne envie de
   cliquer, le prix seul n'invite à rien. */
.carte .cta{display:block;margin-top:14px;text-align:center;background:var(--cta);color:#fff;
  font-weight:800;font-size:14.5px;padding:12px 14px;border-radius:999px;
  box-shadow:0 10px 24px color-mix(in srgb,var(--brand) 28%,transparent);transition:transform .18s ease}
.carte:hover .cta{transform:translateY(-1px)}
/* Tuile éditoriale intercalée dans la grille. */
.tuile{background:var(--cta);color:#fff;border-radius:var(--radius);
  display:flex;flex-direction:column;justify-content:center;padding:34px;aspect-ratio:1/1;
  box-shadow:0 20px 46px color-mix(in srgb,var(--brand) 26%,transparent)}
.tuile p{font-family:var(--titre);font-weight:800;font-size:26px;line-height:1.2;margin:0}
.tuile small{display:block;margin-top:14px;opacity:.92;font-size:15px;line-height:1.55}
.tuile.miel{background:var(--surface);color:var(--ink);border:2px solid var(--brand);
  box-shadow:0 20px 46px color-mix(in srgb,var(--brand) 18%,transparent)}

/* ---------- page produit ---------- */
.produit{display:grid;gap:38px;grid-template-columns:1fr;padding:22px 0 40px}
@media(min-width:900px){.produit{grid-template-columns:1.05fr .95fr;gap:52px}}
.galerie .grand{background:var(--surface);border:1px solid var(--line);
  border-radius:calc(var(--radius) + 6px);padding:26px;display:grid;place-items:center;
  box-shadow:0 24px 60px rgba(20,16,40,.10)}
.galerie .grand img{border-radius:12px;box-shadow:0 18px 36px rgba(20,16,40,.20)}
.vignettes{display:flex;gap:10px;margin-top:12px;overflow-x:auto;padding-bottom:4px}
.vignettes button{
  flex:0 0 74px;height:74px;border-radius:14px;overflow:hidden;padding:0;cursor:pointer;
  border:2px solid var(--line);background:var(--surface);
}
.vignettes button[aria-current="true"]{border-color:var(--brand)}
.vignettes img{width:100%;height:100%;object-fit:cover}
.preuves{list-style:none;padding:0;margin:18px 0 20px;display:grid;gap:11px}
.preuves li{display:flex;gap:11px;align-items:flex-start;font-size:15px}
.preuves svg{flex:0 0 21px;margin-top:2px}
/* Une coche dessinée plutôt qu'un émoji : les émojis n'ont pas le même rendu
   d'un appareil à l'autre et jurent avec la charte (demande Cyril du 06/08). */
.oc-coche{flex:none;width:20px;height:20px;border-radius:50%;margin-top:1px;
  background:color-mix(in srgb,var(--brand) 14%,var(--surface));color:var(--brand);
  display:grid;place-items:center;font-size:11px;font-weight:800}
.prix-bloc{display:flex;align-items:baseline;gap:10px;margin:6px 0 16px}
.prix-bloc .gros{font-family:var(--titre);font-weight:800;font-size:38px;color:var(--ink)}
.prix-bloc s{color:var(--sub)}
.choix-format{display:grid;gap:10px;margin-bottom:18px}
.opt{
  display:flex;align-items:center;gap:12px;background:var(--surface);border:2px solid var(--line);
  border-radius:16px;padding:14px 16px;cursor:pointer;font-size:15px;transition:border-color .15s;
}
.opt:hover{border-color:color-mix(in srgb,var(--brand) 50%,var(--line))}
.opt:has(input:checked){border-color:var(--brand);
  box-shadow:0 10px 24px color-mix(in srgb,var(--brand) 16%,transparent)}
.opt input{accent-color:var(--brand);width:19px;height:19px;flex:0 0 auto}
.opt .n{font-weight:800}
.opt .d{color:var(--sub);font-size:13px;display:block}
.opt .p{margin-left:auto;font-weight:800;white-space:nowrap}

/* ---------- accordéons ---------- */
.acc details{background:var(--surface);border:1px solid var(--line);
  border-radius:14px;padding:2px 22px;margin-bottom:12px}
.acc summary{
  cursor:pointer;list-style:none;padding:16px 0;font-family:var(--titre);font-weight:700;font-size:17px;
  display:flex;justify-content:space-between;align-items:center;gap:14px;
}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";font-weight:400;font-size:22px;color:var(--brand)}
.acc details[open] summary::after{content:"–"}
.acc .corps{padding:0 0 18px;color:var(--sub);font-size:15px;line-height:1.65}
.acc .corps a{color:var(--brand);font-weight:700;text-decoration:underline}

/* ---------- sections plates ---------- */
.bande{background:color-mix(in srgb,var(--brand) 6%,var(--bg));padding:64px 0}
.bande.foret{background:var(--heroBg);color:var(--ink)}
.bande.miel{background:color-mix(in srgb,var(--gold) 12%,var(--bg))}
.duo{display:grid;gap:30px;align-items:center;grid-template-columns:1fr}
@media(min-width:820px){.duo{grid-template-columns:1fr 1fr;gap:52px}.duo.inverse>*:first-child{order:2}}
.duo img{border-radius:var(--radius)}
.avis{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.avis .a{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--ombre)}
.avis .a p{font-size:15px;margin:0 0 10px}
.avis .a b{font-size:14px}

/* ---------- pied ---------- */
.pied{background:var(--ink);color:color-mix(in srgb,#fff 65%,var(--ink));padding:44px 0 30px;font-size:14px}
.pied .cols{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.pied h4{font-family:var(--titre);font-weight:800;font-size:16px;color:#fff;margin:0 0 10px}
.pied a{display:block;padding:3px 0}
.pied a:hover{color:#fff;text-decoration:underline}
.pied .bas{border-top:1px solid rgba(255,255,255,.16);margin-top:26px;padding-top:16px;
  color:color-mix(in srgb,#fff 45%,var(--ink));font-size:12.5px}