/* 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);
  --top-bg:rgba(251,248,240,.97);
  --shadow:rgba(23,47,67,.04);
  --shadow-hover:rgba(23,47,67,.08);
  --overlay:rgba(23,47,67,.25);
  --fly-shadow:rgba(23,47,67,.12);
  color-scheme:light;
}
html{color-scheme:light}
html[data-theme="dark"]{color-scheme:dark}
html[data-theme="dark"]{
  --ink:#f3efe6;
  --paper:#121212;
  --muted:#a9b2bb;
  --line:#2c2c2c;
  --accent:#7C5CFF;
  --accent-ink:#b9a6ff;
  --accent-fg:#fff;
  --tint:#241f3a;
  --card:#1c1c1c;
  --chip:#1c1c1c;
  --border:var(--line);
  --activity:#1a1a1a;
  --plan:#1c1c1c;
  --rub-grad:var(--tint);
  --page-bg:#1a1a1a;
  --page-fg:var(--ink);
  --page-h:var(--accent-ink);
  --top-bg:rgba(18,18,18,.97);
  --shadow:rgba(0,0,0,.35);
  --shadow-hover:rgba(0,0,0,.5);
  --overlay:rgba(0,0,0,.55);
  --fly-shadow:rgba(0,0,0,.45);
  color-scheme:dark;
}

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:var(--top-bg);
  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 var(--shadow);
}
.card:hover{transform:translateY(-3px);box-shadow:0 8px 22px var(--shadow-hover)}
.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)}
.fiche-legal{font-size:11px;font-weight:400;color:var(--muted);text-align:center;margin:28px 0 12px;letter-spacing:.02em;opacity:.9}

.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 var(--shadow);
}
.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}


/* ===== Sidebar rubriques ===== */
.shell{display:block;min-height:calc(100vh - 120px)}
.rub-menu-btn{
  display:none;
  align-items:center;justify-content:center;
  width:40px;height:40px;flex:0 0 auto;
  border:1.5px solid var(--line);
  border-radius:12px;
  background:var(--card);
  color:var(--ink);
  font-size:20px;line-height:1;
  cursor:pointer;
  padding:0;
}
.rub-menu-btn:hover{border-color:var(--accent);background:var(--tint);color:var(--accent-ink)}
.sidebar{display:none}
.side-item{position:relative}
.side-link{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;
  border-radius:12px;
  font-weight:700;font-size:14px;
  color:var(--ink);
  transition:background .15s,color .15s;
}
.side-link:hover{background:var(--tint);color:var(--accent-ink)}
.side-emoji{font-size:18px;width:1.4em;text-align:center;flex:0 0 auto}
.side-titre{line-height:1.25}
.side-item.is-empty > .side-link{opacity:.45;font-weight:600}
.side-item.is-empty > .side-link:hover{opacity:.7}
.side-flyout{
  display:none;
  min-width:240px;
  max-width:320px;
  padding:8px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 12px 32px var(--fly-shadow);
  z-index:30;
}
.side-flyout a{
  display:block;
  padding:8px 10px;
  border-radius:10px;
  font-weight:700;font-size:14px;
  color:var(--ink);
}
.side-flyout a:hover{background:var(--tint);color:var(--accent-ink)}
.side-fi-titre{display:block}
.side-fi-sous{display:block;font-weight:500;font-size:12px;color:var(--muted);margin-top:2px}
.side-all{
  margin-top:4px;
  border-top:1px solid var(--line);
  border-radius:0 0 10px 10px !important;
  font-size:13px !important;
  font-weight:600 !important;
  color:var(--muted) !important;
}
.side-all:hover{color:var(--accent-ink) !important}
.side-bientot{
  margin:0;padding:10px 12px;
  color:var(--muted);font-size:13px;font-weight:600;
}

