/*
 * Page Fromages (listing) — hero, carte de fromages (slider en éventail),
 * articles à la une, engagements.
 */

/* ===== Hero =====
   Mêmes conteneurs que le hero de fiche fromage (.cheese-hero,
   .cheese-hero__inner, cheese-show.css) : demande explicite de dimension
   identique entre les deux pages plutôt qu'un gabarit propre à la page
   listing — priorité sur les valeurs mesurées séparément sur l'ancienne
   source Symfony (padding/gap différaient d'une poignée de pixels d'un
   hero à l'autre, perceptible à l'œil malgré des colonnes internes déjà
   alignées). Grille interne plafonnée à --mr-content-max comme
   .cheese-hero__inner : même correctif, même raison (voir ce fichier). */
.fromages-hero {
    background: var(--mr-corail);
    position: relative;
    padding: 32px 16px 60px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow: hidden;
}

@media (min-width: 768px) {
    .fromages-hero {
        padding: 64px clamp(16px, 8vw, 160px) 60px;
    }
}

.fromages-hero__inner {
    display: grid;
    /* 1fr 1fr (pas 1.02/0.98) : les deux colonnes sont exactement égales
       sur actu.maregion.leclerc. */
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: center;
    margin-top: auto;
    margin-bottom: auto;
    /* width:100% requis avec les marges auto ci-dessous : voir le
       commentaire équivalent sur .cheese-hero__inner (cheese-show.css). */
    width: 100%;
    max-width: var(--mr-content-max);
    margin-left: auto;
    margin-right: auto;
}

.fromages-hero__intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    /* Même gabarit que .cheese-hero__intro (cheese-show.css) : plafond de
       720px et largeur pleine plutôt qu'un rétrécissement au contenu, pour
       que la colonne de texte occupe exactement la même place que sur une
       fiche fromage. */
    max-width: 720px;
    width: 100%;
    /* margin:0 auto (pas margin:0) : centre cette boîte à largeur fixe dans
       sa cellule de grille — voir .cheese-hero__intro (cheese-show.css) pour
       le raisonnement complet ; même correctif ici, texte et logo semblaient
       "écartés" sur un écran large sans lui. */
    margin: 0 auto;
    /* min-width:0 : sans ça, la largeur minimale automatique de cette
       colonne de grille se cale sur le contenu le plus large qu'elle
       contient. */
    min-width: 0;
    /* 32px : écart exact entre le logo et l'accroche dans la source
       Symfony (.cheese-header_content), identique à .cheese-hero__intro. */
    gap: 32px;
}

.fromages-hero__logo {
    margin: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Même gabarit que .cheese-hero__title (cheese-show.css) — les deux
       hero doivent rester à la même taille perçue. */
    height: clamp(130px, 18vw, 270px);
}

