/* ==========================================================================
   MPP-258 — Le bloc de saison

   Feuille SÉPARÉE de bdaccueil.css, et c'est délibéré : la refonte d'accueil
   (MPP-100) est derrière le réglage BDSEO_REFONTE_ACCUEIL, qui est à NON en
   production comme sur le staging. Le bloc de saison n'a aucune raison de
   dépendre d'une refonte éteinte : il porte donc son propre style.

   PARTI PRIS. La boutique est en kraft et en papier : blanc cassé, brun très
   foncé, un titre en Lato capitales espacées, des boutons en pilule vert
   sauge. Le bloc parle cette langue plutôt que d'en inventer une. Ce qui
   change d'une saison à l'autre, c'est UNE couleur d'accent, posée par PHP
   dans `--bd-saison-accent` : citrouille mûre pour Halloween, sapin pour
   l'Avent, kraft pour le reste de l'année. Tout le reste est commun.

   Les valeurs sont écrites en dur et non reprises de `--bd-*` : ces variables
   viennent de bdaccueil.css, qui n'est pas servie tant que la refonte est
   éteinte. Un bloc sans couleurs serait pire qu'un bloc sans variables.
   ========================================================================== */
.bd-saison {
    /* PLEINE LARGEUR. Le bloc est inséré dans les conteneurs Elementor du
       thème, qui plafonnent autour de 1 314 px : le bandeau ressortait comme
       une boîte posée au milieu de la page. On le fait sortir de son parent
       par la marge négative classique, pour qu'il aille d'un bord à l'autre.
       `100vw` inclut la barre de défilement : c'est mesuré à chaque largeur
       pour vérifier qu'aucune barre horizontale n'apparaît. */
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    /* Le parent Elementor est un conteneur flex : sans `flex-shrink: 0` il
       rétrécit la section à sa propre largeur et le `100vw` ne sert à rien.
       C'est ce qui laissait le bandeau à 1 310 px dans un écran de 1 920. */
    flex-shrink: 0;
    align-self: stretch;
    box-sizing: border-box;
    --bd-saison-accent: #9d7f5f;
    --bd-saison-encre: #32241b;
    --bd-saison-encre-douce: #53412f;
    --bd-saison-papier: #fbf7f2;
    --bd-saison-trait: #ece4d9;

    /* Un bandeau pleine largeur : le bloc devient un chapitre de la page, et
       non une grille posée dans le blanc. */
    background: var(--bd-saison-papier);
    border-top: 1px solid var(--bd-saison-trait);
    border-bottom: 1px solid var(--bd-saison-trait);
    padding: 54px 0 58px;
    /* `margin-bottom` et NON le raccourci `margin` : le raccourci, placé après
       les marges latérales négatives de la pleine largeur, les remettait à
       zéro — et le bandeau restait sagement dans son conteneur. */
    margin-bottom: 8px;
}

.bd-saison-dedans {
    /* La même largeur utile que le reste de la page (le conteneur du thème
       plafonne à ~1400 px) : à 1200, six vignettes devenaient des timbres.
       Le `min()` n'est pas décoratif : sans lui, la piste — dont la largeur
       intrinsèque est celle de ses dix vignettes — faisait gonfler ses parents
       Elementor, et la section mesurait 872 px dans un écran de 390. Le
       débordement ne se voyait pas, l'`overflow-x: hidden` du thème le
       rognait ; le contenu était simplement coupé. */
    max-width: min(1400px, 100%);
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

/* Le surtitre porte l'échéance : il dit jusqu'à quand la sélection tient. */
.bd-saison-surtitre {
    margin: 0 0 .55rem;
    text-align: center;
    font-size: .72rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--bd-saison-accent);
}

.bd-saison-titre {
    margin: 0;
    text-align: center;
    font-family: Lato, Helvetica, Arial, sans-serif;
    font-size: 1.65rem;
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: uppercase;
    line-height: 1.25;
    color: var(--bd-saison-encre);
}

/* Le filet reprend celui que le thème pose sous ses propres titres, dans la
   couleur de la saison. */
.bd-saison-filet {
    display: block;
    width: 54px;
    height: 2px;
    margin: 1rem auto 1.25rem;
    background: var(--bd-saison-accent);
}

.bd-saison-chapo {
    margin: 0 0 2.2rem;
    text-align: center;
}

