/* ============================================================
   FEUILLE DE BASE — Apprenons Juntos !
   Réécrite le 18/10/2026 : c'est désormais LA seule feuille qui
   déclare des couleurs, des rayons et des ombres.

   POURQUOI CETTE REFONTE
   Le site avait cinq palettes qui se superposaient (theme.css,
   style.css, design.css, et une palette locale dans exercice_vue.php,
   flashcards.php, mes_flashcards.php et admin/suivi_live.php). Les
   mêmes verts différaient de quelques unités, trois « body »
   posaient trois fonds différents, et changer un gris demandait de
   fouiller dix-sept fichiers.

   DÉSORMAIS
     · UNE palette : tout est dans `:root` ci-dessous ;
     · le gris du site entier = UNE variable, `--texte-doux` ;
     · trois feuilles seulement, chargées dans cet ordre :
           theme.css    (cette feuille)  variables + base + gabarit
           design.css                    composants du site
           pages.css                     ce qui était propre à une page
     · plus aucun <style> dans une page (sauf login.php, page autonome,
       servie par pages.css aussi).

   RÉGLAGES RAPIDES
     · le gris secondaire de tout le site ....... --texte-doux
     · la couleur de marque (verts) ............. --vert (+ --vert-*)
     · le bleu d'action ......................... --bleu (+ --bleu-*)
     · le fond de page .......................... --fond / --fond-degrade
     · la largeur de lecture .................... --largeur

   COMPATIBILITÉ : le bloc « NOMS ANCIENS » en fin de `:root` ne
   déclare AUCUNE valeur — il pointe vers la palette. Il permet aux
   pages pas encore migrées de continuer à fonctionner (--duo-green,
   --primary-color…). Il disparaîtra quand la dernière page sera
   réécrite ; il n'y a jamais deux sources de vérité.
   ============================================================ */

