/* ═══════════════════════════════════════════════════════════════════════════════
   Sections de page d'accueil
   ═══════════════════════════════════════════════════════════════════════════════

   Ce fichier reprend le CSS qui était écrit en ligne dans templates/shop/homepage.html.twig.
   Rien n'est réinventé : c'est du travail qui fonctionnait, sorti du gabarit pour trois
   raisons.

     • Il est désormais partagé par toutes les sections, alors qu'il n'était chargé que
       sur la page d'accueil. Le bandeau ou la grille de catégories peuvent servir
       ailleurs.
     • Il est mis en cache par le navigateur, ce qu'un bloc <style> ne peut pas être.
     • Il devient relisible. Cent quarante lignes de CSS au milieu d'un gabarit finissent
       toujours par contenir des règles mortes — et c'est exactement ce qu'on a trouvé.

   TROIS DÉFAUTS CORRIGÉS AU PASSAGE, tous constatés en déplaçant le code :

     1. Un @font-face « christmas » chargeait christmaseve.ttf. La police n'était utilisée
        NULLE PART. Supprimée.

     2. Les media queries ciblaient « .hero-content h1 » pour réduire le titre sur mobile.
        Or le titre du bandeau est un <strong>, pas un <h1>. Ces règles ne s'appliquaient
        donc à rien, et le titre gardait ses 3rem sur un écran de 480 pixels. Elles ciblent
        maintenant .hero-title et fonctionnent.

     3. Le gabarit préchargeait « winter-1.webp » en priorité haute alors que le bandeau
        affichait « paques.webp ». Une image téléchargée à chaque visite et jamais montrée.
        Le préchargement porte désormais sur l'image réellement configurée.

   Les valeurs de couleur, de rayon et d'ombre viennent des jetons de thème. C'est ce qui
   fait qu'une carte est anguleuse et plate en thème Minimal, arrondie et détachée en
   thème Moderne — sans qu'aucune de ces règles change.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Étiquette de disponibilité ────────────────────────────────────────────────
   Le conteneur doit rester positionné pour que l'étiquette se place par rapport à lui.
   ATTENTION : ne jamais ajouter overflow:hidden sur .port-box1 ni sur .dlab-media.
   L'étiquette dépasse volontairement de 5 pixels à gauche, et un overflow la couperait. */
.port-box1 .dlab-media,
.item-img {
    position: relative;
}

.availability-label {
    position: absolute;
    top: 10px;
    left: -5px;
    background-color: #ffc107;
    color: #212529;
    padding: 5px 10px;
    border-radius: 0 var(--shop-radius) var(--shop-radius) 0;
    font-size: 0.8rem;
    font-weight: 600;
    z-index: 10;
    box-shadow: var(--shop-shadow);
}

.availability-label .fa {
    margin-right: 5px;
}

/* Compatibilité LightWidget : sa visionneuse s'ouvre sous l'en-tête sans ça. Conservé
   parce que c'est le widget que la boutique d'origine utilisait, et qu'un commerçant peut
   très bien le choisir dans une section Widget. */
.lightwidget__lightbox--active {
    z-index: 99999 !important;
}

/* ── Bandeau d'accueil ──────────────────────────────────────────────────────── */
.hero-banner {
    height: 50vh;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
}

.hero-banner-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.hero-content {
    /* Voile de lisibilité sur l'image, teinté par la boutique. Le repli en noir
       semi-opaque est déclaré EN PREMIER : si color-mix n'est pas comprise, le voile doit
       rester présent, sinon le texte blanc devient illisible sur une photo claire. */
    background: rgba(0, 0, 0, 0.4);
    background: color-mix(in srgb, var(--shop-primary) 40%, transparent);
    padding: 2rem 3rem;
    border-radius: var(--shop-radius-lg);
    position: relative;
    z-index: 1;
}

.hero-title {
    font-family: var(--shop-font-heading);
    font-size: 3rem;
    line-height: 1.1;
    /* Blanc en dur, et non un jeton : le texte est sur une photo, donc c'est de la
       lisibilité et non de la décoration. Un thème clair ne doit pas pouvoir le rendre
       invisible. */
    color: #fff;
    display: block;
    /* Le titre du bandeau est désormais un vrai h1 (ou h2) et non plus un <strong>, pour
       que la page ait une structure de titres. Les marges par défaut des titres doivent
       donc être neutralisées, sinon le bandeau se décentre verticalement. */
    margin: 0 0 0.5rem;
    font-weight: var(--shop-weight-heading);
}