.fromages-hero__logo img {
    /* width/height à 100% + object-fit: contain, comme
       .cheese-hero__title img : le logo remplit tout le gabarit sans le
       déformer. */
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.fromages-hero__tagline {
    margin: 0;
    /* Même couleur/typo/taille que .cheese-hero__tagline
       (cheese-show.css) : le hero fromage utilise le même fond corail que
       plusieurs thèmes de fiche, ce texte doit donc avoir exactement le
       même traitement. */
    color: var(--mr-blanc);
    font-family: var(--mr-font-surtitre);
    font-style: italic;
    font-size: 36px;
    line-height: 1.2;
    max-width: min(100%, 560px);
    text-wrap: balance;
}

@media (min-width: 768px) {
    .fromages-hero__tagline {
        font-size: clamp(28px, 2.5vw, 44px);
    }
}

.fromages-hero__media {
    /* Mêmes paramètres que le hero de chaque fiche fromage
       (.cheese-hero__media, cheese-show.css) : largeur plafonnée à 720px,
       photo à sa propre échelle (jamais un ratio forcé) plutôt qu'un
       plafond hérité tel quel de l'ancien site (572px, jamais recalibré
       pour ce visuel-ci). */
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
}

.fromages-hero__media img {
    display: block;
    width: 100%;
    height: auto;
    /* 600px : même plafond que .cheese-hero__media img. */
    max-height: 600px;
    object-fit: contain;
    margin: 0 auto;
}

@media (max-width: 767px) {
    .fromages-hero__inner {
        grid-template-columns: 1fr;
    }
}

/* ===== Carte de fromages (slider "en éventail") =====
   Reconstruit sur la base de l'implémentation RÉELLE du site
   (leclerc-occitanie, assets/js/pages/cheese.js + scss/elements/
   _poster_card.scss), pas sur le prototype en coordonnées polaires de la
   maquette (Site.dc.html) : celui-ci calculait la position de chaque
   carte sur un arc de cercle (trigonométrie), ce qui rognait les cartes
   latérales dès qu'on les gardait toutes visibles (piste à hauteur fixe +
   overflow:hidden) — plusieurs correctifs successifs (seuil d'opacité,
   tailles réduites...) n'ont jamais réglé le problème à la racine.
   Le vrai site s'en sort en éventail à distance fixe : Swiper gère
   uniquement l'index/le défilement, et une simple table de correspondance
   par écart au centre (rotation/décalage/fondu/empilement) — SANS jamais
   rogner les cartes, grâce à overflow:visible + un padding-bottom qui leur
   réserve la place. */
.fromages-carte {
    background: var(--mr-rose-pale);
    padding: 60px 0 76px;
}

/* Surtitres "Notre carte de fromages" / "On parle d'eux" : agrandis sur
   cette page listing uniquement (retour utilisateur) — .section-eyebrow
   reste à sa taille par défaut ailleurs (fiche fromage, blog, jeu
   concours, cf. base.css). */
.fromages-carte .section-eyebrow,
.fromages-une .section-eyebrow {
    font-size: clamp(23px, 1.9vw, 42px);
}

.posters-slider {
    position: relative;
    /* Chaque diapositive porte un z-index (voir cheese-slider.js) : au
       plus 3, jamais assez pour entrer en conflit avec le z-index de
       l'en-tête (50/96, header.css), mais isolation:isolate évite quand
       même tout accroc de contexte d'empilement. */
    isolation: isolate;
}

.posters-slider__track {
    width: 100vw;
    left: 50%;
    margin-left: -50vw;
    position: relative;
    /* overflow:visible (pas hidden) : les cartes latérales tournent et se
       décalent hors de leur propre boîte — les rogner obligerait, comme
       avant, à réduire artificiellement le nombre de cartes visibles.
       padding-bottom réserve la place pour qu'elles restent dans la zone
       visible de la section plutôt que de chevaucher ce qui suit. */
    overflow: visible !important;
    padding-bottom: 120px;
    /* none (pas pan-y) : retour utilisateur répété "le swipe ne répond
       pas" au doigt sur l'ancienne version — pan-y cède la main au
       défilement natif de la page dès qu'un geste est à dominante
       verticale, avant même que le JS ne reçoive le premier pointermove.
       none retire tout arbitrage natif : le geste appartient entièrement
       au JS dès le premier contact. */
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    cursor: grab;
}

.posters-slider__track[data-dragging='true'] {
    cursor: grabbing;
}

.posters-slider__track .swiper-wrapper {
    overflow: visible !important;
}

.posters-slider__track .swiper-slide {
    width: 280px;
    transform-origin: center center;
}

@media (min-width: 768px) {
    .posters-slider__track .swiper-slide {
        width: 376px;
    }
}

.poster-card {
    display: flex;
    flex-direction: column;
    width: 280px;
    height: 400px;
    border-radius: var(--mr-r-l);
    overflow: hidden;
    text-decoration: none;
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
}

@media (min-width: 768px) {
    .poster-card {
        width: 376px;
        height: 534px;
    }
}

.poster-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    -webkit-user-drag: none;
}

.poster-card--teaser {
    background: var(--mr-corail);
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 30px;
    box-sizing: border-box;
}

.poster-card__title {
    margin: 0;
    color: var(--mr-brun);
    font-weight: 900;
    font-size: clamp(21px, 2.5vw, 30px);
    line-height: 1.22;
    text-transform: uppercase;
}

.poster-card__date {
    margin-top: 26px;
    background: var(--mr-brun);
    color: var(--mr-blanc);
    font-weight: 700;
    font-size: 18px;
    padding: 11px 24px;
    border-radius: var(--mr-r-pill);
}

