/* ==========================================================
   Styles de la page d'accueil
   Extrait du bloc <style> inline de templates/home.html.
   Les jetons de couleur (:root) et l'utilitaire .reveal sont dans
   custom.css (chargé sur toutes les pages) : plusieurs pages
   dédiées (home, about...) les réutilisent désormais.
   ========================================================== */

/* Section "Nos catégories" : plus de fond, c'est la vidéo (.page-bg-video)
   qui apparaît derrière. Les cartes .card-category restent blanches
   (Bootstrap .card par défaut) et portent donc le texte des vignettes.
   Le titre repasse en foncé : il était blanc pour le fond vert, il serait
   illisible sur la vidéo éclaircie. */
.categories-section {
    background: transparent;
}
.categories-section .section-title {
    color: #0b2e14;
}

/* Sous-titres de section : le gris secondaire de Bootstrap (#6c757d) est
   calibré pour un fond clair et uni. Posé sur la vidéo il s'efface, donc
   on le fonce. !important parce que .text-muted en porte un.
   Vaut pour toutes les sections de l'accueil, plus seulement les catégories. */
.section-heading .text-muted {
    color: #495057 !important;
}

/* Section statistiques */
.stats-section {
    /* Fond retiré : la vidéo passe au travers. Les cartes .stat-box
       restent blanches, elles portent le contraste du texte. */
    background: transparent;
    position: relative;
    overflow: hidden;
}

.stats-section::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(40,167,69,0.03) 0%, transparent 70%);
    animation: rotate 30s linear infinite;
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.stat-box {
    padding: 26px 18px;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: var(--shadow-md);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.stat-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-green), var(--light-green));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s ease;
}

.stat-box:hover::before {
    transform: scaleX(1);
}

.stat-box:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-lg);
}

.stat-icon {
    font-size: 2.3rem;
    color: var(--light-green);
    opacity: 0.8;
    transition: var(--transition);
}

.stat-box:hover .stat-icon {
    transform: scale(1.1);
    opacity: 1;
}

.stat-box h2 {
    font-size: 2.3rem;
    font-weight: 700;
    color: var(--primary-green);
    margin: 10px 0;
}

.stat-label {
    margin: 0;
    color: #6c757d;
    font-weight: 500;
    font-size: 0.95rem;
}
/* ===========================
   RESPONSIVE STATS (MOBILE)
=========================== */
@media (max-width: 768px) {

    .stats-section {
        padding: 30px 10px;
    }

    /* Le @media imbriqué qui se trouvait ici a été fusionné : il
       répétait exactement la même condition que le bloc parent. */
    .stat-box {
        padding: 14px;
        margin-bottom: 20px;  /* espace vertical */
    }

    .stat-icon i {
        font-size: 22px;
    }

    .stat-box h2 {
        font-size: 1.5rem;
    }

    .stat-label {
        font-size: 0.85rem;
    }
}

/* ==== CATÉGORIES : même taille sur mobile et desktop ==== */
/* Espacement vertical entre cartes catégories sur mobile */
@media (max-width: 992px) { /* jusqu'à la taille lg */
    .card-category {
        margin-bottom: 20px; /* espace vertical */
    }
}

/* Le hover de .card-category est défini plus bas, en un seul endroit.
   La règle .card-category.hover-shadow:hover qui se trouvait ici
   faisait double emploi avec des valeurs légèrement différentes
   (8px vs 10px de flou), ce qui rendait le résultat imprévisible. */

.category-image-wrapper {
    width: 100%;
    height: 180px;
    overflow: hidden;
    background: #f8f9fa;
}

.category-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.no-image-placeholder {
    width: 100%;
    height: 100%;
    background: #f8f9fa;
}

.card-category {
    /* Même arrondi que les cartes de la section statistiques (.stat-box).
       overflow: hidden fait que l'image du haut suit ce même arrondi
       (elle n'avait pas de border-radius propre, d'où des coins carrés
       en haut alors que le bas de la carte était déjà arrondi). */
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.card-category:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
}

.card-category:hover .category-image {
    transform: scale(1.08);
}

/* Force la même hauteur pour toutes les cartes (même si texte long) */
@media (max-width: 767px) {
    .card-category {
        min-height: 260px; /* ajuste si besoin */
        /* Grille 2x2 sur mobile (home.html: col-6) : bordure visible pour
           bien séparer chaque carte, le gutter Bootstrap seul ne suffit
           pas à distinguer clairement les cartes l'une de l'autre. */
        border: 1px solid rgba(0,0,0,0.08) !important;
    }
}
@media (min-width: 768px) {
    .card-category {
        min-height: 280px; /* ajuste si besoin */
    }
}
/* Hero Carousel */
/* Hero Carousel : quasi plein écran sur desktop, resserré sur mobile
   (le override mobile plus bas reprend les valeurs précédentes) */
