/*!
 * La banniere de la boutique, en HTML et CSS - UX-07, 15/09/2026.
 *
 * POURQUOI CE FICHIER EXISTE
 * L'en-tete etait une image unique (logoHeaderv3.png) reglee comme logo du
 * site : le titre et le slogan y etaient dessines, et sur mobile toute
 * l'image retrecissait a 68 px de haut. Ici le texte reste du texte, et sur
 * mobile le logo passe au-dessus du texte.
 *
 * L'implementation de reference est la planche
 * _travail/artefacts/bannieres-boutique.src.html : ce CSS en est repris, les
 * reglages figes sur ses choix du 15/09 (voir « Tranche » dans audit-seo.md) :
 *   - fond : l'aquarelle entiere du paravent, ETIREE a la banniere
 *     (object-fit: fill), en miroir - le violet en haut a droite ;
 *   - logo a 120 %, titre et slogan a 130 % ;
 *   - titre dans le bleu de la banniere d'avant (#205898), contour blanc de
 *     0,045 du corps (1,1 px visible a 1100 px) ; slogan en marine (#272A5D) ;
 *   - contour blanc de 0,5 px autour du logo : le filtre SVG #filtre-contour-logo,
 *     pose dans le balisage (functions.php).
 *
 * Tailles en cqw : la banniere est un conteneur (container-type), ses enfants
 * se dimensionnent sur SA largeur. Une unite cqw posee sur le conteneur
 * lui-meme se rapporterait a la page - erreur payee sur la planche le 14/09.
 *
 * Les selecteurs commencent par .site-header : la regle du theme enfant
 * `.site-header .site-branding img { height: auto }` passerait sinon devant,
 * et le logo s'afficherait a 600 px.
 */

/* Eagle Lake, servie depuis notre serveur comme Source Sans Pro (JUR-05).
   SIL Open Font License 1.1. Meme fichier que la vitrine (css/fonts/). */
@font-face {
    font-family: 'Eagle Lake';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../polices/eagle-lake-v18-latin-regular.woff2') format('woff2');
}

.site-header .banniere-boutique {
    position: relative;
    display: block;
    max-width: 1100px;
    margin: 0 auto;
    aspect-ratio: 1100 / 180;
    overflow: hidden;
    /* coins arrondis, sa demande du 15/09 : overflow: hidden coupe le fond avec */
    border-radius: 25px;
    container-type: inline-size;
    text-decoration: none;
    --tt: calc(3.3cqw * 1.3);
    --ts: calc(1.5cqw * 1.3);
    --dlogo: calc(13.6cqw * 1.2);
}

.site-header .banniere-boutique .banniere-boutique__fond {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none !important;
    object-fit: fill;
    transform: scaleX(-1);
    border-radius: 0;
}

.site-header .banniere-boutique .banniere-boutique__logo {
    position: absolute;
    left: 12%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    height: var(--dlogo);
    aspect-ratio: 1;
    border-radius: 0;
    filter: url(#filtre-contour-logo);
}

/* Le bloc de texte est centre a 51 % de la largeur ; un titre plus large que
   la boite deborde egalement des deux cotes, sans jamais atteindre l'atome. */
.site-header .banniere-boutique .banniere-boutique__mots {
    position: absolute;
    left: 34%;
    right: 32%;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.site-header .banniere-boutique .banniere-boutique__titre {
    font-family: 'Eagle Lake', Georgia, serif;
    font-weight: 400;
    font-size: var(--tt);
    line-height: 1.08;
    letter-spacing: .012em;
    white-space: nowrap;
    color: #205898;
    /* un vrai trait autour de chaque lettre, peint SOUS le remplissage :
       seule sa moitie exterieure se voit */
    -webkit-text-stroke: .045em #FFFFFF;
    paint-order: stroke fill;
}

.site-header .banniere-boutique .banniere-boutique__slogan {
    font-family: 'Eagle Lake', Georgia, serif;
    font-weight: 400;
    font-size: var(--ts);
    line-height: 1.3;
    letter-spacing: .055em;
    margin-top: .55em;
    white-space: nowrap;
    color: #272A5D;
}

.site-header .banniere-boutique__filtres {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* En mobile, la hauteur suit le contenu : le logo passe au-dessus du texte,
   plus rien n'est rogne. Les marges sont en %, pas en cqw (voir plus haut). */
@media (max-width: 767px) {
    .site-header .banniere-boutique {
        aspect-ratio: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 4% 4% 5%;
        --tt: calc(6.4cqw * 1.3);
        --ts: calc(3cqw * 1.3);
        --dlogo: calc(22cqw * 1.2);
    }

    .site-header .banniere-boutique .banniere-boutique__logo,
    .site-header .banniere-boutique .banniere-boutique__mots {
        position: relative;
        left: auto;
        right: auto;
        top: auto;
        transform: none;
    }

    .site-header .banniere-boutique .banniere-boutique__mots {
        margin-top: 1.5cqw;
    }
}