:root {
    --pink:#F9B4CB; --pink-light:#FDE8F0; --lavender:#C5B3E6; --lavender-light:#EDE8F9;
    --mint:#A8DFC4; --mint-light:#E0F5EC; --peach:#FFCBA0; --peach-light:#FFF0E5;
    --cream:#FEFAF6; --white:#FFFFFF; --dark:#3D2858; --mid:#7B6B9E; --light:#B5A8CC;
    --shadow-soft:0 8px 30px rgba(100,80,150,0.10);
    --r-sm:12px; --r-md:18px; --r-lg:26px;
}
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:'Nunito',sans-serif; background:var(--cream); color:var(--dark); }

nav {
    position:fixed; top:0; left:0; right:0; z-index:999;
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 48px; background:rgba(254,250,246,0.9);
    backdrop-filter:blur(24px); border-bottom:1px solid rgba(197,179,230,0.2);
}
.nav-logo { font-size:1.3rem; font-weight:900; color:var(--dark); text-decoration:none; }
.nav-logo span { color:var(--lavender); }
.nav-links { display:flex; gap:30px; list-style:none; }
.nav-links a { text-decoration:none; color:var(--mid); font-weight:700; font-size:.92rem; transition:color .2s; }
.nav-links a:hover { color:var(--dark); }
.nav-cta {
    background:linear-gradient(135deg,var(--pink),var(--lavender)); color:#fff;
    padding:10px 22px; border-radius:50px; text-decoration:none; font-weight:800; font-size:.88rem;
    box-shadow:0 4px 18px rgba(197,179,230,.45); transition:transform .25s, box-shadow .25s;
}
.nav-cta:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(197,179,230,.55); }

.article { max-width:740px; margin:0 auto; padding:120px 24px 80px; }
.breadcrumb { font-size:.85rem; color:var(--light); font-weight:600; margin-bottom:18px; }
.breadcrumb a { color:var(--mid); text-decoration:none; }
.breadcrumb a:hover { text-decoration:underline; }
.art-cat {
    display:inline-block; font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.4px;
    color:var(--mid); background:var(--lavender-light); padding:5px 12px; border-radius:50px; margin-bottom:16px;
}
h1 { font-size:2.5rem; font-weight:900; line-height:1.18; margin-bottom:16px; }
.art-meta { font-size:.88rem; color:var(--light); font-weight:600; margin-bottom:36px; }
.art-meta span { margin-right:14px; }

.article p { font-size:1.05rem; line-height:1.75; color:#4a3d63; margin-bottom:20px; }
.article h2 { font-size:1.6rem; font-weight:900; margin:42px 0 16px; line-height:1.25; }
.article h3 { font-size:1.2rem; font-weight:800; margin:26px 0 10px; }
.article ul, .article ol { margin:0 0 20px 22px; }
.article li { font-size:1.05rem; line-height:1.7; color:#4a3d63; margin-bottom:8px; }
.article strong { color:var(--dark); }
.article a { color:var(--lavender); font-weight:700; text-decoration:underline; }

.lead { font-size:1.15rem !important; color:var(--mid) !important; font-weight:600; }

.callout {
    background:var(--mint-light); border-left:4px solid var(--mint);
    border-radius:var(--r-sm); padding:16px 20px; margin:24px 0;
}
.callout p { margin:0; font-size:1rem; }

    background:var(--white); border-radius:var(--r-md); box-shadow:var(--shadow-soft);
    padding:20px 24px; margin-bottom:16px;
}
    background:linear-gradient(135deg,var(--pink),var(--lavender)); color:#fff;
    font-weight:900; font-size:.82rem; padding:6px 13px; border-radius:50px; white-space:nowrap;
}