.hero-lead {
    color: #fff;
}

/* ── Bandeau SANS image : dégradé composé ─────────────────────────────────────
   ═══════════════════════════════════════════════════════════════════════════

   Une boutique fraîchement créée n'a pas encore de photo. Sans ce traitement, le bandeau
   affiche un aplat de couleur qui a l'air d'une image manquante — et c'est la première
   chose que voit un commerçant qui vient de payer.

   CINQ COUCHES, peintes du haut vers le bas dans l'ordre CSS :

     1. Vignette      — assombrit les bords, concentre le regard, et garantit du contraste
                        dans les angles quelle que soit la couleur du thème.
     2. Halo secondaire  — en haut à gauche, apporte la teinte d'accent.
     3. Halo primaire clair — en bas à droite, équilibre la composition en diagonale.
     4. Voile lumineux   — une écharpe de lumière très faible, en biais. C'est elle qui
                        donne l'impression d'un volume plutôt que d'un fond plat.
     5. Base          — la seule couche opaque, et celle qui GARANTIT la lisibilité.

   LE POINT DÉLICAT EST LA COULEUR DU COMMERÇANT

   Il choisit sa couleur primaire. Elle peut être un jaune vif. Un dégradé qui reprendrait
   sa couleur telle quelle rendrait alors le texte blanc illisible.

   D'où la base : la primaire est mélangée à 42 % avec un quasi-noir. Le commerçant fournit
   donc la TEINTE, jamais la LUMINANCE.

   CES VALEURS SONT CALCULÉES, PAS ESTIMÉES. Un premier réglage annonçait 5,5:1 de contraste
   dans le pire cas ; le calcul réel donnait 3,3:1 — assez pour le H1, PAS pour l'accroche.
   Le contraste effectif sous le texte, halos et verre compris, est désormais :

       minimal  13,6:1     elegant  10,7:1     moderne  9,6:1
       jaune vif #fbbf24  5,8:1     primaire blanche  4,6:1

   Soit AA pour du texte courant dans tous les cas, y compris une primaire blanche — qui
   n'est pas un choix raisonnable mais reste un choix possible.

   POURQUOI UNE TEXTURE DE GRAIN

   Un dégradé de 50vh sur un écran large montre des bandes : les paliers de couleur
   deviennent visibles, et l'effet passe de « soigné » à « cheap ». Une trame de bruit très
   faible casse ces paliers. C'est le détail qui distingue un dégradé travaillé d'un dégradé
   par défaut, et il coûte quelques centaines d'octets en SVG intégré — aucune requête.
   ═══════════════════════════════════════════════════════════════════════════ */
