/* ── Signature Bubul des pages de partage public ────────────────────────────
   Feuille AUTONOME, chargée par les trois gabarits publics
   (slidia/public_present, scormia/public_preview, seren_ia/public_show).

   POURQUOI UNE ENTRÉE À PART, et pas les feuilles des pages hôtes :

   1. Tailwind n'est chargé que sur UNE des trois pages. slidia_present_styles
      (present.css) et scormia_player (player.css) sont des feuilles autonomes
      qui n'importent PAS app.css : sur Slidia et Scormia, toutes les classes
      utilitaires de l'atome `_atoms/logo/logo-with-text.html.twig` sont
      inertes — sans les règles ci-dessous, le SVG sortirait à sa taille
      naturelle (109 × 102 px) au milieu de la barre de navigation.
   2. player.css est EMBARQUÉ dans les ZIP SCORM exportés. Y déposer le style
      d'une signature qui n'existe que sur la page publique reviendrait à
      livrer des règles mortes dans chaque paquet téléchargé par un LMS.
   3. Tout ce que la signature exige — y compris les accommodements des barres
      hôtes — tient donc dans ce seul fichier : la retirer, c'est supprimer ce
      fichier, son entrée Webpack et trois `include`.

   COUPLAGE ASSUMÉ À L'ATOME. Les sélecteurs ci-dessous visent la structure
   rendue par `_atoms/logo/logo-with-text.html.twig` : un conteneur `<div>`,
   dedans un `<div class="logo-svg-container">` (le SVG) puis un `<span>` (le
   mot « Bubul »). L'atome n'expose aucun point d'accroche paramétrable ; si sa
   structure change, c'est ici qu'il faut suivre.

   RÈGLES NON CASCADÉES. Ce fichier ne passe par aucun `@layer` : en CSS à
   couches, une déclaration hors couche l'emporte sur toute déclaration
   couchée, quelle que soit sa spécificité. Les utilitaires Tailwind de l'atome
   (`w-6`, `text-lg`, le dégradé de texte) sont donc neutralisés sur Serenia
   sans avoir à surenchérir en spécificité — et les trois pages rendent la
   signature à l'identique.
─────────────────────────────────────────────────────────────────────────── */

.bubul-sign {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    text-decoration: none;
    /* `inherit` et non une couleur en dur : la signature vit sur un fond noir
       (Slidia) comme sur un fond clair (Scormia, Serenia). */
    color: inherit;
    opacity: .55;
    transition: opacity .15s ease;
}

.bubul-sign:hover,
.bubul-sign:focus-visible {
    opacity: 1;
}

/* Conteneur de l'atome — `inline-flex` ici, car les classes Tailwind qui le
   mettent en flex ne s'appliquent que sur la page Serenia. */