.hero-carousel-section {
    width: 100%;
    height: 88vh;
    min-height: 480px;
    max-height: 860px;
    overflow: hidden;
    position: relative;
    /* Aucun fond propre : c'est .page-bg-video, fixe derriere toute la
       page, qui fournit l'image de fond du hero comme des autres sections. */
    background: transparent;
}

/* Bootstrap pose `body { background-color: #fff }`. La règle de propagation
   CSS remonte normalement ce fond au canvas (le body lui-même devient alors
   transparent), mais on le neutralise explicitement : sans cela un fond blanc
   opaque sur le body recouvrirait la couche vidéo en z-index négatif.
   home.css n'étant chargé que sur l'accueil, les autres pages gardent le
   fond de Bootstrap. */
body {
    background-color: transparent;
}

/* ==========================================================
   FOND VIDEO GLOBAL
   Couche fixe derriere toute la page : la video reste immobile
   pendant le defilement et couvre toujours la fenetre entiere.
   z-index negatif : tout le contenu passe devant sans avoir a
   porter de fond opaque, ce qui laisse voir la video au travers
   des sections (le footer, lui, garde le sien).
   Le blanc sert de base a l'opacite 0.62 de la video : c'est lui
   qui eclaircit l'image et rend le texte fonce lisible partout.
   ========================================================== */
.page-bg-video {
    position: fixed;
    inset: 0;
    z-index: -1;
    background: #ffffff;
    pointer-events: none;
}

/* Voile clair par-dessus la video. Sans lui, les zones sombres du plan
   (tracteur, champ) passent sous le texte fonce des sections et le
   contraste tombe. Baisser la valeur rend la video plus presente,
   l'augmenter privilegie la lisibilite. */
.page-bg-video::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.3);
}

/* Vidéo de fond, fixe (remplace l'ancien carrousel Swiper piloté par
   l'admin) : un peu transparente pour laisser le texte respirer. */
.hero-bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.62;
    z-index: 0;
    pointer-events: none;
}

/* Aucune commande native par-dessus le fond. Sur iOS et sur les WebKit
   mobiles, une vidéo qui n'a pas encore démarré affiche un gros bouton
   « lecture » par-dessus le poster : c'est le triangle que l'on voyait
   uniquement en version téléphone. Comme la couche entière est en
   pointer-events: none, ce bouton ne pouvait même pas être actionné.
   On le supprime : la lecture est déclenchée par home.js, jamais à la
   main. */
.hero-bg-video::-webkit-media-controls,
.hero-bg-video::-webkit-media-controls-panel,
.hero-bg-video::-webkit-media-controls-overlay-play-button,
.hero-bg-video::-webkit-media-controls-start-playback-button {
    display: none !important;
    -webkit-appearance: none;
    appearance: none;
    opacity: 0;
}

/* ----------------------------------------------------------
   ÉCRANS PORTRAIT (téléphones, tablettes tenues verticalement)
   Le plan est cadré en 16:9. Étiré sur toute la hauteur d'un écran
   portrait, object-fit: cover en rogne près des trois quarts de la
   largeur : sur un 390x844 il ne reste qu'un gros plan de la roue du
   tracteur, la scène devient illisible.
   On limite donc la vidéo à une bande haute, où elle garde un cadrage
   lisible, et on prolonge le fond vers le bas par un aplat clair.
   Déclenché sur le RAPPORT et non sur la largeur : c'est le rapport qui
   provoque le rognage, et il touche aussi les tablettes en portrait.
   ---------------------------------------------------------- */
