/* Layana — interface ludique */
:root {
  --fond: #FFF7EE;
  --fond-2: #FFEFDC;
  --carte: #FFFFFF;
  --encre: #1F1A3D;
  --encre-2: #5B567A;
  --encre-3: #9A95B5;
  --trait: #EDE4D6;
  --violet: #6C4CF5;
  --violet-f: #4E2FD6;
  --violet-c: #EEE9FF;
  --corail: #FF6B5B;
  --corail-f: #E14A3A;
  --corail-c: #FFE6E2;
  --menthe: #19B98B;
  --menthe-f: #0E9670;
  --menthe-c: #DDF7EE;
  --soleil: #FFC23D;
  --soleil-f: #E3A215;
  --soleil-c: #FFF3D1;
  --ciel: #3FA9F5;
  --ciel-c: #DFF1FE;
  --rose: #F25FA8;
  --rose-c: #FDE3F0;
  --ombre: 0 10px 30px -12px rgba(46, 30, 120, .25);
  --r: 22px;
  --r-s: 14px;
  --titre: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --texte: 'Nunito', 'Segoe UI', system-ui, sans-serif;
  --nav-h: 74px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fond: #14112A; --fond-2: #1C1838; --carte: #221E42; --encre: #F4F1FF; --encre-2: #BDB6E0; --encre-3: #7F78A8;
    --trait: #332E5C; --violet-c: #2E2566; --corail-c: #4A2230; --menthe-c: #143D37; --soleil-c: #463A1C; --ciel-c: #173352; --rose-c: #47203A;
    --ombre: 0 10px 30px -12px rgba(0, 0, 0, .6); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fond: #14112A; --fond-2: #1C1838; --carte: #221E42; --encre: #F4F1FF; --encre-2: #BDB6E0; --encre-3: #7F78A8;
  --trait: #332E5C; --violet-c: #2E2566; --corail-c: #4A2230; --menthe-c: #143D37; --soleil-c: #463A1C; --ciel-c: #173352; --rose-c: #47203A;
  --ombre: 0 10px 30px -12px rgba(0, 0, 0, .6); color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; }
body {
  background: var(--fond); color: var(--encre); font-family: var(--texte); font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; min-height: 100dvh; overflow-x: hidden;
}
h1, h2, h3, h4 { font-family: var(--titre); line-height: 1.15; margin: 0 0 .4em; letter-spacing: -.01em; }
h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); font-weight: 800; }
h2 { font-size: 1.35rem; font-weight: 800; }
h3 { font-size: 1.08rem; font-weight: 700; }
p { margin: 0 0 .8em; }
a { color: var(--violet); }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.muet { color: var(--encre-2); }
.petit { font-size: .86rem; }