.bubul-sign > div {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Le SVG du logo. `logo-svg-container` porte les classes de taille de l'atome
   (`w-8 h-8`), inertes hors Serenia : la taille est fixée ici pour les trois. */
.bubul-sign .logo-svg-container {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

.bubul-sign .logo-svg-container svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Le mot « Bubul ». `background-image: none` + `-webkit-text-fill-color`
   annulent le dégradé de texte de l'atome (bg-clip-text + text-transparent),
   qui ne s'appliquerait que sur Serenia : sans cela, la signature serait
   bleutée sur une page et monochrome sur les deux autres. Monochrome partout
   est aussi ce qui la garde discrète sur un fond noir. */
.bubul-sign > div > span {
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .01em;
    white-space: nowrap;
    background-image: none;
    color: inherit;
    -webkit-text-fill-color: currentColor;
}

/* ── Slidia — dans la barre supérieure, à gauche ─────────────────────────────
   La diapositive occupe TOUT le reste de la page (`.sdp-audience` est en
   `flex: 1`, fond noir, `overflow: hidden`) et se recentre à chaque format de
   fenêtre : aucune zone n'y est libre de façon fiable, un badge flottant
   finirait par mordre sur une diapositive au ratio proche de celui de l'écran.
   La barre, elle, est déjà là et son bloc gauche ne contenait qu'un bouton.
─────────────────────────────────────────────────────────────────────────── */

.bubul-sign--topbar {
    margin-right: 4px;
}

/* ── Slidia, écrans étroits ──────────────────────────────────────────────────
   MESURÉ, pas supposé (Chrome, iframes de largeur imposée, téléchargement
   AUTORISÉ — le cas le plus chargé, quatre éléments dans la barre) :

     largeur | avant ce chantier | avec la signature et ce bloc
     --------|-------------------|------------------------------
      320 px | déborde (363 px)  | tient (320 px)
      360 px | déborde (363 px)  | tient (360 px)
      375 px | tient             | tient

   La barre débordait donc DÉJÀ sous 375 px : « ⤓ Télécharger » sortait de
   l'écran, sans défilement possible (`body { overflow: hidden }`). Y ajouter
   la signature sans rien d'autre aurait aggravé un défaut existant.

   Piste écartée, et c'est important : un simple `min-width: 0` sur les trois
   blocs supprime bien le débordement mesuré, mais il autorise les blocs à se
   réduire sous leur contenu — les boutons se chevauchent alors, le libellé
   « ‹ Précédent » est tronqué en cours de mot et le compteur disparaît
   complètement. Échanger un débordement contre des contrôles recouverts n'est
   pas un progrès. Ce qu'il fallait, c'est réduire le contenu lui-même. */
@media (max-width: 560px) {
    /* Le mot « Bubul » est ce qui se retire en premier : c'est l'élément qui
       n'est pas un contrôle. Le logo, lui, reste — la signature ne disparaît
       à aucune largeur. */
    .bubul-sign--topbar > div > span {
        display: none;
    }

    .bubul-sign--topbar {
        margin-right: 0;
    }

    .sdp-topbar {
        padding: 0 10px;
        gap: 8px;
    }

    .sdp-topbar-left,
    .sdp-topbar-right {
        gap: 8px;
    }

    .sdp-btn {
        padding: 5px 9px;
        font-size: 11px;
    }

    /* Téléchargement réduit à son glyphe. Le libellé disparaît à l'écran, pas
       du DOM : l'`aria-label` de la balise porte l'intitulé complet, et le
       lecteur d'écran continue d'annoncer « Télécharger la présentation ». */
    .sdp-dl {
        margin-left: 4px;
    }

    .sdp-dl-label {
        display: none;
    }
}

/* ── Bande de pied de page — Scormia et Serenia ──────────────────────────────
   Une bande DANS LE FLUX, jamais en position fixe : sur Scormia, la barre
   « Précédent / compteur / Suivant » n'est pas épinglée au bas de la fenêtre,
   elle suit le contenu à l'intérieur du défilement de `.sc-player__main` —
   un badge `position: fixed` en bas viendrait donc se poser dessus dès que le
   visiteur atteint le bas d'un écran. Une bande en flux ne peut, par
   construction, recouvrir quoi que ce soit.
─────────────────────────────────────────────────────────────────────────── */

.bubul-sign-band {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 auto;
    padding: 10px 16px;
    /* `env(safe-area-inset-bottom)` : sur iPhone, la barre d'accueil
       recouvrirait sinon la bande. */
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
}

/* ── Scormia ────────────────────────────────────────────────────────────────
   `.sc-player` est verrouillé en `height: 100dvh` : tel quel, il remplit la
   fenêtre à lui seul et la bande serait poussée hors écran, atteignable au
   défilement du document. On rend donc la chaîne `body > #scormia-player >
   .sc-player` élastique, sur trois niveaux — `#scormia-player` est un simple
   div de montage, sans style, qui casserait la chaîne si on l'oubliait.

   Ces règles sont portées par `.sc-share-public`, posé sur le <body> du SEUL
   gabarit public : l'aperçu authentifié et le paquet SCORM exporté, qui
   partagent player.css, gardent exactement la mise en page d'aujourd'hui.

   `min-height: 0` à chaque étage : sans lui, la taille minimale automatique
   d'un élément flex l'empêche de se réduire sous son contenu, et le
   défilement interne de `.sc-player__main` (`overflow-y: auto`) fuit vers le
   document entier. */
.sc-share-public {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
}

.sc-share-public #scormia-player {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.sc-share-public .sc-player {
    height: auto;
    flex: 1;
    min-height: 0;
}

.sc-share-public .bubul-sign-band {
    background: #fff;
    border-top: 1px solid var(--line, #e6eaf2);
}

/* ── Serenia ────────────────────────────────────────────────────────────────
   La page défile normalement et se termine sur le fil de discussion : la
   signature s'y pose comme une signature de fin de document, sous un filet.
   Rien à recouvrir, rien à contraindre. */
.bubul-sign-band--serenia {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #e5e7eb;
}