/* ============================================================
   LA FEUILLE DU TÉLÉPHONE — Apprenons Juntos !
   Créée le 23/10/2026.

   PORTÉE : tout est sous `body.est-mobile`. L'ordinateur ne reçoit
   donc AUCUNE de ces règles, même dans une fenêtre étroite : le site
   garde une seule mise en page pour le cours, et une seule pour le
   téléphone. `?vue=desktop` sur un téléphone rend la version
   d'ordinateur, sans mélange.

   PRINCIPE : ce n'est pas l'interface d'ordinateur rétrécie.
     · une barre d'onglets en bas, à portée de pouce ;
     · un seul geste principal par écran ;
     · des cartes empilées, jamais côte à côte ;
     · des cibles d'au moins 44 px ;
     · les zones sûres de l'écran (encoche, barre gestuelle) respectées.
   ============================================================ */

/* ------------------------------------------------------------
   0. LE SOCLE DU TÉLÉPHONE
   ------------------------------------------------------------ */
body.est-mobile {
    /* Le fond « mesh » fixe saccade au défilement sur certains
       téléphones : on le laisse défiler avec la page. */
    background-attachment: scroll;
    -webkit-text-size-adjust: 100%;
    overscroll-behavior-y: none;
    /* La barre d'onglets occupe le bas : le contenu doit pouvoir
       défiler jusqu'au bout sans passer dessous. */
    padding-bottom: 0;
}

body.est-mobile * {
    -webkit-tap-highlight-color: transparent;
}

body.est-mobile a,
body.est-mobile button,
body.est-mobile [role="button"],
body.est-mobile .tabbar-item,
body.est-mobile .mw-outil,
body.est-mobile .m-raccourci,
body.est-mobile label {
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* Les champs doivent faire 16 px, sinon iOS agrandit la page et ne
   revient jamais en arrière. */
body.est-mobile input,
body.est-mobile textarea,
body.est-mobile select {
    font-size: 16px;
}

body.est-mobile img { max-width: 100%; height: auto; }

/* Aucun survol ne doit rester « collé » après un appui. */
@media (hover: none) {
    body.est-mobile .card:hover,
    body.est-mobile .bouton-principal:hover,
    body.est-mobile .dossier-cta:hover {
        transform: none;
        box-shadow: inherit;
    }
}

/* ------------------------------------------------------------
   1. L'EN-TÊTE — une pilule compacte, sans menu
   ------------------------------------------------------------ */
body.est-mobile .app-header {
    top: calc(.5rem + env(safe-area-inset-top, 0px));
    margin: calc(.5rem + env(safe-area-inset-top, 0px)) .6rem .75rem;
    border-radius: 20px;
    background-color: rgba(255, 255, 255, .82);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    box-shadow: 0 12px 30px -18px rgba(31, 41, 55, .38);
}

body.est-mobile .app-header .container {
    max-width: 100%;
    padding: .35rem .55rem;
    flex-wrap: nowrap;
}

body.est-mobile .navbar-brand { margin-right: 0; }
body.est-mobile .navbar-brand img { height: 38px; width: auto; }

/* LE MENU BURGER N'EXISTE PLUS SUR TÉLÉPHONE.
   La navigation vit dans la barre du bas. Ce n'est pas une question de
   place : un tiroir à déplier pour chaque geste, c'est deux appuis au
   lieu d'un. */
body.est-mobile .navbar-toggler,
body.est-mobile .navbar-collapse {
    display: none !important;
}

.entete-mobile {
    display: none;
}

body.est-mobile .entete-mobile {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-left: auto;
}

.entete-mobile-stat {
    display: inline-flex;
    align-items: center;
    gap: .22rem;
    height: 32px;
    padding: 0 .5rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .75);
    font-size: .8rem;
    font-weight: 800;
    color: var(--texte);
    font-variant-numeric: tabular-nums;
}

.entete-mobile-stat i { font-size: .95rem; }
.entete-mobile-lecons i { color: var(--bleu); }
.entete-mobile-flamme i { color: var(--orange); }
.entete-mobile-flamme { color: #c2410c; background: #fff3e6; }

.entete-mobile-agenda {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 13px;
    background: rgba(28, 176, 246, .12);
    color: var(--bleu-fonce);
    font-size: 1.05rem;
    text-decoration: none;
}

.entete-mobile-avatar {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid var(--anneau, var(--bleu));
    padding: 2px;
    overflow: hidden;
    background: #fff;
}

.entete-mobile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

body.est-mobile .entete-mobile-agenda:active,
body.est-mobile .entete-mobile-avatar:active { transform: scale(.94); }

/* Les alertes ne doivent pas passer sous la barre du haut. */
body.est-mobile .duo-alert { padding: .85rem 1rem; border-radius: 16px; }
body.est-mobile .duo-alert .alert-content p { font-size: .85rem; }

/* ------------------------------------------------------------
   2. LA PILULE DE NAVIGATION — en bas, comme sur iOS

   Une barre flottante, en verre, de la même matière que l'ancien
   en-tête d'ordinateur : même blanc translucide, même flou, même
   liseré, même ombre. Elle ne touche aucun bord, et rien ne la
   surélève au milieu : cinq destinations égales, comme sur iOS.
   ------------------------------------------------------------ */
.tabbar { display: none; }

body.est-mobile .tabbar {
    position: fixed;
    /* Pas de transform ici : combiné au backdrop-filter, il faisait
       disparaître la pilule de certaines captures et de certains
       rendus iOS. Trois propriétés suffisent, et le centrage est
       assuré par les marges automatiques. */
    left: 12px;
    right: 12px;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    max-width: 560px;
    margin: 0 auto;
    z-index: 1400;
    display: grid;
    /* six onglets désormais : la répartition se calcule sur le nombre
       réel d'éléments, sans compter à la main à chaque ajout. */
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    align-items: stretch;
    gap: 2px;
    padding: 7px 8px;
    border-radius: 30px;
    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);
}

body.est-mobile .tabbar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 50px;
    padding: .25rem .1rem .2rem;
    border-radius: 23px;
    color: #8a95a5;
    text-decoration: none;
    font-family: var(--police-titre);
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .01em;
    transition: color .18s ease, background-color .18s ease, transform .12s ease;
}

body.est-mobile .tabbar-item .tabbar-icone {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 22px;
    font-size: 1.32rem;
    line-height: 1;
}

body.est-mobile .tabbar-item.is-actif {
    color: var(--vert-fonce);
    background-color: rgba(88, 204, 2, .13);
}

/* Plus de pastille surélevée au centre : la pilule reste une pilule. */
body.est-mobile .tabbar-item--central { color: #8a95a5; }
body.est-mobile .tabbar-item--central.is-actif { color: var(--vert-fonce); }

body.est-mobile .tabbar-badge {
    position: absolute;
    top: -5px;
    right: -10px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--rouge);
    color: #fff;
    font-size: .58rem;
    font-weight: 800;
    line-height: 16px;
    text-align: center;
    border: 1.5px solid #fff;
}

body.est-mobile .tabbar-item:active { transform: scale(.93); }
body.est-mobile .tabbar-item.est-presse { opacity: .7; }