/* ---------- Boutons « 3D » ---------- */
.btn {
  --c: var(--violet); --cf: var(--violet-f);
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  border: 0; border-radius: 16px; padding: .8em 1.3em; font-weight: 800; font-size: .98rem; cursor: pointer;
  background: var(--c); color: #fff; box-shadow: 0 4px 0 var(--cf); transform: translateY(0);
  transition: transform .08s, box-shadow .08s, filter .15s; text-decoration: none; white-space: nowrap; user-select: none;
}
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--cf); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.corail { --c: var(--corail); --cf: var(--corail-f); }
.btn.menthe { --c: var(--menthe); --cf: var(--menthe-f); }
.btn.soleil { --c: var(--soleil); --cf: var(--soleil-f); color: #3B2A00; }
.btn.fantome { background: var(--carte); color: var(--encre); box-shadow: 0 4px 0 var(--trait), inset 0 0 0 2px var(--trait); }
.btn.fantome:active { box-shadow: 0 1px 0 var(--trait), inset 0 0 0 2px var(--trait); }
.btn.large { width: 100%; padding: 1em; font-size: 1.05rem; }
.btn.mini { padding: .45em .85em; font-size: .85rem; border-radius: 12px; box-shadow: 0 3px 0 var(--cf); }
.btn.fantome.mini { box-shadow: 0 3px 0 var(--trait), inset 0 0 0 2px var(--trait); }
.btn-icone { border: 0; background: transparent; cursor: pointer; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 1.2rem; color: var(--encre-2); }
.btn-icone:hover { background: var(--fond-2); }

/* ---------- Champs ---------- */
.champ { display: block; margin-bottom: 14px; }
.champ > span { display: block; font-weight: 800; font-size: .88rem; margin-bottom: 6px; color: var(--encre-2); }
.entree, select.entree, textarea.entree {
  width: 100%; border: 2px solid var(--trait); background: var(--carte); border-radius: 14px; padding: .8em 1em; outline: none; transition: border-color .15s, box-shadow .15s;
}
.entree:focus { border-color: var(--violet); box-shadow: 0 0 0 4px var(--violet-c); }
textarea.entree { resize: vertical; min-height: 90px; }

/* ---------- Chargement ---------- */
.chargement { min-height: 100dvh; display: grid; place-items: center; }
.logo-anim { width: 72px; height: 72px; border-radius: 22px; background: var(--violet); color: #fff; display: grid; place-items: center; font: 800 2.4rem var(--titre); animation: rebond 1s infinite ease-in-out; box-shadow: 0 6px 0 var(--violet-f); }
@keyframes rebond { 50% { transform: translateY(-12px) rotate(-6deg); } }

/* ---------- Connexion ---------- */
.ecran-connexion { min-height: 100dvh; display: grid; grid-template-columns: 1.1fr 1fr; }
.connexion-art { position: relative; overflow: hidden; background: var(--violet); color: #fff; padding: 48px; display: flex; flex-direction: column; justify-content: space-between; }
.connexion-art h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); max-width: 12ch; }
.connexion-art p { font-size: 1.1rem; max-width: 34ch; opacity: .9; }
.bulle { position: absolute; border-radius: 50%; z-index: 0; pointer-events: none; }
.connexion-art > :not(.bulle), .heros > :not(.bulle) { position: relative; z-index: 1; }
.connexion-form { display: grid; place-items: center; padding: 32px 16px; }
.connexion-form form { width: min(400px, 100%); }
.marque { display: flex; align-items: center; gap: 12px; font: 800 1.6rem var(--titre); }
.marque .pastille { width: 46px; height: 46px; border-radius: 15px; background: #fff; color: var(--violet); display: grid; place-items: center; font-size: 1.6rem; box-shadow: 0 4px 0 rgba(0,0,0,.15); }
.flottant { display: inline-flex; gap: 8px; align-items: center; background: rgba(255,255,255,.16); border-radius: 999px; padding: 8px 14px; font-weight: 700; margin: 4px 4px 0 0; backdrop-filter: blur(4px); }
.msg-erreur { background: var(--corail-c); color: var(--corail-f); border-radius: 12px; padding: 10px 14px; font-weight: 700; margin-bottom: 14px; }
@media (max-width: 820px) {
  .ecran-connexion { grid-template-columns: 1fr; }
  .connexion-art { padding: 28px 20px 36px; min-height: 0; gap: 18px; }
  .connexion-art h1 { font-size: 2rem; }
  .connexion-art .flottants { display: none; }
}

/* ---------- Coquille ---------- */
.coquille { display: grid; grid-template-columns: 250px 1fr; min-height: 100dvh; }
.barre { position: sticky; top: 0; height: 100dvh; padding: 22px 16px; border-right: 2px solid var(--trait); display: flex; flex-direction: column; gap: 6px; background: var(--fond); }
.barre .marque { font-size: 1.45rem; padding: 4px 8px 18px; color: var(--violet); }
.barre .marque .pastille { background: var(--violet); color: #fff; box-shadow: 0 4px 0 var(--violet-f); width: 40px; height: 40px; font-size: 1.3rem; border-radius: 13px; }
.lien-nav { display: flex; align-items: center; gap: 14px; padding: 11px 14px; border-radius: 14px; text-decoration: none; color: var(--encre-2); font-weight: 800; border: 2px solid transparent; }
.lien-nav .ico { font-size: 1.35rem; width: 28px; text-align: center; }
.lien-nav:hover { background: var(--fond-2); }
.lien-nav.actif { background: var(--violet-c); color: var(--violet); border-color: color-mix(in srgb, var(--violet) 35%, transparent); }
.barre .bas { margin-top: auto; }
.contenu { padding: 28px clamp(16px, 4vw, 44px) 60px; max-width: 1180px; width: 100%; }
.entete { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; flex-wrap: wrap; }
.entete .spacer { flex: 1; }
.compteurs { display: flex; gap: 8px; }
.compteur { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; font-weight: 800; background: var(--carte); border: 2px solid var(--trait); }
.compteur.feu { color: var(--corail); }
.compteur.xp { color: var(--soleil-f); }
.nav-mobile { display: none; }
@media (max-width: 900px) {
  .coquille { grid-template-columns: 1fr; }
  .barre { display: none; }
  .contenu { padding: 16px 16px calc(var(--nav-h) + 28px + env(safe-area-inset-bottom)); }
  .nav-mobile {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--carte); border-top: 2px solid var(--trait);
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); justify-content: space-around;
  }
  .nav-mobile a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; text-decoration: none; color: var(--encre-3); font-weight: 800; font-size: .7rem; padding: 6px 0; border-radius: 12px; }
  .nav-mobile a .ico { font-size: 1.45rem; transition: transform .2s; }
  .nav-mobile a.actif { color: var(--violet); }
  .nav-mobile a.actif .ico { transform: translateY(-2px) scale(1.12); }
}