@media (max-aspect-ratio: 1/1) {
    /* La couche vidéo démarre SOUS le header et non au bord haut de la
       fenêtre. En `inset: 0` elle commençait derrière la barre de
       navigation, qui est blanche opaque et collée en haut : tout le haut
       du plan (le ciel, la ligne d'horizon) était mangé, et la bande
       visible commençait déjà au milieu de l'image.
       --header-h est mesuré par home.js (la hauteur dépend de la taille
       du logo et des polices une fois chargées) ; la valeur de repli sert
       le temps du premier rendu et si le JS échoue — 160px correspond au
       header téléphone mesuré (163px de 360 à 414px de large ; une valeur
       légèrement basse est préférable, elle rogne quelques pixels de ciel
       au lieu de laisser une bande blanche sous la barre).
       Le header étant en position: sticky top:0, il reste collé en haut
       pendant tout le défilement : ce décalage reste donc juste, la
       vidéo n'est jamais recouverte. */
    .page-bg-video {
        top: var(--header-h, 160px);
    }

    .hero-bg-video {
        bottom: auto;
        height: 48vh;
        min-height: 240px;
    }

    /* Prolonge la vidéo vers le bas. Le fondu commence bien avant la fin
       de la bande et s'étale : une transition courte laissait une ligne
       horizontale nette, le bas du plan n'étant pas d'une teinte uniforme.
       On tombe sur un gris clair verdâtre plutôt que sur la couleur du
       champ : les cartes blanches des sections y respirent mieux, et la
       page garde la même clarté qu'en version bureau.
       z-index: 1 pour passer au-dessus de la vidéo ET du voile, qui sont
       tous deux déjà composés en dessous. */
    .page-bg-video::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 1;
        /* Arrêts en vh et non en % : la couche ne fait plus toute la
           hauteur de la fenêtre depuis qu'elle démarre sous le header,
           donc un pourcentage ne tomberait plus au même endroit que la
           bande vidéo (48vh) et laisserait une coupure nette en travers
           de l'image. En vh, le fondu reste calé sur la bande. */
        background: linear-gradient(
            to bottom,
            rgba(238, 241, 236, 0) 28vh,
            rgba(238, 241, 236, 0.92) 42vh,
            #eef1ec 46vh
        );
    }
}

/* Formes décoratives organiques : purement décoratif, CSS only */
.hero-decor {
    position: absolute;
    z-index: 1;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(2px);
    opacity: 0.35;
}
.hero-decor-1 {
    top: -8%;
    right: -6%;
    width: 260px;
    height: 260px;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.35), transparent 70%);
}
.hero-decor-2 {
    bottom: 6%;
    left: -5%;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle at 30% 30%, rgba(255,107,53,0.3), transparent 70%);
}
@media (max-width: 768px) {
    .hero-decor { display: none; }
}

/* ===========================================================
   TEXTE PAR-DESSUS LE HERO
   Styles explicites : le projet est en Bootstrap 4, les classes
   utilitaires de Bootstrap 5 (text-start, ps-5, start-0, gap-2)
   n'existent pas dans static/css/bootstrap.css.
=========================================================== */

/* Dégradé clair : la vidéo est déjà à opacité réduite (voir
   .hero-bg-video), ce voile assure juste un contraste minimal pour
   le texte à gauche sans assombrir toute la section. */
.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0.55) 0%,
        rgba(255, 255, 255, 0.15) 45%,
        rgba(255, 255, 255, 0) 70%
    );
    pointer-events: none;
    z-index: 1;
}

.hero-caption {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 100%;
    max-width: 620px;
    padding: 0 5%;
    text-align: left;
    color: #14311b;
}

.hero-title {
    line-height: 1.3;
    margin-bottom: 1.5rem;
    text-shadow: 0 1px 6px rgba(255, 255, 255, 0.5);
}

/* "AgriShop.tn, Votre partenaire agricole." : même taille, même
   couleur, la partie la plus visible (vert très très foncé) */
.hero-brand-name {
    display: inline-block;
    font-size: clamp(2.2rem, 5vw, 3.6rem);
    font-weight: 800;
    color: #0b2e14;
}

/* Le reste de la phrase : petite taille */
.hero-title-rest {
    display: block;
    font-size: clamp(0.95rem, 1.6vw, 1.15rem);
    font-weight: 500;
    color: #14311b;
    margin-top: 0.5rem;
}

/* Entrée en fondu/translation de la légende au chargement */
.hero-caption .hero-title,
.hero-caption .hero-cta-group {
    animation: heroCaptionIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.hero-caption .hero-cta-group { animation-delay: 0.15s; }

@keyframes heroCaptionIn {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

.hero-cta-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
}

.hero-btn {
    padding: 0.75rem 2.5rem;
    font-weight: 600;
    border-radius: 50rem;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    transition: var(--transition);
}

.hero-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}

