/* ========================================================================= MOSAÏCA — ÉDUCATION ET PÉDAGOGIE ADAPTÉE ------------------------------------------------------------------------- Feuille chargée UNIQUEMENT par industries/education.html. Toutes les règles sont préfixées `edu-` et confinées à `.edu-page` : aucune autre page du site ne peut être atteinte, même si une classe portait le même nom ailleurs. MISE EN PAGE Une idée principale par écran. Sur ordinateur, chaque scène occupe au minimum la hauteur visible sous la barre de navigation ; sur téléphone, aucune hauteur n'est imposée : le contenu se déroule naturellement. ANIMATION L'état par défaut de chaque schéma EST son état final : rien n'est masqué sans JavaScript, sans IntersectionObserver ou en mouvement réduit. Les états d'attente n'existent que sous `html.edu-anim`, classe posée par le filet du et confirmée par le script. Uniquement `transform`, `opacity`, `stroke-dasharray` et `stroke-dashoffset` : rendu identique dans Chrome et Edge, aucune animation permanente. PALETTE : variables globales de assets/styles.css. Deux teintes de service, absentes du global : --edu-gold-text doré assombri, lisible sur fond clair (≥ 6:1) --edu-body gris-bleu de lecture (≥ 8:1 sur blanc) ========================================================================= */ /* ═════════════════════════════════════════════════════════ 1. JETONS ═══ */ .edu-page{ --edu-navy:var(--navy,#0e4d6c); --edu-deep:var(--navy-deep,#0a3850); --edu-gold:var(--gold,#C9A45C); --edu-gold-dark:var(--gold-dark,#A9803F); --edu-gold-text:#7a5a24; --edu-gray1:var(--gray1,#F8F9FA); --edu-body:#3d4a52; --edu-body-dim:#5c6a72; --edu-on-dark:rgba(255,255,255,0.84); --edu-on-dark-dim:rgba(255,255,255,0.66); --edu-line:rgba(10,56,80,0.14); --edu-stroke:rgba(10,56,80,0.34); --edu-stroke-soft:rgba(10,56,80,0.16); --edu-node:#0a3850; --edu-shell:1180px; --edu-pad:clamp(1.25rem,4vw,3rem); /* Hauteur d'un écran utile. 100vh d'abord (repli universel), 100svh ensuite pour les navigateurs mobiles à barre d'adresse rétractable. */ --edu-screen:calc(100vh - var(--nav-h,68px)); font-family:'Space Grotesk',sans-serif; color:var(--edu-body); } @supports (height:100svh){ .edu-page{--edu-screen:calc(100svh - var(--nav-h,68px))} } .edu-page [data-edu-theme="dark"]{ --edu-stroke:rgba(255,255,255,0.36); --edu-stroke-soft:rgba(255,255,255,0.16); --edu-node:rgba(255,255,255,0.88); --edu-line:rgba(255,255,255,0.18); } .edu-page [id]{scroll-margin-top:calc(var(--nav-h,68px) + 1rem)} /* ═══════════════════════════════════════════ 2. SCÈNE ET CONTENEUR ═════ */ .edu-scene{ position:relative; min-height:var(--edu-screen); display:flex; align-items:center; padding-block:clamp(3rem,7vh,5.5rem); } .edu-scene--white{background:#fff} .edu-scene--gray{background:var(--edu-gray1)} .edu-scene--navy{background:var(--edu-deep)} .edu-shell{ width:min(var(--edu-shell),100%); margin-inline:auto; padding-inline:var(--edu-pad); } .edu-shell > *{min-width:0} .edu-narrow{max-width:900px} .edu-split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2rem,5vw,4.5rem); align-items:center; } .edu-split--tight{grid-template-columns:minmax(0,1.08fr) minmax(0,0.92fr)} .edu-split--flip .edu-viz{order:-1} /* ═══════════════════════════════════════════════════ 3. TYPOGRAPHIE ═══ */ .edu-eyebrow{ font-size:0.78rem;font-weight:700; letter-spacing:0.16em;text-transform:uppercase; line-height:1.55; color:var(--edu-gold-text); margin:0 0 1.15rem; } [data-edu-theme="dark"] .edu-eyebrow{color:var(--edu-gold)} .edu-h1{ font-family:'Ibarra Real Nova',serif;font-weight:700; font-size:clamp(1.95rem,1.2rem + 2.7vw,3.4rem); line-height:1.12;color:#fff; margin:0 0 1.4rem;max-width:24ch; } .edu-h2{ font-family:'Ibarra Real Nova',serif;font-weight:700; font-size:clamp(1.55rem,1.05rem + 2.05vw,2.6rem); line-height:1.16;color:var(--edu-deep); margin:0 0 1.2rem;max-width:24ch; } [data-edu-theme="dark"] .edu-h2{color:#fff} .edu-h2--wide{max-width:32ch} .edu-p{ font-size:1.05rem;line-height:1.75; color:var(--edu-body);max-width:58ch;margin:0; } .edu-p + .edu-p{margin-top:1rem} [data-edu-theme="dark"] .edu-p{color:var(--edu-on-dark)} .edu-lead{ font-size:1.1rem;line-height:1.72; color:var(--edu-on-dark);max-width:54ch;margin:0; } /* Phrase forte : une seule par écran, jamais un encadré publicitaire. */ .edu-statement{ font-family:'Ibarra Real Nova',serif; font-size:clamp(1.3rem,1rem + 1.4vw,2rem); line-height:1.35;color:var(--edu-navy); max-width:26ch;margin:clamp(2rem,5vh,3rem) auto 0; padding-left:1.25rem;border-left:2px solid var(--edu-gold); } .edu-statement--inline{ font-size:clamp(1.12rem,0.95rem + 0.8vw,1.42rem); max-width:40ch;margin:1.6rem 0 0;padding-left:1.1rem; } .edu-statement--dark{color:var(--edu-gold)} /* Vigilance éditoriale : une réserve tenue, jamais un avertissement. */ .edu-caution{ margin:1.5rem 0 0;padding-left:1rem; border-left:1px solid var(--edu-line); font-size:0.96rem;line-height:1.6; color:var(--edu-body-dim);max-width:54ch; } .edu-result{ margin:1.35rem 0 0;padding-top:1rem; border-top:1px solid var(--edu-line); font-size:1.02rem;line-height:1.65; color:var(--edu-deep);max-width:52ch; } .edu-result b{ display:block; font-size:0.74rem;font-weight:700; letter-spacing:0.15em;text-transform:uppercase; color:var(--edu-gold-text);margin-bottom:0.4rem; } /* ══════════════════════════════════════════════ 4. ACTIONS ET LIENS ═══ */ .edu-actions{display:flex;flex-wrap:wrap;gap:0.85rem 1rem;margin-top:2.1rem} .edu-btn{ display:inline-flex;align-items:center;justify-content:center; min-height:48px;padding:0.8rem 1.55rem; font-family:'Space Grotesk',sans-serif; font-size:1rem;font-weight:600;line-height:1.3; text-decoration:none; border:1px solid transparent;border-radius:1px; transition:background-color .25s ease,color .25s ease,border-color .25s ease; } .edu-btn--gold{background:var(--edu-gold);color:#0a3850;border-color:var(--edu-gold)} .edu-btn--gold:hover{background:#d9b674;border-color:#d9b674;color:#0a3850} .edu-btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,0.45)} .edu-btn--ghost:hover{border-color:var(--edu-gold);color:var(--edu-gold)} [data-edu-theme="light"] .edu-btn--ghost{color:var(--edu-deep);border-color:var(--edu-line)} [data-edu-theme="light"] .edu-btn--ghost:hover{border-color:var(--edu-gold);color:var(--edu-gold-text)} .edu-link{ display:inline-flex;align-items:center;gap:0.55rem; margin-top:1.1rem;min-height:44px; font-size:1rem;font-weight:600; color:var(--edu-gold-text);text-decoration:none; border-bottom:1px solid currentColor;padding-bottom:0.1rem; transition:color .22s ease; } .edu-link::after{content:"→";font-weight:400} .edu-link:hover{color:var(--edu-deep)} .edu-page a:focus-visible, .edu-page button:focus-visible{ outline:2px solid var(--edu-gold-dark); outline-offset:3px; } [data-edu-theme="dark"] a:focus-visible, [data-edu-theme="dark"] button:focus-visible{outline-color:var(--edu-gold)} .edu-crumb{ font-size:0.82rem;line-height:1.6; color:rgba(255,255,255,0.62);margin-bottom:1.6rem; } .edu-crumb a{color:rgba(255,255,255,0.82);text-decoration:none} .edu-crumb a:hover{color:var(--edu-gold)} /* ══════════════════════════════════════════ 5. RÉVÉLATIONS (ARMÉES) ═══ */ .edu-anim [data-edu-in="rise"]{ opacity:0;transform:translateY(16px); transition:opacity .7s ease,transform .7s cubic-bezier(.22,.61,.36,1); } .edu-anim [data-edu-in="rise"].is-in{opacity:1;transform:none} .edu-anim [data-edu-in="rise"][data-edu-delay="1"]{transition-delay:.14s} /* ═════════════════════════════════════════════════ 6. SCHÉMAS (SVG) ═══ */ .edu-page svg{display:block;width:100%;height:auto} .edu-viz-line{fill:none;stroke:var(--edu-stroke);stroke-width:1} .edu-viz-soft{fill:var(--edu-stroke-soft);stroke:var(--edu-stroke-soft);stroke-width:1} .edu-viz-soft path{fill:none} .edu-viz-gold{fill:none;stroke:var(--edu-gold);stroke-width:1.6} .edu-viz-goldfill{fill:var(--edu-gold);stroke:none} .edu-viz-nodefill{fill:var(--edu-node);stroke:none} .edu-viz-relay{fill:#fff;stroke:var(--edu-node);stroke-width:1.4} [data-edu-theme="dark"] .edu-viz-relay{fill:var(--edu-deep)} .edu-viz{margin:0;width:100%} /* Images-clés communes. Chaque règle n'écrit que son état de départ : l'état d'arrivée reste celui de la feuille, donc identique au repos. */ @keyframes eduFade{from{opacity:0}} @keyframes eduRise{from{opacity:0;transform:translateY(8px)}} @keyframes eduPop{from{opacity:0;transform:scale(.4)}} @keyframes eduDraw{from{stroke-dashoffset:var(--edu-len,600)}} @keyframes eduGrowX{from{transform:scaleX(0)}} @keyframes eduGrowY{from{transform:scaleY(0)}} /* ══════════════════════════════════════════════════ 7. ÉCRAN 1 HÉROS ═══ */ .edu-hero{background:var(--edu-deep);overflow:hidden} .edu-hero__inner{ display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,0.92fr); gap:clamp(2rem,5vw,4.5rem); align-items:center; } .edu-hero__viz{ position:relative; display:grid; grid-template-columns:minmax(96px,158px) minmax(0,1fr); gap:0.75rem; width:min(100%,500px); margin:0;justify-self:end; } /* Légende HTML : aucun texte essentiel n'est enfermé dans le SVG. */ .edu-hero__legend{position:relative;list-style:none;margin:0;padding:0} .edu-hero__legend li{ position:absolute;right:0;transform:translateY(-50%); display:flex;gap:0.45rem;align-items:baseline; font-size:0.76rem;line-height:1.35;text-align:right; color:var(--edu-on-dark-dim);max-width:100%; } .edu-hero__n{color:var(--edu-gold);font-weight:700;font-size:0.68rem;letter-spacing:0.06em;flex:none} /* Positions calées sur les trois bandes du SVG (y = 62, 190 et 418 dans un viewBox de 480 de haut). */ .edu-hero__legend li:nth-child(1){top:12.9%} .edu-hero__legend li:nth-child(2){top:39.6%} .edu-hero__legend li:nth-child(3){top:87.1%} /* L'impulsion traverse les conditions avant de devenir un geste stable. */ .edu-anim .is-in .edu-hero-seed{transform-box:fill-box;transform-origin:center;animation:eduPop 300ms ease both} .edu-anim .is-in .edu-hero-drop{stroke-dasharray:var(--edu-len,200);animation:eduDraw 620ms cubic-bezier(.22,.61,.36,1) 220ms both} .edu-anim .is-in .edu-hero-gate{transform-box:fill-box;transform-origin:center;animation:eduGrowY 320ms ease both} .edu-anim .is-in .edu-hero-gate--1{animation-delay:420ms} .edu-anim .is-in .edu-hero-gate--2{animation-delay:520ms} .edu-anim .is-in .edu-hero-gate--3{animation-delay:620ms} .edu-anim .is-in .edu-hero-gate--4{animation-delay:720ms} .edu-anim .is-in .edu-hero-band{transform-box:fill-box;transform-origin:left center;animation:eduGrowX 520ms cubic-bezier(.22,.61,.36,1) 380ms both} .edu-anim .is-in .edu-hero-cross{stroke-dasharray:var(--edu-len,260);animation:eduDraw 680ms cubic-bezier(.22,.61,.36,1) 840ms both} .edu-anim .is-in .edu-hero-act{stroke-dasharray:var(--edu-len,220);animation:eduDraw 620ms cubic-bezier(.22,.61,.36,1) 1240ms both} .edu-anim .is-in .edu-hero-mark{animation:eduFade 420ms ease 1720ms both} /* ═══════════════════════════════ 8. ÉCRAN 2 — LE POINT DE DÉPART ════ */ .edu-anim .is-in .edu-st-src{transform-box:fill-box;transform-origin:center;animation:eduPop 280ms ease both} .edu-anim .is-in .edu-st-path{stroke-dasharray:var(--edu-len,400);animation:eduDraw 820ms cubic-bezier(.22,.61,.36,1) 200ms both} .edu-anim .is-in .edu-st-path--2{animation-delay:320ms} .edu-anim .is-in .edu-st-path--3{animation-delay:440ms} .edu-anim .is-in .edu-st-path--4{animation-delay:560ms} .edu-anim .is-in .edu-st-standard{transform-box:fill-box;transform-origin:center;animation:eduGrowY 420ms cubic-bezier(.22,.61,.36,1) 1180ms both} .edu-anim .is-in .edu-st-join{animation:eduFade 320ms ease 1380ms both} /* ══════════════════ 9. ÉCRAN 3 — L'ÉQUATION CONCEPTUELLE ═══════════ */ .edu-equation{ display:flex;flex-wrap:wrap;align-items:stretch; gap:0.75rem clamp(0.75rem,2vw,1.5rem); margin-top:clamp(2rem,5vh,3rem); } .edu-equation__term, .edu-equation__result{ position:relative; display:flex;align-items:center; padding:0.9rem 1.1rem; font-size:1rem;line-height:1.35;font-weight:500; color:var(--edu-body); border-top:1px solid var(--edu-line); border-bottom:1px solid var(--edu-line); flex:1 1 12rem; } .edu-equation__term i{ position:absolute;left:0;top:-1px;height:1px;width:100%; background:var(--edu-gold); transform:scaleX(0);transform-origin:left center; transition:transform .6s cubic-bezier(.22,.61,.36,1); } .edu-equation.is-in .edu-equation__term i{transform:scaleX(1)} .edu-equation.is-in .edu-equation__term:nth-child(3) i{transition-delay:.16s} .edu-equation.is-in .edu-equation__term:nth-child(5) i{transition-delay:.32s} .edu-equation__op{ display:flex;align-items:center; font-family:'Ibarra Real Nova',serif; font-size:1.3rem;color:var(--edu-gold-dark); } .edu-equation__result{ font-family:'Ibarra Real Nova',serif; font-size:1.16rem;font-weight:700;color:var(--edu-deep); border-top-color:var(--edu-gold);border-bottom-color:var(--edu-gold); flex:1 1 14rem; } .edu-anim .edu-equation__term, .edu-anim .edu-equation__op, .edu-anim .edu-equation__result{opacity:0;transform:translateY(10px);transition:opacity .6s ease,transform .6s cubic-bezier(.22,.61,.36,1)} .edu-anim .edu-equation.is-in .edu-equation__term, .edu-anim .edu-equation.is-in .edu-equation__op, .edu-anim .edu-equation.is-in .edu-equation__result{opacity:1;transform:none} .edu-anim .edu-equation.is-in > *:nth-child(2){transition-delay:.08s} .edu-anim .edu-equation.is-in > *:nth-child(3){transition-delay:.16s} .edu-anim .edu-equation.is-in > *:nth-child(4){transition-delay:.24s} .edu-anim .edu-equation.is-in > *:nth-child(5){transition-delay:.32s} .edu-anim .edu-equation.is-in > *:nth-child(6){transition-delay:.4s} .edu-anim .edu-equation.is-in > *:nth-child(7){transition-delay:.5s} /* ═════════════════ 10. LISTES ÉDITORIALES (écrans 4, 5, 6, 8, 9, 10) ═ */ .edu-list{list-style:none;margin:1.6rem 0 0;padding:0;display:flex;flex-direction:column} .edu-list--dense{margin-top:1.4rem} .edu-list__item{ position:relative; display:flex;gap:0.85rem;align-items:baseline; padding:0.7rem 0; border-top:1px solid var(--edu-line); font-size:1.02rem;line-height:1.5; color:var(--edu-body);max-width:52ch; } .edu-list__item:last-child{border-bottom:1px solid var(--edu-line)} .edu-list__num{ flex:none; font-size:0.72rem;font-weight:700;letter-spacing:0.06em; color:var(--edu-gold-text); } .edu-list--dark .edu-list__item{color:var(--edu-on-dark)} .edu-list--dark .edu-list__num{color:var(--edu-gold)} .edu-anim .edu-list__item{opacity:0;transform:translateX(-8px);transition:opacity .55s ease,transform .55s cubic-bezier(.22,.61,.36,1)} .edu-anim .is-in .edu-list__item{opacity:1;transform:none} .edu-anim .is-in .edu-list__item:nth-child(2){transition-delay:.08s} .edu-anim .is-in .edu-list__item:nth-child(3){transition-delay:.16s} .edu-anim .is-in .edu-list__item:nth-child(4){transition-delay:.24s} .edu-anim .is-in .edu-list__item:nth-child(5){transition-delay:.32s} .edu-anim .is-in .edu-list__item:nth-child(6){transition-delay:.4s} /* Écran 4 — six points d'entrée, un même niveau d'exigence. (1750 ms) */ .edu-anim .is-in .edu-en-origin{transform-box:fill-box;transform-origin:center;animation:eduPop 260ms ease both} .edu-anim .is-in .edu-en-origin--2{animation-delay:70ms} .edu-anim .is-in .edu-en-origin--3{animation-delay:140ms} .edu-anim .is-in .edu-en-origin--4{animation-delay:210ms} .edu-anim .is-in .edu-en-origin--5{animation-delay:280ms} .edu-anim .is-in .edu-en-origin--6{animation-delay:350ms} .edu-anim .is-in .edu-en-path{stroke-dasharray:var(--edu-len,400);animation:eduDraw 780ms cubic-bezier(.22,.61,.36,1) 260ms both} .edu-anim .is-in .edu-en-path--2{animation-delay:340ms} .edu-anim .is-in .edu-en-path--3{animation-delay:420ms} .edu-anim .is-in .edu-en-path--4{animation-delay:500ms} .edu-anim .is-in .edu-en-path--5{animation-delay:580ms} .edu-anim .is-in .edu-en-path--6{animation-delay:660ms} .edu-anim .is-in .edu-en-level{transform-box:fill-box;transform-origin:center;animation:eduGrowY 420ms cubic-bezier(.22,.61,.36,1) 1180ms both} .edu-anim .is-in .edu-en-join rect{transform-box:fill-box;transform-origin:center;animation:eduPop 220ms ease 1400ms both} .edu-anim .is-in .edu-en-join--2{animation-delay:1460ms} .edu-anim .is-in .edu-en-join--3{animation-delay:1520ms} .edu-anim .is-in .edu-en-join--4{animation-delay:1580ms} .edu-anim .is-in .edu-en-join--5{animation-delay:1640ms} .edu-anim .is-in .edu-en-join--6{animation-delay:1700ms} /* Écran 5 — ce que contient une consigne courte. (1700 ms) */ .edu-anim .is-in .edu-im-line{transform-box:fill-box;transform-origin:left center;animation:eduGrowX 420ms cubic-bezier(.22,.61,.36,1) both} .edu-anim .is-in .edu-im-layer{animation:eduRise 460ms cubic-bezier(.22,.61,.36,1) both} .edu-anim .is-in .edu-im-layer--1{animation-delay:520ms} .edu-anim .is-in .edu-im-layer--2{animation-delay:820ms} .edu-anim .is-in .edu-im-layer--3{animation-delay:1120ms} .edu-anim .is-in .edu-im-layer--4{animation-delay:1420ms} /* Écran 6 — l'instruction, la boucle de vérification, la reformulation. (1700 ms) */ .edu-anim .is-in .edu-ld-first{stroke-dasharray:var(--edu-len,230);animation:eduDraw 620ms cubic-bezier(.22,.61,.36,1) both} .edu-anim .is-in .edu-ld-loop path{stroke-dasharray:var(--edu-len,280);animation:eduDraw 700ms cubic-bezier(.22,.61,.36,1) 560ms both} .edu-anim .is-in .edu-ld-loop rect{transform-box:fill-box;transform-origin:center;animation:eduPop 260ms ease 1080ms both} .edu-anim .is-in .edu-ld-back{stroke-dasharray:var(--edu-len,240);animation:eduDraw 560ms cubic-bezier(.22,.61,.36,1) 940ms both} .edu-anim .is-in .edu-ld-clear{stroke-dasharray:var(--edu-len,260);animation:eduDraw 600ms cubic-bezier(.22,.61,.36,1) 1280ms both} .edu-anim .is-in .edu-ld-mark{transform-box:fill-box;transform-origin:center;animation:eduPop 260ms ease 1740ms both} /* Écran 8 — la matière se structure en séquence. (1600 ms) */ .edu-anim .is-in .edu-bf-raw rect{animation:eduFade 380ms ease both} .edu-anim .is-in .edu-bf-axis{transform-box:fill-box;transform-origin:top center;animation:eduGrowY 520ms cubic-bezier(.22,.61,.36,1) 380ms both} .edu-anim .is-in .edu-bf-row{animation:eduRise 460ms cubic-bezier(.22,.61,.36,1) both} .edu-anim .is-in .edu-bf-row--1{animation-delay:620ms} .edu-anim .is-in .edu-bf-row--2{animation-delay:860ms} .edu-anim .is-in .edu-bf-row--3{animation-delay:1100ms} .edu-anim .is-in .edu-bf-row--4{animation-delay:1340ms} /* Écran 9 — de l'explication à l'action, puis la rétroaction. (1600 ms) */ .edu-anim .is-in .edu-dr-a{stroke-dasharray:var(--edu-len,44);animation:eduDraw 320ms ease 240ms both} .edu-anim .is-in .edu-dr-b{stroke-dasharray:var(--edu-len,44);animation:eduDraw 320ms ease 640ms both} .edu-anim .is-in .edu-dr-act{transform-box:fill-box;transform-origin:center;animation:eduPop 320ms cubic-bezier(.22,.61,.36,1) 980ms both} .edu-anim .is-in .edu-dr-back{stroke-dasharray:var(--edu-len,200);animation:eduDraw 620ms cubic-bezier(.22,.61,.36,1) 1200ms both} /* Écran 10 — trois niveaux qui se consolident. (1650 ms) */ .edu-anim .is-in .edu-af-lvl{stroke-dasharray:var(--edu-len,270);animation:eduDraw 560ms cubic-bezier(.22,.61,.36,1) both} .edu-anim .is-in .edu-af-lvl--2{animation-delay:260ms} .edu-anim .is-in .edu-af-lvl--3{animation-delay:520ms} .edu-anim .is-in .edu-af-join path{stroke-dasharray:var(--edu-len,120);animation:eduDraw 460ms cubic-bezier(.22,.61,.36,1) 1080ms both} .edu-anim .is-in .edu-af-stable{transform-box:fill-box;transform-origin:left center;animation:eduGrowX 380ms cubic-bezier(.22,.61,.36,1) 1400ms both} .edu-anim .is-in .edu-af-mark{transform-box:fill-box;transform-origin:center;animation:eduPop 260ms ease 1600ms both} /* ══════════════════════════════ 11. ÉCRAN 7 — LA MÉTHODE EN 5 TEMPS ═ */ .edu-method__head{max-width:64ch;margin-bottom:clamp(2rem,5vh,3rem)} .edu-steps__wrap{position:relative;padding-top:2.25rem} .edu-steps__line{position:absolute;top:5px;left:0;right:0;height:1px;background:var(--edu-line)} .edu-steps__line i{ display:block;height:100%;background:var(--edu-gold); transform:scaleX(1);transform-origin:left center; transition:transform .8s cubic-bezier(.22,.61,.36,1); } .edu-anim .edu-steps__line i{transform:scaleX(var(--edu-p,0))} .edu-steps{ list-style:none;margin:0;padding:0; display:grid;grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(1rem,2vw,1.75rem); } .edu-step{position:relative} .edu-step::before{ content:"";position:absolute;top:-2.25rem;left:0; width:11px;height:11px; border:1px solid var(--edu-gold-dark);background:var(--edu-gold); transition:background-color .6s ease,border-color .6s ease,transform .6s ease; } .edu-anim .edu-step::before{border-color:var(--edu-stroke);background:#fff} .edu-step__num{ font-size:0.7rem;font-weight:700;letter-spacing:0.12em; color:var(--edu-gold-text);opacity:.75;transition:opacity .5s ease; } .edu-step h3{ font-family:'Ibarra Real Nova',serif; font-size:1.28rem;font-weight:700;line-height:1.25; color:var(--edu-deep);margin:0.35rem 0 0.5rem; transition:color .5s ease; } .edu-step p{font-size:0.98rem;line-height:1.6;color:var(--edu-body);margin:0;transition:color .5s ease} .edu-anim .edu-step h3, .edu-anim .edu-step p{color:var(--edu-body-dim)} .edu-step.is-done h3{color:var(--edu-deep)} .edu-step.is-done p{color:var(--edu-body)} .edu-step.is-done .edu-step__num{opacity:1} .edu-step.is-done::before{background:var(--edu-gold);border-color:var(--edu-gold-dark)} /* ═══════════════════════════════════ 12. ÉCRAN 11 — LES OUTILS ══════ */ .edu-tools__head{max-width:56ch;margin-bottom:clamp(1.75rem,4vh,2.5rem)} .edu-tools{ margin:0;display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(1.5rem,3vw,2.5rem) clamp(2rem,4vw,3.5rem); } .edu-tool{position:relative;padding-top:1.1rem;border-top:1px solid var(--edu-line)} .edu-tool::after{ content:"";position:absolute;top:-1px;left:0;width:100%;height:1px; background:var(--edu-gold); transform:scaleX(0);transform-origin:left center; transition:transform .7s cubic-bezier(.22,.61,.36,1); } .edu-tools.is-in .edu-tool::after{transform:scaleX(1)} .edu-tools.is-in .edu-tool:nth-child(2)::after{transition-delay:.12s} .edu-tools.is-in .edu-tool:nth-child(3)::after{transition-delay:.24s} .edu-tools.is-in .edu-tool:nth-child(4)::after{transition-delay:.36s} .edu-tool dt{ font-family:'Ibarra Real Nova',serif; font-size:1.22rem;font-weight:700;line-height:1.28; color:var(--edu-deep);margin-bottom:0.55rem; } .edu-tool dd{margin:0;font-size:1rem;line-height:1.65;color:var(--edu-body);max-width:46ch} .edu-anim .edu-tool{opacity:0;transform:translateY(12px);transition:opacity .6s ease,transform .6s cubic-bezier(.22,.61,.36,1)} .edu-anim .edu-tools.is-in .edu-tool{opacity:1;transform:none} .edu-anim .edu-tools.is-in .edu-tool:nth-child(2){transition-delay:.12s} .edu-anim .edu-tools.is-in .edu-tool:nth-child(3){transition-delay:.24s} .edu-anim .edu-tools.is-in .edu-tool:nth-child(4){transition-delay:.36s} /* ═══════════════════════════ 13. ÉCRAN 12 — LA PREUVE DE TERRAIN ════ */ .edu-proof__grid{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr); gap:clamp(2rem,5vw,4rem); align-items:center; } .edu-proof__media{margin:0} .edu-proof__media img{ display:block;width:100%;height:auto; /* Ratio natif conservé : le cadrage d'origine n'est jamais recoupé. */ border-top:2px solid var(--edu-gold); } .edu-proof__media figcaption{ margin-top:0.9rem; font-size:0.86rem;line-height:1.55; color:var(--edu-on-dark-dim); } .edu-proof__link{margin:0.6rem 0 0} .edu-proof__link a{ display:inline-flex;align-items:center;min-height:44px; font-size:0.92rem;color:var(--edu-gold); text-decoration:none;border-bottom:1px solid currentColor; } .edu-proof__link a:hover{color:#fff} /* ══════════════════════ 14. ÉCRAN 13 — LES TROIS FAÇONS D'AGIR ══════ */ .edu-acts{ display:grid;grid-template-columns:minmax(0,1fr); gap:clamp(1.75rem,3.5vw,3.25rem); align-items:center; } .edu-acts.edu-tabs-ready{grid-template-columns:minmax(0,330px) minmax(0,1fr)} .edu-acts__aside{align-self:center} .edu-acts__lead{font-size:clamp(1.45rem,1.05rem + 1.3vw,2.05rem);max-width:20ch;margin-bottom:0} .edu-acts__hint{ display:none; margin:clamp(1.5rem,3.5vh,2.25rem) 0 0.9rem; font-size:0.92rem;line-height:1.5; color:var(--edu-body-dim);max-width:34ch; } .edu-tabs-ready .edu-acts__hint{display:block} .edu-acts__rail{display:none;flex-direction:column;gap:0.5rem} .edu-tabs-ready .edu-acts__rail{display:flex} /* Un choix : bouton pleine largeur, état actif jamais porté par la seule couleur (trait doré, libellé AFFICHÉ, contraste renforcé). */ .edu-choice{ position:relative;display:block;width:100%; appearance:none;-webkit-appearance:none; background:#fff; border:1px solid var(--edu-line);border-left-width:3px; padding:0;min-height:52px; text-align:left;cursor:pointer; font-family:'Space Grotesk',sans-serif; transition:border-color .28s ease,box-shadow .28s ease; } .edu-choice__inner{ display:grid;grid-template-columns:auto minmax(0,1fr) auto; align-items:center;gap:0.9rem; min-height:52px; padding:0.85rem 1rem; transition:transform .28s cubic-bezier(.22,.61,.36,1); } .edu-choice__num{ font-size:0.8rem;font-weight:700;letter-spacing:0.08em; color:var(--edu-gold-text);opacity:.92;transition:opacity .28s ease; } .edu-choice__name{ font-family:'Ibarra Real Nova',serif; font-size:1.18rem;line-height:1.25;font-weight:600; color:var(--edu-body);transition:color .28s ease; } .edu-choice__state{ font-size:0.68rem;font-weight:700; letter-spacing:0.16em;text-transform:uppercase; color:var(--edu-body-dim);white-space:nowrap; transition:color .28s ease; } .edu-choice__on{display:none} .edu-choice__off{display:inline} .edu-choice:hover{border-color:var(--edu-gold)} .edu-choice:hover .edu-choice__name{color:var(--edu-deep)} .edu-choice:hover .edu-choice__state{color:var(--edu-gold-text)} .edu-choice:hover .edu-choice__inner{transform:translateX(3px)} .edu-choice[aria-selected="true"]{ border-left-color:var(--edu-gold); box-shadow:inset 0 0 0 1px rgba(201,164,92,0.35); } .edu-choice[aria-selected="true"] .edu-choice__num{opacity:1} .edu-choice[aria-selected="true"] .edu-choice__name{color:var(--edu-deep)} .edu-choice[aria-selected="true"] .edu-choice__state{color:var(--edu-gold-text)} .edu-choice[aria-selected="true"] .edu-choice__on{display:inline} .edu-choice[aria-selected="true"] .edu-choice__off{display:none} .edu-choice[aria-selected="true"]:hover .edu-choice__inner{transform:none} .edu-acts-scene{padding-block:clamp(2.25rem,4.5vh,3.5rem)} .edu-acts__panel{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,0.85fr); gap:clamp(1.75rem,3.5vw,3rem); align-items:center; } .edu-acts__panel[hidden]{display:none} .edu-acts__panel + .edu-acts__panel{margin-top:clamp(2.5rem,6vh,3.5rem)} .edu-tabs-ready .edu-acts__panel + .edu-acts__panel{margin-top:0} .edu-acts__title{ font-family:'Ibarra Real Nova',serif;font-weight:700; font-size:clamp(1.3rem,1.05rem + 1vw,1.85rem); line-height:1.22;color:var(--edu-deep); margin:0 0 1rem;max-width:26ch; } .edu-acts__viz{margin:0;width:100%} /* ── Animation propre à chaque schéma d'onglet ─────────────────────── L'état de repos est l'état final ; l'animation n'existe que le temps où le volet porte `.is-active.is-animating`, classe posée après deux cycles de rendu et retirée avant chaque nouvelle activation. Un volet masqué ne peut donc jamais s'animer en arrière-plan, et aucun mouvement n'est infini. */ .edu-dg-friction path{transform-box:fill-box;transform-origin:bottom center} .edu-ad-req{transform-box:fill-box;transform-origin:center} /* 01 — Diagnostiquer : un parcours, des points de vérification, un point de friction qui devient visible. (1600 ms) */ .edu-anim .edu-tabs-ready .edu-acts__panel.is-active.is-animating .edu-dg-track{stroke-dasharray:var(--edu-len,420);animation:eduDraw 860ms cubic-bezier(.22,.61,.36,1) both} .edu-anim .edu-tabs-ready .edu-acts__panel.is-active.is-animating .edu-dg-check{transform-box:fill-box;transform-origin:center;animation:eduPop 260ms ease both} .edu-anim .edu-tabs-ready .edu-acts__panel.is-active.is-animating .edu-dg-check--1{animation-delay:320ms} .edu-anim .edu-tabs-ready .edu-acts__panel.is-active.is-animating .edu-dg-check--2{animation-delay:520ms} .edu-anim .edu-tabs-ready .edu-acts__panel.is-active.is-animating .edu-dg-check--3{animation-delay:720ms} .edu-anim .edu-tabs-ready .edu-acts__panel.is-active.is-animating .edu-dg-check--4{animation-delay:920ms} .edu-anim .edu-tabs-ready .edu-acts__panel.is-active.is-animating .edu-dg-friction circle{transform-box:fill-box;transform-origin:center;animation:eduPop 300ms cubic-bezier(.22,.61,.36,1) 1120ms both} .edu-anim .edu-tabs-ready .edu-acts__panel.is-active.is-animating .edu-dg-friction path{animation:eduGrowY 340ms cubic-bezier(.22,.61,.36,1) 1300ms both} /* 02 — Adapter : plusieurs chemins vers une même exigence. (1620 ms) */ .edu-anim .edu-tabs-ready .edu-acts__panel.is-active.is-animating .edu-ad-path{stroke-dasharray:var(--edu-len,400);animation:eduDraw 800ms cubic-bezier(.22,.61,.36,1) both} .edu-anim .edu-tabs-ready .edu-acts__panel.is-active.is-animating .edu-ad-path--2{animation-delay:120ms} .edu-anim .edu-tabs-ready .edu-acts__panel.is-active.is-animating .edu-ad-path--3{animation-delay:240ms} .edu-anim .edu-tabs-ready .edu-acts__panel.is-active.is-animating .edu-ad-path--4{animation-delay:360ms} .edu-anim .edu-tabs-ready .edu-acts__panel.is-active.is-animating .edu-ad-req{animation:eduGrowY 440ms cubic-bezier(.22,.61,.36,1) 1000ms both} .edu-anim .edu-tabs-ready .edu-acts__panel.is-active.is-animating .edu-ad-join rect{transform-box:fill-box;transform-origin:center;animation:eduPop 220ms ease 1260ms both} .edu-anim .edu-tabs-ready .edu-acts__panel.is-active.is-animating .edu-ad-join--2{animation-delay:1350ms} .edu-anim .edu-tabs-ready .edu-acts__panel.is-active.is-animating .edu-ad-join--3{animation-delay:1440ms} .edu-anim .edu-tabs-ready .edu-acts__panel.is-active.is-animating .edu-ad-join--4{animation-delay:1530ms} /* 03 — Outiller : un repère transmis se diffuse dans la séquence. (1640 ms) */ .edu-anim .edu-tabs-ready .edu-acts__panel.is-active.is-animating .edu-ou-seed{transform-box:fill-box;transform-origin:center;animation:eduPop 280ms ease both} .edu-anim .edu-tabs-ready .edu-acts__panel.is-active.is-animating .edu-ou-give{stroke-dasharray:var(--edu-len,100);animation:eduDraw 420ms cubic-bezier(.22,.61,.36,1) 240ms both} .edu-anim .edu-tabs-ready .edu-acts__panel.is-active.is-animating .edu-ou-axis{stroke-dasharray:var(--edu-len,280);animation:eduDraw 480ms cubic-bezier(.22,.61,.36,1) 560ms both} .edu-anim .edu-tabs-ready .edu-acts__panel.is-active.is-animating .edu-ou-step{stroke-dasharray:var(--edu-len,230);animation:eduDraw 460ms cubic-bezier(.22,.61,.36,1) both} .edu-anim .edu-tabs-ready .edu-acts__panel.is-active.is-animating .edu-ou-step--1{animation-delay:820ms} .edu-anim .edu-tabs-ready .edu-acts__panel.is-active.is-animating .edu-ou-step--2{animation-delay:920ms} .edu-anim .edu-tabs-ready .edu-acts__panel.is-active.is-animating .edu-ou-step--3{animation-delay:1020ms} .edu-anim .edu-tabs-ready .edu-acts__panel.is-active.is-animating .edu-ou-step--4{animation-delay:1120ms} .edu-anim .edu-tabs-ready .edu-acts__panel.is-active.is-animating .edu-ou-mark{transform-box:fill-box;transform-origin:center;animation:eduPop 240ms ease both} .edu-anim .edu-tabs-ready .edu-acts__panel.is-active.is-animating .edu-ou-mark--1{animation-delay:1280ms} .edu-anim .edu-tabs-ready .edu-acts__panel.is-active.is-animating .edu-ou-mark--2{animation-delay:1380ms} .edu-anim .edu-tabs-ready .edu-acts__panel.is-active.is-animating .edu-ou-mark--3{animation-delay:1480ms} .edu-anim .edu-tabs-ready .edu-acts__panel.is-active.is-animating .edu-ou-mark--4{animation-delay:1580ms} /* ═════════════════════════ 15. ÉCRAN 14 — LES INTERVENTIONS ═════════ */ .edu-offer{ list-style:none;margin:0;padding:0; display:grid;grid-template-columns:minmax(0,1fr); } .edu-offer__item{ position:relative; padding:0.72rem 0 0.72rem 1.5rem; border-top:1px solid var(--edu-line); font-size:1rem;line-height:1.5;color:var(--edu-body); } .edu-offer__item:last-child{border-bottom:1px solid var(--edu-line)} .edu-offer__item::before{ content:"";position:absolute;left:0;top:1.25em; width:9px;height:1px;background:var(--edu-gold); } .edu-anim .edu-offer__item{opacity:0;transform:translateX(-8px);transition:opacity .5s ease,transform .5s cubic-bezier(.22,.61,.36,1)} .edu-anim .edu-offer.is-in .edu-offer__item{opacity:1;transform:none} .edu-anim .edu-offer.is-in .edu-offer__item:nth-child(2){transition-delay:.06s} .edu-anim .edu-offer.is-in .edu-offer__item:nth-child(3){transition-delay:.12s} .edu-anim .edu-offer.is-in .edu-offer__item:nth-child(4){transition-delay:.18s} .edu-anim .edu-offer.is-in .edu-offer__item:nth-child(5){transition-delay:.24s} .edu-anim .edu-offer.is-in .edu-offer__item:nth-child(6){transition-delay:.3s} .edu-anim .edu-offer.is-in .edu-offer__item:nth-child(7){transition-delay:.36s} .edu-anim .edu-offer.is-in .edu-offer__item:nth-child(8){transition-delay:.42s} .edu-anim .edu-offer.is-in .edu-offer__item:nth-child(9){transition-delay:.48s} .edu-anim .edu-offer.is-in .edu-offer__item:nth-child(10){transition-delay:.54s} /* ═══════════════════════════════════ 16. ÉCRAN 15 — CONCLUSION ══════ */ .edu-end{background:var(--edu-deep);overflow:hidden} /* Une trame de progression : deux séries de traits fins, sans image ni flou ni symbole scolaire. */ .edu-end__texture{ position:absolute;inset:0;pointer-events:none; background-image: repeating-linear-gradient(90deg,rgba(255,255,255,0.05) 0 1px,transparent 1px 58px), repeating-linear-gradient(90deg,rgba(255,255,255,0.03) 0 1px,transparent 1px 14px); opacity:.8; } .edu-end__inner{position:relative} .edu-end__sign{ font-size:1.05rem;line-height:1.7; color:var(--edu-on-dark);max-width:58ch;margin:0; } /* ═══════════════ 17. ORDINATEUR PORTABLE PEU HAUT (≤ 840px) ═════════ */ @media(min-width:1081px) and (max-height:840px){ .edu-scene{padding-block:clamp(1.75rem,3.4vh,2.75rem)} .edu-acts-scene{padding-block:clamp(1.4rem,2.8vh,2.25rem)} .edu-acts.edu-tabs-ready{grid-template-columns:minmax(0,300px) minmax(0,1fr)} .edu-acts__hint{margin-top:clamp(1.1rem,2.5vh,1.6rem)} .edu-acts__title{margin-bottom:0.75rem;max-width:31ch} .edu-acts__panel .edu-result{margin-top:0.9rem;padding-top:0.7rem} .edu-acts__panel .edu-link{margin-top:0.7rem} .edu-hero__viz{width:min(100%,450px)} .edu-method__head{margin-bottom:1.75rem} .edu-steps{gap:clamp(0.9rem,1.6vw,1.35rem)} .edu-list__item{padding-block:0.6rem} .edu-statement{margin-top:1.75rem} .edu-equation{margin-top:1.75rem} } /* ═════════════════════════════════════ 18. TABLETTE (≤ 1080px) ══════ */ @media(max-width:1080px){ .edu-hero__inner{grid-template-columns:minmax(0,1fr);gap:clamp(1.75rem,4vh,2.75rem)} .edu-hero__viz{justify-self:start;width:min(100%,440px)} .edu-split,.edu-split--tight{grid-template-columns:minmax(0,1fr);gap:clamp(1.75rem,4vh,2.75rem)} .edu-split--flip .edu-viz{order:0} .edu-viz{width:min(100%,560px)} .edu-steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:2rem} .edu-tools{grid-template-columns:minmax(0,1fr)} .edu-proof__grid{grid-template-columns:minmax(0,1fr);gap:clamp(1.75rem,4vh,2.5rem)} .edu-proof__media{max-width:560px} /* Les trois choix : lignes pleine largeur, panneau juste en dessous. */ .edu-acts.edu-tabs-ready{grid-template-columns:minmax(0,1fr);gap:clamp(1.5rem,4vh,2rem)} .edu-acts__lead{max-width:24ch} .edu-acts__hint{max-width:none} .edu-choice:hover .edu-choice__inner{transform:none} .edu-acts__panel{grid-template-columns:minmax(0,1fr);gap:1.5rem} .edu-acts__viz{width:min(100%,420px)} } /* ══════════════ 18 bis. TABLETTE COUCHÉE (901–1080px, peu haute) ═════ Dans cette bande, la mise en page est déjà empilée : le texte occupe toute la largeur et le schéma passe dessous. Une scène demande donc plus qu'un écran de 768px de haut. On resserre les respirations et on ramène les schémas à une taille juste suffisante — jamais le texte, qui garde son échelle de lecture. La scène reste plus haute que l'écran : c'est assumé, le déroulé demeure continu et rien n'est coupé. */ @media(min-width:901px) and (max-width:1080px) and (max-height:820px){ .edu-scene{padding-block:clamp(1.6rem,3.2vh,2.4rem)} .edu-hero{padding-block:clamp(1.5rem,3vh,2.25rem)} .edu-hero__inner{gap:clamp(1.25rem,2.6vh,1.75rem)} .edu-hero__viz{width:min(100%,360px)} .edu-split,.edu-split--tight{gap:clamp(1.25rem,2.6vh,1.75rem)} .edu-viz{width:min(100%,430px)} .edu-acts__viz{width:min(100%,360px)} .edu-acts.edu-tabs-ready{gap:clamp(1.1rem,2.4vh,1.5rem)} .edu-proof__grid{gap:clamp(1.25rem,2.6vh,1.75rem)} .edu-proof__media{max-width:430px} .edu-method__head{margin-bottom:1.5rem} .edu-steps{row-gap:1.5rem} .edu-statement,.edu-equation{margin-top:1.5rem} } /* ═════════════════════════════════════ 19. TÉLÉPHONE (≤ 900px) ══════ */ @media(max-width:900px){ /* Aucune hauteur imposée : le contenu se déroule naturellement. */ .edu-scene{min-height:0;padding-block:clamp(2.75rem,7vh,4rem)} .edu-hero{padding-block:clamp(2.25rem,6vh,3.5rem)} .edu-hero__inner{gap:1.75rem} .edu-hero__viz{width:min(100%,330px);grid-template-columns:minmax(84px,116px) minmax(0,1fr)} .edu-steps{grid-template-columns:minmax(0,1fr);row-gap:1.6rem} .edu-steps__wrap{padding:0 0 0 2rem} .edu-steps__line{top:0;bottom:0;left:5px;right:auto;width:1px;height:auto} .edu-steps__line i{width:100%;height:100%;transform:scaleY(1);transform-origin:top center} .edu-anim .edu-steps__line i{transform:scaleY(var(--edu-p,0))} .edu-step::before{top:6px;left:-2rem} .edu-equation{flex-direction:column;align-items:stretch} .edu-equation__op{justify-content:center;padding:0.1rem 0} .edu-statement{margin-left:0;margin-right:0} .edu-actions{gap:0.75rem} .edu-btn{width:100%} /* --- REPRISE DE LA HIÉRARCHIE TYPOGRAPHIQUE ---------------------- assets/mobile-premium.css impose sous 900px `main h3, main p, main span, main a … { font-size:max(1em,13px) !important }` et `main > * p { font-size:max(1em,15px) !important }`. Sur une page qui porte sa propre échelle, `1em` vaut la taille du PARENT — donc 16px partout — et toute la hiérarchie disparaîtrait. On rend ici ses tailles à la page : le texte courant reste à 16px minimum, aucun libellé ne descend sous 13px. */ .edu-page .edu-p, .edu-page .edu-step p, .edu-page .edu-tool dd, .edu-page .edu-end__sign{font-size:16px !important;line-height:1.7 !important} /* Trois classes sont nécessaires ici : le plancher générique s'écrit `main > * p:not(…):not(…)`, soit deux types et deux classes. Une règle à deux classes perdrait l'arbitrage et le chapô retomberait à 16px, à égalité avec le texte courant. */ .edu-page .edu-hero__inner .edu-lead{font-size:17px !important;line-height:1.65 !important} .edu-page .edu-list__item, .edu-page .edu-offer__item{font-size:16px !important;line-height:1.5 !important} .edu-page .edu-result{font-size:16px !important} .edu-page .edu-result b{font-size:13px !important} .edu-page .edu-caution, .edu-page .edu-acts__hint{font-size:15px !important;line-height:1.6 !important} .edu-page .edu-eyebrow{font-size:13.5px !important;letter-spacing:0.13em} .edu-page .edu-crumb, .edu-page .edu-crumb a{font-size:13px !important} .edu-page .edu-btn, .edu-page .edu-link{font-size:16px !important} /* Même arbitrage que pour le chapô : trois classes sont nécessaires pour que les phrases de conviction gardent leur relief au téléphone au lieu de retomber à la taille du texte courant. */ .edu-page .edu-scene .edu-statement{font-size:clamp(1.2rem,5vw,1.6rem) !important;line-height:1.35 !important} .edu-page .edu-scene .edu-statement--inline{font-size:17px !important;line-height:1.5 !important} .edu-page .edu-step h3{font-size:19px !important} .edu-page .edu-step__num, .edu-page .edu-list__num, .edu-page .edu-hero__n{font-size:13px !important} .edu-page .edu-tool dt{font-size:19px !important} .edu-page .edu-hero__legend li{font-size:14px !important} .edu-page .edu-equation__term, .edu-page .edu-equation__result{font-size:16px !important} .edu-page .edu-acts__title{font-size:clamp(1.3rem,5vw,1.6rem) !important;line-height:1.22 !important} .edu-page .edu-choice__name{font-size:18px !important;line-height:1.25 !important} .edu-page .edu-choice__num{font-size:13px !important} .edu-page .edu-choice__state{font-size:11.5px !important;letter-spacing:0.14em} .edu-page .edu-proof__media figcaption{font-size:14px !important} .edu-page .edu-proof__link a{font-size:15px !important} } @media(max-width:640px){ /* La légende passe sous le schéma : celui-ci récupère toute la largeur et ses traits fins restent lisibles. */ .edu-hero__viz{width:min(100%,320px);grid-template-columns:minmax(0,1fr);gap:1.15rem} .edu-hero__legend{position:static;order:2;display:grid;grid-template-columns:minmax(0,1fr);gap:0.4rem} .edu-hero__legend li{position:static;transform:none;text-align:left;justify-content:flex-start;max-width:none} } @media(max-width:420px){ .edu-hero__viz{width:min(100%,282px)} .edu-hero .edu-crumb{margin-bottom:1rem} .edu-hero .edu-eyebrow{margin-bottom:0.75rem} .edu-hero .edu-h1{margin-bottom:1rem} } /* ─────────── Très petit écran ancien (≤ 360px de large, ≤ 640px de haut) Sur ces appareils, le héros porte le fil d'Ariane, la sur-titre, le titre, un chapô de plusieurs lignes, deux actions et un schéma. On récupère ici tout ce qui peut l'être dans les espacements — jamais dans la taille du texte, qui reste à son échelle de lecture. Le premier bouton demeure atteignable en un court défilement. */ @media(max-width:360px) and (max-height:640px){ .edu-hero{padding-block:1.5rem} .edu-hero__inner{gap:1.25rem} .edu-hero .edu-crumb{margin-bottom:0.6rem} .edu-hero .edu-eyebrow{margin-bottom:0.5rem} .edu-hero .edu-h1{margin-bottom:0.65rem} .edu-page .edu-hero__inner .edu-lead{line-height:1.5 !important} .edu-hero__viz{width:min(100%,262px)} } /* ═══════════════════ 20. VERSION SANS MOUVEMENT (COMPLÈTE) ══════════ */ /* Toute l'information apparaît immédiatement, dans son état final, et aucun déplacement notable ne se produit. Les onglets restent utilisables et tout le contenu demeure visible. */ @media(prefers-reduced-motion:reduce){ .edu-page *, .edu-page *::before, .edu-page *::after{ animation:none !important; transition:none !important; } .edu-page [data-edu-in="rise"], .edu-page [data-edu-in="rise"].is-in, .edu-page .edu-list__item, .edu-page .edu-offer__item, .edu-page .edu-tool, .edu-page .edu-equation__term, .edu-page .edu-equation__op, .edu-page .edu-equation__result{opacity:1 !important;transform:none !important} .edu-page .edu-steps__line i, .edu-page .edu-equation__term i, .edu-page .edu-tool::after, .edu-page .edu-af-stable, .edu-page .edu-bf-axis, .edu-page .edu-hero-band, .edu-page .edu-hero-gate, .edu-page .edu-st-standard, .edu-page .edu-en-level, .edu-page .edu-im-line, .edu-page .edu-ad-req, .edu-page .edu-dg-friction path{transform:none !important} .edu-page .edu-hero-drop, .edu-page .edu-hero-cross, .edu-page .edu-hero-act, .edu-page .edu-st-path, .edu-page .edu-en-path, .edu-page .edu-ld-first, .edu-page .edu-ld-loop path, .edu-page .edu-ld-back, .edu-page .edu-ld-clear, .edu-page .edu-dr-a, .edu-page .edu-dr-b, .edu-page .edu-dr-back, .edu-page .edu-af-lvl, .edu-page .edu-af-join path, .edu-page .edu-dg-track, .edu-page .edu-ad-path, .edu-page .edu-ou-give, .edu-page .edu-ou-axis, .edu-page .edu-ou-step{stroke-dashoffset:0 !important} .edu-page .edu-hero-seed, .edu-page .edu-hero-mark, .edu-page .edu-st-src, .edu-page .edu-st-join, .edu-page .edu-en-origin, .edu-page .edu-en-join rect, .edu-page .edu-im-layer, .edu-page .edu-bf-raw rect, .edu-page .edu-bf-row, .edu-page .edu-dr-act, .edu-page .edu-af-mark, .edu-page .edu-ld-mark, .edu-page .edu-ld-loop rect, .edu-page .edu-dg-check, .edu-page .edu-dg-friction circle, .edu-page .edu-ad-join rect, .edu-page .edu-ou-seed, .edu-page .edu-ou-mark{opacity:1 !important;transform:none !important} .edu-page .edu-step h3{color:var(--edu-deep) !important} .edu-page .edu-step p{color:var(--edu-body) !important} .edu-page .edu-step::before{background:var(--edu-gold) !important;border-color:var(--edu-gold-dark) !important} } /* ═══════════════════ RAIL DE CHAPITRES ════════════════════════════════ Repris a l'identique des cinq autres pages sectorielles, adapte au prefixe edu-. Ancre a droite comme partout ailleurs, il s'efface des que le pied de page entre dans l'ecran. */ .edu-chapters{display:none} .edu-chapters ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1.15rem} .edu-chapters a{ position:relative; display:flex;align-items:center;gap:0.75rem; /* WCAG 2.2 — 2.5.8 : cible d'au moins 24 × 24 pixels, même lorsque le libellé est réduit à un repère. */ min-height:24px;min-width:24px; padding:2px 0; text-decoration:none; font-size:0.72rem; font-weight:600; letter-spacing:0.11em; text-transform:uppercase; color:#5c6a72; transition:color .3s ease; } .edu-chapters__dot{ flex:none;width:7px;height:7px; border:1px solid currentColor; transition:background-color .4s ease,transform .4s ease; } .edu-chapters a:hover{color:var(--edu-gold-dark)} .edu-chapters a.is-active{color:var(--edu-deep)} .edu-chapters a.is-active .edu-chapters__dot{background:var(--edu-gold);border-color:var(--edu-gold-dark);transform:scale(1.3)} .edu-chapters__track{ position:absolute;left:3px;top:6px;bottom:6px;width:1px; background:rgba(10,56,80,0.16); } .edu-chapters__track i{ display:block;height:100%; background:var(--edu-gold); transform:scaleY(var(--edu-p,0));transform-origin:top center; transition:transform .3s linear; } /* Sur les écrans bleus, l'indicateur inverse son contraste. */ .edu-chapters.is-on-dark a{color:rgba(255,255,255,0.66)} .edu-chapters.is-on-dark a:hover{color:var(--edu-gold)} .edu-chapters.is-on-dark a.is-active{color:#fff} .edu-chapters.is-on-dark .edu-chapters__track{background:rgba(255,255,255,0.22)} /* Sur fond bleu, le doré clair reste visible au clavier. */ .edu-chapters.is-on-dark a:focus-visible{outline-color:var(--edu-gold)} @media(min-width:1200px){ .edu-js .edu-chapters{ display:block; position:fixed; top:50%;right:clamp(0.75rem,1.4vw,1.5rem); transform:translateY(-50%); z-index:60; padding-left:0.35rem; } /* Sous 1440px la gouttière ne suffit pas au libellé : on ne garde que les repères, le nom reste accessible aux lecteurs d'écran. */ .edu-chapters__label{ position:absolute;width:1px;height:1px; margin:-1px;padding:0;overflow:hidden; clip-path:inset(50%);white-space:nowrap; } } @media(min-width:1440px){ .edu-chapters__label{ position:static;width:auto;height:auto; margin:0;overflow:visible;clip-path:none; } /* Le rail est en position fixe : arrive au pied de page il n'a plus de chapitre a signaler et se superposerait au contenu. */ .edu-chapters.is-out{ opacity:0;visibility:hidden;pointer-events:none; transition:opacity .28s ease,visibility 0s linear .28s; } .edu-chapters{transition:opacity .28s ease} @media(prefers-reduced-motion:reduce){ .edu-chapters,.edu-chapters.is-out{transition:none} }