/* Identité visuelle « cahier » (reprise de cahier-du-soir), chargée en dernier.
   Le nom et le logo restent ceux de Kahier ; les couleurs littérales des autres feuilles passent par
   cahier-palette.css (généré par tools/build-cahier-palette.mjs).
   Primaire (CE1 → CM2) : body.is-primary, posé par render() selon la classe affichée → version plus ludique. */
:root{
  --papier:#FFF9F1; --papier-2:#FDEEDC; --carte:#FFFFFF; --carte-2:#FFF6EA;
  --ligne:#CFE0F5; --marge:#F0B7C4; --bord:#F0DDC8; --bord-fort:#E0C3A6;
  --encre:#22304C; --encre-2:#5A6784; --encre-3:#6B7790;
  --bleu:#2E6BD9; --bleu-clair:#E5EEFF; --bleu-fonce:#1F4FA8;
  --rouge:#D6402F; --rouge-clair:#FFE8E4;
  --violet:#7E43C8; --violet-clair:#F2E8FF;
  --vert:#0E8A5B; --vert-clair:#DDF7EC;
  --or:#8A5600; --or-vif:#F0A017; --or-clair:#FFF0D4;
  --turquoise:#0B7F92; --turquoise-clair:#DBF5F9;
  --rose:#B8336A; --rose-clair:#FFE5EF;
  --bouton:#2E6BD9; --bouton-texte:#FFFFFF; --bouton-ombre:#1F4FA8;
  --ombre:0 1px 2px rgba(34,48,76,.06), 0 8px 24px -8px rgba(34,48,76,.18);
  --ombre-forte:0 2px 4px rgba(34,48,76,.08), 0 20px 44px -14px rgba(34,48,76,.28);
  --r:18px; --r-petit:12px;
  --titre:"Baloo 2","Nunito",system-ui,sans-serif;
  --texte:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
  --main:"Caveat",cursive;
  color-scheme:light;
  /* Anciennes variables Kahier, désormais adossées à l'identité cahier. */
  --blue:var(--bleu); --ink:var(--encre); --muted:var(--encre-2); --page:var(--papier); --border:var(--bord);
  --radius:var(--r); --kh-coral:var(--rouge); --kh-mint:var(--bleu-clair); --kahier-mint:var(--bleu-clair);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --papier:#131A26; --papier-2:#1B2431; --carte:#1F2A3A; --carte-2:#18212E;
    --ligne:rgba(180,205,235,.14); --marge:rgba(240,183,196,.3); --bord:#33445C; --bord-fort:#43566F;
    --encre:#F0F4FA; --encre-2:#B2C0D2; --encre-3:#93A3B8;
    --bleu:#7FADF5; --bleu-clair:#1D2E48; --bleu-fonce:#A9C8FA;
    --rouge:#FF8B7E; --rouge-clair:#3C231F; --violet:#C49CF0; --violet-clair:#2C2343;
    --vert:#4FD3A0; --vert-clair:#12332A; --or:#F5BE4A; --or-vif:#F5BE4A; --or-clair:#362B10;
    --turquoise:#54CBDD; --turquoise-clair:#123039; --rose:#F589B4; --rose-clair:#3A2130;
    --bouton:#7FADF5; --bouton-texte:#0F1724; --bouton-ombre:#4C7BC8;
    --ombre:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -8px rgba(0,0,0,.55);
    --ombre-forte:0 2px 6px rgba(0,0,0,.45), 0 24px 50px -16px rgba(0,0,0,.7);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --papier:#131A26; --papier-2:#1B2431; --carte:#1F2A3A; --carte-2:#18212E;
  --ligne:rgba(180,205,235,.14); --marge:rgba(240,183,196,.3); --bord:#33445C; --bord-fort:#43566F;
  --encre:#F0F4FA; --encre-2:#B2C0D2; --encre-3:#93A3B8;
  --bleu:#7FADF5; --bleu-clair:#1D2E48; --bleu-fonce:#A9C8FA;
  --rouge:#FF8B7E; --rouge-clair:#3C231F; --violet:#C49CF0; --violet-clair:#2C2343;
  --vert:#4FD3A0; --vert-clair:#12332A; --or:#F5BE4A; --or-vif:#F5BE4A; --or-clair:#362B10;
  --turquoise:#54CBDD; --turquoise-clair:#123039; --rose:#F589B4; --rose-clair:#3A2130;
  --bouton:#7FADF5; --bouton-texte:#0F1724; --bouton-ombre:#4C7BC8;
  --ombre:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -8px rgba(0,0,0,.55);
  --ombre-forte:0 2px 6px rgba(0,0,0,.45), 0 24px 50px -16px rgba(0,0,0,.7);
  color-scheme:dark;
}

