/* Style du site tarekmaths.fr.
   Un cadre sobre : polices du système (rien ne part chez Google), une encre bleu nuit,
   et le site qui prend la couleur de l'appli montrée dans le carrousel.
   Quatre thèmes, au choix du visiteur : auto (celui du téléphone), papier, ardoise, cahier. */

:root{
  --bg:#FAFBFE; --card:#FFFFFF; --ink:#1B2340; --ink-2:#4A5274; --ink-3:#7D84A3;
  --line:#DDE2EE; --accent:#3B5BDB; --on-accent:#FFFFFF;
  --k0:#E03131; --k1:#E8590C; --k2:#C98A00; --grey:#8A93B8;
  --paper-img:none;
  --app-tint:transparent;
  --serif:Charter,"Iowan Old Style",Georgia,"Times New Roman",serif;
  --sans:"Avenir Next","Segoe UI",system-ui,-apple-system,sans-serif;
  --round:ui-rounded,"SF Pro Rounded","Arial Rounded MT Bold",system-ui,sans-serif;
  --hand:"Bradley Hand","Segoe Print","Comic Sans MS",cursive;
}
@media (prefers-color-scheme:dark){:root:not([data-theme]){
  --bg:#10142A; --card:#181E3A; --ink:#ECEEF8; --ink-2:#B3B9D6; --ink-3:#848BAE;
  --line:#2A3158; --accent:#7C9BFF; --on-accent:#10142A;
  --k0:#FF6B6B; --k1:#FF922B; --k2:#FCC419; --grey:#9AA2C8; color-scheme:dark}}
:root[data-theme="ardoise"]{
  --bg:#1F2A27; --card:#26332F; --ink:#EEF0EA; --ink-2:#C4CBC3; --ink-3:#97A097;
  --line:rgba(238,240,234,.16); --accent:#FFD43B; --on-accent:#1F2A27;
  --k0:#FF8787; --k1:#FFA94D; --k2:#FFE066; --grey:#C4CBC3; color-scheme:dark;
  --hand:"Chalkboard SE","Bradley Hand","Segoe Print",cursive}
:root[data-theme="cahier"]{
  --bg:#FBFCFF; --card:#FFFFFF; --ink:#1E2A5A; --ink-2:#4B5687; --ink-3:#7A84AE;
  --line:#CBD5F3; --accent:#D9363E; --on-accent:#FFFFFF;
  --paper-img:linear-gradient(90deg,transparent 36px,rgba(229,72,77,.55) 36px,rgba(229,72,77,.55) 37.5px,transparent 37.5px),linear-gradient(rgba(152,169,228,.45) 1px,transparent 1px),linear-gradient(rgba(203,213,243,.45) 1px,transparent 1px);
  --paper-size:100% 100%,100% 32px,100% 8px}
/* La couleur de l'appli montrée teinte tout le site. */
:root[data-app="fabrique"]{--app-tint:rgba(76,110,245,.10)}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;color:var(--ink);font-family:var(--serif);font-size:18px;line-height:1.6;
  background-color:var(--bg);background-image:linear-gradient(var(--app-tint),var(--app-tint)),var(--paper-img);
  background-size:100% 100%,var(--paper-size,auto);background-attachment:fixed;
  transition:background-color .6s ease,color .3s ease;-webkit-font-smoothing:antialiased;
  padding-inline:16px;padding-block:0 64px}
a{color:var(--accent);text-underline-offset:3px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.page{max-width:620px;margin-inline:auto}


/* En-tête : le nom, le choix du thème. */
.top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-block:16px 8px}
.nom{font:800 18px var(--sans);letter-spacing:-.01em;color:var(--ink);text-decoration:none}
.theme{border:1px solid var(--line);background:var(--card);color:var(--ink-2);border-radius:99px;padding:6px 12px;font:600 13px var(--sans);cursor:pointer;display:inline-flex;gap:6px;align-items:center}
.theme::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--accent)}

