/* ==========================================================================
Partage FPSE — feuille de style
Palette : charte graphique UMONS. Cyan #009ee0 = couleur de la faculté
de psychologie. Rouge #a80039, jaune #f6a924, gris #969696 = UMONS.
Typographie : Verdana pour les titres, Helvetica pour le texte — les
deux familles recommandées par la charte.
========================================================================== */
:root {
color-scheme: light;
--cyan: #009ee0;
--cyan-fonce: #0077a8;
--cyan-pale: #e3f4fc;
--encre: #10243a;
--encre-douce: #4a6076;
/* Fond légèrement adouci : le blanc pur restait trop agressif. */
--papier: #eef2f6;
--blanc: #fbfcfd;
--ambre: #f6a924;
--ambre-pale: #fdf3e0;
--grenat: #a80039;
--grenat-vif: #a80039; /* texte grenat : éclairci en mode sombre */
--grenat-pale: #fdeaf0;
--grenat-bord: #f3c4d3;
--grenat-texte:#6d2340;
--trait: #dbe4ea;
--marine: #10243a; /* fond des blocs sombres (accroche, vidéos) : fixe */
--lien: #0077a8;
--lien-vif: #009ee0;
--puce-fond: #fdf3e0;
--puce-texte: #8a5c00;
--puce-bord: #f0d9a8;
--titre: Verdana, "DejaVu Sans", Geneva, sans-serif;
--texte: "Helvetica Neue", Helvetica, Arial, sans-serif;
--rayon: 10px;
--large: 1180px;
}
/* ------------------------------------------------------------ mode sombre
Même palette UMONS : le cyan reste la couleur du site, seuls les fonds
et les contrastes s'inversent. Suit le réglage du système, sauf si la
personne a choisi avec la bascule de l'en-tête (html[data-theme]). Les deux
blocs ci-dessous sont identiques : l'un pour le réglage du système, l'autre
pour le choix explicite. */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
color-scheme: dark;
--papier: #0e151d;
--blanc: #17222d;
--encre: #e7edf3;
--encre-douce: #9fb2c2;
--trait: #263443;
--cyan-pale: #0d2b3b;
--grenat-vif: #ff89a8;
--grenat-pale: #2b111c;
--grenat-bord: #4d2032;
--grenat-texte:#e9a8bd;
--ambre-pale: #2c2210;
--lien: #5ec6f2;
--lien-vif: #8ad9ff;
--puce-fond: #2c2210;
--puce-texte: #f0c469;
--puce-bord: #4a3a16;
}
}
:root[data-theme="dark"] {
color-scheme: dark;
--papier: #0e151d;
--blanc: #17222d;
--encre: #e7edf3;
--encre-douce: #9fb2c2;
--trait: #263443;
--cyan-pale: #0d2b3b;
--grenat-vif: #ff89a8;
--grenat-pale: #2b111c;
--grenat-bord: #4d2032;
--grenat-texte:#e9a8bd;
--ambre-pale: #2c2210;
--lien: #5ec6f2;
--lien-vif: #8ad9ff;
--puce-fond: #2c2210;
--puce-texte: #f0c469;
--puce-bord: #4a3a16;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
* { animation: none !important; transition: none !important; }
}
body {
margin: 0;
background: var(--papier);
color: var(--encre);
font-family: var(--texte);
font-size: 17px;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--titre); line-height: 1.25; margin: 0 0 .5em; }
h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); letter-spacing: -.01em; }
h2 { font-size: clamp(1.3rem, 2.4vw, 1.6rem); margin-top: 2.4rem; }
h3 { font-size: 1.1rem; margin-top: 1.8rem; }
p { margin: 0 0 1.1em; max-width: 68ch; }
a { color: var(--lien); }
a:hover { color: var(--lien-vif); }
:focus-visible { outline: 3px solid var(--ambre); outline-offset: 2px; border-radius: 4px; }
code {
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
font-size: .88em;
background: var(--cyan-pale);
color: var(--lien);
padding: .12em .4em;
border-radius: 4px;
word-break: break-word;
}
.saut-contenu {
position: absolute; left: -9999px; top: 0; z-index: 100;
background: var(--marine); color: #fff; padding: .8rem 1.2rem;
}
.saut-contenu:focus { left: .5rem; top: .5rem; }
/* --------------------------------------------------------------- en-tête */
.entete {
background: var(--blanc);
border-bottom: 1px solid var(--trait);
position: sticky; top: 0; z-index: 40;
}
.entete__interieur {
max-width: var(--large); margin: 0 auto;
padding: .7rem 1.5rem;
display: flex; align-items: center; gap: 1.2rem;
}
/* Navigation principale : une seule rangée de pastilles, sobre et lisible */
.nav-h {
flex: 1 1 auto; min-width: 0;
display: flex; align-items: center; justify-content: flex-end; gap: 1rem;
}
.nav-h__liste {
list-style: none; margin: 0; padding: 0;
display: flex; align-items: center; gap: .2rem;
}
.nav-h__lien {
display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap;
padding: .5rem .8rem; border-radius: 8px;
color: var(--encre-douce); text-decoration: none;
font-size: .93rem; font-weight: 600;
}
.nav-h__lien .nav__icone { display: none; }
.nav-h__lien:hover { color: var(--lien); background: var(--cyan-pale); }
.nav-h__lien.est-actif { color: var(--lien); background: var(--cyan-pale); }
.bouton-discord--entete { padding: .55rem 1.05rem; font-size: .88rem; flex: none; }
.marque { display: flex; align-items: center; gap: .85rem; text-decoration: none; color: inherit; flex: none; }
/* Barre horizontale : la marque reste compacte, la signature passe sous le seuil mobile */
@media (min-width: 1081px) {
.marque__texte span { display: none; }
}
.marque__sigle {
background: var(--cyan); color: #fff;
font-family: var(--titre); font-weight: 700; font-size: .78rem; letter-spacing: .06em;
padding: .5rem .6rem; border-radius: 8px;
}
.marque__texte { display: flex; flex-direction: column; line-height: 1.3; }
.marque__texte strong { font-family: var(--titre); font-size: 1.02rem; }
.marque__texte span { font-size: .78rem; color: var(--encre-douce); }
/* Bascule jour / nuit (refaite le 18/10 au soir : Matthias trouvait l'ancien
bouton rond mal placé et trop gros) — un petit interrupteur soleil | lune,
dans le groupe d'actions à droite de l'en-tête ; la pastille blanche glisse
sous le mode affiché. Sans JavaScript, il reste lisible (CSS seule). */
.bascule-theme {
flex: none; display: inline-flex; align-items: center; padding: 3px; margin: 0;
background: none; border: 0; border-radius: 99px; cursor: pointer; color: var(--encre-douce);
}
.bascule-theme__piste {
position: relative; display: flex; align-items: center; justify-content: space-between;
width: 56px; height: 30px; padding: 0 7.5px; border-radius: 99px;
background: var(--papier); border: 1px solid var(--trait);
box-shadow: inset 0 1px 2px rgba(16, 36, 58, .08);
transition: border-color .15s ease;
}
.bascule-theme:hover .bascule-theme__piste { border-color: var(--cyan); }
.bascule-theme svg {
position: relative; z-index: 1; width: 15px; height: 15px; display: block;
fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
transition: color .2s ease;
}
.bascule-theme__bouton {
position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 50%;
background: var(--blanc); box-shadow: 0 1px 3px rgba(16, 36, 58, .28);
transition: transform .22s ease;
}
.bascule-theme__soleil { color: #c98200; } /* mode jour : le soleil, sur la pastille */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .bascule-theme__soleil { color: var(--encre-douce); }
:root:not([data-theme="light"]) .bascule-theme__lune { color: var(--lien); }
:root:not([data-theme="light"]) .bascule-theme__bouton { transform: translateX(26px); box-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
}
:root[data-theme="dark"] .bascule-theme__soleil { color: var(--encre-douce); }
:root[data-theme="dark"] .bascule-theme__lune { color: var(--lien); }
:root[data-theme="dark"] .bascule-theme__bouton { transform: translateX(26px); box-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
.bascule-menu {
display: none; align-items: center; gap: .55rem;
background: var(--blanc); border: 1px solid var(--trait); border-radius: 8px;
padding: .55rem .9rem; font: inherit; font-size: .9rem; color: var(--encre); cursor: pointer;
}
.bascule-menu__barres,
.bascule-menu__barres::before,
.bascule-menu__barres::after {
display: block; width: 17px; height: 2px; background: var(--encre); border-radius: 2px;
}
.bascule-menu__barres { position: relative; }
.bascule-menu__barres::before, .bascule-menu__barres::after { content: ""; position: absolute; }
.bascule-menu__barres::before { top: -5px; }
.bascule-menu__barres::after { top: 5px; }
/* ---------------------------------------------------------------- grille */
.grille {
max-width: var(--large); margin: 0 auto;
padding: 2.5rem 1.5rem 4rem;
display: grid; grid-template-columns: minmax(0, 1fr) 274px; gap: 3rem;
align-items: start;
}
.contenu { min-width: 0; }
.grille--simple { grid-template-columns: minmax(0, 1fr); }
.titre-page { margin-bottom: .35em; }
.chapeau {
font-size: 1.12rem; color: var(--encre-douce); max-width: 60ch; margin-bottom: 2rem;
}
/* ------------------------------------------------------ menu latéral droit */
.lateral { position: sticky; top: 92px; }
.nav {
background: var(--blanc); border: 1px solid var(--trait);
border-radius: var(--rayon); padding: 1.1rem 1rem; margin-bottom: 1rem;
}
.nav__intitule {
font-family: var(--titre); font-size: .72rem; font-weight: 700;
color: var(--encre-douce); margin: 0 0 .5rem .35rem;
}
.nav__intitule + .nav__liste { margin-bottom: 1.25rem; }
.nav__liste { list-style: none; margin: 0; padding: 0; }
.nav__lien {
display: flex; align-items: center; gap: .6rem;
padding: .55rem .6rem; border-radius: 7px;
color: var(--encre); text-decoration: none; font-size: .92rem;
border-left: 3px solid transparent;
}
.nav__lien:hover { background: var(--papier); color: var(--encre); }
.nav__lien.est-actif {
background: var(--cyan-pale); color: var(--lien);
border-left-color: var(--cyan); font-weight: 700;
}
.nav__libelle { flex: 1; }
.nav__lien--secondaire { font-size: .87rem; color: var(--encre-douce); padding-left: 1.1rem; }
.nav__lien--secondaire:hover { color: var(--lien); }
.nav__icone { width: 17px; height: 17px; flex: none; background: currentColor; opacity: .75; }
.i-maison { -webkit-mask: var(--m-maison) center/contain no-repeat; mask: var(--m-maison) center/contain no-repeat; }
.i-boussole { -webkit-mask: var(--m-boussole) center/contain no-repeat; mask: var(--m-boussole) center/contain no-repeat; }
.i-dossier { -webkit-mask: var(--m-dossier) center/contain no-repeat; mask: var(--m-dossier) center/contain no-repeat; }
.i-balance { -webkit-mask: var(--m-balance) center/contain no-repeat; mask: var(--m-balance) center/contain no-repeat; }
.i-cadenas { -webkit-mask: var(--m-cadenas) center/contain no-repeat; mask: var(--m-cadenas) center/contain no-repeat; }
.i-faculte { -webkit-mask: var(--m-faculte) center/contain no-repeat; mask: var(--m-faculte) center/contain no-repeat; }
.i-coeur { -webkit-mask: var(--m-coeur) center/contain no-repeat; mask: var(--m-coeur) center/contain no-repeat; }
:root {
--m-maison: url('data:image/svg+xml;utf8,');
--m-boussole: url('data:image/svg+xml;utf8,');
--m-dossier: url('data:image/svg+xml;utf8,');
--m-balance: url('data:image/svg+xml;utf8,');
--m-faculte: url('data:image/svg+xml;utf8,');
--m-coeur: url('data:image/svg+xml;utf8,');
--m-cadenas: url('data:image/svg+xml;utf8,');
}
.puce {
font-size: .66rem; font-weight: 700; letter-spacing: .02em;
background: var(--puce-fond); color: var(--puce-texte);
border: 1px solid var(--puce-bord); border-radius: 99px; padding: .12rem .45rem;
}
.mention-laterale {
font-size: .76rem; line-height: 1.5; color: var(--encre-douce);
text-align: center; margin: 0; padding: 0 .5rem;
}
/* ------------------------------------------------------------- l'accroche */
.accroche {
background: var(--marine);
color: #fff;
border-radius: 14px;
padding: 2.6rem 2.2rem;
margin-bottom: 2.5rem;
position: relative;
overflow: hidden;
}
.accroche::after {
content: ""; position: absolute; right: -70px; top: -70px;
width: 260px; height: 260px; border-radius: 50%;
background: var(--cyan); opacity: .16;
}
.accroche h2 {
font-size: clamp(1.5rem, 3.4vw, 2.05rem); margin-top: 0; color: #fff;
max-width: 19ch; position: relative;
}
.accroche p { color: #c3d3e0; max-width: 46ch; position: relative; }
.accroche__chiffres {
display: flex; flex-wrap: wrap; gap: 2.2rem;
margin-top: 1.8rem; padding-top: 1.6rem;
border-top: 1px solid rgba(255,255,255,.16); position: relative;
}
.accroche__chiffres div strong {
display: block; font-family: var(--titre); font-size: 1.5rem; color: var(--cyan);
}
.accroche__chiffres div span { font-size: .84rem; color: #a8bccd; }
.bouton-discord {
display: inline-flex; align-items: center; gap: .65rem;
background: #5865F2; color: #fff; text-decoration: none;
font-family: var(--titre); font-size: 1rem; font-weight: 700;
padding: .95rem 1.5rem; border-radius: 9px;
box-shadow: 0 2px 0 #4752c4;
}
.bouton-discord:hover { background: #4d5ae8; color: #fff; }
.bouton-discord:active { transform: translateY(1px); box-shadow: 0 1px 0 #4752c4; }
.bouton-discord svg { width: 23px; height: 17px; fill: currentColor; flex: none; }
.bouton-discord--lateral { width: 100%; justify-content: center; margin-bottom: 1rem; font-size: .93rem; }
.accroche .bouton-discord { position: relative; margin-top: .5rem; }
.accroche small { display: block; margin-top: .8rem; color: #8fa6b8; font-size: .8rem; }
/* ---------------------------------------------------------------- blocs */
.cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; margin: 1.5rem 0 2.5rem; }
.carte {
background: var(--blanc); border: 1px solid var(--trait);
border-radius: var(--rayon); padding: 1.3rem;
}
.carte h3 { margin: 0 0 .4rem; font-size: 1rem; }
.carte p { margin: 0; font-size: .92rem; color: var(--encre-douce); }
.carte__emoji { font-size: 1.5rem; display: block; margin-bottom: .6rem; }
.encadre {
border-left: 4px solid var(--cyan);
background: var(--cyan-pale);
padding: 1.1rem 1.3rem; border-radius: 0 var(--rayon) var(--rayon) 0;
margin: 1.6rem 0;
}
.encadre p:last-child { margin-bottom: 0; }
.encadre--attention { border-left-color: var(--ambre); background: var(--ambre-pale); }
.encadre--important { border-left-color: var(--grenat); background: var(--grenat-pale); }
.encadre h3 { margin-top: 0; }
/* -------------------------------------------------------------- chapitres */
.chapitre { border-top: 1px solid var(--trait); padding-top: 2rem; margin-top: 2.4rem; }
.chapitre:first-of-type { border-top: 0; }
.chapitre__entete { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; }
.chapitre__numero {
font-family: var(--titre); font-size: .95rem; font-weight: 700;
color: #fff; background: var(--cyan);
width: 30px; height: 30px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.chapitre__duree { font-size: .8rem; color: var(--encre-douce); }
.chapitre h2 { margin: 0; }
.chapitre__resume { color: var(--encre-douce); margin-top: .6rem; }
.etapes { counter-reset: etape; list-style: none; padding: 0; margin: 1.2rem 0 0; }
.etapes li {
counter-increment: etape; position: relative;
padding: .55rem 0 .55rem 2.3rem; max-width: 68ch;
}
.etapes li::before {
content: counter(etape); position: absolute; left: 0; top: .55rem;
width: 1.55rem; height: 1.55rem; border-radius: 50%;
background: var(--cyan-pale); color: var(--lien);
font-family: var(--titre); font-size: .78rem; font-weight: 700;
display: flex; align-items: center; justify-content: center;
}
/* ---------------------------------------------------------------- vidéos */
.video { margin: 1.4rem 0 0; }
.video__cadre {
position: relative; aspect-ratio: 16 / 9;
background: var(--marine); border-radius: var(--rayon); overflow: hidden;
}
.video__cadre video, .video__cadre iframe { width: 100%; height: 100%; display: block; border: 0; }
.video__attente {
position: absolute; inset: 0;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: .6rem; color: #9fb4c6; text-align: center; padding: 1.5rem;
}
.video__pictogramme { font-size: 2rem; }
.sans-marge-haute { margin-top: 0; }
.video__attente strong { font-family: var(--titre); color: #d3e0ea; font-size: 1rem; }
.video__attente span { font-size: .85rem; max-width: 34ch; }
.video__legende { font-size: .84rem; color: var(--encre-douce); margin: .6rem 0 0; }
.video--principale .video__cadre { border: 3px solid var(--cyan); }
.minutage { margin: 1rem 0 0; }
.minutage__lien {
display: inline-flex; align-items: center; gap: .5rem;
font-size: .9rem; text-decoration: none;
padding: .45rem .9rem; border-radius: 999px;
border: 1px solid var(--cyan); color: var(--cyan);
}
.minutage__lien:hover, .minutage__lien:focus-visible { background: var(--cyan); color: #0b1620; }
.minutage__lien span { font-size: .75em; }
/* Sommaire minuté de la vidéo complète : un bouton par chapitre, qui cale
le lecteur au bon passage (assets/js/main.js, liens data-minute). */
.sommaire {
margin: 1.2rem 0 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
gap: .5rem;
}
.sommaire__chapitre {
display: flex; align-items: center; gap: .7rem;
padding: .55rem .8rem;
border: 1px solid var(--trait); border-radius: var(--rayon);
background: var(--blanc);
text-decoration: none; color: var(--encre); font-size: .92rem;
}
.sommaire__chapitre:hover, .sommaire__chapitre:focus-visible {
border-color: var(--cyan);
}
.sommaire__minute {
font-family: var(--titre); font-weight: 700; font-size: .78rem;
color: var(--lien); background: var(--cyan-pale);
padding: .15rem .5rem; border-radius: 999px;
flex: none; min-width: 3.4em; text-align: center;
}
/* Sous-chapitres d'un groupe du guide (une vidéo = un groupe). */
.sous-chapitre { margin-top: 2rem; padding-left: 1.1rem; border-left: 3px solid var(--trait); }
.sous-chapitre h3 { margin: 0; }
.sous-chapitre .chapitre__resume { margin-top: .35rem; }
.sous-chapitre .telechargements { margin-top: 1.2rem; }
/* --------------------------------------------------------------- travaux */
.travaux { text-align: center; padding: 3.5rem 1.5rem; background: var(--blanc);
border: 2px dashed var(--trait); border-radius: 14px; }
.travaux__emoji { font-size: 3rem; display: block; margin-bottom: .8rem; }
.travaux h2 { margin-top: 0; }
.travaux p { margin-left: auto; margin-right: auto; }
/* --------------------------------------------------------- texte juridique */
.juridique h2 {
border-bottom: 2px solid var(--cyan); padding-bottom: .4rem; display: inline-block;
}
.juridique h3 { color: var(--lien); }
.juridique ul { max-width: 68ch; padding-left: 1.2rem; }
.juridique li { margin-bottom: .45rem; }
.juridique__date { font-size: .85rem; color: var(--encre-douce); }
/* ------------------------------------------------------------ pied de page */
.pied { background: var(--blanc); border-top: 1px solid var(--trait); margin-top: 2rem; }
.pied__interieur { max-width: var(--large); margin: 0 auto; padding: 2.8rem 1.5rem 2rem; }
.pied__avertissement {
background: var(--grenat-pale); border: 1px solid var(--grenat-bord);
border-radius: var(--rayon); padding: 1.4rem 1.5rem; margin-bottom: 2.4rem;
}
.pied__avertissement h2 { margin-top: 0; font-size: 1.05rem; color: var(--grenat-vif); }
.pied__avertissement p { font-size: .9rem; color: var(--grenat-texte); max-width: 88ch; }
.pied__avertissement p:last-child { margin-bottom: 0; }
.pied__colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 2rem; }
.pied__colonnes h3 { margin: 0 0 .6rem; font-size: .88rem; }
.pied__colonnes ul { list-style: none; margin: 0; padding: 0; font-size: .9rem; }
.pied__colonnes li { margin-bottom: .35rem; color: var(--encre-douce); }
.pied__bas {
margin: 2.2rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--trait);
font-size: .82rem; color: var(--encre-douce);
display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem 1.2rem;
}
.pied__version { margin-left: auto; font-variant-numeric: tabular-nums; opacity: .8; }
/* ------------------------------------------------------------- responsive */
@media (max-width: 1080px) {
.entete__interieur { flex-wrap: wrap; justify-content: space-between; }
.bascule-menu { display: inline-flex; }
.entete__actions { margin-left: auto; }
.entete__actions::before { display: none; }
.nav-h { display: none; order: 10; }
.nav-h.est-ouvert {
display: flex; flex: 1 1 100%; flex-direction: column; align-items: stretch;
padding: .3rem 0 .7rem;
}
.nav-h__liste { flex-direction: column; align-items: stretch; gap: .1rem; }
.nav-h__lien { justify-content: flex-start; padding: .7rem .8rem; }
.nav-h__lien .nav__icone { display: inline-block; width: 15px; height: 15px; }
.bouton-discord--entete { justify-content: center; margin-top: .5rem; }
}
@media (max-width: 900px) {
.grille { grid-template-columns: 1fr; gap: 2rem; padding-top: 1.5rem; }
.lateral { position: static; }
.accroche { padding: 2rem 1.4rem; }
body { font-size: 16px; }
}
/* --------------------------------------------------- téléchargements Discord */
.telechargements {
list-style: none; margin: .8rem 0 0; padding: 0;
display: flex; flex-wrap: wrap; gap: .6rem;
}
.telechargements__lien {
display: inline-flex; align-items: center; gap: .55rem;
background: var(--marine); border: 1px solid var(--marine);
border-radius: 99px; padding: .55rem 1.05rem;
color: #fff; text-decoration: none;
font-size: .9rem; font-weight: 600;
}
.telechargements__lien svg { width: 16px; height: 16px; fill: currentColor; flex: none; }
.telechargements__lien:hover { border-color: var(--cyan); color: #fff; background: #17324e; }
/* --------------------------------------------------------- page /discord */
.go {
min-height: 100vh; margin: 0;
display: flex; align-items: center; justify-content: center;
padding: 1.5rem;
}
.go__carte {
background: var(--blanc); border: 1px solid var(--trait);
border-radius: 14px; padding: 2.4rem 2.2rem;
max-width: 34rem; text-align: center;
}
.go__titre { font-size: 1.5rem; margin-bottom: .6rem; }
.go__texte { color: var(--encre-douce); margin: 0 auto 1.4rem; }
.go__boutons { display: flex; flex-direction: column; align-items: center; gap: .8rem; margin: 0 0 1.8rem; }
.go__lien-web { font-size: .92rem; }
.go__telechargements { border-top: 1px solid var(--trait); padding-top: 1.4rem; }
.go__intitule { font-size: .88rem; color: var(--encre-douce); margin-bottom: 0; }
.go .telechargements { justify-content: center; }
.go__retour { margin: 1.6rem 0 0; font-size: .85rem; }
/* ----------------------------------------------------------------- sponsor */
.sponsor {
background: var(--blanc); border: 1px solid var(--trait);
border-radius: 14px; padding: 2.2rem 2rem; margin-bottom: 2.4rem;
}
.sponsor__logo { display: block; max-width: 340px; margin-bottom: 1.6rem; }
.sponsor__logo img { width: 100%; height: auto; display: block; }
/* ------------------------------------------------ téléchargements sous le héros */
.telecharger {
display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap;
background: var(--blanc); border: 1px solid var(--trait);
border-radius: var(--rayon); padding: 1.1rem 1.4rem; margin: 1.6rem 0 2.4rem;
}
.telecharger__texte { margin: 0; font-size: .95rem; color: var(--encre-douce); flex: 1 1 240px; }
.telecharger .telechargements { margin: 0; }
/* ------------------------------------------------------------ cartes : icônes */
.carte__icone {
width: 26px; height: 26px; display: block; margin-bottom: .7rem;
fill: none; stroke: var(--cyan); stroke-width: 1.8;
stroke-linecap: round; stroke-linejoin: round;
}
/* --------------------------------------------------------- bandeau sponsor */
.bandeau-sponsor {
display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap;
background: var(--blanc); border: 1px solid var(--trait);
border-radius: var(--rayon); padding: 1.2rem 1.5rem; margin-top: 2.6rem;
text-decoration: none; color: var(--encre-douce);
}
.bandeau-sponsor:hover { border-color: var(--cyan); color: var(--encre-douce); }
.bandeau-sponsor img { width: 190px; height: auto; display: block; flex: none; }
.bandeau-sponsor strong { color: var(--encre); display: block; margin-bottom: .15rem; }
.bandeau-sponsor span { font-size: .92rem; max-width: 52ch; }
/* ------------------------------------------------------- contacts faculté */
.contacts {
display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 1rem; margin: 1.4rem 0 2.4rem;
}
.contact {
background: var(--blanc); border: 1px solid var(--trait);
border-radius: var(--rayon); padding: 1.1rem 1.2rem;
}
.contact__nom { margin: 0; font-family: var(--titre); font-weight: 700; }
.contact__annee { margin: .1rem 0 .7rem; font-size: .85rem; color: var(--encre-douce); }
.contact__moyens { list-style: none; margin: 0; padding: 0; font-size: .88rem; }
.contact__moyens li { margin-bottom: .3rem; color: var(--encre-douce); word-break: break-word; }
.contact__discord {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem;
background: var(--cyan-pale); color: var(--lien); padding: .1em .4em; border-radius: 4px;
}
/* ------------------------------------------------------------------ agenda */
.agenda { margin: 1.4rem 0 .6rem; }
.agenda__mois {
background: var(--blanc); border: 1px solid var(--trait);
border-radius: var(--rayon); margin-bottom: .8rem; overflow: hidden;
}
.agenda__mois summary {
cursor: pointer; list-style: none;
padding: .95rem 1.3rem; font-family: var(--titre); font-weight: 700;
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.agenda__mois summary::-webkit-details-marker { display: none; }
.agenda__mois summary::after { content: "▾"; color: var(--encre-douce); transition: transform .15s; }
.agenda__mois[open] summary::after { transform: rotate(180deg); }
.agenda__compte {
background: var(--cyan-pale); color: var(--lien);
font-size: .78rem; padding: .1rem .55rem; border-radius: 99px; margin-left: auto;
}
.agenda__liste { list-style: none; margin: 0; padding: 0 1.3rem 1rem; }
.agenda__evenement {
display: flex; gap: 1.1rem; padding: .9rem 0;
border-top: 1px solid var(--trait);
}
.agenda__date {
flex: none; width: 52px; text-align: center;
background: var(--marine); color: #fff; border-radius: 8px; padding: .45rem 0;
height: fit-content;
}
.agenda__date strong { display: block; font-size: 1.15rem; line-height: 1.1; }
.agenda__date span { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: #c3d3e0; }
.agenda__nom { margin: 0; font-weight: 700; }
.agenda__meta { margin: .1rem 0 0; font-size: .85rem; color: var(--encre-douce); }
.agenda__description { margin: .4rem 0 0; font-size: .9rem; color: var(--encre-douce); max-width: 70ch; }
.agenda__maj { font-size: .8rem; color: var(--encre-douce); }
/* ===================================================================== drive
Connexion, mot de passe, Mon drive, Mon compte (3.0.0 du bot).
Formulaires sobres, mêmes couleurs que le reste du site (mode sombre inclus). */
.formulaire {
display: grid; gap: 1.1rem; max-width: 30rem;
background: var(--blanc); border: 1px solid var(--trait);
border-radius: var(--rayon); padding: 1.5rem; margin: 1.2rem 0 1.6rem;
}
.champ { display: grid; gap: .35rem; }
.champ__libelle { font-family: var(--titre); font-size: .9rem; font-weight: 700; }
.champ__aide { font-size: .82rem; color: var(--encre-douce); }
/* Les cases et boutons radio sont exclus : étirés à 100 %, ils écrasaient le
texte de leur étiquette (page « Signaler cette question », 12/10). */
.champ input:not([type="radio"]):not([type="checkbox"]) {
font: inherit; font-size: 1rem; color: var(--encre);
background: var(--papier); border: 1px solid var(--trait); border-radius: 8px;
padding: .7rem .8rem; width: 100%;
}
.champ input:not([type="radio"]):not([type="checkbox"]):focus { border-color: var(--cyan); outline: 3px solid var(--cyan-pale); outline-offset: 0; }
.champ input[type="radio"], .champ input[type="checkbox"] { accent-color: var(--cyan); }
.case { display: flex; gap: .6rem; align-items: flex-start; font-size: .9rem; color: var(--encre-douce); }
.case input { margin-top: .3rem; accent-color: var(--cyan); }
.bouton {
display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
font-family: var(--titre); font-size: .95rem; font-weight: 700;
background: var(--cyan-fonce); color: #fff; text-decoration: none;
border: 0; border-radius: 9px; padding: .8rem 1.3rem; cursor: pointer;
}
.bouton:hover { background: var(--cyan); color: #fff; }
.bouton--secondaire { background: var(--blanc); color: var(--lien); border: 1px solid var(--trait); }
.bouton--secondaire:hover { background: var(--cyan-pale); color: var(--lien); }
.bouton--danger { background: var(--blanc); color: var(--grenat-vif); border: 1px solid var(--grenat-bord); }
.bouton--danger:hover { background: var(--grenat-pale); color: var(--grenat-vif); }
.message {
max-width: 68ch; padding: .8rem 1rem; border-radius: var(--rayon);
border: 1px solid var(--trait); background: var(--blanc);
}
.message--erreur { border-color: var(--grenat-bord); background: var(--grenat-pale); color: var(--grenat-texte); }
.message--succes { border-color: var(--cyan); background: var(--cyan-pale); }
.message--attention { border-color: var(--ambre); background: var(--ambre-pale); }
.barre-compte {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem;
background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon);
padding: .7rem 1rem; margin-bottom: 1.2rem;
}
.barre-compte__qui { margin: 0; }
.barre-compte__actions, .actions-compte { display: flex; flex-wrap: wrap; gap: .5rem; }
.barre-compte__actions form, .actions-compte form { margin: 0; }
.barre-compte .bouton { padding: .5rem .9rem; font-size: .85rem; }
/* ======================================================================
Drive — chemises de cours, entraînements, éditeur de questions, documents.
Une seule idée forte : chaque cours est une chemise cartonnée de SA couleur
(imposée par son numéro), avec son numéro sur l'onglet. Tout le reste est
neutre : la couleur du cours ne sert qu'aux aplats et aux bordures, jamais
à porter du texte sur fond clair.
====================================================================== */
:root {
--juste: #23733d;
--juste-fond: #e4f3e8;
--juste-trait: #a9d8b6;
--faux: #a80039;
--faux-fond: #fdeaf0;
--faux-trait: #f0bccd;
--sans: #8a5c00;
--sans-fond: #fdf3e0;
--sans-trait: #efd6a2;
--jauge-juste: #3d9d5d;
--jauge-fausse: #d2416e;
--jauge-sans: #f2b233;
--jauge-fond: #dde5ec;
--etoile: #f2b01e;
--ombre-drive: 0 1px 2px rgba(16, 36, 58, .06), 0 6px 18px rgba(16, 36, 58, .07);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--juste: #7fdc9c;
--juste-fond: #11291a;
--juste-trait: #24573a;
--faux: #ff8fae;
--faux-fond: #2b111c;
--faux-trait: #5a2338;
--sans: #f0c469;
--sans-fond: #2c2210;
--sans-trait: #4f3d17;
--jauge-fond: #2a3947;
--ombre-drive: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 22px rgba(0, 0, 0, .28);
}
}
:root[data-theme="dark"] {
--juste: #7fdc9c;
--juste-fond: #11291a;
--juste-trait: #24573a;
--faux: #ff8fae;
--faux-fond: #2b111c;
--faux-trait: #5a2338;
--sans: #f0c469;
--sans-fond: #2c2210;
--sans-trait: #4f3d17;
--jauge-fond: #2a3947;
--ombre-drive: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 22px rgba(0, 0, 0, .28);
}
/* ---- couleurs imposées des numéros de cours (1 à 24, puis on recommence) ----
Nuancier à 24 couleurs (14/10, choix de Matthias) : douze familles, chacune
en un ton vif (numéro à l'encre) et un ton profond (numéro en blanc) ;
contraste du numéro ≥ 4,5:1 partout, onglet visible de jour comme de nuit.
La classe suit le RANG du cours dans l'année (champ « o » du bot) : d'abord
les cours classiques (Q1 puis Q2, onglet « 1, 2, 3… »), puis les annuels
(« A1, A2… »), puis les enseignements au choix (« O1, O2… ») — un cours =
une couleur. Ordre revu le 14/10 (3.3.4) : jamais deux couleurs de la même
famille visuelle à un ou deux rangs d'écart ; les deux tons d'une famille
à 8 rangs ou plus ; les voisines de la grille (jusqu'à 4 d'écart) toujours
bien distinctes ; aubergine assombrie (trop proche de la lavande).
Mêmes valeurs : DRIVE_COULEURS (includes/drive.php). */
.num-1 { --teinte: #612dc0; --teinte-texte: #ffffff; } /* aubergine */
.num-2 { --teinte: #b2957c; --teinte-texte: #10243a; } /* caramel */
.num-3 { --teinte: #970911; --teinte-texte: #ffffff; } /* carmin */
.num-4 { --teinte: #e24cbe; --teinte-texte: #10243a; } /* fuchsia */
.num-5 { --teinte: #6c676c; --teinte-texte: #ffffff; } /* anthracite */
.num-6 { --teinte: #64d1d8; --teinte-texte: #10243a; } /* turquoise */
.num-7 { --teinte: #eb9a04; --teinte-texte: #10243a; } /* orange */
.num-8 { --teinte: #3b624a; --teinte-texte: #ffffff; } /* sapin */
.num-9 { --teinte: #2d4a88; --teinte-texte: #ffffff; } /* bleu nuit */
.num-10 { --teinte: #684231; --teinte-texte: #ffffff; } /* chocolat */
.num-11 { --teinte: #9677fb; --teinte-texte: #10243a; } /* lavande */
.num-12 { --teinte: #90d6af; --teinte-texte: #10243a; } /* menthe */
.num-13 { --teinte: #b10d49; --teinte-texte: #ffffff; } /* framboise */
.num-14 { --teinte: #e6cf4a; --teinte-texte: #10243a; } /* jaune */
.num-15 { --teinte: #a86343; --teinte-texte: #ffffff; } /* rouille */
.num-16 { --teinte: #257087; --teinte-texte: #ffffff; } /* pétrole */
.num-17 { --teinte: #64c466; --teinte-texte: #10243a; } /* vert */
.num-18 { --teinte: #c1d2cd; --teinte-texte: #10243a; } /* gris clair */
.num-19 { --teinte: #78335d; --teinte-texte: #ffffff; } /* prune */
.num-20 { --teinte: #158561; --teinte-texte: #ffffff; } /* émeraude */
.num-21 { --teinte: #f75a2e; --teinte-texte: #10243a; } /* corail */
.num-22 { --teinte: #e883a9; --teinte-texte: #10243a; } /* rose */
.num-23 { --teinte: #6d6a00; --teinte-texte: #ffffff; } /* bronze */
.num-24 { --teinte: #89b1f7; --teinte-texte: #10243a; } /* bleu ciel */
/* Teintes dérivées : le carton (pâle), le pli (moyen), le bord. */
.num-1, .num-2, .num-3, .num-4, .num-5, .num-6, .num-7, .num-8, .num-9, .num-10, .num-11, .num-12,
.num-13, .num-14, .num-15, .num-16, .num-17, .num-18, .num-19, .num-20, .num-21, .num-22, .num-23, .num-24 {
--teinte-pale: var(--blanc); --teinte-moyenne: var(--trait); --teinte-trait: var(--trait);
}
@supports (color: color-mix(in srgb, red 10%, white)) {
.num-1, .num-2, .num-3, .num-4, .num-5, .num-6, .num-7, .num-8, .num-9, .num-10, .num-11, .num-12,
.num-13, .num-14, .num-15, .num-16, .num-17, .num-18, .num-19, .num-20, .num-21, .num-22, .num-23, .num-24 {
--teinte-pale: color-mix(in srgb, var(--teinte) 15%, var(--blanc));
--teinte-moyenne: color-mix(in srgb, var(--teinte) 34%, var(--blanc));
--teinte-trait: color-mix(in srgb, var(--teinte) 45%, var(--blanc));
}
/* Le gris clair (18), pâli à 15 % sur le fond du jour, donnait une chemise
presque blanche, comme vide : de jour, son carton est teinté plus
franchement ; la nuit, le mélange ordinaire suffit. */
.num-18 {
--teinte-pale: color-mix(in srgb, var(--teinte) 30%, var(--blanc));
--teinte-moyenne: color-mix(in srgb, var(--teinte) 50%, var(--blanc));
--teinte-trait: color-mix(in srgb, var(--teinte) 70%, var(--blanc));
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .num-18 {
--teinte-pale: color-mix(in srgb, var(--teinte) 15%, var(--blanc));
--teinte-moyenne: color-mix(in srgb, var(--teinte) 34%, var(--blanc));
--teinte-trait: color-mix(in srgb, var(--teinte) 45%, var(--blanc));
}
}
:root[data-theme="dark"] .num-18 {
--teinte-pale: color-mix(in srgb, var(--teinte) 15%, var(--blanc));
--teinte-moyenne: color-mix(in srgb, var(--teinte) 34%, var(--blanc));
--teinte-trait: color-mix(in srgb, var(--teinte) 45%, var(--blanc));
}
}
.pastille-numero {
display: inline-flex; align-items: center; justify-content: center;
min-width: 1.55em; height: 1.55em; padding: 0 .35em; border-radius: 6px 6px 2px 2px;
background: var(--teinte, var(--cyan)); color: var(--teinte-texte, #fff);
font-family: var(--titre); font-weight: 700; font-size: .78rem; line-height: 1;
}
/* ---- pictogrammes ---- */
.icone { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; }
.bouton .icone, .bouton-lien .icone { width: 1.1em; height: 1.1em; }
/* ---- boutons discrets ---- */
.bouton-lien {
display: inline-flex; align-items: center; gap: .35rem;
background: none; border: 0; padding: .35rem .15rem; cursor: pointer;
font: inherit; font-size: .9rem; font-weight: 600; color: var(--lien); text-decoration: none;
}
.bouton-lien:hover { color: var(--lien-vif); text-decoration: underline; }
.bouton-lien--danger { color: var(--faux); }
.bouton-lien--danger:hover { color: var(--faux); }
form:has(> .bouton-lien) { margin: 0; display: inline; }
/* ---- barre du haut : où l'on est, qui l'on est ---- */
.barre-drive {
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
margin: -.8rem 0 1.8rem; padding-bottom: .85rem; border-bottom: 1px solid var(--trait);
}
.fil { min-width: 0; }
.fil ol {
list-style: none; margin: 0; padding: 0;
display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .45rem;
font-size: .88rem; color: var(--encre-douce);
}
.fil li { display: inline-flex; align-items: center; gap: .45rem; }
.fil li + li::before { content: "›"; color: var(--encre-douce); opacity: .7; }
.fil a { color: var(--lien); text-decoration: none; display: inline-flex; align-items: center; gap: .35rem; }
.fil a:hover { text-decoration: underline; }
.fil [aria-current] { color: var(--encre); font-weight: 600; display: inline-flex; align-items: center; gap: .35rem; }
.fil__icone { width: 1.05rem; height: 1.05rem; }
.moi { position: relative; flex: none; }
.moi summary {
list-style: none; cursor: pointer; display: flex; align-items: center; gap: .55rem;
padding: .25rem .6rem .25rem .25rem; border-radius: 99px; border: 1px solid var(--trait);
background: var(--blanc); font-size: .88rem; font-weight: 600;
}
.moi summary::-webkit-details-marker { display: none; }
.moi summary::after { content: "▾"; font-size: .75rem; color: var(--encre-douce); }
.moi[open] summary { border-color: var(--cyan); }
.moi__pastille {
width: 1.9rem; height: 1.9rem; border-radius: 50%; display: grid; place-items: center;
background: var(--role, var(--cyan-fonce)); color: #fff; font: 700 .72rem var(--titre); letter-spacing: .02em;
}
.moi__menu {
position: absolute; right: 0; top: calc(100% + .4rem); z-index: 30; min-width: 15rem;
background: var(--blanc); border: 1px solid var(--trait); border-radius: 12px;
box-shadow: var(--ombre-drive); padding: .45rem; display: grid;
}
.moi__menu a, .moi__menu button {
display: block; width: 100%; text-align: left; padding: .55rem .6rem; border-radius: 8px;
font: inherit; font-size: .9rem; color: var(--encre); text-decoration: none;
background: none; border: 0; cursor: pointer;
}
.moi__menu a:hover, .moi__menu button:hover { background: var(--papier); }
.moi__menu form { margin: .25rem 0 0; padding-top: .25rem; border-top: 1px solid var(--trait); }
/* Statuts (site 2.39, 24/10 — demande de Matthias) : une couleur par statut, la même
partout (initiales de l'en-tête, menu « Mon compte », carte de la page Mon compte).
Couleurs de la palette des cours : bleu du site, émeraude, aubergine, carmin. */
.role--etudiant { --role: #0077a8; }
.role--aidant { --role: #158561; }
.role--delegue { --role: #612dc0; }
.role--admin { --role: #970911; }
.statuts { display: flex; flex-wrap: wrap; gap: .3rem; }
.statut {
display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 99px;
font-size: .76rem; font-weight: 700; line-height: 1.4; white-space: nowrap;
background: var(--papier); border: 1px solid var(--trait); color: var(--role, var(--encre));
}
@supports (color: color-mix(in srgb, red 10%, white)) {
.statut {
background: color-mix(in srgb, var(--role) 11%, var(--blanc));
border-color: color-mix(in srgb, var(--role) 30%, var(--blanc));
color: color-mix(in srgb, var(--role) 80%, var(--encre));
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .statut {
background: color-mix(in srgb, var(--role) 22%, var(--blanc));
border-color: color-mix(in srgb, var(--role) 50%, var(--blanc));
color: color-mix(in srgb, var(--role) 45%, var(--encre));
}
}
:root[data-theme="dark"] .statut {
background: color-mix(in srgb, var(--role) 22%, var(--blanc));
border-color: color-mix(in srgb, var(--role) 50%, var(--blanc));
color: color-mix(in srgb, var(--role) 45%, var(--encre));
}
}
/* ---- titres des pages du drive ---- */
.drive-titre {
display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
gap: 1rem 2rem; margin-bottom: 1.6rem;
}
.drive-titre .titre-page, .titre-page--drive { margin-bottom: .3rem; }
.titre-page--drive { font-size: clamp(1.6rem, 3.4vw, 2.2rem); }
.drive-titre__texte { color: var(--encre-douce); margin: 0 0 1.4rem; max-width: 62ch; }
.drive-titre .drive-titre__texte { margin: 0; }
.drive-titre .actions-ligne { margin: 0; }
.bascule {
display: inline-flex; padding: .25rem; gap: .2rem; border-radius: 11px;
background: var(--blanc); border: 1px solid var(--trait);
}
.bascule a {
padding: .45rem .85rem; border-radius: 8px; font-size: .88rem; font-weight: 600;
color: var(--encre-douce); text-decoration: none;
}
.bascule a:hover { color: var(--encre); background: var(--papier); }
.bascule a[aria-current] { background: var(--encre); color: var(--blanc); }
.bascule--petite a { padding: .3rem .7rem; font-size: .82rem; }
/* ---- Mon drive : quadrimestres, blocs, chemises ---- */
.filtre-cours {
display: flex; align-items: center; gap: .5rem; padding: 0 .8rem; min-width: 15rem;
border: 1px solid var(--trait); border-radius: 10px; background: var(--blanc); color: var(--encre-douce);
}
.filtre-cours input { border: 0; background: none; font: inherit; font-size: .92rem; padding: .55rem 0; width: 100%; color: var(--encre); }
.filtre-cours input:focus { outline: none; }
.filtre-cours:focus-within { border-color: var(--cyan); outline: 3px solid var(--cyan-pale); }
.filtre-cours__aucun { color: var(--encre-douce); }
/* Quadrimestres et blocs : repliables (details/summary ; l'état est mémorisé par drive.js). */
.quadri { margin-top: 2.2rem; }
.quadri__titre, .bloc__titre {
list-style: none; cursor: pointer; display: flex; align-items: center; gap: .8rem;
border-radius: 10px; margin: 0 -.5rem; padding: .35rem .5rem;
}
.quadri__titre::-webkit-details-marker, .bloc__titre::-webkit-details-marker { display: none; }
.quadri__titre:hover, .bloc__titre:hover { background: var(--blanc); }
.quadri__titre h2 { margin: 0; font-size: clamp(1.25rem, 2.4vw, 1.5rem); }
.quadri__titre::before { content: ""; order: 3; flex: 1; height: 1px; background: var(--trait); }
.bloc { margin-top: 1rem; }
.bloc__titre h3 { margin: 0; font-size: .95rem; }
.repli__nombre { font-size: .82rem; color: var(--encre-douce); white-space: nowrap; }
.repli__fleche { order: 4; display: inline-flex; color: var(--encre-douce); transition: transform .15s ease; }
.repli__fleche .icone { width: 1.1rem; height: 1.1rem; }
details[open] > summary .repli__fleche { transform: rotate(90deg); }
.quadri > .chemises, .bloc > .chemises { margin-top: 1rem; }
.bloc > .chemises { margin-bottom: 1.4rem; }
/* ---- champ auteur (modération) et # ---- */
.champ--auteur { display: grid; gap: .45rem; border: 0; padding: 0; margin: 0; min-width: 0; }
.champ--auteur legend { padding: 0; }
.champ--auteur input[type="text"] { display: block; }
.champ--auteur input[type="text"][hidden] { display: none; }
.tags-choix { border: 0; padding: 0; margin: 0; min-width: 0; }
.tags-choix legend { padding: 0; margin-bottom: .4rem; }
.tags-choix__liste { display: flex; flex-wrap: wrap; gap: .4rem; }
.tag-choix { cursor: pointer; }
.tag-choix input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tag-choix span {
display: inline-block; padding: .4rem .75rem; border-radius: 99px; border: 1.5px solid var(--trait);
font-size: .88rem; font-weight: 700; background: var(--blanc);
}
.tag-choix:hover span { border-color: var(--cyan); }
.tag-choix input:checked + span { background: var(--encre); border-color: var(--encre); color: var(--blanc); }
.tag-choix input:focus-visible + span { outline: 3px solid var(--ambre); outline-offset: 2px; }
.tag {
display: inline-block; padding: .05rem .5rem; border-radius: 99px; font-size: .8rem; font-weight: 700;
background: var(--cyan-pale); color: var(--lien); text-decoration: none; white-space: nowrap;
}
a.tag:hover { background: var(--cyan); color: #fff; }
.filtres--tags { margin: -.2rem 0 1rem; }
.filtres--tags a {
font-size: .85rem; font-weight: 600; text-decoration: none;
padding: .42rem .8rem; border-radius: 99px; border: 1px solid var(--trait); background: var(--blanc); color: var(--encre-douce);
}
.filtres--tags a:hover { color: var(--encre); border-color: var(--cyan); }
.filtres--tags a[aria-current] { background: var(--encre); border-color: var(--encre); color: var(--blanc); }
/* ---- fichier choisi : son nom complet, lisible ---- */
.depot__nom {
display: block; margin-top: .4rem; font-size: .88rem; font-weight: 600; color: var(--encre);
overflow-wrap: anywhere; line-height: 1.4;
}
.depot__nom small { font-weight: 400; color: var(--encre-douce); }
.chemises {
list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 228px), 1fr));
gap: 1.9rem 1.1rem;
}
.chemises__element { display: flex; }
.chemise {
flex: 1; position: relative; display: flex; flex-direction: column;
color: var(--encre); text-decoration: none;
}
.chemise:hover, .chemise:focus-visible { color: var(--encre); }
/* L'onglet : UNE seule forme, pente comprise (clip-path), hauteur en pixels entiers, qui
descend de 2 px sous le liseré du dossier (même couleur). Avant (jusqu'au 18/10), la
pente était un ::after collé à côté : selon l'arrondi des pixels, un cran apparaissait
près du numéro et un fil sombre sous la pente (retour de Matthias). */
.chemise__onglet {
align-self: flex-start; position: relative; z-index: 2;
display: flex; align-items: center; height: 30px; min-width: 4.3rem; margin-bottom: -2px;
padding: 0 calc(.95rem + 17px) 2px .95rem;
background: var(--teinte); color: var(--teinte-texte); border-radius: 10px 0 0 0;
clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 100%, 0 100%);
}
.chemise__numero { font: 700 1rem/1 var(--titre); }
/* Trois feuilles dans la chemise : au survol, elles sortent en éventail, l'une après
l'autre (18/10 au soir — avant : une seule feuille). */
.chemise__feuilles { position: absolute; z-index: 1; top: 36px; right: 12px; width: 50%; height: 3rem; pointer-events: none; }
.chemise__feuille {
position: absolute; top: 0; bottom: 0; left: 8%; right: 8%;
background: var(--blanc) repeating-linear-gradient(180deg, transparent 0 7px, var(--trait) 7px 8px) 0 4px / 100% 100% no-repeat;
border: 1px solid var(--trait); border-radius: 3px; box-shadow: 0 1px 3px rgba(16, 36, 58, .14);
transform-origin: 50% 100%;
transition: transform .3s cubic-bezier(.3, .7, .35, 1.2);
}
.chemise__feuille:nth-child(1) { left: -6%; right: 24%; background-color: var(--papier); }
.chemise__feuille:nth-child(3) { left: 26%; right: -6%; background-color: var(--teinte-pale, var(--blanc)); }
.chemise:hover .chemise__feuille:nth-child(1), .chemise:focus-visible .chemise__feuille:nth-child(1) { transform: translate(-4px, -14px) rotate(-7deg); }
.chemise:hover .chemise__feuille:nth-child(2), .chemise:focus-visible .chemise__feuille:nth-child(2) { transform: translateY(-21px) rotate(-1deg); transition-delay: .05s; }
.chemise:hover .chemise__feuille:nth-child(3), .chemise:focus-visible .chemise__feuille:nth-child(3) { transform: translate(4px, -15px) rotate(6deg); transition-delay: .1s; }
/* De nuit, des feuilles plus claires que le fond (sinon on ne les voit pas sortir). */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .chemise__feuille { background-color: #2c3b4b; border-color: #3b4d60; }
:root:not([data-theme="light"]) .chemise__feuille:nth-child(1) { background-color: #243343; }
:root:not([data-theme="light"]) .chemise__feuille:nth-child(3) { background-color: color-mix(in srgb, var(--teinte) 30%, #2c3b4b); }
}
:root[data-theme="dark"] .chemise__feuille { background-color: #2c3b4b; border-color: #3b4d60; }
:root[data-theme="dark"] .chemise__feuille:nth-child(1) { background-color: #243343; }
:root[data-theme="dark"] .chemise__feuille:nth-child(3) { background-color: color-mix(in srgb, var(--teinte) 30%, #2c3b4b); }
.chemise__corps {
position: relative; z-index: 2; flex: 1;
display: flex; flex-direction: column; gap: .2rem; min-height: 8.4rem; /* 2.47 : flex — le contenu se cale en bas */
padding: 1rem 1.15rem .95rem;
background: var(--teinte-pale); border: 1px solid var(--teinte-trait); border-top: 4px solid var(--teinte);
border-radius: 0 12px 12px 12px;
transition: background-color .18s ease, box-shadow .18s ease;
}
.chemise:hover .chemise__corps, .chemise:focus-visible .chemise__corps { background: var(--teinte-moyenne); box-shadow: var(--ombre-drive); }
.chemise:focus-visible { outline: none; }
.chemise:focus-visible .chemise__corps { outline: 3px solid var(--ambre); outline-offset: 2px; }
.chemise__code { font: 700 1.06rem/1.25 var(--titre); overflow-wrap: anywhere; }
.chemise__nom {
font-size: .86rem; line-height: 1.4; color: var(--encre-douce);
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.chemise__contenu { margin-top: auto; padding-top: .7rem; font-size: .78rem; font-weight: 600; color: var(--encre-douce); }
/* ---- un cours ouvert ---- */
.entete-cours { margin: 0 0 1.6rem; }
.entete-cours__onglet { /* une seule forme, pente comprise (voir .chemise__onglet) */
position: relative; display: inline-flex; align-items: center; gap: .65rem;
height: 38px; padding: 0 calc(1.1rem + 21px) 2px 1.1rem; margin-bottom: -2px;
background: var(--teinte, var(--cyan)); color: var(--teinte-texte, #fff);
border-radius: 12px 0 0 0;
clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 100%, 0 100%);
}
.entete-cours__numero { font: 700 1.25rem/1 var(--titre); }
.entete-cours__code { font: 700 .92rem/1 var(--titre); }
.entete-cours__corps {
background: var(--teinte-pale, var(--blanc)); border: 1px solid var(--teinte-trait, var(--trait));
border-top: 5px solid var(--teinte, var(--cyan)); border-radius: 0 16px 16px 16px;
padding: 1.3rem 1.6rem 1.4rem;
}
.entete-cours__titre { margin: 0; font-size: clamp(1.45rem, 3.2vw, 2.05rem); }
.entete-cours__meta, .entete-cours__sous-titre { margin: .35rem 0 0; color: var(--encre-douce); }
.cours-ouvert .entete-cours { margin-bottom: 0; }
.cours-ouvert .entete-cours__corps { border-radius: 0 16px 0 0; border-bottom: 0; padding-bottom: .6rem; }
.sous-dossiers {
list-style: none; margin: 0 0 2rem; padding: 1rem 1.6rem 1.7rem;
background: var(--teinte-pale, var(--blanc)); border: 1px solid var(--teinte-trait, var(--trait)); border-top: 0;
border-radius: 0 0 16px 16px;
display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 196px), 1fr)); gap: .9rem;
}
.sous-dossiers li { display: flex; }
.sous-dossier {
flex: 1; display: grid; align-content: start; gap: .3rem;
background: var(--blanc); border: 1px solid var(--teinte-trait, var(--trait)); border-radius: 12px;
padding: 1rem 1.05rem 1.05rem; color: var(--encre); text-decoration: none;
transition: transform .16s ease, box-shadow .16s ease;
}
.sous-dossier:hover { color: var(--encre); transform: translateY(-3px); box-shadow: var(--ombre-drive); }
.sous-dossier__icone {
width: 2.3rem; height: 2.3rem; border-radius: 10px; display: grid; place-items: center; margin-bottom: .35rem;
background: var(--teinte-pale, var(--cyan-pale)); color: var(--encre);
border: 1px solid var(--teinte-trait, var(--trait));
}
.sous-dossier__icone .icone { width: 1.3rem; height: 1.3rem; }
.sous-dossier__titre { font: 700 .98rem/1.3 var(--titre); }
.sous-dossier__detail { font-size: .82rem; line-height: 1.45; color: var(--encre-douce); }
.sous-dossier__compte { margin-top: .45rem; font-size: .82rem; font-weight: 700; }
.sous-dossier__vide { font-weight: 400; color: var(--encre-douce); }
.sous-dossier__jauge { margin-top: .3rem; }
.sous-dossier__progres { font-size: .76rem; color: var(--encre-douce); }
/* ---- jauges et piste (SVG) ---- */
.jauge, .piste { display: block; height: 8px; border-radius: 99px; overflow: hidden; background: var(--jauge-fond); }
.jauge svg, .piste svg { display: block; width: 100%; height: 100%; }
.jauge--epaisse { height: 14px; }
.jauge--fine { height: 6px; }
.jauge__plein { fill: var(--teinte, var(--cyan)); }
.jauge__juste, .piste__juste { fill: var(--jauge-juste); }
.jauge__fausse, .piste__fausse { fill: var(--jauge-fausse); }
.jauge__sans, .piste__sans { fill: var(--jauge-sans); }
.piste { height: 12px; background: none; border-radius: 4px; }
.piste__a-venir { fill: var(--jauge-fond); }
.piste__actuelle { fill: var(--encre); }
/* ---- où j'en suis ---- */
.ou-j-en-suis {
background: var(--blanc); border: 1px solid var(--trait); border-radius: 16px;
padding: 1.3rem 1.5rem 1.2rem; margin: 0 0 1.2rem;
}
.ou-j-en-suis__titre { margin: 0 0 .8rem; font-size: 2.1rem; line-height: 1.1; }
.ou-j-en-suis__titre span { font-family: var(--texte); font-size: 1rem; font-weight: 400; color: var(--encre-douce); }
.legende { list-style: none; margin: .8rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.3rem; font-size: .88rem; }
.legende li { display: inline-flex; align-items: center; gap: .4rem; }
.legende li::before { content: ""; width: .7rem; height: .7rem; border-radius: 3px; background: var(--jauge-fond); }
.legende__juste::before { background: var(--jauge-juste) !important; }
.legende__fausse::before { background: var(--jauge-fausse) !important; }
.legende__sans::before { background: var(--jauge-sans) !important; }
.ou-j-en-suis__aide { margin: .7rem 0 0; font-size: .82rem; color: var(--encre-douce); }
.lancer { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: 1rem; margin: 0 0 1rem; }
.lancer__carte {
display: grid; align-content: start; gap: .7rem;
background: var(--blanc); border: 1px solid var(--trait); border-radius: 16px; padding: 1.2rem 1.3rem 1.3rem;
}
.lancer__carte h2 { margin: 0; font-size: 1.08rem; }
.lancer__carte p { margin: 0; font-size: .9rem; color: var(--encre-douce); }
.lancer__carte .actions-ligne { margin: .2rem 0 0; }
.lancer__carte > .bouton, .lancer__carte form .bouton { justify-self: start; }
.lancer__carte--reprise { border-left: 5px solid var(--cyan); }
.lancer__aide { font-size: .84rem !important; }
.tailles { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.tailles legend { font-size: .88rem; font-weight: 700; margin-bottom: .45rem; padding: 0; }
.tailles + .types-entrainement, .types-entrainement + .tailles { margin-top: .9rem; }
.tailles label { cursor: pointer; }
.tailles input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tailles span {
display: inline-block; min-width: 2.8rem; text-align: center; padding: .42rem .75rem; border-radius: 9px;
border: 1.5px solid var(--trait); font-weight: 700; font-size: .9rem; background: var(--blanc);
}
.tailles label:hover span { border-color: var(--cyan); }
.tailles input:checked + span { background: var(--encre); border-color: var(--encre); color: var(--blanc); }
.tailles input:focus-visible + span { outline: 3px solid var(--ambre); outline-offset: 2px; }
.section-drive { margin-top: 2.2rem; }
.section-drive > h2 { display: flex; align-items: center; gap: .55rem; font-size: 1.12rem; margin: 0 0 .8rem; }
.liens-impression { margin: 0; padding-left: 1.2rem; display: grid; gap: .3rem; }
.impression-choix {
display: grid; gap: 1.1rem; max-width: 48rem;
background: var(--blanc); border: 1px solid var(--trait); border-radius: 16px; padding: 1.2rem 1.3rem 1.3rem;
}
.impression-choix__groupe { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.impression-choix__groupe legend { float: left; width: 100%; font: 700 .88rem var(--titre); margin-bottom: .45rem; padding: 0; }
.impression-choix__groupe label { cursor: pointer; }
.impression-choix__groupe input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.impression-choix__groupe span {
display: inline-block; padding: .42rem .8rem; border-radius: 9px; border: 1.5px solid var(--trait);
font-size: .9rem; font-weight: 600; background: var(--blanc);
}
.impression-choix__groupe label:hover span { border-color: var(--cyan); }
.impression-choix__groupe input:checked + span { background: var(--encre); border-color: var(--encre); color: var(--blanc); }
.impression-choix__groupe input:focus-visible + span { outline: 3px solid var(--ambre); outline-offset: 2px; }
.impression-choix__pied { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; padding-top: .4rem; border-top: 1px solid var(--trait); }
.impression-choix__pied .champ__aide { margin: 0; }
.impression__guide {
display: grid; gap: .6rem; margin: 0 0 1.4rem; padding: 1rem 1.2rem; border-radius: 14px;
background: var(--cyan-pale); border: 1px solid var(--cyan);
}
.impression__guide-texte { font-size: .95rem; line-height: 1.6; }
.impression__guide .actions-ligne { margin: 0; }
/* ---- un entraînement : avancement ---- */
.avancement { max-width: 48rem; margin: 0 auto 1rem; }
.avancement__ligne { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1.2rem; margin-bottom: .6rem; }
.avancement__rang { margin: 0; color: var(--encre-douce); }
.avancement__rang strong { font: 700 2rem/1 var(--titre); color: var(--encre); }
.avancement__score { margin: 0; display: flex; gap: 1rem; font-size: .9rem; font-weight: 600; }
.avancement__juste { color: var(--juste); display: inline-flex; align-items: center; gap: .25rem; }
.avancement__fausse { color: var(--faux); display: inline-flex; align-items: center; gap: .25rem; }
.avancement form { margin-left: auto; }
.avancement__arreter { font-size: .85rem; color: var(--encre-douce); }
/* ---- la carte d'une question ---- */
.carte-question {
max-width: 48rem; background: var(--blanc);
border: 1px solid var(--trait); border-top: 5px solid var(--teinte, var(--cyan));
border-radius: 6px 6px 18px 18px; padding: 1.5rem 1.7rem 1.4rem; margin: 0 auto 1.5rem;
box-shadow: var(--ombre-drive);
}
.carte-question__consigne {
display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .7rem;
margin: 0 0 .7rem; font-size: .86rem; color: var(--encre-douce);
}
.carte-question__enonce {
font: 600 1.2rem/1.5 var(--texte); margin: 0 0 1.3rem; max-width: none; overflow-wrap: anywhere;
}
.reponses { border: 0; margin: 0 0 1.4rem; padding: 0; display: grid; gap: .6rem; }
.reponse {
position: relative; display: flex; align-items: flex-start; gap: .9rem; cursor: pointer;
padding: .8rem 1rem; border: 1.5px solid var(--trait); border-radius: 12px; background: var(--blanc);
transition: border-color .12s ease, background-color .12s ease;
}
.reponse input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.reponse:hover { border-color: var(--teinte-moyenne, var(--cyan)); }
.reponse:has(input:checked) { border-color: var(--teinte, var(--cyan)); background: var(--teinte-pale, var(--cyan-pale)); }
.reponse:has(input:focus-visible) { outline: 3px solid var(--ambre); outline-offset: 2px; }
.reponse__lettre {
flex: none; width: 1.9rem; height: 1.9rem; display: grid; place-items: center;
border-radius: 7px; border: 1.5px solid var(--trait); background: var(--papier);
font: 700 .82rem/1 var(--titre); color: var(--encre-douce);
}
.reponse:has(input[type="radio"]) .reponse__lettre { border-radius: 50%; }
.reponse:has(input:checked) .reponse__lettre { background: var(--teinte, var(--cyan)); border-color: var(--teinte, var(--cyan)); color: var(--teinte-texte, #fff); }
.reponse__texte { padding-top: .2rem; overflow-wrap: anywhere; }
.carte-question__pied { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.2rem; }
.raccourcis { margin: 0; font-size: .8rem; color: var(--encre-douce); }
kbd {
font: 600 .75rem/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
padding: .15rem .35rem; border-radius: 4px; border: 1px solid var(--trait); border-bottom-width: 2px; background: var(--blanc);
}
.carte-question__source { font-size: .84rem; color: var(--encre-douce); margin: 0 0 1rem; }
.etiquette {
display: inline-flex; align-items: center; font-size: .72rem; font-weight: 700; line-height: 1.4;
padding: .1rem .55rem; border-radius: 99px; background: var(--papier); color: var(--encre-douce); border: 1px solid var(--trait);
}
.etiquette--sans { background: var(--sans-fond); color: var(--sans); border-color: var(--sans-trait); }
/* ---- images des questions ---- */
.question__image {
display: block; max-width: 100%; max-height: 24rem; height: auto; margin: -.4rem 0 1.2rem;
border-radius: 10px; border: 1px solid var(--trait); background: #fff;
}
.reponse__image { display: block; max-width: 100%; max-height: 14rem; height: auto; margin-top: .3rem; border-radius: 8px; border: 1px solid var(--trait); background: #fff; }
.fiche-question__image { display: block; max-width: 22rem; max-height: 12rem; height: auto; margin: 0 0 .6rem; border-radius: 8px; border: 1px solid var(--trait); background: #fff; }
.fiche-question__vignette { display: block; max-width: 14rem; max-height: 8rem; height: auto; margin-top: .25rem; border-radius: 6px; border: 1px solid var(--trait); background: #fff; }
.impression__image { display: block; max-width: 70%; max-height: 9cm; height: auto; margin: .2rem 0 .5rem; }
.impression__vignette { display: block; max-width: 45%; max-height: 5cm; height: auto; margin: .15rem 0 .3rem; }
/* L'éditeur : ajouter / remplacer / retirer une image. */
.image-champ { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: .55rem; }
.image-champ--reponse { margin-top: .25rem; }
.image-champ__apercu { display: inline-flex; }
.image-champ__vignette { display: block; max-width: 16rem; max-height: 9rem; height: auto; border-radius: 8px; border: 1px solid var(--trait); background: #fff; }
.image-champ--reponse .image-champ__vignette { max-width: 10rem; max-height: 6rem; }
.image-champ__ajout {
display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
padding: .4rem .75rem; border-radius: 9px; border: 1.5px dashed var(--trait);
font-size: .86rem; font-weight: 700; color: var(--lien);
}
.image-champ__ajout:hover { border-color: var(--cyan); background: var(--cyan-pale); }
.image-champ__ajout input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.image-champ__ajout:focus-within { outline: 3px solid var(--ambre); outline-offset: 2px; }
.image-champ__ajout--petit { padding: .25rem .55rem; font-size: .78rem; }
.image-champ__retirer { display: inline-flex; align-items: center; gap: .3rem; font-size: .82rem; color: var(--encre-douce); cursor: pointer; }
.image-champ__retirer input { accent-color: var(--faux); }
.image-champ .depot__nom { margin: 0; font-size: .8rem; }
.ligne-reponse__contenu { display: grid; min-width: 0; }
.editeur__enonce { margin-bottom: 0; }
/* ---- la correction ---- */
.verdict {
display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; margin: 0 0 1.1rem;
padding: .7rem 1rem; border-radius: 12px; font: 700 1.05rem var(--titre);
}
.verdict .icone { width: 1.3rem; height: 1.3rem; }
.verdict small { font-family: var(--texte); font-weight: 400; font-size: .8rem; }
.verdict--j { background: var(--juste-fond); color: var(--juste); border: 1px solid var(--juste-trait); }
.verdict--f { background: var(--faux-fond); color: var(--faux); border: 1px solid var(--faux-trait); }
.verdict--s { background: var(--sans-fond); color: var(--sans); border: 1px solid var(--sans-trait); }
.corrige { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .55rem; }
.corrige li {
display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .85rem;
padding: .75rem 1rem; border: 1.5px solid var(--trait); border-radius: 12px;
}
.corrige__texte { display: grid; gap: .3rem; overflow-wrap: anywhere; }
.corrige__marques { display: flex; flex-wrap: wrap; gap: .4rem; }
.corrige__marque { display: inline-flex; align-items: center; gap: .25rem; font-size: .74rem; font-weight: 700; color: var(--encre-douce); }
.corrige__marque--bonne { color: var(--juste); }
.corrige li.est-choisie .reponse__lettre { background: var(--encre); border-color: var(--encre); color: var(--blanc); }
.corrige__bonne { border-color: var(--juste-trait) !important; background: var(--juste-fond); }
.corrige__bonne .reponse__lettre { background: var(--jauge-juste) !important; border-color: var(--jauge-juste) !important; color: #fff !important; }
.corrige__fausse { border-color: var(--faux-trait) !important; background: var(--faux-fond); }
.corrige__fausse .reponse__lettre { background: var(--jauge-fausse) !important; border-color: var(--jauge-fausse) !important; color: #fff !important; }
.corrige__part { display: flex; align-items: center; gap: .5rem; width: 7.5rem; font-size: .8rem; font-weight: 600; color: var(--encre-douce); }
.corrige__part .jauge { flex: 1; }
.corrige__part > span:last-child { width: 2.6rem; text-align: right; }
.collectif { font-size: .88rem; color: var(--encre-douce); margin: 0 0 1rem; }
.encart {
font-size: .9rem; padding: .75rem 1rem; border-radius: 12px; margin: 0 0 1rem;
background: var(--papier); border: 1px solid var(--trait); max-width: 48rem;
}
.encart--sans { background: var(--sans-fond); border-color: var(--sans-trait); }
.encart--cle { display: flex; gap: .6rem; align-items: flex-start; margin: 1.2rem 0; }
/* « Question piège » et élément qui résiste (19/10, Module de révision) */
.encart--piege, .encart--resiste { display: flex; gap: .55rem; align-items: flex-start; }
.encart--piege { background: var(--ambre-pale); border-color: var(--ambre); }
.encart--piege .icone { flex: none; margin-top: .1rem; color: var(--ambre); }
.encart--resiste .icone { flex: none; margin-top: .1rem; color: var(--lien); }
.encart--cle .icone { flex: none; margin-top: .15rem; color: var(--lien); }
.explication {
margin: 0 0 1rem; padding: .85rem 1.1rem; border-radius: 12px;
background: var(--papier); border-left: 4px solid var(--teinte, var(--cyan));
}
.explication p { margin: 0; }
.explication__titre { font: 700 .82rem var(--titre); margin-bottom: .25rem !important; }
/* ---- le bilan ---- */
.bilan {
max-width: 48rem; margin: 0 auto; background: var(--blanc); border: 1px solid var(--trait);
border-top: 5px solid var(--teinte, var(--cyan)); border-radius: 6px 6px 18px 18px;
padding: 1.6rem 1.7rem; box-shadow: var(--ombre-drive);
}
.bilan__surtitre { margin: 0 0 .3rem; font-weight: 700; color: var(--encre-douce); }
.bilan__score { margin: 0 0 .3rem; font-size: clamp(2.6rem, 8vw, 3.8rem); line-height: 1; }
.bilan__score span { font-size: .45em; color: var(--encre-douce); }
.bilan__texte { color: var(--encre-douce); }
.bilan .piste { margin: 0 0 1.2rem; }
.bilan__liste { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; gap: .1rem; }
.bilan__liste li { display: flex; gap: .6rem; align-items: flex-start; padding: .45rem 0; border-bottom: 1px solid var(--trait); font-size: .92rem; }
.bilan__liste li:last-child { border-bottom: 0; }
.bilan__liste .icone { margin-top: .15rem; }
.bilan__j .icone { color: var(--juste); }
.bilan__f .icone { color: var(--faux); }
.bilan__s .icone { color: var(--sans); }
/* ---- états vides ---- */
.vide {
text-align: center; padding: 2.6rem 1.5rem; border: 2px dashed var(--trait); border-radius: 16px;
background: var(--blanc); max-width: 48rem;
}
.vide__icone { width: 2.6rem; height: 2.6rem; color: var(--encre-douce); margin-bottom: .6rem; }
.vide h2 { margin: 0 0 .4rem; font-size: 1.15rem; }
.vide p { margin-left: auto; margin-right: auto; color: var(--encre-douce); }
.vide p:last-child { margin-bottom: 0; }
/* ---- l'éditeur de question (façon formulaire) ---- */
.page-etroite { max-width: 48rem; margin: 0 auto; }
.page-etroite--large { max-width: none; }
.editeur {
display: grid; gap: 1.5rem; margin: 0 0 1.4rem;
background: var(--blanc); border: 1px solid var(--trait); border-top: 6px solid var(--teinte, var(--cyan));
border-radius: 6px 6px 18px 18px; padding: 1.5rem 1.7rem 1.4rem; box-shadow: var(--ombre-drive);
}
.editeur__bloc { border: 0; margin: 0; padding: 0; min-width: 0; }
.editeur__libelle { display: block; font: 700 .9rem var(--titre); margin: 0 0 .5rem; padding: 0; }
.editeur__libelle span { font-family: var(--texte); font-weight: 400; color: var(--encre-douce); }
.editeur__enonce {
display: block; width: 100%; resize: vertical; min-height: 4.2rem;
font: 600 1.12rem/1.45 var(--texte); color: var(--encre);
background: var(--papier); border: 0; border-bottom: 2px solid var(--trait); border-radius: 8px 8px 0 0;
padding: .7rem .8rem;
}
.editeur__enonce:focus { outline: none; border-bottom-color: var(--teinte, var(--cyan)); }
.types { display: flex; flex-wrap: wrap; gap: .4rem; }
.types legend { margin-bottom: .5rem; }
.types__choix { cursor: pointer; }
.types__choix input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.types__choix span {
display: inline-block; padding: .45rem .85rem; border-radius: 9px; border: 1.5px solid var(--trait);
font-size: .9rem; font-weight: 600; background: var(--blanc);
}
.types__choix:hover span { border-color: var(--teinte-moyenne, var(--cyan)); }
.types__choix input:checked + span { background: var(--teinte, var(--cyan)); border-color: var(--teinte, var(--cyan)); color: var(--teinte-texte, #fff); }
.types__choix input:focus-visible + span { outline: 3px solid var(--ambre); outline-offset: 2px; }
.lignes-reponse { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.ligne-reponse {
display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: .65rem;
padding: .25rem .35rem; border-radius: 10px;
}
.ligne-reponse:has(.ligne-reponse__bonne input:checked) { background: var(--juste-fond); }
.ligne-reponse__bonne { position: relative; cursor: pointer; display: block; }
.ligne-reponse__bonne input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ligne-reponse__coche {
width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center;
border: 2px solid var(--trait); color: transparent; background: var(--blanc);
transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.ligne-reponse__coche .icone { width: 1.1rem; height: 1.1rem; }
.ligne-reponse__bonne:hover .ligne-reponse__coche { border-color: var(--jauge-juste); color: var(--juste-trait); }
.ligne-reponse__bonne input:checked + .ligne-reponse__coche { background: var(--jauge-juste); border-color: var(--jauge-juste); color: #fff; }
.ligne-reponse__bonne input:focus-visible + .ligne-reponse__coche { outline: 3px solid var(--ambre); outline-offset: 2px; }
.ligne-reponse__lettre { font: 700 .85rem var(--titre); color: var(--encre-douce); width: 1.1rem; text-align: center; }
.ligne-reponse__texte {
display: block; width: 100%; resize: none; overflow: hidden; min-height: 2.4rem;
font: inherit; font-size: 1rem; line-height: 1.45; color: var(--encre);
background: transparent; border: 0; border-bottom: 1.5px solid var(--trait); padding: .45rem .3rem;
}
.ligne-reponse__texte:focus { outline: none; border-bottom-color: var(--teinte, var(--cyan)); }
.ligne-reponse__fixe { padding: .45rem .3rem; font-weight: 600; }
.ligne-reponse__retirer {
width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center;
border: 0; background: none; color: var(--encre-douce); cursor: pointer;
}
.ligne-reponse__retirer:hover { background: var(--faux-fond); color: var(--faux); }
.bouton-ajout {
display: inline-flex; align-items: center; gap: .4rem; margin: .6rem 0 0 3.1rem;
padding: .5rem .9rem; border-radius: 10px; border: 1.5px dashed var(--trait); background: none;
font: inherit; font-size: .9rem; font-weight: 700; color: var(--lien); cursor: pointer;
}
.bouton-ajout:hover { border-color: var(--cyan); background: var(--cyan-pale); }
.editeur__vf { display: none; }
.editeur:has(input[name="type"][value="vf"]:checked) .editeur__vf { display: block; }
.editeur:has(input[name="type"][value="vf"]:checked) .editeur__qcm { display: none; }
.editeur__aide {
display: flex; gap: .7rem; align-items: flex-start; margin: 0; max-width: none;
font-size: .87rem; color: var(--encre-douce); background: var(--sans-fond);
border: 1px solid var(--sans-trait); border-radius: 12px; padding: .75rem .95rem;
}
.editeur__aide .icone { color: var(--sans); width: 1.3rem; height: 1.3rem; margin-top: .05rem; }
.editeur__plus summary { cursor: pointer; font: 700 .9rem var(--titre); color: var(--lien); }
.editeur__plus summary span { font-family: var(--texte); font-weight: 400; color: var(--encre-douce); }
.editeur__plus[open] summary { margin-bottom: .9rem; }
.editeur__plus .champ + .champ { margin-top: .9rem; }
.editeur__pied { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; padding-top: 1rem; border-top: 1px solid var(--trait); }
.zone-danger { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin: 1rem 0 0; }
.zone-danger form { margin: 0; }
.zone-danger .champ__aide { margin: 0; }
/* ---- gérer une banque ---- */
.recherche { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; margin: 0 0 1rem; }
.recherche__champ {
flex: 1 1 18rem; display: flex; align-items: center; gap: .5rem; padding: 0 .85rem;
border: 1px solid var(--trait); border-radius: 10px; background: var(--blanc); color: var(--encre-douce);
}
.recherche__champ input { flex: 1; border: 0; background: none; font: inherit; font-size: .95rem; padding: .62rem 0; color: var(--encre); min-width: 0; }
.recherche__champ input:focus { outline: none; }
.recherche__champ:focus-within { border-color: var(--cyan); outline: 3px solid var(--cyan-pale); }
.filtres { display: inline-flex; flex-wrap: wrap; gap: .3rem; }
.filtres button {
font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer;
padding: .45rem .8rem; border-radius: 99px; border: 1px solid var(--trait); background: var(--blanc); color: var(--encre-douce);
}
.filtres button:hover { color: var(--encre); border-color: var(--cyan); }
.filtres button[aria-pressed="true"] { background: var(--encre); border-color: var(--encre); color: var(--blanc); }
.resultats-recherche { font-size: .88rem; color: var(--encre-douce); }
.fiches-question { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.fiche-question {
background: var(--blanc); border: 1px solid var(--trait); border-radius: 14px; padding: 1rem 1.2rem .8rem;
scroll-margin-top: 100px;
}
.fiche-question:target { border-color: var(--cyan); outline: 3px solid var(--cyan-pale); }
.fiche-question__tete { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .5rem; margin-bottom: .55rem; }
.fiche-question__rang { font: 700 .8rem var(--titre); color: var(--encre-douce); min-width: 1.6rem; }
.fiche-question__stat { margin-left: auto; font-size: .78rem; color: var(--encre-douce); }
.fiche-question__enonce { font-weight: 600; margin: 0 0 .55rem; max-width: none; overflow-wrap: anywhere; }
.fiche-question__reponses { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
.fiche-question__reponses li { display: flex; align-items: center; gap: .6rem; font-size: .92rem; padding: .18rem 0; overflow-wrap: anywhere; }
.fiche-question__reponses .reponse__lettre { width: 1.5rem; height: 1.5rem; font-size: .72rem; }
.fiche-question__reponses .est-bonne { color: var(--juste); font-weight: 600; }
.fiche-question__reponses .est-bonne .reponse__lettre { background: var(--jauge-juste); border-color: var(--jauge-juste); color: #fff; }
.fiche-question__coche { color: var(--juste); }
.fiche-question__plus { font-size: .85rem; color: var(--encre-douce); margin: .5rem 0 0; }
.fiche-question__pied {
display: flex; flex-wrap: wrap; align-items: center; gap: .2rem 1rem;
margin-top: .75rem; padding-top: .55rem; border-top: 1px solid var(--trait); font-size: .82rem;
}
.fiche-question__auteur { color: var(--encre-douce); margin-right: auto; }
.fiche-question__pied .bouton-lien { font-size: .84rem; }
/* ---- import ---- */
.import { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: 1.5rem; align-items: start; }
.import__saisie { display: grid; gap: .8rem; }
.import__regles {
background: var(--blanc); border: 1px solid var(--trait); border-radius: 14px; padding: 1.1rem 1.2rem;
font-size: .88rem; position: sticky; top: calc(var(--entete-h, 68px) + 4.2rem);
}
.import__regles h2 { margin: 0 0 .6rem; font-size: 1rem; }
.import__regles ol { margin: 0; padding-left: 1.2rem; display: grid; gap: .45rem; }
.champ__code, .champ textarea.champ__code { font: .92rem/1.55 ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
/* ---- listes à deux colonnes (quizz, documents) ---- */
.colonnes-drive { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 1.8rem; align-items: start; }
.colonnes-drive__cote { position: sticky; top: calc(var(--entete-h, 68px) + 4.2rem); }
.liste-entete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; margin: 0 0 1rem; }
.liste-entete__titre { margin: 0; font-size: 1.15rem; }
.panneau-ajout {
display: grid; gap: .9rem; background: var(--blanc); border: 1px solid var(--trait);
border-radius: 16px; padding: 1.2rem 1.3rem 1.3rem;
}
.panneau-ajout h2 { display: flex; align-items: center; gap: .45rem; margin: 0; font-size: 1.05rem; }
.panneau-ajout .bouton { justify-self: start; }
.panneau-ajout .champ__aide { margin: 0; }
.champ__facultatif { font-family: var(--texte); font-weight: 400; color: var(--encre-douce); }
.champ select {
font: inherit; font-size: 1rem; color: var(--encre);
background: var(--papier); border: 1px solid var(--trait); border-radius: 8px; padding: .65rem .7rem; width: 100%;
}
.cartes-quiz { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.carte-quiz {
display: grid; gap: .5rem; background: var(--blanc); border: 1px solid var(--trait);
border-radius: 14px; padding: 1.1rem 1.25rem 1.05rem; scroll-margin-top: 100px;
}
.carte-quiz__haut { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .3rem 1rem; }
.carte-quiz__titre { margin: 0; font-size: 1.06rem; }
.carte-quiz__titre a { color: var(--encre); text-decoration: none; }
.carte-quiz__titre a:hover { color: var(--lien); text-decoration: underline; }
.carte-quiz__description { margin: 0; font-size: .92rem; }
.carte-quiz__meta { margin: 0; font-size: .82rem; color: var(--encre-douce); }
.carte-quiz__progres { display: flex; align-items: center; gap: .7rem; font-size: .8rem; color: var(--encre-douce); }
.carte-quiz__progres .jauge { flex: 1; max-width: 16rem; }
.carte-quiz__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-top: .2rem; }
.carte-quiz__actions form { margin: 0; }
.carte-quiz__actions .bouton { padding: .55rem 1rem; font-size: .88rem; }
/* ---- notes en étoiles ---- */
.note { display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; color: var(--encre-douce); white-space: nowrap; }
.note--vide { font-style: italic; }
.note__etoiles { letter-spacing: .05em; font-size: 1rem; line-height: 1; }
.note__etoile { color: var(--jauge-fond); }
.note__etoile.est-pleine { color: var(--etoile); }
.noter { display: inline-flex; align-items: center; gap: .5rem; margin: 0; }
.noter__libelle { font-size: .8rem; color: var(--encre-douce); }
.noter__etoiles { display: inline-flex; flex-direction: row-reverse; }
.noter__etoile {
border: 0; background: none; cursor: pointer; padding: .1rem .08rem;
font-size: 1.25rem; line-height: 1; color: var(--jauge-fond);
}
.noter__etoile.est-pleine { color: var(--etoile); }
.noter__etoiles:hover .noter__etoile { color: var(--jauge-fond); }
.noter__etoiles .noter__etoile:hover, .noter__etoiles .noter__etoile:hover ~ .noter__etoile { color: var(--etoile); }
.noter__etoile:focus-visible { outline: 2px solid var(--ambre); border-radius: 4px; }
/* ---- documents ---- */
.documents { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.document {
display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .3rem 1rem;
background: var(--blanc); border: 1px solid var(--trait); border-radius: 14px; padding: 1.05rem 1.2rem;
scroll-margin-top: 100px;
}
.document:target { border-color: var(--cyan); outline: 3px solid var(--cyan-pale); }
.document__vignette {
grid-row: span 3; width: 3.1rem; height: 3.9rem; border-radius: 4px 12px 4px 4px; position: relative;
background: var(--teinte-pale, var(--papier)); border: 1px solid var(--teinte-trait, var(--trait));
display: grid; place-items: end center; padding-bottom: .45rem;
font: 700 .62rem var(--titre); color: var(--encre-douce); letter-spacing: .04em;
}
.document__vignette::before {
content: ""; position: absolute; top: -1px; right: -1px; width: .95rem; height: .95rem;
background: var(--teinte-trait, var(--trait)); border-radius: 0 12px 0 4px;
}
.document__haut { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .2rem 1rem; }
.document__titre { margin: 0; font-size: 1.04rem; overflow-wrap: anywhere; }
.document > :not(.document__vignette) { grid-column: 2; }
.document__meta { margin: 0; font-size: .82rem; color: var(--encre-douce); }
.document__description { margin: .2rem 0 0; font-size: .92rem; max-width: 70ch; }
.document__actions {
grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-top: .45rem;
}
.document__actions form { margin: 0; }
.document__actions .bouton { padding: .5rem .95rem; font-size: .86rem; }
.document__origine { grid-column: 2; margin: .2rem 0 0; font-size: .8rem; color: var(--encre-douce); }
.document__titre a { color: var(--encre); text-decoration: none; }
.document__titre a:hover { color: var(--lien); text-decoration: underline; }
.document__gestion { grid-column: 2; margin-top: .4rem; border-top: 1px solid var(--trait); padding-top: .5rem; }
.document__gestion summary { cursor: pointer; display: inline-flex; align-items: center; gap: .35rem; font-size: .86rem; font-weight: 600; color: var(--lien); }
.document__gestion[open] summary { margin-bottom: .8rem; }
.document__formulaire { display: grid; gap: .8rem; max-width: 34rem; margin-bottom: .6rem; }
.document__formulaire .actions-ligne { margin: 0; }
.documents__note { display: flex; gap: .45rem; align-items: flex-start; margin-top: 1rem; max-width: 60ch; }
.documents__note .icone { margin-top: .1rem; }
.depot__fichier input[type="file"] {
width: 100%; font: inherit; font-size: .9rem; color: var(--encre);
padding: .8rem; border: 1.5px dashed var(--trait); border-radius: 10px; background: var(--papier);
}
.depot__fichier input[type="file"]:hover { border-color: var(--cyan); }
.depot__fichier input[type="file"]::file-selector-button {
font: inherit; font-weight: 700; font-size: .86rem; cursor: pointer; margin-right: .7rem;
padding: .45rem .8rem; border: 0; border-radius: 8px; background: var(--encre); color: var(--blanc);
}
.consentement { display: flex; gap: .6rem; align-items: flex-start; font-size: .84rem; line-height: 1.45; }
.consentement input { margin-top: .2rem; accent-color: var(--cyan); flex: none; }
/* ---- administration : retrouver un téléchargement ---- */
.trace { background: var(--blanc); border: 1px solid var(--trait); border-radius: 14px; padding: 1.1rem 1.3rem; max-width: 48rem; }
.trace dl { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1.2rem; margin: 0; }
.trace dt { font-weight: 700; font-size: .9rem; }
.trace dd { margin: 0; }
.chiffres-admin { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .8rem; margin: 0 0 1.5rem; }
.chiffres-admin div { background: var(--blanc); border: 1px solid var(--trait); border-radius: 12px; padding: .8rem 1rem; }
.chiffres-admin strong { display: block; font: 700 1.35rem var(--titre); }
.chiffres-admin span { font-size: .82rem; color: var(--encre-douce); }
/* ---- génériques du drive ---- */
.formulaire--large { max-width: 52rem; }
.champ textarea {
font: inherit; font-size: 1rem; line-height: 1.5; color: var(--encre);
background: var(--papier); border: 1px solid var(--trait); border-radius: 8px;
padding: .7rem .8rem; width: 100%; resize: vertical;
}
.champ textarea:focus, .champ select:focus { border-color: var(--cyan); outline: 3px solid var(--cyan-pale); outline-offset: 0; }
.actions-ligne { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: 1rem 0; }
.actions-ligne form { margin: 0; }
.bouton--valider { background: #23733d; }
.bouton--valider:hover { background: #2e8a4b; }
.message .icone { margin-right: .3rem; }
/* ---- impression d'une banque ---- */
.impression { max-width: 52rem; }
.impression__entete { border-bottom: 2px solid var(--teinte, var(--cyan)); padding-bottom: .9rem; margin-bottom: 1.2rem; }
.impression__cours { margin: 0 0 .3rem; font-size: .9rem; color: var(--encre-douce); display: flex; align-items: center; gap: .4rem; }
.impression__titre { margin: 0 0 .2rem; font-size: 1.8rem; }
.impression__quoi { margin: 0 0 .5rem; }
.impression__marque { margin: 0; font-size: .8rem; color: var(--encre-douce); }
.impression__questions { display: grid; gap: 1.1rem; padding-left: 1.6rem; }
.impression__question { break-inside: avoid; }
.impression__enonce { font-weight: 600; margin: 0 0 .35rem; max-width: none; }
.impression__options { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
.impression__options li { display: flex; gap: .45rem; }
.impression__bonne { font-weight: 700; }
.impression__explication { font-size: .88rem; color: var(--encre-douce); margin: .35rem 0 0; }
/* ---- petits écrans ---- */
@media (max-width: 900px) {
.colonnes-drive, .import { grid-template-columns: minmax(0, 1fr); }
.colonnes-drive__cote, .import__regles { position: static; }
}
@media (max-width: 640px) {
.barre-drive { margin-top: -.4rem; }
.moi__nom { display: none; }
.moi summary { padding-right: .45rem; }
.chemises { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem .7rem; }
.chemise__corps { min-height: 7.6rem; padding: .85rem .85rem .8rem; }
.chemise__code { font-size: .98rem; }
.chemise__nom { font-size: .8rem; }
.entete-cours__corps { padding: 1.05rem 1.1rem 1.15rem; }
.sous-dossiers { padding: .8rem 1rem 1.2rem; grid-template-columns: minmax(0, 1fr); }
.sous-dossier { grid-template-columns: auto minmax(0, 1fr); column-gap: .85rem; }
.sous-dossier__icone { grid-row: span 4; margin: 0; }
.carte-question, .editeur, .bilan { padding: 1.15rem 1.05rem 1.1rem; }
.carte-question__enonce { font-size: 1.08rem; }
.corrige li { grid-template-columns: auto minmax(0, 1fr); }
.corrige__part { grid-column: 2; width: auto; }
.ligne-reponse { gap: .45rem; padding: .2rem; }
.bouton-ajout { margin-left: 2.6rem; }
.document { grid-template-columns: minmax(0, 1fr); }
.document__vignette { display: none; }
.document > :not(.document__vignette) { grid-column: 1; }
.liste-entete__outils { width: 100%; }
.bascule-vue span { display: none; }
.avancement__rang strong { font-size: 1.7rem; }
}
@media print {
.entete, .pied, .lateral, .no-print, .saut-contenu, .barre-drive, .bascule-theme { display: none !important; }
body { background: #fff; background-image: none; color: #000; font-size: 11pt; }
.grille { display: block; padding: 0; }
.titre-page { font-size: 16pt; }
a { color: #000; text-decoration: none; }
.impression__entete { border-bottom-color: #000; }
}
/* Correctif mobile (10/10) : la marque ne se rétrécissait pas (flex: none) et sa
signature débordait — toute page défilait de côté sur téléphone. */
@media (max-width: 1080px) {
.marque { flex: 0 1 auto; min-width: 0; }
}
.bouton { line-height: 1.2; }
.barre-compte__actions { align-items: center; }
/* ======================================================================
11/10 (suite) — commentaires, notifications, signalements, anciens cours
====================================================================== */
/* ---- la cloche, dans la barre du drive ---- */
.barre-drive { gap: .75rem; }
.barre-drive .moi { margin-left: 0; }
.cloche {
position: relative; flex: none; display: inline-grid; place-items: center; margin-left: auto;
width: 2.45rem; height: 2.45rem; border-radius: 50%; border: 1px solid var(--trait);
background: var(--blanc); color: var(--encre-douce); text-decoration: none;
}
.cloche:hover { color: var(--lien); border-color: var(--cyan); }
.cloche__icone { width: 1.25rem; height: 1.25rem; }
.cloche.a-du-nouveau { color: var(--encre); }
.cloche__nombre {
position: absolute; top: -.35rem; right: -.35rem; min-width: 1.25rem; height: 1.25rem; padding: 0 .3rem;
border-radius: 99px; background: var(--jauge-fausse); color: #fff; font: 700 .68rem var(--titre);
display: grid; place-items: center; border: 2px solid var(--fond, #fff);
}
/* ---- notifications ---- */
.notifications { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .55rem; }
.notification {
display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .9rem; align-items: start;
background: var(--blanc); border: 1px solid var(--trait); border-radius: 12px; padding: .85rem 1rem;
}
.notification.est-nouvelle { border-left: 4px solid var(--jauge-fausse); }
.notification__icone {
width: 2.1rem; height: 2.1rem; border-radius: 50%; display: grid; place-items: center;
background: var(--papier); color: var(--encre-douce);
}
.notification__icone .icone { width: 1.15rem; height: 1.15rem; }
.notification--moderation .notification__icone, .notification--signalement .notification__icone { background: var(--sans-fond); color: var(--sans); }
.notification--anciens .notification__icone { background: var(--faux-fond); color: var(--faux); }
.notification__corps p { margin: 0; }
.notification__texte { font-size: .95rem; line-height: 1.45; }
.notification__texte a { color: var(--encre); text-decoration: none; }
.notification__texte a:hover { color: var(--lien); text-decoration: underline; }
.notification__nombre { margin-left: .35rem; font-size: .78rem; font-weight: 700; color: var(--encre-douce); }
.notification__meta { margin-top: .2rem !important; font-size: .78rem; color: var(--encre-douce); }
.titre-page--drive .icone { width: 1.2em; height: 1.2em; vertical-align: -.2em; margin-right: .35rem; }
/* ---- commentaires ---- */
.document--seul { margin-bottom: 1.4rem; }
.document--seul .document__titre { font-size: 1.25rem; margin: 0; }
.document__commentaires.a-des-commentaires { color: var(--encre); }
.fil-commentaires { max-width: 48rem; }
.fil-commentaires__titre { display: flex; align-items: center; gap: .5rem; font-size: 1.15rem; margin: 0 0 .3rem; }
.fil-commentaires__aide { margin: 0 0 1rem; font-size: .88rem; color: var(--encre-douce); }
.commentaires { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; gap: .65rem; }
.commentaire {
background: var(--blanc); border: 1px solid var(--trait); border-radius: 14px; padding: .8rem 1rem .6rem;
scroll-margin-top: 100px;
}
.commentaire:target { border-color: var(--cyan); outline: 3px solid var(--cyan-pale); }
.commentaire--mien { background: var(--cyan-pale); }
.commentaire--auteur { border-left: 4px solid var(--teinte, var(--cyan)); }
.commentaire__tete { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; font-size: .84rem; }
.commentaire__nom { font-weight: 700; color: var(--encre); }
.commentaire__date { color: var(--encre-douce); }
.commentaire__texte { margin: .35rem 0 .2rem; line-height: 1.55; overflow-wrap: anywhere; }
.commentaire__supprimer { font-size: .8rem; padding: .15rem 0; }
.commentaire-form { display: grid; gap: .7rem; }
.commentaire-form textarea { width: 100%; }
/* ---- signalements ---- */
.message--info { border-color: var(--sans-trait); background: var(--sans-fond); color: var(--sans); }
.bouton--attention { background: var(--sans-fond); color: var(--sans); border: 1px solid var(--sans-trait); }
.bouton--attention:hover { background: var(--sans-trait); color: var(--encre); }
.bouton--petit { padding: .4rem .8rem; font-size: .84rem; }
.bouton-lien--discret { color: var(--encre-douce); font-weight: 600; }
.bouton-lien--discret:hover { color: var(--sans); }
.icone--petite { width: .95rem; height: .95rem; }
.etiquette--signalee { background: var(--sans-fond); color: var(--sans); border-color: var(--sans-trait); gap: .3rem; }
.filtres .a-du-nouveau { border-color: var(--sans-trait); background: var(--sans-fond); color: var(--sans); }
.signalements {
margin: .6rem 0 .4rem; padding: .7rem .9rem; border-radius: 10px;
background: var(--sans-fond); border: 1px solid var(--sans-trait); font-size: .88rem;
}
.signalements__titre { display: flex; align-items: center; gap: .4rem; margin: 0 0 .35rem !important; font-weight: 700; color: var(--sans); }
.signalements ul { margin: 0 0 .5rem; padding-left: 1.1rem; }
.signalements li + li { margin-top: .25rem; }
.signalements small { color: var(--encre-douce); }
.signalements form { margin: 0; }
.question-citee {
margin: 0 0 1.2rem; padding: .9rem 1.1rem; border-radius: 12px;
background: var(--blanc); border: 1px solid var(--trait); border-left: 4px solid var(--teinte, var(--cyan));
}
.question-citee p { margin: 0 0 .5rem; font-weight: 600; }
.question-citee ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; font-size: .92rem; }
.question-citee li.est-bonne { color: var(--juste); font-weight: 600; }
.question-citee footer { margin-top: .5rem; font-size: .8rem; color: var(--encre-douce); }
.motifs { display: grid; gap: .3rem; border: 0; padding: 0; margin: 0; min-width: 0; }
.motifs legend { padding: 0; margin-bottom: .2rem; }
.motif { display: flex; align-items: center; gap: .6rem; padding: .5rem .7rem; border-radius: 10px; border: 1px solid var(--trait); background: var(--blanc); cursor: pointer; }
.motif:has(input:checked) { border-color: var(--sans); background: var(--sans-fond); }
.motif input { margin: 0; flex: none; width: 1.05rem; height: 1.05rem; }
.motif span { text-align: left; }
.carte-question__auteur { margin: .6rem 0 0; font-size: .8rem; color: var(--encre-douce); }
/* ---- titulaire et modération d'un cours ---- */
.entete-cours__titulaire { margin: .3rem 0 0; font-size: .86rem; color: var(--encre-douce); max-width: none; }
.entete-cours__pi { opacity: .85; }
.moderation-cours { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.1rem 0 0; }
.moderation-cours__lien {
display: inline-flex; align-items: center; gap: .45rem; padding: .55rem .9rem; border-radius: 99px;
background: var(--blanc); border: 1px solid var(--trait); color: var(--encre); font-size: .88rem; font-weight: 600; text-decoration: none;
}
.moderation-cours__lien:hover { border-color: var(--cyan); color: var(--lien); }
.moderation-cours__lien .icone { color: var(--sans); }
/* ---- anciens cours ---- */
.encart--anciens { display: flex; flex-wrap: wrap; gap: .4rem .8rem; align-items: center; }
.encart--anciens .icone { color: var(--encre-douce); }
.anciens-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.anciens-liste__element {
display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .6rem 1rem;
background: var(--blanc); border: 1px solid var(--trait); border-radius: 12px; padding: .8rem 1rem; font-size: .92rem;
}
.anciens-liste__element form { margin: 0; }
.documents--anciens .document { opacity: .96; }
/* ---- administration ---- */
.titulaires-attente { list-style: none; margin: .8rem 0 1rem; padding: 0; display: grid; gap: .6rem; }
.titulaires-attente__element {
display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .6rem 1rem;
background: var(--sans-fond); border: 1px solid var(--sans-trait); border-radius: 12px; padding: .85rem 1rem; font-size: .92rem;
}
.titulaires-attente__element form { margin: 0; }
.bloc-replie { margin: .6rem 0 0; font-size: .9rem; }
.bloc-replie summary { cursor: pointer; color: var(--lien); font-weight: 600; }
.liste-simple { margin: .5rem 0 0; padding-left: 1.2rem; columns: 2; column-gap: 2rem; font-size: .88rem; }
.liste-simple li { break-inside: avoid; margin-bottom: .2rem; }
.liste-simple--equipes { columns: 1; }
.equipe-annees { list-style: none; margin: .15rem 0 .45rem; padding: 0 0 0 .2rem; color: var(--encre-douce); }
.equipe-annees small { color: var(--encre-douce); }
.archives { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.archives__entree { background: var(--blanc); border: 1px solid var(--trait); border-radius: 12px; padding: .9rem 1.1rem; font-size: .9rem; }
.archives__tete { margin-bottom: .5rem; }
.archives__documents { margin: 0 0 .5rem; padding-left: 1.1rem; }
.archives__documents a { display: inline-flex; align-items: center; gap: .3rem; font-weight: 600; }
.archives__reste { margin: 0; font-size: .82rem; color: var(--encre-douce); }
@media (max-width: 640px) {
.liste-simple { columns: 1; }
.cloche { width: 2.2rem; height: 2.2rem; }
.moi__nom { display: none; }
}
/* ---- documents : vignettes, formats, tuiles / liste (11/10 soir) ---- */
.liste-entete__outils { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .7rem; }
.bascule-vue button {
display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .6rem; border: 0; border-radius: 8px;
background: transparent; color: var(--encre-douce); font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer;
}
.bascule-vue button:hover { color: var(--encre); background: var(--papier); }
.bascule-vue button[aria-pressed="true"] { background: var(--encre); color: var(--blanc); }
.bascule-vue button .icone { width: 1rem; height: 1rem; }
.bascule-vue button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; }
/* La vignette = la première page du document, dans SON format (A4 debout, slide
couchée…), jamais étirée à la hauteur de la ligne (19/10) : elle se cale en haut
et l'image garde ses proportions ; une page couchée (paysage) est plus large. */
.document__vignette--image {
display: block; width: 5.4rem; height: auto; align-self: start; justify-self: start; padding: 0; border-radius: 6px; overflow: hidden;
background: #fff; border: 1px solid var(--trait); box-shadow: 0 1px 3px rgb(16 36 58 / .08);
}
.document__vignette--image.document__vignette--paysage { width: 7.4rem; }
.document__vignette--image::before { display: none; }
.document__vignette--image img { display: block; width: 100%; height: auto; }
.document__vignette--office { background: var(--teinte-pale, var(--papier)); }
.document__vignette--texte::after, .document__vignette--image::after { content: none; }
.document--attente { border-style: dashed; }
.document__attente {
grid-column: 2; display: flex; gap: .4rem; align-items: flex-start; margin: .2rem 0 0;
font-size: .82rem; color: var(--encre-douce);
}
.document__attente .icone { flex: none; margin-top: .1rem; }
/* vue liste : une ligne par document (règles « .document > … » : plus précises que le :not() du mode tuiles) */
html[data-vue-documents="liste"] .documents { gap: 0; border: 1px solid var(--trait); border-radius: 14px; background: var(--blanc); overflow: hidden; }
html[data-vue-documents="liste"] .document {
/* Le titre et la ligne d'infos gardent au moins la moitié de la largeur : les actions
(ouvrir, télécharger, merci, note, commenter) passent sur deux lignes plutôt que
d'écraser le texte en colonne (retour de Matthias, 19/10). */
grid-template-columns: auto minmax(0, 1fr) fit-content(46%); grid-template-areas: "vignette haut actions" "vignette meta actions";
gap: .1rem .9rem; align-items: center; padding: .6rem .9rem; border: 0; border-bottom: 1px solid var(--trait); border-radius: 0;
}
html[data-vue-documents="liste"] .document:last-child { border-bottom: 0; }
html[data-vue-documents="liste"] .document:target { outline: none; background: var(--cyan-pale); }
html[data-vue-documents="liste"] .document > .document__vignette { grid-area: vignette; width: 2.2rem; height: 2.8rem; font-size: .5rem; padding-bottom: .25rem; border-radius: 3px 8px 3px 3px; }
html[data-vue-documents="liste"] .document > .document__vignette::before { width: .6rem; height: .6rem; border-radius: 0 8px 0 3px; }
html[data-vue-documents="liste"] .document > .document__vignette--image { width: 2.2rem; height: auto; align-self: start; }
html[data-vue-documents="liste"] .document > .document__vignette--image.document__vignette--paysage { width: 3.6rem; }
html[data-vue-documents="liste"] .document > .document__haut { grid-area: haut; gap: .2rem .6rem; }
html[data-vue-documents="liste"] .document > .document__haut .document__titre { font-size: .95rem; }
html[data-vue-documents="liste"] .document > .document__meta { grid-area: meta; font-size: .76rem; }
html[data-vue-documents="liste"] .document > .document__description, html[data-vue-documents="liste"] .document > .document__origine, html[data-vue-documents="liste"] .document > .document__attente { display: none; }
html[data-vue-documents="liste"] .document > .document__actions { grid-area: actions; margin: 0; gap: .3rem .4rem; flex-wrap: wrap; justify-content: flex-end; }
html[data-vue-documents="liste"] .document > .document__actions .bouton { padding: .4rem .6rem; font-size: 0; gap: 0; }
html[data-vue-documents="liste"] .document > .document__actions .bouton .icone { width: 1rem; height: 1rem; }
html[data-vue-documents="liste"] .document > .document__actions .bouton-lien { font-size: .78rem; }
html[data-vue-documents="liste"] .document > .document__actions .noter { transform: scale(.85); transform-origin: left center; }
html[data-vue-documents="liste"] .document > .document__gestion { grid-column: 1 / -1; grid-row: 3; margin-top: .2rem; padding-top: .3rem; }
html[data-vue-documents="liste"] .document > .document__gestion summary { font-size: .78rem; }
@media (max-width: 640px) {
html[data-vue-documents="liste"] .document { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "haut actions" "meta actions"; }
html[data-vue-documents="liste"] .document > .document__actions .bouton-lien, html[data-vue-documents="liste"] .document > .document__actions .noter { display: none; }
}
/* ---- cartes recto / verso (11/10 soir) ---- */
.section-cartes__nombre { font: 400 .9rem var(--texte); color: var(--encre-douce); margin-left: .3rem; }
.section-cartes__progres { display: flex; align-items: center; gap: .8rem; margin: .4rem 0 .9rem; font-size: .84rem; color: var(--encre-douce); }
.section-cartes__progres .jauge { flex: 1; max-width: 22rem; }
.ou-j-en-suis--cartes { margin-bottom: 1.4rem; }
.cartes-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; counter-reset: carte; }
.carte-ligne {
display: grid; grid-template-columns: 1.4rem minmax(0, 1fr) minmax(0, 1fr); gap: .3rem .9rem; align-items: start;
background: var(--blanc); border: 1px solid var(--trait); border-left: 4px solid var(--teinte, var(--cyan)); border-radius: 12px; padding: .8rem 1rem;
scroll-margin-top: 100px;
}
.carte-ligne:target { outline: 3px solid var(--cyan-pale); }
.carte-ligne__etat { display: inline-flex; margin-top: .15rem; color: var(--encre-douce); }
.carte-ligne__etat .icone { width: 1rem; height: 1rem; }
.carte-ligne--sue .carte-ligne__etat { color: var(--jauge-juste); }
.carte-ligne--ratee .carte-ligne__etat { color: var(--jauge-fausse); }
.carte-ligne__recto { font-weight: 600; }
.carte-ligne__verso { color: var(--encre); border-left: 1px solid var(--trait); padding-left: .9rem; }
.carte-ligne__face .carte__texte { margin: 0; font-size: .95rem; overflow-wrap: anywhere; }
.carte-ligne__face .carte__image { display: block; max-width: 14rem; max-height: 9rem; border-radius: 6px; margin-bottom: .3rem; }
.carte-ligne__gestion { grid-column: 2 / -1; border-top: 1px solid var(--trait); padding-top: .4rem; margin-top: .2rem; }
.carte-ligne__gestion summary { cursor: pointer; display: inline-flex; align-items: center; gap: .35rem; font-size: .82rem; font-weight: 600; color: var(--lien); }
.carte-ligne__gestion[open] summary { margin-bottom: .6rem; }
.carte-editeur { display: grid; gap: .8rem; }
.carte-editeur__faces { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .8rem; }
.carte-editeur__face textarea { width: 100%; }
.carte-editeur .image-champ { margin-top: .35rem; }
.panneau-ajout--details { display: block; }
.panneau-ajout--details summary { cursor: pointer; list-style: none; }
.panneau-ajout--details summary::-webkit-details-marker { display: none; }
.panneau-ajout--details summary h2::after { content: "▾"; margin-left: auto; font-size: .9rem; color: var(--encre-douce); }
.panneau-ajout--details[open] summary h2::after { content: "▴"; }
.panneau-ajout--details[open] summary { margin-bottom: .9rem; }
.panneau-ajout--details form { display: grid; gap: .8rem; }
.carte-apprendre { max-width: 44rem; margin: 0 auto 1.5rem; }
.carte-apprendre__carte {
display: block; min-height: 16rem; background: var(--blanc); color: inherit; text-decoration: none;
border: 1px solid var(--trait); border-top: 5px solid var(--teinte, var(--cyan)); border-radius: 6px 6px 18px 18px;
padding: 1.4rem 1.6rem 1.2rem; box-shadow: var(--ombre-drive); cursor: pointer; position: relative;
transition: transform .15s ease;
}
.carte-apprendre__carte:hover { transform: translateY(-2px); }
.carte-apprendre__carte:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
.carte-apprendre__face { display: flex; flex-direction: column; min-height: 13rem; }
.carte-apprendre__face[hidden], .carte-apprendre__reponses[hidden] { display: none; }
.carte-apprendre__etiquette { font: 700 .72rem var(--titre); letter-spacing: .08em; text-transform: uppercase; color: var(--encre-douce); margin-bottom: 1rem; }
.carte-apprendre__verso .carte-apprendre__etiquette { color: var(--lien); }
.carte-apprendre .carte__face-contenu { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: .8rem; }
.carte-apprendre .carte__texte { margin: 0; font: 600 1.45rem/1.4 var(--texte); overflow-wrap: anywhere; }
.carte-apprendre .carte__texte--long { font-size: 1.08rem; font-weight: 500; text-align: left; }
.carte-apprendre .carte__image { max-width: 100%; max-height: 18rem; border-radius: 8px; }
.carte-apprendre__indice { display: inline-flex; align-items: center; gap: .35rem; align-self: center; margin-top: 1rem; font-size: .84rem; font-weight: 600; color: var(--lien); }
.carte-apprendre__reponses { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; margin-top: 1rem; }
.carte-apprendre__reponses kbd { margin-left: .3rem; padding: .05rem .35rem; border-radius: 4px; font: 600 .7rem var(--texte); background: rgb(255 255 255 / .22); color: inherit; }
.carte-apprendre__reponses .bouton--secondaire kbd { background: var(--papier); color: var(--encre-douce); }
.carte-apprendre__aide { text-align: center; margin: .8rem 0 0; font-size: .8rem; color: var(--encre-douce); }
.bilan--cartes .bilan__texte { max-width: 44ch; margin-left: auto; margin-right: auto; }
.impression__cartes { width: 100%; border-collapse: collapse; margin-top: 1rem; font-size: 10.5pt; }
.impression__cartes th { text-align: left; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--encre-douce); padding: .3rem .5rem; border-bottom: 2px solid var(--trait); }
.impression__cartes td { vertical-align: top; width: 50%; padding: .5rem .5rem; border-bottom: 1px solid var(--trait); break-inside: avoid; }
.impression__cartes .carte__texte { margin: 0; }
.impression__cartes .carte__image { max-width: 9rem; max-height: 7rem; display: block; margin-bottom: .2rem; }
@media (max-width: 640px) {
.carte-ligne { grid-template-columns: 1.2rem minmax(0, 1fr); }
.carte-ligne__verso { grid-column: 2; border-left: 0; padding-left: 0; border-top: 1px dashed var(--trait); padding-top: .35rem; }
.carte-apprendre__carte { padding: 1.1rem 1.1rem 1rem; min-height: 13rem; }
.carte-apprendre .carte__texte { font-size: 1.2rem; }
}
/* ======================================================================
Révision espacée (cartes, 12/10) : notes façon Anki, échéances, rappels
====================================================================== */
.carte-apprendre__reponses--notes .bouton {
display: grid; justify-items: center; gap: .15rem; min-width: 7.2rem; padding: .55rem .9rem;
}
.note-delai { font-size: .72rem; font-weight: 400; opacity: .9; }
.note-encore { background: var(--jauge-fausse); }
.note-encore:hover { background: #b93059; }
.note-difficile { background: #96690d; }
.note-difficile:hover { background: #ac7a14; }
.note-bien { background: #23733d; }
.note-bien:hover { background: #2e8a4b; }
.note-facile { background: var(--cyan-fonce); }
.note-facile:hover { background: var(--cyan); }
.legende__reviser::before { background: var(--cyan) !important; }
.revision__repos { flex: none; font-size: .85rem; color: var(--encre-douce); }
.revisions-total { margin: .2rem 0 1rem; font-size: .95rem; color: var(--encre-douce); }
.revisions-total strong { color: var(--encre); }
/* ======================================================================
Accueil d'un quizz (12/10) : deux piliers — questions et cartes
====================================================================== */
.quiz-piliers {
display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
gap: 1rem; margin: 0 0 1.2rem;
}
.pilier {
display: grid; align-content: start; gap: .85rem;
background: var(--blanc); border: 1px solid var(--trait); border-radius: 16px;
border-top: 5px solid var(--teinte, var(--cyan)); padding: 1.2rem 1.3rem 1.3rem;
}
.pilier__titre { display: flex; align-items: center; gap: .55rem; margin: 0; font-size: 1.12rem; }
.pilier__nombre {
margin-left: auto; font: 700 .85rem var(--texte); color: var(--encre-douce);
background: var(--papier); border: 1px solid var(--trait); border-radius: 99px; padding: .15rem .6rem;
}
.pilier__texte { margin: 0; font-size: .92rem; color: var(--encre-douce); }
.pilier__progres { display: grid; gap: .45rem; }
.pilier__etat { margin: 0; font-size: .88rem; color: var(--encre-douce); }
.pilier__etat strong { color: var(--encre); }
.pilier form { display: grid; gap: .8rem; }
.pilier .actions-ligne { margin: 0; }
.pilier__liens { margin: .2rem 0 0; font-size: .86rem; color: var(--encre-douce); }
.pilier__alerte { font-weight: 700; }
/* section repliée (impression des questions d'un quizz) */
.repli-section summary { cursor: pointer; list-style: none; display: flex; }
.repli-section summary::-webkit-details-marker { display: none; }
.repli-section summary h2 { display: flex; align-items: center; gap: .55rem; margin: 0; font-size: 1.12rem; }
.repli-section summary h2::after { content: "▾"; margin-left: .6rem; font-size: .9rem; color: var(--encre-douce); }
.repli-section[open] summary h2::after { content: "▴"; }
.repli-section[open] summary { margin-bottom: .9rem; }
/* ===================================================================== 3.2.0
Entraînement multi-quizz, quizz collaboratifs, dépôt hors PAE,
« Mes documents » (demandes de Matthias, 12/10). */
/* ---- barre « plusieurs quizz à la fois » (page des quizz) ---- */
.multi-barre {
display: grid; gap: .7rem; margin: 0 0 1rem; padding: .9rem 1rem;
background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon);
}
.multi-barre__texte { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: .92rem; }
.multi-barre__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
.multi-barre__taille { display: inline-flex; align-items: center; gap: .45rem; font-size: .88rem; color: var(--encre-douce); }
.multi-barre__taille select {
font: inherit; font-size: .9rem; color: var(--encre); background: var(--papier);
border: 1px solid var(--trait); border-radius: 8px; padding: .35rem .5rem;
}
.carte-quiz__choisir {
display: flex; align-items: center; gap: .5rem; margin: .5rem 0 0;
font-size: .85rem; color: var(--encre-douce); cursor: pointer;
}
.carte-quiz__choisir input { accent-color: var(--cyan); width: 1rem; height: 1rem; flex: none; }
.avancement__multi { color: var(--encre-douce); font-weight: 400; }
.etiquette--collab { background: var(--cyan-pale); color: var(--cyan-fonce); border-color: var(--cyan); }
/* ---- déposer dans un autre cours ---- */
.section-drive__titre { margin: 1.4rem 0 .7rem; font-size: 1.12rem; }
.choix-blocs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .7rem; }
.choix-bloc { min-width: 7rem; justify-content: center; }
.choix-cours { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.choix-cours__lien {
display: flex; align-items: center; gap: .7rem; padding: .6rem .8rem;
background: var(--blanc); border: 1px solid var(--trait); border-radius: 12px;
text-decoration: none; color: inherit;
}
.choix-cours__lien:hover { border-color: var(--cyan); }
.choix-cours__texte { display: grid; gap: .05rem; min-width: 0; }
.choix-cours__texte small { font-size: .8rem; color: var(--encre-douce); }
.choix-cours__quadri { margin-left: auto; flex: none; font-size: .78rem; color: var(--encre-douce); }
/* Choix du cours d'un conseil : blocs puis quadrimestres repliables (14/10). */
.choix-groupe { margin-top: 1.6rem; }
.choix-groupe .bloc > .choix-cours { margin: .7rem 0 1.1rem; }
/* ---- mes documents ---- */
.mes-documents__cours { margin: 0 0 1.6rem; }
.mes-documents__titre { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; margin: 0 0 .6rem; font-size: 1.08rem; }
.mes-documents__titre a { color: inherit; }
.mes-documents__titre small { font-weight: 400; font-size: .82rem; color: var(--encre-douce); }
.documents-simples { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.documents-simples .document {
background: var(--blanc); border: 1px solid var(--trait); border-radius: 12px; padding: .8rem 1rem;
}
.documents-simples .document__actions { margin-top: .5rem; }
/* ======================================================================
13/10 (nuit) — remettre dans l'ordre, textes à trous, réponses mélangées,
paramètres d'un quizz (demandes de Matthias)
====================================================================== */
/* ---- éditeur : ce qui dépend du type de question ---- */
.si-trous, .si-ordre, .si-qcm { display: none; }
.editeur:has(input[name="type"][value="trous"]:checked) span.si-trous { display: inline; }
.editeur:has(input[name="type"][value="trous"]:checked) div.si-trous { display: block; }
.editeur:has(input[name="type"][value="trous"]:checked) .sauf-trous { display: none; }
.editeur:has(input[name="type"][value="ordre"]:checked) span.si-ordre { display: inline; }
.editeur:has(input[name="type"][value="ordre"]:checked) .sauf-ordre { display: none; }
.editeur:has(input[name="type"][value="unique"]:checked) .editeur__fixe,
.editeur:has(input[name="type"][value="multiple"]:checked) .editeur__fixe { display: flex; }
.editeur:has(input[name="type"][value="trous"]:checked) .editeur__qcm,
.editeur:has(input[name="type"][value="trous"]:checked) .editeur__aide,
.editeur:has(input[name="type"][value="ordre"]:checked) .editeur__aide { display: none; }
.editeur__fixe { margin: .9rem 0 0; }
/* « ordre » : pas de case « bonne réponse », les lignes sont numérotées 1, 2, 3… */
.editeur:has(input[name="type"][value="ordre"]:checked) .lignes-reponse { counter-reset: element; }
.editeur:has(input[name="type"][value="ordre"]:checked) .ligne-reponse[data-ligne] {
counter-increment: element; grid-template-columns: auto minmax(0, 1fr) auto;
}
.editeur:has(input[name="type"][value="ordre"]:checked) .ligne-reponse__bonne { display: none; }
.editeur:has(input[name="type"][value="ordre"]:checked) .ligne-reponse__lettre[data-lettre] { font-size: 0; width: 1.6rem; }
.editeur:has(input[name="type"][value="ordre"]:checked) .ligne-reponse__lettre[data-lettre]::before {
content: counter(element) "."; font-size: .9rem; color: var(--teinte-fonce, var(--encre));
}
.editeur:has(input[name="type"][value="ordre"]:checked) .ligne-reponse[data-ligne]:has(.ligne-reponse__bonne input:checked) { background: none; }
.editeur:has(input[name="type"][value="ordre"]:checked) .bouton-ajout { margin-left: 2rem; }
/* « trous » : aide et outils sous le texte */
.editeur__trous { margin-top: .6rem; }
.editeur__trous-aide {
display: flex; gap: .65rem; align-items: flex-start; margin: 0; max-width: none;
font-size: .87rem; color: var(--encre-douce); background: var(--papier);
border: 1px solid var(--trait); border-radius: 12px; padding: .7rem .9rem;
}
.editeur__trous-aide .icone { flex: none; width: 1.3rem; height: 1.3rem; color: var(--teinte, var(--cyan)); margin-top: .05rem; }
.editeur__trous-outils { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: .55rem 0 0; }
.editeur__trous-compte { font-size: .85rem; font-weight: 600; color: var(--encre-douce); }
.editeur__trous-compte.est-vide { color: var(--faux); }
/* ---- répondre : remettre dans l'ordre ---- */
.ordre { list-style: none; margin: 0 0 .8rem; padding: 0; display: grid; gap: .5rem; }
.ordre__element {
display: flex; align-items: center; gap: .75rem; padding: .7rem .85rem;
border: 1.5px solid var(--trait); border-radius: 12px; background: var(--blanc);
transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.ordre__element:hover { border-color: var(--teinte-moyenne, var(--cyan)); }
.ordre__element.est-deplace {
border-color: var(--teinte, var(--cyan)); background: var(--teinte-pale, var(--cyan-pale));
box-shadow: 0 8px 22px rgba(16, 36, 58, .16); position: relative; z-index: 2;
}
.ordre__element.vient-de-bouger { border-color: var(--teinte, var(--cyan)); }
.ordre__poignee {
flex: none; display: grid; place-items: center; width: 1.6rem; height: 2.2rem; margin: -.3rem -.2rem -.3rem -.35rem;
color: var(--encre-douce); cursor: grab; touch-action: none; border-radius: 7px;
}
.ordre__poignee:hover { background: var(--papier); color: var(--encre); }
.ordre__element.est-deplace .ordre__poignee { cursor: grabbing; }
.ordre__rang {
flex: none; width: 1.9rem; height: 1.9rem; display: grid; place-items: center; border-radius: 50%;
background: var(--teinte, var(--cyan)); color: var(--teinte-texte, #fff); font: 700 .85rem/1 var(--titre);
}
.ordre__texte { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ordre__place select {
font: inherit; font-size: .9rem; padding: .35rem .5rem; border-radius: 8px;
border: 1px solid var(--trait); background: var(--papier); color: var(--encre);
}
.ordre__fleches { flex: none; display: inline-flex; gap: .25rem; }
.ordre__fleche {
width: 2.2rem; height: 2.2rem; display: grid; place-items: center; cursor: pointer;
border: 1px solid var(--trait); border-radius: 9px; background: var(--papier); color: var(--encre);
}
.ordre__fleche:hover:not(:disabled) { border-color: var(--teinte, var(--cyan)); color: var(--teinte-fonce, var(--lien)); }
.ordre__fleche:disabled { opacity: .35; cursor: default; }
.ordre__fleche:focus-visible { outline: 3px solid var(--ambre); outline-offset: 2px; }
.ordre__aide { margin: 0 0 1.2rem; font-size: .84rem; color: var(--encre-douce); }
/* ---- répondre : texte à trous ---- */
.texte-trous { line-height: 2.15; font-weight: 500; }
input.trou {
font: inherit; font-weight: 600; font-size: .98em; color: var(--encre); max-width: 100%;
padding: .12rem .45rem; margin: 0 .1rem; border: 0; border-bottom: 2px solid var(--teinte, var(--cyan));
border-radius: 6px 6px 0 0; background: var(--teinte-pale, var(--cyan-pale));
}
input.trou:focus { outline: 3px solid var(--ambre); outline-offset: 1px; }
.trou-vide { letter-spacing: .1em; color: var(--encre-douce); }
.trou-corrige { display: inline-flex; align-items: center; gap: .3rem; padding: 0 .4rem; border-radius: 6px; font-weight: 700; }
.trou-corrige--juste { background: var(--juste-fond); color: var(--juste); }
.trou-corrige--faux { background: var(--faux-fond); color: var(--faux); }
.trou-corrige--faux s { font-weight: 500; opacity: .85; }
.trou-corrige--faux strong { color: var(--juste); }
.trou-apercu { background: var(--juste-fond); color: var(--juste); font-weight: 700; padding: 0 .3rem; border-radius: 5px; }
/* ---- corrigé : ordre et trous ---- */
.corrige__intro { margin: 0 0 .5rem; font-weight: 700; font-size: .9rem; }
.corrige--ordre .reponse__lettre, .corrige--trous .reponse__lettre { border-radius: 50%; }
.fiche-question__reponses--ordre .reponse__lettre { border-radius: 50%; }
/* ---- quizz : paramètres et suppression par l'auteur·rice ---- */
.entete-cours__lien { display: inline-flex; align-items: center; gap: .25rem; font-weight: 600; }
.parametres-quiz .formulaire { margin-top: .4rem; }
.parametres-quiz .zone-danger {
max-width: 52rem; margin-top: 1rem; padding: .9rem 1rem; border: 1px dashed var(--grenat-bord); border-radius: 12px;
}
.carte-quiz__proprietaire {
display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1.1rem;
padding-top: .5rem; margin-top: .1rem; border-top: 1px solid var(--trait); font-size: .86rem;
}
@media (max-width: 640px) {
.ordre__element { gap: .55rem; padding: .6rem .65rem; }
.ordre__fleche { width: 2.5rem; height: 2.5rem; }
.ordre__rang { width: 1.6rem; height: 1.6rem; font-size: .78rem; }
}
.import__regles-titre { margin: 1rem 0 .45rem !important; font-size: .92rem !important; }
.import__regles-plus { margin: 0; padding-left: 1.1rem; display: grid; gap: .45rem; }
.editeur__libelle > .si-trous, .editeur__libelle > .sauf-trous,
.editeur__libelle > .si-ordre, .editeur__libelle > .sauf-ordre { font: inherit; color: inherit; }
/* ---- conseils d'anciens (14/10) ----
Page du cours : une tuile large sous les cinq sous-dossiers, avec les deux
conseils les plus utiles en aperçu. conseils.php : la liste ; conseiller.php :
écrire le sien ; « Mes documents » : mes conseils. */
.sous-dossiers__large { grid-column: 1 / -1; }
.conseils-apercu {
flex: 1; display: grid; gap: .6rem; min-width: 0;
background: var(--blanc); border: 1px solid var(--teinte-trait, var(--trait)); border-radius: 12px;
padding: .95rem 1.05rem 1rem;
}
.conseils-apercu__tete { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; }
.conseils-apercu__tete .sous-dossier__icone { margin: 0; }
.conseils-apercu__titre { font: 700 .98rem/1.3 var(--titre); color: var(--encre); text-decoration: none; }
.conseils-apercu__titre:hover { color: var(--lien); text-decoration: underline; }
.conseils-apercu__compte { margin-left: auto; font-size: .82rem; font-weight: 700; }
.conseils-apercu .sous-dossier__detail { margin: 0; }
.conseils-apercu__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
/* 2.46 (Matthias : « on n'a que le titre ») : chaque conseil comme un message de forum — la pastille,
qui, l'année, la phrase et le début du texte ; tout le message est un lien vers le conseil.
« display: block » défait le « .sous-dossiers li { display: flex } » des tuiles. Fond neutre (14/10). */
.conseils-apercu__liste li { display: block; }
.conseil-apercu {
display: flex; align-items: flex-start; gap: .75rem; padding: .8rem .9rem; border-radius: 12px;
background: var(--papier); border: 1px solid var(--trait); color: var(--encre); text-decoration: none;
}
.conseil-apercu:hover { border-color: var(--teinte, var(--cyan)); color: var(--encre); text-decoration: none; }
.conseil-apercu:focus-visible { outline: 3px solid var(--ambre); outline-offset: 2px; }
.conseil-apercu .conseil__avatar { width: 2.2rem; height: 2.2rem; font-size: .74rem; }
.conseil-apercu__corps { flex: 1; min-width: 0; display: grid; gap: .2rem; }
.conseil-apercu__qui { font-size: .8rem; color: var(--encre-douce); line-height: 1.35; }
.conseil-apercu__qui strong { color: var(--encre); }
.conseil-apercu__phrase { font: 700 .95rem/1.35 var(--titre); overflow-wrap: anywhere; }
.conseil-apercu__extrait {
font-size: .88rem; line-height: 1.5; color: var(--encre-douce); overflow-wrap: anywhere;
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.conseil-apercu__pied { display: flex; align-items: center; gap: .9rem; margin-top: .2rem; font-size: .8rem; font-weight: 700; color: var(--encre-douce); }
.conseil-apercu__utile, .conseil-apercu__lire { display: inline-flex; align-items: center; gap: .25rem; }
.conseil-apercu__lire { margin-left: auto; color: var(--lien); }
.conseil-apercu__pied .icone { width: .95rem; height: .95rem; }
.conseils-apercu__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.1rem; }
.conseils-apercu__actions .bouton .icone { width: 1rem; height: 1rem; }
.conseils-haut {
display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem;
background: var(--blanc); border: 1px solid var(--trait); border-radius: 16px;
padding: 1rem 1.3rem 1.05rem; margin: 0 0 1.3rem;
}
.conseils-haut__resume { flex: 1 1 18rem; min-width: 0; }
.conseils-haut__compte { margin: 0 0 .65rem; }
.conseils-haut__compte:last-child { margin: 0; }
.conseils-haut__libelle { margin: 0 0 .35rem; font-size: .82rem; font-weight: 700; color: var(--encre-douce); }
.conseils-haut__action { display: grid; gap: .35rem; justify-items: start; }
.conseils-haut__action .champ__aide { margin: 0; }
.conseils { list-style: none; margin: 0 0 1.6rem; padding: 0; display: grid; gap: .8rem; }
/* 2.46 : un message de forum, en lecture seule — la pastille, qui, quand, le menu ⋯ ; la phrase ;
le texte ; « Utile », thèmes et charge en pied. Pas de liseré de couleur : la pastille suffit. */
.conseil {
background: var(--blanc); border: 1px solid var(--trait);
border-radius: 16px; padding: 1rem 1.15rem .9rem; scroll-margin-top: 100px;
}
.conseil__tete { display: flex; align-items: center; gap: .7rem; margin: 0 0 .65rem; }
.conseil__avatar {
flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center;
background: var(--teinte, var(--cyan)); color: var(--teinte-texte, #fff); font: 700 .82rem/1 var(--titre); letter-spacing: .03em;
}
.conseil__qui { flex: 1; min-width: 0; margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .45rem; line-height: 1.35; }
.conseil__vous { font-size: .7rem; font-weight: 700; padding: .1rem .45rem; border-radius: 99px; background: var(--blanc); border: 1px solid var(--cyan); color: var(--lien); }
.conseil__quand { flex-basis: 100%; font-size: .8rem; color: var(--encre-douce); }
.conseil-apercu__an, .conseil__an { white-space: nowrap; }
.conseil__menu { flex: none; align-self: flex-start; }
.conseil__pied { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .55rem; margin-top: .75rem; }
.conseil__pied form { margin: 0; }
.conseil__charge, .conseil__equipe { font-size: .78rem; color: var(--encre-douce); }
.conseil__charge { font-weight: 700; padding: .3rem .6rem; border-radius: 99px; background: var(--papier); }
.conseil__signaler-form { margin-top: .9rem; padding: .9rem 1rem; border-radius: 12px; background: var(--papier); border: 1px solid var(--trait); }
.conseil__signaler-titre { display: flex; align-items: center; gap: .35rem; margin: 0; font-weight: 700; }
.conseil:target { border-color: var(--cyan); outline: 3px solid var(--cyan-pale); }
.conseil--mien { border-color: var(--cyan); } /* le sien : bord cyan, fond blanc — les thèmes restent lisibles (2.46) */
.conseil--epingle { border-color: var(--teinte, var(--cyan)); box-shadow: inset 0 0 0 1px var(--teinte, var(--cyan)); } /* épinglé : bord du cours (2.46) */
.conseil--signale { border-color: var(--sans-trait); }
.conseil__epingle { display: flex; align-items: center; gap: .3rem; margin: 0 0 .35rem; font-size: .76rem; font-weight: 700; color: var(--encre-douce); }
.conseil__phrase { margin: 0 0 .3rem; font: 700 1.06rem/1.4 var(--titre); color: var(--encre); overflow-wrap: anywhere; }
.conseil__meta { margin: 0 0 .5rem; font-size: .82rem; color: var(--encre-douce); max-width: none; }
.conseil__auteur { font-weight: 700; color: var(--encre); }
.conseil__themes { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0 0 .45rem; }
.conseil__texte { margin: .2rem 0 .25rem; line-height: 1.6; overflow-wrap: anywhere; max-width: 75ch; }
.conseil__suite summary { cursor: pointer; list-style: none; line-height: 1.6; overflow-wrap: anywhere; max-width: 75ch; }
.conseil__suite summary::-webkit-details-marker { display: none; }
.conseil__lire { display: inline-block; margin-left: .35rem; font-size: .88rem; font-weight: 700; color: var(--lien); }
.conseil__lire--moins { display: none; }
.conseil__suite[open] .conseil__extrait, .conseil__suite[open] .conseil__lire--plus { display: none; }
.conseil__suite[open] .conseil__lire--moins { display: inline-block; margin-left: 0; }
.conseil__actions {
display: flex; flex-wrap: wrap; align-items: center; gap: .45rem 1.1rem;
margin-top: .6rem; padding-top: .55rem; border-top: 1px solid var(--trait);
}
.conseil__actions form { margin: 0; }
.conseil__actions .bouton-lien { font-size: .84rem; display: inline-flex; align-items: center; gap: .3rem; }
.utile {
display: inline-flex; align-items: center; gap: .35rem; cursor: pointer;
font: 700 .84rem/1 var(--texte); padding: .45rem .8rem; border-radius: 99px;
border: 1px solid var(--trait); background: var(--blanc); color: var(--encre-douce);
}
.utile .icone { width: 1rem; height: 1rem; }
.utile:hover { border-color: var(--cyan); color: var(--encre); }
.utile:focus-visible { outline: 3px solid var(--ambre); outline-offset: 2px; }
.utile.est-actif { background: var(--cyan-pale); border-color: var(--cyan); color: var(--lien); }
.utile__nombre { margin-left: .15rem; color: var(--encre); }
.utile--mien { cursor: default; border-style: dashed; font-weight: 600; }
.utile--mien:hover { border-color: var(--trait); color: var(--encre-douce); }
.conseil__signaler summary {
cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: .3rem;
font-size: .84rem; font-weight: 600; color: var(--encre-douce);
}
.conseil__signaler summary::-webkit-details-marker { display: none; }
.conseil__signaler summary:hover { color: var(--sans); }
.conseil__signaler[open] { flex-basis: 100%; }
.conseil__signaler-form { display: grid; gap: .65rem; margin-top: .6rem; max-width: 34rem; }
.conseil__signaler-form .bouton { justify-self: start; }
.conseil .signalements { margin-top: .7rem; }
.conseils-avant { margin-top: 1.8rem; }
.conseils-avant__titre { display: flex; align-items: center; gap: .45rem; margin: 0 0 .25rem; font-size: 1.1rem; }
.conseils-avant__aide { margin: 0 0 .9rem; font-size: .88rem; color: var(--encre-douce); max-width: 62ch; }
.conseils-avant .conseil__avatar { background: var(--teinte-trait, var(--trait)); color: var(--encre); }
.charte-conseil {
margin: 0 0 1rem; padding: .85rem 1.1rem; border-radius: 12px; font-size: .9rem; line-height: 1.5;
background: var(--ambre-pale); border: 1px solid var(--puce-bord);
}
.charte-conseil p { margin: 0 0 .4rem; }
.charte-conseil p:last-child { margin: 0; }
.formulaire-conseil .tags-choix__liste { gap: .45rem; }
.mes-conseils { margin-top: 2.4rem; padding-top: 1.4rem; border-top: 1px solid var(--trait); scroll-margin-top: 100px; }
.mes-conseils .drive-titre { margin-bottom: 1rem; }
.mes-conseils__titre { display: flex; align-items: center; gap: .5rem; margin: 0 0 .3rem; font-size: 1.3rem; }
.mes-conseils__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.mes-conseils__element {
background: var(--blanc); border: 1px solid var(--trait); border-left: 4px solid var(--teinte, var(--cyan));
border-radius: 14px; padding: .85rem 1.1rem .8rem;
}
.mes-conseils__cours { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin: 0 0 .35rem; font-size: .9rem; font-weight: 700; }
.mes-conseils__phrase { margin: 0 0 .3rem; font: 700 1rem/1.4 var(--titre); overflow-wrap: anywhere; }
.mes-conseils__tete { display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem; }
.mes-conseils__tete .mes-conseils__cours { margin-top: .3rem; }
.mes-conseils__extrait { margin: 0 0 .35rem; font-size: .9rem; line-height: 1.5; color: var(--encre-douce); overflow-wrap: anywhere; max-width: 75ch; }
@media (max-width: 640px) {
.conseils-apercu__compte { margin-left: 0; flex-basis: 100%; }
.conseils-haut { padding: .9rem 1rem; }
.conseil { padding: .85rem .9rem .7rem; }
.conseil__phrase { font-size: 1rem; }
}
/* ======================================================================
14/10 (bot 3.5.0) — code couleur du cours, liens utiles
====================================================================== */
/* ---- code couleur HEX : en-tête du cours (« ● Couleur #970911 ») ---- */
.couleur-cours { white-space: nowrap; } /* en ligne : copier la ligne entière ne coupe rien */
.couleur-cours__pastille {
display: inline-block; width: .95em; height: .95em; border-radius: 50%; margin-right: .35em; vertical-align: -.12em;
background: var(--teinte, var(--cyan)); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .22);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--encre) 30%, transparent); /* visible de jour comme de nuit */
}
.couleur-cours__code {
-webkit-user-select: all; user-select: all; cursor: text;
background: var(--blanc); color: var(--encre); border: 1px solid var(--teinte-trait, var(--trait));
padding: .08em .45em; letter-spacing: .03em;
}
/* ---- liens utiles : vignette, liste des liens, nom du site bien visible ---- */
.document__vignette--liens {
place-items: center; align-content: center; gap: .2rem; padding: 0; border-radius: 12px; color: var(--encre);
}
.document__vignette--liens::before { display: none; }
.document__vignette--liens .document__vignette-icone { width: 1.45rem; height: 1.45rem; }
.document__vignette--liens span { font-size: .52rem; color: var(--encre-douce); }
.document__titre-icone { margin-right: .35rem; color: var(--encre-douce); }
.liens { list-style: none; margin: .45rem 0 0; padding: 0; display: grid; gap: .35rem; }
.lien__lien {
display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .65rem;
padding: .45rem .75rem; border-radius: 10px; text-decoration: none; color: var(--encre);
background: var(--papier); border: 1px solid var(--trait); border-left: 3px solid var(--teinte, var(--cyan));
}
.lien__lien:hover { color: var(--encre); background: var(--teinte-pale, var(--cyan-pale)); border-color: var(--teinte-trait, var(--cyan)); border-left-color: var(--teinte, var(--cyan)); }
.lien__titre { font-weight: 700; font-size: .92rem; color: var(--lien); overflow-wrap: anywhere; }
.lien__lien:hover .lien__titre { text-decoration: underline; }
.lien__domaine {
display: inline-flex; align-items: center; gap: .3rem; min-width: 0; max-width: 100%;
padding: .1rem .55rem; border-radius: 99px; background: var(--blanc); border: 1px solid var(--trait);
font: 600 .78rem/1.35 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--encre); overflow-wrap: anywhere;
}
.lien__icone { width: .9rem; height: .9rem; color: var(--encre-douce); }
.document__liens-vide { margin: .3rem 0 0; font-size: .82rem; font-style: italic; color: var(--encre-douce); }
/* vue liste : les liens sur une troisième ligne, sous le titre et la méta */
html[data-vue-documents="liste"] .document--liens {
grid-template-areas: "vignette haut actions" "vignette meta actions" "vignette liens liens";
}
html[data-vue-documents="liste"] .document--liens > .document__liens { grid-area: liens; margin-top: .3rem; gap: .25rem; }
html[data-vue-documents="liste"] .document--liens > .document__liens .lien__lien { padding: .3rem .6rem; }
html[data-vue-documents="liste"] .document--liens > .document__liens .lien__titre { font-size: .85rem; }
html[data-vue-documents="liste"] .document--liens > .document__gestion { grid-row: 4; }
html[data-vue-documents="liste"] .document > .document__vignette--liens { padding: 0; align-self: start; }
html[data-vue-documents="liste"] .document > .document__vignette--liens span { display: none; }
html[data-vue-documents="liste"] .document > .document__vignette--liens .document__vignette-icone { width: 1.1rem; height: 1.1rem; }
@media (max-width: 640px) {
html[data-vue-documents="liste"] .document--liens { grid-template-areas: "haut actions" "meta actions" "liens liens"; }
}
/* ---- « Ajouter des liens utiles » : panneau replié sous le dépôt de fichier ---- */
.panneau-liens { gap: 0; padding: 0; margin-top: 1rem; }
.panneau-liens > summary { cursor: pointer; list-style: none; display: grid; gap: .3rem; padding: 1rem 1.3rem; border-radius: 16px; }
.panneau-liens > summary::-webkit-details-marker { display: none; }
.panneau-liens > summary h2::after {
content: "+"; margin-left: auto; font: 700 1.2rem/1 var(--titre); color: var(--encre-douce);
}
.panneau-liens[open] > summary h2::after { content: "−"; }
.panneau-liens > summary:hover h2 { color: var(--lien); }
.panneau-liens__resume { font-size: .82rem; line-height: 1.45; color: var(--encre-douce); }
.panneau-liens[open] .panneau-liens__resume { display: none; }
.panneau-liens__formulaire { display: grid; gap: .9rem; padding: 0 1.3rem 1.3rem; }
.panneau-liens__formulaire .bouton { justify-self: start; }
.panneau-liens__formulaire .champ__aide, .panneau-liens__formulaire .message { margin: 0; }
.champ textarea.champ__liens { font: .86rem/1.55 ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
/* panneau ouvert : la colonne ne colle plus en haut de l'écran (sinon le bas du formulaire resterait hors de portée) */
.colonnes-drive__cote:has(.panneau-liens[open]) { position: static; }
/* ---- archives des effacements : des liens retirés (rien à télécharger) ---- */
.archives__titre { display: inline-flex; align-items: center; gap: .3rem; font-weight: 600; }
.archives__adresses { margin: .25rem 0 .2rem; padding-left: 1.1rem; font-size: .84rem; }
.archives__adresses code { word-break: break-all; }
/* ======================================================================
14/10 — révisions : tuiles (À faire aujourd'hui, Examens blancs, Quizz),
cloche activée / coupée, menu ⋯, Paramètres, rappel du jour, Mes rappels.
Refonte du soir (retours de Matthias) : grille compacte qui s'adapte, zone
des révisions bien séparée du drive. Pictogrammes au trait, jamais d'emoji.
====================================================================== */
.icone--texte { width: 1em; height: 1em; vertical-align: -.15em; }
.insecable { white-space: nowrap; }
/* ---- 15/10 — maquette « A » (Matthias) : variables du duo cloche | ⋯, des jauges, des bulles ---- */
:root {
--duo-fond: rgba(255, 255, 255, .8); --duo-bord: rgba(16, 36, 58, .16); --duo-off: #6f7f8f; --duo-bleu: #009ee0;
--jauge-bord: rgba(0, 0, 0, .13); --sous-bulle: #f1f5f8;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--duo-fond: rgba(10, 16, 23, .45); --duo-bord: rgba(255, 255, 255, .14); --duo-off: #93a4b4; --duo-bleu: #1aa7e6;
--jauge-bord: rgba(255, 255, 255, .15); --sous-bulle: #111a23;
}
}
:root[data-theme="dark"] {
--duo-fond: rgba(10, 16, 23, .45); --duo-bord: rgba(255, 255, 255, .14); --duo-off: #93a4b4; --duo-bleu: #1aa7e6;
--jauge-bord: rgba(255, 255, 255, .15); --sous-bulle: #111a23;
}
/* ---- Mon drive : deux bulles, « Mes révisions » et « Mes cours » ---- */
.bulle {
display: flex; flex-direction: column; gap: 1rem; margin: 0 0 1.6rem; padding: 1.35rem 1.75rem 1.6rem;
background: var(--blanc); border: 1px solid var(--trait); border-radius: 18px; box-shadow: 0 1px 3px rgba(16, 36, 58, .06);
}
.bulle__tete { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .6rem 1rem; }
.bulle__titre { display: flex; align-items: center; gap: .6rem; margin: 0; font-size: 1.4rem; }
.bulle__titre .icone { color: var(--lien); width: 1.4rem; height: 1.4rem; flex: none; }
.bulle__outils { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .9rem; }
.bulle__lien { display: inline-flex; align-items: center; gap: .15rem; font-weight: 700; font-size: .95rem; text-decoration: none; }
.bulle__lien:hover { text-decoration: underline; }
.bulle__vide { margin: 0; color: var(--encre-douce); }
/* Les quadrimestres : des sous-bulles (« Q1 · 1er quadrimestre »), repliables comme avant. */
.drive-zone .filtre-cours { min-width: 13rem; }
.drive-zone .quadri { margin: 0; padding: .9rem 1.1rem 1.1rem; border-radius: 14px; background: var(--sous-bulle); border: 1px solid var(--trait); }
.drive-zone .quadri__titre { margin: -.35rem -.5rem; }
.drive-zone .quadri__titre::before { display: none; }
.drive-zone .quadri__titre h3 { margin: 0; font-size: 1.1rem; }
.drive-zone .quadri__titre sup { font-size: .62em; line-height: 0; vertical-align: .55em; margin-left: 1px; }
.drive-zone .quadri__titre .repli__fleche { margin-left: auto; }
.quadri__puce {
display: inline-grid; place-items: center; min-width: 2rem; height: 1.6rem; padding: 0 .5rem; border-radius: 7px; flex: none;
background: var(--cyan-pale); color: var(--lien); font: 700 .85rem var(--titre);
}
.drive-zone .bloc { margin-top: .8rem; }
.drive-zone .bloc__titre h4 { margin: 0; font-size: .95rem; }
.drive-zone .bloc > .chemises { margin-bottom: .8rem; }
/* ---- état de cet appareil ---- */
.etat-appareil {
display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .65rem; border-radius: 99px; font-size: .82rem;
font-weight: 700; text-decoration: none; border: 1px solid var(--trait); background: var(--blanc); color: var(--encre-douce);
}
.etat-appareil[hidden] { display: none; }
.etat-appareil--oui { color: var(--juste); border-color: var(--juste-trait); background: var(--juste-fond); }
.etat-appareil--non { color: var(--encre-douce); }
.etat-appareil .icone { width: 1rem; height: 1rem; }
/* ---- catégories : « À faire aujourd'hui », « Examens blancs », « Quizz » (ces deux-là se replient) ---- */
.categories { display: flex; flex-direction: column; gap: 1rem; }
.categorie { min-width: 0; }
.categorie + .categorie { padding-top: 1rem; border-top: 1px solid var(--trait); }
.categorie__tete { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin: 0 0 .65rem; color: var(--encre); }
details.categorie > summary { list-style: none; cursor: pointer; border-radius: 8px; }
details.categorie > summary::-webkit-details-marker { display: none; }
details.categorie:not([open]) > summary { margin-bottom: 0; }
details.categorie > summary:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
.categorie__tete .repli__fleche { order: 0; }
.categorie__icone { width: 1.1rem; height: 1.1rem; color: var(--encre-douce); flex: none; }
.categorie__nom { margin: 0; font-size: .95rem; }
.categorie__nombre { font: 700 .75rem var(--texte); color: var(--encre-douce); background: var(--papier); border: 1px solid var(--trait); border-radius: 99px; padding: .1rem .5rem; }
/* repliée : un carré par cours, à sa couleur, et le total à faire */
.categorie__resume { display: none; align-items: center; flex-wrap: wrap; gap: .4rem .6rem; margin-left: .3rem; font: 700 .82rem var(--texte); color: var(--encre-douce); }
details.categorie:not([open]) .categorie__resume { display: inline-flex; }
.carres { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.carre { width: 10px; height: 10px; border-radius: 3px; background: var(--teinte, var(--cyan)); }
/* la grille : 1 tuile = toute la largeur, 2 = la moitié… (colonnes calculées sur le serveur) */
.tuiles { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; grid-template-columns: repeat(var(--par, 6), minmax(0, 1fr)); }
.tuiles--p1 { --par: 1; } .tuiles--p2 { --par: 2; } .tuiles--p3 { --par: 3; }
.tuiles--p4 { --par: 4; } .tuiles--p5 { --par: 5; } .tuiles--p6 { --par: 6; }
.tuiles-plus { margin-top: .65rem; }
.tuiles-plus > summary { cursor: pointer; font-weight: 700; font-size: .86rem; color: var(--lien); margin-bottom: .65rem; }
/* ---- une tuile : fond adouci, code dans le coin, jauge cerclée, duo cloche | ⋯ ---- */
.tuile {
position: relative; min-width: 0; scroll-margin-top: 100px;
border-radius: 12px; color: var(--encre); background: var(--teinte-pale, var(--blanc));
box-shadow: inset 0 0 0 1px var(--teinte-trait, var(--trait));
}
@supports (color: color-mix(in srgb, red 10%, white)) {
.tuile {
background: color-mix(in srgb, var(--teinte) 16%, var(--blanc));
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--teinte) 42%, var(--blanc));
}
.tuile .tuile__jauge { background: color-mix(in srgb, var(--teinte) 34%, var(--blanc)); }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .tuile { background: color-mix(in srgb, var(--teinte) 24%, var(--blanc)); }
:root:not([data-theme="light"]) .tuile .tuile__jauge { background: color-mix(in srgb, var(--teinte) 40%, var(--blanc)); }
}
:root[data-theme="dark"] .tuile { background: color-mix(in srgb, var(--teinte) 24%, var(--blanc)); }
:root[data-theme="dark"] .tuile .tuile__jauge { background: color-mix(in srgb, var(--teinte) 40%, var(--blanc)); }
}
.tuile:hover { box-shadow: inset 0 0 0 1px var(--teinte), 0 2px 10px rgba(16, 36, 58, .12); }
.tuile:target { outline: 3px solid var(--cyan); outline-offset: 2px; }
/* en pause / arrêtée : le contenu pâlit (pas la tuile entière : son menu ⋯ resterait pâle aussi) */
.tuile--pause .tuile__corps { opacity: .55; filter: saturate(.5); }
.tuile--arrete .tuile__corps { opacity: .6; }
/* le conteneur des container queries (le duo est à côté, pas dedans) */
.tuile__corps { container-type: inline-size; height: 100%; border-radius: 12px; }
.tuile__contenu {
--pt: 10px; --pr: 10px; --pl: 12px;
display: flex; flex-direction: column; gap: 8px; height: 100%; box-sizing: border-box;
padding: var(--pt) var(--pr) calc(var(--pt) + 1px) var(--pl);
}
.tuile__haut, .tuile__milieu, .tuile__bas { display: flex; align-items: center; gap: 7px; min-width: 0; }
.tuile__haut { padding-right: 56px; } /* la place du duo, en haut à droite */
.tuile--arrete .tuile__haut, .tuile--seance .tuile__haut { padding-right: 30px; }
.tuile__bas { gap: 8px; }
.tuile__espace { flex: 1 1 auto; }
/* le code du cours, dans le coin haut-gauche, à la couleur foncée du cours */
.tuile__code {
align-self: flex-start; flex: 0 1 auto; min-width: 0; box-sizing: border-box;
margin: calc(-1 * var(--pt)) 0 0 calc(-1 * var(--pl)); padding: var(--pt) 12px 7px var(--pl);
border-radius: 12px 0 10px 0; background: var(--teinte, var(--cyan)); color: var(--teinte-texte, #fff);
font: 700 .75rem/1.2 var(--titre); letter-spacing: .02em; text-decoration: none;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tuile__code:hover, .tuile__code:focus { color: var(--teinte-texte, #fff); }
/* toute la tuile mène là où l'on en est : le lien s'étend sous les outils */
.tuile__code::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 12px; }
.tuile__code:focus-visible { outline: none; }
.tuile__code:focus-visible::after { outline: 3px solid var(--cyan); outline-offset: 2px; }
.tuile__type { width: 1rem; height: 1rem; color: var(--encre-douce); flex: none; }
.tuile__nom { flex: 0 1 auto; min-width: 0; font-weight: 700; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tuile__court { flex: 0 1 auto; min-width: 0; font-size: .82rem; font-weight: 700; color: var(--encre-douce); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tuile__reste { flex: none; white-space: nowrap; font-size: .82rem; font-weight: 700; color: var(--encre-douce); }
.tuile--cours .tuile__reste { color: var(--lien); }
.tuile--fait .tuile__reste { color: var(--juste); }
.tuile .tuile__jauge {
flex: 1 1 auto; min-width: 0; height: 8px; box-sizing: content-box;
background: var(--teinte-moyenne, var(--jauge-fond)); border: 1px solid var(--jauge-bord);
}
.tuile__pourcent { flex: none; min-width: 2.6em; text-align: right; font-size: .82rem; font-weight: 700; color: var(--encre); }
/* le duo cloche | ⋯, remonté dans le coin haut-droit (à 5 px des bords), au-dessus du lien */
.tuile__outils { position: absolute; top: 5px; right: 5px; z-index: 2; }
.duo { display: inline-flex; align-items: stretch; height: 24px; border-radius: 8px; background: var(--duo-fond); box-shadow: inset 0 0 0 1px var(--duo-bord); }
.duo__form { display: flex; margin: 0; }
.duo__cloche {
display: grid; place-items: center; width: 28px; padding: 0; border: 0; border-radius: 8px 0 0 8px;
background: transparent; color: var(--duo-off); cursor: pointer;
}
.duo__cloche .icone { width: .85rem; height: .85rem; }
.duo__cloche:hover { background: var(--cyan-pale); color: var(--lien); }
/* Activées : moitié bleue, cloche blanche pleine. Coupées : cloche grise barrée. */
.duo__cloche.est-active, .duo__cloche.est-active:hover { background: var(--duo-bleu); color: #fff; }
.duo__sep { width: 1px; background: var(--duo-bord); flex: none; }
.duo__menu { display: flex; }
.duo__points {
display: grid; place-items: center; width: 26px; height: 100%; border-radius: 0 8px 8px 0;
color: var(--encre); cursor: pointer; list-style: none;
}
.duo__points::-webkit-details-marker { display: none; }
.duo__points .icone { width: .95rem; height: .95rem; }
.duo--seul .duo__points { border-radius: 8px; }
.duo__points:hover, .duo__menu[open] > .duo__points { background: rgba(16, 36, 58, .08); }
.duo__cloche:focus-visible, .duo__points:focus-visible { outline: 3px solid var(--cyan); outline-offset: 1px; position: relative; z-index: 1; }
/* Ce que dit la tuile selon SA largeur (container queries) : moyenne par défaut. */
.tuile__nom--haut, .tuile__reste--haut, .tuile__court { display: none; }
@container (min-width: 480px) {
.tuile__contenu { --pt: 12px; --pr: 12px; --pl: 14px; }
.tuile__nom--haut, .tuile__reste--haut { display: block; }
.tuile__milieu { display: none; }
.tuile__nom { font-size: .95rem; }
}
@container (max-width: 229px) {
.tuile__contenu { --pt: 9px; --pr: 9px; --pl: 10px; }
/* étroite : les examens blancs gardent ce qui reste ; un quizz, son titre */
.tuile__milieu .tuile__nom, .tuile__milieu .tuile__espace, .tuile__milieu--titre .tuile__reste { display: none; }
.tuile__milieu--titre .tuile__court { display: block; }
/* le code passe à la ligne entre ses mots (« PSY / LANG ») plutôt que d'être coupé */
.tuile__haut { gap: 5px; }
.tuile__code { white-space: normal; text-overflow: clip; padding-right: 8px; font-size: .7rem; }
.tuile__type { width: .9rem; height: .9rem; }
}
/* étroite : le code seul (il passe à la ligne plutôt que d'être coupé), sans % ni texte */
@container (max-width: 139px) {
.tuile__contenu { --pt: 8px; --pr: 7px; --pl: 8px; gap: 6px; }
.tuile__haut { gap: 3px; }
.tuile__milieu, .tuile__pourcent, .tuile__type { display: none; }
.tuile__code {
white-space: normal; overflow-wrap: anywhere; text-overflow: clip;
padding: var(--pt) 6px 5px calc(var(--pl) - 2px); font-size: .625rem; line-height: 1.15; letter-spacing: -.01em;
}
.tuile .tuile__jauge { height: 6px; }
}
@container (max-width: 99px) {
.tuile__code { font-size: .5625rem; padding-left: calc(var(--pl) - 3px); padding-right: 4px; letter-spacing: -.03em; }
}
/* Téléphone (tuiles qui défilent, assez larges) : un quizz garde son titre ET ce qui reste, sur deux lignes. */
@media (max-width: 640px) {
@container (max-width: 229px) {
.tuile__milieu--titre { flex-direction: column; align-items: flex-start; gap: 1px; }
.tuile__milieu--titre .tuile__court { max-width: 100%; }
.tuile__milieu--titre .tuile__reste { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
}
}
/* Sans JavaScript (qui ouvre le menu du bon côté) : la moitié gauche de chaque ligne ouvre son menu ⋯ vers la droite. */
@media (min-width: 641px) {
.tuiles--p2 > li:nth-child(2n+1) .menu-suivi__liste, .tuiles--p3 > li:nth-child(3n+1) .menu-suivi__liste,
.tuiles--p4 > li:nth-child(4n+1) .menu-suivi__liste, .tuiles--p4 > li:nth-child(4n+2) .menu-suivi__liste,
.tuiles--p5 > li:nth-child(5n+1) .menu-suivi__liste, .tuiles--p5 > li:nth-child(5n+2) .menu-suivi__liste,
.tuiles--p6 > li:nth-child(6n+1) .menu-suivi__liste, .tuiles--p6 > li:nth-child(6n+2) .menu-suivi__liste,
.tuiles--p6 > li:nth-child(6n+3) .menu-suivi__liste { left: 0; right: auto; }
}
/* Ordinateur à fenêtre étroite, 5 ou 6 tuiles par ligne : un duo plus serré. */
@media (min-width: 641px) and (max-width: 1100px) {
.tuiles--p5 .duo__cloche, .tuiles--p6 .duo__cloche { width: 22px; }
.tuiles--p5 .duo__points, .tuiles--p6 .duo__points { width: 20px; }
.tuiles--p5 .tuile__haut, .tuiles--p6 .tuile__haut { padding-right: 48px; }
}
/* le menu ⋯ */
.menu-suivi { position: relative; }
.menu-suivi > summary { list-style: none; }
.menu-suivi > summary::-webkit-details-marker { display: none; }
.menu-suivi__liste {
position: absolute; right: 0; top: calc(100% + .3rem); z-index: 30; width: max-content; min-width: 14rem; max-width: min(19rem, 86vw);
list-style: none; margin: 0; padding: .35rem; border-radius: 12px;
background: var(--blanc); border: 1px solid var(--trait); box-shadow: var(--ombre-drive);
}
.menu-suivi__liste form { margin: 0; }
/* Menu ouvert : sa tuile passe devant les cloches et les ⋯ des tuiles voisines
(.tuile--menu : posée par rappels.js, pour les navigateurs sans :has). */
.tuile__outils:has(.menu-suivi[open]), .tuile--menu .tuile__outils { z-index: 40; }
/* Tuile au bord gauche de l'écran : le menu s'ouvre vers la droite (rappels.js). */
.menu-suivi--gauche > .menu-suivi__liste { right: auto; left: 0; }
.menu-suivi--haut > .menu-suivi__liste { top: auto; bottom: calc(100% + .3rem); }
.menu-suivi__tete { padding: .35rem .6rem .45rem; margin-bottom: .2rem; border-bottom: 1px solid var(--trait); font-size: .78rem; font-weight: 700; color: var(--encre-douce); }
.menu-suivi__choix {
display: flex; align-items: center; gap: .55rem; width: 100%; padding: .5rem .6rem; border-radius: 8px;
border: 0; background: none; color: var(--encre); font: 600 .86rem var(--texte); text-align: left; text-decoration: none; cursor: pointer;
}
.menu-suivi__choix:hover, .menu-suivi__choix:focus-visible { background: var(--papier); color: var(--encre); outline: none; }
.menu-suivi__choix .icone { width: 1.05rem; height: 1.05rem; color: var(--encre-douce); }
.menu-suivi__choix--danger, .menu-suivi__choix--danger .icone { color: var(--faux); }
.menu-suivi__choix--danger:hover { background: var(--faux-fond); color: var(--faux); }
/* le bouton ⋯ rond de la barre d'une banque ; filet et précisions dans le menu */
.menu-suivi__bouton {
display: grid; place-items: center; width: 1.85rem; height: 1.85rem; border-radius: 50%;
border: 1px solid transparent; background: none; color: var(--encre-douce); cursor: pointer; padding: 0;
}
.menu-suivi__bouton .icone { width: 1.05rem; height: 1.05rem; }
.menu-suivi__bouton:hover, .menu-suivi[open] > .menu-suivi__bouton { background: var(--papier); border-color: var(--trait); color: var(--encre); }
.menu-suivi__bouton:focus-visible { outline: 3px solid var(--cyan); outline-offset: 1px; }
.menu-suivi__filet { height: 1px; margin: .3rem .2rem; background: var(--trait); }
.menu-suivi__choix small { font-weight: 600; color: var(--encre-douce); }
/* ---- l'interrupteur des notifications (Paramètres, barre d'une banque) ---- */
.interrupteur-form { margin: 0; }
.interrupteur {
display: inline-flex; align-items: center; gap: .55rem; padding: .35rem .8rem .35rem .4rem; border-radius: 99px;
border: 1.5px solid var(--trait); background: var(--blanc); color: var(--encre-douce); cursor: pointer; font: 600 .88rem var(--texte);
}
.interrupteur .icone { width: 1.1rem; height: 1.1rem; }
.interrupteur__piste { position: relative; width: 2.4rem; height: 1.35rem; border-radius: 99px; background: var(--jauge-fond); flex: none; transition: background .15s; }
.interrupteur__bouton { position: absolute; top: .15rem; left: .15rem; width: 1.05rem; height: 1.05rem; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .3); transition: left .15s; }
.interrupteur.est-actif { color: var(--lien); border-color: var(--cyan); background: var(--cyan-pale); }
.interrupteur.est-actif .interrupteur__piste { background: var(--cyan-fonce); }
.interrupteur.est-actif .interrupteur__bouton { left: 1.2rem; }
.interrupteur:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
.interrupteur strong { color: var(--encre); }
/* ---- barre de suivi, en haut de l'accueil d'un quizz / des examens blancs ---- */
.suivi-barre {
display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
margin: 0 0 1.2rem; padding: .55rem .7rem; border-radius: 12px; background: var(--blanc); border: 1px solid var(--trait);
}
.suivi-barre__texte { flex: 1 1 16rem; margin: 0; font-size: .86rem; color: var(--encre-douce); }
.suivi-barre__menu { margin-left: auto; }
/* ---- Paramètres d'une banque ---- */
.choix-notifications { border: 0; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.choix-notifications__option { position: relative; cursor: pointer; }
.choix-notifications__option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choix-notifications__option span {
display: inline-flex; align-items: center; gap: .5rem; padding: .6rem .9rem; border-radius: 10px;
border: 1.5px solid var(--trait); background: var(--blanc); color: var(--encre-douce); font-size: .9rem;
}
.choix-notifications__option .icone { width: 1.15rem; height: 1.15rem; }
.choix-notifications__option input:checked + span { border-color: var(--cyan-fonce); background: var(--cyan-pale); color: var(--encre); box-shadow: inset 0 0 0 1px var(--cyan-fonce); }
.choix-notifications__option input:checked + span .icone { color: var(--lien); }
.choix-notifications__option input:focus-visible + span { outline: 3px solid var(--cyan); outline-offset: 2px; }
.reglage h2 + .choix-notifications { margin-top: .2rem; }
.reglage form { margin: 0; }
/* ---- types d'entraînement (lanceur, Paramètres) ---- */
.lanceur { display: grid; gap: .85rem; margin: 0; }
.lanceur .actions-ligne { margin: 0; }
.types-entrainement { border: 0; margin: 0 0 .9rem; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.lanceur .types-entrainement { margin: 0; }
.types-entrainement legend { font-size: .88rem; font-weight: 700; margin-bottom: .45rem; padding: 0; }
.types-entrainement legend span { font-weight: 400; color: var(--encre-douce); }
.type-choix { cursor: pointer; position: relative; }
.type-choix input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.type-choix span {
display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .7rem; border-radius: 9px;
border: 1.5px solid var(--trait); background: var(--blanc); font-weight: 700; font-size: .86rem;
}
.type-choix small { font-weight: 400; color: var(--encre-douce); }
.type-choix:hover span { border-color: var(--cyan); }
.type-choix input:checked + span { background: var(--encre); border-color: var(--encre); color: var(--blanc); }
.type-choix input:checked + span small { color: inherit; opacity: .8; }
.type-choix input:focus-visible + span { outline: 3px solid var(--ambre); outline-offset: 2px; }
/* ---- accueil d'un quizz : s'entraîner | le contenu ---- */
.quiz-accueil { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); gap: 1rem; align-items: start; margin: 0 0 1.2rem; }
.panneau-entrainement, .panneau-contenu {
display: grid; align-content: start; gap: .85rem; padding: 1.2rem 1.3rem 1.3rem;
background: var(--blanc); border: 1px solid var(--trait); border-radius: 16px;
}
.panneau-entrainement { border-top: 5px solid var(--teinte, var(--cyan)); }
.panneau-entrainement__titre, .panneau-contenu__titre { display: flex; align-items: center; gap: .55rem; margin: 0; font-size: 1.12rem; }
.panneau-entrainement__cartes { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .7rem; margin: 0; padding-top: .7rem; border-top: 1px solid var(--trait); font-size: .86rem; color: var(--encre-douce); }
.panneau-entrainement__cartes > .icone { color: var(--encre-douce); flex: none; }
.panneau-entrainement__cartes > span { flex: 1 1 15rem; min-width: 0; }
.panneau-entrainement__cartes form { margin: 0; }
.panneau-contenu__compte { margin: 0; font-size: .9rem; color: var(--encre-douce); }
.panneau-contenu > .bouton { justify-self: stretch; justify-content: flex-start; text-align: left; font-size: .92rem; }
.panneau-contenu__liens { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; font-size: .88rem; }
.reprise-encadre { padding: .7rem .9rem; border-radius: 12px; background: var(--cyan-pale); border-left: 4px solid var(--cyan); }
.reprise-encadre p { margin: 0 0 .4rem; }
.reprise-encadre .actions-ligne { margin: 0; }
/* ---- question ouverte (18/10) : éléments de réponse, où chercher, engagement ---- */
.editeur__ouverte { display: none; }
.editeur:has(input[name="type"][value="ouverte"]:checked) .editeur__ouverte { display: block; }
.editeur:has(input[name="type"][value="ouverte"]:checked) :is(.editeur__qcm, .editeur__aide) { display: none; }
.editeur__reformule { margin-top: .4rem; }
/* ---- question ouverte : rédaction et corrigé (18/10) ---- */
.redaction { display: block; margin-top: 1rem; }
.redaction__champ { width: 100%; }
.ouverte-mienne { margin-top: 1rem; padding: .8rem 1rem; border-radius: .6rem; background: var(--fond-doux, rgba(127, 127, 127, .08)); }
.ouverte-mienne__texte { margin: .3rem 0 0; white-space: pre-line; }
.ouverte-autres { margin-top: 1rem; }
.ouverte-autres__liste { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .6rem; }
.ouverte-reponse { padding: .7rem .9rem; border: 1px solid var(--trait, rgba(127, 127, 127, .3)); border-radius: .6rem; }
.ouverte-reponse__texte { margin: 0; white-space: pre-line; }
.ouverte-reponse__pied { display: flex; justify-content: space-between; align-items: center; gap: .8rem; margin: .4rem 0 0; font-size: .85em; }
.ouverte-reponse__utile { display: inline; }
.ouverte-reponse__utile .est-vote { font-weight: 700; }
.ouverte-evaluer { gap: .6rem; }
/* ---- « cette entrée servira dans… » : le multiplicateur visible (18/10) ---- */
.editeur__usages { display: flex; gap: .5rem; align-items: baseline; margin: .2rem 0 0; font-size: .9em; }
.editeur__usages .usages { display: none; }
.editeur:has(input[name="type"][value="unique"]:checked) .usages--unique,
.editeur:has(input[name="type"][value="multiple"]:checked) .usages--multiple,
.editeur:has(input[name="type"][value="ordre"]:checked) .usages--ordre,
.editeur:has(input[name="type"][value="trous"]:checked) .usages--trous,
.editeur:has(input[name="type"][value="carte"]:checked) .usages--carte { display: inline; }
/* ---- chapitres (Module de révision, 18/10) ---- */
.champ-numero-chapitre { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: .8rem; }
.refus-chapitre { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.refus-chapitre__motif { flex: 1 1 12rem; min-width: 0; }
.carte-quiz--proposition { border-style: dashed; }
/* ---- éditeur commun : une carte recto / verso est un type de plus ---- */
.editeur__carte { display: none; }
.editeur:has(input[name="type"][value="carte"]:checked) .editeur__carte { display: block; }
.editeur:has(input[name="type"][value="carte"]:checked) :is(.editeur__question, .editeur__qcm, .editeur__vf, .editeur__plus) { display: none; }
.editeur__carte .carte-editeur__faces { margin-top: .6rem; }
/* ---- le rappel du jour (haut de Mes révisions) ---- */
.rappel-du-jour {
display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; margin: 0 0 1.1rem;
padding: .85rem 1.1rem; border-radius: 14px; background: var(--blanc); border: 1px solid var(--trait);
}
.rappel-du-jour__icone {
flex: none; width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center;
background: var(--cyan-pale); color: var(--lien);
}
.rappel-du-jour__icone .icone { width: 1.25rem; height: 1.25rem; }
.rappel-du-jour__texte { display: grid; gap: .1rem; flex: 1 1 18rem; min-width: 0; }
.rappel-du-jour__texte span { font-size: .88rem; color: var(--encre-douce); }
.rappel-du-jour__report { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .1rem .5rem; }
.rappel-du-jour__report .bouton-lien { font-size: .84rem; padding: 0; }
/* ---- total + « Pas maintenant ? Me le rappeler dans 1 h » ---- */
.revisions-haut { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin: 0 0 .9rem; }
.revisions-haut .revisions-total { margin: 0; }
.plus-tard { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0; }
.plus-tard__libelle { display: inline-flex; align-items: center; gap: .35rem; font-size: .86rem; color: var(--encre-douce); }
/* ---- jours de la semaine (Paramètres) ---- */
.jours { border: 0; margin: 0 0 .6rem; padding: 0; min-width: 0; }
.jours legend { padding: 0; margin: 0 0 .45rem; font-weight: 700; font-size: .9rem; }
.jours__liste { display: flex; flex-wrap: wrap; gap: .35rem; }
.jour { position: relative; }
.jour input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.jour span {
display: inline-grid; place-items: center; min-width: 2.7rem; padding: .4rem .5rem; border-radius: 8px;
border: 1px solid var(--trait); background: var(--papier); color: var(--encre-douce);
font: 700 .82rem var(--texte); cursor: pointer; user-select: none;
}
.jour input:checked + span { background: var(--cyan-fonce); border-color: var(--cyan-fonce); color: #fff; }
.jour input:focus-visible + span { outline: 3px solid var(--cyan-pale); outline-offset: 1px; }
/* ---- arrêtés (Mes révisions) ---- */
.suivis-arretes { margin: 1.2rem 0 1.4rem; }
.suivis-arretes > summary {
display: inline-flex; align-items: center; gap: .45rem; cursor: pointer;
font: 700 1rem var(--titre); color: var(--encre-douce); margin-bottom: .6rem;
}
.suivis-arretes > summary:hover { color: var(--encre); }
/* ---- Mes rappels ---- */
.reglage { margin: 0 0 1.6rem; padding: 1.1rem 1.3rem 1.2rem; background: var(--blanc); border: 1px solid var(--trait); border-radius: 14px; }
.reglage h2 { display: flex; align-items: center; gap: .5rem; margin: 0 0 .6rem; font-size: 1.12rem; }
.reglage h2 .icone { color: var(--lien); }
.reglage h2:not(:first-of-type) { margin-top: 1.4rem; }
.reglage p { max-width: 62ch; }
.reglage__ligne { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .8rem; margin: 0 0 .5rem; }
.reglage__ligne .champ { min-width: 12rem; }
.reglage__sous-titre { margin: 1.2rem 0 .5rem; font-size: 1rem; }
.reglage__case { display: grid; gap: .6rem; justify-items: start; margin: 1.1rem 0 0; }
.reglage__boutons { display: flex; flex-wrap: wrap; gap: .45rem; margin: .4rem 0; }
.push { display: grid; gap: .4rem; }
.push .actions-ligne { margin: .2rem 0; }
.push__etat { margin: 0; font-weight: 700; display: inline-flex; align-items: center; gap: .45rem; justify-self: start; padding: .35rem .8rem; border-radius: 99px; background: var(--papier); border: 1px solid var(--trait); }
.push__etat.est-actif { background: var(--juste-fond); color: var(--juste); border-color: var(--juste-trait); }
.push__ios { margin: .6rem 0 0; }
.push__ios ol { margin: .4rem 0 0; padding-left: 1.2rem; }
.push [hidden], .push__ios[hidden] { display: none !important; } /* .bouton (inline-flex) l'emportait sur hidden */
.appareils { list-style: none; margin: 0 0 .5rem; padding: 0; display: grid; gap: .45rem; }
.appareil {
display: flex; align-items: center; gap: .7rem; padding: .6rem .8rem;
border: 1px solid var(--trait); border-radius: 10px; background: var(--papier);
}
.appareil > .icone { color: var(--encre-douce); }
.appareil__texte { display: grid; flex: 1; min-width: 0; }
.appareil__texte span { font-size: .8rem; color: var(--encre-douce); }
.recap-rappels { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .3rem; }
.recap-rappels li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .2rem 1rem; padding: .35rem 0; border-bottom: 1px solid var(--trait); font-size: .9rem; }
.recap-rappels li:last-child { border-bottom: 0; }
.recap-rappels__etat { color: var(--encre-douce); }
.recap-rappels__etat.est-actif { color: var(--lien); font-weight: 600; }
@media (max-width: 860px) {
.quiz-accueil { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
.bulle { padding: 1rem .625rem 1.1rem; border-radius: 16px; gap: .85rem; margin-left: -.25rem; margin-right: -.25rem; }
.bulle__titre { font-size: 1.25rem; }
.drive-zone .quadri { padding: .75rem .7rem .9rem; }
/* « Q1 1er quadrimestre 8 cours ⌄ » sur une seule ligne, même à 360 px */
.drive-zone .quadri__titre { gap: .4rem; }
.drive-zone .quadri__titre h3 { font-size: 1rem; }
.drive-zone .filtre-cours { min-width: 0; width: 100%; }
.drive-zone .bulle__outils { width: 100%; }
/* Téléphone : UNE ligne par catégorie, qu'on fait défiler du doigt (demande de Matthias, 15/10) —
des tuiles d'une taille correcte, qui gardent leurs informations. 1 tuile : toute la largeur ;
2 : la moitié chacune ; 3 et plus : deux tuiles et le début de la suivante. */
.tuiles {
grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(9.5rem, 44%); gap: .45rem;
overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
/* 6 px autour : le contour de focus ou de :target (3 px + 2 px d'écart) n'est pas rogné */
margin: -6px; padding: 6px 6px .6rem; scroll-padding-inline: 6px; scrollbar-width: thin;
}
.tuiles > li { scroll-snap-align: start; }
.tuiles--t1 { grid-auto-columns: 100%; overflow: visible; padding-bottom: 6px; }
.tuiles--t2 { grid-auto-columns: calc(50% - .225rem); overflow: visible; padding-bottom: 6px; }
}
@media (max-width: 640px) {
/* Le menu ⋯ s'ouvre en bas de l'écran, sur un voile : on voit ce qu'on règle,
et toucher à côté ne déclenche rien d'autre. */
.tuile .menu-suivi__liste, .tuile .menu-suivi--gauche > .menu-suivi__liste, .tuile .menu-suivi--haut > .menu-suivi__liste {
position: fixed; left: .6rem; right: .6rem; bottom: .6rem; top: auto; width: auto; min-width: 0; max-width: none;
padding: .5rem; border-radius: 16px; box-shadow: 0 -6px 30px rgba(0, 0, 0, .25);
/* 19/10 (photo de Matthias) : faire défiler le menu ne fait plus défiler la page derrière. */
max-height: min(78vh, calc(100vh - 5rem)); max-height: min(78dvh, calc(100dvh - 5rem));
overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
.tuile .menu-suivi[open]::before { content: ""; position: fixed; inset: 0; z-index: 0; background: rgba(10, 20, 35, .4); touch-action: none; }
html:has(.tuile .menu-suivi[open]) { overflow: hidden; }
.tuile .menu-suivi[open] > summary { position: relative; z-index: 2; background: var(--blanc); }
.tuile .menu-suivi__choix { padding: .7rem .7rem; font-size: .95rem; }
.rappel-du-jour .bouton { width: 100%; }
}
/* ======================================================================
Jeux des quizz (15/10) — le hub « Jouer » de l'accueil d'un quizz, et les
classements (classement.php). Les jeux eux-mêmes : assets/css/jeux.css.
====================================================================== */
.jouer { margin: 1.6rem 0; padding: 1.2rem 1.3rem 1.3rem; background: var(--blanc); border: 1px solid var(--trait); border-radius: 18px; box-shadow: var(--ombre-drive); scroll-margin-top: 90px; }
.jouer__haut { display: grid; gap: .2rem; margin-bottom: 1rem; }
.jouer__titre { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: 1.25rem; }
.jouer__titre .icone { color: var(--teinte, var(--cyan)); }
.jouer__texte { margin: 0; max-width: 60ch; color: var(--encre-douce); font-size: .92rem; line-height: 1.5; }
.jouer__reprise { margin: 0 0 1rem; }
.jouer__grille { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; }
.jeu-tuile { display: grid; }
.jeu-tuile form { display: grid; }
.jeu-tuile__bouton {
width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "icone nom" "icone texte" "pied pied";
align-content: start; gap: .15rem .75rem; padding: .9rem 1rem; text-align: left; font: inherit; color: inherit;
background: var(--papier); border: 1px solid var(--trait); border-radius: 14px;
}
button.jeu-tuile__bouton { cursor: pointer; transition: border-color .15s, background-color .15s, transform .15s, box-shadow .15s; }
button.jeu-tuile__bouton:hover { border-color: var(--teinte, var(--cyan)); background: var(--teinte-pale, var(--cyan-pale)); transform: translateY(-2px); box-shadow: var(--ombre-drive); }
button.jeu-tuile__bouton:focus-visible { outline: 3px solid var(--ambre); outline-offset: 2px; }
.jeu-tuile__icone { grid-area: icone; width: 2.7rem; height: 2.7rem; border-radius: 12px 12px 4px 12px; display: grid; place-items: center; background: var(--teinte, var(--cyan)); color: var(--teinte-texte, #fff); }
.jeu-tuile__icone .icone { width: 1.45rem; height: 1.45rem; }
.jeu-tuile__nom { grid-area: nom; align-self: end; font: 700 1rem/1.25 var(--titre); }
.jeu-tuile__texte { grid-area: texte; font-size: .86rem; line-height: 1.4; color: var(--encre-douce); }
.jeu-tuile__pied, .jeu-tuile__manque, .jeu-tuile__ajout { grid-column: 1 / -1; margin-top: .55rem; font-size: .8rem; line-height: 1.4; }
.jeu-tuile__pied { color: var(--encre-douce); font-weight: 600; }
.jeu-tuile--vide .jeu-tuile__bouton { background: none; border-style: dashed; }
.jeu-tuile--vide .jeu-tuile__icone { background: var(--jauge-fond); color: var(--encre-douce); }
.jeu-tuile--vide .jeu-tuile__nom { color: var(--encre-douce); }
.jeu-tuile__manque { color: var(--encre-douce); }
.jeu-tuile__ajout { justify-self: start; display: inline-flex; align-items: center; gap: .3rem; font-weight: 700; color: var(--lien); text-decoration: none; }
.jeu-tuile__ajout:hover { text-decoration: underline; }
.jeu-tuile__ajout .icone { width: 1rem; height: 1rem; }
@media (max-width: 860px) {
.jouer__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
.jouer { padding: 1rem .8rem 1rem; border-radius: 16px; }
.jouer__grille { gap: .5rem; }
.jeu-tuile__bouton { grid-template-columns: minmax(0, 1fr); grid-template-areas: "icone" "nom" "texte" "pied"; gap: .2rem; padding: .8rem .75rem; }
.jeu-tuile__icone { margin-bottom: .3rem; width: 2.4rem; height: 2.4rem; }
.jeu-tuile__texte { font-size: .8rem; }
}
/* ---- éditeur de questions : le lien vers les classements ---- */
.editeur__classement {
display: flex; gap: .65rem; align-items: flex-start; margin: 0; max-width: none;
font-size: .87rem; color: var(--encre-douce); background: var(--papier);
border: 1px solid var(--trait); border-radius: 12px; padding: .7rem .9rem;
}
.editeur__classement .icone { flex: none; width: 1.3rem; height: 1.3rem; color: var(--teinte, var(--cyan)); margin-top: .05rem; }
/* ---- classements : la liste ---- */
.classements-liste { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 1rem; }
.classement-fiche { padding: 1rem 1.1rem 1.1rem; background: var(--blanc); border: 1px solid var(--trait); border-top: 5px solid var(--teinte, var(--cyan)); border-radius: 6px 6px 16px 16px; box-shadow: var(--ombre-drive); scroll-margin-top: 90px; }
.classement-fiche:target { outline: 3px solid var(--ambre); outline-offset: 3px; }
.classement-fiche__haut { display: flex; align-items: flex-start; gap: .8rem; flex-wrap: wrap; }
.classement-fiche__icone { flex: none; width: 2.4rem; height: 2.4rem; border-radius: 10px; display: grid; place-items: center; background: var(--teinte-pale); color: var(--teinte, var(--cyan)); }
.classement-fiche__titre { flex: 1 1 14rem; min-width: 0; }
.classement-fiche__titre h2 { margin: 0; font-size: 1.1rem; }
.classement-fiche__titre p { margin: .15rem 0 0; font-size: .85rem; color: var(--encre-douce); }
.classement-fiche__groupes { list-style: none; margin: .9rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .6rem; }
.classement-groupe { display: grid; align-content: start; gap: .35rem; padding: .7rem .8rem; border-radius: 12px; background: var(--papier); border: 1px solid var(--trait); }
.classement-groupe__photo { width: 3rem; height: 3rem; border-radius: 50%; object-fit: cover; }
.classement-groupe__nom { margin: 0; font-size: .95rem; }
.classement-groupe__nom span { font-size: .8rem; color: var(--encre-douce); }
.classement-groupe__elements { margin: 0; padding-left: 1.1rem; font-size: .88rem; line-height: 1.45; }
.classement-groupe__image { display: block; max-width: 6rem; max-height: 4rem; border-radius: 6px; margin: .2rem 0; }
.classement-groupe__vide { margin: 0; font-size: .85rem; color: var(--encre-douce); font-style: italic; }
/* ---- classements : l'éditeur ---- */
.classement-editeur { display: grid; gap: 1.1rem; max-width: 52rem; }
.classement-editeur__titre { margin: 0; font-size: 1.4rem; }
.natures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; border: 0; padding: 0; margin: 0; }
.natures legend { margin-bottom: .5rem; }
.nature-choix { display: grid; cursor: pointer; }
.nature-choix input { position: absolute; opacity: 0; pointer-events: none; }
.nature-choix__carte { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .15rem .6rem; align-content: start; height: 100%; padding: .8rem .9rem; border-radius: 14px; border: 1.5px solid var(--trait); background: var(--blanc); }
.nature-choix__carte .icone { grid-row: span 2; width: 1.6rem; height: 1.6rem; color: var(--teinte, var(--cyan)); }
.nature-choix__carte strong { font: 700 .95rem/1.3 var(--titre); }
.nature-choix__carte small { font-size: .82rem; line-height: 1.4; color: var(--encre-douce); }
.nature-choix input:checked + .nature-choix__carte { border-color: var(--teinte, var(--cyan)); box-shadow: 0 0 0 2px var(--teinte, var(--cyan)); background: var(--teinte-pale, var(--cyan-pale)); }
.nature-choix input:focus-visible + .nature-choix__carte { outline: 3px solid var(--ambre); outline-offset: 2px; }
.si-personnages, .si-categories { display: none; }
.classement-editeur:has(input[name="nature"][value="personnages"]:checked) .si-personnages,
.classement-editeur:has(input[name="nature"][value="categories"]:checked) .si-categories { display: inline; }
.groupes-editeur { display: grid; gap: .9rem; }
.groupe-editeur { margin: 0; padding: .9rem 1rem 1rem; border: 1px solid var(--trait); border-left: 5px solid var(--teinte, var(--cyan)); border-radius: 12px; background: var(--blanc); }
.groupe-editeur__titre { padding: 0 .3rem; font: 700 .8rem var(--titre); letter-spacing: .06em; text-transform: uppercase; color: var(--encre-douce); }
.groupe-editeur__haut { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: .6rem; align-items: end; }
.groupe-editeur__haut .champ { margin: 0; }
.groupe-editeur__haut .image-champ { align-self: end; }
.groupe-editeur__sous-titre { margin: .9rem 0 .4rem; font-size: .82rem; font-weight: 700; color: var(--encre-douce); }
.el-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.el-ligne { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .3rem .4rem; align-items: start; padding: .45rem .5rem; border-radius: 10px; background: var(--papier); border: 1px solid var(--trait); }
.el-ligne__contenu { display: flex; align-items: flex-start; gap: .4rem; min-width: 0; }
.el-ligne__texte { flex: 1; min-width: 0; min-height: 2.4rem; resize: vertical; }
.el-ligne__retirer { width: 2.2rem; height: 2.2rem; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--encre-douce); cursor: pointer; }
.el-ligne__retirer:hover { background: var(--faux-fond); color: var(--faux); }
.el-ligne__retirer[hidden] { display: none; }
.el-ligne__justif { grid-column: 1 / -1; font-size: .85rem; }
.el-ligne__justif summary { cursor: pointer; color: var(--lien); font-weight: 600; }
.el-ligne__justif summary span { font-weight: 400; color: var(--encre-douce); }
.el-ligne__justif textarea { width: 100%; margin-top: .35rem; }
.groupe-editeur__pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .5rem; }
.groupe-editeur__pied [hidden] { display: none; }
.groupes-editeur__ajout { justify-self: start; }
.classement-editeur__aide { margin: -.4rem 0 0; }
@media (max-width: 640px) {
.natures { grid-template-columns: minmax(0, 1fr); }
.groupe-editeur { padding: .8rem .7rem .9rem; }
.groupe-editeur__haut { grid-template-columns: minmax(0, 1fr); }
.el-ligne__contenu { flex-wrap: wrap; }
}
.el-ligne textarea {
font: inherit; font-size: .95rem; line-height: 1.45; color: var(--encre);
background: var(--blanc); border: 1px solid var(--trait); border-radius: 8px; padding: .5rem .65rem;
}
.el-ligne textarea:focus { border-color: var(--cyan); outline: 3px solid var(--cyan-pale); outline-offset: 0; }
.classement-editeur .champ.editeur__bloc { margin: 0; }
/* ======================================================================
Cartes recto / verso : la pile (15/10, maquette A « Pile à balayer »).
La carte du dessus, deux cartes dessous ; avec drive.js (.est-3d) elle se
retourne en 3D et, retournée, se balaie (tampons « Je savais » / « À revoir »).
====================================================================== */
.pile { max-width: 34rem; }
.pile__tas { position: relative; padding-bottom: 26px; }
.pile__dessous { position: absolute; inset: 0 0 26px; border-radius: 6px 6px 18px 18px; background: var(--blanc); border: 1px solid var(--trait); box-shadow: var(--ombre-drive); }
.pile__dessous--1 { transform: translateY(13px) scale(.95); opacity: .9; }
.pile__dessous--2 { transform: translateY(26px) scale(.9); opacity: .7; }
.pile__carte { position: relative; z-index: 2; min-height: 22rem; touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.pile__carte:hover { transform: none; }
.pile .carte-apprendre__face { min-height: 19rem; }
.pile__rappel { display: block; padding-bottom: .55rem; margin-bottom: .2rem; border-bottom: 1px dashed var(--teinte-trait, var(--trait)); font: 700 .85rem var(--titre); color: var(--encre-douce); text-align: center; }
.pile__tampon {
position: absolute; top: 1.4rem; z-index: 6; padding: .3rem .7rem; border-radius: 8px; border: 3px solid; background: var(--blanc);
font: 700 .95rem var(--titre); text-transform: uppercase; letter-spacing: .04em; opacity: 0; transition: opacity .1s; pointer-events: none;
}
.pile__tampon--ok { left: 1.2rem; color: var(--juste); border-color: var(--jauge-juste); transform: rotate(-12deg); }
.pile__tampon--ko { right: 1.2rem; color: var(--faux); border-color: var(--jauge-fausse); transform: rotate(12deg); }
.pile.vise-ok .pile__tampon--ok, .pile.vise-ko .pile__tampon--ko { opacity: 1; }
/* 3D (drive.js) : les deux faces dans la même case, dos à dos. */
.pile.est-3d .pile__carte { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; perspective: 1400px; transition: transform .35s cubic-bezier(.2, .8, .3, 1), opacity .35s; }
.pile.est-3d .pile__int { display: grid; transform-style: preserve-3d; transition: transform .55s cubic-bezier(.3, .7, .25, 1.15); }
.pile.est-3d .carte-apprendre__face {
grid-area: 1 / 1; display: flex; padding: 1.3rem 1.5rem 1.1rem; min-height: 22rem;
background: var(--blanc); border: 1px solid var(--trait); border-top: 5px solid var(--teinte, var(--cyan)); border-radius: 6px 6px 18px 18px; box-shadow: var(--ombre-drive);
-webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.pile.est-3d .carte-apprendre__verso { transform: rotateY(180deg); background: var(--teinte-pale, var(--blanc)); border-top-color: var(--teinte-trait, var(--trait)); }
.pile.est-3d.est-retournee .pile__int { transform: rotateY(180deg); }
.pile.est-tenue .pile__carte { transition: none; cursor: grabbing; }
.pile.sort-droite .pile__carte { transform: translate(140%, 30px) rotate(22deg); opacity: 0; }
.pile.sort-gauche .pile__carte { transform: translate(-140%, 30px) rotate(-22deg); opacity: 0; }
.pile .carte-apprendre__face[hidden] { display: none; }
.pile.est-3d .carte-apprendre__face[hidden] { display: flex; }
.pile__consigne-balayer[hidden] { display: none !important; }
/* La zone des réponses : « Retourner », puis ✗ ↶ ✓ (ou les quatre notes). */
.pile__zone { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: .9rem 1.4rem; min-height: 6rem; margin-top: .4rem; }
.pile__zone > form { display: contents; }
.pile__zone > form[hidden] { display: none; }
.pile__retourner { order: 3; flex: 1 1 14rem; max-width: 22rem; min-height: 3.3rem; justify-content: center; font-size: 1rem; }
.pile__retourner[hidden] { display: none; }
.pile__ronds { margin: 0; }
.pile__rond { display: grid; justify-items: center; gap: .25rem; padding: 0; border: 0; background: none; cursor: pointer; font: 600 .82rem var(--texte); color: var(--encre-douce); }
.pile__rond kbd { display: none; }
.pile__disque { width: 4.1rem; height: 4.1rem; border-radius: 50%; display: grid; place-items: center; background: var(--blanc); border: 2px solid; box-shadow: var(--ombre-drive); transition: transform .12s; }
.pile__disque .icone { width: 1.6rem; height: 1.6rem; stroke-width: 2.4; }
.pile__rond:active .pile__disque { transform: scale(.93); }
.pile__rond:hover .pile__disque { box-shadow: 0 0 0 4px var(--papier), var(--ombre-drive); }
.pile__rond--ko { order: 1; }
.pile__rond--ko .pile__disque { color: var(--jauge-fausse); border-color: var(--faux-trait); }
.pile__rond--annuler { order: 2; }
.pile__rond--annuler .pile__disque { width: 3rem; height: 3rem; margin-top: .55rem; color: var(--encre-douce); border-color: var(--trait); }
.pile__rond--annuler .pile__disque .icone { width: 1.2rem; height: 1.2rem; stroke-width: 1.9; }
.pile__rond--ok { order: 3; }
.pile__rond--ok .pile__disque { color: var(--jauge-juste); border-color: var(--juste-trait); }
.pile__zone--notes > .carte-apprendre__reponses--notes { display: grid; order: 3; flex: 1 1 100%; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .45rem; margin: 0; }
.pile__zone--notes > .carte-apprendre__reponses--notes[hidden] { display: none; }
.pile__zone--notes .note-encore, .pile__zone--notes .note-difficile, .pile__zone--notes .note-bien, .pile__zone--notes .note-facile { min-width: 0; min-height: 4rem; border-radius: 12px; }
@media (hover: hover) and (pointer: fine) {
.pile__rond kbd { display: inline-block; margin-left: .3rem; padding: .05rem .35rem; border-radius: 4px; font: 600 .7rem var(--texte); background: var(--papier); color: var(--encre-douce); border: 1px solid var(--trait); }
}
@media (max-width: 640px) {
.pile__carte, .pile.est-3d .carte-apprendre__face { min-height: 19rem; }
.pile.est-3d .carte-apprendre__face { padding: 1rem 1.1rem .9rem; }
.pile__zone--notes > .carte-apprendre__reponses--notes .bouton { padding: .5rem .2rem; font-size: .85rem; }
}
.pile .pile__carte, .pile .pile__carte:visited { color: var(--encre); }
.pile + .carte-apprendre__aide { margin-left: auto; margin-right: auto; }
.el-ligne .image-champ__vignette { max-height: 4.5rem; max-width: 7rem; }
.el-ligne__justif textarea::placeholder { color: var(--encre-douce); }
/* ==========================================================================
Module de révision (18/10) — quizz.php, d'après les maquettes validées par
Matthias : trois grandes tuiles (Jouer, Ajouter, S'entraîner) qui ouvrent
leur tiroir juste en dessous, puis les chapitres en tuiles. Préfixe rv-.
La couleur du cours (--teinte) pour les aplats, des tons calmes.
========================================================================== */
.rv-module { --teinte-encre: color-mix(in srgb, var(--teinte, var(--cyan)) 72%, var(--encre)); }
form.forme-bouton { display: contents; }
.rv-progres { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; margin: -.4rem 0 1.2rem; }
.rv-progres__jauge { flex: 1 1 14rem; max-width: 26rem; }
.rv-progres__texte { margin: 0; font-size: .9rem; color: var(--encre-douce); }
.rv-progres__texte strong { color: var(--encre); }
.rv-reprise { margin: 0 0 1.2rem; }
/* ligne 1 : les trois grandes tuiles */
.rv-trois { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0 0 4px; }
.rv-grande {
position: relative; display: flex; align-items: center; gap: 16px; min-height: 112px; padding: 18px 20px;
background: var(--blanc); border: 1px solid var(--teinte-trait, var(--trait)); border-radius: 16px; box-shadow: var(--ombre-drive);
color: var(--encre); text-align: left; text-decoration: none;
transition: background-color .18s ease, transform .16s ease, box-shadow .18s ease, color .18s ease;
}
.rv-grande:hover { color: var(--encre); transform: translateY(-2px); box-shadow: 0 2px 6px rgba(16, 36, 58, .08), 0 18px 40px rgba(16, 36, 58, .14); }
.rv-grande__icone { flex: none; width: 60px; height: 60px; border-radius: 16px; display: grid; place-items: center; background: var(--teinte-pale); border: 1px solid var(--teinte-trait, var(--trait)); color: var(--teinte-encre); }
.rv-grande__ic { width: 30px; height: 30px; }
.rv-grande__textes { flex: 1; min-width: 0; display: grid; gap: 3px; }
.rv-grande__titre { font: 700 1.2rem/1.2 var(--titre); }
.rv-grande__sous { font-size: .85rem; line-height: 1.4; color: var(--encre-douce); }
.rv-grande__chevron { flex: none; color: var(--encre-douce); transition: transform .22s ease; }
.rv-grande.est-ouverte { background: var(--teinte); border-color: var(--teinte); color: var(--teinte-texte); }
.rv-grande.est-ouverte:hover { color: var(--teinte-texte); }
.rv-grande.est-ouverte .rv-grande__icone { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .35); color: var(--teinte-texte); }
.rv-grande.est-ouverte .rv-grande__sous, .rv-grande.est-ouverte .rv-grande__chevron { color: var(--teinte-texte); opacity: .88; }
.rv-grande.est-ouverte .rv-grande__chevron { transform: rotate(180deg); }
.rv-grande.est-ouverte::after { content: ""; position: absolute; left: 50%; bottom: -13px; width: 24px; height: 24px; margin-left: -12px; background: var(--teinte); transform: rotate(45deg); border-radius: 0 0 5px 0; }
/* ligne 2 : le tiroir */
.rv-tiroir {
position: relative; margin-top: 18px; padding: 22px 24px 24px; scroll-margin-top: 90px;
background: var(--blanc); border: 2px solid var(--teinte, var(--cyan)); border-radius: 18px; box-shadow: var(--ombre-drive);
display: grid; gap: 18px; animation: rv-ouvre .26s cubic-bezier(.2, .8, .3, 1);
}
@keyframes rv-ouvre { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.rv-tiroir__tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.rv-tiroir__titre { margin: 0; font-size: 1.15rem; }
.rv-tiroir__aide { margin: 0; font-size: .88rem; color: var(--encre-douce); }
.rv-vide { margin: 0; color: var(--encre-douce); }
.rv-etape { display: grid; gap: 10px; margin: 0; }
.rv-etape__titre { display: flex; align-items: center; gap: 9px; margin: 0; font: 700 .8rem var(--titre); letter-spacing: .06em; text-transform: uppercase; color: var(--encre-douce); }
.rv-etape__num { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--teinte, var(--cyan)); color: var(--teinte-texte, #fff); font: 700 .75rem var(--titre); letter-spacing: 0; }
.rv-etape__note { margin: 0; font-size: .8rem; color: var(--encre-douce); }
.rv-portee { display: flex; flex-wrap: wrap; gap: 8px; }
.rv-puce {
display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 14px 0 6px;
border-radius: 99px; border: 1px solid var(--trait); background: var(--blanc); color: var(--encre);
font: 600 .88rem var(--texte); white-space: nowrap; text-decoration: none;
}
.rv-puce:hover { color: var(--encre); border-color: var(--teinte, var(--cyan)); }
.rv-puce__n { min-width: 28px; height: 28px; padding: 0 6px; border-radius: 99px; display: grid; place-items: center; background: var(--teinte-pale); color: var(--teinte-encre); font: 700 .78rem var(--titre); }
.rv-puce__auto { padding: 1px 7px; border-radius: 99px; font: 700 .62rem var(--titre); letter-spacing: .05em; text-transform: uppercase; background: var(--papier); color: var(--encre-douce); border: 1px solid var(--trait); }
.rv-puce.est-choisie { background: var(--teinte, var(--cyan)); border-color: var(--teinte, var(--cyan)); color: var(--teinte-texte, #fff); }
.rv-puce.est-choisie .rv-puce__n { background: rgba(255, 255, 255, .22); color: var(--teinte-texte, #fff); }
.rv-puce.est-choisie .rv-puce__auto { background: rgba(255, 255, 255, .2); color: var(--teinte-texte, #fff); border-color: transparent; }
/* Jouer : deux grands lancements — Tout enchaîner, Mes erreurs (tons doux, 18/10) */
.rv-lancer { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.rv-vedette {
position: relative; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px 18px; min-height: 172px; padding: 20px 22px; width: 100%;
border-radius: 14px; background: var(--teinte-pale); border: 1px solid var(--teinte-trait, var(--trait)); color: var(--encre);
font: inherit; text-align: left; cursor: pointer; transition: transform .16s ease, box-shadow .16s ease;
}
.rv-vedette:hover { transform: translateY(-2px); box-shadow: var(--ombre-drive); }
.rv-vedette__icone { flex: none; width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--teinte, var(--cyan)); color: var(--teinte-texte, #fff); }
.rv-vedette__textes { flex: 1 1 200px; min-width: 0; display: grid; gap: 3px; }
.rv-vedette__titre { font: 700 1.15rem var(--titre); }
.rv-vedette__sous { font-size: .88rem; line-height: 1.45; color: var(--encre-douce); }
.rv-vedette__pied { position: relative; width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; }
.rv-vedette__chaine { display: flex; flex-wrap: wrap; gap: 6px; }
.rv-vedette__chaine span { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--blanc); border: 1px solid var(--teinte-trait, var(--trait)); color: var(--teinte-encre); }
.rv-vedette__go { flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 46px; padding: 0 20px; border-radius: 99px; background: var(--teinte, var(--cyan)); color: var(--teinte-texte, #fff); font: 700 .92rem var(--titre); }
.rv-vedette__note { font-size: .84rem; color: var(--encre-douce); }
.rv-vedette--erreurs { --erreur: #a80039; background: color-mix(in srgb, var(--erreur) 7%, var(--blanc)); border-color: color-mix(in srgb, var(--erreur) 26%, var(--blanc)); }
.rv-vedette--erreurs .rv-vedette__icone, .rv-vedette--erreurs .rv-vedette__go { background: var(--erreur); color: #fff; }
.rv-vedette__compte { flex: none; display: grid; justify-items: center; line-height: 1; padding: 8px 14px; border-radius: 14px; background: var(--blanc); border: 1px solid color-mix(in srgb, var(--erreur, var(--teinte)) 26%, var(--blanc)); }
.rv-vedette__compte b { font: 700 2.1rem/1 var(--titre); color: var(--erreur, var(--teinte-encre)); }
.rv-vedette__compte small { margin-top: 4px; font-size: .75rem; font-weight: 700; letter-spacing: .04em; color: var(--encre-douce); }
.rv-vedette.est-vide { cursor: default; min-height: 0; background: var(--papier); border: 1px dashed var(--trait); }
.rv-vedette.est-vide:hover { transform: none; box-shadow: none; }
.rv-vedette.est-vide .rv-vedette__icone { background: var(--juste); color: #fff; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .rv-vedette--erreurs { --erreur: #ff8fae; }
:root:not([data-theme="light"]) .rv-vedette--erreurs .rv-vedette__icone, :root:not([data-theme="light"]) .rv-vedette--erreurs .rv-vedette__go { color: #2a0612; }
}
:root[data-theme="dark"] .rv-vedette--erreurs { --erreur: #ff8fae; }
:root[data-theme="dark"] .rv-vedette--erreurs .rv-vedette__icone, :root[data-theme="dark"] .rv-vedette--erreurs .rv-vedette__go { color: #2a0612; }
/* … et en petit : un seul jeu, l'ambiance */
.rv-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rv-ligne__lib { flex: none; margin-right: 4px; font: 700 .8rem var(--titre); letter-spacing: .04em; color: var(--encre-douce); white-space: nowrap; }
.rv-mini {
display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 12px; border-radius: 99px;
border: 1px solid var(--trait); background: var(--blanc); color: var(--encre); font: 600 .84rem var(--texte); white-space: nowrap; cursor: pointer;
}
.rv-mini:hover { border-color: var(--teinte, var(--cyan)); background: var(--teinte-pale); }
.rv-mini.est-vide { opacity: .5; border-style: dashed; cursor: help; }
.rv-mini.est-vide:hover { border-color: var(--trait); background: var(--blanc); }
.rv-amb {
display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px 0 5px; border-radius: 10px;
border: 1px solid var(--trait); background: var(--blanc); color: var(--encre); font: 600 .84rem var(--texte); cursor: pointer; white-space: nowrap;
}
.rv-amb.est-choisie { border: 2px solid var(--teinte, var(--cyan)); padding: 0 11px 0 4px; }
.amb-mini__apercu { flex: none; width: 36px; height: 28px; border-radius: 6px; }
.amb-mini__apercu--simple { background: linear-gradient(var(--cyan-fonce), var(--cyan-fonce)) 50% 74% / 60% 5px no-repeat, linear-gradient(var(--teinte, var(--cyan)), var(--teinte, var(--cyan))) top / 100% 4px no-repeat, linear-gradient(var(--trait), var(--trait)) 22% 40% / 56% 3px no-repeat, var(--blanc); box-shadow: inset 0 0 0 1px var(--trait); }
.amb-mini__apercu--cosmos { background: radial-gradient(1px 1px at 20% 30%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 72% 62%, #fff 50%, transparent 51%), radial-gradient(1.2px 1.2px at 46% 78%, #cfe6ff 50%, transparent 51%), radial-gradient(ellipse at 20% 20%, rgba(98, 70, 200, .6), transparent 60%), #03040b; box-shadow: inset 0 0 0 1px rgba(125, 227, 255, .55); }
.amb-mini__apercu--arcade { background: repeating-linear-gradient(90deg, rgba(255, 61, 154, .8) 0 1px, transparent 1px 7px) 0 100% / 100% 38% no-repeat, linear-gradient(#0b0420 55%, #5b0f63); box-shadow: inset 0 0 0 1px #2de2ff; }
.amb-mini__apercu--plateau { background: radial-gradient(ellipse 30% 25% at 30% 35%, rgba(60, 40, 15, .5), transparent 70%), radial-gradient(#3d6a4b, #19331f); box-shadow: inset 0 0 0 3px #6b4022; }
.amb-mini__apercu--foret { background: radial-gradient(circle at 70% 58%, #a6f3df 0 1.2px, transparent 2.4px), linear-gradient(100deg, transparent 16%, #020403 17% 22%, transparent 23% 75%, #020403 76% 82%, transparent 83%), radial-gradient(ellipse at 58% 0%, rgba(200, 225, 220, .35), transparent 60%), linear-gradient(#0b1513, #030605); box-shadow: inset 0 0 0 1px rgba(201, 164, 101, .55); }
/* tuiles d'options (Ajouter, S'entraîner) */
.rv-tuiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.rv-tuiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rv-tuiles--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rv-tuile {
position: relative; display: grid; align-content: start; gap: 5px; min-height: 150px; padding: 15px 15px 14px; width: 100%;
background: var(--blanc); border: 1px solid var(--trait); border-radius: 14px;
color: var(--encre); font: inherit; text-decoration: none; text-align: left; cursor: pointer;
transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.rv-tuile:hover { color: var(--encre); border-color: var(--teinte, var(--cyan)); transform: translateY(-2px); box-shadow: var(--ombre-drive); }
.rv-tuile__icone { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 4px; background: var(--teinte-pale); color: var(--teinte-encre); border: 1px solid var(--teinte-trait, var(--trait)); }
.rv-tuile__nom { font: 700 .92rem/1.3 var(--titre); }
.rv-tuile__texte { font-size: .8rem; line-height: 1.42; color: var(--encre-douce); }
.rv-tuile__nourrit { margin-top: auto; padding-top: 8px; display: flex; flex-wrap: wrap; gap: 4px; }
.rv-tuile__nourrit span { padding: 2px 7px; border-radius: 99px; font-size: .7rem; font-weight: 700; background: var(--papier); border: 1px solid var(--trait); color: var(--encre-douce); }
.rv-tuile__nb { position: absolute; top: 13px; right: 13px; min-width: 28px; height: 28px; padding: 0 8px; border-radius: 99px; display: grid; place-items: center; background: var(--teinte, var(--cyan)); color: var(--teinte-texte, #fff); font: 700 .8rem var(--titre); }
.rv-tuile__manque { margin-top: auto; padding-top: 8px; font-size: .78rem; line-height: 1.35; color: var(--encre-douce); }
.rv-tuile.est-vide { cursor: default; background: var(--papier); border-style: dashed; }
.rv-tuile.est-vide:hover { transform: none; box-shadow: none; border-color: var(--trait); }
.rv-tuile.est-vide .rv-tuile__icone { background: transparent; color: var(--encre-douce); border-color: var(--trait); }
.rv-tuile.est-vide .rv-tuile__nom, .rv-tuile.est-vide .rv-tuile__texte { opacity: .7; }
.rv-choix-deux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.rv-choix { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; min-height: 96px; border-radius: 14px; border: 1px solid var(--trait); background: var(--blanc); color: var(--encre); text-decoration: none; }
.rv-choix:hover { color: var(--encre); border-color: var(--teinte, var(--cyan)); }
.rv-choix.est-choisie { border: 2px solid var(--teinte, var(--cyan)); background: var(--teinte-pale); }
.rv-choix__textes { display: grid; gap: 4px; }
.rv-choix__titre { font: 700 1rem var(--titre); }
.rv-choix__sous { font-size: .84rem; line-height: 1.45; color: var(--encre-douce); }
.rv-form-chapitre { display: grid; gap: 14px; }
.rv-form-chapitre__champs { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px 14px; align-items: end; }
.rv-form-chapitre__large { grid-column: 1 / -1; }
.rv-form-chapitre__pied { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.rv-attente { display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 14px; border-radius: 10px; background: var(--ambre-pale); border: 1px solid var(--puce-bord); color: var(--puce-texte); font-size: .86rem; }
.rv-tailles { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; border: 0; }
.rv-tailles__lib { float: left; margin-right: 4px; padding: 0; font: 700 .84rem var(--titre); }
.rv-taille { position: relative; }
.rv-taille input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rv-taille span { display: grid; place-items: center; min-width: 52px; min-height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--trait); background: var(--blanc); font: 700 .86rem var(--titre); cursor: pointer; }
.rv-taille input:checked + span { background: var(--encre); border-color: var(--encre); color: var(--blanc); }
.rv-taille input:focus-visible + span { outline: 3px solid var(--ambre); outline-offset: 2px; }
/* les chapitres */
.rv-chapitres-tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 2.2rem 0 .9rem; scroll-margin-top: 90px; }
.rv-chapitres-tete h2 { margin: 0; font-size: 1.35rem; }
.rv-chapitres-tete p { margin: 0; font-size: .88rem; color: var(--encre-douce); }
.rv-chapitres { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.rv-chapitres > li { display: flex; }
.rv-chapitres__vide { grid-column: 1 / -1; }
.rv-chap {
flex: 1; position: relative; display: grid; align-content: start; gap: 12px; padding: 0 0 16px; scroll-margin-top: 90px;
background: var(--blanc); border: 1px solid var(--trait); border-radius: 16px; overflow: hidden;
transition: box-shadow .18s ease, transform .16s ease, border-color .18s ease;
}
.rv-chap:hover { box-shadow: var(--ombre-drive); transform: translateY(-2px); border-color: var(--teinte-trait, var(--trait)); }
.rv-chap__haut { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px 0; }
.rv-chap__num { flex: none; position: relative; width: 58px; height: 64px; display: grid; place-items: center; border-radius: 12px 12px 12px 4px; background: var(--teinte, var(--cyan)); color: var(--teinte-texte, #fff); }
.rv-chap__num b { margin-top: 10px; font: 700 1.75rem/1 var(--titre); }
.rv-chap__num small { position: absolute; top: 6px; left: 0; right: 0; text-align: center; font: 700 .55rem var(--titre); letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.rv-chap__textes { flex: 1; min-width: 0; display: grid; gap: 4px; }
.rv-chap__nom { margin: 0; font: 700 1.02rem/1.28 var(--titre); }
.rv-chap__nom a { color: var(--encre); text-decoration: none; }
.rv-chap__nom a:hover { color: var(--lien); text-decoration: underline; }
.rv-chap__desc { margin: 0; font-size: .84rem; line-height: 1.45; color: var(--encre-douce); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rv-chap__contenu { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 18px; }
.rv-chap__contenu > span, .rv-chap__signal { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 7px; border-radius: 99px; background: var(--papier); border: 1px solid var(--trait); font-size: .78rem; font-weight: 700; color: var(--encre-douce); text-decoration: none; }
.rv-chap__signal { background: var(--grenat-pale); border-color: var(--grenat-bord); color: var(--grenat-texte); }
.rv-chap__vide { font-weight: 600 !important; }
.rv-chap__progres { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 0 18px; font-size: .78rem; color: var(--encre-douce); }
.rv-chap__actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 4px 16px 0; }
.rv-chap__actions--deux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rv-chap__action {
display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 0; min-height: 42px; padding: 0 4px;
border-radius: 10px; border: 1px solid var(--teinte-trait, var(--trait)); background: var(--teinte-pale); color: var(--encre);
font: 700 .74rem var(--titre); white-space: nowrap; text-decoration: none; overflow: hidden;
}
.rv-chap__action:hover { background: var(--teinte, var(--cyan)); border-color: var(--teinte, var(--cyan)); color: var(--teinte-texte, #fff); }
.rv-chap__gestion { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 0 18px; }
.rv-chap__gestion form { display: contents; }
.rv-chap.est-cible { border: 2px solid var(--teinte, var(--cyan)); }
.rv-chap--tous { background: var(--teinte-pale); border-color: var(--teinte-trait, var(--trait)); }
.rv-chap--tous .rv-chap__num { background: var(--blanc); color: var(--teinte-encre); border: 2px dashed var(--teinte, var(--cyan)); }
.rv-chap__auto { justify-self: start; padding: 2px 8px; border-radius: 99px; font: 700 .65rem var(--titre); letter-spacing: .05em; text-transform: uppercase; background: var(--blanc); color: var(--encre-douce); border: 1px solid var(--trait); }
.rv-chap__regle { margin: 0 18px; padding: 9px 12px; border-radius: 10px; background: var(--blanc); border: 1px dashed var(--teinte-trait, var(--trait)); font-size: .8rem; line-height: 1.45; color: var(--encre-douce); }
.rv-chap--attente { border: 2px dashed var(--teinte-trait, var(--trait)); background: var(--papier); }
.rv-chap--attente:hover { transform: none; box-shadow: none; }
.rv-chap--attente .rv-chap__num { background: transparent; color: var(--teinte-encre); border: 2px dashed var(--teinte, var(--cyan)); }
.rv-chap__statut { margin: 0 18px; }
.rv-chap__decision { display: grid; gap: 8px; padding: 0 18px; }
.rv-chap__decision form { margin: 0; }
.rv-refus { display: flex; flex-wrap: wrap; gap: 8px; }
.rv-refus__motif { flex: 1 1 10rem; min-width: 0; min-height: 40px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--trait); background: var(--blanc); color: var(--encre); font: inherit; font-size: .86rem; }
/* le hub « Jouer » de la page d'un chapitre (entrainement.php) */
.jouer__lancer { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 1rem; }
@media (max-width: 900px) {
.rv-chapitres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rv-tuiles, .rv-tuiles--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
.rv-trois { gap: 8px; }
.rv-grande { flex-direction: column; justify-content: center; gap: 8px; min-height: 104px; padding: 12px 6px; text-align: center; border-radius: 14px; }
.rv-grande__icone { width: 46px; height: 46px; border-radius: 13px; }
.rv-grande__ic { width: 24px; height: 24px; }
.rv-grande__titre { font-size: .9rem; }
.rv-grande__sous, .rv-grande__chevron { display: none; }
.rv-grande.est-ouverte::after { bottom: -11px; width: 20px; height: 20px; margin-left: -10px; }
.rv-tiroir { padding: 16px 14px 18px; border-radius: 16px; gap: 16px; }
.rv-portee, .rv-ligne { flex-wrap: nowrap; overflow-x: auto; margin: 0 -14px; padding: 0 14px 4px; scrollbar-width: none; }
.rv-ligne .rv-etape__note { white-space: nowrap; }
.rv-lancer { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.rv-vedette { min-height: 0; padding: 16px; gap: 12px; }
.rv-vedette__go { width: 100%; justify-content: center; }
.rv-vedette__compte b { font-size: 1.7rem; }
.rv-choix-deux { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.rv-tuile { min-height: 132px; padding: 13px 12px 12px; }
.rv-form-chapitre__champs { grid-template-columns: 84px minmax(0, 1fr); }
.rv-chapitres { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}
/* ================================================================ 18/10 au soir
Retouches des modules (demandes de Matthias) : amorce des jauges, erreurs
d'import localisées, sélection multiple, « À faire aujourd'hui » toujours
visible, module de révision (un soir « d'apprentissage ») mis en avant, prompt IA, derniers ajouts. */
/* La jauge à 0 % montre une petite amorce (drive_jauge) ; elle reprend la
couleur du premier segment. */
.jauge__amorce { opacity: .9; }
/* Import : une question refusée s'affiche à SA place dans la liste, en rouge. */
.fiche-question--erreur { border: 1px solid var(--grenat-bord); background: var(--grenat-pale); }
.fiche-question__probleme { margin: .2rem 0 0; font-weight: 600; color: var(--grenat-texte); }
.fiche-question__extrait { margin: .35rem 0 0; color: var(--encre-douce); font-size: .92rem; white-space: pre-line; }
.import-erreurs { border: 1px solid var(--grenat-bord); background: var(--grenat-pale); color: var(--grenat-texte); border-radius: 12px; padding: .9rem 1rem; margin: 0 0 1rem; }
.import-erreurs__titre { margin: 0 0 .5rem; font-weight: 600; }
.import-erreurs__titre .icone { width: 1rem; height: 1rem; vertical-align: -.12em; margin-right: .35rem; }
.import-erreurs ul { margin: 0; padding-left: 1.2rem; display: grid; gap: .4rem; }
.import-erreurs a { color: inherit; }
.import__chapitre { display: flex; align-items: center; gap: .5rem; margin: 1.4rem 0 .6rem; font-size: 1.05rem; }
.import__chapitre-nombre { font-weight: 400; color: var(--encre-douce); font-size: .9rem; }
/* Gestion du module d'auto-évaluation : la sélection multiple (ayants droit). */
.fiche-question__cocher { display: inline-flex; align-items: center; margin-right: .2rem; }
.fiche-question__cocher input { width: 1.25rem; height: 1.25rem; accent-color: var(--lien); cursor: pointer; }
.selection-lot__aide { margin: .4rem 0 .8rem; color: var(--encre-douce); }
.selection-barre {
position: sticky; bottom: .75rem; z-index: 5;
display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
margin-top: 1rem; padding: .6rem .8rem; border-radius: 14px;
background: var(--blanc); border: 1px solid var(--trait); box-shadow: var(--ombre-drive);
}
.selection-barre__espace { flex: 1; }
.bouton.est-choisie { box-shadow: inset 0 0 0 2px var(--lien); }
/* « À faire aujourd'hui », vide : UNE tuile grisée, en pointillés, qui félicite
(18/10 au soir : trois emplacements simulés, c'était laid — retour de Matthias). */
.tuile-fantome {
min-height: 92px; border-radius: 16px;
background: var(--papier);
background: color-mix(in srgb, var(--encre) 5%, var(--papier));
border: 1.5px dashed var(--trait);
}
.categorie__bravo {
max-width: none; margin: 0; padding: .9rem 1.2rem;
display: flex; align-items: center; justify-content: center; gap: .6rem; text-align: center;
font-weight: 600; color: var(--encre-douce);
}
.categorie__bravo .icone { flex: none; color: var(--accent, var(--lien)); }
@media (max-width: 640px) {
.categorie__bravo { justify-content: flex-start; text-align: left; }
}
/* Page d'un cours : le module de révision, légèrement plus coloré. */
/* (18/10 au soir, corrigé : la teinte « pâle » est déjà le fond du dossier ouvert —
la tuile s'y fondait. Elle prend la teinte moyenne, un liseré de la couleur
vive et l'icône pleine.) */
.sous-dossier--accent {
background: var(--teinte-moyenne, var(--cyan-pale));
background: linear-gradient(150deg, var(--teinte-moyenne, var(--cyan-pale)), var(--blanc) 135%);
border-color: var(--teinte, var(--cyan));
box-shadow: inset 0 0 0 1px var(--teinte, var(--cyan));
}
.sous-dossier--accent .sous-dossier__icone { background: var(--teinte, var(--cyan)); color: var(--teinte-texte, #fff); border-color: var(--teinte, var(--cyan)); }
.sous-dossier--accent .sous-dossier__detail { color: var(--encre); }
/* Éditeur : « Vos derniers ajouts », sous le formulaire. */
.editeur-ajouts { margin-top: 1.6rem; }
.editeur-ajouts > h2 { display: flex; align-items: center; gap: .5rem; }
/* Prompt IA (prompt-ia.php). */
.prompt-ia { display: grid; gap: .65rem; }
.prompt-ia__etape { display: flex; align-items: center; gap: .55rem; margin: 1.1rem 0 .1rem; font-size: 1.08rem; }
.prompt-ia__aide { margin: 0; color: var(--encre-douce); }
.prompt-ia__texte { width: 100%; box-sizing: border-box; font-size: .85rem; line-height: 1.45; }
/* ================================================================ 18/10 au soir (2)
Visuel et navigation (demandes de Matthias) : texture du fond, en-tête
(liseré, actions à droite, cloche et « Mon compte »), fil d'Ariane collant
en pastilles, accueil (le drive en trois tuiles), codes couleur d'un cours,
logos du sponsor selon le mode affiché. */
:root {
--grain: rgba(16, 36, 58, .07); /* points de la texture du fond */
--barre-navigateur: #009ee0; /* liseré de l'en-tête = barre du navigateur */
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) { --grain: rgba(231, 237, 243, .05); --barre-navigateur: #0b3954; }
}
:root[data-theme="dark"] { --grain: rgba(231, 237, 243, .05); --barre-navigateur: #0b3954; }
/* ---- texture TRÈS légère : un pointillé fin, comme un papier de cahier — les
bulles et les notifications (fond uni) s'en détachent. Jamais en mode jeu.
2.44 (25/10, Matthias : « le fond ne bouge pas d'un pixel, seul le contenu défile par-dessus ») :
le pointillé est posé sur un calque FIXE, derrière tout (body::before) — pas de
« background-attachment: fixed », que Safari sur iPhone ignore. 100lvh : la plus grande hauteur
de l'écran, pour qu'aucune bande ne se découvre quand la barre du navigateur se replie. */
body { background-color: var(--papier); }
body::before {
content: ""; position: fixed; top: 0; left: 0; z-index: -1; pointer-events: none;
width: 100%; height: 100vh; height: 100lvh;
background-image: radial-gradient(circle at center, var(--grain) 0 1px, transparent 1.3px);
background-size: 22px 22px;
}
html.page-jeu body::before, body.corps-jeu::before { content: none; }
/* ---- en-tête : le liseré tout en haut (et la couleur de la barre du navigateur :
Safari 26 prolonge la couleur de l'élément collé en haut de la page) */
.entete__liseret { height: 4px; background-color: var(--barre-navigateur); }
.entete__actions { display: flex; align-items: center; gap: .5rem; flex: none; }
.entete__actions::before {
content: ""; width: 1px; height: 1.6rem; background: var(--trait); margin-right: .3rem;
}
.entete .cloche { margin-left: 0; width: 2.4rem; height: 2.4rem; }
.entete .cloche__nombre { border-color: var(--blanc); }
.entete .moi summary { padding: .2rem .75rem .2rem .2rem; gap: .5rem; }
.entete .moi__nom { white-space: nowrap; }
.entete .moi__menu { min-width: 15.5rem; }
.moi__qui { display: flex; align-items: center; gap: .7rem; margin: .35rem .6rem .5rem; padding-bottom: .65rem; border-bottom: 1px solid var(--trait); font-size: .9rem; line-height: 1.35; }
.moi__avatar { flex: none; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--role, var(--cyan-fonce)); color: #fff; font: 700 .85rem var(--titre); letter-spacing: .02em; }
.moi__identite { display: grid; gap: .3rem; min-width: 0; }
.moi__nom-complet { overflow-wrap: anywhere; }
@media (max-width: 1080px) {
.entete__actions { gap: .4rem; }
}
@media (max-width: 640px) {
.entete__interieur { gap: .6rem; padding-left: 1rem; padding-right: 1rem; }
.entete .moi__nom { display: none; }
.entete .moi summary { padding-right: .45rem; }
.entete .moi summary::after { display: none; }
.bascule-menu { padding: .5rem .65rem; }
}
@media (max-width: 420px) {
.bascule-menu__texte { display: none; }
.marque__sigle { padding: .45rem .5rem; }
}
/* ---- le fil d'Ariane du drive : collé sous l'en-tête, chaque étape en pastille */
.barre-drive {
position: sticky; top: var(--entete-h, 68px); z-index: 30;
display: block; margin: -1.4rem -.75rem 1.6rem; padding: .55rem .75rem;
border-bottom: 0; border-radius: 0 0 14px 14px;
background: var(--papier);
box-shadow: 0 1px 0 var(--trait);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
.barre-drive {
background: color-mix(in srgb, var(--papier) 82%, transparent);
-webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px);
}
}
html:has(.barre-drive) { scroll-padding-top: calc(var(--entete-h, 68px) + 4.2rem); }
.fil ol { gap: .35rem .3rem; font-size: .86rem; }
.fil li { gap: .3rem; }
.fil li + li::before {
content: ""; width: .42rem; height: .42rem; margin: 0 .25rem 0 .05rem;
border-top: 1.6px solid currentColor; border-right: 1.6px solid currentColor;
transform: rotate(45deg); opacity: .45; flex: none;
}
.fil__etape {
display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; line-height: 1.25;
padding: .32rem .72rem; border-radius: 9px;
background: var(--blanc); border: 1px solid var(--trait); color: var(--lien);
box-shadow: 0 1px 1px rgba(16, 36, 58, .04);
}
.fil a.fil__etape { text-decoration: none; transition: border-color .15s ease, background-color .15s ease; }
.fil a.fil__etape:hover { text-decoration: none; border-color: var(--cyan); background: var(--cyan-pale); color: var(--lien); }
.fil .fil__etape[aria-current] {
color: var(--encre); font-weight: 600; background: var(--cyan-pale);
border-color: color-mix(in srgb, var(--cyan) 45%, var(--trait));
}
@media (max-width: 640px) {
.barre-drive { margin: -1rem -1.5rem 1.3rem; padding: .5rem 1.5rem; border-radius: 0; }
.fil ol {
flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
font-size: .84rem;
}
.fil ol::-webkit-scrollbar { display: none; }
.fil li { flex: none; }
}
/* ---- accueil : le drive, en trois tuiles */
.cartes--drive { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-bottom: 1rem; }
.carte--drive {
background: linear-gradient(180deg, var(--cyan-pale), var(--blanc) 75%);
border-color: color-mix(in srgb, var(--cyan) 30%, var(--trait));
border-top: 3px solid var(--cyan);
}
.drive-lien { margin: 0 0 2.5rem; }
/* ---- page d'un cours : les codes couleur, en bas à droite sous « Conseils d'anciens » */
.sous-dossiers__couleurs { grid-column: 1 / -1; justify-content: flex-end; }
.couleurs-cours {
margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .35rem .9rem;
font-size: .8rem; color: var(--encre-douce);
}
.couleurs-cours__titre { font-weight: 600; }
.couleur-code { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
.couleur-code__pastille {
width: .95rem; height: .95rem; border-radius: 4px; flex: none;
box-shadow: 0 0 0 1px color-mix(in srgb, var(--encre) 28%, transparent);
}
.couleur-code__pastille--vive { background: var(--teinte, var(--cyan)); }
.couleur-code__pastille--claire { background: #ffffff; background: color-mix(in srgb, var(--teinte, var(--cyan)) 16%, #ffffff); }
.couleur-code code {
-webkit-user-select: all; user-select: all; cursor: text;
background: var(--blanc); color: var(--encre); border: 1px solid var(--teinte-trait, var(--trait));
padding: .05em .4em; letter-spacing: .03em; font-size: .78rem;
}
/* 2.58 : le bouton « copier », collé à droite du code */
.couleur-code__copier {
display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; margin-left: -.15rem; padding: 0; cursor: pointer;
border: 1px solid var(--teinte-trait, var(--trait)); border-radius: 6px; background: var(--blanc); color: var(--encre-douce);
}
.couleur-code__copier[hidden] { display: none; }
.couleur-code__copier:hover { color: var(--lien); border-color: var(--lien); }
.couleur-code__copier:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.couleur-code__copier .icone { width: .95rem; height: .95rem; }
.couleur-code__fait { display: none; }
.couleur-code__copier.est-copie { color: var(--juste); border-color: var(--juste-trait); background: var(--juste-fond); }
.couleur-code__copier.est-copie .couleur-code__icone { display: none; }
.couleur-code__copier.est-copie .couleur-code__fait { display: block; }
/* ---- logos du sponsor : celui du mode AFFICHÉ (bascule comprise), plus celui du système */
.logo-nuit { display: none !important; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .logo-jour { display: none !important; }
:root:not([data-theme="light"]) .logo-nuit { display: block !important; }
}
:root[data-theme="dark"] .logo-jour { display: none !important; }
:root[data-theme="dark"] .logo-nuit { display: block !important; }
/* ---- textes officiels (rgpd.php, reglement.php : mot pour mot ceux du bot, 18/10 au soir) */
.juridique__source { font-size: .88rem; color: var(--encre-douce); }
.texte-officiel--h3 > h3 { margin-top: 1.4rem; }
.texte-officiel ul { margin-top: .4rem; }
.texte-officiel h3 + p, .texte-officiel h3 + ul { margin-top: .2rem; }
/* ---- en-tête : tout tient sur une ligne (18/10 au soir). Le bouton « Rejoindre »
prenait le rembourrage du grand bouton Discord (règle plus loin dans la feuille) :
il retrouve sa taille d'en-tête. Entre 1081 et 1300 px, la marque garde son sigle. */
.entete__interieur { gap: 1rem; }
.nav-h { gap: .8rem; }
.nav-h__lien { padding: .5rem .65rem; }
.entete .bouton-discord--entete { padding: .5rem .95rem; font-size: .85rem; gap: .5rem; box-shadow: 0 2px 0 #4752c4; }
.entete .bouton-discord--entete svg { width: 20px; height: 15px; }
@media (max-width: 1300px) and (min-width: 1081px) {
.marque__texte { display: none; }
.entete .moi__nom { display: inline; }
.entete .moi summary { padding-right: .75rem; }
.nav-h__lien { padding: .45rem .55rem; font-size: .9rem; }
}
@media (min-width: 1081px) {
/* Connecté·e : la cloche et « Mon compte » prennent la place — la marque garde son sigle. */
.entete--connecte .marque__texte { display: none; }
}
@media (max-width: 640px) {
/* Téléphone : l'en-tête collant tient sur UNE ligne (il restait sur deux, 130 px). */
.marque__texte span { display: none; }
.entete--connecte .marque__texte { display: none; }
.entete__actions { gap: .35rem; }
}
/* ================================================================ 18/10 au soir (3)
Module de révision mis en avant, pop-ups de confirmation, menu de la
cloche, notifications ✓ | 🗑, « Dire merci », heures des rappels, appareils. */
/* ---- la tuile du module de révision : PLEINE de la couleur vive du cours
(la teinte pâle était déjà le fond du dossier ouvert : elle s'y fondait). */
.sous-dossier.sous-dossier--accent {
position: relative;
background: var(--teinte, var(--cyan));
background-image: linear-gradient(150deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 55%);
border: 0; color: var(--teinte-texte, #fff);
box-shadow: 0 8px 22px rgba(16, 36, 58, .22), inset 0 0 0 1px rgba(255, 255, 255, .18);
}
@supports (color: color-mix(in srgb, red 10%, white)) {
.sous-dossier.sous-dossier--accent { box-shadow: 0 8px 22px color-mix(in srgb, var(--teinte, var(--cyan)) 45%, transparent), inset 0 0 0 1px rgba(255, 255, 255, .18); }
}
.sous-dossier.sous-dossier--accent:hover { color: var(--teinte-texte, #fff); transform: translateY(-4px); }
.sous-dossier--accent .sous-dossier__icone {
background: rgba(255, 255, 255, .22); border-color: rgba(255, 255, 255, .45); color: var(--teinte-texte, #fff);
}
.sous-dossier--accent .sous-dossier__titre,
.sous-dossier--accent .sous-dossier__detail,
.sous-dossier--accent .sous-dossier__compte,
.sous-dossier--accent .sous-dossier__vide { color: var(--teinte-texte, #fff); }
.sous-dossier--accent .sous-dossier__detail { opacity: .92; }
.sous-dossier__badge {
position: absolute; top: -.65rem; right: .8rem;
display: inline-flex; align-items: center; gap: .25rem;
padding: .18rem .55rem; border-radius: 99px; font: 700 .7rem/1.3 var(--titre); letter-spacing: .02em;
background: var(--ambre); color: #3d2800; box-shadow: 0 2px 6px rgba(16, 36, 58, .25);
}
.sous-dossier__badge .icone { width: .78rem; height: .78rem; fill: currentColor; }
.sous-dossier__cta {
display: inline-flex; align-items: center; gap: .3rem; justify-self: start; margin-top: .45rem;
padding: .32rem .75rem; border-radius: 99px; font-size: .82rem; font-weight: 700;
background: rgba(255, 255, 255, .92); color: #10243a;
}
.sous-dossier--accent:hover .sous-dossier__cta { background: #fff; }
/* ---- messages de confirmation : des pop-ups flottants (sans JavaScript, ils
s'effacent seuls après 9 s ; avec, main.js ajoute × et suspend au survol). */
.message--succes[role="status"] {
position: fixed; z-index: 70; top: calc(var(--entete-h, 68px) + .75rem); right: 1rem;
width: min(24rem, calc(100vw - 2rem)); max-width: none; margin: 0;
padding: .85rem 2.7rem .85rem 1rem; border: 1px solid var(--trait); border-left: 4px solid var(--cyan);
background: var(--blanc); color: var(--encre); font-size: .93rem; line-height: 1.45;
box-shadow: 0 12px 32px rgba(16, 36, 58, .2), 0 2px 6px rgba(16, 36, 58, .08);
animation: toast-entree .3s ease-out both, toast-sortie .4s ease-in 9s forwards;
}
.message--succes.message--flottant { animation: toast-entree .3s ease-out both; }
.message--succes.message--flottant.est-parti { animation: toast-sortie .35s ease-in forwards; }
.message__fermer {
position: absolute; top: .35rem; right: .4rem; width: 1.9rem; height: 1.9rem; border-radius: 50%;
border: 0; background: none; color: var(--encre-douce); font-size: 1.3rem; line-height: 1; cursor: pointer;
}
.message__fermer:hover { background: var(--papier); color: var(--encre); }
@keyframes toast-entree { from { opacity: 0; transform: translateY(-10px); } }
@keyframes toast-sortie { to { opacity: 0; transform: translateY(-10px); visibility: hidden; } }
@media (max-width: 640px) {
.message--succes[role="status"] { top: auto; bottom: 1rem; left: 1rem; right: 1rem; width: auto; }
@keyframes toast-entree { from { opacity: 0; transform: translateY(10px); } }
}
/* ---- la cloche : un menu déroulant */
:root { --notif-nouvelle: #fff4cc; --notif-nouvelle-bord: #f2d27a; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) { --notif-nouvelle: #33290f; --notif-nouvelle-bord: #6b5419; }
}
:root[data-theme="dark"] { --notif-nouvelle: #33290f; --notif-nouvelle-bord: #6b5419; }
.cloche-menu { position: relative; flex: none; }
.cloche-menu > summary { list-style: none; cursor: pointer; }
.cloche-menu > summary::-webkit-details-marker { display: none; }
.cloche-menu[open] > summary { border-color: var(--cyan); color: var(--lien); }
.cloche__nombre[hidden] { display: none; }
.cloche-menu__panneau {
position: absolute; right: -3.2rem; top: calc(100% + .45rem); z-index: 30; width: 24rem;
background: var(--blanc); border: 1px solid var(--trait); border-radius: 14px;
box-shadow: var(--ombre-drive), 0 18px 40px rgba(16, 36, 58, .16); overflow: hidden;
}
.cloche-menu__tete {
display: flex; align-items: center; justify-content: space-between; gap: .6rem;
padding: .7rem .9rem; border-bottom: 1px solid var(--trait); font-size: .92rem;
}
.cloche-menu__tete .bouton-lien { font-size: .8rem; }
.cloche-menu__vide { margin: 0; padding: 1.2rem .9rem; color: var(--encre-douce); font-size: .9rem; }
.cloche-menu__vide[hidden] { display: none; }
.cloche-menu__tout {
display: block; padding: .7rem .9rem; text-align: center; font-size: .88rem; font-weight: 600;
border-top: 1px solid var(--trait); text-decoration: none; color: var(--lien);
}
.cloche-menu__tout:hover { background: var(--cyan-pale); }
@media (max-width: 640px) {
.cloche-menu__panneau { position: fixed; left: .5rem; right: .5rem; top: calc(var(--entete-h, 60px) + .3rem); width: auto; }
}
/* ---- une notification (menu et page) : texte, moment, ovale ✓ | 🗑 ; non lue en jaune */
.notifs { list-style: none; margin: 0; padding: 0; }
.notif {
display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .6rem; align-items: center;
padding: .65rem .8rem; border-bottom: 1px solid var(--trait);
}
.notifs--menu .notif:last-child { border-bottom: 0; }
.notif.est-nouvelle { background: var(--notif-nouvelle); box-shadow: inset 3px 0 0 var(--ambre); }
.notif__icone {
width: 1.9rem; height: 1.9rem; border-radius: 50%; display: grid; place-items: center;
background: var(--papier); color: var(--encre-douce);
}
.notif__icone .icone { width: 1rem; height: 1rem; }
.notif--merci .notif__icone { background: #fde3ea; color: #c2185b; }
.notif__corps { display: grid; gap: .15rem; min-width: 0; color: var(--encre); text-decoration: none; }
.notif__corps:hover .notif__texte { text-decoration: underline; }
.notif__texte {
font-size: .88rem; line-height: 1.38;
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.notifs--page .notif__texte { -webkit-line-clamp: unset; display: block; font-size: .95rem; }
.notif.est-nouvelle .notif__texte { font-weight: 600; }
.notif__meta { font-size: .76rem; color: var(--encre-douce); }
.notif__nouveau { display: none; font-weight: 700; color: #8a5c00; }
.notif.est-nouvelle .notif__nouveau { display: inline; }
.notif__nombre { font-size: .76rem; color: var(--encre-douce); font-weight: 400; }
/* l'ovale coupé en deux, comme sur les tuiles de Mes révisions */
.duo.duo--notif { height: 28px; border-radius: 99px; }
.duo--notif .duo__oui, .duo--notif .duo__non {
display: grid; place-items: center; width: 32px; padding: 0; border: 0; background: transparent;
color: var(--encre-douce); cursor: pointer;
}
.duo--notif .duo__oui { border-radius: 99px 0 0 99px; }
.duo--notif .duo__non { border-radius: 0 99px 99px 0; }
.duo--notif .icone { width: .9rem; height: .9rem; }
.duo--notif .duo__oui:hover:not(:disabled) { background: var(--juste, #1e8e5a); color: #fff; }
.duo--notif .duo__non:hover { background: var(--jauge-fausse, #d2416e); color: #fff; }
.duo--notif .duo__oui.est-fait, .duo--notif .duo__oui:disabled { color: var(--juste, #1e8e5a); opacity: .55; cursor: default; }
.duo--notif .duo__oui:focus-visible, .duo--notif .duo__non:focus-visible { outline: 3px solid var(--cyan); outline-offset: 1px; position: relative; z-index: 1; }
.notifs--page { background: var(--blanc); border: 1px solid var(--trait); border-radius: 14px; overflow: hidden; margin-bottom: 1rem; }
.notifs--page .notif { padding: .85rem 1rem; }
.notifs--page .notif:last-child { border-bottom: 0; }
.notifs-entete { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; margin: 0 0 .7rem; }
.notifs-entete__compte { margin: 0; font-weight: 600; color: var(--encre-douce); }
[data-tout-lu][hidden] { display: none; }
/* ---- « Dire merci » */
.merci {
display: inline-flex; align-items: center; gap: .35rem; padding: .32rem .75rem; border-radius: 99px;
border: 1px solid #f3b6c8; background: #fff0f4; color: #b0124e; font: inherit; font-size: .85rem; font-weight: 600;
cursor: pointer; line-height: 1.2;
}
.merci .icone { width: .95rem; height: .95rem; }
.merci:hover { background: #ffe1ea; }
.merci.est-dit { background: #c2185b; border-color: #c2185b; color: #fff; }
.merci__nombre { padding: 0 .4rem; border-radius: 99px; background: rgba(255, 255, 255, .7); color: #b0124e; font-size: .75rem; }
.merci.est-dit .merci__nombre { background: rgba(255, 255, 255, .25); color: #fff; }
.merci--recu { cursor: default; border-style: dashed; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .merci:not(.est-dit) { background: #3a1222; border-color: #6e2440; color: #ff9fbd; }
:root:not([data-theme="light"]) .notif--merci .notif__icone { background: #3a1222; color: #ff9fbd; }
}
:root[data-theme="dark"] .merci:not(.est-dit) { background: #3a1222; border-color: #6e2440; color: #ff9fbd; }
:root[data-theme="dark"] .notif--merci .notif__icone { background: #3a1222; color: #ff9fbd; }
/* ---- Mes rappels : les heures, les appareils */
.heures-rappel { list-style: none; margin: .4rem 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.heure-rappel {
display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .4rem .3rem .75rem;
border: 1px solid var(--trait); border-radius: 99px; background: var(--blanc);
}
.heure-rappel__changer { display: inline-flex; align-items: center; gap: .3rem; margin: 0; }
.heure-rappel select { border: 0; background: transparent; font: inherit; font-weight: 700; color: var(--encre); padding: .1rem 0; cursor: pointer; }
.heure-rappel__retirer {
display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; padding: 0;
border: 0; background: var(--papier); color: var(--encre-douce); cursor: pointer;
}
.heure-rappel__retirer:hover { background: var(--grenat-pale); color: var(--grenat-vif); }
.appareil__renommer { flex: none; }
.appareil__renommer > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .3rem; }
.appareil__renommer > summary::-webkit-details-marker { display: none; }
.appareil__formulaire { display: flex; gap: .4rem; margin-top: .4rem; flex-wrap: wrap; }
.appareil__formulaire input[type="text"] { flex: 1 1 12rem; }
[data-sans-js][hidden] { display: none !important; } /* « Changer » : seulement sans JavaScript */
.appareil__formulaire input[type="text"] {
font: inherit; font-size: .95rem; color: var(--encre);
background: var(--papier); border: 1px solid var(--trait); border-radius: 8px; padding: .45rem .7rem;
}
.appareil__formulaire input[type="text"]:focus { border-color: var(--cyan); outline: 3px solid var(--cyan-pale); outline-offset: 0; }
/* ================================================================ 18/10 au soir (5)
Module de révision : tuiles aux couleurs du cours, Prompt IA, nombre de questions. */
/* Jouer / Ajouter / S'entraîner : la teinte CLAIRE du cours ; ouverte, la VIVE (déjà). */
.rv-grande { background: var(--teinte-pale, var(--blanc)); border-color: var(--teinte-trait, var(--trait)); }
.rv-grande:hover { background: var(--teinte-moyenne, var(--blanc)); }
.rv-grande .rv-grande__icone { background: var(--teinte-moyenne, var(--papier)); border-color: var(--teinte-trait, var(--trait)); }
.rv-grande.est-ouverte, .rv-grande.est-ouverte:hover { background: var(--teinte); }
/* Ajouter : trois tuiles — exercice, Prompt IA, chapitre. */
@media (min-width: 900px) {
.rv-choix-trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.rv-choix-trois { margin-top: .4rem; }
/* Prompt IA : le même esprit que la tuile du module de révision sur la page du cours,
en plus discret — teinte moyenne, liseré vif, pastille « Aide-toi de l'IA ». */
.rv-choix .rv-tuile__icone { flex: none; }
/* (19/10 : la tuile Prompt IA est redessinée plus bas, section « 19/10 ».) */
.rv-choix--ia { position: relative; }
.rv-choix__badge {
position: absolute; top: -.65rem; right: .8rem;
display: inline-flex; align-items: center; gap: .25rem;
padding: .18rem .55rem; border-radius: 99px; font: 700 .7rem/1.3 var(--titre); letter-spacing: .02em;
background: var(--marine); color: #fff; box-shadow: 0 2px 6px rgba(16, 36, 58, .2);
}
.rv-choix__badge .icone { width: .8rem; height: .8rem; }
@media (max-width: 640px) {
.rv-choix-trois { gap: 16px; }
}
/* Jouer : le nombre de questions d'une session (retenu, comme l'ambiance). */
.rv-nombre {
display: inline-grid; place-items: center; min-width: 48px; min-height: 40px; padding: 0 12px; border-radius: 10px;
border: 1px solid var(--trait); background: var(--blanc); color: var(--encre); font: 700 .86rem var(--titre); cursor: pointer;
}
.rv-nombre:hover { border-color: var(--teinte, var(--cyan)); background: var(--teinte-pale, var(--blanc)); }
.rv-nombre.est-choisie, .rv-nombre.est-choisie:hover { background: var(--teinte, var(--cyan)); border-color: var(--teinte, var(--cyan)); color: var(--teinte-texte, #fff); }
/* ================================================================ 19/10
Module de révision : rien sans chapitre, Ajouter en étapes, tuiles « choisie »
lisibles, Prompt IA plus discret ; page du cours : les comptes alignés en bas. */
/* ---- tant qu'il n'y a pas de chapitre : un bandeau, et tout le reste sous cadenas. */
.rv-verrou {
display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; margin: 0 0 18px; padding: 14px 18px;
border-radius: 14px; background: var(--teinte-pale, var(--blanc)); border: 1.5px dashed var(--teinte, var(--cyan));
}
.rv-verrou__icone {
flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
background: var(--teinte, var(--cyan)); color: var(--teinte-texte, #fff);
}
.rv-verrou__texte { flex: 1 1 260px; max-width: none; margin: 0; font-size: .9rem; line-height: 1.45; }
.rv-verrou .bouton { flex: none; }
.rv-grande.est-verrouillee, .rv-choix.est-verrouillee {
cursor: not-allowed; opacity: .55; filter: saturate(.35);
background: var(--papier); border-style: dashed; border-color: var(--trait); box-shadow: none;
}
.rv-grande.est-verrouillee:hover, .rv-choix.est-verrouillee:hover { transform: none; box-shadow: none; background: var(--papier); color: var(--encre); }
.rv-choix.est-verrouillee .rv-choix__badge { display: none; }
/* ---- Ajouter : « Ajouter un exercice » et « Créer un chapitre » suivent la logique des
grandes tuiles — la teinte CLAIRE du cours, la VIVE quand on l'a choisie. */
.rv-choix {
position: relative; background: var(--teinte-pale, var(--blanc)); border-color: var(--teinte-trait, var(--trait));
transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.rv-choix:hover { background: var(--teinte-moyenne, var(--blanc)); border-color: var(--teinte-trait, var(--trait)); transform: translateY(-2px); box-shadow: var(--ombre-drive); }
.rv-choix .rv-tuile__icone { background: var(--teinte-moyenne, var(--papier)); border-color: var(--teinte-trait, var(--trait)); }
.rv-choix.est-choisie, .rv-choix.est-choisie:hover {
border: 1px solid var(--teinte, var(--cyan)); background: var(--teinte, var(--cyan)); color: var(--teinte-texte, #fff);
transform: none; box-shadow: 0 8px 20px rgba(16, 36, 58, .16);
}
.rv-choix.est-choisie .rv-tuile__icone { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .38); color: var(--teinte-texte, #fff); }
.rv-choix.est-choisie .rv-choix__sous { color: var(--teinte-texte, #fff); opacity: .9; }
@media (min-width: 900px) {
/* Trois tuiles côte à côte : un repère vers ce qui s'ouvre en dessous. */
.rv-choix.est-choisie::after {
content: ""; position: absolute; left: 50%; bottom: -11px; width: 20px; height: 20px; margin-left: -10px;
background: var(--teinte, var(--cyan)); transform: rotate(45deg); border-radius: 0 0 4px 0;
}
}
/* ---- Prompt IA : ouvre une autre page, n'est donc jamais « choisi ». Une teinte entre la
claire et la vive (plus près de la claire), sans halo ; la pastille est marine le jour,
blanche la nuit ; une flèche ↗ dit qu'on part ailleurs. */
.rv-choix--ia { background: var(--teinte-moyenne, var(--blanc)); border: 1px solid var(--teinte-trait, var(--trait)); box-shadow: none; padding-bottom: 22px; }
@supports (color: color-mix(in srgb, red 10%, white)) {
.rv-choix--ia { background: color-mix(in srgb, var(--teinte, var(--cyan)) 27%, var(--blanc)); }
.rv-choix--ia:hover { background: color-mix(in srgb, var(--teinte, var(--cyan)) 36%, var(--blanc)); }
}
.rv-choix--ia .rv-tuile__icone { background: var(--teinte, var(--cyan)); border-color: var(--teinte, var(--cyan)); color: var(--teinte-texte, #fff); }
.rv-choix--ia .rv-choix__sous { color: var(--encre); opacity: .82; }
.rv-choix__ouvre { position: absolute; right: 12px; bottom: 10px; width: 1rem; height: 1rem; color: var(--encre-douce); }
.rv-choix--ia:hover .rv-choix__ouvre { color: var(--encre); }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .rv-choix__badge { background: #fff; color: var(--marine); box-shadow: 0 2px 8px rgba(0, 0, 0, .45); }
}
:root[data-theme="dark"] .rv-choix__badge { background: #fff; color: var(--marine); box-shadow: 0 2px 8px rgba(0, 0, 0, .45); }
.rv-choix-aide { margin-top: 2px; }
.rv-choix-trois + .rv-etape { margin-top: 14px; }
/* ---- Page du cours : « Vide pour l'instant », « 40 questions »… sur une même ligne, en bas
de chaque tuile (au-dessus de 640 px ; en dessous, une tuile par ligne). */
@media (min-width: 641px) {
.sous-dossier { display: flex; flex-direction: column; align-items: stretch; gap: .3rem; }
.sous-dossier__icone, .sous-dossier__cta { align-self: flex-start; }
.sous-dossier__detail { margin-bottom: auto; }
.sous-dossier__jauge, .sous-dossier__cta { margin-top: .55rem; }
.sous-dossier__compte {
order: 10; margin-top: .55rem; padding-top: .55rem;
border-top: 1px solid var(--teinte-trait, var(--trait));
}
.sous-dossier--accent .sous-dossier__compte { border-top-color: rgba(255, 255, 255, .38); }
}
/* ---- Importer (module de révision) : l'aperçu des cartes et des rassemblements. */
.import-cartes, .import-groupes { list-style: none; margin: .45rem 0 0; padding: 0; display: grid; gap: 6px; max-width: none; }
.import-cartes li {
display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 3px 14px; padding: 8px 12px;
border-radius: 10px; background: var(--papier); border: 1px solid var(--trait); font-size: .88rem; line-height: 1.4;
}
.import-cartes span { color: var(--encre-douce); }
.import-groupes li { padding: 8px 12px; border-radius: 10px; background: var(--papier); border: 1px solid var(--trait); font-size: .88rem; line-height: 1.4; }
.import-groupes small { color: var(--encre-douce); }
.import-groupes__elements { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.import-groupes__elements span { padding: 2px 9px; border-radius: 99px; background: var(--blanc); border: 1px solid var(--trait); font-size: .8rem; }
@media (max-width: 640px) {
.import-cartes li { grid-template-columns: minmax(0, 1fr); }
}
/* ---- Prompt IA, étape 1 : les types à faire rédiger — des cases en tuiles, toutes
cochées d'office ; cochée = la teinte claire du cours et la coche pleine. */
.pi-types { display: grid; gap: 10px; }
.pi-types__grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 10px; }
.pi-type {
position: relative; display: flex; align-items: flex-start; gap: 11px; padding: 12px 40px 12px 12px; cursor: pointer;
border-radius: 12px; border: 1px solid var(--trait); background: var(--blanc); color: var(--encre-douce);
transition: background-color .15s ease, border-color .15s ease;
}
.pi-type:hover { border-color: var(--teinte, var(--cyan)); }
.pi-type:focus-within { outline: 3px solid var(--teinte-moyenne, var(--cyan-pale)); outline-offset: 1px; }
.pi-type__case { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.pi-type__icone {
flex: none; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;
background: var(--papier); border: 1px solid var(--trait); color: var(--encre-douce);
}
.pi-type__textes { display: grid; gap: 2px; min-width: 0; }
.pi-type__nom { font: 700 .92rem/1.25 var(--titre); color: var(--encre); }
.pi-type__detail { font-size: .8rem; line-height: 1.35; }
.pi-type__jeux { margin-top: 3px; font-size: .72rem; line-height: 1.35; }
.pi-type__coche {
position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center;
border: 1.5px solid var(--trait); background: var(--blanc); color: transparent;
}
.pi-type__coche .icone { width: .85rem; height: .85rem; }
.pi-type.est-coche { background: var(--teinte-pale, var(--blanc)); border-color: var(--teinte, var(--cyan)); color: var(--encre); }
.pi-type.est-coche .pi-type__icone { background: var(--teinte-moyenne, var(--papier)); border-color: var(--teinte-trait, var(--trait)); color: var(--encre); }
.pi-type.est-coche .pi-type__coche { background: var(--teinte, var(--cyan)); border-color: var(--teinte, var(--cyan)); color: var(--teinte-texte, #fff); }
/* Sans attendre le rechargement : l'état réel de la case. */
.pi-type:has(.pi-type__case:checked) { background: var(--teinte-pale, var(--blanc)); border-color: var(--teinte, var(--cyan)); color: var(--encre); }
.pi-type:has(.pi-type__case:checked) .pi-type__coche { background: var(--teinte, var(--cyan)); border-color: var(--teinte, var(--cyan)); color: var(--teinte-texte, #fff); }
.pi-type:has(.pi-type__case:not(:checked)) { background: var(--blanc); border-color: var(--trait); color: var(--encre-douce); }
.pi-type:has(.pi-type__case:not(:checked)) .pi-type__icone { background: var(--papier); border-color: var(--trait); color: var(--encre-douce); }
.pi-type:has(.pi-type__case:not(:checked)) .pi-type__coche { background: var(--blanc); border-color: var(--trait); color: transparent; }
.pi-types .actions-ligne:not(:has(> :not([hidden]))) { display: none; }
/* ---- La coquille du mode jeu (19/10, assets/js/coquille-jeu.js) : le jeu s'ouvre dans un
cadre plein écran au-dessus de la page qui l'a lancé — la musique, partie au clic sur
« Jouer », continue ainsi d'une manche à l'autre. */
html.coquille-ouverte, html.coquille-ouverte body { overflow: hidden; }
.coquille-jeu { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; background: #05070f; }
.coquille-jeu__attente { margin: 0; font: 600 .95rem var(--titre); color: rgba(255, 255, 255, .72); }
.coquille-jeu.est-pret .coquille-jeu__attente { visibility: hidden; }
.coquille-jeu__cadre { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; background: transparent; }
.coquille-jeu__annuler {
margin-left: .5rem; padding: .25rem .7rem; border-radius: 99px; cursor: pointer;
font: 600 .85rem var(--titre); color: #fff; background: transparent; border: 1px solid rgba(255, 255, 255, .35);
}
.coquille-jeu__annuler:hover { background: rgba(255, 255, 255, .12); }
/* Le bandeau d'attente passe AU-DESSUS du cadre (sinon « Annuler » ne se clique pas) ;
jeu affiché : caché ; jeu en panne (réseau) : en haut, par-dessus la page d'erreur. */
.coquille-jeu__attente { position: relative; z-index: 1; padding: .55rem .6rem .55rem 1rem; border-radius: 99px; background: rgba(5, 7, 15, .82); }
.coquille-jeu.est-en-panne .coquille-jeu__attente { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); visibility: visible; color: #fff; box-shadow: 0 6px 20px rgba(0, 0, 0, .4); }
/* ======================================================================
Planning de la semaine (19/10, demande de Matthias : « tel jour on fait
celui-ci, tel jour celui-là ») — Mes révisions, Mes rappels, menus ⋯,
Paramètres d'un module, cloches des modules sur la page d'un cours.
====================================================================== */
.rappel-du-jour__actions { display: flex; flex-wrap: wrap; gap: .4rem; }
/* ---- les jours dans un menu ⋯ ---- */
.menu-suivi__jours { margin: .25rem 0; padding: .45rem .45rem .5rem; border-top: 1px solid var(--trait); border-bottom: 1px solid var(--trait); }
.jours--menu { margin: 0 0 .45rem; }
.jours--menu legend { display: inline-flex; align-items: center; gap: .35rem; margin-bottom: .4rem; font-size: .8rem; color: var(--encre-douce); }
.jours--menu legend .icone { color: var(--encre-douce); }
.jours--menu .jours__liste { flex-wrap: nowrap; gap: .25rem; }
.jour--mini span { min-width: 2.05rem; padding: .34rem .15rem; font-size: .76rem; }
.menu-jours__pied { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.menu-jours__aide { font-size: .72rem; color: var(--encre-douce); }
@media (max-width: 640px) {
.jours--menu .jour--mini { flex: 1 1 0; }
.jour--mini span { display: grid; min-width: 0; padding: .55rem 0; font-size: .85rem; }
}
/* ---- la semaine en un coup d'œil ---- */
.planning-intro { margin: 0; font-size: .92rem; color: var(--encre-douce); }
/* Dans une carte de réglages (Mes rappels) : de l'air entre la semaine et la grille. */
.reglage .planning-intro { margin-bottom: .7rem; }
.reglage .planning-edition { margin-top: 1.1rem; }
.semaine-boite { container-type: inline-size; }
.semaine { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .45rem; }
.semaine__jour {
display: flex; flex-direction: column; gap: .4rem; min-width: 0; min-height: 6.2rem; padding: .55rem .5rem .6rem;
border-radius: 12px; background: var(--sous-bulle, var(--papier)); border: 1px solid var(--trait);
}
.semaine__jour.est-aujourdhui { border-color: var(--cyan); background: var(--cyan-pale); box-shadow: inset 0 0 0 1px var(--cyan); }
.semaine__nom { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .4rem; margin: 0; font: 700 .86rem/1.2 var(--titre); color: var(--encre); }
.semaine__nom small { font: 700 .66rem var(--texte); text-transform: uppercase; letter-spacing: .04em; color: var(--lien); }
.semaine__court { display: none; }
.semaine__vide { margin: 0; font-size: .76rem; color: var(--encre-douce); }
.semaine__modules { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.planning-etiquette {
display: inline-flex; align-items: center; gap: .25rem; max-width: 100%; box-sizing: border-box; padding: .2rem .45rem; border-radius: 6px;
background: var(--teinte, var(--cyan-fonce)); color: var(--teinte-texte, #fff); font: 700 .74rem/1.25 var(--titre);
}
/* Le code passe à la ligne entre ses mots (« PSY / LANG ») plutôt que d'être coupé. */
.planning-etiquette > span:not(.saut-contenu) { min-width: 0; overflow-wrap: anywhere; }
.planning-etiquette .icone { flex: none; }
.planning-etiquette.est-en-pause { opacity: .45; }
/* Étroit (téléphone, colonne de page) : un jour par ligne, ses modules à côté. */
@container (max-width: 620px) {
.semaine { grid-template-columns: 1fr; gap: .3rem; }
.semaine__jour { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); align-items: center; gap: .4rem; min-height: 0; padding: .45rem .6rem; }
.semaine__nom { flex-direction: column; align-items: flex-start; gap: 0; }
.semaine__modules { flex-direction: row; flex-wrap: wrap; }
}
/* ---- la grille : une ligne par module, sept cases ---- */
.planning-edition { display: grid; gap: .2rem; }
.planning-edition--repli > summary { list-style: none; justify-self: start; }
.planning-edition--repli > summary::-webkit-details-marker { display: none; }
.planning-edition--repli[open] > summary { margin-bottom: .6rem; }
.planning-boite { container-type: inline-size; }
.planning__lignes { list-style: none; margin: 0; padding: 0; }
.planning__ligne {
display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: .45rem .9rem;
padding: .65rem .1rem; border-bottom: 1px solid var(--trait);
}
.planning__ligne:first-child { border-top: 1px solid var(--trait); }
.planning__module { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.planning__code {
flex: none; padding: .32rem .55rem; border-radius: 8px; white-space: nowrap;
background: var(--teinte, var(--cyan-fonce)); color: var(--teinte-texte, #fff); font: 700 .78rem/1.2 var(--titre);
}
.planning__textes { display: grid; gap: .08rem; min-width: 0; }
.planning__nom { display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; font-size: .9rem; }
.planning__nom .icone { color: var(--encre-douce); flex: none; }
.planning__nom small { font-weight: 600; color: var(--encre-douce); }
.planning__long { font-size: .8rem; color: var(--encre-douce); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.planning__etat { font-size: .78rem; font-weight: 600; color: var(--lien); }
.planning__jours { display: flex; gap: .25rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.planning__jour { position: relative; }
.planning__jour input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.planning__jour > span {
display: inline-grid; place-items: center; width: 2.2rem; height: 2.2rem; box-sizing: border-box; border-radius: 8px;
border: 1px solid var(--trait); background: var(--papier); color: var(--encre-douce);
font: 700 .78rem var(--texte); cursor: pointer; user-select: none;
}
.planning__jour > span:hover { border-color: var(--teinte, var(--cyan)); color: var(--encre); }
.planning__jour input:checked + span { background: var(--teinte, var(--cyan-fonce)); border-color: var(--teinte, var(--cyan-fonce)); color: var(--teinte-texte, #fff); }
.planning__jour input:focus-visible + span { outline: 3px solid var(--cyan); outline-offset: 1px; }
.planning__reglages {
display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%;
color: var(--encre-douce); border: 1px solid transparent; text-decoration: none;
}
.planning__reglages:hover { background: var(--papier); border-color: var(--trait); color: var(--encre); }
.planning__reglages .icone { width: 1.1rem; height: 1.1rem; }
.planning__ligne.est-pause .planning__jours, .planning__ligne.est-pause .planning__code { opacity: .55; }
.planning__ligne.est-coupe .planning__code, .planning__ligne.est-sommeil .planning__code { opacity: .6; }
.planning__pied { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-top: .9rem; }
.planning__pied .champ__aide { margin: 0; }
.planning__vide { margin: .2rem 0 0; color: var(--encre-douce); }
@container (max-width: 560px) {
.planning__ligne { grid-template-columns: minmax(0, 1fr) auto; }
.planning__module { grid-column: 1 / -1; }
.planning__jours { gap: .2rem; }
.planning__jour { flex: 1 1 0; }
.planning__jour > span { width: 100%; min-width: 0; }
}
/* ---- ajouter un module ---- */
.planning-ajout { margin-top: .9rem; }
.planning-ajout > summary {
display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; list-style: none;
font-weight: 700; font-size: .92rem; color: var(--lien);
}
.planning-ajout > summary::-webkit-details-marker { display: none; }
.planning-ajout__form {
display: grid; gap: .75rem; justify-items: start; margin-top: .65rem; padding: .9rem 1rem;
border-radius: 12px; background: var(--sous-bulle, var(--papier)); border: 1px solid var(--trait);
}
.planning-ajout__form select { max-width: 100%; }
.planning-ajout__form .champ { max-width: 100%; }
.planning-ajout__form .champ__aide { margin: 0; }
/* ---- Paramètres du module : chapitre par chapitre ---- */
.chapitres-reglage { list-style: none; margin: .4rem 0 1rem; padding: 0; }
.chapitre-reglage { padding: .65rem 0; border-bottom: 1px solid var(--trait); }
.chapitre-reglage:first-child { border-top: 1px solid var(--trait); }
.chapitre-reglage__tete { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; }
.chapitre-reglage__num {
display: inline-grid; place-items: center; min-width: 1.7rem; height: 1.7rem; padding: 0 .3rem; box-sizing: border-box;
border-radius: 7px; background: var(--cyan-pale); color: var(--lien); font: 700 .8rem var(--titre);
}
.chapitre-reglage__nom { font-weight: 700; font-size: .92rem; }
.chapitre-reglage__etat { font-size: .78rem; font-weight: 600; color: var(--encre-douce); }
.chapitre-reglage__lien { margin-left: auto; display: inline-flex; align-items: center; gap: .25rem; font-size: .8rem; font-weight: 600; text-decoration: none; }
.chapitre-reglage.est-arrete .chapitre-reglage__nom { color: var(--encre-douce); }
.chapitre-reglage__choix { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; margin-top: .45rem; }
.choix-mini { display: inline-flex; align-items: center; gap: .3rem; font-size: .86rem; cursor: pointer; }
.choix-mini input { accent-color: var(--cyan-fonce); margin: 0; }
.planning__jours--chapitre .planning__jour > span { width: 2rem; height: 2rem; font-size: .74rem; }
/* « Comme le module » : les cases montrent les jours du module, pâlies (les toucher passe « À part », rappels.js). */
.chapitre-reglage__choix:has(input[value="module"]:checked) .planning__jours { opacity: .45; }
/* ---- Paramètres d'un chapitre : son module ---- */
.encadre-module { margin: 0 0 .9rem; padding: .65rem .85rem; border-radius: 10px; background: var(--cyan-pale); border: 1px solid var(--trait); }
.encadre-module p { margin: 0; max-width: none; font-size: .9rem; }
.encadre-module p .icone { width: 1rem; height: 1rem; vertical-align: -.15em; margin-right: .3rem; color: var(--lien); }
.encadre-module__liens { margin-top: .3rem !important; font-size: .85rem !important; }
.suivi-barre__comme { margin: 0; }
/* ---- la cloche des modules, sur la page d'un cours ---- */
.sous-dossiers li { position: relative; }
.sous-dossier__cloche {
position: absolute; top: .75rem; right: .75rem; z-index: 1;
display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%;
background: var(--blanc); border: 1px solid var(--teinte-trait, var(--trait)); color: var(--duo-off, var(--encre-douce));
transition: transform .16s ease;
}
.sous-dossier__cloche .icone { width: 1rem; height: 1rem; }
.sous-dossier__cloche:hover { color: var(--lien); border-color: var(--cyan); }
.sous-dossier__cloche.est-active, .sous-dossier__cloche.est-active:hover { background: var(--duo-bleu, var(--cyan-fonce)); border-color: var(--duo-bleu, var(--cyan-fonce)); color: #fff; }
.sous-dossier__cloche:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
.sous-dossier--accent + .sous-dossier__cloche { top: .95rem; }
.sous-dossier--accent + .sous-dossier__cloche:not(.est-active) { background: rgba(255, 255, 255, .92); border-color: rgba(255, 255, 255, .6); color: #4a5866; }
/* La tuile se soulève au survol : sa cloche avec elle. */
.sous-dossiers li:hover > .sous-dossier__cloche { transform: translateY(-3px); }
.sous-dossiers li:hover > .sous-dossier--accent + .sous-dossier__cloche { transform: translateY(-4px); }
/* (19/10, retour de Matthias) La cloche est posée SUR la tuile mais n'en fait pas partie
(deux liens distincts) : survoler la cloche faisait retomber la tuile pendant que la
cloche restait levée. Le survol de la tuile suit donc toute la case (li), cloche comprise,
et la cloche répond à son propre survol par un léger grossissement. */
.sous-dossiers li:hover > .sous-dossier:not(.sous-dossier--accent) { color: var(--encre); transform: translateY(-3px); box-shadow: var(--ombre-drive); }
.sous-dossiers li:hover > .sous-dossier.sous-dossier--accent { color: var(--teinte-texte, #fff); transform: translateY(-4px); }
.sous-dossiers li:hover > .sous-dossier--accent .sous-dossier__cta { background: #fff; }
.sous-dossier__cloche { transition: transform .16s ease, background-color .16s ease, color .16s ease, border-color .16s ease, box-shadow .16s ease; }
.sous-dossiers li:hover > .sous-dossier__cloche:hover { transform: translateY(-3px) scale(1.1); box-shadow: 0 3px 10px rgba(16, 36, 58, .28); }
.sous-dossiers li:hover > .sous-dossier--accent + .sous-dossier__cloche:hover { transform: translateY(-4px) scale(1.1); }
@media (prefers-reduced-motion: reduce) {
.sous-dossier__cloche { transition: none; }
.sous-dossiers li:hover > .sous-dossier__cloche,
.sous-dossiers li:hover > .sous-dossier__cloche:hover { transform: none; }
}
/* ---- tiroirs du Module de révision sans saut de page (19/10, retour de Matthias) ----
tiroirs.js pose la page suivante SUR PLACE : le cadre du tiroir change de hauteur en
douceur (hauteur posée en ligne par le script), ce qui apparaît se fond, ce qui part
s'efface. flow-root : la marge du tiroir reste DANS le cadre (sinon la hauteur
mesurée sauterait de 18 px au début de l'animation). */
.rv-tiroir-cadre { display: flow-root; }
.rv-tiroir.rv-tiroir--entre { animation: rv-fondu .28s ease both; }
.rv-tiroir.rv-tiroir--sort { opacity: 0; transition: opacity .2s ease; }
.rv-apparait { animation: rv-fondu .32s ease both; }
@keyframes rv-fondu { from { opacity: 0; } to { opacity: 1; } }
[data-tiroirs] .est-en-cours { cursor: progress; }
[data-tiroirs][aria-busy="true"] .rv-tiroir-cadre { cursor: progress; }
@media (prefers-reduced-motion: reduce) {
.rv-tiroir.rv-tiroir--entre, .rv-apparait { animation: none; }
.rv-tiroir.rv-tiroir--sort { transition: none; }
}
/* ================================================================ 19/10 (retours de Matthias)
Page d'un chapitre = les tuiles du module ; « Gérer ▾ » ; le contenu en trois cases. */
/* ---- « Gérer ▾ » : un bouton sobre, un menu (paramètres, contenu, suppression). */
.rv-gerer { flex: none; margin-left: auto; }
.rv-gerer__bouton {
display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px 0 10px; border-radius: 10px;
border: 1px solid var(--teinte-trait, var(--trait)); background: var(--blanc); color: var(--encre);
font: 700 .8rem var(--titre); white-space: nowrap; cursor: pointer; user-select: none;
transition: border-color .16s ease, background-color .16s ease;
}
.rv-gerer__bouton .icone { width: 1rem; height: 1rem; color: var(--encre-douce); }
.rv-gerer__chevron { transition: transform .2s ease; }
.rv-gerer__bouton:hover, .rv-gerer[open] > .rv-gerer__bouton { border-color: var(--teinte, var(--cyan)); background: var(--teinte-pale, var(--blanc)); }
.rv-gerer[open] > .rv-gerer__bouton .rv-gerer__chevron { transform: rotate(180deg); }
.rv-gerer__bouton:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
.rv-gerer .menu-suivi__liste { min-width: 16rem; }
.rv-gerer .menu-suivi__choix { align-items: flex-start; }
.rv-gerer .menu-suivi__choix .icone { flex: none; margin-top: .12rem; }
.rv-gerer .menu-suivi__choix small { display: block; margin-top: .1rem; font-weight: 500; font-size: .76rem; }
/* La carte garde ses coins arrondis sans couper le menu ; ouverte, elle passe devant ses voisines. */
.rv-chap { overflow: visible; }
.rv-chapitres > li:has(.rv-gerer[open]) { position: relative; z-index: 6; }
.rv-chapitres > li:has(.rv-gerer[open]) .rv-chap { transform: none; }
/* L'action principale d'une carte : Jouer (ou Ajouter, tant que le chapitre est vide). */
.rv-chap__action--principale { background: var(--teinte, var(--cyan)); border-color: var(--teinte, var(--cyan)); color: var(--teinte-texte, #fff); }
.rv-chap__action--principale:hover { color: var(--teinte-texte, #fff); filter: brightness(1.07); }
/* Dans l'en-tête de la page d'un chapitre : en haut à droite. */
.entete-cours__actions { float: right; margin: -.2rem -.4rem .4rem 1rem; }
.entete-cours__actions .rv-gerer { margin: 0; }
.entete-cours__actions .menu-suivi__liste { z-index: 29; }
@media (max-width: 640px) {
.entete-cours__actions { margin: -.1rem -.2rem .3rem .6rem; }
.entete-cours__actions .rv-gerer__bouton span { display: none; }
}
/* ---- la page d'un chapitre */
.rv-module--chapitre .entete-cours { margin-bottom: 1.2rem; }
.rv-choix-deux + .rv-etape { margin-top: 14px; }
.rv-contenu { margin: 2.2rem 0 1.4rem; scroll-margin-top: 90px; }
.rv-contenu .rv-chapitres-tete { margin-top: 0; }
.rv-contenu__alerte { margin: 0 0 .8rem; }
.rv-contenu__alerte a {
display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .8rem; border-radius: 99px;
background: var(--grenat-pale); border: 1px solid var(--grenat-bord); color: var(--grenat-texte); font-size: .86rem; font-weight: 700; text-decoration: none;
}
.rv-contenu__cases { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.rv-contenu__case {
display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: start; gap: 4px 12px; padding: 16px 16px 14px;
background: var(--blanc); border: 1px solid var(--trait); border-radius: 14px;
}
.rv-contenu__case .rv-tuile__icone { margin: 0; grid-row: span 2; }
.rv-contenu__textes { min-width: 0; }
.rv-contenu__nom { margin: 0; font: 700 1rem/1.3 var(--titre); }
.rv-contenu__texte { margin: .15rem 0 0; font-size: .8rem; line-height: 1.42; color: var(--encre-douce); }
.rv-contenu__actions { grid-column: 1 / -1; list-style: none; margin: 10px 0 0; padding: 10px 0 0; border-top: 1px solid var(--trait); display: grid; gap: 2px; }
.rv-contenu__actions a {
display: flex; align-items: center; gap: .45rem; padding: .35rem .45rem; border-radius: 8px;
color: var(--encre); font-size: .85rem; font-weight: 600; text-decoration: none;
}
.rv-contenu__actions a:hover { background: var(--teinte-pale, var(--papier)); color: var(--encre); }
.rv-contenu__actions .icone { color: var(--encre-douce); }
.rv-contenu__actions a.rv-contenu__principal { justify-content: space-between; color: var(--lien); font-weight: 700; }
.rv-contenu__actions a.rv-contenu__principal .icone { color: currentColor; }
.rv-contenu__case.est-vide { background: var(--papier); border-style: dashed; }
.rv-contenu__case.est-vide .rv-contenu__nom { color: var(--encre-douce); }
@media (max-width: 900px) {
.rv-contenu__cases { grid-template-columns: minmax(0, 1fr); }
}
/* Sur la carte : « Gérer ▾ » flotte en haut à droite, le titre coule autour. */
.rv-chap__textes { display: block; }
.rv-chap__textes > .rv-gerer { float: right; margin: -2px -4px 6px 10px; }
.rv-chap__textes > .rv-gerer .rv-gerer__bouton { height: 30px; padding: 0 8px; font-size: .76rem; }
.rv-chap__textes > * + * { margin-top: 4px; }
.rv-chap__textes > .rv-gerer + * { margin-top: 0; }
.rv-chap__auto { display: inline-block; }
/* ---- fil d'Ariane collé : jamais de jour entre l'en-tête et lui (19/10, retour de Matthias,
téléphone : quelques pixels de page apparaissaient au-dessus du fil — hauteur arrondie,
barre d'adresse mobile qui se replie…). Un rabat de la couleur de l'en-tête bouche l'écart ;
il reste sous l'en-tête (z-index 40) quand tout est bien collé. */
/* Téléphone (retour de Matthias du 19/10, photo) : quelques pixels de la page apparaissaient entre
l'en-tête et le fil d'Ariane collé. Le fil remonte d'un pixel sous l'en-tête et porte un rabat
de sa couleur au-dessus de lui (invisible tant qu'il n'est pas collé). */
.barre-drive { top: calc(var(--entete-h, 68px) - 1px); }
.barre-drive::before {
content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 10px;
background: var(--papier); pointer-events: none;
}
@media print { .barre-drive::before { display: none; } }
/* Mot de passe : le conseil « tout nouveau » (19/10) */
.encadre ul { margin: .35rem 0 0; padding-left: 1.2rem; }
.encadre li { margin: .2rem 0; }
/* Sélection multiple (19/10) : « Tout sélectionner », le compte, la ligne cochée. */
.selection-tete {
position: sticky; top: calc(var(--entete-h, 60px) + var(--fil-h, 3.2rem) + .4rem); z-index: 4;
display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.2rem; margin: .6rem 0 .8rem; padding: .55rem .8rem;
border-radius: 12px; background: var(--blanc); border: 1px solid var(--trait); box-shadow: var(--ombre-drive);
}
.selection-tete[hidden] { display: none; }
.selection-tete__tout { display: inline-flex; align-items: center; gap: .55rem; font-weight: 600; cursor: pointer; }
.selection-tete__tout input { width: 1.25rem; height: 1.25rem; accent-color: var(--lien); cursor: pointer; }
.selection-tete__tout small { font-weight: 400; color: var(--encre-douce); }
.selection-tete__aide { font-size: .88rem; color: var(--encre-douce); }
.selection-barre__compte { font-weight: 600; font-size: .92rem; }
.selection-barre__compte.est-vide { font-weight: 400; color: var(--encre-douce); }
.selection-barre .bouton:disabled { opacity: .45; cursor: not-allowed; }
.fiches-question--selection .fiche-question.est-selectionnee,
.cartes-liste--selection .carte-ligne.est-selectionnee { outline: 2px solid var(--lien); outline-offset: -2px; background: color-mix(in srgb, var(--lien) 6%, var(--blanc)); }
.carte-ligne__cocher { display: grid; place-items: center; }
.carte-ligne__cocher input { width: 1.25rem; height: 1.25rem; accent-color: var(--lien); cursor: pointer; }
/* Module de révision : « Repartir de zéro » (19/10) et sa fenêtre d'avertissement (popover HTML,
sans JavaScript : le navigateur ouvre, ferme, et la touche Échap referme). */
.rv-raz { margin: 2.6rem 0 0; padding: 1rem 1.2rem; border-radius: 14px; border: 1px dashed var(--trait); color: var(--encre-douce); }
.rv-raz__titre { margin: 0 0 .25rem; font-size: 1rem; color: var(--encre); }
.rv-raz__texte { margin: 0 0 .7rem; font-size: .9rem; max-width: 46rem; }
.fenetre[popover] {
width: min(40rem, calc(100% - 2rem)); max-height: min(88vh, 46rem); max-height: min(88dvh, 46rem); padding: 0; overflow: auto;
border: 1px solid var(--trait); border-radius: 18px; background: var(--blanc); color: var(--encre);
box-shadow: 0 24px 70px rgba(10, 20, 35, .35);
}
.fenetre[popover]::backdrop { background: rgba(8, 16, 26, .5); }
/* Navigateur sans popover (iOS < 17, Firefox < 125) : la fenêtre reste cachée, le bouton aussi. */
@supports not selector(:popover-open) { .fenetre[popover], .rv-raz__bouton, .rj__reglages, .mr-avancement__bouton { display: none; } }
.fenetre__tete {
position: sticky; top: 0; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
padding: 1rem 1.2rem .8rem; background: var(--blanc); border-bottom: 1px solid var(--trait);
}
.fenetre__titre { display: flex; gap: .55rem; align-items: flex-start; margin: 0; font-size: 1.12rem; line-height: 1.35; }
.fenetre__titre .icone { flex: none; width: 1.35rem; height: 1.35rem; margin-top: .1rem; color: var(--grenat, #b3261e); }
.fenetre__fermer { flex: none; width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 1px solid var(--trait); background: var(--blanc); color: var(--encre); font-size: 1.3rem; line-height: 1; cursor: pointer; }
.fenetre__corps { padding: .4rem 1.2rem 1.2rem; font-size: .94rem; line-height: 1.55; }
.fenetre__corps h3 { margin: 1rem 0 .3rem; font-size: .98rem; }
.fenetre__corps p { margin: 0 0 .5rem; max-width: none; }
.fenetre__corps ul { margin: 0 0 .4rem; padding-left: 1.2rem; }
.fenetre__corps li { margin: .2rem 0; }
.fenetre__note { padding: .6rem .8rem; border-radius: 10px; background: var(--cyan-pale); font-size: .9rem; }
.fenetre__form { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--trait); display: grid; gap: .8rem; }
.fenetre__case { display: flex; gap: .55rem; align-items: flex-start; }
.fenetre__case input { margin-top: .2rem; width: 1.15rem; height: 1.15rem; flex: none; accent-color: var(--grenat, #b3261e); }
/* Éditeur mis en forme (24/10, editeur-riche.js) : la zone MONTRE le gras, l'italique, le
surligné, l'indice et l'exposant ; sa barre est collée au-dessus. Champ de plusieurs lignes :
une boîte (barre + texte) ; champ d'une ligne (réponses, éléments) : la barre apparaît
au-dessus du champ quand on y écrit, par-dessus ce qui précède (rien ne bouge). Le