.cta-box {
    background:linear-gradient(140deg,var(--lavender-light),var(--pink-light));
    border-radius:var(--r-lg); padding:32px 30px; text-align:center; margin:40px 0;
}
.cta-box h3 { font-size:1.35rem; font-weight:900; margin-bottom:8px; }
.cta-box p { font-size:1rem; color:var(--mid); margin-bottom:20px; }
.cta-btn {
    display:inline-block; background:linear-gradient(135deg,#EE6FA6,#9E7BD8); color:#fff;
    padding:14px 32px; border-radius:50px; text-decoration:none; font-weight:800; font-size:1.02rem;
    box-shadow:0 8px 28px rgba(158,123,216,.45); transition:transform .25s, box-shadow .25s;
    text-shadow:0 1px 2px rgba(80,40,120,.25);
}
.cta-btn:hover { transform:translateY(-2px); box-shadow:0 12px 32px rgba(158,123,216,.55); }
/* Le bouton CTA reste blanc et non souligné (priorité sur .article a) */
.article a.cta-btn { color:#fff; text-decoration:none; }

.art-end { margin-top:48px; padding-top:24px; border-top:1px solid var(--lavender-light); }
.art-end a { color:var(--mid); font-weight:800; text-decoration:none; }

/* ══════════════════════════════════════════════════════════
   Pages « fiches de révision par matière » (22/09/2026, SEO)
   Reprend la charte du blog + les blocs propres à ces pages :
   définitions, quiz de démonstration, FAQ, liens internes.
   ══════════════════════════════════════════════════════════ */
.art-meta { display:flex; gap:16px; flex-wrap:wrap; font-size:.85rem; font-weight:700; color:var(--light); margin-bottom:26px; }

/* Définitions à retenir */
.defs { display:flex; flex-direction:column; gap:12px; margin:0 0 24px; }
.def { background:var(--white); border-radius:var(--r-md); box-shadow:var(--shadow-soft); padding:16px 20px; font-size:1rem; line-height:1.65; color:#4a3d63; border-left:5px solid var(--lavender); }
.def b { display:block; font-size:1.02rem; font-weight:900; color:var(--dark); margin-bottom:4px; }
.def i { color:var(--mid); font-style:italic; }

/* Quiz de démonstration (jouable sans compte) */
.quiz { background:var(--white); border-radius:var(--r-lg); box-shadow:var(--shadow-soft); padding:24px 22px; margin:0 0 28px; }
.q-prog { font-size:.82rem; font-weight:800; color:var(--light); margin-bottom:12px; }
.q-txt { font-size:1.12rem; font-weight:800; line-height:1.45; margin-bottom:16px; color:var(--dark); }
.q-choix { display:flex; flex-direction:column; gap:10px; }
.q-choix button { text-align:left; font:inherit; font-weight:700; font-size:1rem; line-height:1.45; color:var(--dark); background:var(--white); border:2px solid var(--lavender-light); border-radius:var(--r-sm); padding:12px 14px; cursor:pointer; transition:border-color .15s, background .15s; }
.q-choix button:hover:not(:disabled) { border-color:var(--lavender); background:#FBF9FE; }
.q-choix button:disabled { cursor:default; }
.q-choix button.ok { border-color:#2f9c63; background:#E0F5EC; }
.q-choix button.ko { border-color:#D14B4B; background:#FDECEC; }
.q-expl { display:none; margin-top:14px; padding:13px 15px; border-radius:var(--r-sm); font-size:.97rem; line-height:1.6; font-weight:600; }
.q-expl.show { display:block; }
.q-expl.ok { background:#E0F5EC; color:#1f5a3c; }
.q-expl.ko { background:#FDECEC; color:#7a2a2a; }
.q-expl b { display:block; font-weight:900; margin-bottom:3px; }
.q-suivant, .q-rejouer { margin-top:16px; padding:12px 24px; border:none; border-radius:50px; font:inherit; font-weight:900; font-size:.95rem; color:#fff; cursor:pointer; background:linear-gradient(135deg,#EE6FA6,#9E7BD8); }
.q-rejouer { background:var(--white); color:var(--mid); border:1.5px solid var(--lavender-light); margin-left:8px; }
.q-suivant[hidden] { display:none; }
.q-fin { text-align:center; }
.q-score { font-size:2.6rem; font-weight:900; background:linear-gradient(135deg,var(--pink),var(--lavender)); -webkit-background-clip:text; background-clip:text; color:transparent; line-height:1.1; }
.q-fin p { font-size:1rem; color:var(--mid); font-weight:700; margin:10px 0 0; }
.q-suite { color:var(--dark) !important; margin-top:14px !important; }
.q-fin .cta-btn { margin-top:16px; }

/* FAQ et liens internes */
.faq { display:flex; flex-direction:column; gap:10px; margin-bottom:24px; }
.faq-i { background:var(--white); border-radius:var(--r-md); box-shadow:var(--shadow-soft); padding:16px 20px; }
.faq-i b { display:block; font-weight:900; color:var(--dark); margin-bottom:6px; font-size:1.02rem; }
.faq-i p { margin:0 !important; font-size:.99rem; }
.liens { background:var(--lavender-light); border-radius:var(--r-md); padding:18px 20px; margin:32px 0 0; }
.liens b { display:block; font-weight:900; margin-bottom:8px; color:var(--dark); }
.liens a { display:inline-block; margin:0 14px 6px 0; color:var(--mid); font-weight:800; text-decoration:none; }
.liens a:hover { color:var(--dark); text-decoration:underline; }

/* Index des matières */
.mat-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:16px; margin:0 0 20px; }
.mat-card { display:block; background:var(--white); border-radius:var(--r-md); box-shadow:var(--shadow-soft); padding:20px 22px; text-decoration:none; transition:transform .25s, box-shadow .25s; }
.mat-card:hover { transform:translateY(-4px); box-shadow:0 14px 34px rgba(100,80,150,.16); }
.mat-card .mc-cat { font-size:.74rem; font-weight:800; text-transform:uppercase; letter-spacing:.5px; color:var(--light); }
.mat-card .mc-t { font-size:1.08rem; font-weight:900; color:var(--dark); margin:4px 0 6px; line-height:1.3; }
.mat-card .mc-d { font-size:.9rem; color:var(--mid); font-weight:600; line-height:1.5; }

/* ══════════════════════════════════════════════════════════
   Habillage coloré (22/09/2026) — même charte que l'accueil :
   fond dégradé, blobs, titres soulignés, définitions en
   couleurs alternées, encadré de programme.
   ══════════════════════════════════════════════════════════ */
body {
    background:
        radial-gradient(900px 600px at 8% -5%, var(--pink-light) 0%, transparent 55%),
        radial-gradient(800px 600px at 105% 8%, var(--lavender-light) 0%, transparent 55%),
        radial-gradient(700px 500px at 50% 100%, var(--mint-light) 0%, transparent 60%),
        var(--cream);
    background-attachment:fixed;
}
/* Décor flottant, purement visuel */
.blob { position:fixed; border-radius:50%; filter:blur(70px); opacity:.5; z-index:-1; pointer-events:none; }
.blob-1 { width:340px; height:340px; background:var(--pink); top:-90px; left:-110px; }
.blob-2 { width:300px; height:300px; background:var(--mint); bottom:8%; right:-100px; }
.blob-3 { width:260px; height:260px; background:var(--peach); top:42%; left:-120px; }
.deco-f { position:fixed; font-size:1.6rem; opacity:.5; z-index:-1; pointer-events:none; animation:flotte 7s ease-in-out infinite; }
@keyframes flotte { 0%,100%{transform:translateY(0) rotate(var(--r,0deg))} 50%{transform:translateY(-12px) rotate(var(--r,0deg))} }

/* Titre principal : le mot-clé en dégradé */
h1 .grad { background:linear-gradient(120deg,#EE6FA6,#9E7BD8); -webkit-background-clip:text; background-clip:text; color:transparent; }
/* Titres de section : pastille colorée à gauche */
.article h2 { position:relative; padding-left:18px; }
.article h2::before { content:''; position:absolute; left:0; top:.22em; width:7px; height:.85em; border-radius:50px; background:linear-gradient(180deg,var(--pink),var(--lavender)); }
.article h2:nth-of-type(2n)::before { background:linear-gradient(180deg,var(--mint),#7FA9CE); }
.article h2:nth-of-type(3n)::before { background:linear-gradient(180deg,var(--peach),var(--pink)); }

/* Encadré « programme » : liste numérotée en carte */
.prog { background:var(--white); border-radius:var(--r-lg); box-shadow:var(--shadow-soft); padding:22px 26px 22px 30px; margin-bottom:26px; border-top:5px solid var(--lavender); }
.prog ol { margin:0 0 0 4px !important; list-style:none; counter-reset:p; }
.prog li { counter-increment:p; position:relative; padding-left:38px; margin-bottom:12px; }
.prog li::before { content:counter(p); position:absolute; left:0; top:1px; width:26px; height:26px; border-radius:50%; background:linear-gradient(135deg,var(--pink),var(--lavender)); color:#fff; font-weight:900; font-size:.85rem; display:flex; align-items:center; justify-content:center; }
.prog li:nth-child(3n+2)::before { background:linear-gradient(135deg,var(--mint),#7FA9CE); }
.prog li:nth-child(3n)::before   { background:linear-gradient(135deg,var(--peach),var(--pink)); }

/* Définitions : une couleur par carte, en rotation */
.def:nth-child(6n+1) { border-left-color:var(--pink);     background:linear-gradient(100deg,var(--pink-light) 0%,var(--white) 42%); }
.def:nth-child(6n+2) { border-left-color:var(--lavender); background:linear-gradient(100deg,var(--lavender-light) 0%,var(--white) 42%); }
.def:nth-child(6n+3) { border-left-color:var(--mint);     background:linear-gradient(100deg,var(--mint-light) 0%,var(--white) 42%); }
.def:nth-child(6n+4) { border-left-color:var(--peach);    background:linear-gradient(100deg,var(--peach-light) 0%,var(--white) 42%); }
.def:nth-child(6n+5) { border-left-color:#7FA9CE;         background:linear-gradient(100deg,#E8F1F9 0%,var(--white) 42%); }
.def:nth-child(6n+6) { border-left-color:#F5D06F;         background:linear-gradient(100deg,#FFF6DF 0%,var(--white) 42%); }

/* Erreurs classiques : liste en carte rouge douce */
.erreurs { background:#FFF6F5; border:1.5px solid #FBD8D4; border-radius:var(--r-md); padding:18px 22px 4px; margin-bottom:24px; }
.erreurs li::marker { color:#E05A5A; }

/* Quiz : en avant, bord coloré */
.quiz { border-top:5px solid var(--lavender); background:linear-gradient(170deg,#FBF9FE 0%,var(--white) 30%); }
.q-score { font-size:3rem; }

/* FAQ : pastille ? colorée */
.faq-i { border-left:5px solid var(--mint); }
.faq-i:nth-child(2n) { border-left-color:var(--peach); }
.faq-i:nth-child(3n) { border-left-color:var(--pink); }

/* Cartes de matières de l'index : bandeau de couleur en haut */
.mat-card { border-top:5px solid var(--lavender); }
.mat-card:nth-child(4n+2) { border-top-color:var(--mint); }
.mat-card:nth-child(4n+3) { border-top-color:var(--peach); }
.mat-card:nth-child(4n)   { border-top-color:var(--pink); }

@media(max-width:640px){ .blob, .deco-f { display:none; } }