(le verso reste sombre = lisible). ════════════════════════════════════════════════════════════════════ */ :root{ --memo-bg: linear-gradient(135deg,#667eea 0%,#764ba2 100%); --memo-a1:#7c3aed; --memo-a2:#a855f7; /* accent recto par défaut */ --memo-accent:#7c3aed; --memo-back: linear-gradient(160deg,#1e3a5f 0%,#0f172a 100%); /* verso sombre */ --memo-radius:20px; --memo-card-h:460px; --memo-shadow:0 14px 38px rgba(15,23,42,.30); --memo-font:'Tajawal','Cairo','Segoe UI',Tahoma,Geneva,Verdana,sans-serif; } body.memo-7e{ --memo-a1:#0ea5a4; --memo-a2:#34d399; --memo-accent:#0d9488; } body.memo-8e{ --memo-a1:#2563eb; --memo-a2:#38bdf8; --memo-accent:#1d4ed8; } body.memo-9e{ --memo-a1:#7c3aed; --memo-a2:#a855f7; --memo-accent:#7c3aed; } *{ margin:0; padding:0; box-sizing:border-box; } body{ font-family:var(--memo-font); background:var(--memo-bg); min-height:100vh; padding:24px 16px; color:#fff; } .container{ max-width:1400px; margin:0 auto; width:100%; } .header{ text-align:center; color:#fff; margin-bottom:34px; animation:fadeInDown .8s ease-out; } .header h1{ font-size:clamp(1.6rem,5vw,3.2rem); text-shadow:3px 3px 6px rgba(0,0,0,.3); margin-bottom:12px; line-height:1.25; } .header p{ font-size:clamp(1rem,2.5vw,1.4rem); opacity:.95; } @keyframes fadeInDown{ from{opacity:0; transform:translateY(-40px);} to{opacity:1; transform:translateY(0);} } .cards-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:28px; padding:8px; } .card-wrapper{ perspective:1200px; height:var(--memo-card-h); } .card{ width:100%; height:100%; position:relative; transform-style:preserve-3d; transition:transform .6s cubic-bezier(.4,.2,.2,1); cursor:pointer; } .card.flipped{ transform:rotateY(180deg); } .card-face{ position:absolute; inset:0; backface-visibility:hidden; border-radius:var(--memo-radius); padding:26px; box-shadow:var(--memo-shadow); display:flex; flex-direction:column; justify-content:space-between; align-items:center; } .card-front{ background:linear-gradient(135deg,var(--memo-a1) 0%,var(--memo-a2) 100%); color:#fff; } .card-back{ background:var(--memo-back); transform:rotateY(180deg); color:#fff; overflow-y:auto; justify-content:flex-start; } /* Variantes de couleur du recto (palette commune) */ .card-front.red { background:linear-gradient(135deg,#f5576c,#f093fb); } .card-front.orange{ background:linear-gradient(135deg,#fa709a,#fee140); } .card-front.green { background:linear-gradient(135deg,#0ea5a4,#43e97b); } .card-front.blue { background:linear-gradient(135deg,#4facfe,#00f2fe); } .card-front.purple{ background:linear-gradient(135deg,#7c3aed,#a855f7); } .card-front.teal { background:linear-gradient(135deg,#0ea5a4,#34d399); } .card-front.pink { background:linear-gradient(135deg,#ec4899,#f9a8d4); } .card-front h2{ font-size:clamp(1.3rem,3vw,2rem); text-align:center; text-shadow:2px 2px 4px rgba(0,0,0,.2); } .card-front .icon{ font-size:3.6em; margin-top:14px; animation:bounce 2s infinite; } @keyframes bounce{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-16px);} } .card-front .hint{ text-align:center; font-size:1.05em; opacity:.92; padding-top:16px; border-top:2px solid rgba(255,255,255,.3); } .card-back h3{ font-size:clamp(1.2rem,2.6vw,1.7rem); margin-bottom:18px; text-align:center; border-bottom:3px solid rgba(255,255,255,.85); padding-bottom:12px; width:100%; } .content-block{ background:rgba(255,255,255,.14); border-radius:14px; padding:18px; margin:14px 0; backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.28); width:100%; } .content-block h4{ font-size:1.25em; margin-bottom:12px; color:#fff; } .content-block p,.content-block ul{ font-size:1.08em; line-height:1.8; margin:8px 0; } .content-block ul{ list-style-position:inside; padding-right:18px; } .content-block li{ margin:7px 0; } .example-box{ background:rgba(255,255,255,.22); border-radius:10px; padding:14px; margin:14px 0; border-right:4px solid var(--memo-a2); width:100%; } .formula-highlight{ background:rgba(255,255,255,.28); padding:14px; border-radius:10px; text-align:center; font-size:1.2em; margin:14px 0; font-weight:700; } .power-table{ width:100%; margin:14px 0; border-collapse:collapse; } .power-table td{ padding:10px; text-align:center; background:rgba(255,255,255,.22); border:1px solid rgba(255,255,255,.4); font-size:1.05em; } .flip-instruction{ position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:rgba(255,255,255,.96); color:var(--memo-accent); padding:13px 26px; border-radius:50px; font-size:1.05em; font-weight:700; box-shadow:0 6px 22px rgba(0,0,0,.3); animation:pulse 2.4s infinite; z-index:1000; } @keyframes pulse{ 0%,100%{transform:translateX(-50%) scale(1);} 50%{transform:translateX(-50%) scale(1.05);} } .progress-bar{ position:fixed; top:0; left:0; width:100%; height:5px; background:rgba(255,255,255,.25); z-index:1000; } .progress-fill{ height:100%; background:linear-gradient(90deg,var(--memo-a1) 0%,var(--memo-a2) 100%); width:0%; transition:width .3s ease; } /* Maths : texte blanc, isolation LTR fournie par responsive-global */ mjx-container{ color:#fff; } @media (max-width:768px){ body{ padding:16px 10px; } .cards-grid{ grid-template-columns:1fr; gap:18px; } .card-wrapper{ height:430px; } .flip-instruction{ font-size:.95em; padding:10px 18px; } }