.hero-btn-primary {
    /* Même vert que le fond du footer (.site-footer) */
    background: #14311b;
    color: #fff;
    border: 2px solid #14311b;
}
.hero-btn-primary:hover { color: #fff; background: #0d2112; border-color: #0d2112; }

/* Mobile : hauteur et légende resserrées */
@media (max-width: 768px) {
    .hero-carousel-section {
        height: auto;
        min-height: 250px;  /* hauteur mobile */
        max-height: 50vh;   /* hauteur relative à l'écran */
    }
    .hero-caption {
        padding: 0 6%;
    }
    .hero-btn {
        padding: 0.55rem 1.75rem;
        font-size: 0.95rem;
    }
}

/* Respect des préférences système : pas d'animation imposée */
@media (prefers-reduced-motion: reduce) {
    .hero-btn,
    .hero-btn:hover {
        transition: none;
        transform: none;
    }
    .hero-caption .hero-title,
    .hero-caption .hero-cta-group {
        animation: none;
    }
}

.drop-shadow { text-shadow: 3px 3px 10px rgba(0,0,0,0.8); }

/* ==========================================================
   PARTENAIRES — carrousel fluide (défilement CSS continu)
   ========================================================== */
.partners-section {
    /* Fond retiré : la vidéo passe au travers. */
    background: transparent;
    padding: 4rem 0 4.5rem;
}

/* Ruban blanc : les logos partenaires sont fournis détourés sur blanc,
   ils se détachaient mal une fois la vidéo passée en fond de page. */
.partners-marquee {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 1.75rem 0;
    background: #ffffff;
}

/* Bords estompés — auparavant obtenus par un mask-image sur .partners-marquee.
   Le masque s'appliquait aussi à son fond : le blanc se serait délavé aux
   extrémités au lieu de former un ruban net. Deux dégradés vers le blanc
   posés PAR-DESSUS les logos donnent le même effet, fond plein en prime. */
.partners-marquee::before,
.partners-marquee::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 6%;
    z-index: 1;
    pointer-events: none;
}
.partners-marquee::before {
    left: 0;
    background: linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0));
}
.partners-marquee::after {
    right: 0;
    background: linear-gradient(to left, #ffffff, rgba(255, 255, 255, 0));
}

.partners-track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: partnersScroll 55s linear infinite;
}

/* Pause au survol : on laisse le temps de regarder un logo précis */
.partners-marquee:hover .partners-track {
    animation-play-state: paused;
}

.partners-track-item {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 2.75rem;
}

.partners-track-item .partner-logo {
    max-height: 70px;
    width: auto;
    object-fit: contain;
    transition: transform 0.35s ease;
}

.partners-track-item:hover .partner-logo {
    transform: scale(1.12);
}

.partners-track-item .partner-name {
    margin-top: 0.6rem;
    font-size: 0.82rem;
    font-weight: 500;
    color: #6c757d;
    white-space: nowrap;
}

@keyframes partnersScroll {
    from { transform: translateX(0); }
    /* La liste est dupliquée une fois dans le template : -50% ramène
       exactement au début visuel, la boucle est donc invisible. */
    to { transform: translateX(-50%); }
}

@media (max-width: 768px) {
    .partners-track-item { padding: 0 1.5rem; }
    .partners-track-item .partner-logo { max-height: 54px; }
}

@media (prefers-reduced-motion: reduce) {
    .partners-track {
        animation: none;
        transform: none;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
    }
    /* La copie dupliquée pour la boucle n'a plus lieu d'être sans animation */
    .partners-track-item[aria-hidden="true"] {
        display: none;
    }
    .partners-track-item .partner-logo,
    .partners-track-item:hover .partner-logo {
        transition: none;
        transform: none;
    }
}

/* Bloc @media supprimé : il redéfinissait .hero-carousel-section à
   height:70vh, ce qui écrasait le min-height/max-height défini plus
   haut, et stylait .carousel-caption qui n'est plus utilisé. */

.product-grid .col-lg-3 {
    margin-bottom: 2rem;
}

/* ==========================================================
   POURQUOI NOUS CHOISIR
   Même langage visuel que .stat-box (carte blanche, liseré vert au
   survol) mais fond clair de section, pour rompre l'enchaînement de
   deux sections vert foncé (stats + catégories) qui se suivaient.
   ========================================================== */
.why-us-section {
    /* Fond retiré : la vidéo passe au travers (cartes .why-us-card blanches). */
    background: transparent;
}

.why-us-card {
    height: 100%;
    padding: 28px 20px;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: var(--shadow-sm);
    text-align: center;
    transition: var(--transition);
}

.why-us-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
}

.why-us-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(40, 167, 69, 0.1);
    color: var(--primary-green);
    font-size: 1.6rem;
}

.why-us-card h5 {
    font-weight: 700;
    color: #14311b;
    margin-bottom: 0.6rem;
}

.why-us-card p {
    color: #6c757d;
    font-size: 0.9rem;
    line-height: 1.55;
    margin-bottom: 0;
}