/* ---------- Base ---------- */
html body{
  font-family:var(--texte); color:var(--encre);
  background-color:var(--papier);
  background-image:
    radial-gradient(760px 330px at 6% -40px, var(--rouge-clair), transparent 64%),
    radial-gradient(700px 300px at 96% 0px, var(--or-clair), transparent 62%),
    radial-gradient(1200px 500px at 48% -180px, var(--bleu-clair), transparent 74%);
  background-repeat:no-repeat; background-attachment:fixed;
}
body h1,body h2,body h3,body .kh-learning h1,body .kh-learning h2,body .kh-learning h3{
  font-family:var(--titre); font-weight:800; letter-spacing:-.01em; color:var(--encre); text-wrap:balance;
}
.brand-wordmark{color:var(--encre)}
.brand-dot,.brand-pencil::before{color:var(--rose); background-color:var(--rose)}
.brand-dot{background:none}
a{color:inherit}
:focus-visible,.button:focus-visible,a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--bleu); outline-offset:3px;
}
::selection{background:var(--bleu-clair); color:var(--encre)}

/* ---------- Boutons ---------- */
body .button{
  font-family:var(--titre); font-weight:700; font-size:15px; letter-spacing:0;
  background:var(--bouton); border-color:var(--bouton); color:var(--bouton-texte);
  border-radius:12px; box-shadow:0 3px 0 var(--bouton-ombre);
  transition:transform .12s ease, filter .12s ease;
}
body .button:hover{background:var(--bouton); border-color:var(--bouton); filter:brightness(1.07); transform:translateY(-1px)}
body .button:active{transform:translateY(1px); box-shadow:0 1px 0 var(--bouton-ombre)}
body .button.outline,body .button.secondary{
  background:var(--carte); color:var(--encre); border:1.5px solid var(--bord-fort); box-shadow:0 2px 0 var(--bord-fort);
}
body .button.outline:hover,body .button.secondary:hover{background:var(--carte); border-color:var(--bleu); color:var(--bleu); filter:none}
body .text-button{color:var(--bleu)}

/* ---------- Champs ---------- */
body input:not([type=checkbox]):not([type=radio]):not([type=range]),body select,body textarea{
  background-color:var(--papier); color:var(--encre); border-color:var(--bord-fort);
}
body input::placeholder,body textarea::placeholder{color:var(--encre-3)}
body input:not([type=checkbox]):not([type=radio]):focus,body select:focus,body textarea:focus{
  border-color:var(--bleu); box-shadow:0 0 0 3px var(--bleu-clair);
}
body input[type=checkbox],body input[type=radio]{accent-color:var(--bleu)}

/* ---------- En-têtes et navigation ---------- */
body .kahier-header.site-header,body .site-header{background:color-mix(in srgb, var(--carte) 92%, transparent); border-bottom:1.5px solid var(--bord); backdrop-filter:blur(6px)}
body .kahier-header .header-nav a:not(.button){color:var(--encre)}
body .kahier-header .mobile-nav{background:var(--carte); border-color:var(--bord)}
body .kahier-header .mobile-nav a,body .kahier-header .mobile-nav button{color:var(--encre)}
body .kh-sidebar{background:var(--carte); border-right:1.5px solid var(--bord)}
body .kh-sidebar .kh-class-label{color:var(--encre-3)}
body .kh-sidebar nav a{color:var(--encre-2); font-weight:700}
body .kh-sidebar nav a:hover{background:var(--papier-2); color:var(--encre)}
body .kh-sidebar nav a.active,body .kh-sidebar nav a[aria-current=page]{background:var(--bleu-clair); color:var(--bleu-fonce); box-shadow:inset 4px 0 0 var(--bleu)}
body .kh-sidebar-note{border-top-color:var(--bord)}
body .kh-sidebar-note>.icon{color:var(--rose)}
body .kh-sidebar-note p,body .kh-sidebar .account-profile small,body .kh-sidebar [data-logout]{color:var(--encre-2)}
body .kh-sidebar .account-profile{border-top-color:var(--bord)}
body .account-avatar{background:var(--rose-clair); color:var(--rose); font-family:var(--titre)}
body .kh-feedback-link{color:var(--encre-2)}
body .kh-learning-header{background:color-mix(in srgb, var(--carte) 90%, transparent); border-bottom:1.5px solid var(--bord)}
body .kh-context{color:var(--encre-2)}
body .kh-context>span{color:var(--encre-2)}
body .kh-learning-header>nav a{color:var(--encre-2); font-weight:700}
body .kh-learning-header .kh-reward-link{background:var(--or-clair); color:var(--or)}
body .kh-bottom-nav{background:var(--carte); border-top:1.5px solid var(--bord)}
body .kh-bottom-nav a{color:var(--encre-2)}
body .kh-bottom-nav a.active,body .kh-bottom-nav a[aria-current=page]{color:var(--bleu)}
body .kh-mobile-level{color:var(--encre-2)}