/* ------------------------------------------------------------
   2 bis. LE CONTENU SANS EN-TÊTE

   L'en-tête du haut n'est plus rendu sur téléphone : le contenu
   démarre sous l'encoche, et le bas de page doit rester au-dessus
   de la pilule (66 px + 10 px de marge + zone sûre).
   ------------------------------------------------------------ */
body.est-mobile main {
    padding-top: calc(.85rem + env(safe-area-inset-top, 0px));
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
}

body.est-mobile #alert-container {
    top: calc(.5rem + env(safe-area-inset-top, 0px));
    padding: 0 .75rem;
}

/* Si une page ancienne imprime encore la barre du haut, elle disparaît. */
body.est-mobile .app-header { display: none !important; }

/* ------------------------------------------------------------
   3. LE CADRE COMMUN DES PAGES
   ------------------------------------------------------------ */
body.est-mobile .conteneur-page,
body.est-mobile .container {
    max-width: 720px;
    padding-left: .9rem;
    padding-right: .9rem;
}

body.est-mobile .conteneur-page { padding-top: .35rem; padding-bottom: 1rem; }
body.est-mobile .container.py-4 { padding-top: .4rem !important; }
body.est-mobile .container.py-5 { padding-top: .5rem !important; padding-bottom: 1rem !important; }

body.est-mobile h1 { font-size: 1.5rem; line-height: 1.2; letter-spacing: -.02em; }
body.est-mobile h2 { font-size: 1.1rem; }

body.est-mobile .fil-ariane {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: .35rem;
    padding-bottom: .35rem;
    font-size: .8rem;
    scrollbar-width: none;
    white-space: nowrap;
}
body.est-mobile .fil-ariane::-webkit-scrollbar { display: none; }

body.est-mobile .bouton-principal,
body.est-mobile .bouton-secondaire,
body.est-mobile .bouton-danger {
    width: 100%;
    min-height: 52px;
    font-size: 1rem;
    border-radius: 16px;
}

body.est-mobile .carte-message {
    padding: 1.4rem 1.1rem;
    text-align: center;
    border-radius: 20px;
}

/* Le pied de page : les colonnes de liens n'ont pas leur place ici.
   On garde la signature, rien de plus. */
body.est-mobile .pied-de-page {
    margin-top: 1.5rem;
    /* La barre d'onglets est fixe : le bas du pied de page doit rester
       au-dessus d'elle, sinon la dernière ligne est masquée.
       4,6 rem laissait la dernière ligne à 2 px sous la pilule (mesuré
       au défilement maximal, 390 px) : 5,4 rem dégage la marge. */
    padding: 1.1rem .9rem calc(5.4rem + env(safe-area-inset-bottom, 0px));
}
body.est-mobile .pied-colonne { display: none; }
body.est-mobile .conteneur-pied { display: block; }
body.est-mobile .pied-bas {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    align-items: center;
    text-align: center;
    font-size: .7rem;
    color: #98a2b3;
}

/* ------------------------------------------------------------
   4. L'ACCUEIL DU TÉLÉPHONE
   ------------------------------------------------------------ */
.m-accueil {
    max-width: 720px;
    margin: 0 auto;
    padding: .2rem .9rem 1.2rem;
    display: flex;
    flex-direction: column;
    gap: .8rem;
}

.m-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .8rem;
    padding: 1rem;
    border-radius: 26px;
    background:
        radial-gradient(120% 90% at 100% 0%, rgba(28, 176, 246, .16), transparent 58%),
        radial-gradient(120% 90% at 0% 100%, rgba(88, 204, 2, .16), transparent 55%),
        rgba(255, 255, 255, .82);
    backdrop-filter: blur(20px) saturate(165%);
    -webkit-backdrop-filter: blur(20px) saturate(165%);
    border: 1px solid rgba(255, 255, 255, .92);
    box-shadow: 0 18px 40px -30px rgba(31, 41, 55, .55);
    animation: m-monte .42s var(--ease-entree, ease-out) both;
}

@keyframes m-monte {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.m-hero-identite {
    display: flex;
    align-items: center;
    gap: .7rem;
}

.m-hero-avatar {
    flex: none;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 2px solid var(--anneau, var(--bleu));
    padding: 2px;
    background: #fff;
    overflow: hidden;
    display: block;
}
.m-hero-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.m-hero-avatar span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--fond);
    font-weight: 800;
    color: var(--encre);
}

.m-hero-mots { min-width: 0; }
.m-hero-salut {
    margin: 0;
    font-size: .78rem;
    font-weight: 600;
    color: var(--texte-doux);
}
.m-hero-nom {
    margin: 0;
    font-size: 1.32rem;
    line-height: 1.15;
    letter-spacing: -.025em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.m-hero-serie {
    margin-left: auto;
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: .18rem;
    padding: .3rem .55rem;
    border-radius: 999px;
    background: #fff3e6;
    color: #c2410c;
    font-size: .85rem;
}
.m-hero-serie strong { font-variant-numeric: tabular-nums; }

/* ---- L'objectif du jour : une composition centrée ---- */
.m-objectif {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .45rem;
    padding: 1.05rem .9rem 1rem;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(88, 204, 2, .12), rgba(28, 176, 246, .12));
    border: 1px solid rgba(255, 255, 255, .8);
}

.m-objectif-kicker {
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--vert-fonce);
}
.m-objectif-titre {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.25;
    color: var(--encre);
    max-width: 24ch;
}
.m-objectif-sous {
    margin: 0;
    font-size: .76rem;
    color: var(--texte-doux);
}

.m-objectif-anneau {
    position: relative;
    width: 96px;
    height: 96px;
    margin: .15rem 0 .1rem;
}
.m-objectif-anneau svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    display: block;
}
.m-anneau-piste {
    fill: none;
    stroke: rgba(255, 255, 255, .9);
    stroke-width: 7;
}
.m-anneau-course {
    fill: none;
    stroke: var(--vert);
    stroke-width: 7;
    stroke-linecap: round;
    stroke-dasharray: 188.5;
    stroke-dashoffset: calc(188.5 - 188.5 * var(--avancement, 0));
    transition: stroke-dashoffset .7s var(--ease-sortie, ease);
}
/* Le chiffre est CENTRÉ dans l'anneau : une seule ligne, alignée sur
   la ligne de base, et le bloc entier au milieu du cercle. */
.m-anneau-valeur {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1px;
    line-height: 1;
    font-weight: 700;
    color: var(--texte-doux);
    font-variant-numeric: tabular-nums;
}
.m-anneau-valeur strong {
    font-size: 1.5rem;
    line-height: 1;
    color: var(--encre);
}
.m-anneau-valeur span { font-size: .85rem; line-height: 1; }