@media (max-width: 576px) {
    .why-us-card {
        padding: 20px 14px;
    }
    .why-us-icon {
        width: 52px;
        height: 52px;
        font-size: 1.3rem;
    }
}

/* ==========================================================
   PROMOTIONS (page d'accueil)
   ========================================================== */
.promo-section {
    /* Fond rosé retiré : la vidéo passe au travers.
       Aucune bordure non plus : les sections de la page d'accueil se
       suivent d'un seul tenant. La zone promos est désormais délimitée
       par son carreau intérieur (.promo-panneau ci-dessous), pas par un
       liseré qui traverserait toute la largeur. */
    background: transparent;
}

/* ----------------------------------------------------------
   Le carreau des promotions
   ----------------------------------------------------------
   Même principe que .pousse-panneau de la section « coup de cœur » :
   un panneau clair, arrondi, avec un filet de couleur en tête, qui
   détache la zone de la vidéo de fond courant derrière toute la page.

   Seule la teinte change — rouge promo ici, or pour la sélection. Les
   deux zones commerciales se suivent : elles doivent se lire comme une
   paire, sans jamais se confondre l'une avec l'autre.

   Les valeurs (rayon, ombre, marges intérieures) sont volontairement
   identiques à celles du panneau doré, y compris sur téléphone : deux
   carreaux voisins qui n'auraient ni le même arrondi ni la même marge
   se verraient immédiatement.
   ---------------------------------------------------------- */
.promo-panneau {
    position: relative;
    padding: 2.75rem 2.25rem 2.5rem;
    border-radius: 26px;
    /* Blanc très légèrement rosé plutôt que blanc pur : posé à côté des
       cartes, elles aussi blanches, un fond neutre les aurait fait
       disparaître. */
    background:
        linear-gradient(180deg, rgba(255, 250, 250, 0.97) 0%, rgba(255, 255, 255, 0.95) 100%);
    border: 1px solid rgba(220, 53, 69, 0.18);
    box-shadow: 0 18px 44px rgba(11, 46, 20, 0.13);
    overflow: hidden;
}

/* Filet rouge en haut du panneau. Dégradé plutôt qu'aplat, pour qu'il
   s'efface sur les bords au lieu de couper net. */
.promo-panneau::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        rgba(220, 53, 69, 0) 0%,
        #f1707c 25%,
        #dc3545 50%,
        #f1707c 75%,
        rgba(220, 53, 69, 0) 100%);
}

@media (max-width: 575.98px) {
    .promo-panneau {
        padding: 1.75rem 0.9rem 1.5rem;
        border-radius: 20px;
    }
}

.promo-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #dc3545;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 5px 14px;
    border-radius: 20px;
    margin-bottom: 0.75rem;
}

.promo-title {
    color: #dc3545;
    font-weight: 700;
}

.promo-card {
    border-radius: 14px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.promo-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.12) !important;
}

/* Fond gris très clair derrière la photo : un emballage blanc ne se
   fond plus dans la carte (également blanche), le produit ressort. */
.promo-card-img-wrap {
    display: block;
    background: #f7f8f7;
}

/* Nom du produit sur 2 lignes maximum (au lieu d'une seule ligne
   tronquée) : les noms de produits agricoles sont souvent longs, les
   couper d'un coup masquait des infos utiles (dosage, format...). */
.promo-card-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 0.35rem !important; /* resserré : moins d'espace avant le prix */
}

.promo-discount-badge {
    background: #dc3545;
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    padding: 5px 10px;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(220,53,69,0.4);
}

/* ----------------------------------------------------------
   Pastille de réduction et compte à rebours
   ----------------------------------------------------------
   Les deux se posaient en haut de la carte, l'un à gauche et l'autre à
   droite. Sur téléphone, où les cartes passent à deux par ligne (~170 px
   de large), le compte à rebours — « 15j 23:45heures », quinze
   caractères — débordait sur la pastille de réduction : les deux se
   chevauchaient par-dessus la photo du produit.

   Le cadre de l'image sert désormais d'ancrage au compte à rebours (il
   est passé DANS le lien de la photo, voir le gabarit). Il peut donc
   descendre en bas de l'image sur téléphone, où la place manque, tout en
   restant en haut à droite sur grand écran, où elle ne manque pas.
   ---------------------------------------------------------- */
.promo-card-img-wrap {
    position: relative;
    display: block;
}

.promo-countdown {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    background: rgba(33, 37, 41, 0.92);
    color: #fff;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.78rem;
}