/* ---------- Cartes et feuilles ---------- */
body .kh-learning .lesson{background:var(--carte); border:1.5px solid var(--bord); border-radius:var(--r); box-shadow:var(--ombre)}
body .kh-learning .lesson h2>span{background:var(--bleu-clair); color:var(--bleu)}
/* La feuille d'exercice reprend le papier seyès du cahier : lignes discrètes et marge rose. */
body .exercise-sheet .exercise-question{
  background-color:var(--carte);
  background-image:linear-gradient(to right, transparent 14px, color-mix(in srgb, var(--marge) 80%, transparent) 14px 16px, transparent 16px),
    repeating-linear-gradient(to bottom, transparent 0 27px, color-mix(in srgb, var(--ligne) 30%, transparent) 27px 28px);
}
body .exercise-sheet .answer-option{background-color:var(--carte-2)}
body .kahier-footer{background:var(--carte); border-top:1.5px solid var(--bord); color:var(--encre-2)}
body .kahier-footer a{color:var(--encre-2)}
body .kahier-footer a:hover{color:var(--bleu)}
body dialog#modal{background:var(--carte); color:var(--encre); border:1.5px solid var(--bord); border-radius:var(--r); box-shadow:var(--ombre-forte)}

/* ---------- Thème sombre : les figures pédagogiques restent sur papier clair ---------- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) main svg:not([class*="icon"]):not(.icon):not([aria-hidden="true"]),
  :root:not([data-theme="light"]) main canvas{background:#FFF9F1; color:#22304C; border-radius:10px}
  :root:not([data-theme="light"]) main img:not([src$=".svg"]){filter:brightness(.92)}
}
:root[data-theme="dark"] main svg:not([class*="icon"]):not(.icon):not([aria-hidden="true"]),
:root[data-theme="dark"] main canvas{background:#FFF9F1; color:#22304C; border-radius:10px}

/* ---------- Primaire (CE1 → CM2) : plus rond, plus coloré, plus grand ---------- */
body.is-primary{font-size:17px}
body.is-primary .kh-learning h1{font-size:clamp(30px,5vw,42px); line-height:1.12}
body.is-primary .kh-learning h2{font-size:clamp(23px,3.6vw,29px)}
body.is-primary .kh-sidebar .kh-class-label{font-family:var(--main); font-size:23px; font-weight:700; letter-spacing:0; text-transform:none; color:var(--rose)}
body.is-primary .kh-sidebar nav a{border-radius:16px; min-height:52px; font-size:15px}
body.is-primary .kh-sidebar nav a.active,body.is-primary .kh-sidebar nav a[aria-current=page]{background:var(--or-clair); color:var(--encre); box-shadow:inset 0 0 0 2px var(--or-vif)}
body.is-primary .kh-context{font-family:var(--main); font-size:21px; color:var(--encre-2)}
body.is-primary .button{border-radius:999px; min-height:52px; padding:13px 24px; font-size:17px; box-shadow:0 4px 0 var(--bouton-ombre)}
body.is-primary .button.outline,body.is-primary .button.secondary{box-shadow:0 4px 0 var(--bord-fort)}
body.is-primary .kh-learning .lesson{border-width:2px; border-radius:24px}
body.is-primary .exercise-sheet .exercise-question{border-radius:24px}
body.is-primary .answer-option{border-radius:16px; border-width:2px; min-height:56px; font-family:var(--titre); font-size:18px}
body.is-primary .kh-learning-header .kh-reward-link{border-radius:999px; box-shadow:0 2px 0 color-mix(in srgb, var(--or-vif) 60%, transparent)}
@media (prefers-reduced-motion: no-preference){
  body.is-primary .button:hover{transform:translateY(-2px) rotate(-.6deg)}
}
@media (prefers-reduced-motion: reduce){
  body .button,body .button:hover,body .button:active{transition:none; transform:none}
}