/* ---- L'action principale ---- */
.m-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 54px;
    padding: .6rem 1rem;
    border-radius: 17px;
    background: linear-gradient(150deg, #63d40e, #47a802);
    color: #fff;
    font-family: var(--police-titre);
    font-size: 1rem;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 10px 22px -12px rgba(70, 163, 2, .85),
                inset 0 1px 0 rgba(255, 255, 255, .38);
    transition: transform .12s ease, box-shadow .12s ease;
}
.m-cta span { flex: 1; text-align: center; }
.m-cta i:first-child { font-size: 1.15rem; }
.m-cta .m-cta-fleche { font-size: .95rem; opacity: .9; }
.m-cta:active {
    transform: translateY(2px) scale(.99);
    box-shadow: 0 4px 10px -8px rgba(70, 163, 2, .9), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.m-cta--calme {
    background: rgba(255, 255, 255, .9);
    color: var(--vert-fonce);
    box-shadow: 0 2px 0 var(--bord), inset 0 0 0 1px rgba(88, 204, 2, .25);
}

/* ---- Les trois raccourcis ---- */
.m-raccourcis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .45rem;
}
.m-raccourci {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    padding: .55rem .3rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, .72);
    color: var(--texte);
    font-size: .72rem;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, .85);
    transition: transform .12s ease, background .15s ease;
}
.m-raccourci i { font-size: 1.05rem; color: var(--bleu-fonce); }
.m-raccourci:active { transform: scale(.96); background: #fff; }

/* ---- Le message d'explication ---- */
.m-info {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    padding: .8rem .9rem;
    border-radius: 16px;
    background: rgba(28, 176, 246, .1);
    border: 1px solid rgba(28, 176, 246, .18);
    color: var(--texte);
    font-size: .82rem;
    line-height: 1.4;
}
.m-info i { color: var(--bleu-fonce); font-size: 1.05rem; margin-top: .05rem; }
.m-info p { margin: 0; }

/* ---- Les widgets ---- */
.m-widgets {
    display: flex;
    flex-direction: column;
    gap: .8rem;
}

/* LA CARTE EST L'ENVELOPPE, PAS LE CONTENU.
   Chaque widget — dessiné pour le téléphone ou repris de l'ordinateur —
   vit dans la même carte de verre. Avant, seuls les widgets dessinés
   sur mesure en avaient une : les horloges et les statistiques
   flottaient sans fond. */
.mw {
    background: rgba(255, 255, 255, .86);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, .92);
    border-radius: 22px;
    padding: .95rem;
    box-shadow: 0 12px 30px -26px rgba(31, 41, 55, .55);
    animation: m-monte .45s var(--ease-entree, ease-out) both;
}

.mw-carte,
.mw .accueil-bloc {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}

.mw .accueil-bloc .accueil-titre-bloc { font-size: .98rem; margin-bottom: .6rem; }

.mw-tete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .65rem;
}
.mw-titre {
    margin: 0;
    font-size: .98rem;
    letter-spacing: -.01em;
}
.mw-lien {
    display: inline-flex;
    align-items: center;
    gap: .1rem;
    font-size: .76rem;
    font-weight: 700;
    color: var(--bleu-fonce);
    text-decoration: none;
    white-space: nowrap;
}
.mw-lien i { font-size: .7rem; }

.mw-texte { margin: 0; font-size: .82rem; color: var(--texte-doux); line-height: 1.45; }
.mw-mini { margin: .2rem 0 0; font-size: .72rem; color: var(--texte-doux); }
.mw-kicker {
    display: block;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--texte-doux);
}

.mw-jauge {
    height: 7px;
    border-radius: 999px;
    background: #e9eef6;
    overflow: hidden;
    margin: .45rem 0 .25rem;
}
.mw-jauge span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #58cc02, #8ee02a);
    transition: width .6s var(--ease-sortie, ease);
}
.mw-jauge--large { height: 9px; margin-top: .6rem; }

/* Mon parcours */
.mw-parcours-corps { display: flex; gap: .7rem; align-items: flex-start; }
.mw-chiffre-chap {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: linear-gradient(150deg, rgba(28, 176, 246, .16), rgba(88, 204, 2, .16));
    color: var(--encre);
    font-weight: 800;
    font-size: .95rem;
}
.mw-parcours-texte { min-width: 0; flex: 1; }
.mw-parcours-texte h3 {
    margin: 0;
    font-size: .95rem;
    line-height: 1.25;
}
.mw-prochaine {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-top: .55rem;
    padding: .45rem .6rem;
    border-radius: 12px;
    background: rgba(28, 176, 246, .09);
    font-size: .76rem;
    color: var(--texte);
}
.mw-prochaine i { color: var(--bleu-fonce); }
.mw-bouton-doux {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    margin-top: .65rem;
    min-height: 44px;
    border-radius: 13px;
    background: rgba(28, 176, 246, .1);
    color: var(--bleu-fonce);
    font-size: .84rem;
    font-weight: 800;
    text-decoration: none;
}
.mw-bouton-doux:active { background: rgba(28, 176, 246, .18); }

/* La flamme */
.mw-flamme-tete { display: flex; align-items: flex-start; gap: .6rem; }
.mw-flamme-phrase {
    margin: .25rem 0 0;
    font-size: .82rem;
    line-height: 1.4;
    color: var(--texte);
}
.mw-flamme-valeur {
    margin-left: auto;
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    font-size: 1.05rem;
}
.mw-flamme-valeur span { font-size: 1.25rem; }

