/* ===================================================================== CAPSULES NARRÉES — feuille unique (charte inerWeb Édu). --------------------------------------------------------------------- CONTRAT : habille la coquille `index.html` des capsules. Une seule feuille pour les N capsules — le contenu vient de donnees/.js. Fonds clairs uniquement, jamais de thème sombre (charte R2). Le mode PROJECTION (classe .projection sur ) agrandit tout pour la salle : c'est un zoom typographique, jamais une mise en page à part. PIÈGE : le coin bas-droit est réservé aux boutons « Aa » et le coin bas-gauche au filigrane de marque — ne rien y poser. ===================================================================== */ :root{ --bleu:#1B3A63; --bleu-clair:#2f5689; --orange:#FF6B35; --orange-clair:#ffe2d6; --txt:#1d2a38; --mut:#5a6b7d; --fond:#eef2f6; --carte:#fff; --ligne:#d6dee7; --ok:#1e7e54; --ok-bg:#e3f5ec; --ko:#c0392b; --ko-bg:#fbe7e4; --r:14px; --ombre:0 2px 10px rgba(27,58,99,.10); --taille:16px; } *{box-sizing:border-box} html,body{margin:0} body{ background:var(--fond); color:var(--txt); font-family:Calibri,"Segoe UI",system-ui,Arial,sans-serif; font-size:var(--taille); line-height:1.6; } body.projection{--taille:20px} h1,h2,h3{font-family:"Trebuchet MS",Calibri,Arial,sans-serif; font-weight:700; color:var(--bleu); margin:0} img,svg{max-width:100%} .saut{position:absolute;left:-9999px;top:0;background:#fff;padding:10px 16px;z-index:50} .saut:focus{left:8px;top:8px} /* ---------- Bandeau ---------- */ .barre{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--bleu);color:#fff;padding:10px 18px} .barre .logo{font-family:"Trebuchet MS";font-weight:700;font-size:18px;letter-spacing:.5px} .barre .logo b{color:var(--orange)} .barre .pack-titre{font-size:14px;color:#cdd9e6} .barre .spacer{flex:1} .bouton-plat{ background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.35); border-radius:999px;padding:6px 14px;font:inherit;font-size:14px;cursor:pointer;text-decoration:none; } .bouton-plat:hover{background:rgba(255,255,255,.24)} .bouton-plat[aria-pressed="true"]{background:#fff;color:var(--bleu);font-weight:700;border-color:var(--orange)} /* ---------- Accueil ---------- */ .accueil{ max-width:1120px;margin:26px auto;padding:0 20px 40px; display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:32px;align-items:center; } .surtitre{font-size:12.5px;font-weight:700;letter-spacing:.14em;color:var(--orange);margin:0 0 6px;text-transform:uppercase} .accueil h1{font-size:clamp(28px,4.2vw,44px);line-height:1.15;margin-bottom:14px} .accueil-intro{font-size:1.05em;color:var(--txt);margin:0 0 20px;max-width:56ch} .accueil-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center} .accueil-compte{font-size:14px;color:var(--mut);margin:14px 0 0} .accueil-codes{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px} .accueil-codes li{ background:#fff;border:1px solid var(--ligne);border-radius:999px; padding:5px 13px;font-size:13px;color:var(--bleu);box-shadow:var(--ombre); } .accueil-codes li b{color:var(--orange)} .accueil-visuel{margin:0;background:#fff;border:1px solid var(--ligne);border-radius:var(--r); box-shadow:var(--ombre);padding:14px;display:flex;align-items:center;justify-content:center} .accueil-visuel svg,.accueil-visuel img{width:100%;height:auto;display:block;border-radius:8px} .bouton-plein{ background:var(--bleu);color:#fff;border:2px solid var(--bleu);border-radius:999px; padding:12px 26px;font:inherit;font-weight:700;font-size:1.02em;cursor:pointer;text-decoration:none;display:inline-block; } .bouton-plein:hover{background:var(--bleu-clair);border-color:var(--bleu-clair)} .bouton-creux{ background:#fff;color:var(--bleu);border:2px solid var(--bleu);border-radius:999px; padding:12px 22px;font:inherit;font-weight:700;cursor:pointer;text-decoration:none;display:inline-block; } .bouton-creux:hover{background:#eaf1f9} /* ---------- Parcours ---------- */ .parcours{max-width:1180px;margin:22px auto;padding:0 20px 70px;display:grid;grid-template-columns:214px minmax(0,1fr);gap:22px;align-items:start} .rail{background:#fff;border:1px solid var(--ligne);border-radius:var(--r);box-shadow:var(--ombre);padding:14px;position:sticky;top:14px} .rail-tete{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;color:var(--mut);letter-spacing:.1em;margin-bottom:10px} .rail-tete strong{color:var(--bleu);font-size:14px;letter-spacing:0} .rail-points{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:2px;max-height:46vh;overflow:auto} .rail-points button{ width:100%;text-align:left;font:inherit;font-size:13.5px;cursor:pointer;color:var(--mut); background:none;border:0;border-left:3px solid transparent;padding:6px 8px;border-radius:0 6px 6px 0; } .rail-points button:hover{background:#f2f7fc;color:var(--bleu)} .rail-points li.actif button{border-left-color:var(--orange);background:#f2f7fc;color:var(--bleu);font-weight:700} .rail-points li.vu button::after{content:" ✓";color:var(--ok);font-weight:700} .rail-jauge{height:7px;background:#e6edf4;border-radius:999px;overflow:hidden} .rail-jauge span{display:block;height:100%;width:0;background:var(--orange);transition:width .3s} .rail-note{font-size:12.5px;color:var(--mut);margin:8px 0 0} .ecran{background:#fff;border:1px solid var(--ligne);border-radius:var(--r);box-shadow:var(--ombre);overflow:hidden} .ecran-tete{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;padding:18px 22px 10px;border-bottom:1px solid var(--ligne)} .ecran-tete h2{font-size:clamp(20px,2.4vw,27px);line-height:1.25} .outils{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .bouton-outil{ background:#f2f7fc;border:1px solid var(--ligne);border-radius:999px;color:var(--bleu); padding:7px 14px;font:inherit;font-size:14px;cursor:pointer; } .bouton-outil:hover{background:#e4eef8} .bouton-outil[disabled]{opacity:.45;cursor:default} .bouton-outil.voix{background:var(--bleu);color:#fff;border-color:var(--bleu);font-weight:700} .bouton-outil.voix:hover{background:var(--bleu-clair)} .bouton-outil.voix.parle{background:var(--orange);border-color:var(--orange)} .vitesse{display:flex;align-items:center;gap:4px;background:#fff;border:1px solid var(--ligne);border-radius:999px;padding:3px 8px;font-size:13px;color:var(--mut)} .vitesse button{background:none;border:0;font:inherit;font-size:16px;font-weight:700;color:var(--bleu);cursor:pointer;padding:0 5px;line-height:1} .ecran-corps{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:24px;padding:20px 22px} .visuel{margin:0;align-self:start;background:#fbfcfe;border:1px solid var(--ligne);border-radius:10px;padding:10px} .visuel svg,.visuel img{width:100%;height:auto;display:block} .visuel figcaption{font-size:13px;color:var(--mut);font-style:italic;margin-top:8px} .propos p{margin:0 0 12px} .propos ul{margin:0 0 12px;padding-left:22px} .propos li{margin:5px 0} .propos b{color:var(--bleu)} .retenir{border-left:4px solid var(--ok);background:var(--ok-bg);border-radius:8px;padding:12px 16px;margin:16px 0 0} .retenir .t{font-weight:700;color:var(--bleu);margin-bottom:4px;display:block} .retenir ul{margin:6px 0 0;padding-left:20px} .alerte-piege{border-left:4px solid var(--orange);background:var(--orange-clair);border-radius:8px;padding:12px 16px;margin:16px 0 0} .alerte-piege .t{font-weight:700;color:var(--bleu);margin-bottom:4px;display:block} /* ---------- Contrôle ---------- */ .controle{margin-top:18px;border-top:2px dashed var(--ligne);padding-top:16px} .controle .enonce{font-weight:700;color:var(--bleu);margin-bottom:10px;font-size:1.04em} .controle .choix{display:flex;flex-direction:column;gap:8px} .controle .choix button{ text-align:left;font:inherit;cursor:pointer;padding:11px 14px;background:#fff; border:2px solid var(--ligne);border-radius:10px;color:var(--txt); } .controle .choix button:hover{border-color:var(--bleu-clair);background:#f5f9fd} .controle .choix button.juste{border-color:var(--ok);background:var(--ok-bg);font-weight:700} .controle .choix button.juste::before{content:"✓ ";color:var(--ok);font-weight:700} .controle .choix button.faux{border-color:var(--ko);background:var(--ko-bg)} .controle .choix button.faux::before{content:"✗ ";color:var(--ko);font-weight:700} .controle .choix button[disabled]{cursor:default} .controle .verdict{margin-top:12px;padding:12px 16px;border-radius:8px;background:#f3f7fb;border-left:4px solid var(--bleu)} .ecran-pied{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:14px 22px 18px;border-top:1px solid var(--ligne);background:#fafcfe} .bouton-nav{background:var(--bleu);color:#fff;border:2px solid var(--bleu);border-radius:999px;padding:10px 22px;font:inherit;font-weight:700;cursor:pointer} .bouton-nav:hover{background:var(--bleu-clair)} .bouton-nav.creux{background:#fff;color:var(--bleu)} .bouton-nav.creux:hover{background:#eaf1f9} .bouton-nav[disabled]{opacity:.4;cursor:default} .reference{font-size:13px;color:var(--mut);text-align:center;flex:1;min-width:150px} .message{min-height:22px;margin:0;padding:0 22px 14px;font-size:14px;color:var(--ok);font-weight:700} /* ---------- Fin ---------- */ .fin{max-width:820px;margin:30px auto;padding:26px;background:#fff;border:1px solid var(--ligne);border-radius:var(--r);box-shadow:var(--ombre)} .fin h2{font-size:26px;margin-bottom:12px} .fin-bilan ul{padding-left:22px} .fin-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px} /* ---------- Mode projection (salle) ---------- */ body.projection .parcours{grid-template-columns:minmax(0,1fr);max-width:1400px} body.projection .rail{position:static;display:flex;align-items:center;gap:16px} body.projection .rail-points{display:none} body.projection .rail-jauge{flex:1} body.projection .ecran-corps{gap:30px} body.projection .propos{font-size:1.12em} body.projection .outils .etiquette{display:none} /* ---------- Impression : la capsule à plat ---------- */ .livret{display:none} @media print{ .barre,.accueil,.parcours,.fin,.saut{display:none !important} body{background:#fff;font-size:11.5pt} .livret{display:block;max-width:none;margin:0;padding:0} .livret h1{font-size:20pt;margin-bottom:4pt} .livret .sous{color:#5a6b7d;margin:0 0 14pt;font-size:10.5pt} .livret section{page-break-inside:avoid;break-inside:avoid;border-top:1px solid #d6dee7;padding-top:10pt;margin-top:12pt} .livret h2{font-size:14pt;margin-bottom:6pt} .livret .duo{display:grid;grid-template-columns:1fr 1fr;gap:12pt;align-items:start} .livret svg,.livret img{width:100%;height:auto} .livret .retenir{border-left:3px solid #1e7e54;background:#e3f5ec;padding:6pt 9pt} } /* ---------- Petits écrans ---------- */ @media (max-width:960px){ .accueil{grid-template-columns:minmax(0,1fr);gap:22px} .parcours{grid-template-columns:minmax(0,1fr)} .rail{position:static} .rail-points{flex-direction:row;overflow-x:auto;max-height:none} .rail-points button{white-space:nowrap;border-left:0;border-bottom:3px solid transparent;border-radius:6px 6px 0 0} .rail-points li.actif button{border-left-color:transparent;border-bottom-color:var(--orange)} .ecran-corps{grid-template-columns:minmax(0,1fr)} } /* Mouvement réduit : on calme l'animation, on ne l'efface JAMAIS — elle porte du contenu (charte : animation porteuse ≠ décoration). */ @media (prefers-reduced-motion:reduce){ .rail-jauge span{transition:none} [data-anime] *{animation-duration:.001s !important;animation-iteration-count:1 !important} }