/* Le lien vers l'article prend la forme des boutons de la boutique : pilule,
   mais en contour, pour rester second par rapport à « Ajouter au panier ». */
.bd-saison-guide {
    display: inline-block;
    padding: .5rem 1.35rem;
    border: 1px solid var(--bd-saison-accent);
    border-radius: 50px;
    font-size: .82rem;
    letter-spacing: .04em;
    color: var(--bd-saison-accent);
    text-decoration: none;
    transition: background-color .18s ease, color .18s ease;
}

.bd-saison-guide::before { content: '\201C'; margin-right: .15rem; }
.bd-saison-guide::after  { content: '\201D  \2192'; white-space: pre; }

.bd-saison-guide:hover,
.bd-saison-guide:focus-visible {
    background: var(--bd-saison-accent);
    color: #fff;
}

/* UNE PISTE DÉFILANTE, RÉGLÉE SUR SIX VISIBLES.

   Comme « Les top ventes », mais qui en montre six au lieu de quatre sur un
   portable. Rien n'est retiré de la sélection : ce qui dépasse se fait
   défiler, il n'y a donc aucune raison de couper l'auteur.

   Défilement NATIF plutôt qu'un carrousel en JavaScript : la piste marche déjà
   au doigt, au pavé tactile et au clavier même si le script des flèches ne
   part pas. Les flèches n'ajoutent que l'affordance qui manque à la souris.

   La largeur d'une vignette est calculée pour qu'il en tienne exactement six :
   la sixième ne doit pas être coupée au bord — c'est ce qui distingue « on en
   voit six » de « on en voit cinq et un bout ». */
.bd-saison-cadre {
    position: relative;
    /* `min-width: 0` sur toute la chaîne : c'est ce qui autorise un conteneur
       à défilement à être plus étroit que son contenu. Sans lui, la piste
       impose sa largeur intrinsèque à ses ancêtres. */
    min-width: 0;
    max-width: 100%;
}

.bd-saison-piste {
    display: flex;
    min-width: 0;
    max-width: 100%;
    gap: 18px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-left: 0;
    /* La barre reste utilisable au clavier et au doigt, mais on la retire de
       l'image : le thème n'en montre nulle part ailleurs. */
    scrollbar-width: none;
    -ms-overflow-style: none;

    /* ⚠️ `overflow-x: auto` rend AUSSI l'axe vertical défilant : tout ce qui
       dépasse en haut ou en bas de la piste est rogné. La carte se soulève de
       3 px au survol — et sur tactile la première tape déclenche ce même
       survol — donc son bord haut passait sous la piste et disparaissait, avec
       son ombre. On réserve la place, puis on la reprend en marge négative
       pour ne pas décaler la mise en page. */
    padding-top: 8px;
    padding-bottom: 30px;
    margin-top: -8px;
    margin-bottom: -24px;
}

.bd-saison-piste::-webkit-scrollbar { display: none; }

.bd-saison-piste:focus-visible {
    outline: 2px solid var(--bd-saison-accent);
    outline-offset: 4px;
}

.bd-saison-carte {
    flex: 0 0 calc((100% - 5 * 18px) / 6);
    min-width: 0;
    scroll-snap-align: start;
}

/* Les flèches reprennent le rond des carrousels du thème, dans la couleur de
   la saison. Elles disparaissent quand tout tient déjà à l'écran. */
.bd-saison-fleche {
    position: absolute;
    top: calc(50% - 2.2rem);
    z-index: 2;
    width: 38px;
    height: 38px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--bd-saison-trait);
    border-radius: 50%;
    background: #fff;
    color: var(--bd-saison-encre);
    box-shadow: 0 2px 10px rgba(50, 36, 27, .10);
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease, opacity .18s ease;
}

.bd-saison-fleche svg { width: 18px; height: 18px; }
.bd-saison-avant { left: -19px; }
.bd-saison-apres { right: -19px; }

.bd-saison-fleche:hover:not(:disabled) {
    background: var(--bd-saison-accent);
    border-color: var(--bd-saison-accent);
    color: #fff;
}

.bd-saison-fleche:disabled { opacity: .3; cursor: default; }
.bd-saison-fige .bd-saison-fleche { display: none; }

