/* ===================================================================== FRANCOPHILE — système visuel UNE structure, CINQ thèmes. Chaque thème est un jeu de variables CSS (couleurs, arrondis, police de titre) plus quelques surcharges de forme. L'élève choisit le sien dans « Mon compte » ; l'attribut data-theme sur fait le reste. Thème de base : STUDIO — blanc, gris, un accent violet, presque sans ornement. C'est le neutre : ce que voit un élève qui n'a rien choisi. Règle qui vaut pour tous : la surface de TRAVAIL (texte, copie, dictée) reste calme et lisible. Le thème habille l'application, pas l'exercice. Texte courant partout : Atkinson Hyperlegible, dessinée pour la basse vision — elle sépare l/I/1 et O/0, ce qui compte quand des élèves dyslexiques lisent des consignes. Chiffres et scores : IBM Plex Mono. ===================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Anton&family=Bricolage+Grotesque:opsz,wght@12..96,700;12..96,800&family=Fraunces:opsz,wght,SOFT,WONK@9..144,700,0..100,0..1&family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&family=IBM+Plex+Mono:wght@500;700&display=swap'); /* ===================================================================== THÈME DE BASE — Studio ===================================================================== */ :root, [data-theme="studio"] { color-scheme: light; --r1: .25rem; --r2: .5rem; --r3: .75rem; --r4: 1rem; --r5: 1.5rem; --r6: 2rem; --r7: 3rem; --largeur: 70rem; --trame: none; --trame-fine: none; --encre-900: #17181C; --encre-700: #4A4D57; --encre: #17181C; --encre-300: #B4B7C2; --papier: #F3F4F7; --papier-vif: #FFFFFF; --papier-creux: #E9EBF0; --trait: #17181C; --trait-fin: #E1E3EA; --regle: #D3DBE6; --marge: #EFA3AE; --c0: #FFFFFF; --c1: #F7C948; --c2: #F0853A; --c3: #34B36B; --c4: #3B82F6; --c5: #A16A3B; --c6: #17181C; --accent: #6D5DF6; --accent-2: #22B8CF; --accent-mat: #5A4AE3; --encre-50: #EEEBFE; --juste: #2E9E5B; --juste-fond: #E4F5EA; --faux: #E5484D; --faux-fond: #FDE7E8; --rouge: #E5484D; --rouge-50: #FDE7E8; --attente: #C77A11; --attente-fond: #FDF1DD; --or: #F7C948; --surligne: #FFF1B8; --surligne-bord: #E0B33A; --d-technique: #6D5DF6; --d-analyse: #3B82F6; --d-production: #F0853A; --d-dictee: #22B8CF; --clair: #17181C; --clair-2: #6B6F7B; --nuit: #17181C; --nuit-2: #23252C; --nuit-3: #33363F; --nuit-4: #4A4D57; --ombre: 0 1px 2px rgba(23,24,28,.05), 0 8px 24px -14px rgba(23,24,28,.22); --arrondi: 12px; --arrondi-s: 8px; --cadre: 1px solid var(--trait-fin); --trame-encre: rgba(23,24,28,0); --trame-encre-fine: rgba(23,24,28,0); --vitesse-encre: rgba(109,93,246,.35); --vitesse-encre-inverse: rgba(255,255,255,.5); --ombre-entete: rgba(0,0,0,.05); --sur-nuit: #FFFFFF; --sur-nuit-2: rgba(255,255,255,.72); --sur-nuit-accent: #6D5DF6; --police-titre: 'Bricolage Grotesque', system-ui, sans-serif; --pente: 0deg; } /* ===================================================================== THÈME Planche — encre noire sur papier, la planche de manga ===================================================================== */ [data-theme="planche"] { color-scheme: light; --trame-encre: rgba(18,16,14,.55); --trame-encre-fine: rgba(18,16,14,.30); --vitesse-encre: rgba(18,16,14,.55); --vitesse-encre-inverse: rgba(250,247,240,.75); --ombre-entete: rgba(18,16,14,.18); --sur-nuit: #FAF7F0; --sur-nuit-2: rgba(250,247,240,.78); --sur-nuit-accent: #FFD028; --police-titre: 'Anton', 'Arial Narrow', system-ui, sans-serif; --pente: -7deg; --encre-900: #12100E; /* le noir d'impression, jamais pur */ --encre-700: #3A3532; --encre: #12100E; --encre-300: #A8A29B; --papier: #FAF7F0; /* papier de volume, légèrement chaud */ --papier-vif: #FFFDF8; --papier-creux: #EDE8DD; --trait: #12100E; --trait-fin: #D8D2C6; --regle: #C9D8E4; --marge: #E9A0A9; /* Ceintures — la seule couleur de la planche */ --c0: #FFFDF8; --c1: #FFD028; --c2: #FF8A2B; --c3: #2FC46F; --c4: #2E8CF0; --c5: #A9682F; --c6: #12100E; --accent: #FF2E4C; /* le rouge d'accent, comme une couverture */ --accent-2: #2E8CF0; --accent-mat: #E01234; --encre-50: #FFEAEE; --juste: #1B9E57; --juste-fond: #E2F7EC; --faux: #E3103A; --faux-fond: #FFE7EC; --rouge: #E3103A; --rouge-50: #FFE7EC; --attente: #B87400; --attente-fond: #FFF3D9; --or: #FFD028; --surligne: #FFE9A8; --surligne-bord:#D9A81F; --d-technique: #2FC46F; --d-analyse: #2E8CF0; --d-production: #FF8A2B; --d-dictee: #8B5CF6; --clair: #12100E; --clair-2: #6B6560; --nuit: #12100E; --nuit-2: #221F1B; --nuit-3: #3A3532; --nuit-4: #6B6560; --r1:.25rem; --r2:.5rem; --r3:.75rem; --r4:1rem; --r5:1.5rem; --r6:2rem; --r7:3rem; --arrondi: 4px; --arrondi-s: 3px; --cadre: 3px solid var(--trait); --ombre: 5px 5px 0 var(--trait); --largeur: 70rem; /* Trames : les gris du manga sont des points, pas des aplats */ --trame: radial-gradient(circle, var(--trame-encre) .9px, transparent 1px) 0 0 / 5px 5px; --trame-fine:radial-gradient(circle, var(--trame-encre-fine) .8px, transparent 1px) 0 0 / 4px 4px; } /* Surcharges Planche : tout ce qui fait « planche de manga » et qui n'est pas une simple couleur — capitales, cadres épais, ombres dures, bulle. */ [data-theme="planche"] h1, [data-theme="planche"] h2, [data-theme="planche"] h3, [data-theme="planche"] h4 { text-transform:uppercase; font-weight:400; letter-spacing:.005em; line-height:1.02; } [data-theme="planche"] .nav a, [data-theme="planche"] .marque, [data-theme="planche"] .bouton, [data-theme="planche"] .ceinture__nom, [data-theme="planche"] .conjug__titre { text-transform:uppercase; letter-spacing:.03em; font-weight:400; } [data-theme="planche"] .marque, [data-theme="planche"] .nav a, [data-theme="planche"] .jeton-xp, [data-theme="planche"] .accueil-connexion__manifeste h1 { transform:skewX(var(--pente)); display:inline-block; } [data-theme="planche"] .carte { border:3px solid var(--trait); box-shadow:5px 5px 0 var(--trait); border-radius:4px; } [data-theme="planche"] .carte::after { display:block; } [data-theme="planche"] .bouton { border:3px solid var(--trait); box-shadow:4px 4px 0 var(--trait); border-radius:3px; background:var(--c1); color:var(--encre-900); } [data-theme="planche"] .bouton:hover { transform:translate(2px,2px); box-shadow:2px 2px 0 var(--trait); } [data-theme="planche"] .bouton--second { background:var(--papier-vif); } [data-theme="planche"] .message, [data-theme="planche"] .consigne, [data-theme="planche"] .bandeau-resultat, [data-theme="planche"] .choix label, [data-theme="planche"] .liste-ordre li, [data-theme="planche"] .texte-travail, [data-theme="planche"] .papier-regle, [data-theme="planche"] .diff-dictee, [data-theme="planche"] .conjug__bloc, [data-theme="planche"] input, [data-theme="planche"] select, [data-theme="planche"] textarea { border-width:3px; border-color:var(--trait); } [data-theme="planche"] .message, [data-theme="planche"] .consigne, [data-theme="planche"] .bandeau-resultat { box-shadow:4px 4px 0 var(--trait); } [data-theme="planche"] .consigne { border-radius:14px; } [data-theme="planche"] .consigne::before, [data-theme="planche"] .consigne::after { display:block; } [data-theme="planche"] .jauge { border:2px solid var(--trait); height:10px; } [data-theme="planche"] .surtitre { background:var(--nuit); color:var(--sur-nuit); padding:.1rem .45rem; } [data-theme="planche"] .tableau th { background:var(--nuit); color:var(--sur-nuit); border-bottom:0; } [data-theme="planche"] .entete { background:var(--nuit); color:var(--sur-nuit); border-bottom:4px solid var(--nuit); } [data-theme="planche"] .entete .marque, [data-theme="planche"] .nav a { color:var(--sur-nuit); } [data-theme="planche"] .nav a[aria-current="page"] { background:var(--sur-nuit-accent); color:var(--nuit); } [data-theme="planche"] .jeton-xp { background:var(--c1); color:var(--encre-900); border:3px solid var(--encre-900); box-shadow:3px 3px 0 var(--sur-nuit); } [data-theme="planche"] body::before, [data-theme="planche"] .lignes-vitesse::after, [data-theme="planche"] .bandeau-resultat.reussi::before { display:block; } [data-theme="planche"].theme-option .theme-option__nom { text-transform:uppercase; font-weight:400; } /* ===================================================================== THÈME Néon — arcade nocturne ===================================================================== */ [data-theme="neon"] { color-scheme: dark; --encre-900: #F2F5FF; --encre-700: #C7CEE6; --encre: #F2F5FF; --encre-300: #6C7699; --papier: #0B0E1A; --papier-vif: #141930; --papier-creux: #1E2545; --trait: #F2F5FF; --trait-fin: #2C3559; --regle: #2C3559; --marge: #FF5C8A; --c0: #F4F7FF; --c1: #FFE066; --c2: #FFB27A; --c3: #7BF0B4; --c4: #8FD0FF; --c5: #E0A878; --c6: #C6CCE6; --accent: #00E5C0; --accent-2: #B37CFF; --accent-mat: #00C4A5; --encre-50: #123A34; --juste: #35E39A; --juste-fond: #123A2E; --faux: #FF4D6D; --faux-fond: #3A1420; --rouge: #FF4D6D; --rouge-50: #3A1420; --attente: #FFC53D; --attente-fond: #3A2E10; --or: #FFE066; --surligne: #4A4218; --surligne-bord: #FFE066; --d-technique: #00E5C0; --d-analyse: #8FD0FF; --d-production: #FFB27A; --d-dictee: #B37CFF; --clair: #F2F5FF; --clair-2: #98A3C8; --nuit: #06081A; --nuit-2: #0F1330; --nuit-3: #1A2048; --nuit-4: #2A3266; --ombre: 0 0 0 1px rgba(242,245,255,.10), 0 0 28px -6px var(--accent-2); --trame-encre: rgba(242,245,255,.28); --trame-encre-fine: rgba(242,245,255,.14); --vitesse-encre: rgba(0,229,192,.7); --vitesse-encre-inverse: rgba(179,124,255,.8); --ombre-entete: rgba(0,0,0,.6); --sur-nuit: #F2F5FF; --sur-nuit-2: rgba(242,245,255,.72); --sur-nuit-accent: #00E5C0; --police-titre: 'Bricolage Grotesque', system-ui, sans-serif; --pente: 0deg; } [data-theme="neon"] .carte { box-shadow: var(--ombre); } [data-theme="neon"] .bouton { color: var(--nuit); background: var(--accent); } [data-theme="neon"] h1, [data-theme="neon"] h2, [data-theme="neon"] h3 { text-transform:none; letter-spacing:-.02em; font-weight:800; } [data-theme="neon"] .nav a, [data-theme="neon"] .bouton, [data-theme="neon"] .marque { text-transform:none; letter-spacing:0; font-weight:800; } [data-theme="neon"] .jeton-xp { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--nuit); box-shadow: 0 0 16px -2px var(--accent); } [data-theme="neon"] body::before { opacity:.18; } [data-theme="neon"].theme-option .theme-option__carte { box-shadow:0 0 12px -2px var(--accent-2); } [data-theme="etoile"].theme-option .theme-option__barre { background:linear-gradient(90deg,#FF5FA2,#9D7BFF); } [data-theme="etoile"].theme-option .theme-option__jauge > span { background:linear-gradient(90deg,#FF5FA2,#9D7BFF); } [data-theme="etoile"].theme-option .theme-option__carte { border-color:var(--trait-fin); box-shadow:0 6px 14px -8px #FF5FA2; } [data-theme="etoile"].theme-option .theme-option__nom::after { content:' ✦'; color:#FF5FA2; } /* ===================================================================== THÈME Herbier — papier crème, vert mousse et rose ===================================================================== */ [data-theme="herbier"] { color-scheme: light; --encre-900: #2A2622; --encre-700: #55504A; --encre: #2A2622; --encre-300: #B5AEA3; --papier: #F6F0E4; --papier-vif: #FFFBF3; --papier-creux: #EBE3D2; --trait: #2A2622; --trait-fin: #DED5C4; --regle: #CFD9C4; --marge: #E5A0A9; --c0: #FFFBF3; --c1: #F2C94C; --c2: #E8874A; --c3: #7DB56A; --c4: #6C9BD2; --c5: #9C6B3E; --c6: #2A2622; --accent: #D96C87; --accent-2: #7DB56A; --accent-mat: #C4556F; --encre-50: #FBE9EE; --juste: #5E9E4C; --juste-fond: #E7F1E1; --faux: #C94A5B; --faux-fond: #F9E4E7; --rouge: #C94A5B; --rouge-50: #F9E4E7; --attente: #B27A1F; --attente-fond: #F8EED8; --or: #F2C94C; --surligne: #F5E7B8; --surligne-bord: #D6B24A; --d-technique: #7DB56A; --d-analyse: #6C9BD2; --d-production: #E8874A; --d-dictee: #A67CC2; --clair: #2A2622; --clair-2: #7A736A; --nuit: #3F5C3A; --nuit-2: #4D6C47; --nuit-3: #5E7E58; --nuit-4: #7A9974; --ombre: 3px 3px 0 var(--trait); --arrondi: 12px; --arrondi-s: 8px; --trame-encre: rgba(42,38,34,.30); --trame-encre-fine: rgba(42,38,34,.14); --vitesse-encre: rgba(42,38,34,.32); --vitesse-encre-inverse: rgba(255,251,243,.65); --ombre-entete: rgba(42,38,34,.14); --sur-nuit: #FFFBF3; --sur-nuit-2: rgba(255,251,243,.80); --sur-nuit-accent: #F2C94C; --police-titre: 'Fraunces', Georgia, serif; --pente: 0deg; } [data-theme="herbier"] h1, [data-theme="herbier"] h2, [data-theme="herbier"] h3 { text-transform:none; font-weight:700; letter-spacing:-.01em; font-variation-settings:'SOFT' 60, 'WONK' 1; } [data-theme="herbier"] .nav a, [data-theme="herbier"] .bouton, [data-theme="herbier"] .marque { text-transform:none; letter-spacing:0; } [data-theme="herbier"] .carte { border-width:2px; } [data-theme="herbier"] .bouton { border-width:2px; box-shadow:3px 3px 0 var(--trait); background: var(--accent); color:#fff; } [data-theme="herbier"] .bouton--second { background: var(--papier-vif); color: var(--encre-900); } [data-theme="herbier"] .jeton-xp { border-width:2px; } [data-theme="herbier"] body::before { opacity:.18; } /* ===================================================================== THÈME Étoile — shōjo et scène K-pop : rose, lavande, éclats ===================================================================== */ [data-theme="etoile"] { color-scheme: light; --encre-900: #3B2547; --encre-700: #6E5580; --encre: #3B2547; --encre-300: #C9B6D6; --papier: #FDF3F8; --papier-vif: #FFFFFF; --papier-creux: #F6E4EE; --trait: #3B2547; --trait-fin: #F0D9E6; --regle: #E6D3F2; --marge: #FF9EC4; --c0: #FFFFFF; --c1: #FFD84D; --c2: #FF9C5B; --c3: #6FD9A0; --c4: #6FB6FF; --c5: #C4885A; --c6: #4A3A5C; --accent: #FF5FA2; --accent-2: #9D7BFF; --accent-mat: #F04A8F; --encre-50: #FFE7F1; --juste: #2FB37A; --juste-fond: #E4F8EE; --faux: #F0457A; --faux-fond: #FFE4EE; --rouge: #F0457A; --rouge-50: #FFE4EE; --attente: #D08A12; --attente-fond: #FFF3DA; --or: #FFD84D; --surligne: #FFEFC2; --surligne-bord: #F2C94C; --d-technique: #FF5FA2; --d-analyse: #6FB6FF; --d-production: #FF9C5B; --d-dictee: #9D7BFF; --clair: #3B2547; --clair-2: #8A7396; --nuit: #4A2C63; --nuit-2: #5B3A76; --nuit-3: #6E4A8B; --nuit-4: #8A65A6; --ombre: 0 2px 4px rgba(59,37,71,.06), 0 14px 32px -18px rgba(255,95,162,.45); --arrondi: 18px; --arrondi-s: 12px; --cadre: 2px solid var(--trait-fin); --trame: none; --trame-fine: none; --trame-encre: rgba(59,37,71,0); --trame-encre-fine: rgba(59,37,71,0); --vitesse-encre: rgba(255,95,162,.55); --vitesse-encre-inverse: rgba(255,255,255,.75); --ombre-entete: rgba(59,37,71,.08); --sur-nuit: #FFFFFF; --sur-nuit-2: rgba(255,255,255,.80); --sur-nuit-accent: #FFD84D; --police-titre: 'Bricolage Grotesque', system-ui, sans-serif; --pente: 0deg; } /* Surcharges Étoile : le shōjo et la scène K-pop — dégradés rose-lavande, éclats en étoile, arrondis généreux, brillance. Sucré mais net. */ [data-theme="etoile"] body { background-image: radial-gradient(60rem 30rem at 0% -10%, rgba(255,95,162,.16), transparent 60%), radial-gradient(50rem 30rem at 100% 0%, rgba(157,123,255,.18), transparent 62%); background-attachment:fixed; } /* étoiles à quatre branches, semées très discrètement sur le fond */ [data-theme="etoile"] body::before { display:block; opacity:.55; background: radial-gradient(circle at 12% 18%, rgba(255,216,77,.9) 0 1.5px, transparent 2px), radial-gradient(circle at 78% 12%, rgba(255,95,162,.8) 0 1.5px, transparent 2px), radial-gradient(circle at 34% 64%, rgba(157,123,255,.8) 0 1.5px, transparent 2px), radial-gradient(circle at 88% 72%, rgba(255,216,77,.9) 0 1.5px, transparent 2px), radial-gradient(circle at 56% 32%, rgba(255,95,162,.6) 0 1px, transparent 1.5px), radial-gradient(circle at 20% 88%, rgba(157,123,255,.7) 0 1px, transparent 1.5px); background-size: 640px 640px; } [data-theme="etoile"] h1, [data-theme="etoile"] h2, [data-theme="etoile"] h3 { text-transform:none; font-weight:800; letter-spacing:-.02em; } [data-theme="etoile"] .nav a, [data-theme="etoile"] .bouton, [data-theme="etoile"] .marque { text-transform:none; letter-spacing:0; font-weight:800; } [data-theme="etoile"] .marque::before { content:'✦'; color:var(--accent); font-family:inherit; } [data-theme="etoile"] .entete { background:linear-gradient(90deg, #FF5FA2, #9D7BFF); color:#fff; border-bottom:0; box-shadow:0 6px 24px -12px rgba(255,95,162,.6); } [data-theme="etoile"] .entete .marque, [data-theme="etoile"] .nav a { color:#fff; } [data-theme="etoile"] .nav a:hover { background:rgba(255,255,255,.18); border-color:transparent; } [data-theme="etoile"] .nav a[aria-current="page"] { background:#fff; color:var(--accent-mat); border-color:#fff; border-radius:99px; } [data-theme="etoile"] .entete .bouton--discret { color:#fff; } [data-theme="etoile"] .jeton-xp { background:#fff; color:var(--accent-mat); border:0; box-shadow:0 0 0 2px #FFD84D inset, 0 4px 14px -6px var(--accent); border-radius:99px; transform:none; font-family:var(--police-titre); font-weight:800; } [data-theme="etoile"] .jeton-xp::before { content:'✦ '; color:#FFD84D; } [data-theme="etoile"] .carte { border:2px solid var(--trait-fin); border-radius:var(--arrondi); } [data-theme="etoile"] .carte::after { display:none; } [data-theme="etoile"] .carte[data-ceinture]::before { height:8px; inset:0 0 auto 0; border-bottom:0; background:linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 40%, #fff)); } [data-theme="etoile"] .bouton { border:0; border-radius:99px; color:#fff; background:linear-gradient(135deg, #FF5FA2, #9D7BFF); box-shadow:0 8px 20px -10px var(--accent), 0 0 0 2px rgba(255,255,255,.6) inset; text-transform:none; } [data-theme="etoile"] .bouton:hover { transform:translateY(-2px); box-shadow:0 12px 26px -10px var(--accent), 0 0 0 2px rgba(255,255,255,.6) inset; color:#fff; } [data-theme="etoile"] .bouton--second { background:#fff; color:var(--accent-mat); box-shadow:0 0 0 2px var(--trait-fin) inset; } [data-theme="etoile"] .bouton--discret { background:none; color:var(--encre-700); box-shadow:none; } [data-theme="etoile"] .message, [data-theme="etoile"] .consigne, [data-theme="etoile"] .bandeau-resultat, [data-theme="etoile"] .choix label, [data-theme="etoile"] .liste-ordre li, [data-theme="etoile"] .texte-travail, [data-theme="etoile"] .papier-regle, [data-theme="etoile"] .diff-dictee, [data-theme="etoile"] .conjug__bloc, [data-theme="etoile"] input, [data-theme="etoile"] select, [data-theme="etoile"] textarea { border-width:2px; border-color:var(--trait-fin); box-shadow:none; } [data-theme="etoile"] .choix label:has(input:checked) { background:var(--encre-50); border-color:var(--accent); } [data-theme="etoile"] .consigne { border-left:4px solid var(--accent); border-radius:var(--arrondi-s); } [data-theme="etoile"] .consigne::before, [data-theme="etoile"] .consigne::after { display:none; } [data-theme="etoile"] .jauge { border:0; height:8px; background:var(--papier-creux); } [data-theme="etoile"] .jauge > i { height:8px; background:linear-gradient(90deg, #FF5FA2, #9D7BFF); } [data-theme="etoile"] .surtitre { background:transparent; color:var(--accent-mat); padding:0; letter-spacing:.14em; } [data-theme="etoile"] .tableau th { background:transparent; color:var(--encre-700); border-bottom:2px solid var(--trait-fin); } [data-theme="etoile"] .pastille { border-radius:99px; border-color:var(--trait-fin); } [data-theme="etoile"] .pastille--juste { background:var(--juste-fond); color:#1F8A5C; } /* le moment de la réussite : un éclat au lieu des lignes de vitesse */ [data-theme="etoile"] .bandeau-resultat.reussi { background:linear-gradient(135deg, #FFE7F1, #EEE6FF); } [data-theme="etoile"] .bandeau-resultat.reussi::before { display:block; opacity:.5; background: radial-gradient(circle at 15% 25%, #FFD84D 0 3px, transparent 4px), radial-gradient(circle at 85% 20%, #FF5FA2 0 2.5px, transparent 3.5px), radial-gradient(circle at 70% 80%, #9D7BFF 0 3px, transparent 4px), radial-gradient(circle at 30% 85%, #FFD84D 0 2px, transparent 3px), radial-gradient(circle at 50% 10%, #FF5FA2 0 2px, transparent 3px); -webkit-mask-image:none; mask-image:none; } [data-theme="etoile"] .accueil-connexion__manifeste { background:linear-gradient(160deg, #FF5FA2, #9D7BFF 70%, #6FB6FF); } [data-theme="etoile"] .accueil-connexion__manifeste::before { display:none; } [data-theme="etoile"] .accueil-connexion__manifeste .surtitre { background:rgba(255,255,255,.22); color:#fff; padding:.1rem .45rem; } @media (prefers-reduced-motion: reduce) { *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important} } /* ===================================================================== Base — la planche ===================================================================== */ *,*::before,*::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; overflow-wrap: break-word; font-family: 'Atkinson Hyperlegible', system-ui, sans-serif; font-size: 16px; line-height: 1.6; color: var(--encre-900); background: var(--papier); -webkit-font-smoothing: antialiased; } /* la trame de fond : le papier n'est jamais tout à fait vide */ body::before { content:''; position:fixed; inset:0; z-index:0; pointer-events:none; background: var(--trame-fine); opacity:.35; } .enveloppe, .accueil-connexion { position:relative; z-index:1; } h1,h2,h3,h4 { font-family:var(--police-titre); font-weight:400; line-height:1.02; letter-spacing:.005em; text-transform:uppercase; margin:0 0 var(--r3); text-wrap:balance; } h1 { font-size: clamp(2rem,1.3rem+2.4vw,3.1rem); } h2 { font-size: 1.45rem; } h3 { font-size: 1.18rem; } h4 { font-size: 1rem; } p { margin:0 0 var(--r4); } a { color: var(--accent-mat); text-decoration-thickness:2px; text-underline-offset:3px; font-weight:700; } a:hover { color: var(--encre-900); } :focus-visible { outline:3px solid var(--accent); outline-offset:2px; } code,kbd,samp { font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:.9em; } hr.sep { border:0; border-top:2px solid var(--trait); margin:var(--r5) 0; } img { max-width:100%; } /* Lignes de vitesse : rayonnement depuis un point, à réserver aux moments d'action. Utilisées via .lignes-vitesse sur un pseudo-élément. */ @supports (background: repeating-conic-gradient(#000 0deg, #fff 1deg)) { .lignes-vitesse::after { content:''; position:absolute; inset:-30%; pointer-events:none; z-index:0; background: repeating-conic-gradient(from 0deg at 50% 50%, var(--vitesse-encre) 0deg .55deg, transparent .55deg 3.2deg); -webkit-mask-image: radial-gradient(closest-side, transparent 34%, #000 100%); mask-image: radial-gradient(closest-side, transparent 34%, #000 100%); opacity:.28; } } .lignes-vitesse > * { position:relative; z-index:1; } /* ===================================================================== Charpente ===================================================================== */ .enveloppe { min-height:100vh; display:flex; flex-direction:column; } /* Le bandeau-titre : une case noire en haut de planche */ .entete { position:sticky; top:0; z-index:20; background: var(--nuit); color: var(--sur-nuit); border-bottom: 4px solid var(--nuit); box-shadow: 0 4px 0 var(--ombre-entete); } .entete__interieur { max-width:var(--largeur); margin:0 auto; padding:var(--r3) var(--r5); display:flex; align-items:center; gap:var(--r5); flex-wrap:wrap; } .marque { font-family:var(--police-titre); font-size:1.6rem; letter-spacing:.02em; color:var(--sur-nuit); text-decoration:none; text-transform:uppercase; transform: skewX(var(--pente)); display:inline-block; } .marque::before { content:'¶'; color:var(--sur-nuit-accent); margin-right:.2em; font-family:'Atkinson Hyperlegible',sans-serif; } .nav { display:flex; gap:var(--r2); flex-wrap:wrap; align-items:center; } .nav a { font-family:var(--police-titre); font-size:.95rem; letter-spacing:.03em; text-transform:uppercase; text-decoration:none; color:var(--sur-nuit); padding:.28rem .7rem; transform:skewX(var(--pente)); display:inline-block; border:2px solid transparent; } .nav a:hover { border-color:var(--sur-nuit); } .nav a[aria-current="page"] { background:var(--sur-nuit-accent); color:var(--nuit); border-color:var(--sur-nuit-accent); } .contenu { flex:1; width:100%; max-width:var(--largeur); margin:0 auto; padding: var(--r6) var(--r5) var(--r7); } .pousse { margin-left:auto; } /* ===================================================================== Grilles — les gouttières de la planche ===================================================================== */ .grille { display:grid; gap:var(--r5); } .grille--2 { grid-template-columns:repeat(auto-fit,minmax(17rem,1fr)); } .grille--3 { grid-template-columns:repeat(auto-fit,minmax(11rem,1fr)); } .grille--principal { grid-template-columns:minmax(0,1fr); gap:var(--r5); } @media (min-width:62rem){ .grille--principal{grid-template-columns:minmax(0,1fr) 20rem;align-items:start} } .pile { display:flex; flex-direction:column; gap:var(--r5); min-width:0; } .rangee { display:flex; align-items:center; gap:var(--r3); flex-wrap:wrap; min-width:0; } .rangee > * { min-width:0; } .rangee--entre { justify-content:space-between; } .rangee--fin { justify-content:flex-end; } /* ===================================================================== Cartes — les CASES ===================================================================== */ .carte { position:relative; background:var(--papier-vif); border:var(--cadre); border-radius:var(--arrondi); padding:var(--r5); box-shadow:var(--ombre); min-width:0; } /* coin tramé : le gris d'une case de manga */ .carte::after { content:''; position:absolute; right:0; bottom:0; width:88px; height:88px; background:var(--trame); opacity:.16; pointer-events:none; -webkit-mask-image:linear-gradient(315deg,#000,transparent 70%); mask-image:linear-gradient(315deg,#000,transparent 70%); } .carte > :last-child { margin-bottom:0; } .carte--creuse { background:var(--papier-creux); box-shadow:none; } .carte--plate { box-shadow:none; } /* Bandeau de ceinture : une bande de couleur cernée de noir, en haut de case */ .carte[data-ceinture] { padding-top: calc(var(--r5) + 10px); } .carte[data-ceinture]::before { content:''; position:absolute; inset:-3px -3px auto -3px; height:14px; background:var(--c); border-bottom:3px solid var(--trait); } .carte[data-ceinture="1"]{--c:var(--c1)} .carte[data-ceinture="2"]{--c:var(--c2)} .carte[data-ceinture="3"]{--c:var(--c3)} .carte[data-ceinture="4"]{--c:var(--c4)} .carte[data-ceinture="5"]{--c:var(--c5)} .carte[data-ceinture="6"]{--c:var(--c6)} .vide { text-align:center; padding:var(--r7) var(--r5); border:3px dashed var(--trait); border-radius:var(--arrondi); background:var(--papier-vif); } /* ===================================================================== Typographie utilitaire ===================================================================== */ .surtitre { display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:.68rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; background:var(--nuit); color:var(--sur-nuit); padding:.1rem .45rem; margin-bottom:var(--r2); } .entete .surtitre, .accueil-connexion__manifeste .surtitre { background:var(--sur-nuit-accent); color:var(--nuit); } .discret { color:var(--clair-2); } .compteur,.note { font-family:var(--police-titre); font-weight:400; line-height:.92; letter-spacing:.01em; font-size:2.6rem; } .note { font-size:3rem; } .compteur + .surtitre { margin-top:var(--r2); } /* ===================================================================== Jauge — une barre d'énergie cernée de noir ===================================================================== */ .jauge { display:block; width:100%; max-width:100%; height:10px; overflow:hidden; background:var(--papier-creux); border:2px solid var(--trait); border-radius:99px; } .jauge > i { /* hauteur fixe et non 100 % : sinon un parent sans hauteur la fait enfler */ display:block; height:6px; max-width:100%; border-radius:99px; background:var(--encre-900); transition:width .5s cubic-bezier(.2,.8,.3,1); } .jauge--juste > i { background:var(--juste); } [data-ceinture="1"] .jauge > i{background:var(--c1)} [data-ceinture="2"] .jauge > i{background:var(--c2)} [data-ceinture="3"] .jauge > i{background:var(--c3)} [data-ceinture="4"] .jauge > i{background:var(--c4)} [data-ceinture="5"] .jauge > i{background:var(--c5)} [data-ceinture="6"] .jauge > i{background:var(--c6)} /* ===================================================================== Ceintures — le blason, cerné comme un objet dessiné ===================================================================== */ .ceinture { display:inline-flex; align-items:center; gap:.45rem; font-weight:700; font-size:.9rem; } .ceinture__nom { text-transform:uppercase; font-family:var(--police-titre); letter-spacing:.03em; } .blason { width:1.6rem; height:1.8rem; flex:none; display:block; } .ceinture--grand .blason { width:2.8rem; height:3.15rem; } .rang-ceintures { display:inline-flex; gap:3px; align-items:center; } .rang-ceintures > i { display:block; width:.85rem; height:1rem; background:var(--c); clip-path:polygon(50% 0,100% 16%,100% 62%,50% 100%,0 62%,0 16%); opacity:.16; } .rang-ceintures > i.acquise { opacity:1; } .ceinture__bande { display:inline-block; width:2.2rem; height:.6rem; flex:none; background:var(--c-fond,#EFEFEC); border:2px solid var(--trait); } /* ===================================================================== Pastilles, XP, domaines ===================================================================== */ .pastille { display:inline-flex; align-items:center; gap:.3rem; font-family:'IBM Plex Mono',monospace; font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:.15rem .5rem; border:2px solid var(--trait); background:var(--papier-vif); } .pastille--juste { background:var(--c3); } .pastille--faux { background:var(--faux-fond); } .pastille--attente { background:var(--c1); } /* Le compteur d'XP : une bulle d'onomatopée, penchée */ .jeton-xp { display:inline-block; font-family:var(--police-titre); font-size:.95rem; letter-spacing:.03em; padding:.2rem .7rem; white-space:nowrap; background:var(--c1); color:var(--encre-900); border:3px solid var(--encre-900); box-shadow:3px 3px 0 var(--sur-nuit); transform:skewX(var(--pente)); } .domaine__pied { border-top:2px solid var(--trait); margin-top:var(--r3); padding-top:var(--r3); font-size:.85rem; } .embleme { width:2.8rem; height:2.8rem; flex:none; color:var(--d,var(--encre-900)); } .embleme--petit { width:1.5rem; height:1.5rem; } .domaine[data-code="technique"]{--d:var(--d-technique)} .domaine[data-code="analyse"]{--d:var(--d-analyse)} .domaine[data-code="production"]{--d:var(--d-production)} .domaine[data-code="dictee"]{--d:var(--d-dictee)} /* ===================================================================== Boutons — cernés, avec l'ombre dure du lettrage ===================================================================== */ .bouton { display:inline-flex; align-items:center; justify-content:center; gap:var(--r2); font-family:var(--police-titre); font-size:1rem; letter-spacing:.04em; text-transform:uppercase; padding:.55rem 1.2rem; border:3px solid var(--trait); border-radius:var(--arrondi-s); background:var(--c1); color:var(--encre-900); text-decoration:none; cursor:pointer; box-shadow:4px 4px 0 var(--trait); transition:transform .1s ease, box-shadow .1s ease; } .bouton:hover { transform:translate(2px,2px); box-shadow:2px 2px 0 var(--trait); color:var(--encre-900); } .bouton:active { transform:translate(4px,4px); box-shadow:0 0 0 var(--trait); } .bouton[disabled] { opacity:.4; cursor:not-allowed; transform:none; box-shadow:4px 4px 0 var(--trait); } .bouton--second { background:var(--papier-vif); } .bouton--discret { background:none; border-color:transparent; box-shadow:none; color:var(--encre-700); font-family:'Atkinson Hyperlegible',sans-serif; font-weight:700; text-transform:none; font-size:.9rem; padding:.35rem .5rem; } .bouton--discret:hover { transform:none; box-shadow:none; background:var(--papier-creux); color:var(--encre-900); } .entete .bouton--discret, .nav ~ .bouton--discret { color:var(--sur-nuit); } .bouton--large { width:100%; padding:.7rem 1.2rem; } .barre-action { display:flex; gap:var(--r3); align-items:center; flex-wrap:wrap; padding-top:var(--r4); margin-top:var(--r4); border-top:3px solid var(--trait); } /* ===================================================================== Formulaires ===================================================================== */ .champ { display:block; margin-bottom:var(--r4); } .champ > span { display:block; font-family:'IBM Plex Mono',monospace; font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; margin-bottom:var(--r1); } input[type="text"],input[type="password"],input[type="email"],input[type="number"], input[type="date"],input[type="datetime-local"],select,textarea { width:100%; font-family:inherit; font-size:.95rem; color:var(--encre-900); padding:.55rem .75rem; border:3px solid var(--trait); border-radius:var(--arrondi-s); background:var(--papier-vif); } input:focus,select:focus,textarea:focus { outline:none; box-shadow:3px 3px 0 var(--accent); } textarea { resize:vertical; line-height:1.65; } input[type="checkbox"],input[type="radio"] { width:auto; accent-color:var(--accent-mat); } /* ===================================================================== Messages ===================================================================== */ .message { padding:var(--r3) var(--r4); border:3px solid var(--trait); border-radius:var(--arrondi-s); background:var(--papier-vif); margin-bottom:var(--r4); font-size:.93rem; box-shadow:4px 4px 0 var(--trait); } .message--succes { background:var(--juste-fond); } .message--erreur { background:var(--faux-fond); } .message--info { background:var(--attente-fond); } .message > :last-child { margin-bottom:0; } /* ===================================================================== Tableaux ===================================================================== */ .tableau { width:100%; border-collapse:collapse; font-size:.93rem; table-layout:auto; } .tableau th { text-align:left; font-family:'IBM Plex Mono',monospace; font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; background:var(--nuit); color:var(--sur-nuit); padding:var(--r2) var(--r3); } .tableau td { padding:var(--r3); border-bottom:2px solid var(--trait-fin); vertical-align:top; overflow-wrap:anywhere; } .tableau tr:last-child td { border-bottom:0; } .tableau--compact td,.tableau--compact th { padding:var(--r1) var(--r2); font-size:.88rem; } .tableau td > .jauge { margin-block:.4rem; } .case-maitrise { display:inline-block; width:.9rem; height:.9rem; background:var(--papier-vif); border:2px solid var(--trait); } .case-maitrise[data-etat="acquise"] { background:var(--c3); } .case-maitrise[data-etat="en-cours"] { background:var(--c1); } .case-maitrise[data-etat="fragile"] { background:var(--faux); } .case-maitrise[data-etat="a-consolider"] { background:repeating-linear-gradient(-45deg,var(--c3) 0 3px,var(--papier-vif) 3px 6px); } /* ===================================================================== Atelier ===================================================================== */ /* La consigne : une bulle de dialogue, avec sa queue */ .consigne { position:relative; background:var(--papier-vif); border:3px solid var(--trait); border-radius:14px; padding:var(--r4) var(--r5); margin-bottom:var(--r6); box-shadow:var(--ombre); } .consigne::before, .consigne::after { content:''; position:absolute; bottom:-16px; left:2.2rem; border:16px solid transparent; border-top-color:var(--trait); border-bottom:0; } .consigne::after { bottom:-11px; left:2.45rem; border-width:13px; border-top-color:var(--papier-vif); } .consigne p:last-child { margin-bottom:0; } .atelier__zone { min-width:0; } .texte-travail { font-size:1.05rem; line-height:1.85; background:var(--papier-vif); border:3px solid var(--trait); border-radius:var(--arrondi); padding:var(--r5); } .papier-regle { background-color:var(--papier-vif); background-image:repeating-linear-gradient(to bottom,transparent 0 27px,var(--regle) 27px 28px); border:3px solid var(--trait); border-radius:var(--arrondi); padding:var(--r5) var(--r5) var(--r5) 2.7rem; position:relative; line-height:28px; } .papier-regle::before { content:''; position:absolute; top:0; bottom:0; left:1.8rem; width:2px; background:var(--marge); } textarea.papier-regle { font-size:1.05rem; } .question { margin-bottom:var(--r5); } .question:last-child { margin-bottom:0; } .question__enonce { font-family:var(--police-titre); font-size:1.1rem; text-transform:none; margin-bottom:var(--r3); } .choix { display:flex; flex-direction:column; gap:var(--r2); } .choix label { display:flex; align-items:flex-start; gap:.7rem; cursor:pointer; padding:.65rem .85rem; border:3px solid var(--trait); border-radius:var(--arrondi-s); background:var(--papier-vif); font-weight:700; transition:transform .1s, box-shadow .1s; } .choix label:hover { transform:translate(-2px,-2px); box-shadow:3px 3px 0 var(--trait); } .choix input { margin-top:.3rem; flex:none; } .choix label:has(input:checked) { background:var(--c1); box-shadow:3px 3px 0 var(--trait); } .trou { display:inline-block; width:8.5rem; padding:.1rem .4rem; border:none; border-bottom:3px solid var(--trait); background:transparent; font-family:inherit; font-size:inherit; text-align:center; border-radius:0; font-weight:700; } .trou:focus { box-shadow:none; background:var(--c1); } .trou.est-juste { background:var(--juste-fond); border-bottom-color:var(--juste); } .trou.est-faux { background:var(--faux-fond); border-bottom-color:var(--faux); text-decoration:line-through; } .indice-trou { font-size:.78rem; font-style:italic; color:var(--encre-700); } .conjug { display:grid; gap:var(--r4); grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); } .conjug__bloc { background:var(--papier-vif); border:3px solid var(--trait); border-radius:var(--arrondi); padding:var(--r4); } .conjug__titre { font-family:var(--police-titre); text-transform:uppercase; margin-bottom:var(--r2); } .conjug__ligne { display:grid; grid-template-columns:4.6rem 1fr; align-items:center; gap:.5rem; margin-top:.4rem; } .conjug__ligne > span:first-child { font-style:italic; opacity:.62; text-align:right; } .appariement { display:grid; gap:var(--r2); } .appariement__ligne { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:var(--r3); } .appariement__mot { font-weight:700; padding:.55rem .8rem; background:var(--papier-creux); border:2px solid var(--trait); } .liste-ordre { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:var(--r2); } .liste-ordre li { display:flex; align-items:center; gap:var(--r3); background:var(--papier-vif); border:3px solid var(--trait); border-radius:var(--arrondi-s); padding:.7rem .9rem; cursor:grab; box-shadow:3px 3px 0 var(--trait); } .liste-ordre li:active { cursor:grabbing; transform:translate(2px,2px); box-shadow:1px 1px 0 var(--trait); } .liste-ordre li.saisi { opacity:.35; } .liste-ordre li .poignee { font-size:1.15rem; flex:none; letter-spacing:-2px; } .liste-ordre li .rang { font-family:var(--police-titre); font-size:1.1rem; width:1.4rem; text-align:center; flex:none; } .classement { display:grid; gap:var(--r4); grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); } .colonne-cat { background:var(--papier-vif); border:3px dashed var(--trait); border-radius:var(--arrondi); padding:var(--r3); min-height:8rem; } .colonne-cat.survol { background:var(--c1); border-style:solid; } .colonne-cat h4 { margin:0 0 var(--r2); font-size:.95rem; } .etiquette { display:inline-block; background:var(--papier-vif); border:3px solid var(--trait); border-radius:99px; padding:.28rem .8rem; margin:.18rem; cursor:grab; font-weight:700; font-size:.92rem; } .etiquette.est-juste { background:var(--c3); } .etiquette.est-faux { background:var(--faux-fond); } .reserve { display:flex; flex-wrap:wrap; gap:.1rem; padding:var(--r3); background:var(--papier-creux); border:3px dashed var(--trait); border-radius:var(--arrondi); min-height:4rem; } .zone-surlignage { font-size:1.08rem; line-height:2.2; } .mot-cliquable { cursor:pointer; padding:.05rem .15rem; border-bottom:3px solid transparent; } .mot-cliquable:hover { background:var(--papier-creux); } .mot-cliquable.choisi { background:var(--c1); border-bottom-color:var(--trait); } .mot-cliquable.est-juste { background:var(--c3); border-bottom-color:var(--juste); } .mot-cliquable.est-faux { background:var(--faux-fond); border-bottom-color:var(--faux); } .mot-cliquable.manque { border-bottom:3px dashed var(--faux); } .lecteur-dictee { display:flex; align-items:center; gap:var(--r3); flex-wrap:wrap; background:var(--nuit); color:var(--sur-nuit); border:3px solid var(--trait); border-radius:var(--arrondi); padding:var(--r4); } .segments-dictee { display:flex; gap:var(--r2); flex-wrap:wrap; margin-top:var(--r3); } .copie-dictee { font-size:1.05rem; line-height:28px; min-height:12rem; } .compteur-mots { font-family:'IBM Plex Mono',monospace; font-size:.8rem; text-align:right; margin-top:var(--r1); } .compteur-mots.insuffisant { color:var(--attente); font-weight:700; } .compteur-mots.atteint { color:var(--juste); font-weight:700; } /* ===================================================================== Correction — la case d'action ===================================================================== */ .bandeau-resultat { position:relative; overflow:hidden; display:flex; align-items:center; gap:var(--r5); flex-wrap:wrap; padding:var(--r5); background:var(--papier-vif); border:3px solid var(--trait); border-radius:var(--arrondi); box-shadow:var(--ombre); } .bandeau-resultat > * { position:relative; z-index:1; } /* les lignes de vitesse : réservées au moment de la réussite */ .bandeau-resultat.reussi::before { content:''; position:absolute; inset:-40%; z-index:0; pointer-events:none; background:repeating-conic-gradient(from 0deg at 50% 50%, var(--vitesse-encre) 0deg .6deg, transparent .6deg 3.4deg); -webkit-mask-image:radial-gradient(closest-side,transparent 30%,#000 100%); mask-image:radial-gradient(closest-side,transparent 30%,#000 100%); opacity:.22; } .bandeau-resultat.reussi { background:var(--c3); } .bandeau-resultat.rate { background:var(--faux-fond); } .bandeau-resultat.attente { background:var(--c1); } .ligne-detail { display:flex; gap:var(--r3); align-items:baseline; padding:var(--r3) 0; border-bottom:2px solid var(--trait-fin); overflow-wrap:anywhere; } .ligne-detail:last-child { border-bottom:0; } .ligne-detail__marque { flex:none; width:1.4rem; text-align:center; font-weight:700; font-size:1.15rem; } .ligne-detail.juste .ligne-detail__marque { color:var(--juste); } .ligne-detail.faux .ligne-detail__marque { color:var(--faux); } .explication { font-size:.88rem; border-left:3px solid var(--trait); padding-left:var(--r3); margin-top:var(--r1); color:var(--encre-700); } .attendu { color:var(--juste); font-weight:700; } .diff-dictee { font-size:1.06rem; line-height:2.1; background:var(--papier-vif); border:3px solid var(--trait); border-radius:var(--arrondi); padding:var(--r5); } .diff-dictee .ok { color:var(--encre-900); } .diff-dictee .faux { background:var(--faux-fond); border-bottom:3px solid var(--faux); padding:0 2px; font-weight:700; } .diff-dictee .attendu { font-size:.78em; vertical-align:super; margin-left:2px; } .diff-dictee .oubli { background:var(--c1); border-bottom:3px dotted var(--attente); padding:0 2px; } .diff-dictee .ajout { opacity:.45; text-decoration:line-through; } .signalement { display:flex; gap:var(--r3); align-items:baseline; padding:var(--r2) 0; border-bottom:2px dotted var(--trait-fin); font-size:.9rem; overflow-wrap:anywhere; } .signalement:last-child { border-bottom:0; } .signalement__type { flex:none; min-width:7rem; font-family:'IBM Plex Mono',monospace; font-size:.66rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; } .signalement--important .signalement__type { color:var(--faux); } .signalement--attention .signalement__type { color:var(--attente); } /* ===================================================================== Connexion — la couverture du volume ===================================================================== */ .accueil-connexion { min-height:100vh; display:grid; grid-template-columns:1fr; } @media (min-width:56rem){ .accueil-connexion{grid-template-columns:1.05fr 1fr} } .accueil-connexion__manifeste { position:relative; overflow:hidden; background:var(--nuit); color:var(--sur-nuit); padding:var(--r7) var(--r6); display:flex; flex-direction:column; justify-content:center; gap:var(--r4); } /* lignes de vitesse de couverture */ .accueil-connexion__manifeste::before { content:''; position:absolute; inset:-30%; pointer-events:none; background:repeating-conic-gradient(from 0deg at 30% 45%, var(--vitesse-encre-inverse) 0deg .7deg, transparent .7deg 3.6deg); -webkit-mask-image:radial-gradient(closest-side,transparent 22%,#000 95%); mask-image:radial-gradient(closest-side,transparent 22%,#000 95%); opacity:.13; } .accueil-connexion__manifeste > * { position:relative; z-index:1; } .accueil-connexion__manifeste h1 { color:var(--sur-nuit); font-size:clamp(2.4rem,1.4rem+3.4vw,4rem); transform:skewX(var(--pente)); } .accueil-connexion__manifeste p { color:var(--sur-nuit-2); max-width:36ch; } .accueil-connexion__manifeste .marque { color:var(--sur-nuit); } .accueil-connexion__formulaire { padding:var(--r7) var(--r6); background:var(--papier); display:flex; flex-direction:column; justify-content:center; } .accueil-connexion__formulaire > * { width:100%; max-width:24rem; margin-inline:auto; } /* ===================================================================== Débordements ===================================================================== */ .carte, .ligne-detail, .signalement { overflow-wrap:anywhere; } .exo-lien { display:flex; align-items:baseline; gap:var(--r3); width:100%; } .exo-lien__titre { flex:1 1 auto; min-width:0; } .exo-lien__meta { flex:0 0 auto; white-space:nowrap; font-size:.82rem; } .compte { display:flex; align-items:center; gap:var(--r3); } .titre-section { display:flex; align-items:center; gap:var(--r3); margin-bottom:var(--r4); } .titre-section h2 { margin:0; } /* ===================================================================== Impression ===================================================================== */ @media print { .entete,.nav,.bouton,.barre-action { display:none !important; } body::before { display:none; } body { background:#fff; } .carte { box-shadow:none; break-inside:avoid; } } /* ===================================================================== Sélecteur de thème Chaque vignette porte son propre data-theme : elle hérite donc des variables de CE thème et se dessine dans sa vraie palette, quel que soit le thème actif sur la page. L'aperçu ne ment pas. ===================================================================== */ .choix-theme { display:grid; gap:var(--r4); grid-template-columns:repeat(auto-fit,minmax(11rem,1fr)); } .theme-option { position:relative; display:flex; flex-direction:column; gap:.35rem; cursor:pointer; padding:.6rem; border-radius:10px; background:var(--papier); border:3px solid var(--trait-fin); color:var(--encre-900); transition:transform .12s, border-color .12s, box-shadow .12s; } .theme-option:hover { transform:translateY(-2px); } .theme-option input { position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; } .theme-option:has(input:checked) { border-color:var(--accent); box-shadow:0 0 0 3px var(--encre-50); } .theme-option:has(input:focus-visible) { outline:3px solid var(--accent); outline-offset:2px; } .theme-option__apercu { display:block; height:5.6rem; border-radius:6px; overflow:hidden; position:relative; background:var(--papier); border:1px solid var(--trait-fin); } .theme-option__barre { display:block; height:1rem; background:var(--nuit); } .theme-option__carte { position:absolute; left:.55rem; right:.55rem; top:1.6rem; bottom:.55rem; background:var(--papier-vif); border:2px solid var(--trait); border-radius:4px; padding:.4rem; box-shadow:2px 2px 0 var(--trait); } .theme-option__carte b { display:block; height:.45rem; width:55%; background:var(--encre-900); border-radius:2px; margin-bottom:.3rem; } .theme-option__carte i { display:block; height:.28rem; width:85%; background:var(--encre-300); border-radius:2px; margin-bottom:.22rem; } .theme-option__jauge { display:block; height:.4rem; margin-top:.35rem; background:var(--papier-creux); border:1px solid var(--trait); border-radius:99px; overflow:hidden; } .theme-option__jauge > span { display:block; height:100%; width:62%; background:var(--c1); } .theme-option__nom { font-family:var(--police-titre); font-size:1rem; font-weight:800; } .theme-option__accroche { font-size:.78rem; color:var(--clair-2); line-height:1.35; } /* Formes de base (Studio) : fines, claires, sans ornement */ h1, h2, h3 { text-transform:none; font-weight:800; letter-spacing:-.02em; } .nav a, .bouton, .marque { text-transform:none; letter-spacing:0; font-weight:700; } .carte { border:1px solid var(--trait-fin); } .carte::after { display:none; } .bouton { border:1px solid transparent; box-shadow:none; background:var(--accent); color:#fff; border-radius:8px; } .bouton:hover { transform:translateY(-1px); box-shadow:0 8px 20px -10px var(--accent); } .bouton--second { background:var(--papier-vif); color:var(--encre-900); border-color:var(--trait-fin); } .entete { background:var(--papier-vif); color:var(--encre-900); border-bottom:1px solid var(--trait-fin); } .entete .marque, .nav a { color:var(--encre-900); } .nav a[aria-current="page"] { background:var(--encre-50); color:var(--accent-mat); border-color:transparent; } .entete .bouton--discret { color:var(--encre-700); } .jeton-xp { background:var(--encre-50); color:var(--accent-mat); border:1px solid transparent; box-shadow:none; } .message, .consigne, .bandeau-resultat, .choix label, .liste-ordre li, .texte-travail, .papier-regle, .diff-dictee, .conjug__bloc, input, select, textarea { border-width:1px; border-color:var(--trait-fin); box-shadow:none; } .consigne::before { border-top-color:var(--trait-fin); } .jauge { border-width:1px; border-color:var(--trait-fin); height:8px; } .surtitre { background:transparent; color:var(--encre-700); padding:0; letter-spacing:.14em; } .tableau th { background:transparent; color:var(--encre-700); border-bottom:2px solid var(--trait-fin); } body::before { display:none; } .consigne::before, .consigne::after { display:none; } .lignes-vitesse::after, .bandeau-resultat.reussi::before { display:none; } /* ===================================================================== Fiche de théorie (rendu Markdown) ===================================================================== */ .theorie { line-height: 1.7; } .theorie h2 { margin-top: 1.4em; font-size: 1.25rem; } .theorie h2:first-child { margin-top: 0; } .theorie h3 { margin-top: 1.1em; font-size: 1.05rem; } .theorie ul, .theorie ol { padding-left: 1.4em; margin: 0 0 var(--r4); } .theorie li { margin-bottom: .25em; } .theorie u { text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: var(--accent); } .theorie blockquote { margin: var(--r4) 0; padding: .4em 1em; border-left: 3px solid var(--trait-fin); color: var(--encre-700); } .theorie__filet { border: 0; border-top: 1px solid var(--trait-fin); margin: var(--r5) 0; } .theorie__tableau { border-collapse: collapse; margin: var(--r3) 0 var(--r4); font-size: .95rem; } .theorie__tableau th, .theorie__tableau td { border: 1px solid var(--trait-fin); padding: .3em .7em; text-align: left; } .theorie__tableau th { background: var(--papier-creux); } .theorie__encadre { border: 2px solid var(--trait-fin); border-radius: var(--arrondi-s); padding: var(--r3) var(--r4); margin: var(--r4) 0; background: var(--papier); } .theorie__encadre-titre { display: block; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: .3em; } .theorie__encadre--attention { border-color: var(--faux); background: var(--faux-fond); } .theorie__encadre--attention .theorie__encadre-titre { color: var(--faux); } .theorie__encadre--astuce { border-color: var(--attente); border-style: dashed; background: var(--attente-fond); } .theorie__encadre--astuce .theorie__encadre-titre { color: var(--attente); } .theorie__encadre--exemple { border-color: var(--juste); background: var(--juste-fond); } .theorie__encadre--exemple .theorie__encadre-titre { color: var(--juste); } .theorie__encadre > :last-child { margin-bottom: 0; } /* ===================================================================== Banque de mots : le statut se lit à la couleur ===================================================================== */ .etiquette-mot { display: inline-block; font-weight: 700; font-size: .92rem; padding: .2rem .65rem; border-radius: 99px; border: 2px solid var(--trait-fin); background: var(--papier-vif); white-space: nowrap; } .etiquette-mot[data-statut="a_travailler"] { border-color: var(--faux); background: var(--faux-fond); } .etiquette-mot[data-statut="en_cours"] { border-color: var(--attente); background: var(--attente-fond); } .etiquette-mot[data-statut="acquis"] { border-color: var(--juste); background: var(--juste-fond); opacity: .75; } /* ===================================================================== Épreuve de passage Verrouillée : éteinte mais lisible — l'élève doit voir ce qui l'attend. ===================================================================== */ .epreuve__sceau { display: inline-flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; flex: none; border-radius: 50%; border: 2px solid var(--trait); font-size: 1.1rem; } .epreuve--verrouillee { opacity: .55; filter: grayscale(1); } .epreuve--verrouillee::before { background: var(--trait-fin) !important; } .epreuve--ouverte { box-shadow: 0 0 0 2px var(--accent), var(--ombre); } .epreuve--ouverte .epreuve__sceau { border-color: var(--accent); color: var(--accent); } .epreuve--passee .epreuve__sceau { border-color: var(--juste); color: var(--juste); } /* ===================================================================== Célébrations La ceinture qui jaillit : une bascule d'échelle et de rotation, courte. ===================================================================== */ .fete-ceinture { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 1.5rem; background: rgba(10, 12, 20, .72); opacity: 0; transition: opacity .3s ease; } .fete-ceinture.est-visible { opacity: 1; } .fete-ceinture__boite { background: var(--papier-vif); color: var(--encre-900); border-radius: var(--arrondi); padding: var(--r6) var(--r5); text-align: center; max-width: 22rem; width: 100%; box-shadow: 0 20px 60px -20px rgba(0, 0, 0, .7), 0 0 0 4px var(--c); transform: scale(.4) rotate(-14deg); opacity: 0; } .fete-ceinture.est-visible .fete-ceinture__boite { animation: jaillir .62s cubic-bezier(.18, 1.5, .4, 1) forwards; } @keyframes jaillir { 0% { transform: scale(.4) rotate(-14deg); opacity: 0; } 60% { transform: scale(1.08) rotate(3deg); opacity: 1; } 100% { transform: scale(1) rotate(0); opacity: 1; } } .fete-ceinture__blason { width: 6rem; height: 6.75rem; display: block; margin: 0 auto var(--r4); filter: drop-shadow(0 0 18px var(--ct)); } .fete-ceinture.est-visible .fete-ceinture__blason { animation: blason-pulse 1.6s ease-in-out .5s 2; } @keyframes blason-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } } .fete-ceinture__titre { font-family: var(--police-titre); font-size: 1.6rem; margin: 0 0 .2rem; text-transform: capitalize; } .fete-ceinture__theme { color: var(--encre-700); margin: 0 0 var(--r5); font-size: .95rem; } @media (prefers-reduced-motion: reduce) { .fete-ceinture__boite, .fete-ceinture.est-visible .fete-ceinture__boite, .fete-ceinture.est-visible .fete-ceinture__blason { animation: none; transform: none; opacity: 1; } } /* XP gagnés sur une notion : discret, mais lisible d'un coup d'œil */ .xp-notion { color: var(--accent); font-variant-numeric: tabular-nums; } /* ===================================================================== Correction d'une production : signalements à trancher ===================================================================== */ .signalement { border: 1px solid var(--trait-fin); border-radius: var(--arrondi-s); padding: .6rem .8rem; margin-bottom: .6rem; background: var(--papier); } .signalement__extrait { font-size: .92rem; line-height: 1.6; color: var(--encre-700); } .signalement__extrait mark { background: var(--faux-fond); color: var(--faux); font-weight: 700; padding: 0 .2em; border-radius: 3px; } .signalement__barre { margin-top: .5rem; gap: .5rem; flex-wrap: wrap; } .signalement__correction { font-size: .9rem; font-family: 'IBM Plex Mono', ui-monospace, monospace; } .pastille--choix { cursor: pointer; user-select: none; } .pastille--choix:hover { border-color: var(--accent); } /* ===================================================================== Corriger un mot d'un clic dans le texte de l'élève ===================================================================== */ .texte-travail--annotable { position: relative; } .texte-travail--annotable .mot { cursor: pointer; border-radius: 3px; padding: 0 .1em; transition: background .12s ease; } .texte-travail--annotable .mot:hover, .texte-travail--annotable .mot:focus-visible { background: var(--attente-fond); outline: none; box-shadow: 0 0 0 1px var(--attente); } .texte-travail--annotable .mot--corrige { background: var(--faux-fond); color: var(--faux); font-weight: 700; text-decoration: underline wavy var(--faux) 1.5px; text-underline-offset: 3px; } .bulle-correction { display: block; position: relative; z-index: 20; margin: .4rem 0; padding: .75rem .9rem; background: var(--papier-vif); border: 2px solid var(--accent); border-radius: var(--arrondi-s); box-shadow: var(--ombre); max-width: 24rem; } .bulle-correction__mot { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-weight: 700; margin-bottom: .5rem; color: var(--faux); } .bulle-correction label { display: block; font-size: .8rem; font-weight: 700; color: var(--encre-700); margin-bottom: .4rem; } .bulle-correction input, .bulle-correction select { width: 100%; margin-top: .15rem; font-weight: 400; font-size: .9rem; } .correction-manuelle { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .45rem .7rem; margin-bottom: .4rem; border: 1px solid var(--faux); border-radius: var(--arrondi-s); background: var(--faux-fond); } .correction-manuelle .bouton { margin-left: auto; } /* Dix types de faute en pastilles : un clic, pas trois */ .bulle-correction__types { display: flex; flex-wrap: wrap; gap: .3rem; margin: .6rem 0 .2rem; } .pastille--type { font: inherit; font-size: .76rem; font-weight: 700; cursor: pointer; padding: .22rem .6rem; border-radius: 99px; border: 1px solid var(--trait-fin); background: var(--papier); color: var(--encre-700); } .pastille--type:hover { border-color: var(--accent); color: var(--accent); } .pastille--type.est-choisie { background: var(--accent); border-color: var(--accent); color: #fff; } /* Points d'insertion : signaler ce qui MANQUE entre deux mots */ .texte-travail--annotable { line-height: 2.1; } .texte-travail--annotable .mot { margin: 0; } .creux { display: inline-block; width: .5em; height: 1.1em; vertical-align: text-bottom; cursor: pointer; border-radius: 2px; position: relative; } .creux::before { content: ''; position: absolute; inset: 12% 42%; border-left: 2px solid transparent; border-radius: 1px; transition: border-color .12s ease; } .creux:hover::before, .creux:focus-visible::before { border-left-color: var(--accent); } .creux:focus-visible { outline: none; } .mot--selection { background: var(--accent); color: #fff; border-radius: 3px; } .bulle-correction__suppr { display: flex; align-items: center; gap: .4rem; font-weight: 400; font-size: .82rem; margin: .1rem 0 0; } .bulle-correction__suppr input { width: auto; margin: 0; } .bulle-correction__astuce { margin: .5rem 0 0; font-size: .78rem; } /* « Ce mot est correct » : enrichir le lexique de l'établissement */ .pastille--lexique { font: inherit; font-size: .78rem; font-weight: 700; cursor: pointer; padding: .2rem .6rem; border-radius: 99px; border: 1px dashed var(--trait); background: transparent; color: var(--encre-700); } .pastille--lexique:hover:not(:disabled) { border-color: var(--juste); color: var(--juste); } .pastille--lexique:disabled { cursor: default; opacity: .6; } /* Fiche de méthode d'un thème : au-dessus des ceintures, dépliable */ .fiche-methode { border-left: 4px solid var(--accent); } .fiche-methode > summary { cursor: pointer; list-style: none; font-size: 1rem; } .fiche-methode > summary::-webkit-details-marker { display: none; } .fiche-methode > summary::before { content: '▸'; display: inline-block; margin-right: .5rem; transition: transform .15s ease; color: var(--accent); } .fiche-methode[open] > summary::before { transform: rotate(90deg); } /* Filtres des listes Exercices et Théories */ .filtre { width: 100%; margin-top: .2rem; } /* ===================================================================== Éditeur guidé : créer un exercice sans écrire de JSON ===================================================================== */ .guide { display: flex; flex-direction: column; gap: .75rem; } .guide-aide { margin: 0 0 .5rem; font-size: .88rem; } .guide-item { border: 1px solid var(--trait-fin); border-radius: var(--arrondi-s); padding: .9rem; background: var(--papier); display: flex; flex-direction: column; gap: .6rem; } .guide-item--serre { padding: .6rem .8rem; gap: .4rem; } .guide-label { display: block; } .guide-libelle { display: block; font-size: .78rem; font-weight: 700; color: var(--encre-700); margin-bottom: .15rem; } .guide-champ { width: 100%; font-size: .92rem; } .guide-options { display: flex; flex-direction: column; gap: .35rem; } .guide-option, .guide-paire { display: flex; align-items: center; gap: .5rem; } .guide-coche-label { display: flex; align-items: center; cursor: pointer; } .guide-coche { width: 1.1rem; height: 1.1rem; cursor: pointer; margin: 0; } .guide-retirer { padding: .1rem .5rem; line-height: 1.4; } .guide-fleche { color: var(--encre-700); font-weight: 700; flex: none; } .guide-numero { font-family: 'IBM Plex Mono', ui-monospace, monospace; color: var(--accent); flex: none; min-width: 2.2rem; } /* Bouton « + Théorie » : choisir la notion à documenter */ .creer-theorie { position: relative; } .creer-theorie > summary { list-style: none; cursor: pointer; } .creer-theorie > summary::-webkit-details-marker { display: none; } .creer-theorie__panneau { position: absolute; right: 0; top: calc(100% + .4rem); z-index: 30; min-width: 22rem; box-shadow: var(--ombre); } /* Réponse d'élève à une question ouverte, dans l'écran de correction */ .reponse-eleve { margin: .4rem 0; padding: .5rem .8rem; border-left: 3px solid var(--trait); background: var(--papier); font-family: 'Source Serif 4', Georgia, serif; font-size: .92rem; }