:root{--teal:#0f6b78;--teal2:#1594a5;--dark:#0a4b55;--bg:#f4f7f9;--card:#fff;--border:#e2e8f0;--ink:#1f2937;--muted:#64748b; --grid:rgba(15,107,120,.055);--hl:#fde047} *{box-sizing:border-box;margin:0;padding:0} body{font-family:Cairo,sans-serif;color:var(--ink);background:var(--bg); background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px); background-size:26px 26px} .hero{max-width:95%;margin:10px auto 8px;padding:0 10px} .hero-card{background:var(--card);border:0.5px solid var(--border);border-radius:18px;overflow:hidden; box-shadow:0 6px 24px rgba(10,75,85,.10);display:flex;align-items:stretch;position:relative} .hero-card::before{content:"";position:absolute;inset:0;pointer-events:none; background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:26px 26px} .hero-txt{flex:1;padding:15px 20px 13px;position:relative;z-index:1} .hero-kicker{font-size:11px;font-weight:800;color:var(--teal2);letter-spacing:.5px;margin-bottom:4px} .hero-title{font-family:Amiri,serif;font-size:34px;font-weight:700;color:var(--dark);line-height:1.25} .hero-title .nset{color:var(--teal2);font-size:38px} .hero-sub{font-size:12px;color:var(--muted);margin-top:6px;font-weight:600} .hero-badges{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap} .hero-badge{font-size:10.5px;font-weight:800;padding:4px 11px;border-radius:999px;border:1.5px solid} .hb-easy{color:#16a34a;border-color:#16a34a;background:#f0fdf4} .hb-med{color:#ea580c;border-color:#ea580c;background:#fff7ed} .hb-hard{color:#7c3aed;border-color:#7c3aed;background:#f5f3ff} .hero-fig{width:340px;flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:12px 14px;position:relative;z-index:1} .hero-fig svg{width:100%;height:auto;display:block} .draw{stroke-dasharray:600;stroke-dashoffset:600;animation:draw 1.2s ease forwards} .d1{animation-delay:.15s}.d2{animation-delay:.7s}.d3{animation-delay:1.15s}.d4{animation-delay:1.6s}.d5{animation-delay:2.05s} @keyframes draw{to{stroke-dashoffset:0}} .pop{opacity:0;animation:pop .45s ease forwards} .p1{animation-delay:.4s}.p2{animation-delay:.9s}.p3{animation-delay:1.35s}.p4{animation-delay:1.8s}.p5{animation-delay:2.3s}.p6{animation-delay:2.7s} @keyframes pop{0%{opacity:0;transform:translateY(4px)}100%{opacity:1;transform:translateY(0)}} .hl-sweep{transform-origin:right center;transform:scaleX(0);animation:sweep .5s ease 2.55s forwards} @keyframes sweep{to{transform:scaleX(1)}} /* le bloc vit maintenant DANS .main : il herite de sa largeur */ /* Cadre du bloc « تمارين التمكّن — 3 خطوات ». Teinte chaude volontairement en dur : var(--bg) vaut #f4f7f9, exactement le fond du body, le cadre serait invisible. .acc3-wrap = variante autonome du meme bloc (Thales_9, Divisibilitee). */ .tamkin-wrap,.acc3-wrap{max-width:none;margin:0 0 16px;padding:12px;background:#fbe8e8;border:1px solid #eecccc;border-radius:16px} .tamkin-head{background:linear-gradient(135deg,#dc2626,#991b1b);border:2px solid #fecaca;border-radius:10px;cursor:pointer;border-right:4px solid #fecaca;padding:7px 12px;display:flex;align-items:center;gap:9px;min-height:46px;transition:box-shadow .15s,transform .15s;box-shadow:0 6px 20px rgba(185,28,28,.38);animation:tamkinPulse 2.4s ease-in-out infinite} /* le texte du bouton est en style inline dans le HTML : !important obligatoire */ .tamkin-head div[style*="color:#7f1d1d"],.tamkin-head #tamkin-arrow,.tamkin-head>span{color:#fff!important} .tamkin-head #tamkin-sub{color:rgba(255,255,255,.92)!important} @keyframes tamkinPulse{0%,100%{box-shadow:0 6px 20px rgba(185,28,28,.38)}50%{box-shadow:0 6px 26px rgba(185,28,28,.65)}} .tamkin-head:hover{box-shadow:0 8px 26px rgba(185,28,28,.55);transform:translateY(-1px)} .tamkin-head:focus-visible{outline:3px solid #7f1d1d;outline-offset:3px} .tamkin-head.open{border-radius:12px 12px 0 0;border-bottom-color:transparent} .tamkin-panel{display:none;background:var(--card);border:0.5px solid var(--border);border-top:none;border-radius:0 0 12px 12px;padding:12px 12px 16px} .tamkin-panel.open{display:block} .sq-tamkin{width:30px;height:30px;border-radius:5px;background:#b91c1c;color:#fff;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;text-decoration:none;transition:transform .15s;flex-shrink:0} .sq-tamkin:hover{transform:scale(1.2)} .layout{display:flex;gap:12px;max-width:95%;margin:0 auto;padding:0 10px 20px;align-items:flex-start} .sidebar{width:190px;flex-shrink:0;position:sticky;top:12px;display:flex;flex-direction:column;gap:7px} .gemini-btn{border-radius:14px;border:2px solid #4285f4;background:linear-gradient(135deg,#4285f4,#a855f7);color:#fff;display:flex;align-items:center;justify-content:center;gap:8px;font-family:Cairo;font-weight:800;font-size:13px;padding:12px;transition:transform .2s;box-shadow:0 4px 16px rgba(66,133,244,.25);text-decoration:none} .gemini-btn:hover{transform:scale(1.03)} .side-left{width:158px;flex-shrink:0;position:sticky;top:12px} .big-actions{display:flex;flex-wrap:wrap;gap:8px;background:var(--card);border:0.5px solid var(--border);border-radius:14px;padding:10px} .big-actions a{flex:1;min-height:76px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border-radius:12px;text-decoration:none;color:#fff;font-family:Cairo;font-weight:800;font-size:12px;text-align:center;transition:transform .15s,box-shadow .15s} .big-actions a:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.18)} .ba-ico{font-size:22px;line-height:1} .btn-pdf{background:linear-gradient(160deg,#ef5350,#c0392b)} .btn-devoirs{background:linear-gradient(160deg,#42a5f5,#2471a3)} /* 🧩 Le composeur : il ne remplace pas un generateur, il les REUNIT — d'ou une ligne a lui, sous les autres, et un habillage clair au lieu d'un aplat de plus. Demande du chef (21/08) : « sous les boutons pdf et devoirs, une couleur plus consistante ». */ .btn-composeur{flex:1 1 100%;min-height:56px!important;flex-direction:row!important; background:var(--card);border:1.5px solid var(--border);color:var(--ink)!important; gap:9px!important} .btn-composeur .ba-ico{color:#22c55e} .btn-composeur:hover{border-color:var(--teal);background:#f7fbfb} /* ══════════════════════════════════════════════════════════════════════ LA COLONNE D'ACTIONS — disposition et palette (21/08/2026) CE QUI N'ALLAIT PAS : les pastilles tenaient sur une seule ligne de 158 px. A trois, chacune faisait ~44 px de large pour une etiquette de 12 px — plus petites que les vignettes de l'accordeon, alors qu'elles menent aux devoirs, aux fiches et au composeur. Et la place existait : la colonne des paragraphes est longue, celle-ci etait presque vide. CE QUI CHANGE : un bouton par ligne, en rangee icone + texte, et un rangement par IMPORTANCE plutot que par famille : · primaire .btn-devoirs violet plein, ombre — l'action attendue · fantome .btn-composeur blanc cerne de violet — l'action offerte · document .btn-pdf blanc discret, le rouge dans le seul pictogramme — une piece jointe, pas un rival Palette proposee par le chef le 21/08 et reprise telle quelle. ⚠️ `color` porte `!important` : la regle `.big-actions a` ci-dessus impose `color:#fff`, et `.btn-composeur` va jusqu'a `color:var(--ink)!important`. Sans cela le texte reste blanc sur fond pale — donc invisible. ⚠️ NE PAS DEPLACER CE BLOC APRES LES @media DE BAS DE FICHIER : ils redefinissent `.big-actions a` pour les petits ecrans et doivent garder le dernier mot. */ .side-left{width:196px} .big-actions{gap:9px;padding:11px} .big-actions a{ flex:1 1 100%;min-height:62px;border-radius:14px; display:flex;align-items:center;justify-content:center;gap:8px; font-weight:700;font-size:14.5px;line-height:1.35; } .big-actions .ba-ico{font-size:22px} /* primaire */ .big-actions .btn-devoirs{ background:linear-gradient(135deg,#7c5cf0,#6a49e0);color:#fff!important; border:2px solid transparent;box-shadow:0 5px 14px rgba(108,73,224,.32); } /* fantome */ .big-actions .btn-composeur{ background:#fff;color:#5b45b8!important;border:2px solid #cdbdfb; min-height:62px!important;font-size:14.5px;gap:8px; } .big-actions .btn-composeur:hover{background:#faf8ff;border-color:#b9a3f8} .big-actions .btn-composeur .ba-ico{color:#7c5cf0} /* document — seule touche de rouge : le pictogramme */ .big-actions .btn-pdf{ background:#fff;color:#5a6178!important;border:1.5px solid #dfe3ee; font-weight:600; } .big-actions .btn-pdf:hover{border-color:#c7cddd;background:#fbfcfe} .big-actions .btn-pdf .ba-ico{color:#e0392f} /* ══════════════════════════════════════════════════════════════════════ */ .tools-lbl{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;text-align:center} .tools-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px} .tool-btn{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px;border-radius:9px;border:0.5px solid var(--border);background:var(--card);text-decoration:none;color:var(--ink);font-size:9px;font-weight:700;text-align:center;transition:all .15s} .tool-btn:hover{background:#eef7f7;border-color:var(--teal);transform:translateY(-1px)} .tool-icon{font-size:18px} .main{flex:1;min-width:0} .zone-lbl{font-size:11px;font-weight:700;color:var(--muted);margin-bottom:8px} /* Chaque ligne de #para-list est UN paragraphe : chacun son cadre, pas un cadre commun. Bleu accorde au lisere porte par .para-head. */ .para-wrap{margin-bottom:8px;background:#e9edfb;border:1px solid #ccd5f3;border-radius:16px;padding:8px} .para-head{background:var(--card);border:0.5px solid var(--border);border-radius:10px;cursor:pointer;border-right:4px solid var(--teal);padding:7px 12px;display:flex;align-items:center;gap:9px;min-height:46px;transition:box-shadow .15s,transform .15s;position:relative;overflow:hidden} .para-head:hover{box-shadow:0 4px 14px rgba(15,107,120,.14);transform:translateY(-1px)} .para-head.open{border-radius:12px 12px 0 0;border-bottom-color:transparent} .para-icon{font-size:16px;flex-shrink:0;width:30px;height:30px;border-radius:8px;background:#eef7f7;display:flex;align-items:center;justify-content:center;transition:background .15s} .para-head:hover .para-icon{background:var(--teal)} .para-name{font-size:13.5px;font-weight:800;color:var(--dark);line-height:1.3} .para-counts{font-size:9.5px;color:var(--muted);margin-top:1px;display:flex;gap:8px;flex-wrap:nowrap;white-space:nowrap;overflow:hidden} .para-arrow{color:var(--muted);font-size:12px;transition:transform .25s;margin-right:auto} .para-arrow.open{transform:rotate(90deg)} .panel{display:none;background:var(--card);border:0.5px solid var(--border);border-top:none;border-radius:0 0 12px 12px;overflow:hidden} .panel.open{display:block} .rub-bar{padding:8px 10px;border-bottom:0.5px solid var(--border);display:flex;gap:5px;flex-wrap:wrap;background:#fafafa} .rub-btn{border-radius:7px;padding:5px 10px;font-family:Cairo;font-size:11px;font-weight:800;cursor:pointer;border:2px solid;transition:all .15s;white-space:nowrap} .sq-zone{padding:10px 10px 12px;background-color:#f8fffe; background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:26px 26px} .sq-row{display:flex;gap:5px;flex-wrap:wrap;align-items:center} /* carré = icône du niveau (🌱 اكتشف / 🔥 تمرّن / ⭐ تحدّى) + numéro de la série */ .sq{width:34px;height:34px;border-radius:6px;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center; font-size:10px;font-weight:800;line-height:1;text-decoration:none;transition:transform .15s;flex-shrink:0} .sq .sq-ico{font-size:11px;line-height:1} .sq b{font-size:9px;font-weight:800;line-height:1.15} .sq:hover{transform:scale(1.2);box-shadow:0 3px 8px rgba(0,0,0,.25)} .sq-more{font-size:10px;font-weight:800;color:var(--teal);background:#fff;border:1.5px dashed var(--teal);border-radius:7px;padding:5px 10px;cursor:pointer;font-family:Cairo;transition:all .15s} .sq-more:hover{background:var(--teal);color:#fff} .sq-info{font-size:10px;color:var(--muted);padding:4px 0 0;font-weight:600} .sq-grp{margin-bottom:4px} /* pastilles enroulées (même mise en page que تمارين التمكّن) : les groupes se posent côte à côte et s'enroulent ; celui qu'on ouvre prend toute la ligne. */ .sq-groups{display:flex;gap:5px;flex-wrap:wrap;align-items:flex-start} .sq-groups>.sq-grp.open,#tamkin-squares>.sq-grp.open{flex-basis:100%} /* un groupe qui n'a qu'une page : la pastille EST le lien (plus d'accordéon à un bouton) */ .sq-grp-lbl.sq-lnk{text-decoration:none} .sq-grp-lbl .grp-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0} .sq-grp-lbl{font-size:11.5px;font-weight:800;color:var(--dark);display:flex;align-items:center;gap:7px; cursor:pointer;padding:7px 10px;border:0.5px solid var(--border);border-radius:8px;background:#fff;transition:all .15s;user-select:none} .sq-grp-lbl:hover{background:#eef7f7;border-color:var(--teal)} .sq-grp.open>.sq-grp-lbl{background:#eef7f7;border-color:var(--teal);border-radius:8px 8px 0 0} .sq-grp-lbl .grp-ar{font-size:9px;color:var(--muted);transition:transform .2s;display:inline-block} .sq-grp.open>.sq-grp-lbl .grp-ar{transform:rotate(-90deg);color:var(--teal)} .sq-grp-lbl .grp-n{margin-inline-start:auto;color:var(--muted);font-weight:700;font-size:9.5px;background:var(--bg);padding:1px 8px;border-radius:999px} .sq-grp.open>.sq-row{border:0.5px solid var(--teal);border-top:none;border-radius:0 0 8px 8px;padding:8px;margin-bottom:0} #tamkin-squares .sq-grp.open>.sq-row{border-color:#f0b4b4} #tamkin-squares .sq-grp.open>.sq-grp-lbl{border-color:#f0b4b4;background:#fdeaea;color:#7f1d1d} .c-easy{background:#16a34a}.c-medium{background:#ea580c}.c-hard{background:#7c3aed} @media(prefers-reduced-motion:reduce){.draw,.pop,.hl-sweep,.tamkin-head{animation:none;stroke-dashoffset:0;opacity:1;transform:none}*{transition-duration:.01ms !important}} @media(max-width:768px){ .hero{padding:0 8px;margin:8px auto 6px} .hero-card{flex-direction:column} .hero-fig{width:100%;padding:0 16px 12px} .hero-title{font-size:28px} .layout{flex-direction:column;gap:8px;padding:0 8px 16px} .sidebar{width:100%;position:static;flex-direction:row;flex-wrap:wrap;gap:4px;border-bottom:1.5px solid var(--teal);padding-bottom:8px;margin-bottom:4px} .tools-grid{display:flex;flex-wrap:wrap;gap:4px;flex:1} .tool-btn{flex-direction:row;padding:5px 8px;font-size:9px} .tool-icon{font-size:16px} .side-left{width:100%;position:static;order:-1;margin-bottom:4px} .big-actions{padding:8px;gap:6px}.big-actions a{min-height:60px;flex-direction:column;gap:4px;font-size:11px} .ba-ico{font-size:20px} .main{padding:0} .para-head,.tamkin-head{padding:6px 10px;gap:8px;min-height:40px;border-radius:9px;border-right-width:3px} .para-icon{width:26px;height:26px;font-size:14px} .para-name{font-size:13px} .para-counts{font-size:9px;gap:6px;margin-top:0} .para-arrow{font-size:11px} .sq{width:32px;height:32px;font-size:9px}.sq .sq-ico{font-size:10px}.sq b{font-size:8px} } @media(max-width:640px){ .hero{padding:0 8px;margin:8px auto 6px} .hero-card{flex-direction:column} .hero-fig{width:100%;padding:0 14px 10px} .hero-title{font-size:26px} .hero-txt{padding:12px 16px 10px} .layout{flex-direction:column;gap:6px;padding:0 6px 12px} .sidebar{width:100%;position:static;flex-direction:row;flex-wrap:wrap;gap:4px;border-bottom:1.5px solid var(--teal);padding-bottom:6px;margin-bottom:4px} .tools-grid{display:flex;flex-wrap:wrap;gap:3px;flex:1} .tool-btn{flex-direction:row;padding:4px 6px;font-size:8px} .tool-icon{font-size:14px} .side-left{width:100%;position:static;order:-1;margin-bottom:4px} .big-actions{padding:6px;gap:5px}.big-actions a{min-height:52px;flex-direction:row;gap:5px;font-size:10px;border-radius:8px}.ba-ico{font-size:18px} .main{padding:0 4px}.tamkin-wrap,.acc3-wrap{padding:7px;border-radius:12px} .para-head,.tamkin-head{padding:5px 9px;gap:7px;min-height:38px;border-radius:8px;border-right-width:3px} .para-icon{width:24px;height:24px;font-size:13px;border-radius:6px} .para-name{font-size:12px} .para-counts{font-size:8.5px;gap:5px;margin-top:0} .para-arrow{font-size:10px} .para-wrap{margin-bottom:5px;padding:5px;border-radius:12px} .sq{width:30px;height:30px;font-size:8px}.sq .sq-ico{font-size:9px}.sq b{font-size:7.5px} } @media(max-width:480px){ .hero{padding:0 6px;margin:6px auto 4px} .hero-card{flex-direction:column} .hero-fig{width:100%;padding:0 10px 8px} .hero-txt{padding:10px 12px 8px} .hero-title{font-size:22px} .hero-sub{font-size:11px;margin-top:4px} .hero-kicker{font-size:10px;margin-bottom:2px} .layout{flex-direction:column;gap:5px;padding:0 4px 10px} .sidebar{gap:3px;padding-bottom:5px;margin-bottom:3px;border-bottom-width:1px} .gemini-btn{padding:10px;font-size:12px}.gemini-btn span:last-child{display:none} .tools-lbl{font-size:9px;margin-bottom:4px} .tools-grid{gap:2px} .tool-btn{padding:3px 4px;font-size:7px;gap:1px} .tool-icon{font-size:12px} .side-left{margin-bottom:3px} .big-actions{padding:5px;gap:4px}.big-actions a{min-height:48px;font-size:9px;border-radius:7px}.ba-ico{font-size:16px} .para-head,.tamkin-head{padding:4px 8px;gap:6px;min-height:36px;border-radius:7px;border-right-width:2px} .para-icon{width:22px;height:22px;font-size:12px;border-radius:5px} .para-name{font-size:11px} .para-counts{font-size:7.5px;gap:4px} .para-arrow{font-size:9px} .sq{width:28px;height:28px;font-size:7px}.sq .sq-ico{font-size:8px}.sq b{font-size:7px} .rub-btn{padding:4px 8px;font-size:10px} } @media(max-width:360px){ .hero-title{font-size:20px} .hero-txt{padding:8px 10px} .layout{padding:0 2px 8px} .para-name{font-size:10px} .sq{width:26px;height:26px} } /* ══════ Rubrique « أنشطة القسم » : activités faisables en classe (side-left) ══════ */ .acts{margin-top:7px;background:var(--card);border:0.5px solid var(--border);border-radius:14px;overflow:hidden} .acts>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:7px; padding:9px 10px;font-size:12px;font-weight:800;color:var(--dark); background:linear-gradient(160deg,#eef7f7,#e2f0f2);border-right:4px solid var(--teal2)} .acts>summary::-webkit-details-marker{display:none} .acts>summary:hover{background:linear-gradient(160deg,#e2f0f2,#d3e8ec)} .acts>summary:focus-visible{outline:3px solid var(--teal);outline-offset:-3px} .acts-ico{font-size:18px;line-height:1} .acts-cnt{margin-right:auto;font-size:9.5px;font-weight:800;color:#fff;background:var(--teal2); border-radius:999px;padding:2px 7px;min-width:22px;text-align:center} .acts-list{display:flex;flex-direction:column;gap:3px;padding:8px} .act-item{display:flex;align-items:center;gap:6px;padding:6px 7px;border-radius:9px; border:0.5px solid var(--border);background:var(--card);text-decoration:none; color:var(--ink);font-size:10px;font-weight:700;line-height:1.35;transition:all .15s} .act-item:hover{background:#eef7f7;border-color:var(--teal);transform:translateX(-2px)} .act-n{flex:0 0 20px;height:20px;border-radius:6px;background:#eef7f7;color:var(--teal); display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800} .act-item:hover .act-n{background:var(--teal);color:#fff} .act-name{flex:1;min-width:0} @media(max-width:1024px){ .acts-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:5px} } @media(max-width:480px){ .acts>summary{padding:7px 8px;font-size:11px} .acts-list{grid-template-columns:1fr 1fr;padding:6px} .act-item{font-size:9px;padding:5px 6px} } /* ── Infobulles des boutons d'index (voir assets/js/core/index-tips.js) ──────── Bulle sobre au survol ET au focus clavier. L'eleve peut les couper : le bouton 💬 pose .no-tips sur , la preference tient en localStorage. */ [data-tip]{position:relative} [data-tip]::after,[data-tip]::before{ position:absolute;bottom:calc(100% + 9px);left:50%; opacity:0;visibility:hidden;pointer-events:none; transform:translate(-50%,4px); transition:opacity .18s ease,transform .18s cubic-bezier(.22,1,.36,1),visibility .18s; z-index:60} [data-tip]::after{ content:attr(data-tip); width:max-content;max-width:210px;white-space:normal;text-align:center; background:rgba(15,23,42,.96);color:#fff; font-size:10.5px;font-weight:600;line-height:1.5;letter-spacing:.1px; padding:7px 11px;border-radius:9px; box-shadow:0 10px 26px rgba(15,23,42,.26),0 2px 6px rgba(15,23,42,.16)} [data-tip]::before{ content:"";bottom:calc(100% + 4px); border:5px solid transparent;border-top-color:rgba(15,23,42,.96); transform:translate(-50%,4px)} [data-tip]:hover::after,[data-tip]:hover::before, [data-tip]:focus-visible::after,[data-tip]:focus-visible::before{ opacity:1;visibility:visible;transform:translate(-50%,0)} /* la bulle deborde de la carte des outils : sinon elle serait rognee */ .sidebar,.tools-grid,.big-actions{overflow:visible} .dv-tips-toggle{ margin-inline-start:6px;padding:0 5px;line-height:1.6; font-size:11px;cursor:pointer; background:transparent;border:1px solid var(--border);border-radius:999px; opacity:.55;transition:opacity .15s,background .15s} .dv-tips-toggle:hover{opacity:1;background:var(--bg)} .dv-tips-toggle.is-off{opacity:.3;filter:grayscale(1)} body.no-tips [data-tip]::after,body.no-tips [data-tip]::before{display:none} @media(prefers-reduced-motion:reduce){[data-tip]::after,[data-tip]::before{transition:none}} /* ══════════════════════════════════════════════════════════════════════ LA COLONNE D'ACTIONS SUR PETIT ECRAN — correctif du 21/08/2026 EN FIN DE FICHIER, ET C'EST VOULU : ces regles doivent passer APRES les @media de 960/640/420 px ci-dessus, sinon elles ne s'appliquent pas. (Le bloc de palette, lui, est place AVANT eux : c'est l'inverse, et c'est normal — lui doit LEUR ceder la main, celui-ci doit la prendre.) DEUX CHOSES MESUREES SUR TELEPHONE (375 px) : 1. Les @media d'origine descendaient l'etiquette a 9 px. C'etait deja le cas avant ce chantier, et c'etait tenable tant que les boutons etaient trois pastilles de 106 px. Depuis qu'ils occupent toute la largeur — 327 px — 9 px de texte au milieu d'un bandeau est illisible. 2. `.btn-composeur` porte `min-height:…!important` : il restait a 62 px et 14,5 px pendant que ses voisins tombaient a 48 px et 9 px. Un bouton qui ignore le responsive de ses freres deforme la colonne. ⛔ Ne pas remonter ce bloc plus haut dans le fichier. */ @media (max-width:960px){ .big-actions a{font-size:13px;min-height:52px;flex-direction:row;gap:8px} .big-actions .ba-ico{font-size:19px} .big-actions .btn-composeur{min-height:52px!important;font-size:13px} } @media (max-width:420px){ .big-actions a{font-size:12.5px;min-height:48px;gap:7px} .big-actions .ba-ico{font-size:18px} .big-actions .btn-composeur{min-height:48px!important;font-size:12.5px} } /* ── En dessous de 768 px, la colonne passe AU-DESSUS du contenu ─────── Et la, un bouton par ligne devient absurde : la colonne fait toute la largeur de l'ecran (mesure : 714 px a 768, 596 px a 640), donc quatre bandeaux geants empiles avant qu'on ait vu le premier exercice. On revient a une rangee qui se replie toute seule ; le composeur garde sa ligne, c'est le seul qui fabrique. */ @media (max-width:768px){ .big-actions a{flex:1 1 auto;min-width:104px} .big-actions .btn-composeur{flex:1 1 100%!important} } /* ══════════════════════════════════════════════════════════════════════ CTA « اختر لي » — la bande d'entree de la colonne centrale (21/08/2026) Elle se pose entre .acc3-wrap (la bande rouge) et #para-list. L'ordre de lecture devient : le parcours complet, puis « choisis pour moi », puis la liste des paragraphes. TURQUOISE, et ce n'est pas une couleur de plus : elle est reprise du SVG du hero. Le code couleur de la page se lit alors sans legende — violet outils du professeur (colonne de gauche) rouge la bande « تمارين التمكّن » turquoise le point de depart de l'eleve Avant, ce bouton portait le meme violet que « فروض جاهزة » : deux boutons se disputaient le regard sans avoir ni la meme cible ni la meme importance. 🔴 C'EST UN