.mw-semaine {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: .3rem;
    margin-top: .7rem;
}
.mw-jour {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
}
.mw-jour-point {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #edf1f7;
    border: 2px solid #e3e9f2;
}
.mw-jour.est-fait .mw-jour-point {
    background: linear-gradient(150deg, #ffd43b, #ff9a00);
    border-color: #ffcf3b;
    box-shadow: 0 3px 8px -3px rgba(255, 154, 0, .6);
}
.mw-jour-lettre { font-size: .64rem; font-weight: 700; color: var(--texte-doux); }
.mw-jour.est-fait .mw-jour-lettre { color: var(--encre); }

/* L'agenda */
.mw-seances { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.mw-seance {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .55rem;
    border-radius: 14px;
    background: rgba(247, 249, 252, .9);
}
.mw-seance.est-aujourdhui { background: rgba(88, 204, 2, .12); }
.mw-seance-date {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 40px;
    padding: .25rem 0;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 1px 0 var(--bord);
    line-height: 1;
}
.mw-seance-date strong { font-size: .95rem; color: var(--encre); }
.mw-seance-date span { font-size: .6rem; text-transform: uppercase; color: var(--texte-doux); margin-top: .12rem; }
.mw-seance-corps { display: flex; flex-direction: column; gap: .1rem; min-width: 0; flex: 1; }
.mw-seance-jour { font-size: .7rem; font-weight: 700; color: var(--vert-fonce); }
.mw-seance-titre { font-size: .84rem; color: var(--texte); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mw-seance i { color: #c3ccd9; font-size: .8rem; }

/* Progression */
.mw-chiffres {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .45rem;
}
.mw-chiffre {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: .5rem .25rem;
    border-radius: 14px;
    background: rgba(247, 249, 252, .9);
}
.mw-chiffre strong { font-size: 1.25rem; color: var(--encre); line-height: 1.1; font-variant-numeric: tabular-nums; }
.mw-chiffre span { font-size: .66rem; color: var(--texte-doux); text-align: center; margin-top: .1rem; }

/* Les outils */
.mw-outils { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.mw-outil {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .7rem;
    border-radius: 16px;
    text-decoration: none;
    color: var(--texte);
    border: 1px solid transparent;
    transition: transform .12s ease;
}
.mw-outil:active { transform: scale(.97); }
.mw-outil--reviser { background: rgba(88, 204, 2, .1); border-color: rgba(88, 204, 2, .18); }
.mw-outil--pratiquer { background: rgba(28, 176, 246, .1); border-color: rgba(28, 176, 246, .18); }
.mw-outil-icone { font-size: 1.15rem; }
.mw-outil--reviser .mw-outil-icone { color: var(--vert-fonce); }
.mw-outil--pratiquer .mw-outil-icone { color: var(--bleu-fonce); }
.mw-outil-titre { font-size: .86rem; font-weight: 800; color: var(--encre); }
.mw-outil-texte { font-size: .7rem; color: var(--texte-doux); }

/* Le mot du professeur */
.mw-mot-entete {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .72rem;
    font-weight: 800;
    color: var(--violet);
    text-transform: uppercase;
    letter-spacing: .05em;
}
.mw-mot-texte {
    margin: .45rem 0 0;
    font-family: var(--police-texte);
    font-size: .9rem;
    line-height: 1.5;
    color: var(--texte);
}

/* La communauté — une rangée qui glisse */
.mw-communaute {
    display: flex;
    gap: .55rem;
    overflow-x: auto;
    padding: .1rem .1rem .35rem;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.mw-communaute::-webkit-scrollbar { display: none; }
.mw-membre {
    flex: none;
    width: 68px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
    text-decoration: none;
    scroll-snap-align: start;
}
.mw-membre-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid var(--anneau, #ccc);
    padding: 2px;
    background: #fff;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    color: var(--encre);
}
.mw-membre-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.mw-membre-nom {
    font-size: .68rem;
    font-weight: 700;
    color: var(--texte);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mw-membre-flamme { font-size: .62rem; color: var(--orange); font-weight: 700; }

/* Le mot du jour */
.mw-mot-jour { text-align: center; padding: 1.1rem .95rem; }
.mw-mot-jour-fr {
    margin: .3rem 0 .1rem;
    font-family: var(--police-cahier);
    font-size: 1.9rem;
    line-height: 1.1;
    color: var(--encre);
}
.mw-mot-jour-pt { margin: 0; font-size: .95rem; color: var(--bleu-fonce); font-weight: 700; }

/* Le rappel */
.mw-rappel {
    display: flex;
    align-items: center;
    gap: .55rem;
    text-decoration: none;
    color: var(--texte);
    font-size: .85rem;
    font-weight: 600;
}
.mw-rappel i:first-child { color: var(--orange); font-size: 1.1rem; }
.mw-rappel i:last-child { margin-left: auto; color: #c3ccd9; font-size: .8rem; }

/* Les widgets d'ordinateur repris tels quels */
body.est-mobile .mw .accueil-rappel { display: flex; }
body.est-mobile .mw .widget-stats-liste { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
body.est-mobile .mw .horloge-liste { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
body.est-mobile .mw .horloge-heure { font-size: 1.4rem; }

/* Le pied de l'accueil */
.m-accueil-pied { display: flex; flex-direction: column; gap: .55rem; align-items: center; padding-top: .2rem; }
.m-accueil-note {
    margin: 0;
    text-align: center;
    font-size: .72rem;
    line-height: 1.45;
    color: #93a0b1;
    max-width: 34ch;
}

.m-btn-discret {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 42px;
    padding: .5rem .9rem;
    border: 1px solid var(--bord);
    border-radius: 999px;
    background: rgba(255, 255, 255, .8);
    color: var(--texte);
    font-family: inherit;
    font-size: .78rem;
    font-weight: 700;
}
.m-btn-discret:active { background: #fff; transform: scale(.98); }
.m-btn-discret--danger { color: var(--rouge); border-color: rgba(255, 75, 75, .25); margin-top: .6rem; }

/* ---- La feuille de personnalisation ---- */
.m-feuille { position: fixed; inset: 0; z-index: 1600; }
.m-feuille[hidden] { display: none; }
.m-feuille-voile {
    position: absolute;
    inset: 0;
    background: rgba(22, 32, 48, .38);
    backdrop-filter: blur(3px);
    animation: m-voile .25s ease both;
}
@keyframes m-voile { from { opacity: 0; } to { opacity: 1; } }

.m-feuille-panneau {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 84dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: .5rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
    background: #fff;
    border-radius: 26px 26px 0 0;
    box-shadow: 0 -20px 50px -20px rgba(31, 41, 55, .4);
    animation: m-feuille-monte .32s var(--ease-entree, ease-out) both;
}
@keyframes m-feuille-monte {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}
.m-feuille-poignee {
    width: 38px;
    height: 4px;
    border-radius: 999px;
    background: #dfe5ee;
    margin: .2rem auto .7rem;
}
.m-feuille-tete { display: flex; align-items: center; justify-content: space-between; }
.m-feuille-tete h2 { margin: 0; font-size: 1.1rem; }
.m-feuille-fermer {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: var(--fond);
    color: var(--texte);
}
.m-feuille-aide { margin: .3rem 0 .7rem; font-size: .8rem; color: var(--texte-doux); }
.m-feuille-note {
    margin: -.3rem 0 .7rem;
    font-size: .72rem;
    line-height: 1.4;
    color: #93a0b1;
}
.m-feuille-liste { list-style: none; margin: 0; padding: 0; }
.m-feuille-liste li { border-bottom: 1px solid var(--bord-doux); }
.m-feuille-liste li:last-child { border-bottom: 0; }

.m-switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    min-height: 52px;
    font-size: .9rem;
    font-weight: 600;
    color: var(--texte);
    cursor: pointer;
}
.m-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.m-switch-piste {
    flex: none;
    position: relative;
    width: 46px;
    height: 28px;
    border-radius: 999px;
    background: #dfe5ee;
    transition: background .2s ease;
}
.m-switch-bille {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 5px rgba(31, 41, 55, .25);
    transition: transform .22s var(--ease-ressort, ease);
}
.m-switch input:checked + .m-switch-piste { background: var(--vert); }
.m-switch input:checked + .m-switch-piste .m-switch-bille { transform: translateX(18px); }
.m-switch input:focus-visible + .m-switch-piste { outline: 2px solid var(--bleu); outline-offset: 2px; }

body.m-feuille-ouverte { overflow: hidden; }

/* ------------------------------------------------------------
   5. APPRENDRE — le parcours en consultation
   ------------------------------------------------------------ */
.m-apprendre { max-width: 720px; margin: 0 auto; padding: .2rem .9rem 1rem; }

.m-entete {
    padding: .9rem 1rem;
    border-radius: 22px;
    background: rgba(255, 255, 255, .84);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, .92);
    box-shadow: 0 14px 34px -30px rgba(31, 41, 55, .6);
    margin-bottom: .8rem;
}
.m-entete-kicker {
    display: block;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--vert-fonce);
}
.m-entete h1 { margin: .1rem 0 .2rem; font-size: 1.45rem; }
.m-entete p { margin: 0; font-size: .8rem; color: var(--texte-doux); line-height: 1.4; }

.m-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .4rem;
    margin-top: .7rem;
}
.m-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: .45rem .25rem;
    border-radius: 13px;
    background: rgba(247, 249, 252, .95);
}
.m-stat strong { font-size: 1.15rem; color: var(--encre); line-height: 1.1; }
.m-stat span { font-size: .64rem; color: var(--texte-doux); text-align: center; }

.m-chapitres { display: flex; flex-direction: column; gap: .65rem; }

.m-chapitre {
    border-radius: 20px;
    background: rgba(255, 255, 255, .86);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, .92);
    box-shadow: 0 12px 28px -26px rgba(31, 41, 55, .55);
    overflow: hidden;
}
.m-chapitre > summary {
    list-style: none;
    cursor: pointer;
    padding: .8rem .85rem;
    display: flex;
    align-items: center;
    gap: .7rem;
    min-height: 64px;
}
.m-chapitre > summary::-webkit-details-marker { display: none; }
.m-chapitre-num {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 13px;
    background: linear-gradient(150deg, rgba(28, 176, 246, .16), rgba(88, 204, 2, .16));
    font-weight: 800;
    font-size: .85rem;
    color: var(--encre);
}
.m-chapitre-corps { flex: 1; min-width: 0; }
.m-chapitre-titre {
    display: block;
    font-size: .92rem;
    font-weight: 800;
    color: var(--encre);
    line-height: 1.25;
}
.m-chapitre-sous {
    display: block;
    margin-top: .12rem;
    font-size: .7rem;
    color: var(--texte-doux);
}
.m-chapitre-chevron { color: #c3ccd9; transition: transform .2s ease; }
.m-chapitre[open] .m-chapitre-chevron { transform: rotate(90deg); }
.m-chapitre[open] > summary { border-bottom: 1px solid var(--bord-doux); }

.m-chapitre-etat {
    flex: none;
    font-size: .62rem;
    font-weight: 800;
    padding: .2rem .45rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.m-chapitre-etat.etat-ouvert { background: rgba(28, 176, 246, .12); color: var(--bleu-fonce); }
.m-chapitre-etat.etat-cours { background: rgba(88, 204, 2, .13); color: var(--vert-fonce); }
.m-chapitre-etat.etat-fini { background: rgba(88, 204, 2, .13); color: var(--vert-fonce); }
.m-chapitre-etat.etat-ferme { background: #eef1f5; color: #8a95a5; }
.m-chapitre-etat.etat-cadenas { background: rgba(255, 212, 59, .22); color: #9a6b00; }

.m-chapitre-contenu { padding: .55rem .7rem .75rem; }
.m-chapitre-contenu .mw-jauge { margin: .1rem 0 .6rem; }

.m-seance-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.m-seance-item {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .55rem .5rem;
    border-radius: 13px;
    background: rgba(247, 249, 252, .85);
    text-decoration: none;
    color: var(--texte);
}
.m-seance-item.est-bloquee { opacity: .58; }
.m-seance-icone {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 1px 0 var(--bord);
    font-size: .9rem;
    color: var(--bleu-fonce);
}
.m-seance-item.est-termine .m-seance-icone { color: var(--vert-fonce); }
.m-seance-item.est-bloquee .m-seance-icone { color: #98a2b3; }
.m-seance-nom { flex: 1; min-width: 0; }
.m-seance-nom strong {
    display: block;
    font-size: .84rem;
    font-weight: 700;
    color: var(--encre);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.m-seance-nom span { display: block; font-size: .68rem; color: var(--texte-doux); }
.m-seance-item i.bi-chevron-right { color: #c3ccd9; font-size: .75rem; }
.m-seance-detail { font-size: .68rem; font-weight: 700; color: var(--texte-doux); }

.m-lecon-liste { list-style: none; margin: .45rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.m-lecon-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: 44px;
    padding: .35rem .45rem;
    border-radius: 11px;
    text-decoration: none;
    color: var(--texte);
    font-size: .8rem;
}
.m-lecon-item.est-faite { background: rgba(88, 204, 2, .08); }
.m-lecon-item.est-bloquee { opacity: .55; }
.m-lecon-puce {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 0 var(--bord);
    font-size: .68rem;
    font-weight: 800;
    color: var(--texte-doux);
}
.m-lecon-item.est-faite .m-lecon-puce { background: var(--vert); color: #fff; box-shadow: none; }
.m-lecon-nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-lecon-item .bi-chevron-right { color: #c3ccd9; font-size: .7rem; }
.m-lecon-verrou { color: #a7b1c0; font-size: .75rem; }

.m-evaluation {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-top: .55rem;
    padding: .55rem .5rem;
    border-radius: 13px;
    background: rgba(255, 212, 59, .12);
    text-decoration: none;
    color: var(--texte);
    font-size: .8rem;
}
.m-evaluation.est-fermee { opacity: .55; }
.m-evaluation i:first-child { color: #b8860b; font-size: 1rem; }
.m-evaluation span { flex: 1; font-weight: 700; color: var(--encre); }
.m-evaluation small { font-size: .66rem; color: var(--texte-doux); }

.m-note {
    margin: .6rem 0 0;
    font-size: .72rem;
    line-height: 1.45;
    color: #93a0b1;
    text-align: center;
}

/* ------------------------------------------------------------
   6. LA RÉVISION D'UNE LEÇON (revision.php)
   ------------------------------------------------------------ */
.m-revision { max-width: 720px; margin: 0 auto; padding: .2rem .9rem 1rem; }

.m-revision-entete {
    padding: 1rem;
    border-radius: 22px;
    background:
        radial-gradient(120% 100% at 100% 0%, rgba(28, 176, 246, .14), transparent 60%),
        rgba(255, 255, 255, .88);
    border: 1px solid rgba(255, 255, 255, .92);
    box-shadow: 0 14px 34px -30px rgba(31, 41, 55, .6);
    margin-bottom: .75rem;
}
.m-revision-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .22rem .55rem;
    border-radius: 999px;
    background: rgba(28, 176, 246, .12);
    color: var(--bleu-fonce);
    font-size: .66rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.m-revision-entete h1 { margin: .45rem 0 .15rem; font-size: 1.35rem; }
.m-revision-sous { margin: 0; font-size: .8rem; color: var(--texte-doux); }
.m-revision-jetons { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .55rem; }
.m-jeton {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .22rem .5rem;
    border-radius: 999px;
    background: rgba(247, 249, 252, .95);
    font-size: .68rem;
    font-weight: 700;
    color: var(--texte);
    border: 1px solid var(--bord-doux);
}
.m-jeton i { font-size: .72rem; color: var(--texte-doux); }

.m-revision-corps {
    background: rgba(255, 255, 255, .92);
    border: 1px solid rgba(255, 255, 255, .95);
    border-radius: 20px;
    padding: .9rem .85rem;
    box-shadow: 0 12px 28px -28px rgba(31, 41, 55, .6);
}

/* Le contenu du manuel, remis à l'échelle du pouce. */
body.est-mobile .lesson-content-lecon { font-size: .95rem; line-height: 1.55; }
body.est-mobile .lesson-content-lecon h2 {
    font-size: 1.05rem;
    margin: 1.2rem 0 .5rem;
    padding-bottom: .25rem;
    border-bottom: 2px solid rgba(28, 176, 246, .16);
}
body.est-mobile .lesson-content-lecon h2:first-child { margin-top: 0; }
body.est-mobile .lesson-content-lecon h3 { font-size: .95rem; margin: .9rem 0 .35rem; }
body.est-mobile .lesson-content-lecon p { margin: 0 0 .6rem; }

/* Les tableaux du manuel : trois colonnes (son | français | portugais)
   ne tiennent pas sur 390 px. Chaque ligne devient une petite fiche,
   lue de haut en bas : on écoute, on lit, on comprend. */
body.est-mobile .lesson-content-lecon table,
body.est-mobile .lesson-content-lecon .lc-tableau {
    display: block;
    width: 100%;
    border-collapse: collapse;
}
body.est-mobile .lesson-content-lecon tbody { display: block; }
body.est-mobile .lesson-content-lecon tr {
    display: block;
    padding: .5rem 0;
    border-bottom: 1px solid var(--bord-doux);
}
body.est-mobile .lesson-content-lecon tr:last-child { border-bottom: 0; }
body.est-mobile .lesson-content-lecon td {
    display: block;
    width: 100%;
    padding: .1rem 0;
    border: 0;
    font-size: .92rem;
}
body.est-mobile .lesson-content-lecon td:first-child:empty { display: none; }
body.est-mobile .lesson-content-lecon td:has(audio) { margin-bottom: .2rem; }
body.est-mobile .lesson-content-lecon .audio-lecon {
    width: 100%;
    height: 34px;
    margin: 0;
}

/* Les notes de bas de page : la bulle s'ouvre au toucher, elle doit
   rester dans l'écran. */
body.est-mobile .note-bulle {
    left: auto;
    right: 0;
    max-width: min(78vw, 320px);
    white-space: normal;
}

/* Le portugais (aide) reste lisible mais discret. */
body.est-mobile .langue-native { font-size: .85em; }

.m-revision-nav {
    display: flex;
    gap: .5rem;
    margin-top: .8rem;
}
.m-revision-nav a {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    min-height: 46px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .9);
    border: 1px solid var(--bord);
    color: var(--texte);
    font-size: .8rem;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    padding: .3rem .4rem;
}
.m-revision-nav a.m-suivant {
    background: var(--vert);
    border-color: var(--vert);
    color: #fff;
}

/* La barre de révision : sortir, et rejoindre ses cartes. */
.m-review-bar {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .15rem 0 .45rem;
}
.m-review-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 13px;
    background: rgba(255, 255, 255, .85);
    border: 1px solid var(--bord);
    color: var(--texte);
    text-decoration: none;
    font-size: 1rem;
}
.m-review-btn:active { background: #fff; transform: scale(.95); }
.m-review-titre {
    font-family: var(--police-titre);
    font-size: .95rem;
    font-weight: 800;
    color: var(--encre);
}

/* Les leçons verrouillées sur téléphone */
body.est-mobile .carte-lecon.carte-lecon--verrouillee { opacity: .62; cursor: default; }
body.est-mobile .m-lecon-mention {
    display: inline-block;
    margin-top: .15rem;
    font-size: .66rem;
    font-weight: 700;
    color: #93a0b1;
    background: #eef2f7;
    border-radius: 999px;
    padding: .08rem .4rem;
}

/* ------------------------------------------------------------
   7. LES CARTES DE RÉVISION — plein écran, sans distraction
   ------------------------------------------------------------ */
body.est-mobile.page-flashcards .app-header { display: none; }
body.est-mobile.page-flashcards main { padding-bottom: 0; height: 100dvh; overflow: hidden; }
body.est-mobile.page-flashcards .pied-de-page { display: none; }
/* Pendant une session de cartes, la barre d'onglets disparaît : on est
   dans une activité, pas dans une navigation. La croix en haut à gauche
   reste la seule sortie — et elle est explicite. */
body.est-mobile.page-flashcards .tabbar { display: none; }

/* ------------------------------------------------------------
   L'EXERCICE — même règle que les cartes : une activité, pas une
   navigation. La barre d'onglets est à 1400, donc AU-DESSUS de la
   barre de validation (1050) : mesuré, le clic au centre du bouton
   tombait sur `.tabbar-item`. Elle s'efface ; la croix en haut à
   gauche reste la sortie.
   ------------------------------------------------------------ */
body.est-mobile.page-exercice-vue .tabbar { display: none; }
/* Le pied de page garde la place de la barre fixe de validation
   (la réserve des 4,6rem était pour la barre d'onglets, désormais absente). */
body.est-mobile.page-exercice-vue .pied-de-page {
    padding-bottom: calc(1.1rem + 170px);
}

body.est-mobile.page-flashcards .container.py-4 {
    max-width: 720px;
    padding: .55rem .8rem 0 !important;
    height: 100%;
    display: flex;
    flex-direction: column;
}

body.est-mobile.page-flashcards .review-wrapper {
    flex: 1;
    min-height: 0;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding-bottom: calc(.85rem + env(safe-area-inset-bottom, 0px));
}
body.est-mobile.page-flashcards #loading-ui,
body.est-mobile.page-flashcards #finished-ui {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
}

body.est-mobile.page-flashcards .progress-container { margin: 0; flex: none; }
body.est-mobile.page-flashcards .progress-bar-container { height: 10px; border-radius: 999px; }
body.est-mobile.page-flashcards .progress-text { font-size: .72rem; color: var(--texte-doux); text-shadow: none; }

body.est-mobile.page-flashcards .flashcard-viewport { flex: 1; min-height: 0; }
body.est-mobile.page-flashcards .flashcard { border-radius: 24px; }
body.est-mobile.page-flashcards .card-text { font-size: 2rem; line-height: 1.25; }
body.est-mobile.page-flashcards .controls-container {
    flex: none;
    min-height: 0;
    padding-top: .5rem;
    gap: .4rem;
}
body.est-mobile.page-flashcards .controls-container .btn {
    min-height: 52px;
    border-radius: 15px;
    font-size: 1rem;
    font-weight: 800;
}
body.est-mobile.page-flashcards #evaluation-controls .d-grid { gap: .4rem !important; }
body.est-mobile.page-flashcards .session-message h2 { font-size: 1.4rem; }

/* ------------------------------------------------------------
   8. LES EXERCICES
   ------------------------------------------------------------ */
body.est-mobile .hero-exercices {
    padding: 1rem 1.05rem;
    border-radius: 20px;
    margin-bottom: 1rem;
}
body.est-mobile .hero-exercices h1 { font-size: 1.35rem; margin: .15rem 0 .25rem; }
body.est-mobile .hero-exercices p { font-size: .85rem; }
body.est-mobile .entete-exo { margin: 1.1rem 0 .65rem; }
body.est-mobile .entete-exo h2 { font-size: 1.05rem; }

/* On NE remplace PAS la grille : on resserre ses gouttières. En
   paysage (téléphone couché, 900 px de large), deux colonnes restent
   plus lisibles qu'une seule. */
body.est-mobile .grille-exercices,
body.est-mobile .grille-categories {
    gap: .65rem;
}

body.est-mobile .carte-exercice {
    padding: .9rem .95rem;
    border-radius: 18px;
}
body.est-mobile .exo-titre { font-size: 1rem; }
body.est-mobile .exo-native { font-size: .76rem; }
body.est-mobile .exo-pied { flex-wrap: wrap; }
body.est-mobile .exo-pied .btn,
body.est-mobile .exo-pied .bouton-principal {
    min-height: 46px;
    padding: .5rem 1.1rem;
    font-size: .86rem;
}

body.est-mobile .carte-categorie {
    align-items: center;
    padding: .8rem;
    border-radius: 18px;
}
body.est-mobile .carte-categorie .categorie-icone {
    width: 46px;
    height: 46px;
    border-radius: 15px;
    font-size: 1.2rem;
}
body.est-mobile .categorie-desc { display: none; }

/* Une seule colonne UNIQUEMENT quand la largeur ne permet pas deux
   cartes lisibles. */
@media (max-width: 700px) {
    body.est-mobile .grille-exercices,
    body.est-mobile .grille-categories {
        grid-template-columns: 1fr;
    }
    body.est-mobile .exo-pied .btn,
    body.est-mobile .exo-pied .bouton-principal { width: 100%; }
}

/* La page d'un exercice */
body.est-mobile.page-exercice-vue .conteneur-page { padding: .3rem .8rem 1rem; }
body.est-mobile.page-exercice-vue .entete-exercice h1 { font-size: 1.2rem; }

/* Le bouton de diagnostic du suivi en direct se posait SUR la pilule.
   On le remonte au-dessus d'elle : il reste accessible, sans gêner la
   navigation. */
body.est-mobile #bouton-diagnostic {
    bottom: calc(94px + env(safe-area-inset-bottom, 0px));
    right: 14px;
}

/* Pendant une révision de cartes, l'écran est nu : pas de bouton
   flottant, pas de navigation. Seule la croix de sortie compte. */
body.est-mobile.page-flashcards #bouton-diagnostic { display: none; }

/* ------------------------------------------------------------
   9. LE PROFIL, L'AGENDA, LES PROGRÈS
   ------------------------------------------------------------ */
body.est-mobile .profil-fiche {
    flex-direction: column;
    text-align: center;
    padding: 1.1rem .9rem;
    border-radius: 22px;
    gap: .5rem;
}
body.est-mobile .profil-fiche-infos { width: 100%; }
body.est-mobile .profil-nom { font-size: 1.4rem; }
body.est-mobile .profil-metas { justify-content: center; flex-wrap: wrap; }

body.est-mobile .profil-stat-grille {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: .5rem;
}
/* Cinq statistiques dans une grille de deux colonnes : la dernière
   occupe toute la largeur au lieu de rester seule dans un coin. */
body.est-mobile .profil-stat-grille > :last-child:nth-child(odd) { grid-column: 1 / -1; }
body.est-mobile .profil-stat { padding: .7rem .5rem; border-radius: 16px; }

body.est-mobile .profil-section { margin-top: 1rem; }
body.est-mobile .profil-section-titre { font-size: 1rem; }
body.est-mobile .profil-progression { padding: .9rem; border-radius: 18px; }
body.est-mobile .profil-progression-tete h3 { font-size: .9rem; }

/* Les raccourcis du profil (l'en-tête du haut n'existe plus). */
body.est-mobile .m-liens {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .45rem;
    margin-top: .75rem;
}
body.est-mobile .m-liens a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    padding: .65rem .25rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, .86);
    border: 1px solid rgba(255, 255, 255, .92);
    box-shadow: 0 10px 24px -24px rgba(31, 41, 55, .5);
    text-decoration: none;
    color: var(--texte);
    font-size: .68rem;
    font-weight: 700;
    text-align: center;
}
body.est-mobile .m-liens i { font-size: 1.05rem; color: var(--bleu-fonce); }
body.est-mobile .m-liens a:active { transform: scale(.96); }

/* Profil public : trois chiffres côte à côte. La feuille de base les
   empile sous 768 px ; sur un téléphone, trois chiffres courts tiennent
   très bien sur une ligne, et l'empilement gaspillait la hauteur. */
body.est-mobile .profil-public-chiffres {
    grid-template-columns: repeat(3, 1fr);
    gap: .45rem;
}
body.est-mobile .profil-public-chiffres .chiffre {
    padding: .55rem .35rem;
    border-radius: 14px;
}
body.est-mobile .profil-public-chiffres .chiffre-valeur { font-size: 1.15rem; }
body.est-mobile .profil-public-chiffres .chiffre-libelle {
    font-size: .62rem;
    line-height: 1.25;
    text-align: center;
}

/* Mes cartes personnelles : le recto au-dessus, le verso en dessous.
   Côte à côte, un mot long passait à la ligne et décalait la colonne
   portugaise. */
body.est-mobile.page-mes-flashcards .card-text-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: .1rem;
}
body.est-mobile.page-mes-flashcards .card-text-content .recto { font-size: .93rem; }
body.est-mobile.page-mes-flashcards .card-text-content .verso { font-size: .8rem; }
body.est-mobile.page-mes-flashcards .card-text-content .bi-arrow-right-short { display: none; }
body.est-mobile.page-mes-flashcards .fc-entete { flex-direction: column; align-items: flex-start; gap: .5rem; }
body.est-mobile.page-mes-flashcards .fc-panel { padding: 1rem .9rem; }

body.est-mobile .page-titre,
body.est-mobile .progres-titre { font-size: 1.4rem; }

body.est-mobile .kpi-grille {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: .5rem;
    padding: .6rem;
    border-radius: 20px;
}
body.est-mobile .kpi-carte { padding: .7rem .6rem; border-radius: 16px; }
body.est-mobile .kpi-carte .kpi-valeur { font-size: 1.5rem; }

body.est-mobile .competences-liste { gap: .5rem; }
body.est-mobile .calendar-container { padding: .6rem; border-radius: 18px; }
body.est-mobile .calendar-grid { gap: 2px; }
body.est-mobile .calendar-day { font-size: .72rem; border-radius: 8px; }

body.est-mobile .agenda-grille { font-size: .7rem; gap: 2px; }
body.est-mobile .agenda-jour { min-height: 62px; padding: 2px; border-radius: 8px; }
body.est-mobile .agenda-pastille { font-size: .55rem; padding: 1px 2px; }
body.est-mobile .agenda-pastille b { display: none; }
body.est-mobile .agenda-col-tete { font-size: .6rem; }
body.est-mobile .agenda-mois-titre { font-size: .95rem; }
body.est-mobile .agenda-semaine-jour { min-height: 58px; }
body.est-mobile .agenda-liste-item { padding: .7rem; border-radius: 14px; }
body.est-mobile .agenda-bascule { width: 100%; }
body.est-mobile .agenda-bascule-btn { flex: 1; min-height: 40px; }

/* ------------------------------------------------------------
   10. LE CHAPITRE ET LA SÉANCE (pages de consultation)
   ------------------------------------------------------------ */
body.est-mobile .chapitre-entete,
body.est-mobile .entete-etape {
    flex-direction: column;
    align-items: flex-start;
    gap: .6rem;
}
body.est-mobile .entete-etape-suite { width: 100%; justify-content: space-between; }
body.est-mobile .carte-lecon { padding: .75rem; border-radius: 16px; }
body.est-mobile .titre-lecon { font-size: .95rem; }
body.est-mobile .detail-lecon { flex-wrap: wrap; gap: .25rem; }

/* La page d'un chapitre : sept cartes de séance empilées. On resserre
   ce qui peut l'être pour que le sommaire tienne en moins d'écrans. */
body.est-mobile .carte-seance { margin-bottom: .6rem; border-radius: 16px; }
body.est-mobile .seance-entete { padding: .7rem .8rem; gap: .55rem; }
body.est-mobile .seance-note { padding: .6rem .8rem; font-size: .78rem; line-height: 1.4; }
body.est-mobile .carte-seance .liste-lecons { padding: .55rem .65rem .65rem; }
body.est-mobile .encadre-objectifs { padding: .9rem; border-radius: 18px; }

/* ------------------------------------------------------------
   11. LES FORMULAIRES (mot de passe, profil, connexion)
   ------------------------------------------------------------ */
body.est-mobile .form-control,
body.est-mobile .form-select { min-height: 48px; border-radius: 13px; }
body.est-mobile .btn { min-height: 46px; border-radius: 13px; }
body.est-mobile .modal-dialog { margin: .6rem; }
body.est-mobile .modal-content { border-radius: 20px; }

/* ------------------------------------------------------------
   12. LE MODE PAYSAGE
   Sur un téléphone couché, la hauteur manque : on resserre les
   marges et on masque le pied de page.
   ------------------------------------------------------------ */
@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
    body.est-mobile .pied-de-page { display: none; }
    body.est-mobile .m-hero { padding: .7rem; gap: .55rem; }
    body.est-mobile .m-objectif-anneau { width: 54px; height: 54px; }
    body.est-mobile .tabbar-item { min-height: 44px; }
    body.est-mobile .tabbar-label { display: none; }
    body.est-mobile .tabbar-item--central .tabbar-icone { margin-top: -14px; width: 46px; height: 46px; }
}

/* ------------------------------------------------------------
   13. LE MOUVEMENT RÉDUIT
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    body.est-mobile *,
    body.est-mobile *::before,
    body.est-mobile *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* ============================================================
   FOND ALLÉGÉ SUR TÉLÉPHONE — 04/11/2026

   Le fond « mesh » du site (trois halos colorés + un dégradé) est
   pensé pour une fenêtre d'ordinateur : sur 390 px de large, les
   halos se tassent les uns sur les autres et la page devient une
   plaque de couleur. Le professeur le décrit comme « un concentré de
   couleur ». Sur téléphone : blanc cassé, et une seule nappe très
   pâle en haut, qui rappelle la teinte du site sans la concentrer.
   `background-attachment: fixed` est également retiré — il provoque
   des saccades au défilement sur iOS.
   ============================================================ */
body.est-mobile {
    /* Deuxième passe (04/11/2026) : le blanc cassé ne laissait plus voir
       les cartes blanches — « on ne voit pas les blocs ressortir ». Un
       gris bleuté très clair rétablit le contraste, sans revenir aux
       halos colorés qui se tassaient sur 390 px. */
    background-color: #eff3f9;
    background-image: linear-gradient(180deg, #e9f1fb 0, #f4f7fb 420px);
    background-repeat: no-repeat;
    background-size: 100% 420px;
    background-attachment: scroll;
}

/* ============================================================
   LE PIED DE PAGE SUR TÉLÉPHONE — façon webapp (04/11/2026)
   Les trois colonnes du pied d'ordinateur sont masquées ; il ne
   restait que deux lignes de copyright, sans accès aux mentions
   légales. On en fait une barre discrète : marque, liens utiles,
   langues — tout petit, centré, au-dessus de la barre d'onglets.
   ============================================================ */
body.est-mobile .pied-bas {
    gap: .45rem;
    font-size: .68rem;
    line-height: 1.4;
    color: var(--texte-doux);
}
body.est-mobile .pied-bas-liens {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .35rem .9rem;
}
body.est-mobile .pied-bas-liens a {
    color: var(--texte-doux);
    text-decoration: none;
    padding: .35rem .2rem;      /* cible tactile confortable */
    border-bottom: 1px solid transparent;
}
body.est-mobile .pied-bas-liens a:active {
    color: var(--encre);
    border-bottom-color: var(--bord);
}
/* Sur ordinateur, les liens vivent dans les colonnes : pas de doublon. */
.pied-bas-liens { display: none; }
body.est-mobile .pied-bas-liens { display: flex; }

/* ============================================================
   HORLOGES DU MONDE SUR TÉLÉPHONE — 04/11/2026

   Pourquoi ici et pas dans widgets.css : sur téléphone, index.php sert
   `includes/accueil_mobile.php` AVANT d'enregistrer ses feuilles
   supplémentaires. `widgets.css` n'est donc PAS chargée sur l'accueil
   mobile (vérifié : seules theme, design, pages et mobile le sont).
   Le widget d'horloge, lui, est rendu par le code d'ordinateur : sans
   feuille, il s'affichait en texte brut empilé. Ces règles vivent donc
   dans mobile.css, qui est toujours chargée.

   La classe du body mobile est `page-accueil-mobile` (pas `page-index`).
   ============================================================ */
@media (max-width: 767.98px) {
    body.page-accueil-mobile .horloge-liste,
    body.page-index .horloge-liste {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .55rem;
    }
    body.page-accueil-mobile .horloge-ville,
    body.page-index .horloge-ville {
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        gap: .1rem;
        padding: .75rem .85rem .7rem;
        border-radius: 16px;
        background: #fff;
        border: 1px solid #e3e9f1;
        box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
    }
    body.page-accueil-mobile .horloge-ville::before,
    body.page-index .horloge-ville::before {
        content: "";
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 3px;
        background: var(--deg-bleu);
    }
    body.page-accueil-mobile .horloge-ville.horloge-nuit::before,
    body.page-index .horloge-ville.horloge-nuit::before { background: var(--deg-nuit); }
    body.page-accueil-mobile .horloge-ville-tete,
    body.page-index .horloge-ville-tete {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .4rem;
    }
    body.page-accueil-mobile .horloge-nom,
    body.page-index .horloge-nom {
        font-size: .72rem;
        font-weight: 700;
        letter-spacing: .02em;
        text-transform: uppercase;
        color: var(--texte-doux);
    }
    body.page-accueil-mobile .horloge-icone,
    body.page-index .horloge-icone { font-size: .85rem; color: var(--jaune-ombre); }
    body.page-accueil-mobile .horloge-icone .bi-moon-stars-fill,
    body.page-index .horloge-icone .bi-moon-stars-fill { display: none; }
    body.page-accueil-mobile .horloge-nuit .horloge-icone,
    body.page-index .horloge-nuit .horloge-icone { color: var(--violet); }
    body.page-accueil-mobile .horloge-nuit .horloge-icone .bi-sun-fill,
    body.page-index .horloge-nuit .horloge-icone .bi-sun-fill { display: none; }
    body.page-accueil-mobile .horloge-nuit .horloge-icone .bi-moon-stars-fill,
    body.page-index .horloge-nuit .horloge-icone .bi-moon-stars-fill { display: inline; }
    body.page-accueil-mobile .horloge-heure,
    body.page-index .horloge-heure {
        font-size: 1.55rem;
        font-weight: 800;
        line-height: 1.1;
        letter-spacing: -.02em;
        color: var(--encre);
        font-variant-numeric: tabular-nums;
    }
    body.page-accueil-mobile .horloge-date,
    body.page-index .horloge-date { font-size: .68rem; color: var(--texte-doux); opacity: .85; }
}