/* L'addition qui se range : 60 + 200, les chiffres glissent à travers les zéros. */
.cascade{position:relative;width:calc(4 * var(--cw));height:3.9em;font:700 var(--fs,64px)/1 var(--round);--cw:.64em;margin-inline:auto;cursor:pointer;-webkit-tap-highlight-color:transparent;font-variant-numeric:tabular-nums}
.cascade span{position:absolute;top:0;left:0;width:var(--cw);text-align:center;transform:translate(calc(var(--x) * var(--cw)),calc(var(--y) * 1em));will-change:transform}
.cascade .k0{color:var(--k0)} .cascade .k1{color:var(--k1)} .cascade .k2{color:var(--k2)}
.cascade .plus{color:var(--grey);font-weight:600}
.cascade .pale{opacity:.3}
.cascade .mv{text-shadow:0 2px 0 var(--bg),0 4px 10px rgba(30,42,90,.28)}
.cascade .regle{position:absolute;left:calc(.75 * var(--cw));right:-.05em;top:2.42em;height:.07em;border-radius:99px;background:var(--ink)}
.revoir{display:block;margin:6px auto 0;border:0;background:none;color:var(--ink-3);font:600 14px var(--sans);cursor:pointer;padding:6px 10px}

/* Les applis : des cartes qu'on fait glisser, avec des flèches. */
.applis{margin-top:8px}
.applis-h{display:flex;justify-content:space-between;align-items:center;gap:12px}
.fleches{display:flex;gap:8px}
.fleche{width:40px;height:40px;border-radius:50%;border:1.5px solid var(--line);background:var(--card);color:var(--ink);font:700 18px var(--sans);cursor:pointer;display:grid;place-items:center}
.fleche:disabled{opacity:.35;cursor:default}
.piste{display:grid;grid-auto-flow:column;grid-auto-columns:86%;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:14px 2px 18px;margin-inline:-2px;overscroll-behavior-x:contain}
.piste::-webkit-scrollbar{display:none}
.carte{scroll-snap-align:start;border-radius:22px;padding:20px;min-height:300px;display:flex;flex-direction:column;gap:12px}
.carte.app{--bg:#FBFCFF;--ink:#1E2A5A;--k0:#E03131;--k1:#E8590C;--k2:#C98A00;--grey:#8A93B8;background:#FBFCFF;color:#1E2A5A;box-shadow:0 1px 0 rgba(30,42,90,.06),0 16px 34px -20px rgba(30,42,90,.55);border:1px solid #DCE2F7}
.carte.app img{width:84px;height:84px;border-radius:20px;box-shadow:0 6px 16px -10px rgba(30,42,90,.6)}
.carte.app h3{font:800 22px/1.2 var(--sans);margin:0}
.carte.app .pour{font:600 14px var(--sans);color:#5B6690;margin:0}
.carte.app p{margin:0;font-size:17px;line-height:1.5;color:#1E2A5A}
.carte.app .actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
.carte.zero{border:2px dashed var(--line);display:grid;place-items:center;text-align:center;color:var(--ink-3)}
.carte.zero b{display:block;font:700 120px/1 var(--round);opacity:.35}
.carte.zero span{font:600 15px var(--sans)}
.points{display:flex;justify-content:center;gap:7px}
.points i{width:7px;height:7px;border-radius:50%;background:var(--line);transition:background .2s,transform .2s}
.points i.on{background:var(--ink);transform:scale(1.25)}

.btn{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:99px;padding:12px 18px;font:700 16px var(--sans);text-decoration:none;cursor:pointer;background:#1E2A5A;color:#FFFFFF}
.btn.doux{background:transparent;color:#1E2A5A;box-shadow:inset 0 0 0 1.5px #B8C3EA}
.partage-ok{font:600 14px var(--sans);color:#2F9E44;min-height:1.2em;margin:0}

/* Textes. */
h2{font:800 22px/1.25 var(--sans);margin:44px 0 10px;letter-spacing:-.01em}
.mots{margin:0 0 14px}
.devise{font:italic 400 clamp(26px,7vw,34px)/1.2 var(--serif);text-align:center;margin:10px 0 0;text-wrap:balance}
.portrait{width:72px;height:72px;border-radius:50%;object-fit:cover;object-position:center 20%;flex:none}
.note{font:500 14px/1.5 var(--sans);color:var(--ink-3)}
footer{margin-top:52px;padding-top:18px;border-top:1px solid var(--line);font:500 15px/1.6 var(--sans);color:var(--ink-2)}
footer p{margin:0 0 6px}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
/* Thème cahier : le texte commence après la marge rouge. */
:root[data-theme="cahier"] body{padding-left:50px}