/* Application Prof — V0.14.57.10
   Branding léger : la marque dans l'en-tête.

   V0.18.12.340.2 — LE LOGO DE CUMPARI, en haut à gauche de toutes les pages : la tuile violette (assets/img/cumpari-logo.svg), « cumpari. » (minuscules, gras, point final de
   couleur) et, dessous, « ENSEIGNANTS » en petites capitales espacées — le même dessin que Cumpari élèves, qui y écrit « ÉLÈVES ». Le balisage vient d'une seule fonction
   (ui_marque_v0123402, app/modules/ui-layout.php). Les COULEURS sont des jetons de thème (--theme-brand-word, --theme-brand-dot, --theme-brand-sub : themes.css, un jeu par thème,
   chacun vérifié sur le fond réel de la barre de son thème) : aucune couleur écrite ici. Police : celle de la page (Inter n'est pas embarquée : repli sur la police du système).
   Les règles qui MASQUENT le mot (aperçus de cours, cockpit, téléphone : application.css, course-context.css, course-preview-mobile.css) masquent aussi la ligne « ENSEIGNANTS ».

   V0.18.12.340.3 — la MÊME marque est celle de la page de connexion et de la double authentification (ui_marque_entree_v0123403 : le même balisage dans un bloc « brand-entree », centré sur le noir,
   à l'échelle d'une page d'entrée). Les règles qui font LE DESSIN (police, graisses, interlettrage, minuscules et capitales, point final, couleurs) sont écrites UNE fois, pour les deux
   emplacements ; chacun a ensuite SES règles de taille et de place : la barre (« .topbar »), la page d'entrée (« .brand-entree »). Les couleurs viennent des mêmes jetons ; la page d'entrée,
   toujours sur fond noir, les pose elle-même (application.css, bloc « .entree-cumpari »). */

/* ---------------------------------------------------------------- le dessin, commun à la barre et à la page d'entrée */
.topbar .brand,
.brand-entree{
    font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif;
    color:var(--theme-brand-word);
}

.topbar .brand-logo,
.brand-entree .brand-logo{
    display:block;
    object-fit:contain; /* le SVG porte déjà ses coins arrondis : aucun arrondi de plus */
}

.topbar .brand-text,
.brand-entree .brand-text{
    display:flex;
    flex-direction:column;
    line-height:1;
}

.topbar .brand-label,
.brand-entree .brand-label{
    display:block;
    font-weight:790;
    letter-spacing:-.045em;
    text-transform:lowercase;
    line-height:1;
    color:var(--theme-brand-word);
}

/* Le point final : un décor (le nom accessible du lien est « Cumpari (enseignants) — Accueil », celui de la page d'entrée est son <h1> « Cumpari »). La seconde déclaration, que les navigateurs
   plus anciens ignorent, le donne en plus comme texte vide aux lecteurs d'écran. */
.topbar .brand-label-pari::after,
.brand-entree .brand-label-pari::after{
    content:".";
    content:"." / "";
    color:var(--theme-brand-dot);
}

.topbar .brand-sub,
.brand-entree .brand-sub{
    display:block;
    font-weight:600;
    letter-spacing:.08em;
    text-transform:uppercase;
    line-height:1;
    color:var(--theme-brand-sub);
}

/* ---------------------------------------------------------------- la barre (taille et place) */
.topbar .brand{
    display:inline-flex;
    align-items:center;
    gap:0; /* l'écart de 11 px entre l'icône et le texte est la marge à gauche du mot et de la ligne : quand les règles masquent le mot (display:none), l'écart disparaît avec lui */
    text-decoration:none;
    min-height:48px; /* la boîte du lien garde sa hauteur d'avant (le logo faisait 48 px) : la barre ne change de hauteur sur aucune page (aperçus de cours compris) ; l'icône de 40 px s'y centre */
}

.topbar .brand-logo{
    width:40px;
    height:40px;
    flex:0 0 40px;
}

.topbar .brand-text{
    gap:3px;
}

.topbar .brand-label{
    font-size:1.3rem;
    margin-left:11px;
}

.topbar .brand-sub{
    font-size:.72rem;
    margin-left:11px;
}

/* ---------------------------------------------------------------- la page d'entrée (taille et place) : la marque centrée, au-dessus de la devise et de la boîte
   Tout est proportionnel à « --entree-echelle » : 1 sur un écran haut, moins sur un écran bas (un téléphone tenu en large, un clavier affiché) pour que la marque ET la boîte tiennent à l'écran.
   Les proportions sont celles de la barre, au mot de 2,8 rem (2,15 fois celui de la barre, 1,3 rem) : l'icône → le texte 11 px × 2,15 = 1,5 rem, le mot → la ligne 3 px × 2,15 = .4 rem ;
   l'icône (104 px) est plus grande que la proportion (86 px) : c'est elle qui porte la page. Le haut de la marque laisse la place du halo de l'animation d'arrivée (jamais rogné). */