.promo-countdown-label {
    display: block;
    font-size: 0.68em;
    opacity: 0.75;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

@media (max-width: 767.98px) {
    /* Le compte à rebours devient un bandeau au pied de la photo : sur
       toute la largeur du cadre, il ne peut plus rencontrer la pastille
       de réduction restée en haut à gauche, quelle que soit la longueur
       du texte affiché par le minuteur. */
    .promo-countdown {
        top: auto;
        bottom: 8px;
        left: 8px;
        right: 8px;
        padding: 4px 6px;
        font-size: 0.66rem;
        border-radius: 6px;
    }

    /* « Fin dans » saute : le bandeau se lit tout seul à cette place, et
       la place gagnée profite au minuteur lui-même. */
    .promo-countdown-label {
        display: none;
    }

    /* La pastille de réduction se resserre au passage : à 1 rem de marge
       elle mangeait un coin entier de la photo. */
    .promo-card .promo-discount-badge {
        margin: 0.5rem !important;
        font-size: 0.72rem;
        padding: 3px 8px;
    }
}

/* Ancien prix barré en noir, nouveau prix en rouge (couleur promo),
   côte à côte sur une seule ligne (pas de retour à la ligne, même sur
   les cartes étroites en 2 par ligne mobile). */
.promo-price-row {
    display: flex;
    align-items: baseline;
    flex-wrap: nowrap;
    gap: 6px;
}
.promo-old-price {
    color: #000;
    text-decoration: line-through;
    font-size: 0.8rem;
    white-space: nowrap;
}
.promo-new-price {
    color: #dc3545;
    font-weight: 700;
    font-size: 1.05rem;
    white-space: nowrap;
}

/* Sur telephone, les cartes passent a deux par ligne : « 111,00 TND
   100,00 TND » sur une seule ligne ne tenait plus, et le nouveau prix
   se faisait couper par l'overflow:hidden de la carte — on lisait
   « 100,00 TN ». Les deux prix passent donc l'un au-dessus de l'autre,
   l'ancien d'abord, ce qui est aussi l'ordre de lecture naturel d'une
   remise. */
@media (max-width: 575.98px) {
    .promo-price-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }
    .promo-old-price {
        font-size: 0.75rem;
        line-height: 1.3;
    }
    .promo-new-price {
        font-size: 1rem;
        line-height: 1.3;
    }
}

/* Ligne d'actions sous le prix : voir détails + ajout rapide au panier,
   les deux à la même hauteur (align-items: stretch). */
.promo-card-actions {
    display: flex;
    align-items: stretch;
    gap: 8px;
}
.promo-card-btn-details {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 0.75rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.88rem;
}

/* Bouton d'ajout rapide au panier : icône à côté du bouton "Voir les
   détails" (même hauteur, coins assortis), pour ajouter le produit
   soldé sans quitter la section promo (ouvre la bulle flottante du
   panier, comme partout ailleurs sur le site). */
.btn-promo-quick-add {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    background-color: #fff;
    border: 1px solid #dc3545;
    color: #dc3545;
    border-radius: 8px;
    font-size: 1rem;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.btn-promo-quick-add:hover,
.btn-promo-quick-add:focus {
    background-color: #dc3545;
    color: #fff;
}
.btn-promo-quick-add:active {
    transform: scale(0.94);
}
.promo-quick-add-form {
    margin: 0;
    display: flex;
}

@media (prefers-reduced-motion: reduce) {
    .promo-card {
        transition: none;
    }
}

/* ==========================================================
   « ÇA POUSSE FORT EN CE MOMENT »
   Vitrine des produits cochés « coup de cœur » dans l'admin.
   Gabarit : templates/includes/coups_de_coeur.html
   ----------------------------------------------------------
   Parti pris : un panneau clair pose la sélection sur la vidéo de fond,
   et chaque carte porte une étoile dorée. L'or est choisi parce que les
   deux autres couleurs de la boutique sont déjà prises et signifient
   autre chose : le vert est la couleur de marque (prix, boutons), le
   rouge celle des promotions. Une distinction de plus devait donc
   arriver avec sa propre teinte, sans quoi « coup de cœur » se serait
   confondu avec « en promo ».
   ========================================================== */

.pousse-section {
    /* Transparent : c'est le panneau intérieur qui porte le fond. */
    background: transparent;
}

/* ---------- Le panneau ---------- */
.pousse-panneau {
    position: relative;
    padding: 2.75rem 2.25rem 2.5rem;
    border-radius: 26px;
    /* Blanc très légèrement chaud plutôt que blanc pur : posé à côté des
       cartes, elles aussi blanches, un fond neutre les aurait fait
       disparaître. La nuance crème les détache sans les assombrir. */
    background:
        linear-gradient(180deg, rgba(255, 253, 247, 0.97) 0%, rgba(255, 255, 255, 0.95) 100%);
    border: 1px solid rgba(212, 160, 23, 0.22);
    box-shadow: 0 18px 44px rgba(11, 46, 20, 0.13);
    overflow: hidden;
}

/* Filet doré en haut du panneau : la seule ligne de la section, et elle
   ne sépare rien — elle couronne la vitrine. Dégradé plutôt qu'aplat,
   pour qu'elle s'efface sur les bords au lieu de couper net. */
.pousse-panneau::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        rgba(212, 160, 23, 0) 0%,
        var(--favori-or-clair) 25%,
        var(--favori-or) 50%,
        var(--favori-or-clair) 75%,
        rgba(212, 160, 23, 0) 100%);
}

