/* ========================================================= EDUCFR — DÉMO PC DE L'ESPACE ÉLÈVE (page d'accueil) --------------------------------------------------------- Reprise fidèle de la maquette « educfr-homepage-pc-demo ». Rien n'est une capture d'écran : le laptop et l'application à l'intérieur sont du HTML/CSS/SVG réellement pilotés. Toutes les règles sont préfixées par .educfr-home afin de ne jamais fuir dans WordPress, Elementor, WooCommerce ou MasterStudy. Les règles globales de la maquette d'origine (html, body, *, svg, :root, html{zoom}) ont été retirées. ========================================================= */ .educfr-home{ /* Taille logique de l'écran : l'app est dessinée à cette taille puis mise à l'échelle, ce qui garde une interface lisible quelle que soit la largeur du visiteur. */ --app-w:1020px; --app-h:638px; --lap-scale:.84; --lap-pad:11px; --r-sm:10px; --r-md:14px; --r-lg:20px; --r-pill:999px; /* Palette de la démo. Ces variables vivaient dans le :root de la maquette d'origine, retiré lors du scopage : sans elles, plusieurs déclarations `color: var(--navy)` devenaient invalides et le texte héritait du blanc — le bouton « Continuer mes cours » apparaissait vide. */ --navy:#082E63; --navy-2:#0B2346; --blue:#2458E8; --blue-2:#0B69C9; --cyan:#22B8E8; --ink:#0E1B33; --muted:#5A6B85; --line:#E4EAF4; --soft:#F4F8FF; } /* Le reset d'icônes de la maquette d'origine, confiné à l'écran. */ .educfr-home .ed-laptop svg{ fill:none;stroke:currentColor;stroke-width:1.7; stroke-linecap:round;stroke-linejoin:round; } .educfr-home .ed-laptop img{display:block;max-width:100%;height:auto} .educfr-home .ed-laptop a{color:inherit;text-decoration:none} .educfr-home .ed-laptop{ position:relative; width:calc((var(--app-w) + var(--lap-pad) * 2) * var(--lap-scale)); transform-origin:top center; } .educfr-home .ed-laptop-lid{ position:relative; padding:calc(var(--lap-pad) * var(--lap-scale)) calc(var(--lap-pad) * var(--lap-scale)) calc(20px * var(--lap-scale)); border-radius:calc(20px * var(--lap-scale)); background:linear-gradient(168deg,#22262E 0%,#14171D 42%,#0B0D11 100%); box-shadow: 0 2px 0 rgba(255,255,255,.07) inset, 0 46px 78px -34px rgba(8,46,99,.48), 0 10px 26px -18px rgba(8,46,99,.4); } .educfr-home .ed-laptop-cam{ position:absolute;top:calc(4.5px * var(--lap-scale));left:50%;transform:translateX(-50%); width:calc(52px * var(--lap-scale));height:calc(5px * var(--lap-scale)); border-radius:var(--r-pill);background:#0A0C10; } .educfr-home .ed-laptop-cam::after{ content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); width:calc(3.4px * var(--lap-scale));height:calc(3.4px * var(--lap-scale));border-radius:50%; background:#2C3A52;box-shadow:0 0 0 1px rgba(255,255,255,.06); } .educfr-home .ed-laptop-screen{ position:relative;overflow:hidden; border-radius:calc(9px * var(--lap-scale)); width:calc(var(--app-w) * var(--lap-scale)); height:calc(var(--app-h) * var(--lap-scale)); background:#F4F7FB; } .educfr-home .ed-laptop-screen::after{ /* reflet très discret */ content:"";position:absolute;inset:0;pointer-events:none;z-index:5; background:linear-gradient(107deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 34%); } .educfr-home .ed-laptop-base{ position:relative;left:50%;transform:translateX(-50%); width:103.5%;height:calc(13px * var(--lap-scale)); background:linear-gradient(180deg,#E7ECF3 0%,#C6CFDB 38%,#9AA6B6 78%,#7D8A9B 100%); clip-path:polygon(0 0,100% 0,98.6% 100%,1.4% 100%); border-radius:0 0 calc(7px * var(--lap-scale)) calc(7px * var(--lap-scale)); box-shadow:0 18px 24px -18px rgba(8,46,99,.38); } .educfr-home .ed-laptop-base i{ position:absolute;top:0;left:50%;transform:translateX(-50%); width:calc(120px * var(--lap-scale));height:calc(4px * var(--lap-scale)); background:linear-gradient(180deg,#8E9AAA,#A9B4C2); border-radius:0 0 var(--r-pill) var(--r-pill); } /* ========================================================= MINI-APPLICATION EDUCFR (dans l'écran) Reproduit la structure réelle du portail élève v5.0.50 ========================================================= */ .educfr-home .ed-laptop-screen .app{ position:absolute;top:0;left:0; width:var(--app-w);height:var(--app-h); transform:scale(var(--lap-scale));transform-origin:top left; display:grid;grid-template-columns:250px minmax(0,1fr);grid-template-rows:100%; background:#F4F7FB;color:#13233F;font-size:15px; overflow:hidden; } /* ------------------------- Sidebar ------------------------- */ .educfr-home .ed-laptop-screen .app-side{ min-height:0;height:100%;display:flex;flex-direction:column;padding:20px 14px 16px; background:linear-gradient(180deg, #073B6A 0%, #094478 34%, #0A457C 62%, #083761 100%);color:#fff; } .educfr-home .ed-laptop-screen .app-brand{display:flex;flex-direction:column;gap:11px;padding:0 2px 15px;border-bottom:1px solid rgba(255,255,255,.10)} .educfr-home .ed-laptop-screen .app-brand-plate{ /* La plaque se dimensionne sur le logo, et non l'inverse : bridée en hauteur, l'image restait centrée au milieu d'un grand vide. */ display:block;width:100%;border-radius:14px; background:#fff;padding:11px 13px;flex:0 0 auto; box-shadow:0 6px 16px -8px rgba(0,10,32,.5); } .educfr-home .ed-laptop-screen .app-brand-plate img{display:block;width:100%;height:auto;max-height:none} .educfr-home .ed-laptop-screen .app-brand-copy strong{display:block;font-size:14px;font-weight:750;letter-spacing:.02em} .educfr-home .ed-laptop-screen .app-brand-copy small{display:block;margin-top:2px;font-size:9.5px;color:rgba(255,255,255,.62);line-height:1.3} .educfr-home .ed-laptop-screen .app-nav{display:grid;gap:5px;margin-top:16px} .educfr-home .ed-laptop-screen .app-nav a{ display:flex;align-items:center;gap:11px; padding:10px 11px;border-radius:11px; color:rgba(255,255,255,.76);font-size:13.5px;font-weight:600; transition:background .18s ease,color .18s ease; } .educfr-home .ed-laptop-screen .app-nav a .app-nav-ic{display:grid;place-items:center;width:22px;height:22px} .educfr-home .ed-laptop-screen .app-nav a svg{width:17px;height:17px;stroke-width:1.6} .educfr-home .ed-laptop-screen .app-nav a.is-hot{background:rgba(255,255,255,.10);color:#fff} .educfr-home .ed-laptop-screen .app-nav a.is-active{background:rgba(255,255,255,.14);color:#fff;box-shadow:inset 3px 0 0 #88A4FF} .educfr-home .ed-laptop-screen .app-side-msg{margin-top:18px;padding:12px 12px;border-radius:13px;background:rgba(255,255,255,.06)} .educfr-home .ed-laptop-screen .app-side-msg span{display:block;font-size:9px;letter-spacing:.1em;font-weight:800;color:rgba(160,200,255,.85)} .educfr-home .ed-laptop-screen .app-side-msg strong{display:block;margin-top:5px;font-size:12.5px;line-height:1.35;font-weight:650} .educfr-home .ed-laptop-screen .app-side-logout{ display:flex;align-items:center;gap:8px;margin-top:10px; padding:9px 12px;border-radius:11px; background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12); font-size:11.5px;font-weight:650;color:rgba(255,255,255,.82); } .educfr-home .ed-laptop-screen .app-side-logout svg{width:14px;height:14px;flex:0 0 auto} .educfr-home .ed-laptop-screen .app-side-user{margin-top:auto;padding-top:14px;border-top:1px solid rgba(255,255,255,.10);display:flex;align-items:center;gap:10px} .educfr-home .ed-laptop-screen .app-side-user strong{display:block;font-size:12.5px} .educfr-home .ed-laptop-screen .app-side-user small{display:block;font-size:10px;color:rgba(255,255,255,.58);margin-top:1px} .educfr-home .ed-laptop-screen .app-avatar{ display:grid;place-items:center;width:34px;height:34px;border-radius:50%; background:#fff;color:#17386F;font-weight:800;font-size:14px;flex:0 0 auto; } /* ------------------------- Zone principale ------------------------- */ .educfr-home .ed-laptop-screen .app-main{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;height:100%} .educfr-home .ed-laptop-screen .app-top{ position:relative;flex:0 0 auto;height:64px; display:flex;align-items:center;justify-content:space-between; padding:0 24px;background:#fff;border-bottom:1px solid var(--line); } .educfr-home .ed-laptop-screen .app-top-left span{display:block;font-size:9.5px;letter-spacing:.12em;font-weight:800;color:#8494AC;text-transform:uppercase} .educfr-home .ed-laptop-screen .app-top-left strong{display:block;font-size:16px;font-weight:750;color:var(--navy-2);margin-top:2px} .educfr-home .ed-laptop-screen .app-top-left .app-wave{ display:inline-block;vertical-align:-.08em;font-size:1em;line-height:1;width:1em;height:1em;overflow:visible; } /* WordPress peut convertir les emoji en . Le reset d'images de la démo ne doit jamais transformer cette petite main en grande image. */ .educfr-home .ed-laptop-screen .app-top-left .app-wave img.emoji, .educfr-home .ed-laptop-screen .app-top-left img.emoji{ display:inline-block!important;width:1em!important;height:1em!important;max-width:1em!important; margin:0!important;padding:0!important;border:0!important;box-shadow:none!important; vertical-align:-.08em!important;object-fit:contain!important; } .educfr-home .ed-laptop-screen .app-top-right{display:flex;align-items:center;gap:14px} .educfr-home .ed-laptop-screen .app-top-ic{ display:grid;place-items:center;width:36px;height:36px;border-radius:11px; border:1px solid var(--line);color:#41557A;background:#fff; } .educfr-home .ed-laptop-screen .app-top-ic svg{width:18px;height:18px} .educfr-home .ed-laptop-screen .app-profile{display:flex;align-items:center;gap:9px} .educfr-home .ed-laptop-screen .app-profile strong{display:block;font-size:12.5px;color:var(--navy-2)} .educfr-home .ed-laptop-screen .app-profile small{display:block;font-size:10px;color:#8494AC;margin-top:1px} .educfr-home .ed-laptop-screen .app-profile .app-avatar{background:#EAF0FF} .educfr-home .ed-laptop-screen .app-loader{ position:absolute;left:0;bottom:-1px;height:2px;width:0; background:linear-gradient(90deg,var(--blue),var(--cyan)); opacity:0;border-radius:0 2px 2px 0; } .educfr-home .ed-laptop-screen .app-view{flex:1 1 auto;min-height:0;overflow:hidden;position:relative} .educfr-home .ed-laptop-screen .app-page{display:none;padding:16px 24px 10px} .educfr-home .ed-laptop-screen .app-page.is-active{display:block} /* --------- éléments génériques de l'app --------- */ .educfr-home .ed-laptop-screen .eyebrow{display:block;font-size:9.5px;letter-spacing:.11em;font-weight:850;color:#8494AC} .educfr-home .ed-laptop-screen .sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:12px 0 8px} .educfr-home .ed-laptop-screen .sec-head h2{margin:4px 0 0;font-size:18px;font-weight:750;color:var(--navy-2);letter-spacing:-.015em} .educfr-home .ed-laptop-screen .sec-sub{margin:5px 0 0;font-size:12px;color:var(--muted)} .educfr-home .ed-laptop-screen .sec-link{font-size:12px;font-weight:700;color:var(--blue)} .educfr-home .ed-laptop-screen .kicker{display:block;font-size:9.5px;letter-spacing:.11em;font-weight:850;color:#8494AC} .educfr-home .ed-laptop-screen .mini-btn{ display:inline-flex;align-items:center;justify-content:center;gap:6px; height:32px;padding:0 14px;border-radius:9px; font-size:12px;font-weight:700;white-space:nowrap; background:#fff;color:var(--navy);border:1px solid #D9E2F2; } .educfr-home .ed-laptop-screen .mini-btn.is-primary{background:linear-gradient(135deg,var(--blue),var(--blue-2));color:#fff;border-color:transparent} .educfr-home .ed-laptop-screen .mini-btn.is-light{background:#fff;color:var(--navy);border-color:transparent} .educfr-home .ed-laptop-screen .mini-btn.is-glass{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.30)} .educfr-home .ed-laptop-screen .mini-btn.is-hot{filter:brightness(1.04);box-shadow:0 6px 16px -8px rgba(11,35,70,.5)} .educfr-home .ed-laptop-screen .panel{background:#fff;border:1px solid var(--line);border-radius:15px;padding:11px 15px} .educfr-home .ed-laptop-screen .panel h2{margin:4px 0 0;font-size:15px;font-weight:750;color:var(--navy-2)} .educfr-home .ed-laptop-screen .panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px} .educfr-home .ed-laptop-screen .status{font-size:10px;font-weight:800;color:#0E7C52;background:#E4F6EE;padding:5px 9px;border-radius:var(--r-pill)} .educfr-home .ed-laptop-screen .page-head{margin-bottom:16px} .educfr-home .ed-laptop-screen .page-head h1{margin:0;font-size:24px;font-weight:800;letter-spacing:-.02em;color:var(--navy-2)} .educfr-home .ed-laptop-screen .page-head p{margin:6px 0 0;font-size:13px;color:var(--muted)} /* --------------------- 1. Tableau de bord --------------------- */ .educfr-home .ed-laptop-screen .dash-hero{ position:relative;overflow:hidden; display:flex;align-items:center;justify-content:space-between;gap:18px; padding:17px 20px;border-radius:19px;color:#fff; background: radial-gradient(520px 260px at 88% 12%,rgba(34,184,232,.34),transparent 62%), linear-gradient(128deg,#0B2346 0%,#123A78 58%,#1B4FA8 100%); } .educfr-home .ed-laptop-screen .dash-hero-copy{position:relative;z-index:2;min-width:0} .educfr-home .ed-laptop-screen .dash-hero-logo{width:96px;height:auto;margin-bottom:10px;opacity:.96} .educfr-home .ed-laptop-screen .dash-hero .pill{ display:inline-block;padding:5px 12px;border-radius:var(--r-pill); background:rgba(255,255,255,.14);font-size:10px;font-weight:750;letter-spacing:.04em; } .educfr-home .ed-laptop-screen .dash-hero h1{margin:7px 0 0;font-size:22px;line-height:1.14;font-weight:800;letter-spacing:-.02em} .educfr-home .ed-laptop-screen .dash-hero h1 em{font-style:normal;color:#8DE0EB} .educfr-home .ed-laptop-screen .dash-hero p{margin:7px 0 0;font-size:12px;color:rgba(255,255,255,.76);max-width:400px;line-height:1.5} .educfr-home .ed-laptop-screen .dash-hero-actions{display:flex;align-items:center;gap:9px;margin-top:12px} .educfr-home .ed-laptop-screen .dash-hero-actions .mini-btn{display:inline-flex;align-items:center;gap:6px} .educfr-home .ed-laptop-screen .dash-hero-actions svg{width:13px;height:13px;flex:0 0 auto} .educfr-home .ed-laptop-screen .dash-hero-meta{display:flex;align-items:center;gap:9px;margin-top:11px;font-size:11px;color:rgba(255,255,255,.72);font-weight:600} .educfr-home .ed-laptop-screen .dash-hero-meta i{width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.5)} /* Mise en scène reprise de l'espace réel : la carte blanche porte le visuel de l'élève, et deux compteurs s'en détachent de part et d'autre. */ .educfr-home .ed-laptop-screen .dash-hero-visual{ position:relative;z-index:2;flex:0 0 auto;width:274px;height:194px; } .educfr-home .ed-laptop-screen .dash-hero-card{ position:absolute;inset:0 28px 0 16px;border-radius:16px; background:#fff; box-shadow:0 14px 30px -14px rgba(0,12,40,.55); overflow:hidden; } .educfr-home .ed-laptop-screen .dash-hero-card picture{display:contents} .educfr-home .ed-laptop-screen .dash-hero-card img{ width:100%;height:100%;object-fit:cover;object-position:center 16%; } .educfr-home .ed-laptop-screen .dash-stat{ position:absolute;z-index:3;padding:8px 12px;border-radius:12px; background:#fff;color:var(--navy-2); box-shadow:0 12px 26px -12px rgba(0,12,40,.55); } .educfr-home .ed-laptop-screen .dash-stat.is-top{right:0;top:8px} .educfr-home .ed-laptop-screen .dash-stat.is-bottom{left:0;bottom:14px} .educfr-home .ed-laptop-screen .dash-stat strong{display:block;font-size:17px;font-weight:800;line-height:1;color:var(--navy-2)} .educfr-home .ed-laptop-screen .dash-stat span{display:block;margin-top:2px;font-size:9px;color:#6B7D98;white-space:nowrap} .educfr-home .ed-laptop-screen .mod-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px} .educfr-home .ed-laptop-screen .mod{background:#fff;border:1px solid var(--line);border-radius:15px;padding:12px 14px;transition:transform .2s ease,box-shadow .2s ease} .educfr-home .ed-laptop-screen .mod-ic{display:grid;place-items:center;width:31px;height:31px;border-radius:10px;margin-bottom:8px} .educfr-home .ed-laptop-screen .mod-ic svg{width:18px;height:18px} .educfr-home .ed-laptop-screen .mod.is-blue .mod-ic{background:#E8EEFF;color:#2458E8} .educfr-home .ed-laptop-screen .mod.is-cyan .mod-ic{background:#E1F5FC;color:#0E90BE} .educfr-home .ed-laptop-screen .mod.is-gold .mod-ic{background:#FDF1DC;color:#B57A15} .educfr-home .ed-laptop-screen .mod.is-coral .mod-ic{background:#FDE9E7;color:#CC4B3C} .educfr-home .ed-laptop-screen .mod h3{margin:0;font-size:13.5px;font-weight:750;color:var(--navy-2)} .educfr-home .ed-laptop-screen .mod p{margin:4px 0 7px;font-size:11px;color:var(--muted);line-height:1.42;min-height:27px} .educfr-home .ed-laptop-screen .mod strong{font-size:11.5px;font-weight:750;color:var(--blue)} .educfr-home .ed-laptop-screen .mod.is-hot{transform:translateY(-2px);box-shadow:0 14px 30px -18px rgba(8,46,99,.45)} .educfr-home .ed-laptop-screen .dash-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:12px;margin-top:9px} .educfr-home .ed-laptop-screen .sess{display:flex;align-items:center;gap:13px;margin-top:8px;padding:8px 11px;border-radius:13px;background:var(--soft)} .educfr-home .ed-laptop-screen .sess-time{text-align:center;flex:0 0 auto;padding-right:14px;border-right:1px solid #DCE6F7} .educfr-home .ed-laptop-screen .sess-time strong{display:block;font-size:19px;font-weight:800;color:var(--navy-2);line-height:1} .educfr-home .ed-laptop-screen .sess-time span{display:block;font-size:10px;color:var(--muted);margin-top:3px} .educfr-home .ed-laptop-screen .sess-info{flex:1 1 auto;min-width:0} .educfr-home .ed-laptop-screen .sess-info strong{display:block;font-size:13px;color:var(--navy-2)} .educfr-home .ed-laptop-screen .sess-info span{display:block;font-size:11px;color:var(--muted);margin-top:2px} .educfr-home .ed-laptop-screen .stat-list{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px} .educfr-home .ed-laptop-screen .stat-list div{padding:7px 8px;border-radius:11px;background:var(--soft);text-align:center} .educfr-home .ed-laptop-screen .stat-list strong{display:block;font-size:18px;font-weight:800;color:var(--navy-2)} .educfr-home .ed-laptop-screen .stat-list span{display:block;font-size:9.5px;color:var(--muted);margin-top:3px} /* --------------------- 2. Cours enregistrés --------------------- */ .educfr-home .ed-laptop-screen .course-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px} .educfr-home .ed-laptop-screen .course{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease} .educfr-home .ed-laptop-screen .course.is-hot{transform:translateY(-3px);box-shadow:0 18px 34px -20px rgba(8,46,99,.5)} .educfr-home .ed-laptop-screen .course-cover{position:relative;height:78px;display:grid;place-items:center;color:#fff;font-size:28px} .educfr-home .ed-laptop-screen .course-cover span{filter:drop-shadow(0 3px 8px rgba(0,0,0,.22))} .educfr-home .ed-laptop-screen .course-cover em{ position:absolute;left:10px;top:10px;font-style:normal; font-size:9px;font-weight:800;letter-spacing:.06em;padding:4px 8px;border-radius:var(--r-pill); background:rgba(255,255,255,.22); } .educfr-home .ed-laptop-screen .c-1{background:linear-gradient(135deg,#1B4FA8,#2A7FD4)} .educfr-home .ed-laptop-screen .c-2{background:linear-gradient(135deg,#0E7490,#22B8E8)} .educfr-home .ed-laptop-screen .c-3{background:linear-gradient(135deg,#14804F,#3CB37A)} .educfr-home .ed-laptop-screen .c-4{background:linear-gradient(135deg,#4B3B9E,#7A6BD8)} .educfr-home .ed-laptop-screen .c-5{background:linear-gradient(135deg,#9A5518,#D18B36)} .educfr-home .ed-laptop-screen .c-6{background:linear-gradient(135deg,#1F3D74,#3E6BB8)} .educfr-home .ed-laptop-screen .course-body{padding:12px 14px 14px} .educfr-home .ed-laptop-screen .course-body>span{font-size:9.5px;letter-spacing:.08em;font-weight:800;color:#8494AC} .educfr-home .ed-laptop-screen .course-body h3{margin:5px 0 10px;font-size:13.5px;font-weight:750;color:var(--navy-2)} .educfr-home .ed-laptop-screen .bar{height:5px;border-radius:var(--r-pill);background:#E9EFF9;overflow:hidden} .educfr-home .ed-laptop-screen .bar i{display:block;height:100%;border-radius:var(--r-pill);background:linear-gradient(90deg,var(--blue),var(--cyan))} .educfr-home .ed-laptop-screen .course-body small{display:block;margin-top:7px;font-size:10.5px;color:var(--muted)} /* --------------------- 3. Cours Live --------------------- */ .educfr-home .ed-laptop-screen .cal{background:#fff;border:1px solid var(--line);border-radius:18px;padding:14px 16px} .educfr-home .ed-laptop-screen .cal-top{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:12px} .educfr-home .ed-laptop-screen .cal-nav{display:flex;align-items:center;gap:12px} .educfr-home .ed-laptop-screen .cal-nav span{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;border:1px solid var(--line);color:#41557A;font-size:14px} .educfr-home .ed-laptop-screen .cal-nav strong{font-size:15px;font-weight:750;color:var(--navy-2)} .educfr-home .ed-laptop-screen .cal-legend{display:flex;align-items:center;gap:6px;font-size:10.5px;color:var(--muted)} .educfr-home .ed-laptop-screen .cal-legend i{width:8px;height:8px;border-radius:3px;margin-left:8px} .educfr-home .ed-laptop-screen .cal-legend i:first-child{margin-left:0} .educfr-home .ed-laptop-screen .l-1{background:#2458E8} .educfr-home .ed-laptop-screen .l-2{background:#0E90BE} .educfr-home .ed-laptop-screen .l-3{background:#7A6BD8} .educfr-home .ed-laptop-screen .cal-days{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:6px} .educfr-home .ed-laptop-screen .cal-days span{font-size:9.5px;letter-spacing:.08em;font-weight:800;color:#8494AC;text-align:center} .educfr-home .ed-laptop-screen .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px} .educfr-home .ed-laptop-screen .cal-cell{min-height:57px;border-radius:11px;border:1px solid var(--line);background:#FCFDFF;padding:6px 6px 5px} .educfr-home .ed-laptop-screen .cal-cell b{display:block;font-size:11px;font-weight:700;color:#41557A} .educfr-home .ed-laptop-screen .cal-cell.is-out{background:#F6F8FC;opacity:.5} .educfr-home .ed-laptop-screen .cal-cell.is-today{border-color:#B9CDF7;background:#F3F7FF;box-shadow:0 0 0 1px rgba(36,88,232,.12)} .educfr-home .ed-laptop-screen .ev{ display:block;margin-top:5px;padding:4px 6px;border-radius:7px; font-size:9.5px;font-weight:700;color:#fff;line-height:1.25; transition:transform .18s ease,box-shadow .18s ease; } .educfr-home .ed-laptop-screen .ev.e-1{background:#2458E8} .educfr-home .ed-laptop-screen .ev.e-2{background:#0E90BE} .educfr-home .ed-laptop-screen .ev.e-3{background:#7A6BD8} .educfr-home .ed-laptop-screen .ev.is-hot{transform:translateY(-1px) scale(1.03);box-shadow:0 8px 16px -8px rgba(11,35,70,.6)} /* --------------------- 4. Mes ressources --------------------- */ .educfr-home .ed-laptop-screen .res-filters{display:flex;gap:8px;margin-bottom:14px} .educfr-home .ed-laptop-screen .res-filters span{ padding:6px 12px;border-radius:var(--r-pill);border:1px solid var(--line); background:#fff;font-size:11.5px;font-weight:650;color:#41557A; } .educfr-home .ed-laptop-screen .res-filters span.is-on{background:var(--navy-2);color:#fff;border-color:transparent} .educfr-home .ed-laptop-screen .res-list{display:grid;gap:10px} .educfr-home .ed-laptop-screen .res{ display:flex;align-items:center;gap:14px;padding:14px 16px; background:#fff;border:1px solid var(--line);border-radius:15px; transition:transform .2s ease,box-shadow .2s ease; } .educfr-home .ed-laptop-screen .res.is-hot{transform:translateY(-2px);box-shadow:0 16px 30px -20px rgba(8,46,99,.5)} .educfr-home .ed-laptop-screen .res-ic{ display:grid;place-items:center;width:44px;height:44px;border-radius:12px;flex:0 0 auto; font-size:9.5px;font-weight:850;letter-spacing:.04em; } .educfr-home .ed-laptop-screen .res-ic.is-pdf{background:#FDE9E7;color:#C0392B} .educfr-home .ed-laptop-screen .res-ic.is-doc{background:#E8EEFF;color:#2458E8} .educfr-home .ed-laptop-screen .res-body{flex:1 1 auto;min-width:0} .educfr-home .ed-laptop-screen .res-body h3{margin:0;font-size:13.5px;font-weight:750;color:var(--navy-2)} .educfr-home .ed-laptop-screen .res-body small{display:block;margin-top:4px;font-size:11px;color:var(--muted)} /* --------------------- 5. Nos offres --------------------- */ .educfr-home .ed-laptop-screen .shop-hero{ display:flex;align-items:center;justify-content:space-between;gap:20px; padding:20px 22px;border-radius:20px;background:#fff;border:1px solid var(--line); } .educfr-home .ed-laptop-screen .shop-hero h1{margin:5px 0 0;font-size:22px;font-weight:800;letter-spacing:-.02em;color:var(--navy-2)} .educfr-home .ed-laptop-screen .shop-hero p{margin:7px 0 0;font-size:12.5px;color:var(--muted);max-width:520px;line-height:1.5} .educfr-home .ed-laptop-screen .shop-chip{flex:0 0 auto;padding:12px 16px;border-radius:14px;background:var(--soft);border:1px solid #DFE9FA;text-align:right} .educfr-home .ed-laptop-screen .shop-chip span{display:block;font-size:9.5px;letter-spacing:.09em;font-weight:800;color:#8494AC} .educfr-home .ed-laptop-screen .shop-chip strong{display:block;margin-top:4px;font-size:15px;font-weight:750;color:var(--navy-2)} .educfr-home .ed-laptop-screen .shop-info{margin-top:12px;padding:13px 16px;border-radius:14px;background:#EDF4FF;border:1px solid #DCE8FC} .educfr-home .ed-laptop-screen .shop-info strong{font-size:12.5px;color:var(--navy-2)} .educfr-home .ed-laptop-screen .shop-info p{margin:4px 0 0;font-size:11.5px;color:var(--muted)} .educfr-home .ed-laptop-screen .lvl-tabs{display:flex;gap:8px;margin-bottom:14px} .educfr-home .ed-laptop-screen .lvl-tabs span{ display:flex;flex-direction:column;justify-content:center; min-height:38px;padding:6px 16px;border-radius:11px;border:1px solid var(--line); background:#fff;font-size:12.5px;font-weight:700;color:#41557A; } .educfr-home .ed-laptop-screen .lvl-tabs span.is-on{background:linear-gradient(135deg,var(--blue),var(--blue-2));color:#fff;border-color:transparent} .educfr-home .ed-laptop-screen .lvl-tabs span small{font-size:9px;font-weight:650;opacity:.7} .educfr-home .ed-laptop-screen .mythos{ display:flex;align-items:center;justify-content:space-between;gap:22px; padding:18px 22px;border-radius:18px;margin-bottom:14px;color:#fff; background:radial-gradient(420px 200px at 90% 0%,rgba(34,184,232,.32),transparent 60%),linear-gradient(120deg,#122A55,#254C9E); } .educfr-home .ed-laptop-screen .mythos .kicker{color:rgba(180,214,255,.9)} .educfr-home .ed-laptop-screen .mythos h3{margin:6px 0 0;font-size:19px;font-weight:800;letter-spacing:-.02em} .educfr-home .ed-laptop-screen .mythos p{margin:6px 0 0;font-size:12px;color:rgba(255,255,255,.76);max-width:430px;line-height:1.5} .educfr-home .ed-laptop-screen .mythos-price{text-align:right;flex:0 0 auto} .educfr-home .ed-laptop-screen .mythos-price strong{display:block;font-size:24px;font-weight:800;margin-top:6px} .educfr-home .ed-laptop-screen .mythos-price small{display:block;font-size:10.5px;color:rgba(255,255,255,.62);max-width:150px;line-height:1.4} .educfr-home .ed-laptop-screen .mythos-price .mini-btn{margin-top:10px} .educfr-home .ed-laptop-screen .promo{ display:inline-block;padding:4px 9px;border-radius:var(--r-pill); background:#12A16B;color:#fff;font-size:10px;font-weight:850;letter-spacing:.02em; } .educfr-home .ed-laptop-screen .offer-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px} .educfr-home .ed-laptop-screen .offer{background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px 18px} .educfr-home .ed-laptop-screen .offer-head span{font-size:9.5px;letter-spacing:.09em;font-weight:850;color:#8494AC} .educfr-home .ed-laptop-screen .offer-head h3{margin:5px 0 0;font-size:15.5px;font-weight:750;color:var(--navy-2);letter-spacing:-.01em} .educfr-home .ed-laptop-screen .offer-head p{margin:3px 0 0;font-size:11px;color:var(--muted)} .educfr-home .ed-laptop-screen .packs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px} .educfr-home .ed-laptop-screen .pack{padding:12px;border-radius:14px;border:1px solid var(--line);background:#FBFCFF;display:flex;flex-direction:column;align-items:flex-start;gap:7px} .educfr-home .ed-laptop-screen .pack.is-elite{background:linear-gradient(180deg,#F2F6FF,#E9F0FF);border-color:#D8E4FA} .educfr-home .ed-laptop-screen .pack strong{display:block;font-size:12.5px;color:var(--navy-2)} .educfr-home .ed-laptop-screen .pack small{display:block;font-size:10px;color:var(--muted);margin-top:2px;line-height:1.35} .educfr-home .ed-laptop-screen .pack .price{font-size:17px;font-weight:800;color:var(--navy-2)} .educfr-home .ed-laptop-screen .pack .mini-btn{width:100%} .educfr-home .ed-laptop-screen .arch{ display:flex;align-items:center;gap:16px;margin-top:14px; padding:16px 20px;border-radius:18px;background:#fff;border:1px dashed #CBD9F0; } .educfr-home .ed-laptop-screen .arch-ic{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:#EDF4FF;color:#2458E8;font-size:20px;flex:0 0 auto} .educfr-home .ed-laptop-screen .arch h3{margin:5px 0 0;font-size:15px;font-weight:750;color:var(--navy-2)} .educfr-home .ed-laptop-screen .arch p{margin:4px 0 0;font-size:11.5px;color:var(--muted);max-width:470px;line-height:1.45} .educfr-home .ed-laptop-screen .arch-promo{margin-left:auto;text-align:center;flex:0 0 auto;padding:10px 14px;border-radius:13px;background:#E4F6EE} .educfr-home .ed-laptop-screen .arch-promo strong{display:block;font-size:18px;font-weight:850;color:#0E7C52} .educfr-home .ed-laptop-screen .arch-promo span{display:block;font-size:9.5px;font-weight:750;color:#0E7C52;opacity:.8} .educfr-home .ed-laptop-screen .prog-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:14px;padding-bottom:6px} .educfr-home .ed-laptop-screen .prog{background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px 18px} .educfr-home .ed-laptop-screen .prog.is-gold{background:linear-gradient(180deg,#FFFBF3,#FFF6E8);border-color:#F3E3C6} .educfr-home .ed-laptop-screen .prog.is-coral{background:linear-gradient(180deg,#FFF7F5,#FFEFEC);border-color:#F6DAD3} .educfr-home .ed-laptop-screen .prog-head{display:flex;align-items:center;gap:11px} .educfr-home .ed-laptop-screen .prog-head>span{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:#fff;font-size:18px;flex:0 0 auto} .educfr-home .ed-laptop-screen .prog-head small{display:block;font-size:9px;letter-spacing:.1em;font-weight:850;color:#8494AC} .educfr-home .ed-laptop-screen .prog-head h3{margin:3px 0 0;font-size:15px;font-weight:750;color:var(--navy-2)} .educfr-home .ed-laptop-screen .prog>p{margin:10px 0 0;font-size:11.5px;color:var(--muted);line-height:1.5} .educfr-home .ed-laptop-screen .prog ul{margin:10px 0 0;padding:0;list-style:none;display:grid;gap:5px} .educfr-home .ed-laptop-screen .prog li{font-size:11.5px;color:#3A4B67} .educfr-home .ed-laptop-screen .prog-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px} .educfr-home .ed-laptop-screen .prog-price strong{display:block;font-size:19px;font-weight:800;color:var(--navy-2)} .educfr-home .ed-laptop-screen .prog-price span{display:block;font-size:10px;color:var(--muted)} .educfr-home .ed-laptop-screen .go-plans{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px} .educfr-home .ed-laptop-screen .go-plan{position:relative;padding:12px;border-radius:14px;background:#fff;border:1px solid #F0DCD6} .educfr-home .ed-laptop-screen .go-plan.is-best{border-color:#E9B8AB;box-shadow:0 12px 26px -20px rgba(204,75,60,.6)} .educfr-home .ed-laptop-screen .go-plan small{display:block;font-size:9px;letter-spacing:.1em;font-weight:850;color:#8494AC} .educfr-home .ed-laptop-screen .go-plan h4{margin:4px 0 0;font-size:14px;font-weight:750;color:var(--navy-2)} .educfr-home .ed-laptop-screen .go-plan p{margin:5px 0 8px;font-size:10.5px;color:var(--muted);line-height:1.4;min-height:29px} .educfr-home .ed-laptop-screen .go-plan strong{display:block;font-size:16px;font-weight:800;color:var(--navy-2);margin-bottom:8px} .educfr-home .ed-laptop-screen .go-plan .mini-btn{width:100%} .educfr-home .ed-laptop-screen .go-badge{ position:absolute;top:-9px;right:10px;padding:3px 8px;border-radius:var(--r-pill); background:#CC4B3C;color:#fff;font-size:9px;font-weight:850;letter-spacing:.03em; } /* ------------------------- Curseur ------------------------- */ .educfr-home .ed-laptop-screen .app-cursor{ position:absolute;top:0;left:0;z-index:40;pointer-events:none; transform:translate3d(120px,300px,0); filter:drop-shadow(0 3px 5px rgba(8,25,54,.32)); will-change:transform; } .educfr-home .ed-laptop-screen .app-cursor svg{fill:#0E1B33;stroke:#fff;stroke-width:1.4;stroke-linejoin:round} .educfr-home .ed-laptop-screen .app-cursor.is-down svg{transform:scale(.86);transform-origin:6px 4px} .educfr-home .ed-laptop-screen .app-cursor.is-hidden{opacity:0} .educfr-home .ed-laptop-screen .app-ripple{ position:absolute;z-index:39;width:14px;height:14px;margin:-7px 0 0 -7px; border-radius:50%;border:2px solid rgba(36,88,232,.75); animation:edRipple .55s ease-out forwards;pointer-events:none; } @keyframes edRipple{from{transform:scale(.3);opacity:.9}to{transform:scale(3.2);opacity:0} } /* ========================================================= ÉCHELLE DU LAPTOP SELON LA LARGEUR Une seule variable pilote tout : l'interface reste nette parce qu'elle est mise à l'échelle, jamais re-rendue. ========================================================= */ /* L'écran est mis à l'échelle, donc son texte l'est aussi : trop grand, l'interface débordait et les annotations venaient buter dessus. */ @media (max-width:1600px){ .educfr-home{--lap-scale:.76} } @media (max-width:1440px){ .educfr-home{--lap-scale:.70} } @media (max-width:1320px){ .educfr-home{--lap-scale:.66} } @media (max-width:1180px){ .educfr-home{--lap-scale:.60} } @media (max-width:1060px){ .educfr-home{--lap-scale:.62} } @media (max-width:900px){ .educfr-home{--lap-scale:.54} } @media (max-width:760px){ .educfr-home{--lap-scale:.46} } @media (max-width:640px){ .educfr-home{--lap-scale:.40} } @media (max-width:540px){ .educfr-home{--lap-scale:.345} } @media (max-width:430px){ .educfr-home{--lap-scale:.30} } @media (max-width:380px){ .educfr-home{--lap-scale:.27} } /* Mouvement réduit : l'écran se fige, le curseur disparaît. */ @media (prefers-reduced-motion:reduce){ .educfr-home .ed-laptop-screen .app-cursor{display:none} .educfr-home .ed-laptop-screen .app *{animation:none !important;transition:none !important} }