/* ---------- Cartes & grilles ---------- */
.carte { background: var(--carte); border: 2px solid var(--trait); border-radius: var(--r); padding: 20px; }
.carte.ombre { box-shadow: var(--ombre); border-color: transparent; }
.grille { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.auto { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
@media (max-width: 900px) { .g3, .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .g2, .g3 { grid-template-columns: 1fr; } .auto { grid-template-columns: 1fr; } }
.section { margin: 30px 0 14px; display: flex; align-items: end; justify-content: space-between; gap: 10px; }
.section h2 { margin: 0; }

/* Héros accueil */
.heros { position: relative; overflow: hidden; border-radius: 28px; padding: 26px; background: var(--violet); color: #fff; display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; }
.heros h1 { margin-bottom: .2em; }
.heros p { opacity: .92; margin: 0 0 16px; max-width: 46ch; }
.heros .btn { --c: #fff; --cf: #D9D0FF; color: var(--violet); }
.anneau { position: relative; width: 124px; height: 124px; }
.anneau svg { transform: rotate(-90deg); }
.anneau .val { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; font: 800 1.5rem var(--titre); line-height: 1; }
.anneau .val small { display: block; font: 700 .72rem var(--texte); opacity: .85; margin-top: 3px; }
@media (max-width: 560px) { .heros { grid-template-columns: 1fr; padding: 22px 18px; } .anneau { justify-self: start; width: 104px; height: 104px; } }

/* Tuiles d'activité */
.tuile { --t: var(--violet); --tc: var(--violet-c); position: relative; display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: var(--r); background: var(--tc); text-decoration: none; color: var(--encre); border: 2px solid transparent; cursor: pointer; transition: transform .15s, border-color .15s; text-align: left; }
.tuile:hover { transform: translateY(-3px) rotate(-.4deg); border-color: var(--t); }
.tuile .emoji { width: 52px; height: 52px; border-radius: 16px; background: var(--t); display: grid; place-items: center; font-size: 1.6rem; box-shadow: 0 4px 0 color-mix(in srgb, var(--t) 70%, #000); margin-bottom: 6px; }
.tuile strong { font: 800 1.08rem var(--titre); }
.tuile span { color: var(--encre-2); font-size: .9rem; }
.t-corail { --t: var(--corail); --tc: var(--corail-c); }
.t-menthe { --t: var(--menthe); --tc: var(--menthe-c); }
.t-soleil { --t: var(--soleil); --tc: var(--soleil-c); }
.t-ciel { --t: var(--ciel); --tc: var(--ciel-c); }
.t-rose { --t: var(--rose); --tc: var(--rose-c); }

/* Cartes de cours */
.cours { display: flex; flex-direction: column; gap: 8px; padding: 18px; border-radius: var(--r); background: var(--carte); border: 2px solid var(--trait); text-decoration: none; color: inherit; transition: transform .15s, box-shadow .15s; cursor: pointer; }
.cours:hover { transform: translateY(-3px); box-shadow: var(--ombre); }
.cours .haut { display: flex; align-items: center; gap: 12px; }
.cours .ic { width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; font-size: 1.55rem; background: var(--tc, var(--violet-c)); flex: none; }
.cours h3 { margin: 0; }
.cours p { margin: 0; color: var(--encre-2); font-size: .92rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.etiquette { display: inline-flex; align-items: center; gap: 4px; font-size: .74rem; font-weight: 800; padding: 3px 9px; border-radius: 999px; background: var(--fond-2); color: var(--encre-2); }
.etiquette.l1 { background: var(--ciel-c); color: #1478C2; }
.etiquette.l2 { background: var(--menthe-c); color: var(--menthe-f); }
.etiquette.l3 { background: var(--soleil-c); color: #A66F00; }
.etiquette.master { background: var(--rose-c); color: #C2307A; }
.barre-prog { height: 10px; border-radius: 99px; background: var(--fond-2); overflow: hidden; }
.barre-prog > i { display: block; height: 100%; border-radius: 99px; background: var(--menthe); transition: width .5s; }

/* Puces de filtre */
.puces { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 14px; scrollbar-width: none; }
.puce { flex: none; border: 2px solid var(--trait); background: var(--carte); border-radius: 999px; padding: 8px 15px; font-weight: 800; cursor: pointer; color: var(--encre-2); }
.puce.actif { background: var(--encre); color: var(--fond); border-color: var(--encre); }
.recherche { position: relative; margin-bottom: 14px; }
.recherche .entree { padding-left: 44px; }
.recherche::before { content: '🔎'; position: absolute; left: 15px; top: 50%; transform: translateY(-50%); }

/* ---------- Lecture de cours ---------- */
.fil { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--encre-2); font-weight: 800; margin-bottom: 14px; }
.cours-tete { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
.cours-tete .ic { width: 74px; height: 74px; border-radius: 22px; font-size: 2.3rem; display: grid; place-items: center; background: var(--violet-c); }
.actions { display: flex; gap: 10px; flex-wrap: wrap; }
.chapitre { margin-bottom: 16px; }
.chapitre summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; }
.chapitre summary::-webkit-details-marker { display: none; }
.chapitre summary .num { width: 38px; height: 38px; border-radius: 12px; background: var(--violet); color: #fff; display: grid; place-items: center; font: 800 1rem var(--titre); flex: none; }
.chapitre summary h3 { margin: 0; flex: 1; }
.chapitre[open] summary .fleche { transform: rotate(180deg); }
.chapitre .fleche { transition: transform .2s; }
.resume { background: var(--soleil-c); border-radius: 14px; padding: 12px 14px; margin: 14px 0; font-weight: 600; }
.texte-cours { font-size: 1.02rem; }
.texte-cours h4 { font-size: 1.1rem; color: var(--violet); margin-top: 1.2em; }
.texte-cours li { margin-bottom: .4em; }
.refs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ref { font-size: .82rem; font-weight: 800; padding: 5px 10px; border-radius: 10px; background: var(--violet-c); color: var(--violet); }
.ref.arret { background: var(--corail-c); color: var(--corail-f); }

/* ---------- QCM ---------- */
.jeu { max-width: 720px; margin: 0 auto; }
.jeu-haut { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.jeu-haut .barre-prog { flex: 1; height: 16px; }
.jeu-haut .barre-prog > i { background: var(--menthe); box-shadow: inset 0 -4px 0 rgba(0,0,0,.12); }
.question { font: 700 1.35rem var(--titre); margin-bottom: 20px; }
.options { display: grid; gap: 12px; }
.option {
  display: flex; gap: 14px; align-items: center; text-align: left; width: 100%; padding: 14px 16px; border-radius: 18px;
  background: var(--carte); border: 2px solid var(--trait); box-shadow: 0 4px 0 var(--trait); cursor: pointer; font-weight: 700; transition: transform .08s;
}
.option:hover:not(:disabled) { border-color: var(--violet); }
.option:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--trait); }
.option .lettre { width: 34px; height: 34px; border-radius: 10px; border: 2px solid var(--trait); display: grid; place-items: center; flex: none; font-weight: 800; color: var(--encre-2); }
.option.bon { background: var(--menthe-c); border-color: var(--menthe); box-shadow: 0 4px 0 var(--menthe); }
.option.bon .lettre { background: var(--menthe); border-color: var(--menthe); color: #fff; }
.option.faux { background: var(--corail-c); border-color: var(--corail); box-shadow: 0 4px 0 var(--corail); animation: secoue .35s; }
.option.faux .lettre { background: var(--corail); border-color: var(--corail); color: #fff; }
.option:disabled { cursor: default; }
@keyframes secoue { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.verdict { position: sticky; bottom: calc(var(--nav-h) + 10px); margin-top: 20px; border-radius: 20px; padding: 16px 18px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; animation: monte .25s ease-out; }
@media (min-width: 901px) { .verdict { bottom: 16px; } }
.verdict.ok { background: var(--menthe-c); color: var(--menthe-f); }
.verdict.ko { background: var(--corail-c); color: var(--corail-f); }
.verdict .txt { flex: 1; min-width: 220px; color: var(--encre); }
.verdict .txt strong { display: block; font: 800 1.15rem var(--titre); }
.verdict.ok .txt strong { color: var(--menthe-f); }
.verdict.ko .txt strong { color: var(--corail-f); }
@keyframes monte { from { transform: translateY(20px); opacity: 0; } }
.combo { font-weight: 800; color: var(--corail); white-space: nowrap; }
.chrono { font-weight: 800; font-variant-numeric: tabular-nums; }
.resultat { text-align: center; padding: 30px 20px; }
.resultat .gros { font: 800 4rem var(--titre); color: var(--violet); line-height: 1; }
.stats-fin { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 20px 0; }
.stat-fin { border: 2px solid var(--trait); border-radius: 16px; padding: 10px 16px; min-width: 110px; }
.stat-fin b { display: block; font: 800 1.4rem var(--titre); }

/* ---------- Flashcards ---------- */
.scene { perspective: 1400px; max-width: 560px; margin: 0 auto; }
.flash { position: relative; height: 340px; transform-style: preserve-3d; transition: transform .55s cubic-bezier(.3,1.4,.5,1); cursor: pointer; }
.flash.retournee { transform: rotateY(180deg); }
.face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 26px; padding: 26px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; overflow: auto; }
.face.recto { background: var(--violet); color: #fff; box-shadow: 0 8px 0 var(--violet-f); }
.face.verso { background: var(--carte); border: 2px solid var(--trait); box-shadow: 0 8px 0 var(--trait); transform: rotateY(180deg); white-space: pre-line; text-align: left; align-items: stretch; justify-content: flex-start; }
.face .q { font: 700 1.35rem var(--titre); }
.face .indice { position: absolute; bottom: 16px; left: 0; right: 0; text-align: center; font-size: .85rem; opacity: .75; font-weight: 700; }
.face .badge-ref { position: absolute; top: 16px; left: 16px; font-size: .78rem; font-weight: 800; background: rgba(255,255,255,.2); padding: 4px 10px; border-radius: 99px; }
.boutons-flash { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 560px; margin: 22px auto 0; }
.boites { display: flex; gap: 6px; justify-content: center; margin: 14px 0; flex-wrap: wrap; }
.boite { font-size: .78rem; font-weight: 800; padding: 4px 10px; border-radius: 99px; background: var(--fond-2); color: var(--encre-2); }

/* ---------- Diaporama ---------- */
.diapo-plein { position: fixed; inset: 0; z-index: 80; background: #120E2B; color: #fff; display: flex; flex-direction: column; }
.diapo-barre { display: flex; align-items: center; gap: 10px; padding: 12px 16px; padding-top: calc(12px + env(safe-area-inset-top)); }
.diapo-barre .btn-icone { color: #fff; }
.diapo-barre .btn-icone:hover { background: rgba(255,255,255,.1); }
.diapo-scene { flex: 1; display: grid; place-items: center; padding: 10px 16px; overflow: hidden; }
.diapo { width: min(1100px, 100%); aspect-ratio: 16 / 9; max-height: 100%; border-radius: 26px; padding: clamp(20px, 5vw, 56px); position: relative; overflow: auto; animation: entreDiapo .35s ease-out; display: flex; flex-direction: column; justify-content: center; }
@keyframes entreDiapo { from { opacity: 0; transform: translateX(30px) scale(.98); } }
.diapo h2 { font-size: clamp(1.4rem, 3.6vw, 2.7rem); }
.diapo ul { font-size: clamp(.95rem, 1.9vw, 1.35rem); padding-left: 1.1em; }
.diapo li { margin-bottom: .45em; }
.diapo .sur { text-transform: uppercase; letter-spacing: .12em; font-weight: 800; font-size: .8rem; opacity: .8; margin-bottom: 10px; }
.diapo.d0 { background: linear-gradient(135deg, #6C4CF5, #9B6BFF); }
.diapo.d1 { background: #FFF7EE; color: #1F1A3D; }
.diapo.d1 h2 { color: #6C4CF5; }
.diapo.d2 { background: #FF6B5B; }
.diapo.d3 { background: #19B98B; }
.diapo.d4 { background: #FFC23D; color: #2A1E00; }
.diapo-pied { display: flex; justify-content: center; gap: 6px; padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); }
.point { width: 9px; height: 9px; border-radius: 99px; background: rgba(255,255,255,.3); border: 0; padding: 0; cursor: pointer; transition: width .2s; }
.point.actif { width: 26px; background: #fff; }

/* ---------- Groupes / discussion ---------- */
.groupe-vue { display: grid; grid-template-columns: 1fr 320px; gap: 16px; }
@media (max-width: 1000px) { .groupe-vue { grid-template-columns: 1fr; } }
.discussion { display: flex; flex-direction: column; height: min(68dvh, 680px); padding: 0; overflow: hidden; }
.fil-msg { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.msg { max-width: 78%; align-self: flex-start; }
.msg .bulle-msg { background: var(--fond-2); padding: 10px 14px; border-radius: 18px 18px 18px 6px; white-space: pre-wrap; word-wrap: break-word; }
.msg.moi { align-self: flex-end; text-align: right; }
.msg.moi .bulle-msg { background: var(--violet); color: #fff; border-radius: 18px 18px 6px 18px; text-align: left; }
.msg .meta { font-size: .74rem; color: var(--encre-3); font-weight: 700; margin: 0 6px 3px; }
.msg.systeme { align-self: center; font-size: .82rem; color: var(--encre-3); font-weight: 700; }
.saisie { display: flex; gap: 8px; padding: 12px; border-top: 2px solid var(--trait); align-items: flex-end; }
.saisie textarea { min-height: 46px; max-height: 140px; resize: none; }
.code-groupe { font: 800 1.3rem var(--titre); letter-spacing: .08em; background: var(--soleil-c); color: #8A5A00; padding: 8px 14px; border-radius: 12px; display: inline-block; }
.fichier { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 14px; border: 2px solid var(--trait); margin-bottom: 8px; }
.fichier .ext { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; font-size: .72rem; text-transform: uppercase; color: #fff; background: var(--ciel); flex: none; }
.fichier .ext.pdf { background: var(--corail); }
.fichier .ext.xlsx, .fichier .ext.xls, .fichier .ext.csv, .fichier .ext.ods { background: var(--menthe); }
.fichier .ext.docx, .fichier .ext.doc, .fichier .ext.odt { background: var(--violet); }
.fichier .ext.pptx { background: var(--soleil); }
.fichier .nom { flex: 1; min-width: 0; }
.fichier .nom b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .92rem; }
.depot { border: 2px dashed var(--trait); border-radius: 16px; padding: 16px; text-align: center; color: var(--encre-2); font-weight: 700; cursor: pointer; display: block; }
.depot:hover, .depot.survol { border-color: var(--violet); background: var(--violet-c); }

/* ---------- Tableaux ---------- */
.tableau-wrap { overflow-x: auto; border-radius: 16px; border: 2px solid var(--trait); }
table.tableau { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tableau th, .tableau td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--trait); vertical-align: middle; }
.tableau th { background: var(--fond-2); font-weight: 800; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--encre-2); white-space: nowrap; }
.tableau tr:last-child td { border-bottom: 0; }

/* ---------- Profil ---------- */
.avatar { width: 84px; height: 84px; border-radius: 26px; background: var(--corail); color: #fff; display: grid; place-items: center; font: 800 2.2rem var(--titre); box-shadow: 0 5px 0 var(--corail-f); flex: none; }
.badge-obtenu { text-align: center; padding: 14px 8px; border-radius: 18px; background: var(--carte); border: 2px solid var(--trait); }
.badge-obtenu .e { font-size: 2rem; display: block; }
.badge-obtenu b { font-size: .84rem; display: block; }
.badge-obtenu.verrou { opacity: .4; filter: grayscale(1); }
.classement li { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--trait); }
.classement li:last-child { border-bottom: 0; }
.classement .rang { width: 30px; height: 30px; border-radius: 10px; background: var(--fond-2); display: grid; place-items: center; font-weight: 800; }
.classement li.moi { color: var(--violet); font-weight: 800; }
.classement ol { list-style: none; padding: 0; margin: 0; }

/* ---------- Modale ---------- */
.voile { position: fixed; inset: 0; background: rgba(20, 14, 50, .55); z-index: 90; display: grid; place-items: center; padding: 16px; animation: fondu .2s; }
@keyframes fondu { from { opacity: 0; } }
.modale { background: var(--carte); border-radius: 26px; padding: 24px; width: min(520px, 100%); max-height: 90dvh; overflow: auto; animation: monte .25s ease-out; }
.modale.large { width: min(1000px, 100%); }
.modale-haut { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.modale-haut h2 { margin: 0; }
.secret { font: 800 1.25rem ui-monospace, Consolas, monospace; background: var(--soleil-c); padding: 12px 14px; border-radius: 12px; letter-spacing: .04em; word-break: break-all; }

/* ---------- Toasts & confettis ---------- */
#toasts { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 100; display: flex; flex-direction: column; gap: 8px; width: min(420px, calc(100% - 32px)); pointer-events: none; }
.toast { background: var(--encre); color: var(--fond); padding: 12px 16px; border-radius: 16px; font-weight: 800; box-shadow: var(--ombre); animation: tombe .3s ease-out; }
.toast.xp { background: var(--soleil); color: #3B2A00; }
.toast.err { background: var(--corail); color: #fff; }
@keyframes tombe { from { transform: translateY(-20px); opacity: 0; } }
#confettis { position: fixed; inset: 0; pointer-events: none; z-index: 110; width: 100%; height: 100%; }

.vide { text-align: center; padding: 40px 20px; color: var(--encre-2); }
.vide .e { font-size: 3rem; display: block; margin-bottom: 8px; }
.ligne { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ligne.entre { justify-content: space-between; }
.pile > * + * { margin-top: 12px; }
.jauge-espace { height: 14px; border-radius: 99px; background: var(--fond-2); overflow: hidden; }
.jauge-espace i { display: block; height: 100%; background: linear-gradient(90deg, var(--menthe), var(--soleil)); }
.onglets { display: flex; gap: 6px; background: var(--fond-2); padding: 5px; border-radius: 16px; margin-bottom: 18px; overflow-x: auto; }
.onglet { flex: 1; border: 0; background: transparent; padding: 9px 14px; border-radius: 12px; font-weight: 800; cursor: pointer; color: var(--encre-2); white-space: nowrap; }
.onglet.actif { background: var(--carte); color: var(--violet); box-shadow: 0 2px 0 var(--trait); }

@media print {
  .barre, .nav-mobile, .actions, .fil, .entete, #toasts { display: none !important; }
  .coquille { display: block; }
  .chapitre { break-inside: avoid-page; }
  details.chapitre > *:not(summary) { display: block !important; }
  body { background: #fff; color: #000; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---------- En-tête : profil ---------- */
.moi-chip { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; padding: 4px 12px 4px 4px; border-radius: 999px; background: var(--carte); border: 2px solid var(--trait); }
.moi-chip b { display: block; font-size: .9rem; line-height: 1.1; }
.moi-chip small { display: block; font-size: .74rem; color: var(--encre-2); font-weight: 700; }
.mini-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--corail); color: #fff; display: grid; place-items: center; font: 800 1rem var(--titre); }
.mobile-seul { display: none !important; }
@media (max-width: 900px) { .mobile-seul { display: flex !important; } .bureau-seul { display: none; } .moi-chip { padding: 3px; } .entete { margin-bottom: 14px; } }

/* ---------- Héros : recherche + semaine ---------- */
.barre-recherche { display: flex; align-items: center; gap: 8px; background: var(--carte); border-radius: 16px; padding: 6px 6px 6px 14px; margin-bottom: 16px; max-width: 520px; box-shadow: 0 6px 20px -10px rgba(0,0,0,.4); }
.barre-recherche input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--encre); padding: 8px 0; }
.heros .barre-recherche .btn { --c: var(--violet); --cf: var(--violet-f); color: #fff; }
.carte-semaine { background: var(--carte); color: var(--encre); border-radius: 22px; padding: 16px 18px; width: 330px; box-shadow: 0 14px 30px -14px rgba(0,0,0,.45); }
.carte-semaine .anneau { width: 92px; height: 92px; flex: none; }
.carte-semaine .val { font-size: 1.25rem; color: var(--encre); }
.barres { display: flex; gap: 6px; align-items: flex-end; height: 64px; margin-top: 8px; }
.barres > div { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.barres i { width: 100%; max-width: 14px; border-radius: 6px 6px 3px 3px; background: var(--violet-c); display: block; min-height: 4px; }
.barres .auj i { background: var(--violet); }
.barres span { font-size: .68rem; font-weight: 800; color: var(--encre-3); line-height: 1; }
@media (max-width: 900px) { .carte-semaine { width: 100%; } }

/* ---------- Planning ---------- */
.plan-grille { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; margin-top: 16px; align-items: start; }
@media (max-width: 1100px) { .plan-grille { grid-template-columns: 1fr; } }
.calendrier { overflow-x: auto; }
.cal-tete, .cal-corps { display: grid; grid-template-columns: 38px repeat(7, minmax(0, 1fr)); gap: 4px; min-width: 520px; }
.cal-tete { margin-bottom: 6px; }
.cal-jour { border: 0; background: transparent; cursor: pointer; display: flex; flex-direction: column; align-items: center; padding: 4px 0; border-radius: 12px; color: var(--encre-2); }
.cal-jour small { font-size: .74rem; font-weight: 800; text-transform: capitalize; }
.cal-jour b { font: 800 1.05rem var(--titre); width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; }
.cal-jour.auj b { background: var(--violet); color: #fff; box-shadow: 0 3px 0 var(--violet-f); }
.cal-heures { position: relative; height: var(--h); }
.cal-heures span { display: block; height: var(--pxh); font-size: .72rem; font-weight: 800; color: var(--encre-3); transform: translateY(-.6em); }
.cal-col { position: relative; height: var(--h); border-radius: 12px; cursor: copy;
  background: repeating-linear-gradient(to bottom, var(--fond-2) 0 1px, transparent 1px var(--pxh)); }
.cal-col.auj { background-color: color-mix(in srgb, var(--violet-c) 45%, transparent); }
.cal-maintenant { position: absolute; left: 0; right: 0; height: 2px; background: var(--corail); z-index: 2; pointer-events: none; }
.cal-maintenant::before { content: ''; position: absolute; left: -4px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--corail); }
.evt { position: absolute; left: 3px; right: 3px; border: 0; border-left: 4px solid var(--t, var(--violet)); background: var(--tc, var(--violet-c)); color: var(--encre); border-radius: 10px; padding: 4px 7px; text-align: left; cursor: pointer; overflow: hidden; font-size: .76rem; line-height: 1.25; display: flex; flex-direction: column; z-index: 1; transition: transform .1s; }
.evt:hover { transform: scale(1.03); z-index: 3; }
.evt b { font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.evt span { color: var(--encre-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.evt-ligne { display: flex; gap: 12px; align-items: center; width: 100%; text-align: left; border: 0; border-left: 5px solid var(--t, var(--violet)); background: var(--tc, var(--violet-c)); color: var(--encre); border-radius: 14px; padding: 10px 12px; cursor: pointer; font: inherit; }
.evt-ligne > b:first-child { min-width: 48px; font-variant-numeric: tabular-nums; }
.t-violet { --t: var(--violet); --tc: var(--violet-c); }
.legende { background: var(--tc, var(--violet-c)); border-radius: 99px; padding: 3px 10px; font-weight: 800; font-size: .76rem; }
.objectifs { display: flex; flex-direction: column; gap: 4px; }
.objectif { display: flex; align-items: center; gap: 10px; padding: 6px 4px; border-radius: 10px; cursor: pointer; font-weight: 700; }
.objectif:hover { background: var(--fond-2); }
.objectif input { width: 20px; height: 20px; accent-color: var(--violet); flex: none; }
.objectif span { flex: 1; }
.objectif.fait span { text-decoration: line-through; color: var(--encre-3); }
.plante { text-align: center; background: linear-gradient(180deg, var(--menthe-c), var(--carte)); border-color: transparent; }
@media (max-width: 900px) {
  .entete { flex-wrap: nowrap; gap: 6px; }
  .compteurs { gap: 5px; }
  .compteur { padding: 5px 9px; font-size: .9rem; }
}
@media (max-width: 380px) { .entete .marque.mobile-seul { font-size: 0 !important; gap: 0; } }

/* ---------- Discussions ---------- */
.lien-nav, .nav-mobile a { position: relative; }
.pastille-nl { position: absolute; top: 4px; right: 10px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--corail); color: #fff; font: 800 .72rem/20px var(--texte); text-align: center; box-shadow: 0 0 0 2px var(--fond); }
.nav-mobile .pastille-nl { top: 0; right: calc(50% - 26px); }
.pastille-nl.statique { position: static; box-shadow: none; display: inline-block; }
.conv { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; text-decoration: none; color: inherit; }
.conv:hover { background: var(--fond-2); }
.conv + .conv { border-top: 1px solid var(--trait); }
.conv .mini-avatar { width: 44px; height: 44px; border-radius: 14px; flex: none; }
.conv-txt { flex: 1; min-width: 0; }
.conv-txt b, .conv-txt small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-txt small { color: var(--encre-2); }
.conv-droite { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.conv-droite small { color: var(--encre-3); font-size: .72rem; font-weight: 700; }
.emojis { display: flex; gap: 2px; padding: 6px 10px 0; overflow-x: auto; border-top: 2px solid var(--trait); scrollbar-width: none; }
.emojis button { border: 0; background: transparent; font-size: 1.25rem; cursor: pointer; padding: 4px 6px; border-radius: 10px; }
.emojis button:hover { background: var(--fond-2); }
.emojis + .saisie { border-top: 0; }
.bulle-msg a { color: inherit; text-decoration: underline; }
.partage { display: flex; gap: 10px; align-items: center; margin-top: 6px; padding: 10px 12px; border-radius: 14px; background: var(--carte); color: var(--encre) !important; text-decoration: none !important; border: 2px solid var(--trait); min-width: 200px; }
.partage > span:first-child { font-size: 1.5rem; }
.partage small { display: block; color: var(--encre-2); font-weight: 800; font-size: .72rem; text-transform: uppercase; }
.suppr-msg { border: 0; background: transparent; color: var(--encre-3); cursor: pointer; font-size: .75rem; padding: 0 2px; opacity: 0; }
.msg:hover .suppr-msg, .suppr-msg:focus { opacity: 1; }
@media (hover: none) { .suppr-msg { opacity: .6; } }
.annonce { display: flex; gap: 10px; align-items: center; background: var(--soleil-c); border-radius: 16px; padding: 12px 16px; margin-bottom: 12px; font-weight: 700; }
.annonce span { flex: 1; }
.annonce small { color: var(--encre-2); white-space: nowrap; }
.examen { background: var(--ciel-c); border-color: transparent; }

/* ---------- Écran de connexion illustré ---------- */
.ecran-connexion {
  position: relative; min-height: 100dvh; display: block; overflow: hidden;
  background: #CFC8F2 url('/fond.jpg') 50% 30% / cover no-repeat;
}
.ecran-connexion::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 55% 40% at 53% 18%, rgba(255,255,255,.38), transparent 70%); pointer-events: none; }
.titre-scene { position: absolute; z-index: 1; left: 53%; top: clamp(24px, 9vh, 110px); transform: translateX(-50%); text-align: center; width: max-content; max-width: 92vw; animation: apparition 1.1s ease-out both; }
.manuscrit { font: 400 clamp(4.2rem, 9vw, 8.5rem)/1 'Great Vibes', 'Dancing Script', cursive; color: #2A2366; margin: 0; letter-spacing: 0; text-shadow: 0 2px 18px rgba(255,255,255,.85), 0 0 2px rgba(255,255,255,.9); }
.sous-manuscrit { font: 500 clamp(1.2rem, 2.2vw, 1.85rem)/1.2 'Dancing Script', cursive; color: #3A3270; margin: 6px 0 0; text-shadow: 0 1px 10px rgba(255,255,255,.9); }
.sous-manuscrit::after { content: ''; display: block; width: 90px; height: 2px; margin: 14px auto 0; border-radius: 2px; background: rgba(58,50,112,.45); }
@keyframes apparition { from { opacity: 0; transform: translate(-50%, -12px); } }
.connexion-form { position: absolute; z-index: 1; right: clamp(16px, 2.5vw, 48px); top: 56%; transform: translateY(-50%); display: block; padding: 0; }
.verre { width: min(360px, calc(100vw - 32px)); background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); border: 1px solid rgba(255,255,255,.7); border-radius: 26px; padding: 26px; box-shadow: 0 24px 60px -24px rgba(40, 25, 110, .55); color: #1F1A3D; }
.verre .muet { color: #5B567A; }
.verre .entree { background: rgba(255,255,255,.9); border-color: #E4DCF3; color: #1F1A3D; }
@media (max-width: 820px) {
  .ecran-connexion { background-image: url('/fond-mobile.jpg'); background-position: 42% 0; }
  .titre-scene { left: 50%; top: max(28px, env(safe-area-inset-top)); }
  .connexion-form { left: 16px; right: 16px; top: auto; bottom: max(16px, env(safe-area-inset-bottom)); transform: none; }
  .verre { width: 100%; padding: 20px; }
  .verre > p.muet:first-of-type { display: none; }
}
@media (max-width: 820px) and (max-height: 640px) { .titre-scene { display: none; } }

/* Héros d'accueil : même illustration en fond */
.heros { background: linear-gradient(100deg, rgba(64, 38, 190, .95) 0%, rgba(108, 76, 245, .86) 45%, rgba(108, 76, 245, .25) 100%), url('/fond.jpg') 60% 35% / cover; }

/* ---------- Illustration en fond de toute l'appli ---------- */
.coquille { position: relative; isolation: isolate; }
.coquille::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(color-mix(in srgb, var(--fond) 52%, transparent), color-mix(in srgb, var(--fond) 68%, transparent)), url('/fond.jpg') 50% 30% / cover no-repeat;
}
.barre { background: color-mix(in srgb, var(--fond) 72%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-right-color: color-mix(in srgb, var(--trait) 70%, transparent); }
.nav-mobile { background: color-mix(in srgb, var(--carte) 88%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
@media (max-width: 900px) { .coquille::before { background-image: linear-gradient(color-mix(in srgb, var(--fond) 52%, transparent), color-mix(in srgb, var(--fond) 68%, transparent)), url('/fond-mobile.jpg'); background-position: 42% 0; } }