.posters-slider__controls {
    display: flex;
    gap: 16px;
    justify-content: center;
    align-items: center;
    /* 28px sous les cartes, comme les autres carrousels du site : plus
       besoin d'une marge négative pour "remonter" les flèches — avec
       overflow:visible, la piste n'a plus de grand vide artificiel sous
       les cartes (l'ancienne piste à hauteur fixe réservait toujours de la
       place pour un rayon d'arc bien plus grand que les cartes réellement
       visibles). */
    margin-top: 28px;
}

.posters-slider__dots {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* ===== On parle d'eux ===== */
.fromages-une {
    /* Gris (pas blanc) : retour utilisateur, comme la maquette — cette
       section ("On parle d'eux / LES ARTICLES À LA UNE") ne pose son
       propre fond sur aucune des deux. */
    background: var(--mr-gris-fond);
    padding: 72px 0 56px;
}

.fromages-une__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 38px;
    align-items: stretch;
}

.fromages-une__cta {
    display: flex;
    justify-content: center;
    margin-top: 44px;
}

/* ===== Nos engagements ===== */
.fromages-engagements {
    background: var(--mr-corail);
    padding: 66px 0 80px;
}

.fromages-engagements .section-title {
    margin: 0 0 18px;
}

.fromages-engagements__intro {
    text-align: center;
    color: var(--mr-encre);
    font-size: var(--mr-fs-courant);
    line-height: 1.7;
    max-width: 860px;
    margin: 0 auto 48px;
}

.fromages-engagements__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 34px;
}

.engagement-card {
    background: var(--mr-blanc);
    border-radius: var(--mr-r-xs);
    padding: 28px 28px 30px;
}

.engagement-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.engagement-card__icon {
    flex-shrink: 0;
    width: clamp(60px, 18vw, 84px);
    height: clamp(60px, 18vw, 84px);
    object-fit: contain;
}

.engagement-card__head h3 {
    margin: 0;
    color: var(--mr-brun);
    font-weight: 900;
    font-size: 20px;
    line-height: 1.28;
    text-transform: uppercase;
    text-wrap: pretty;
    flex: 1 1 160px;
    min-width: 0;
    overflow-wrap: break-word;
}

.engagement-card p {
    margin: 0;
    color: var(--mr-brun);
    font-size: 18px;
    line-height: 1.7;
}

html.a11y-contrast .fromages-engagements,
html.a11y-enhanced .fromages-engagements {
    background: var(--mr-blanc) !important;
}

html.a11y-contrast .engagement-card,
html.a11y-enhanced .engagement-card {
    border: 2px solid var(--mr-encre);
}

/* Hero (corail) et carte "Bientôt disponible" (.poster-card--teaser, même
   fond corail) : n'avaient jusqu'ici aucune couverture contraste élevé —
   corrigé en assombrissant le corail plutôt qu'en l'effaçant. */
html.a11y-contrast .fromages-hero,
html.a11y-enhanced .fromages-hero {
    background: var(--mr-a11y-corail) !important;
}

html.a11y-contrast .fromages-hero__tagline,
html.a11y-enhanced .fromages-hero__tagline {
    color: var(--mr-blanc) !important;
}

html.a11y-contrast .poster-card--teaser,
html.a11y-enhanced .poster-card--teaser {
    background: var(--mr-a11y-corail) !important;
}

/* .poster-card (les affiches elles-mêmes, pas seulement la variante
   "Bientôt disponible" ci-dessus) : photo plein cadre sans bordure propre
   en temps normal — sans contour, une carte ne se distingue plus de sa
   voisine ni du fond du slider en contraste élevé. */
html.a11y-contrast .poster-card,
html.a11y-enhanced .poster-card {
    border: 3px solid var(--mr-encre);
}

html.a11y-contrast .poster-card__title,
html.a11y-enhanced .poster-card__title {
    color: var(--mr-blanc) !important;
}

html.a11y-contrast .poster-card__date,
html.a11y-enhanced .poster-card__date {
    background: var(--mr-blanc) !important;
    color: var(--mr-encre) !important;
}