/* ============================================================================
banner-layout.css — Mise en page structurelle du format hero (Digily)
============================================================================
Fichier UNIQUE chargé à l'identique par tous les sites clients ET par le
panneau admin (aperçu en direct du formulaire bannière) : c'est la seule
source de vérité pour les dimensions et la structure du hero. Avant ce
fichier, ce CSS était recopié à la main dans le de chaque site,
jamais synchronisé avec l'aperçu admin — c'est ce qui provoquait le
débordement du hero sur les sites clients alors que l'aperçu admin
semblait correct. Ne recopie plus jamais ces règles ailleurs : modifie ce
fichier, et le changement s'applique partout d'un coup.
À charger UNE SEULE FOIS par site, dans le , après banner-gradients.css
(l'ordre exact entre les deux n'a pas d'importance : ils ne ciblent pas les
mêmes propriétés) :
Ce fichier ne gère QUE la structure (dimensions, flex, alignement) du
format hero — jamais les couleurs. Les dégradés de fond restent dans
banner-gradients.css (classe .banner-gradient-N posée par banner-loader.js
sur le même bloc racine .banner) ; les couleurs/polices personnalisées par
bannière (logo, texte, prix, bouton) restent posées en inline par
construireHTMLBanniere(). Le format standard (hors hero) n'est pas concerné
par ce fichier : sa mise en page reste posée en inline par
construireHTMLBanniere(), comme avant.
============================================================================ */
/* Bloc total : 300×400, coins arrondis, l'image et le contenu empilés
verticalement à l'intérieur. */
.banner-slot--hero .banner {
display: flex;
flex-direction: column;
width: 300px;
height: 400px;
max-width: 100%;
border-radius: 12px;
overflow: hidden;
text-decoration: none;
transition: box-shadow 0.3s ease;
}
/* Effet de survol : variable posée en inline par banner-loader.js
(--banner-hover-glow, propre à chaque bannière, repli doré par défaut). */
.banner-slot--hero .banner:hover {
box-shadow: 0 8px 32px rgba(212, 169, 106, 0.35); /* repli si color-mix() non supporté */
box-shadow: 0 8px 32px color-mix(in srgb, var(--banner-hover-glow, #d4af37) 45%, transparent);
}
/* Zone image : pleine largeur, hauteur fixe (~35% du total), coins arrondis
en haut uniquement (les coins bas restent carrés, contre la zone contenu).
object-fit: contain (pas cover) : l'image n'est jamais rognée, elle est
réduite si besoin pour tenir entière dans cette zone, quitte à laisser un
espace vide sur les côtés/en haut-bas selon son ratio d'origine. */
.banner-slot--hero .banner-image {
width: 100%;
height: 140px;
flex-shrink: 0;
object-fit: contain;
border-radius: 12px 12px 0 0;
}
/* Zone contenu : le reste de la hauteur. Le fond dégradé vient de la classe
.banner-gradient-N posée sur .banner (bloc racine) — cette zone n'a pas
besoin de son propre fond, elle est simplement la partie de .banner que
l'image ne recouvre pas. Tout est centré (logo, texte d'accompagnement,
phrase supplémentaire, puis la rangée prix+bouton), pour un rendu de type
mini-affiche, verticalement centré dans l'espace disponible. */
.banner-slot--hero .banner-hero-content {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
gap: 8px;
padding: 18px 20px;
}
/* Logo + texte d'accompagnement (+ phrase supplémentaire) : empilés,
centrés. */
.banner-slot--hero .banner-hero-content .banner-logo-texte {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 2px;
width: 100%;
min-width: 0;
}
/* Rangée prix + bouton : côte à côte (pas de justify-content: space-between
— contrairement au format standard, le bouton ne va pas se plaquer à
droite du cadre ; la rangée est centrée via align-items: center posé sur
.banner-hero-content, son parent). */
.banner-slot--hero .banner-hero-price-bouton {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
gap: 10px;
}
/* Mode "image complète" (bannière.typeBanniere === "image_complete") : le
visuel fourni par le client remplit toute la surface 300×400 du hero, sans
.banner-image ni .banner-hero-content par-dessus (voir
construireHTMLBanniereImageComplete dans shared/banner-loader.js). Le
parent .banner-slot--hero .banner reste le seul à fixer les dimensions/
coins arrondis/overflow : cette règle ne fait que remplir cet espace. */
.banner-slot--hero .banner-image-complete-visuel {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Sous 1300px, le hero chevauche le texte des sites clients : on le masque
entièrement (seuil validé, ne pas en inventer un autre). Ne s'applique
qu'aux sites clients : l'aperçu admin reste toujours visible pour
l'édition (voir admin/css/admin.css, .apercu-cadre-hero). */
@media (max-width: 1299px) {
.banner-slot--hero {
display: none;
}
}