/* Savantissimo — palette papier crème (inspirée lecture Pasteur mobile) */
*{box-sizing:border-box}
:root{
  --ink:#172f43;
  --paper:#fbf8f0;
  --muted:#596875;
  --line:#dddcd8;
  --accent:#7C5CFF;
  --accent-ink:#6844e8;
  --accent-fg:#fff;
  --tint:#eeebfc;
  --card:#ffffff;
  --chip:#ffffff;
  --border:var(--line);
  --activity:#f3f0e8;
  --plan:#ffffff;
  --rub-grad:var(--tint);
  --page-bg:#fffef9;
  --page-fg:var(--ink);
  --page-h:var(--accent-ink);
  color-scheme:light;
}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

.top{
  position:sticky;top:0;z-index:5;
  display:flex;gap:16px;align-items:center;flex-wrap:wrap;
  padding:12px 4vw;
  background:rgba(251,248,240,.97);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(14px);
}
.logo{font-size:22px;font-weight:800;letter-spacing:-.5px}
.logo b{color:var(--accent)}
.logo img{height:38px;display:block}

#ages{display:flex;gap:6px;flex:1}
#ages button{
  border:1.5px solid var(--line);
  background:var(--card);
  color:var(--ink);
  border-radius:99px;
  padding:6px 12px;
  font-weight:700;
  cursor:pointer;
  transition:background .15s,border-color .15s,color .15s;
}
#ages button.on{
  background:var(--accent);
  color:var(--accent-fg);
  border-color:var(--accent);
}
.stats{display:flex;gap:12px;align-items:center;font-weight:700;color:var(--muted)}

.btn{
  display:inline-block;
  background:var(--accent);
  color:var(--accent-fg);
  font-weight:800;
  border:0;
  border-radius:10px;
  padding:12px 20px;
  cursor:pointer;
}
.btn.sm{padding:7px 12px}
.btn.ghost{background:var(--tint);color:var(--accent-ink)}

.hero{
  position:relative;min-height:0;
  display:flex;align-items:flex-end;
  padding:40px 4vw;
  background-size:cover;background-position:center 20%;
  border-bottom:1px solid var(--line);
}
.hero:before{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,var(--paper) 18%,color-mix(in srgb,var(--paper) 55%,transparent) 55%,transparent),
    linear-gradient(0deg,var(--paper),transparent 45%);
}
.hero>div{position:relative;max-width:560px}
.hero h1{font-size:clamp(30px,5vw,54px);margin:.2em 0;line-height:1.05;color:var(--ink);letter-spacing:-.02em}
.hero p{font-size:18px;color:var(--muted)}