/* ---------- Tarifs (cartes « offres » du cahier) ---------- */
body .pricing-hero .pricing-kicker{color:var(--rose); letter-spacing:.13em; font-size:13px}
body .pricing-hero h1{font-family:var(--titre); font-weight:800}
body .pricing-launch{background:var(--or-clair); color:var(--encre)!important; border:1.5px solid color-mix(in srgb, var(--or-vif) 55%, transparent); font-weight:700}
body .pricing-plan{background:var(--carte); border:1.5px solid var(--bord); border-radius:var(--r); box-shadow:0 1px 0 var(--bord-fort); padding:22px}
body .pricing-plan.is-recommended{border:2px solid var(--bleu); box-shadow:var(--ombre)}
body .pricing-plan h2{font-size:21px; color:var(--bleu)}
body .pricing-badge{top:-12px; left:auto; right:18px; background:var(--bouton); color:var(--bouton-texte); font-size:11px; letter-spacing:.09em; text-transform:uppercase; padding:4px 11px}
body .pricing-price strong{font-family:var(--titre); font-weight:800; font-size:38px; color:var(--encre)}
body .pricing-price span,body .pricing-alt{font-size:13px; font-weight:700; color:var(--encre-3)}
body .pricing-plan li{color:var(--encre-2); font-size:15px; line-height:1.45}
body .pricing-plan li span{color:var(--vert); font-weight:800}
body .pricing-grid article{background:var(--carte); border:1.5px solid var(--bord); border-radius:var(--r); box-shadow:0 1px 0 var(--bord-fort)}
body .pricing-grid article:nth-child(4n+1){border-left:5px solid var(--bleu)}
body .pricing-grid article:nth-child(4n+2){border-left:5px solid var(--rose)}
body .pricing-grid article:nth-child(4n+3){border-left:5px solid var(--vert)}
body .pricing-grid article:nth-child(4n+4){border-left:5px solid var(--or-vif)}
body .pricing-grid p,body .pricing-faq details p,body .pricing-cta p,body .pricing-hero p{color:var(--encre-2)}
body .pricing-faq details{background:var(--carte); border:1.5px solid var(--bord); border-radius:var(--r-petit)}
body .pricing-faq details[open]{border-color:var(--bleu)}
body .pricing-cta{background:var(--carte); border:1.5px solid var(--bord); box-shadow:var(--ombre); position:relative; overflow:hidden}
body .pricing-cta::after{content:""; position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(to bottom, transparent 0 27px, color-mix(in srgb, var(--ligne) 35%, transparent) 27px 28px)}
body .pricing-cta>*{position:relative; z-index:1}

/* ---------- Avis et suggestions ---------- */
body .feedback-item,body .feedback-form{background:var(--carte); border:1.5px solid var(--bord); border-radius:var(--r); box-shadow:0 1px 0 var(--bord-fort)}
body .feedback-item{border-left:4px solid var(--marge)}
body .feedback-item blockquote{font-size:16px; color:var(--encre)}
body .feedback-tag{background:var(--bleu-clair); color:var(--bleu)}
body .feedback-note{color:var(--or)}
body .feedback-kind{border:1.5px solid var(--bord); background:var(--carte-2)}
body .feedback-kind:has(input:checked){border-color:var(--bleu); background:var(--bleu-clair); box-shadow:none}
body .feedback-scale span{border:1.5px solid var(--bord-fort); background:var(--carte); font-family:var(--titre)}
body .feedback-scale input:checked + span{background:var(--bouton); color:var(--bouton-texte); border-color:var(--bouton)}
body .feedback-form textarea{border:1.5px solid var(--bord-fort); background:var(--papier); color:var(--encre)}
body .kh-feedback-link{color:var(--encre-2)}
body .kh-feedback-link:hover,body .kh-feedback-link[aria-current="page"]{color:var(--bleu)}