:root {
    /* ---------- Couleurs de marque ---------- */
    --vert:          #58cc02;
    --vert-clair:    #7ee02a;
    --vert-fonce:    #46a302;
    --vert-ombre:    #3d8f02;

    --bleu:          #1cb0f6;
    --bleu-fonce:    #1899d6;
    --bleu-ombre:    #1583b8;
    --bleu-clair:    #3ec3ff;

    --jaune:         #ffd43b;
    --jaune-ombre:   #d09c00;
    --orange:        #ff9600;

    --rouge:         #ff4b4b;
    --rouge-ombre:   #e03e3e;
    --violet:        #ce82ff;

    /* ---------- Neutres ----------
       --texte-doux est LE levier du gris : tout ce qui est secondaire
       (libellés, aides, légendes, états verrouillés) le prend.
       #6b7787 tient 4,5:1 sur blanc — le minimum lisible (WCAG AA).
       #8a95a5, l'ancienne valeur, ne tenait que 3,0:1. */
    --encre:         #2b3a52;   /* titres */
    --texte:         #4c5a70;   /* texte courant */
    --texte-doux:    #6b7787;   /* texte secondaire — LE GRIS DU SITE */
    --bord:          #e6eaf0;
    --bord-doux:     #eef2f7;
    --fond:          #f7f9fc;
    --blanc:         #ffffff;
    --fond-degrade:  linear-gradient(170deg, #f4f7f9 0%, #e9f0f6 100%);

    /* ---------- Écritures ---------- */
    --police-texte:  'Lato', system-ui, -apple-system, sans-serif;
    --police-titre:  'Poppins', 'Lato', system-ui, -apple-system, sans-serif;
    --police-cahier: 'Caveat', 'Segoe Script', 'Bradley Hand', cursive;

    /* ---------- Formes et ombres ---------- */
    --r:             16px;
    --r-sm:          12px;
    --r-pilule:      999px;
    --largeur:       1040px;
    --ombre-douce:   0 4px 14px rgba(43, 58, 82, .07);
    --ombre-carte:   0 2px 0 var(--bord);
    --ombre-survol:  0 12px 20px rgba(0, 0, 0, .06), 0 5px 8px rgba(0, 0, 0, .05);

    /* ---------- Papier et surlignages (page de leçon) ---------- */
    --papier:        #fff;
    --papier-bord:   #dbe7f3;
    --carreau:       24px;
    --carreau-trait: rgba(28, 176, 246, .15);
    --hl-jaune:      #ffe98c;
    --hl-bleu:       #c3e6ff;
    --hl-vert:       #cdf0c0;
    --hl-rose:       #ffd6e4;
    --nuit:          #2b3a52;

    /* ---------- NOMS ANCIENS — mêmes valeurs, aucun doublon ----------
       Ne rien écrire ici à la main : tout pointe vers la palette. */
    --duo-green:       var(--vert);
    --duo-green-light: var(--vert-clair);
    --duo-green-dark:  var(--vert-fonce);
    --duo-blue:        var(--bleu);
    --duo-blue-dark:   var(--bleu-fonce);
    --duo-red:         var(--rouge);
    --duo-red-dark:    var(--rouge-ombre);
    --duo-yellow:      var(--jaune);
    --duo-yellow-dark: var(--jaune-ombre);
    --duo-grey:        var(--bord);
    --duo-text:        var(--texte);
    --duo-dark-grey:   var(--texte-doux);
    --duo-bg:          var(--fond);
    --bg-color:        var(--fond);
    --card-bg:         var(--blanc);

    --primary-color:      var(--bleu);
    --primary-dark-color: var(--bleu-fonce);
    --secondary-color:    var(--texte-doux);
    --secondary-dark-color: var(--texte);
    --success-color:      var(--vert-fonce);
    --success-dark-color: var(--vert-ombre);
    --danger-color:       var(--rouge);
    --danger-dark-color:  var(--rouge-ombre);
    --warning-color:      var(--jaune);
    --warning-dark-color: var(--jaune-ombre);
    --text-color:         var(--texte);
    --text-on-primary:    #fff;
    --text-on-accent:     #2b3a52;
    --card-background:    var(--blanc);
    --border-radius:      var(--r-sm);
    --box-shadow:         var(--ombre-douce);
    --box-shadow-hover:   var(--ombre-survol);
    --header-bg:          rgba(255, 255, 255, .95);
    --blur-background:    rgba(255, 255, 255, .80);
    --blur-effect:        saturate(180%) blur(15px);

    /* ---------- VERRE « LIQUID GLASS » — ajouté le 18/10/2026 ----------
       Matières, ombres et dégradés du glassmorphisme. Les dégradés
       reprennent les teintes de la palette Duolingo ci-dessus (aucune
       couleur neuve : ce sont les mêmes, mises en dégradé). */
    --verre:           rgba(255, 255, 255, .55);
    --verre-fort:      rgba(255, 255, 255, .72);
    --verre-tres-fort: rgba(255, 255, 255, .88);
    --verre-bord:      rgba(255, 255, 255, .65);
    --verre-ombre:     0 8px 32px rgba(43, 58, 82, .12);
    --blur-verre:      blur(18px) saturate(160%);
    --blur-fort:       blur(28px) saturate(180%);
    --deg-vert:        linear-gradient(135deg, #58cc02, #7ee02a);
    --deg-bleu:        linear-gradient(135deg, #1cb0f6, #3ec3ff);
    --deg-violet:      linear-gradient(135deg, #ce82ff, #a568ff);
    --deg-jaune:       linear-gradient(135deg, #ffd43b, #ffc800);
    --deg-rose:        linear-gradient(135deg, #ff4b4b, #ff7a7a);
    --deg-nuit:        linear-gradient(135deg, #2b3a52, #1f2a3f);

    /* ---------- LIQUID GLASS « PREMIUM » — ajouté le 19/10/2026 ----------
       Matière, profondeur et mouvement du tableau de bord d'accueil.
       Aucune couleur neuve : mêmes teintes Duolingo, en halos et dégradés. */
    --fond-mesh:
        radial-gradient(60% 55% at 6% -5%,   rgba(52, 211, 153, .42), transparent 62%),
        radial-gradient(60% 55% at 96% 2%,   rgba(56, 189, 248, .44), transparent 62%),
        radial-gradient(65% 60% at 50% 115%, rgba(45, 212, 191, .36), transparent 62%),
        linear-gradient(180deg, #ecf5ff 0%, #e3eaf8 100%);

    --verre-fumee:     rgba(255, 255, 255, .62);
    --verre-lisere:    rgba(255, 255, 255, .85);
    --verre-reflet:    inset 0 1px 0 rgba(255, 255, 255, .92), inset 0 -1px 0 rgba(255, 255, 255, .28);

    --ombre-1:         0 2px 6px rgba(31, 41, 55, .05), 0 14px 30px -18px rgba(31, 41, 55, .20);
    --ombre-2:         0 4px 12px rgba(31, 41, 55, .08), 0 26px 52px -22px rgba(31, 41, 55, .32);

    /* Courbes et durées de mouvement (cohérentes partout). */
    --ease-sortie:     cubic-bezier(.22, .61, .36, 1);
    --ease-ressort:    cubic-bezier(.34, 1.56, .64, 1);
    --ease-entree:     cubic-bezier(.16, 1, .3, 1);
    --duree-vif:       .18s;
    --duree-doux:      .35s;
    --duree-lent:      .7s;
}

/* ============================================================
   1. BASE
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

body {
    min-height: 100vh;
    margin: 0;
    padding-top: 0;                    /* le header sticky occupe déjà sa place */
    font-family: var(--police-titre);
    color: var(--texte);
    background-color: var(--fond);
    /* Fond « mesh » commun à tout le site (plus seulement l'accueil). */
    background-image: var(--fond-mesh);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--police-titre);
    font-weight: 800;
    color: var(--encre);
}

a { color: var(--bleu-fonce); }

/* Barre de défilement, la même partout */
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: #eef1f4; }
::-webkit-scrollbar-thumb { background: #bdc9d7; border-radius: 10px; border: 3px solid #eef1f4; }
::-webkit-scrollbar-thumb:hover { background: #aab8c9; }

/* ============================================================
   2. LE GABARIT — barre du haut, menu, alertes, avatar
   ============================================================ */

.app-header {
    position: sticky;
    top: .8rem;
    z-index: 1030;
    /* Marge tout autour : la pilule ne touche ni le haut ni les côtés. */
    margin: .8rem .8rem 1rem;
    /* Barre « pilule flottante » liquid glass. */
    border-radius: 24px;
    background-color: rgba(255, 255, 255, .72);
    backdrop-filter: blur(22px) saturate(180%);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, .8);
    box-shadow: 0 10px 34px -16px rgba(31, 41, 55, .30);
    overflow: visible;
}

.navbar-brand {
    font-family: var(--police-titre);
    font-weight: 800;
    padding-top: 0;
    padding-bottom: 0;
}
.navbar-brand img { height: 60px; }

.navbar-nav .nav-link {
    font-weight: 700;
    color: var(--texte);
    position: relative;
    padding: .5rem 1rem;
    margin: 0 .25rem;
    border-radius: .75rem;
    transition: color .2s ease, background-color .2s ease;
}
.navbar-nav .nav-link.active { color: var(--bleu); }
.nav-link:hover { color: var(--bleu); background-color: rgba(0, 0, 0, .05); }
.nav-link i { margin-right: 8px; font-size: 1.1em; vertical-align: middle; }

.nav-link.nav-link-cta {
    background-color: var(--vert);
    color: #fff !important;
    padding: .6rem 1.2rem !important;
    transition: all .2s ease;
    box-shadow: 0 4px 0 var(--vert-ombre);
    border: none;
}
.nav-link-cta:hover {
    background-color: var(--vert-clair) !important;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 0 var(--vert-ombre);
}
.nav-link-cta:active, .nav-link-cta.show {
    transform: translateY(1px);
    box-shadow: 0 2px 0 var(--vert-ombre);
    background-color: var(--vert-ombre) !important;
}
.nav-link-cta.dropdown-toggle::after { display: none; }

.nav-link .nav-link-pt {
    font-size: .65rem;
    font-weight: 400;
    font-style: italic;
    opacity: .8;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dropdown-menu-cta,
.dropdown-menu {
    background-color: var(--blanc);
    border: 1px solid var(--bord);
    border-radius: var(--r-sm);
    box-shadow: 0 8px 20px rgba(43, 58, 82, .12);
    margin-top: .5rem !important;
    padding: .5rem;
}
.dropdown-menu-cta .dropdown-item,
.dropdown-item {
    font-family: var(--police-titre);
    font-weight: 500;
    color: var(--texte);
    padding: .6rem 1rem;
    border-radius: .5rem;
    transition: background-color .2s ease, color .2s ease;
}
.dropdown-menu-cta .dropdown-item:hover,
.dropdown-item:hover { background-color: var(--bord-doux); }
.dropdown-item i { margin-right: 10px; width: 20px; opacity: .7; }
.dropdown-item:active { background-color: var(--bleu); color: #fff; }

/* Les alertes glissantes */
#alert-container { position: sticky; top: 96px; z-index: 1029; padding: 0 1rem; }
.duo-alert {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 1rem;
    padding: 1rem 1.5rem;
    margin-top: 1rem;
    color: #fff;
    font-family: var(--police-titre);
    font-weight: 500;
    box-shadow: 0 4px 15px rgba(0, 0, 0, .1);
    animation: slide-down .5s ease-out forwards;
}
@keyframes slide-down {
    from { opacity: 0; transform: translateY(-20px); }
    to   { opacity: 1; transform: translateY(0); }
}
.duo-alert.closing { transition: all .3s ease; opacity: 0; transform: scale(.95); }
.duo-alert-blue   { background: linear-gradient(45deg, var(--bleu), #3a86ff); }
.duo-alert-green  { background: linear-gradient(45deg, var(--vert), #84d91a); }
.duo-alert-yellow { background: linear-gradient(45deg, var(--jaune), #ffb800); color: var(--texte); }
.duo-alert-red    { background: linear-gradient(45deg, var(--rouge), #f12b2b); }
.duo-alert .alert-content h5 { font-weight: 700; margin-bottom: .25rem; }
.duo-alert .alert-content p { margin-bottom: 0; font-family: var(--police-texte); font-weight: 400; opacity: .9; }
.duo-alert .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
.duo-alert-yellow .btn-close { filter: none; }
.duo-alert .btn-duolingo { text-transform: uppercase !important; }

.header-avatar-wrapper {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border-style: solid;
    border-width: 2px;
    padding: 2px;
    margin-right: .75rem;
    flex-shrink: 0;
}
.header-avatar { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

.header-stat {
    display: flex;
    align-items: center;
    font-weight: 700;
    color: var(--texte);
    padding: .5rem .75rem;
    margin-left: .5rem;
}
.header-stat i { font-size: 1.2rem; margin-right: .5rem; }
.header-stat .bi-star-fill { color: var(--jaune-ombre); }
.header-stat .bi-fire { color: var(--orange); }

.mobile-profile-header { padding: .5rem 1rem; font-weight: 700; }
.mobile-profile-menu-item { padding-left: 3.5rem !important; }

@keyframes xp-gain-animation {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.3); color: var(--jaune-ombre); text-shadow: 0 0 10px var(--jaune); }
    100% { transform: scale(1); }
}
.xp-gain-animate { animation: xp-gain-animation .8s cubic-bezier(.25, .46, .45, .94); }

@media (max-width: 991.98px) {
    .navbar-toggler { margin-left: .5rem; }
    .nav-link .nav-link-pt { justify-content: flex-start; }
}

/* ============================================================
   3. PIED DE PAGE
   ============================================================ */

.pied-de-page {
    margin-top: 3rem;
    padding: 1.5rem 1rem;
    border-top: 1px solid var(--bord);
    background: #fafafa;
}
.conteneur-pied {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .5rem;
    font-size: .85rem;
    color: var(--texte-doux);
    text-align: center;
}
.conteneur-pied a {
    color: var(--texte-doux);
    text-decoration: none;
    border-bottom: 1px dotted #cfcfcf;
}
.conteneur-pied a:hover { color: var(--vert-fonce); border-bottom-color: var(--vert-fonce); }
.pied-separateur { color: #d5d5d5; }

/* ============================================================
   4. SURCHARGES DES COMPOSANTS BOOTSTRAP
   (les pages écrites avant la refonte utilisent .btn, .card…)
   ============================================================ */

.card {
    background-color: var(--card-background);
    border: none;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    transition: transform .2s ease-in-out, box-shadow .2s ease-in-out;
}
.card:hover { transform: translateY(-5px); box-shadow: var(--box-shadow-hover); }

/* Les BOUTONS ne sont pas définis ici : c'est un composant, ils vivent
   dans design.css. Il y avait avant une SECONDE définition dans ce
   fichier, avec des « !important » : elle gagnait et affichait
   --vert-fonce (vert sombre) là où le site voulait --vert. Une seule
   règle par composant, c'est la seule façon de garder un style unique. */

.py-5 { padding-top: 1rem !important; }

/* ============================================================
   5. LE CONTENU IMPORTÉ DU MANUEL (dans .lesson-content)
   ============================================================ */

.lesson-content .audio-lecon {
    height: 34px;
    width: 230px;
    max-width: 100%;
    vertical-align: middle;
    margin: 0 .35rem .35rem 0;
}
.lesson-content .video-lecon {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: .75rem;
    margin: .75rem 0;
}
.lesson-content table { width: 100%; border-collapse: collapse; }
.lesson-content td { padding: .3rem .4rem; vertical-align: middle; }
.lesson-content h2, .lesson-content h3 { color: var(--encre); margin-top: 1.2rem; }

/* ============================================================
   ARRIÈRE-PLAN « LIQUID GLASS » — ajouté le 18/10/2026
   Le body reste clair et frais : son dégradé de base (--fond-degrade)
   est posé sur le canvas, et des halos de couleur très doux flottent
   EN DESSOUS du contenu, en position fixe. Aucun élément n'est
   retouché : c'est un pseudo-élément en z-index négatif, sous tout
   le reste de la page. Les teintes reprennent la palette Duolingo.
   ============================================================ */
/* Halos de couleur retirés le 18/10/2026 : le fond était trop chargé.
   On conserve uniquement le dégradé de base très clair (--fond-degrade). */

/* ============================================================
   LE RUSSE A SA POLICE (08/11/2026)

   Lato et Poppins ne contiennent AUCUN caractère cyrillique : la
   feuille servie par Google Fonts ne déclare que les blocs latin,
   latin-ext et devanagari. Sans cette règle, le russe s'afficherait
   dans la police de secours du système — un dessin étranger au site,
   visible immédiatement à côté des autres langues.

   Inter est chargée uniquement quand langue() === 'ru'
   (voir includes/layout.php) : les autres élèves ne téléchargent rien
   de plus. La règle est portée par html[lang="ru"], donc elle ne
   touche aucune autre langue.
   ============================================================ */
html[lang="ru"] {
    --police-texte: 'Inter', 'Lato', system-ui, -apple-system, sans-serif;
    --police-titre: 'Inter', 'Poppins', 'Lato', system-ui, -apple-system, sans-serif;
}