/* ---------- En-tête ---------- */
.pousse-heading {
    margin-bottom: 2.25rem;
}

.pousse-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: linear-gradient(135deg, var(--favori-or-clair), var(--favori-or));
    color: #4a3600;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 5px 15px;
    border-radius: 20px;
    margin-bottom: 0.85rem;
    box-shadow: 0 3px 10px rgba(212, 160, 23, 0.3);
}

.pousse-title {
    color: #0b2e14;
    margin-bottom: 0.5rem;
}

.pousse-subtitle {
    /* Le panneau lui donne enfin un fond uni : le gris peut rester léger
       sans devenir illisible, contrairement au texte posé sur la vidéo. */
    color: #6b7a6e;
    margin-bottom: 0;
}

/* ---------- La grille ---------- */
/* Quatre par rangée : les 8 produits maximum tiennent en deux rangées
   pleines, sans ligne bancale à un seul élément. */
.pousse-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    align-items: stretch;
}

/* Les paliers suivent ceux des grilles produits du site (.products-grid
   dans product-card.css) ; cette feuille etant chargee apres, c'est elle
   qui fixe le nombre de colonnes ici. product-card.css continue de porter
   tout le reste : etirement des cartes, hauteur egale par rangee,
   boutons alignes en bas. */
@media (max-width: 1199.98px) {
    .pousse-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 767.98px) {
    .pousse-grid { grid-template-columns: repeat(2, 1fr); gap: 0.85rem; }
}


/* ==========================================================
   « ÇA POUSSE FORT » SUR TÉLÉPHONE
   ----------------------------------------------------------
   Deux produits par ligne au lieu d'un seul.

   Une carte pleine largeur obligeait à faire défiler un produit à la
   fois : on n'en voyait jamais deux ensemble, il n'y avait rien à
   comparer, et il fallait dérouler huit écrans pour parcourir la
   sélection.

   Passer à deux colonnes divise la largeur disponible par deux. La
   carte étant dessinée pour un tiers d'écran d'ordinateur, tout ce qui
   est calibré en dur doit être resserré, sinon le texte se tronque et
   les boutons débordent : photo de 220 px, marges de 18 px, libellés en
   1,25 rem.

   Ces réglages sont volontairement limités à .pousse-grid. La boutique,
   les pages catégorie, les résultats de recherche et les produits
   similaires gardent exactement leur affichage actuel — la même carte y
   est utilisée, mais dans des grilles qui n'ont pas la même contrainte.
   ========================================================== */