.brand-entree{
    --entree-echelle:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    padding-top:calc(1.75rem * var(--entree-echelle));
}

@media (max-height:700px){
    .brand-entree{ --entree-echelle:.78; }
}

.brand-entree .brand-logo{
    width:calc(104px * var(--entree-echelle));
    height:calc(104px * var(--entree-echelle));
    flex:none;
}

.brand-entree .brand-text{
    align-items:center;
    gap:calc(.4rem * var(--entree-echelle));
    margin-top:calc(1.5rem * var(--entree-echelle));
}

.brand-entree .brand-label{
    font-size:calc(2.8rem * var(--entree-echelle));
}

.brand-entree .brand-sub{
    font-size:calc(.9rem * var(--entree-echelle));
    padding-left:.08em; /* l'interlettrage s'ajoute aussi APRÈS la dernière lettre : sans cette compensation la ligne centrée paraîtrait décalée vers la gauche */
}




/* ===================================================================================================================================================================================
   ANIMATION DU LOGO — retirable  (V0.18.12.340.2 ; étendue à la page de connexion en V0.18.12.340.3)

   Au premier affichage de l'application dans l'onglet : l'icône apparaît avec un petit rebond (échelle, rotation, opacité), puis un halo menthe — la couleur du point du logo — se propage UNE fois.
   Elle ne se joue QUE sous la classe « logo-anim » de <html>, que assets/js/logo-anim.js pose AVANT le premier affichage et UNE seule fois par onglet (drapeau dans sessionStorage) : l'application
   charge une page entière à chaque clic, sans cela le logo rebondirait à chaque page. Jamais sur les aperçus d'un cours (le script ne pose pas la classe) ; jamais quand le système demande moins de
   mouvement (la media query ci-dessous, et le script). Les animations ne touchent ni la largeur, ni les marges, ni la position : opacité, échelle, rotation et ombre seulement — la mise en page
   ne bouge pas d'un pixel. Le halo est un « box-shadow » : l'image reçoit donc, SOUS la classe seulement, le rayon de l'icône SVG (11/36 ≈ 30,5 %) pour qu'il l'épouse (sans lui, un halo carré
   autour de la tuile arrondie). Sur téléphone la barre ne laisse que 8 px autour de l'icône : le halo s'y arrête à 8 px (--logo-halo) au lieu de 16 px, il ne déborde pas de la barre.
   Le survol (une petite rotation) n'existe que pour un pointeur qui survole vraiment (souris) : aucun décalage au toucher.
   V0.18.12.340.3 — la page de CONNEXION joue la même animation (le même rebond, le même halo, plus grand : 28 px pour une icône de 104 px) à son affichage « propre » : sans script, sous la classe
   « entree-anime » que app/routes/auth.php pose sur le bloc de la page quand ni erreur, ni message, ni envoi de formulaire n'est à lire (jamais sur la double authentification : on vient de la voir). Pas de
   drapeau de session : la page s'affiche à l'ouverture de chaque session, l'animation s'y joue à chaque affichage propre. Le halo n'est rogné par rien (aucun « overflow » sur la page d'entrée).
   POUR LA RETIRER : supprimer cette section, assets/js/logo-anim.js et la balise <script> de ui_logo_anim_script_v0123402 (app/modules/ui-layout.php) ; le logo n'en dépend pas. La classe « entree-anime »
   (app/routes/auth.php) n'a plus d'effet : elle peut y rester ou en être ôtée.
   =================================================================================================================================================================================== */
@media (prefers-reduced-motion: no-preference) {
    @keyframes logo-pop {
        from { opacity:0; scale:.55; rotate:-24deg; }
        to   { opacity:1; scale:1; rotate:0deg; }
    }
    @keyframes logo-ring {
        0%   { box-shadow:0 0 0 0 rgba(100,221,200,.55); }
        100% { box-shadow:0 0 0 var(--logo-halo,16px) rgba(100,221,200,0); }
    }
    html.logo-anim .topbar .brand-logo,
    .entree-anime .brand-entree .brand-logo {
        border-radius:30.5%;
        animation:logo-pop .7s cubic-bezier(.34,1.56,.64,1) .1s both, logo-ring 1.2s ease-out .75s 1;
    }
    .entree-anime .brand-entree .brand-logo {
        --logo-halo:calc(28px * var(--entree-echelle));
    }
    .topbar .brand-logo {
        transition:transform .35s cubic-bezier(.34,1.56,.64,1);
    }
    @media (hover:hover) {
        .topbar .brand:hover .brand-logo { transform:rotate(-8deg) scale(1.08); }
    }
    @media (max-width:760px) {
        html.logo-anim .topbar .brand-logo { --logo-halo:8px; }
    }
}
/* FIN DE L'ANIMATION DU LOGO */