/* ---------- Primaire : touches ludiques ---------- */
/* Les libellés manuscrits ne restent pas en capitales (Caveat est faite pour l'écriture courante). */
body.is-primary .kh-sidebar .kh-class-label{text-transform:lowercase}
body.is-primary .kh-sidebar .kh-class-label::first-letter{text-transform:uppercase}
body.is-primary .feedback-scale span{width:46px; height:46px; border-radius:50%; font-size:18px}
body.is-primary .feedback-scale label:nth-child(-n+4) input:checked + span{background:var(--rouge); border-color:var(--rouge)}
body.is-primary .feedback-scale label:nth-child(n+5):nth-child(-n+7) input:checked + span{background:var(--or-vif); border-color:var(--or-vif); color:#22304C}
body.is-primary .feedback-scale label:nth-child(n+8) input:checked + span{background:var(--vert); border-color:var(--vert)}
body.is-primary .feedback-kind{border-radius:18px; border-width:2px}
body.is-primary .feedback-page h1::after{content:" ✏️"; font-size:.8em}
body.is-primary .account-avatar{border-radius:14px; transform:rotate(-4deg); box-shadow:0 2px 0 color-mix(in srgb, var(--rose) 40%, transparent)}

/* Tuiles de matières du primaire : une couleur de cahier par matière, bande à gauche, pastille d'icône teintée. */
body .ce1-subjects>*,body .ce2-subject-grid>.ce2-subject-card,body .cm-subjects>.cm-subject{--t:var(--bleu); --tc:var(--bleu-clair)}
body .ce1-subjects>:nth-child(6n+2),body .ce2-subject-grid>.ce2-subject-card:nth-child(6n+2),body .cm-subjects>.cm-subject:nth-child(6n+2){--t:var(--rose); --tc:var(--rose-clair)}
body .ce1-subjects>:nth-child(6n+3),body .ce2-subject-grid>.ce2-subject-card:nth-child(6n+3),body .cm-subjects>.cm-subject:nth-child(6n+3){--t:var(--vert); --tc:var(--vert-clair)}
body .ce1-subjects>:nth-child(6n+4),body .ce2-subject-grid>.ce2-subject-card:nth-child(6n+4),body .cm-subjects>.cm-subject:nth-child(6n+4){--t:var(--violet); --tc:var(--violet-clair)}
body .ce1-subjects>:nth-child(6n+5),body .ce2-subject-grid>.ce2-subject-card:nth-child(6n+5),body .cm-subjects>.cm-subject:nth-child(6n+5){--t:var(--or); --tc:var(--or-clair)}
body .ce1-subjects>:nth-child(6n),body .ce2-subject-grid>.ce2-subject-card:nth-child(6n),body .cm-subjects>.cm-subject:nth-child(6n){--t:var(--turquoise); --tc:var(--turquoise-clair)}
body .ce1-subjects>*,body .ce2-subject-grid>.ce2-subject-card,body .cm-subjects>.cm-subject{
  background:var(--carte); border:2px solid var(--bord); border-left:7px solid var(--t); border-radius:22px;
  box-shadow:0 4px 0 var(--bord-fort); color:var(--encre); transition:transform .14s ease, box-shadow .14s ease;
}
body .ce1-subjects>*:hover,body .ce2-subject-grid>.ce2-subject-card:hover,body .cm-subjects>.cm-subject:hover{border-color:var(--t); box-shadow:var(--ombre); transform:translateY(-3px) rotate(-.4deg)}
body .ce1-subjects>* h2,body .ce1-subjects>* h3,body .ce2-subject-card h2,body .cm-subject h2{color:var(--t); font-size:clamp(18px,2vw,22px); overflow-wrap:break-word; hyphens:auto}
body .ce2-subject-card .support-subject-symbol,body .cm-subject>span:first-child,body .ce1-subjects>.ce1-subject>span:first-child{background:var(--tc); color:var(--t); border-radius:14px; font-family:var(--titre); font-weight:800}
body .ce2-subject-card p,body .cm-subject p{color:var(--encre-2)}
body .ce2-subject-card>.icon,body .cm-subject>b,body .ce1-subject>b{color:var(--t)}
@media (prefers-reduced-motion: reduce){body .ce1-subjects>*:hover,body .ce2-subject-grid>.ce2-subject-card:hover,body .cm-subjects>.cm-subject:hover{transform:none}}
body .pricing-account{background:var(--carte); border:1.5px solid var(--bord); border-left:5px solid var(--bleu); box-shadow:0 1px 0 var(--bord-fort)}
body .pricing-account-ok{color:var(--vert)}
body .pricing-account-note{color:var(--encre-2)}
body .pricing-waiver{color:var(--encre-2); background:var(--or-clair); border:1.5px solid color-mix(in srgb, var(--or-vif) 50%, transparent); border-radius:var(--r-petit); padding:10px 12px}
body .legal-page h1,body .legal-page h2{font-family:var(--titre)}