.bd-saison-lien {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid var(--bd-saison-trait);
    border-radius: 10px;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.bd-saison-lien:hover,
.bd-saison-lien:focus-visible {
    transform: translateY(-3px);
    border-color: var(--bd-saison-accent);
    box-shadow: 0 10px 22px rgba(50, 36, 27, .10);
}

/* L'image va d'un bord à l'autre de la carte : c'est le seul endroit où on
   gagne de la surface sans allonger la carte. Mesuré face à Apfelkiste, nos
   vignettes mobiles étaient les plus petites (131 x 121 px contre 163 x 163). */
.bd-saison-image {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background: #f4efe9;
    transition: transform .35s ease;
}

.bd-saison-lien:hover .bd-saison-image { transform: scale(1.04); }

.bd-saison-nom {
    padding: .7rem .7rem .2rem;
    font-size: .84rem;
    line-height: 1.35;
    color: var(--bd-saison-encre-douce);
    /* Deux lignes au plus : sans cette borne, un nom long décale la rangée
       entière et casse l'alignement des prix. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bd-saison-prix {
    margin-top: auto;
    padding: .3rem .7rem .85rem;
    font-weight: 700;
    color: var(--bd-saison-encre);
}

@media (prefers-reduced-motion: reduce) {
    .bd-saison-lien,
    .bd-saison-image { transition: none; }
    .bd-saison-lien:hover { transform: none; }
    .bd-saison-lien:hover .bd-saison-image { transform: none; }
}

@media (max-width: 1199px) {
    .bd-saison-piste { gap: 12px; }
    .bd-saison-carte { flex-basis: calc((100% - 5 * 12px) / 6); }
    .bd-saison-nom { font-size: .8rem; }
}

/* Sous 992 px, six de front donneraient des timbres. On en montre trois, puis
   deux : la piste défile toujours, on voit simplement moins de vignettes à la
   fois — exactement ce que font les carrousels du thème. */
@media (max-width: 991px) {
    .bd-saison { padding: 40px 0 44px; }
    .bd-saison-piste { gap: 16px; }
    .bd-saison-carte { flex-basis: calc((100% - 2 * 16px) / 3); }
    .bd-saison-nom { font-size: .84rem; }
    .bd-saison-avant { left: -6px; }
    .bd-saison-apres { right: -6px; }
}

@media (max-width: 575px) {
    .bd-saison { padding: 32px 0 36px; }
    .bd-saison-dedans { padding: 0 14px; }
    .bd-saison-titre { font-size: 1.28rem; letter-spacing: 1.4px; }
    .bd-saison-chapo { margin-bottom: 1.6rem; }
    .bd-saison-piste { gap: 14px; }
    /* DEUX VIGNETTES ET DEMIE. La moitié de la troisième dépasse au bord :
       c'est elle qui dit qu'il y a autre chose à voir. Une rangée qui se
       termine pile au bord ressemble à une rangée complète, et personne ne
       pense à la faire glisser.
       Le calcul : 2,5 vignettes + 2 gouttières = la largeur disponible. */
    .bd-saison-carte { flex-basis: calc((100% - 2 * 14px) / 2.5); }
    .bd-saison-fleche { display: none; }   /* au doigt, on fait glisser */
    /* Sans accrochage : le pas de 2,5 tomberait toujours à côté et
       ramènerait la troisième vignette au bord, ce qui tuerait l'amorce. */
    .bd-saison-piste { scroll-snap-type: none; }
    /* Trois lignes et non deux : sur une carte de 118 px, deux lignes coupent
       « Sachet kraft orange - moy… » en plein milieu du mot. */
    .bd-saison-nom { padding: .65rem .6rem .2rem; font-size: .82rem; -webkit-line-clamp: 3; }
    .bd-saison-prix { padding: .3rem .6rem .8rem; }
}

/* --------------------------------------------------------------------------
   MPP-258 (suite) — le bloc « Personnalisation »

   Même piste, même carte, même mécanique : seule la couleur d'accent change,
   et le lien n'est pas un titre d'article — donc pas de guillemets ni de
   flèche, qui n'auraient aucun sens sur « Voir tous nos personnalisables ».

   Les deux bandeaux se suivent : on retire la bordure entre eux pour qu'ils
   forment un seul pan de papier plutôt que deux boîtes empilées.
   -------------------------------------------------------------------------- */
.bd-saison + .bd-saison {
    border-top: 0;
    padding-top: 8px;
}

.bd-saison-guide-nu::before,
.bd-saison-guide-nu::after { content: none; }

.bd-saison-guide-nu::after {
    content: ' \2192';
    white-space: pre;
}