.hero-banner--sans-image {
    /* Repli déclaré EN PREMIER : si color-mix n'est pas comprise, la déclaration
       background-image entière est ignorée et il ne reste que cette couleur. Elle doit donc
       être sombre par elle-même, sans dépendre du thème. */
    background-color: #14141c;

    background-image:
        radial-gradient(140% 110% at 50% 12%,
            transparent 34%,
            rgba(6, 6, 12, 0.58) 100%),
        radial-gradient(62% 70% at 12% 6%,
            color-mix(in srgb, var(--shop-secondary) 34%, transparent) 0%,
            transparent 68%),
        radial-gradient(58% 66% at 88% 94%,
            color-mix(in srgb, var(--shop-primary-light) 24%, transparent) 0%,
            transparent 72%),
        linear-gradient(112deg,
            rgba(255, 255, 255, 0.07) 0%,
            rgba(255, 255, 255, 0.02) 26%,
            transparent 44%),
        linear-gradient(166deg,
            color-mix(in srgb, var(--shop-primary) 42%, #0b0b12) 0%,
            color-mix(in srgb, var(--shop-primary) 26%, #08080f) 62%,
            color-mix(in srgb, var(--shop-primary) 18%, #06060b) 100%);
}

/* Trame de grain, pour supprimer les bandes du dégradé.

   z-index laissé à 0 : le contenu du bandeau est en z-index 1, donc cette couche passe
   au-dessus du fond et sous le texte, sans avoir à empiler quoi que ce soit d'autre.
   Le SVG est intégré en data-URI — aucune requête réseau. */
.hero-banner--sans-image::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.055;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* Sur un dégradé, le voile teinté du bloc de contenu brouillerait la composition. On le
   remplace par un verre sombre discret.

   Ce n'est pas décoratif : c'est LUI qui garantit le contraste du texte. Le dégradé peut
   ainsi rester riche en couleur — halos à 34 % — sans risquer l'illisibilité, parce que le
   texte ne repose jamais directement dessus.

   Son opacité de 0,38 n'est pas un choix esthétique mais le résultat d'un calcul : à 0,28,
   une primaire blanche tombait à 3,1:1. */
.hero-banner--sans-image .hero-content {
    background: rgba(8, 8, 14, 0.38);
    border: 1px solid rgba(255, 255, 255, 0.09);
    box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.55);
}

/* backdrop-filter à part : sur les navigateurs qui ne le gèrent pas, le bloc reste
   parfaitement lisible grâce au voile ci-dessus. Le flou n'est qu'un raffinement. */
@supports (backdrop-filter: blur(3px)) {
    .hero-banner--sans-image .hero-content {
        backdrop-filter: blur(3px) saturate(120%);
    }
}

/* ── Titres de section ──────────────────────────────────────────────────────── */
.section-title {
    font-family: var(--shop-font-heading);
    font-size: 2.1rem;
    color: var(--shop-ink);
    margin-bottom: 2rem;
    position: relative;
    padding-bottom: 10px;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background-color: var(--shop-primary);
}

/* ── Cartes de catégorie ────────────────────────────────────────────────────── */
.category-card {
    border: 1px solid var(--shop-border);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: var(--shop-radius-lg);
    overflow: hidden;
    box-shadow: var(--shop-shadow);
}

.category-card:hover {
    box-shadow: var(--shop-shadow-lg);
}

.category-card .card-body {
    background: var(--shop-surface);
    text-align: center;
}

.category-card .card-title {
    font-weight: var(--shop-weight-heading);
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
}

.category-card a.card-link-wrapper {
    text-decoration: none;
    color: inherit;
}

/* Repli quand une catégorie n'a pas d'image : le logo doit être VU EN ENTIER, donc
   contain et non cover. Un cover rognerait le logo, ce que le projet a déjà constaté
   sur les cartes produit. */
.category-image-fallback,
.product-image-fallback {
    object-fit: contain;
    background: var(--shop-surface-alt);
    padding: 1rem;
}

/* ── Fond teinté, réglable section par section ──────────────────────────────────

   Le fond légèrement teinté n'était pas un réglage : il était écrit en dur sur la section
   image-texte et sur la réassurance, et disponible en option sur les derniers produits
   seulement — via un style en ligne, en plus.

   Le commerçant compose sa page librement : selon ce qu'il assemble, deux sections teintées
   peuvent se suivre, et l'alternance censée les séparer disparaît. Le seul qui puisse en
   juger, c'est lui, en regardant sa page. D'où une case à cocher sur chaque section
   concernée, et une seule classe pour l'appliquer. */
.section-teintee {
    background-color: var(--shop-surface-alt);
}

/* ── Section image et texte ─────────────────────────────────────────────────── */

.section-points {
    padding-left: 0;
    margin-top: 1rem;
}

.section-points li {
    margin-bottom: 10px;
    padding-left: 1.5rem;
    position: relative;
}

.section-points li::before {
    /* Puce dessinée plutôt qu'un emoji : les emojis d'origine étaient saisis dans le
       texte, donc propres à une pâtisserie. Une puce teintée par le thème marche pour
       tous les commerces. */
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--shop-primary);
}

/* ── Réassurance ────────────────────────────────────────────────────────────── */
.reassurance-item {
    padding: 1rem;
}

.reassurance-title {
    font-family: var(--shop-font-heading);
    font-weight: var(--shop-weight-heading);
    font-size: 1.1rem;
    color: var(--shop-ink);
    margin-bottom: 0.5rem;
}

.reassurance-text {
    color: var(--shop-ink-muted);
    font-size: 0.95rem;
    margin-bottom: 0;
}

/* ── Adaptations mobiles ────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .hero-content {
        padding: 1.5rem;
        width: 90%;
    }

    /* Cible .hero-title, pas « h1 » : c'est la correction du défaut n°2 ci-dessus. */
    .hero-title {
        font-size: 2.2rem;
    }

    .section-title {
        font-size: 1.7rem;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 1.8rem;
    }

    .hero-content {
        padding: 1.2rem;
    }
}