@media (max-width: 575.98px) {

    /* Le panneau se resserre : à 2,25 rem de marge intérieure il ne
       restait plus assez de largeur pour deux cartes lisibles. Il garde
       de quoi respirer sur les côtés, et le conteneur ajoute ses 10 px :
       les cartes ne touchent plus les bords de l'écran. */
    .pousse-panneau {
        padding: 1.75rem 0.9rem 1.5rem;
        border-radius: 20px;
    }

    /* Respiration verticale franche entre les rangées, plus serrée entre
       les deux colonnes : c'est ce qui sépare visuellement les rangées
       sans voler de la largeur au contenu des cartes. */
    .pousse-grid {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 0.7rem;
        row-gap: 1.4rem;
    }

    /* 220 px de photo sur une demi-largeur d'écran : l'image occupait
       tout le premier écran de la carte, le nom du produit passait sous
       la ligne de flottaison. */
    .pousse-grid .card-product-grid .img-wrap {
        height: 132px;
    }

    /* 18 px de marge de chaque côté sur une carte de ~160 px, il ne
       restait que la moitié pour le texte. */
    .pousse-grid .card-product-grid .info-wrap {
        padding: 10px 10px 12px;
    }

    /* Le plancher de 80 px réservait une zone vide sous les noms courts. */
    .pousse-grid .card-product-grid .fix-height {
        min-height: 0;
    }

    .pousse-grid .card-product-grid .title {
        font-size: 0.82rem;
        line-height: 1.3;
        /* Deux lignes au maximum : au-delà, les deux cartes d'une même
           rangée n'ont plus la même hauteur de texte et leurs boutons se
           décalent l'un par rapport à l'autre. */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* !important : le prix porte la classe utilitaire Bootstrap .fs-5,
       qui est elle-même en !important. */
    .pousse-grid .price {
        font-size: 0.95rem !important;
    }
    .pousse-grid del {
        font-size: 0.72rem;
    }

    /* Fourchette de prix des produits à plusieurs conditionnements.
       « à partir de 10,83 TND → 157,32 TND » ne tient pas sur 140 px et
       se coupait en trois lignes. Le prix d'entrée est ce que le
       visiteur cherche à ce stade ; le maximum reste visible sur la
       fiche produit, à un clic. */
    .pousse-grid .price-range-badge {
        font-size: 9px;
        padding: 2px 7px;
        gap: 3px;
    }
    .pousse-grid .price-range-from-label {
        font-size: 10px;
    }
    .pousse-grid .price-range-min {
        font-size: 0.95rem;
    }
    .pousse-grid .price-range-sep,
    .pousse-grid .price-range-max {
        display: none;
    }

    /* Actions : bouton et ajout rapide restent côte à côte, resserrés.
       42 px de haut : c'est le plancher confortable au doigt. Les
       recommandations Apple (44 pt) et Material (48 dp) ne sont pas
       tenables sur une carte de 160 px sans faire sauter le bouton à la
       ligne, 42 px est le compromis le plus proche. */
    .pousse-grid .product-actions {
        gap: 5px;
    }
    .pousse-grid .btn-view-details {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 42px;
        padding: 6px 4px;
        font-size: 0.72rem;
        line-height: 1.2;
    }
    .pousse-grid .btn-quick-add {
        width: 42px;
        min-height: 42px;
    }

    /* Médaillon proportionné à la carte. */
    .pousse-grid .jr-favori {
        width: 27px;
        height: 27px;
        font-size: 0.68rem;
        top: 8px;
        right: 8px;
    }
    .pousse-grid .img-wrap-out-of-stock ~ .jr-favori {
        top: 40px;
    }

    /* Badges d'angle proportionnés à la carte. Le « Hors stock » est
       posé en style en ligne dans le gabarit partagé, d'où le
       !important : c'est le seul moyen de le reprendre sans toucher à
       la carte utilisée par les autres pages. */
    .pousse-grid .badge {
        font-size: 0.62rem;
    }
    .pousse-grid .badge-out-of-stock {
        font-size: 0.6rem !important;
        padding: 3px 6px !important;
    }

    /* En-tête de section : le titre tombait sur trois lignes. */
    .pousse-eyebrow {
        font-size: 0.68rem;
        padding: 4px 12px;
    }
    .pousse-title {
        font-size: 1.35rem;
    }
    .pousse-subtitle {
        font-size: 0.85rem;
    }
    .pousse-heading {
        margin-bottom: 1.6rem;
    }
}

/* Bouton vers la page qui liste toute la sélection. Il n'apparaît que
   s'il reste des produits au-delà des huit affichés (voir le {% if %} du
   gabarit) : autrement il mènerait à une page identique à ce qu'on vient
   de lire. */
.pousse-plus {
    text-align: center;
    margin-top: 2.25rem;
}

.pousse-btn-tout {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, var(--favori-or-clair, #f5c542), var(--favori-or, #d4a017));
    color: #4a3600;
    font-weight: 700;
    font-size: 0.95rem;
    padding: 12px 26px;
    border-radius: 999px;
    text-decoration: none;
    box-shadow: 0 6px 16px rgba(212, 160, 23, 0.32);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pousse-btn-tout:hover,
.pousse-btn-tout:focus {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(212, 160, 23, 0.42);
    color: #3a2a00;
    text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
    .pousse-btn-tout { transition: none; }
    .pousse-btn-tout:hover { transform: none; }
}

@media (max-width: 575.98px) {
    .pousse-plus { margin-top: 1.6rem; }
    .pousse-btn-tout {
        font-size: 0.85rem;
        padding: 11px 20px;
        /* Cible confortable au doigt, comme les boutons des cartes. */
        min-height: 44px;
    }
}