/**
 * IMAY
 * @author Mayeul Perrin
 * Year: 2026
 *
 * File: mdl-bandeau.css
 * Description: bandeau « modèle » — composant partagé par les pages d'exemple.
 *              Balisage et script : app/pages/_partiels/mdl_bandeau.php
 *
 * CONTRAT D'UNE PAGE D'EXEMPLE — trois lignes, rien de plus :
 *   1. inclure le partiel en tête de vue ;
 *   2. décaler son propre en-tête de var(--mdl-bandeau) ;
 *   3. donner la classe « mdl-suit-bandeau » à cet en-tête, pour qu'il monte
 *      prendre la place du bandeau quand celui-ci s'escamote.
 *
 * LA HAUTEUR EST MESURÉE, JAMAIS ÉCRITE EN DUR. Elle change avec la largeur
 * (le titre disparaît sous 880 px, les marges se resserrent sous 400 px) et
 * avec la police une fois chargée. Le modèle avocat écrivait 34 px en dur
 * alors que le bandeau en fait 46 : les douze pixels manquants passaient sous
 * le bandeau, et le contenu de l'en-tête du site se retrouvait décentré dans
 * la bande réellement visible. C'est la raison d'être de ce composant.
 */

:root {
    /* Repli avant que le script n'ait mesuré. */
    --mdl-bandeau: 46px;
}

.mdl-bandeau {
    /* Chaque modèle repeint le bandeau à ses couleurs via ces trois variables,
       posées en ligne par le partiel. */
    --mdl-fond: #17120F;
    --mdl-encre: #B9ABA0;
    --mdl-encre-2: #7D7067;

    position: fixed; inset: 0 0 auto 0; z-index: 90;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 9px 18px;
    background: var(--mdl-fond);
    border-bottom: 1px solid rgb(255 255 255 / .08);
    font: 600 13px/1 "Raleway VF", system-ui, -apple-system, sans-serif;
    color: var(--mdl-encre);
    transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}
.mdl-bandeau.est-cache { transform: translateY(-100%); }

.mdl-bandeau__retour {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--mdl-encre); white-space: nowrap;
}
.mdl-bandeau__retour:hover { color: #fff; }
.mdl-bandeau__titre { color: var(--mdl-encre-2); font-weight: 500; }
.mdl-bandeau__titre strong { color: var(--mdl-encre); font-weight: 700; }
.mdl-bandeau__cta {
    padding: 7px 15px; border-radius: 999px; white-space: nowrap;
    background: linear-gradient(135deg, #3B82F6, #8B5CF6);
    color: #fff; font-weight: 700;
}
.mdl-bandeau__cta:hover { color: #fff; filter: brightness(1.12); }

/* Sous 880 px, la mention du modèle passerait sur plusieurs lignes : le
   bandeau doublerait de hauteur et écraserait l'en-tête du site. */
@media (max-width: 880px) { .mdl-bandeau__titre { display: none; } }
@media (max-width: 400px) {
    .mdl-bandeau { padding: 8px 12px; font-size: 12px; }
    .mdl-bandeau__cta { padding: 6px 12px; font-size: 12px; }
}

/* L'en-tête du site monte prendre la place du bandeau escamoté. Le script
   pose la classe sur <html> : le bandeau et l'en-tête du site ne sont pas
   dans le même sous-arbre, aucun sélecteur ne peut aller de l'un à l'autre. */
.mdl-suit-bandeau { transition: transform .3s cubic-bezier(.4, 0, .2, 1); }
html.mdl-bandeau-cache .mdl-suit-bandeau {
    transform: translateY(calc(-1 * var(--mdl-bandeau)));
}

/* ─── Édition en ligne ────────────────────────────────────────────────────
   Le champ du framework est un bloc : dans une boîte flexible il prendrait
   toute la largeur et ferait exploser la hauteur du bandeau. On le ramène au
   fil du texte, et on laisse la barre grandir le temps d'une saisie longue. */
.mdl-bandeau.est-edition .span-text-personalized,
.mdl-bandeau.est-edition .span-textarea-personalized {
    display: inline;
    width: auto !important;
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: text;
}
.mdl-bandeau.est-edition [id$="_form"] {
    align-items: flex-start; gap: 6px; max-width: 100%;
}
.mdl-bandeau.est-edition { height: auto; flex-wrap: wrap; }
.mdl-bandeau.est-edition [id$="_form"] textarea { min-height: 64px; }