*,*::before,*::after{box-sizing:border-box}body{margin:0}img{max-width:100%}
/* Layout : une colonne de lecture étroite, bandeau d'accueil couleur ciel, cartes d'articles en grille qui passe à une colonne sur téléphone */
:root{
  --bg:#f6f9fc; --surface:#ffffff; --ink:#1d2a44; --muted:#5a6680;
  --sky:#cfe6f7; --sun:#f5b82e; --sun-ink:#7a4d00; --line:#dbe3ee;
  --display:"Fredoka","Trebuchet MS",system-ui,sans-serif;
  --body:"Nunito","Segoe UI",system-ui,sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#111827; --surface:#1a2336; --ink:#e8eef7; --muted:#a3b0c6;
  --sky:#1f3550; --sun:#f5b82e; --sun-ink:#ffd77a; --line:#2c3a55; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#111827; --surface:#1a2336; --ink:#e8eef7; --muted:#a3b0c6;
  --sky:#1f3550; --sun:#f5b82e; --sun-ink:#ffd77a; --line:#2c3a55; color-scheme:dark}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.65}
.wrap{max-width:720px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
header.top{border-bottom:1px solid var(--line);background:var(--surface)}
header.top .wrap{display:flex;align-items:center;gap:10px;padding-block:12px}
.brand{font-family:var(--display);font-weight:700;font-size:1.25rem;color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:10px}
.brand img{width:48px;height:48px;flex:none;display:block}
.hero{background:var(--sky)}
.hero .wrap{padding-block:36px 40px;display:grid;gap:14px}
h1,h2,h3{font-family:var(--display);line-height:1.2;text-wrap:balance;margin:0}
h1{font-size:clamp(1.8rem,5vw,2.5rem);font-weight:700}
.hero p{margin:0;max-width:60ch;font-size:1.08rem}
.eyebrow{font-family:var(--display);font-weight:600;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:var(--sun-ink)}
main .wrap{padding-block:32px 48px;display:grid;gap:28px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:14px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px;text-decoration:none;color:var(--ink);display:grid;gap:6px}
.card:hover,.card:focus-visible{border-color:var(--sun);outline:none}
.card h3{font-size:1.15rem}
.card p{margin:0;color:var(--muted);font-size:.95rem}
.card .age{font-size:.8rem;font-weight:700;color:var(--sun-ink);letter-spacing:.04em}
article{display:grid;gap:18px}
article h2{font-size:1.35rem;margin-top:8px}
article p,article ul,article ol{margin:0}
article li{margin-block:4px}
.back{font-family:var(--display);font-weight:600;color:var(--muted);text-decoration:none;font-size:.95rem}
.back:hover{color:var(--ink)}
.say{background:var(--surface);border-left:4px solid var(--sun);border-radius:0 10px 10px 0;padding:12px 16px;font-style:italic}
.cta{background:var(--sun);color:#1d2a44;border-radius:16px;padding:20px;display:grid;gap:10px}
.cta h2{font-size:1.25rem;margin:0}
.cta p{margin:0}
.cta a{justify-self:start;background:#1d2a44;color:#fff;font-family:var(--display);font-weight:600;padding:10px 18px;border-radius:999px;text-decoration:none}
.note{font-size:.88rem;color:var(--muted);border-top:1px solid var(--line);padding-top:14px}
footer{border-top:1px solid var(--line);background:var(--surface)}
footer .wrap{padding-block:18px;font-size:.88rem;color:var(--muted)}
a{color:inherit}
@media (prefers-reduced-motion:no-preference){.card{transition:border-color .15s}}

/* --- Plus de couleur --- */
:root{--c1:#ffd9e2;--c2:#d6f0dd;--c3:#e3dcff;--c4:#ffe7c2;--c5:#cfeefa;--pink:#e85d8a;--green:#2f9a5b;--violet:#7a5cf0;--orange:#f08a24;--blue:#2a8fd0}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--c1:#4a2533;--c2:#1f3d2b;--c3:#2f2752;--c4:#4a3518;--c5:#183a4a}}
:root[data-theme="dark"]{--c1:#4a2533;--c2:#1f3d2b;--c3:#2f2752;--c4:#4a3518;--c5:#183a4a}
body{background:linear-gradient(180deg,var(--bg) 0%,var(--c4) 160%) fixed}
header.top{background:linear-gradient(90deg,var(--c1),var(--c4),var(--c2),var(--c5),var(--c3));border-bottom:none}
.hero{background:linear-gradient(135deg,var(--c5) 0%,var(--c3) 50%,var(--c1) 100%);position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:var(--sun);opacity:.35}
.hero .wrap{position:relative;z-index:1}
.hero h1{color:var(--ink)}
.eyebrow{display:inline-block;justify-self:start;background:var(--sun);color:#1d2a44;padding:3px 12px;border-radius:999px}
.card{border:none;border-top:6px solid var(--blue);box-shadow:0 2px 0 rgba(29,42,68,.06)}
.card:nth-child(1){background:var(--c1);border-top-color:var(--pink)}
.card:nth-child(2){background:var(--c2);border-top-color:var(--green)}
.card:nth-child(3){background:var(--c3);border-top-color:var(--violet)}
.card:nth-child(4){background:var(--c4);border-top-color:var(--orange)}
.card:nth-child(5){background:var(--c5);border-top-color:var(--blue)}
.card p{color:var(--ink);opacity:.8}
.card .age{color:var(--ink)}
.card:hover,.card:focus-visible{transform:translateY(-2px)}
@media (prefers-reduced-motion:no-preference){.card{transition:transform .15s}}
article h2{color:var(--violet);padding-left:12px;border-left:5px solid var(--pink);border-radius:2px}
article li::marker{color:var(--orange);font-weight:700}
.say{background:var(--c2);border-left-color:var(--green)}
.cta{background:linear-gradient(135deg,var(--sun),#ff9f6b)}
.cta a{background:var(--pink)}
footer{background:linear-gradient(90deg,var(--c3),var(--c5));border-top:none}
footer .wrap{color:var(--ink)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) article h2{color:#b9a8ff}}
:root[data-theme="dark"] article h2{color:#b9a8ff}