@media (min-width:821px){
  body.has-sidebar .shell{
    display:grid;
    grid-template-columns:240px minmax(0,1fr);
    align-items:start;
  }
  body.has-sidebar .sidebar{
    display:block;
    position:sticky;
    top:62px;
    align-self:start;
    max-height:calc(100vh - 62px);
    overflow:visible;
    padding:18px 10px 28px 14px;
    border-right:1px solid var(--line);
    background:var(--paper);
    z-index:4;
  }
  body.has-sidebar .side-item{margin:2px 0}
  body.has-sidebar .side-flyout{
    position:absolute;
    left:calc(100% - 4px);
    top:0;
  }
  body.has-sidebar .side-item:hover > .side-flyout,
  body.has-sidebar .side-item:focus-within > .side-flyout{display:block}
  /* keep flyout above following items */
  body.has-sidebar .side-item:hover,
  body.has-sidebar .side-item:focus-within{z-index:6}
  .rub-menu-btn{display:none !important}
  body.has-sidebar .row{padding-left:2vw;padding-right:3vw}
  body.has-sidebar .rub-head{padding-left:2vw}
  body.has-sidebar .chips{padding-left:2vw}
}

@media (max-width:820px){
  .rub-menu-btn{display:inline-flex}
  body.has-sidebar .sidebar{
    display:none;
    position:fixed;
    top:58px;left:12px;right:12px;
    max-height:min(70vh,520px);
    overflow:auto;
    z-index:40;
    padding:10px;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:16px;
    box-shadow:0 16px 40px var(--fly-shadow);
  }
  body.has-sidebar.rub-open .sidebar{display:block}
  body.rub-open::after{
    content:"";
    position:fixed;inset:0;top:58px;
    background:var(--overlay);
    z-index:35;
  }
  .side-flyout{
    position:static;
    min-width:0;max-width:none;
    box-shadow:none;
    border:0;
    background:transparent;
    padding:0 0 8px 34px;
  }
  .side-item.is-open > .side-flyout{display:block}
  .side-item.is-open > .side-link{background:var(--tint);color:var(--accent-ink)}
  .side-all{border-top:0 !important;padding-left:10px}
}


/* Dark: age accents stay vivid; ink/tint adapted for contrast on near-black */
html[data-theme="dark"] body.age-4{
  --accent:#FF9F1C;
  --accent-ink:#FFC46B;
  --accent-fg:#1a1030;
  --tint:#2a1f12;
  --page-h:#FFC46B;
  --rub-grad:#2a1f12;
}
html[data-theme="dark"] body.age-7{
  --accent:#00D4AA;
  --accent-ink:#5EE0C0;
  --accent-fg:#062018;
  --tint:#0f2a24;
  --page-h:#5EE0C0;
  --rub-grad:#0f2a24;
}
html[data-theme="dark"] body.age-12{
  --accent:#7C5CFF;
  --accent-ink:#b9a6ff;
  --accent-fg:#fff;
  --tint:#241f3a;
  --page-h:#b9a6ff;
  --rub-grad:#241f3a;
}
html[data-theme="dark"] body.age-16{
  --accent:#C9A86A;
  --accent-ink:#E0C48A;
  --accent-fg:#111;
  --tint:#2a2418;
  --page-h:#E0C48A;
  --rub-grad:#2a2418;
}

/* Theme toggle */
.side-theme{
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid var(--line);
}
.theme-toggle{
  display:flex;align-items:center;gap:10px;
  width:100%;
  min-height:44px;
  border:0;
  border-radius:12px;
  background:transparent;
  color:var(--ink);
  font:700 14px/1.25 system-ui,-apple-system,sans-serif;
  cursor:pointer;
  padding:10px 12px;
  text-align:left;
}
.theme-toggle:hover{background:var(--tint);color:var(--accent-ink)}
.theme-ico{font-size:18px;width:1.4em;text-align:center;flex:0 0 auto;line-height:1}
.theme-label{line-height:1.25}

/* Reader fascicule JPG pages: dark surroundings only */
html[data-theme="dark"] .reader img{
  border-color:#333;
  background:#0a0a0a;
}
html[data-theme="dark"] .tag.free{background:#1f8a4c}
html[data-theme="dark"] .quiz button.ok{background:#1f8a4c;border-color:#1f8a4c}
html[data-theme="dark"] .quiz button.ko{background:#b13a3e;border-color:#b13a3e}
.logo{display:flex;flex-direction:column;align-items:center;text-decoration:none}
.logo .slogan{font-size:.72rem;letter-spacing:.04em;font-style:italic;color:#C9A86A;margin-top:-2px;white-space:nowrap}
@media(max-width:600px){.logo .slogan{font-size:.6rem}}
.groupe-titre{font-size:1.5rem;margin:28px 0 4px;padding-bottom:6px;border-bottom:2px solid var(--accent)}