/* QELI - couche « netteté » (chargée en dernier, après qeli-theme.css).
   Une seule police, nette et géométrique (Plus Jakarta Sans), une échelle de tailles compacte,
   des icônes de 20 px au trait de 2, des cartes blanches à fine bordure au lieu d'ombres marquées,
   et une barre d'onglets simple : icône + petit libellé, l'onglet actif en couleur.
   Aucun cadratin ni demi-cadratin : trait d'union uniquement. */

@font-face{font-family:"Plus Jakarta Sans";src:url("../polices/jakarta-400.503e7cbdb484.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Plus Jakarta Sans";src:url("../polices/jakarta-500.e5e6761eaecb.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Plus Jakarta Sans";src:url("../polices/jakarta-600.79e62f3332cd.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Plus Jakarta Sans";src:url("../polices/jakarta-700.5b629bd8abb4.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Plus Jakarta Sans";src:url("../polices/jakarta-800.408ecc6630e8.woff2") format("woff2");font-weight:800;font-display:swap}

/* ---------- Échelle typographique ---------- */
:root{
  --police-titre:"QELI Chiffres","Plus Jakarta Sans",system-ui,-apple-system,sans-serif;
  --police-texte:"QELI Chiffres","Plus Jakarta Sans",system-ui,-apple-system,sans-serif;
  --t-h1:1.5rem; --t-h2:1.1875rem; --t-h3:1.0625rem; --t-h4:.9375rem; --t-chiffre:1.75rem;
  --t-texte:.9375rem; --t-petit:.8125rem;
  --r-bouton:12px; --r-champ:12px; --r-carte:16px; --r-grande:20px;
}
@media (min-width:1024px){:root{--t-h1:1.875rem; --t-h2:1.3125rem; --t-h3:1.125rem; --t-h4:1rem; --t-chiffre:2rem; --t-texte:1rem}}

body{font:400 var(--t-texte)/1.5 var(--police-texte);font-variant-numeric:tabular-nums;-webkit-tap-highlight-color:transparent}
h1,h2,h3,h4{font-family:var(--police-titre);line-height:1.2;letter-spacing:-.02em}
h1{font-weight:800} h2,h3,h4{font-weight:700}
strong,b{font-weight:700}
p{margin-top:0}
.note,small{color:var(--texte-2);font-weight:500}
.logo{font-family:"QELI Chiffres","Sora",var(--police-titre)}
.hero h1,.entete-page h1{letter-spacing:-.03em}
.hero h1{font-size:clamp(1.875rem,8vw,2.75rem)}
.question-ecran legend h1{font-size:clamp(1.5rem,6vw,1.875rem)}
.signature{font-size:.8125rem;font-weight:700}

/* ---------- Icônes : 20 px, alignées sur le texte ---------- */
svg{flex:none}
.ligne .pictogramme,.icone-carre{width:36px;height:36px;border-radius:11px;display:flex;align-items:center;justify-content:center}
.ligne .pictogramme svg,.icone-carre svg{width:18px;height:18px}
.ligne > svg{width:18px;height:18px;color:var(--texte-2)}
.meta svg,.prochain .meta svg{width:16px;height:16px;vertical-align:-3px}
.titre-icone{display:flex;align-items:center;gap:8px;font-weight:700}
.titre-icone svg{width:18px;height:18px}

/* ---------- Cartes et lignes : fond blanc, fine bordure ---------- */
.carte,.tuile-app,.chiffre,.indicateur,.ligne,.discussion-entete,.tuile,.reponse,.bulle.recue > div,.support,.carte-salle{box-shadow:none;border:1px solid var(--bord)}
.carte{padding:16px;border-radius:var(--r-carte)}
.ligne{grid-template-columns:36px minmax(0,1fr) auto;gap:12px;min-height:0;padding:12px 14px;border-radius:var(--r-carte)}
.ligne:hover{box-shadow:none;border-color:color-mix(in srgb,var(--primaire) 25%,var(--bord));background:var(--surface)}
.ligne strong{font-size:.875rem;font-weight:700;line-height:1.3}
.ligne small{font-size:.75rem;font-weight:500;line-height:1.35;margin-top:2px}
.tuile:has(input:checked),.reponse:has(input:checked){border-color:var(--primaire)}
.encadre{border-radius:var(--r-carte);padding:14px 16px}

/* ---------- Pastilles d'état ---------- */
.etat{font-size:.6875rem;font-weight:700;padding:4px 9px 4px 8px;gap:5px;letter-spacing:.01em}
.etat::before{width:6px;height:6px}

/* ---------- Boutons ---------- */
.bouton{min-height:46px;padding:0 18px;font-size:.875rem;font-weight:700;border-radius:var(--r-bouton)}
.bouton.secondaire{box-shadow:none;border:1px solid var(--bord)}
.bouton.petit{min-height:40px;padding:0 14px;font-size:.8125rem}
.bouton.lien{font-size:.875rem}
.bouton svg{width:18px;height:18px}
.champ label,legend{font-size:.8125rem;font-weight:700}
.champ :is(input,select,textarea):not([type=checkbox]):not([type=radio]){min-height:46px;border-width:1px;font-size:.9375rem}

/* ---------- En-tête de l'application ---------- */
.barre-app{min-height:56px;border-bottom:1px solid var(--bord);background:var(--surface);-webkit-backdrop-filter:none;backdrop-filter:none}
.barre-app h1{font-size:1.25rem;font-weight:800}
.barre-app .avatar,.messages-raccourci{width:36px;height:36px;font-size:.8125rem;box-shadow:none;border:1px solid var(--bord)}
.messages-raccourci svg{width:18px;height:18px}
.avatar{font-size:.8125rem}
.app-contenu{gap:12px}
.app-contenu > h2,.app-contenu h2.liste-titre{font-size:1rem;margin:8px 0 0}

/* ---------- Barre d'onglets : simple, sans pastille qui s'élargit ---------- */
@media (max-width:1023px){
  .onglets{left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;
    padding:6px 4px calc(8px + env(safe-area-inset-bottom));border:0;border-top:1px solid var(--bord);border-radius:0;
    background:var(--surface);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
  .onglets a,.onglets a[aria-current="page"]{flex:none;flex-direction:column;gap:3px;min-width:0;min-height:50px;padding:4px 2px;
    border-radius:12px;background:none;color:var(--texte-2);font-size:.6875rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .onglets a[aria-current="page"]{color:var(--primaire);font-weight:700}
  .onglets a:active{background:var(--surface-2)}
  .onglets .icone{display:flex;align-items:center;justify-content:center;padding:0;position:relative}
  .onglets svg{width:22px;height:22px}
  .onglets a[aria-current="page"] svg{stroke-width:2.2}
  .pastille-direct{top:-2px;right:-5px;width:9px;height:9px}
  .app-contenu{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  .app-contenu .composer .saisie{bottom:calc(76px + env(safe-area-inset-bottom))}
}
@media (min-width:1024px){
  .onglets{width:220px;padding:18px 12px}
  .onglets a,.onglets a[aria-current="page"]{min-height:42px;padding:0 12px;gap:10px;font-size:.875rem;font-weight:600;color:var(--texte-2);border-radius:12px}
  .onglets a[aria-current="page"]{background:var(--primaire-fond);color:var(--primaire);font-weight:700}
  .onglets svg{width:20px;height:20px}
  .onglets .profil{font-size:.8125rem}
}

/* ---------- Carte « Prochain cours » ---------- */
.prochain{padding:18px;border:1px solid var(--bord);box-shadow:none}
.prochain h2{font-size:1.25rem;font-weight:800;margin:4px 0 6px}
.prochain .meta{font-size:.8125rem;font-weight:500;margin:2px 0}
.prochain .bouton.rejoindre{min-height:50px;font-size:1rem}
.prochain .attente{min-height:44px;font-size:.8125rem}

/* ---------- Messagerie ---------- */
.bulle > div{font-size:.9375rem;padding:10px 13px}
.bulle small,.bulle-auto,.jour{font-size:.75rem}
.saisie{box-shadow:none;border:1px solid var(--bord)}
.saisie .micro,.saisie .envoyer{width:44px;height:44px}
.saisie .micro svg,.saisie .envoyer svg{width:20px;height:20px}
.vocal .lire{width:38px;height:38px}
.discussion-entete{padding:10px 12px}

/* ---------- Divers ---------- */
.segments a,.segments label{font-size:.8125rem;min-height:40px}
.apparence label{font-size:.8125rem;padding:10px 6px}
.compte-a-rebours > span{font-size:2.75rem}
.chrono-examen{font-size:.9375rem}
.console-nav a{font-size:.875rem;min-height:42px}
.console-nav a svg{width:18px;height:18px}
.mention,.note{font-size:var(--t-petit)}

/* ---------- Listes : titres sans soulignement, hiérarchie par la graisse et le gris ---------- */
.liste .titre,.liste a.titre{font-size:.9375rem;font-weight:700;line-height:1.3;color:var(--texte);text-decoration:none}
.liste a.titre:hover{color:var(--primaire);text-decoration:underline;text-underline-offset:3px}
.liste .meta{font-size:.8125rem;font-weight:500;color:var(--texte-2)}
.liste li{padding-top:12px;padding-bottom:12px}
.date{font-size:.6875rem;font-weight:700}
.date strong{font-size:1.25rem;font-weight:800}
.a-traiter .compteur{font-size:.9375rem;font-weight:800}
.a-traiter a.titre{text-decoration:none;font-weight:700}