.tag{
  display:inline-block;font-size:12px;font-weight:800;
  padding:3px 8px;border-radius:6px;
  background:var(--accent);color:var(--accent-fg);
}
.tag.free{background:#2fbf71;color:#fff}
.tag.soon{background:var(--activity);color:var(--muted);border:1px solid var(--line)}

.row{padding:8px 4vw 18px}
.row h2{font-size:20px;margin:14px 0 10px;color:var(--ink)}
.scroller{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}

.card{
  flex:0 0 200px;scroll-snap-align:start;
  border-radius:14px;overflow:hidden;
  background:var(--card);
  border:1px solid var(--line);
  position:relative;
  transition:transform .2s,box-shadow .2s;
  box-shadow:0 2px 10px rgba(23,47,67,.04);
}
.card:hover{transform:translateY(-3px);box-shadow:0 8px 22px rgba(23,47,67,.08)}
.card img{width:100%;height:270px;object-fit:cover;display:block}
.card .ph{
  height:270px;display:grid;place-items:center;font-size:54px;
  background:linear-gradient(135deg,var(--tint),var(--paper));
  color:var(--accent-ink);
}
.card .meta{padding:10px 12px;font-size:14px;color:var(--ink)}
.card .meta small{color:var(--muted)}
.card .tag{position:absolute;top:8px;left:8px}

.wrap{max-width:900px;margin:0 auto;padding:24px 4vw}
.portrait-head{display:grid;grid-template-columns:220px 1fr;gap:24px;align-items:end}
.portrait-head img{width:100%;border-radius:14px;border:1px solid var(--line)}
.credit{font-size:12px;color:var(--muted)}

.page{
  background:var(--page-bg);
  color:var(--page-fg);
  border-radius:16px;
  padding:28px;margin:18px 0;
  font-size:18px;line-height:1.6;
  border:1px solid var(--line);
  box-shadow:0 4px 18px rgba(23,47,67,.04);
}
.page h3{margin:0 0 8px;color:var(--page-h)}
.age4 .page,.age-4 .page{font-size:24px}
.activity{
  background:var(--tint);
  border-left:5px solid var(--accent);
  padding:16px;border-radius:10px;
  color:var(--ink);
}
.quiz button{
  display:block;width:100%;text-align:left;margin:6px 0;padding:12px;
  border-radius:10px;border:1px solid var(--line);
  background:var(--card);color:var(--ink);cursor:pointer;font-size:16px;
}
.quiz button.ok{background:#2fbf71;color:#fff;border-color:#2fbf71}
.quiz button.ko{background:#e5484d;color:#fff;border-color:#e5484d}
.progress{height:6px;background:var(--line);border-radius:3px}
.progress i{display:block;height:100%;background:var(--accent);border-radius:3px}
.reader img{width:100%;border-radius:12px;margin:8px 0;border:1px solid var(--line)}

.badges{display:flex;gap:10px;flex-wrap:wrap}
.badge{
  background:var(--card);border:1px solid var(--line);
  border-radius:12px;padding:10px 14px;opacity:.4;color:var(--muted);
}
.badge.on{opacity:1;outline:2px solid var(--accent);color:var(--ink);background:var(--tint)}

footer{color:var(--muted);font-size:12px;padding:30px 4vw;border-top:1px solid var(--line);margin-top:12px}

@media(max-width:640px){
  .portrait-head{grid-template-columns:1fr}
  .card{flex-basis:150px}
  .card img,.card .ph{height:200px}
  .hero{min-height:0}
  .stats #xp{display:none}
}

.chips{display:flex;gap:8px;flex-wrap:wrap;padding:14px 4vw 0}
.chips a{
  background:var(--chip);
  border:1px solid var(--line);
  border-radius:99px;
  padding:7px 14px;
  font-weight:700;font-size:14px;
  color:var(--ink);
  transition:background .15s,border-color .15s,color .15s;
}
.chips a:hover{background:var(--tint);border-color:var(--accent);color:var(--accent-ink)}
.row h2 a:hover{color:var(--accent-ink)}
.row h2 .more{font-size:13px;color:var(--muted);font-weight:600;margin-left:6px}

.card .ph.fiche{
  flex-direction:column;gap:10px;text-align:center;padding:14px;
  background:linear-gradient(160deg,var(--tint),color-mix(in srgb,var(--accent) 18%,var(--paper)));
}
.card .ph.fiche span{font-size:16px;font-weight:800;line-height:1.2;color:var(--accent-ink)}

.rub-head{
  padding:40px 4vw 10px;
  background:linear-gradient(120deg,var(--tint),var(--paper) 70%);
  border-bottom:1px solid var(--line);
}
.rub-head h1{font-size:clamp(30px,5vw,48px);margin:.2em 0;color:var(--ink);letter-spacing:-.02em}
.rub-head p{color:var(--muted);max-width:640px;font-size:18px}

.fiche-head{display:grid;grid-template-columns:160px 1fr;gap:24px;align-items:end}
.ph.fiche.big{
  height:160px;border-radius:16px;display:grid;place-items:center;font-size:80px;
  background:linear-gradient(160deg,var(--tint),color-mix(in srgb,var(--accent) 22%,var(--paper)));
  border:1px solid var(--line);
  color:var(--accent-ink);
}
.encadre{
  margin-top:14px;
  background:var(--tint);
  border-left:5px solid var(--accent);
  border-radius:10px;
  padding:12px 16px;
  font-size:.92em;
  color:var(--ink);
}
.encadre>small{
  display:block;font-weight:800;letter-spacing:.5px;
  color:var(--accent-ink);margin-bottom:4px;text-transform:uppercase;
}
@media(max-width:640px){
  .fiche-head{grid-template-columns:1fr}
  .ph.fiche.big{height:110px;font-size:56px}
}

/* ===== Thèmes par âge (accents discrets sur papier crème) ===== */
/* 4+ orange — accent-ink WCAG AA ~5.2:1 sur #fbf8f0 */
body.age-4{
  --accent:#FF9F1C;
  --accent-ink:#A05500;
  --accent-fg:#1a1030;
  --tint:#FFF1DE;
  --page-h:#A05500;
  --rub-grad:#FFF1DE;
}
/* 7+ turquoise — accent-ink WCAG AA ~5.0:1 */
body.age-7{
  --accent:#00D4AA;
  --accent-ink:#0A7A63;
  --accent-fg:#062018;
  --tint:#E6F8F3;
  --page-h:#0A7A63;
  --rub-grad:#E6F8F3;
}
/* 12+ violet */
body.age-12{
  --accent:#7C5CFF;
  --accent-ink:#6844e8;
  --accent-fg:#fff;
  --tint:#eeebfc;
  --page-h:#6844e8;
  --rub-grad:#eeebfc;
}
/* 16+ or */
body.age-16{
  --accent:#C9A86A;
  --accent-ink:#8a682e;
  --accent-fg:#111;
  --tint:#f1e9d8;
  --page-h:#8a682e;
  --rub-grad:#f1e9d8;
}

/* Pastilles d'âge dans le header */
#ages button[data-a="4"]{border-color:#FF9F1C88}
#ages button[data-a="4"].on{background:#FF9F1C;color:#1a1030;border-color:#FF9F1C}
#ages button[data-a="7"]{border-color:#00D4AA88}
#ages button[data-a="7"].on{background:#00D4AA;color:#062018;border-color:#00D4AA}
#ages button[data-a="12"]{border-color:#7C5CFF88}
#ages button[data-a="12"].on{background:#7C5CFF;color:#fff;border-color:#7C5CFF}
#ages button[data-a="16"]{border-color:#C9A86A88}
#ages button[data-a="16"].on{background:#C9A86A;color:#111;border-color:#C9A86A}

/* ===== Écran choix d'âge (élégant sur papier crème) ===== */
body.needs-age .top .stats,body.needs-age footer{opacity:.35;pointer-events:none}
body.needs-age #ages{opacity:.5;pointer-events:none}
.age-gate{
  min-height:calc(100vh - 120px);
  display:flex;align-items:center;justify-content:center;
  padding:32px 4vw;
  background:
    radial-gradient(ellipse at 18% 28%,#FF9F1C22,transparent 52%),
    radial-gradient(ellipse at 82% 18%,#7C5CFF20,transparent 48%),
    radial-gradient(ellipse at 50% 85%,#00D4AA18,transparent 52%),
    var(--paper);
}
.age-gate-inner{text-align:center;max-width:820px;width:100%}
.age-gate h1{
  font-size:clamp(28px,5vw,48px);
  margin:0 0 28px;
  letter-spacing:-.5px;
  color:var(--ink);
  font-family:Georgia,"Times New Roman",serif;
  font-weight:700;
}
.age-picks{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.age-pick{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  min-height:150px;
  border:2px solid transparent;
  border-radius:20px;
  cursor:pointer;font:inherit;color:#fff;
  transition:transform .15s,box-shadow .15s,border-color .15s;
  padding:20px 12px;
}
.age-pick:hover,.age-pick:focus{transform:translateY(-4px) scale(1.03);outline:none}
.age-pick-label{font-size:clamp(28px,4vw,40px);font-weight:900;line-height:1}
.age-pick-nom{font-size:14px;font-weight:700;opacity:.95}
.age-pick-4{background:linear-gradient(160deg,#FF9F1C,#FF6B9D);box-shadow:0 8px 28px #FF9F1C33}
.age-pick-4:hover{border-color:#fff;box-shadow:0 12px 36px #FF9F1C55}
.age-pick-7{background:linear-gradient(160deg,#00D4AA,#00A8E8);box-shadow:0 8px 28px #00D4AA33}
.age-pick-7:hover{border-color:#fff;box-shadow:0 12px 36px #00D4AA55}
.age-pick-12{background:linear-gradient(160deg,#7C5CFF,#4F8CFF);box-shadow:0 8px 28px #7C5CFF33}
.age-pick-12:hover{border-color:#fff;box-shadow:0 12px 36px #7C5CFF55}
.age-pick-16{background:linear-gradient(160deg,#C9A86A,#8a682e);box-shadow:0 8px 28px #C9A86A33}
.age-pick-16:hover{border-color:#fff;box-shadow:0 12px 36px #C9A86A55}
@media(max-width:640px){
  .age-picks{grid-template-columns:1fr 1fr;gap:12px}
  .age-pick{min-height:120px;border-radius:16px}
}

.sous-chips{padding-top:8px;padding-bottom:4px}
.sous-chips a{cursor:default}