/*
 * Fiche fromage (« À l'affiche ») — hero, identité/rubans, historique
 * (carrousel vertical), fabrication (carrousel horizontal), conseil,
 * vidéo, promo/jeu, articles à la une.
 *
 * --cheese-theme / --cheese-ink sont posées sur .cheese-page (voir
 * cheese-show.php) : elles pilotent toutes les teintes propres à la fiche.
 */

/* Gris (pas blanc) explicite : comme la maquette, dont aucune section de
   cette page (identité, historique, conseil, vidéo, articles à la une...)
   ne pose son propre fond — elles laissent voir le gris de fond du site
   (body, base.css) derrière. Retour utilisateur : passer ces sections
   blanches en gris, sauf le footer (inchangé, hors de .cheese-page). Fixer
   la teinte ICI plutôt que sur chaque section individuellement couvre
   aussi les sections qui n'ont encore jamais eu de fond propre. */
.cheese-page {
    background: var(--mr-gris-fond);
}

.cheese-page .wrap {
    padding-top: 0;
    padding-bottom: 0;
}

/* ... mais pas à 0 partout : ce même 0 annulait la marge de sécurité de
   10px posée sur .wrap (base.css) pour laisser respirer les boutons qui
   grossissent légèrement au survol (.arrow-btn, notamment ceux de
   « Secrets de fabrication ») — ils se retrouvaient alors coupés en bas. */
.cheese-page .wrap:has(.arrow-btn, .cta) {
    padding-top: 10px;
    padding-bottom: 10px;
}

/* ===== Hero =====
   Dimensions exactes de la source Symfony (.nc-header, _show_new.scss,
   vérifiées sur le CSS compilé public/build/cheese.*.css de releases/337).
   Fond pleine largeur (pas de .wrap), mais la grille interne (.cheese-hero__inner,
   plus bas) est bien plafonnée à --mr-content-max comme le reste du site :
   retour utilisateur, le hero paraissait bien plus large que le contenu des
   sections suivantes sur un très grand écran (au-delà de ~1920px, où le
   padding clamp() ci-dessous ne suffit plus seul à contenir la grille).
   Hauteur prédéfinie (min-height sur .cheese-hero__inner, plus bas) : sans
   elle, la hauteur totale de cette section dépendait uniquement du contenu
   (surtitre, accroche sur 1 à 3 lignes selon le fromage) — un fromage sans
   accroche (0 ligne) et un autre avec une accroche longue (3 lignes)
   donnaient des hero visiblement de tailles très différentes d'une fiche à
   l'autre. Retour utilisateur explicite : gabarit prévisible partout, le
   contenu court se centre dans l'espace, le contenu exceptionnellement long
   peut encore dépasser (pas de coupe/overflow forcé).
   PAS de margin-top (62px/96px dans la source) : sur le vrai site, le
   <header> est en position:fixed (confirmé dans le CSS compilé,
   app-style.*.css) et flotte donc AU-DESSUS du contenu — ce margin-top
   (== --navbar-height, sa propre variable) sert uniquement à repousser
   chaque section sous ce bandeau flottant. Notre en-tête à nous reste en
   flux normal (déjà mesuré : il occupe sa propre place, rien ne flotte
   par-dessus), donc reprendre ce margin-top ajoutait un bandeau de la
   couleur du hero (ou, posé en padding, un pavé de couleur pleine)
   entièrement superflu au-dessus du contenu. */
.cheese-hero {
    position: relative;
    padding: 32px 16px 60px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

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

    /* Uniquement à partir de ce palier (2 colonnes, voir .cheese-hero__inner
       plus bas) : en-dessous, le contenu s'empile sur 1 colonne et une
       hauteur minimale imposée créerait un vide artificiel au lieu de
       corriger une vraie incohérence. */
    .cheese-hero__inner {
        min-height: 420px;
    }
}

/* .cheese-hero a son propre padding horizontal (bien plus large que la
   gouttière standard, voir plus haut) : sans cette « échappée » pleine
   largeur, le fil d'Ariane héritait de CE padding et se retrouvait bien
   plus indenté que sur les autres pages (qui utilisent juste .wrap, sans
   padding de section additionnel). left:50%/margin-left:-50vw ignore le
   padding du parent et .wrap ci-dessous applique la même gouttière
   standard que partout ailleurs. */
.cheese-hero__crumb {
    position: relative;
    left: 50%;
    width: 100vw;
    margin-left: -50vw;
}

.cheese-hero__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: center;
    margin-top: auto;
    margin-bottom: auto;
    /* Plafond de largeur commun au site (voir commentaire ci-dessus) : sans
       lui, les deux colonnes 1fr grandissaient indéfiniment avec la fenêtre.
       width:100% est nécessaire ICI (pas juste décoratif) : .cheese-hero est
       en display:flex (colonne), et des marges auto sur l'axe transversal
       d'un enfant flex annulent le align-items:stretch par défaut du
       parent — sans lui, cette grille revient à la taille de son contenu
       (1472px, les deux colonnes à 720px + le gap) au lieu de remplir
       l'espace disponible jusqu'à 1600px (même piège que
       .cheese-hero__intro/.cheese-hero__media plus bas, déjà rencontré). */
    width: 100%;
    max-width: var(--mr-content-max);
    margin-left: auto;
    margin-right: auto;
}

.cheese-hero__intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    /* 720px : même plafond que .cheese-hero__media (.nc-header_left/_right,
       source Symfony) — les deux colonnes du hero sont plafonnées à la même
       largeur, pas seulement celle de l'image. */
    max-width: 720px;
    width: 100%;
    /* margin:0 auto (pas margin:0) : width/max-width sont déjà explicites
       ci-dessus, donc cette boîte a une largeur fixe — un margin auto ne
       fait ici que la CENTRER dans sa cellule de grille, sans jamais la
       rétrécir à son contenu (cette confusion justifiait auparavant de
       l'éviter). Sans lui, sur un écran large, la cellule de grille
       (jusqu'à la moitié de la largeur de la page, non plafonnée, voir
       .cheese-hero__inner) dépasse largement les 720px : cette colonne
       restait collée à gauche de sa cellule pendant que .cheese-hero__media
       (déjà centrée via margin:0 auto) se centrait dans la sienne — texte et
       photo semblaient "écartés" au lieu de former un ensemble équilibré. */
    margin: 0 auto;
    /* 32px : écart exact entre le logo et l'accroche dans la source
       Symfony (.nc-header_left), remplace l'ancien margin-top de 28px
       posé directement sur .cheese-hero__tagline. */
    gap: 32px;
}

.cheese-hero__title {
    margin: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Conteneur de HAUTEUR fixe plutôt qu'une simple largeur commune :
       chaque fromage a son propre logo-titre (image), à des ratios très
       différents (certains presque carrés, d'autres bien plus larges que
       hauts) — avec seulement une largeur commune et une hauteur laissée
       libre, le même "400px de large" donnait des blocs de titre bien
       plus hauts pour les uns que pour les autres. Un vrai gabarit (comme
       demandé) plutôt qu'un réglage au cas par cas par logo : chaque
       titre est maintenant contenu dans le même bloc, jamais ne le
       dépasse (object-fit: contain sur l'image ci-dessous). */
    /* Même gabarit que .fromages-hero__logo (cheese-index.css) : les deux
       hero doivent avoir la même taille perçue — un gabarit différent d'une
       page à l'autre pour ce qui est visuellement le même type d'élément
       (logo-titre dans un bandeau coloré) ne se justifiait pas et créait une
       incohérence remarquée. */
    height: clamp(130px, 18vw, 270px);
}

.cheese-hero__title:not(:has(img)) {
    /* Repli texte (pas de titre_image uploadée pour ce fromage) : sans
       style propre, ce texte hérite du rendu <h1> par défaut du navigateur
       (petit, noir) au lieu de se comporter comme un vrai titre de hero —
       un fromage sans logo-titre paraissait alors "cassé" comparé aux
       autres, à taille de gabarit pourtant identique (cf. commentaire
       ci-dessus). */
    color: var(--mr-blanc);
    font-family: var(--mr-font-titrage);
    font-weight: 900;
    text-transform: uppercase;
    font-size: clamp(32px, 5vw, 64px);
}

.cheese-hero__title img {
    /* width/height à 100% (pas auto) : l'image remplit tout le gabarit
       dans les deux dimensions, object-fit préservant son ratio sans la
       déformer. Avec "auto", la taille intrinsèque du logo (très variable
       d'un fromage à l'autre) se répercutait dans le calcul de largeur du
       conteneur PARENT (.cheese-hero__intro, rétréci à son contenu) — un
       logo réputé "large" (ex. Tomme Catalane, 1142px de large en
       original) réduisait alors toute la colonne de texte, la rendant
       plus étroite que la colonne photo d'en face. */
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cheese-hero__tagline {
    margin: 0;
    color: var(--mr-blanc);
    font-family: var(--mr-font-surtitre);
    font-style: italic;
    /* 36px puis clamp(28px, 2.5vw, 44px) à partir de 768px (pas un clamp
       plafonnant à 32px) : valeurs exactes de la source Symfony
       (.nc-header_quote, _show_new.scss). */
    font-size: 36px;
    line-height: 1.2;
    max-width: min(100%, 560px);
    text-wrap: balance;
}

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

.cheese-hero__media {
    width: 100%;
    /* 780px (au lieu de 720px) : agrandissement léger demandé par
       l'utilisateur pour tous les visuels de fiche fromage. */
    max-width: 780px;
    /* 720px : conteneur (.nc-header_right, max-width:720px, source
       Symfony) — déjà confirmé par mesure directe.
       height fixe (pas max-height sur l'image, voir ci-dessous) : un essai
       précédent (width:100%, height:auto, max-height:600px) laissait le
       CADRAGE de chaque photo décider de la hauteur réellement occupée —
       une photo portrait (ex. Le Cheddar, 960×1067) restait bien plus
       haute qu'une photo paysage (ex. Mozzarella, 960×808) à largeur de
       colonne égale, ce plafond n'étant quasiment jamais atteint en
       pratique. Même mécanique que .cheese-hero__title (gabarit fixe +
       object-fit:contain sur l'image) pour que TOUTE photo occupe le même
       espace, quel que soit son cadrage — c'est ce gabarit commun aux deux
       colonnes qui rend enfin le hero prévisible d'une fiche à l'autre. */
    height: clamp(300px, 35vw, 450px);
    margin: 0 auto;
}

.cheese-hero__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    margin: 0 auto;
}

.cheese-hero__inner--no-media {
    /* Fromage sans photo hero (retirée dans l'admin) : une seule colonne
       centrée plutôt qu'une grille à deux colonnes égales avec une moitié
       vide. Même plafond que .cheese-hero__intro/.cheese-hero__media pour
       rester cohérent avec le gabarit habituel.
       width:100% explicite (pas seulement max-width+margin:auto) : .cheese-hero
       est un flex container en colonne, et des margin left/right:auto sur un
       item flex désactivent le stretch par défaut — sans largeur explicite,
       la grille retombe alors sur un dimensionnement intrinsèque et un
       .cheese-hero__intro en width:100% (de rien) s'effondre à 0px. */
    width: 100%;
    grid-template-columns: 1fr;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

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

/* ===== Identité + rubans ===== */
.cheese-identite {
    padding: 106px 0 20px;
}

/* Retour utilisateur : 106px de marge avant le titre « Produit » (surtitre
   + titre), pensés pour la respiration du wave-divider au-dessus sur
   desktop, se voit trop vide sur mobile où l'écran est bien plus court. */
@media (max-width: 767px) {
    .cheese-identite {
        padding-top: var(--mr-space-section-mobile);
    }
}

/* Surtitre (nom du fromage, au-dessus du Titre) : agrandi sur cette seule
   section (retour utilisateur) — .section-eyebrow reste à sa taille par
   défaut ailleurs sur la fiche (ex. "On parle d'eux" plus bas, cf.
   base.css). */
.cheese-identite .section-eyebrow {
    font-size: clamp(23px, 1.9vw, 42px);
}

/* Titre du bloc « Produit » (admin) : rien ne garantit la longueur saisie
   par un éditeur. overflow-wrap seul ne casse qu'en dernier recours (mot
   sans espace qui dépasse réellement .wrap) — un titre de plusieurs mots,
   lui, s'étirait sur une seule ligne quasi pleine largeur avant de passer
   à la ligne (retour utilisateur : le forcer plus tôt). max-width en
   "ch" (largeur de caractère) plutôt qu'en px : la limite suit la taille
   de police, qui varie elle-même avec la largeur de viewport (clamp). */
#prod-h {
    max-width: 30ch;
    margin-left: auto;
    margin-right: auto;
    overflow-wrap: break-word;
    text-wrap: balance;
}

.cheese-identite__grid {
    display: grid;
    /* Remesuré précisément sur actu.maregion.leclerc (colonne fanions
       .nc-slider-col : flex:0 0 376px ; colonne photo .nc-section1_images :
       flex:1 1 auto, max-width:761px ; gap:64px fixe, non responsive) — la
       précédente valeur de 560px pour la photo (voir historique de ce
       commentaire) reposait sur une mesure erronée : le vrai site va
       jusqu'à 761px, pas moins. Retour utilisateur : "agrandir les visuels
       des produits". */
    /* 820px (au lieu de 761px) : agrandissement léger demandé par
       l'utilisateur pour tous les visuels de fiche fromage. */
    grid-template-columns: minmax(0, 376px) minmax(0, 820px);
    gap: 64px;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    width: fit-content;
    max-width: 100%;
}

/* Même principe que .cheese-hero__media : un conteneur à ratio fixe,
   pas une hauteur pilotée par la photo — sinon la même largeur commune
   donne des tailles perçues inégales selon le cadrage de chaque photo
   (catalane-maison.png et brebis-maison.png, par exemple, n'ont pas du
   tout le même ratio). */
.cheese-identite__media {
    width: 100%;
    max-width: 820px;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.cheese-identite__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@media (max-width: 900px) {
    .cheese-identite__grid {
        grid-template-columns: 1fr;
        width: 100%;
    }
}

.ribbons {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.ribbon {
    position: relative;
    text-align: center;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 38px), 0 100%);
}

.ribbon__title {
    margin: 0;
    /* Poids/interligne/espacement des lettres remesurés précisément sur
       actu.maregion.leclerc (.nc-slider-block_title) : 400 (pas 700),
       line-height 40px pour 32px de police (soit 1.25, pas 1.14),
       letter-spacing -1.6px (soit -0.05em, pas +0.01em — les lettres sont
       resserrées, pas écartées). */
    font-weight: 400;
    font-size: 32px;
    line-height: 1.25;
    letter-spacing: -0.05em;
    color: inherit;
    text-wrap: balance;
}

.ribbon__subtitle {
    display: block;
    /* Remesuré (.nc-slider-block_subtitle) : line-height 32px pour 24px de
       police (1.333), letter-spacing -1.2px (-0.05em) — même ratio que le
       titre ci-dessus, pas de valeurs par défaut laissées à l'héritage. */
    font-size: 24px;
    line-height: 1.333;
    letter-spacing: -0.05em;
}

.ribbon__text {
    margin: 20px 0 0;
    /* Remesuré (.nc-slider-block_text) : 500 (pas 700), line-height 24px
       pour 18px de police (1.333, pas 1.45). */
    font-weight: 500;
    font-size: 18px;
    line-height: 1.333;
    color: inherit;
    white-space: pre-line;
    text-wrap: pretty;
}

/* ===== Historique — carrousel vertical (« Qui l'aurait cru !? ») ===== */
.v-slider-section {
    padding: 76px 0 60px;
}

/* Retour utilisateur : encore trop d'espace sur mobile entre la photo du
   produit (.cheese-identite__media, juste au-dessus) et ce titre — même
   traitement que .cheese-identite/.game-over-blog (espacement de section
   pensé pour desktop, à l'étroit sur un écran de mobile). */
@media (max-width: 767px) {
    .v-slider-section {
        padding-top: var(--mr-space-section-mobile);
    }
}

.v-slider__sub {
    text-align: center;
    margin: -40px 0 54px;
    font-size: 17px;
    line-height: 1.5;
}

.v-slider {
    display: grid;
    /* 3ᵉ colonne (photo) à 770px (au lieu de 711px) : agrandissement léger
       demandé par l'utilisateur pour tous les visuels de fiche fromage. */
    grid-template-columns: 72px minmax(0, 618px) minmax(0, 770px);
    column-gap: 21px;
    align-items: center;
    justify-content: center;
}

/* Pas de photo d'ambiance pour ce fromage : la pile d'étapes prend toute
   la place restante plutôt que de laisser un vide à droite. */
.v-slider--no-shot {
    grid-template-columns: 72px minmax(0, 1fr);
    max-width: 690px;
    margin: 0 auto;
}

.v-slider__nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.v-slider__arrow {
    border-radius: 50%;
}

.v-slider__dots {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
}

.v-dot {
    border: 0;
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    min-height: 26px;
    padding: 10px 0;
}

.v-dot__bar {
    display: block;
    width: 7px;
    height: 7px;
    border-radius: var(--mr-r-pill);
    background: var(--cheese-theme);
    opacity: 0.5;
    transition: height 0.3s ease, opacity 0.3s ease;
}

.v-dot[aria-current='true'] .v-dot__bar {
    height: 26px;
    opacity: 1;
}

.v-slider__stack {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.v-slider__item {
    width: 86%;
    margin: 0 auto;
    position: relative;
    transition: width 0.5s cubic-bezier(0.22, 0.7, 0.2, 1);
}

.v-slider__btn {
    width: 100%;
    border: 0;
    cursor: pointer;
    padding: 34px 42px 36px;
    text-align: center;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
    transition: background 0.4s ease, color 0.4s ease, padding 0.5s cubic-bezier(0.22, 0.7, 0.2, 1);
}

/* Fond, texte du repère et texte du corps sont désormais posés en style
   inline par étape (cheese-show.php, comme les fanions .ribbon) : couleurs
   personnalisables par étape depuis l'admin, avec la même alternance
   thème/encre que repli quand rien n'est personnalisé. */

/* Même situation et même correctif que .ribbon plus bas : --etape-bg
   (posée en style inline, cheese-show.php) porte la couleur propre à
   CETTE étape, assombrie ici via color-mix plutôt que de faire confiance
   au fg/tc saisi (retour utilisateur : texte blanc sur fond tan clair sur
   au moins une fiche). */
html.a11y-contrast .v-slider__btn,
html.a11y-enhanced .v-slider__btn {
    border: 2px solid var(--mr-encre);
}

/* Un fond blanc (.v-slider__btn--bg-blanc, posé par cheese-show.php) est
   déjà accessible tel quel (texte encre dessus) : ne l'assombrit pas — un
   blanc mélangé à du noir devient un gris, moins lisible que le blanc
   d'origine (retour utilisateur). Seules les étapes à fond COLORÉ ont
   besoin d'être assombries pour rester lisibles avec un texte blanc. */
html.a11y-contrast .v-slider__btn:not(.v-slider__btn--bg-blanc),
html.a11y-enhanced .v-slider__btn:not(.v-slider__btn--bg-blanc) {
    /* 40% (pas 60% comme .theme-bg) : --etape-bg peut être une couleur très
       claire — un mélange à 60% ne suffit pas toujours à redescendre sous
       le seuil RGAA avec un texte blanc par-dessus. 40% couvre même les
       teintes claires avec une marge confortable (~5.7:1 au pire cas). */
    background: color-mix(in srgb, var(--etape-bg, var(--cheese-theme)) 40%, #000) !important;
}

html.a11y-contrast .v-slider__btn:not(.v-slider__btn--bg-blanc) *,
html.a11y-enhanced .v-slider__btn:not(.v-slider__btn--bg-blanc) * {
    color: var(--mr-blanc) !important;
}

/* --cheese-theme/--cheese-ink, le hero, .facts-section et .cheese-video
   posent tous une couleur de thème arbitraire (admin) en style inline sur
   fond plein — .theme-bg (fond + texte blanc porté par les descendants,
   ex. hero) et .theme-bg-plain (fond seul, ex. facts/vidéo) sont déjà les
   classes posées dans les templates pour ce cas précis.
   color-mix (pas un repli neutre unique) : un même repli #8A4200 pour tous
   les fromages faisait perdre la distinction de couleur par fromage que le
   site garde normalement (retour utilisateur explicite) — chaque héros
   redevenait identique en contraste élevé. color-mix assombrit CHAQUE
   teinte de thème vers le noir tout en gardant sa teinte propre : 60% de
   la couleur d'origine suffit à faire passer le pire cas mesuré (#F6A200,
   Ariégeois, 2.08:1 à l'état brut) à 5.3:1 avec du texte blanc — les
   couleurs plus foncées (la plupart) finissent avec encore plus de marge,
   jamais moins. */
html.a11y-contrast .theme-bg,
html.a11y-contrast .theme-bg-plain,
html.a11y-enhanced .theme-bg,
html.a11y-enhanced .theme-bg-plain {
    background: color-mix(in srgb, var(--cheese-theme) 60%, #000) !important;
}

html.a11y-contrast .theme-bg,
html.a11y-contrast .theme-bg *,
html.a11y-enhanced .theme-bg,
html.a11y-enhanced .theme-bg * {
    color: var(--mr-blanc) !important;
}

/* .theme-ink : même couleur de thème arbitraire, mais utilisée comme
   COULEUR DE TEXTE sur fond clair (.cheese-identite h2, .v-slider__sub...).
   --cheese-ink part déjà d'une teinte plus sombre que --cheese-theme (choisie
   pour rester lisible sur fond clair) : un assombrissement plus léger
   (80%) suffit ici, et garde la teinte plus reconnaissable qu'un
   assombrissement à 60% comme pour le fond plein. Pire cas mesuré
   (#B25E00, Ariégeois, 4.25:1 sur le gris de fond à l'état brut) : 6:1 à
   80%, chaque autre fromage finit avec encore plus de marge. */
html.a11y-contrast .theme-ink,
html.a11y-enhanced .theme-ink {
    color: color-mix(in srgb, var(--cheese-ink) 80%, #000) !important;
}

/* .theme-text : même principe que .theme-ink, mais lié à --cheese-theme
   (couleur du thème) plutôt qu'à --cheese-ink — demandé pour le Surtitre/
   Titre (Produit) et le Titre/Sous-titre (Histoire), qui utilisaient jusque-là
   la couleur d'encre. */
.theme-text {
    color: var(--cheese-theme);
}

html.a11y-contrast .theme-text,
html.a11y-enhanced .theme-text {
    color: color-mix(in srgb, var(--cheese-theme) 80%, #000) !important;
}

/* Les fanions (.ribbon) ont un fg/bg choisi au cas par cas par fromage
   (cheese-show.php : $fg/$tc, personnalisable en back-office) — mais rien
   ne garantit que ce couple reste lisible (retour utilisateur : texte blanc
   sur fond tan clair sur au moins une fiche, ratio très en dessous du
   minimum RGAA). Plutôt que de faire confiance à chaque saisie, on
   applique ici la même recette que .theme-bg/.theme-bg-plain plus bas :
   assombrir la teinte propre à CE fanion (--ribbon-bg, posée en style
   inline juste à côté de background, cheese-show.php) via color-mix, et
   forcer un texte blanc par-dessus — la variété de couleur par fromage
   reste visible (juste plus sombre), le contraste, lui, est garanti quel
   que soit ce qui a été saisi. */
html.a11y-contrast .ribbon,
html.a11y-enhanced .ribbon {
    border: 2px solid var(--mr-encre);
}

/* Un fond blanc (.ribbon--bg-blanc, posé par cheese-show.php) est déjà
   accessible tel quel (texte encre dessus) : ne l'assombrit pas — un blanc
   mélangé à du noir devient un gris, moins lisible que le blanc d'origine
   (retour utilisateur). Seuls les fanions à fond COLORÉ ont besoin d'être
   assombris pour rester lisibles avec un texte blanc. */
html.a11y-contrast .ribbon:not(.ribbon--bg-blanc),
html.a11y-enhanced .ribbon:not(.ribbon--bg-blanc) {
    /* 40% (pas 60% comme .theme-bg) : --ribbon-bg peut être une couleur
       très claire — un mélange à 60% ne suffit pas toujours à redescendre
       sous le seuil RGAA avec un texte blanc par-dessus. 40% couvre même
       les teintes claires avec une marge confortable (~5.7:1 au pire cas). */
    background: color-mix(in srgb, var(--ribbon-bg, var(--cheese-theme)) 40%, #000) !important;
}

html.a11y-contrast .ribbon:not(.ribbon--bg-blanc) *,
html.a11y-enhanced .ribbon:not(.ribbon--bg-blanc) * {
    color: var(--mr-blanc) !important;
}

.v-slider__text {
    display: block;
    overflow: hidden;
    font-size: 18px;
    line-height: 1.65;
    white-space: pre-line;
    max-height: 0;
    opacity: 0;
    margin-bottom: 0;
    transition: max-height 0.5s cubic-bezier(0.22, 0.7, 0.2, 1), opacity 0.35s ease, margin-bottom 0.5s cubic-bezier(0.22, 0.7, 0.2, 1);
}

.v-slider__item.is-active .v-slider__text {
    /* --v-text-max-height (calculée en JS = hauteur du texte le plus long
       parmi tous les éléments) plutôt qu'un plafond fixe généreux : sinon
       chaque carte prenait la hauteur de SON SEUL texte, et toute la page
       changeait de hauteur en passant d'un élément court à un long. */
    max-height: var(--v-text-max-height, 640px);
    opacity: 1;
    margin-bottom: 22px;
}

.v-slider__label {
    display: block;
    font-weight: 900;
    font-size: 24px;
    letter-spacing: 0.04em;
    font-family: var(--mr-font-titrage);
}

.v-slider__shot {
    aspect-ratio: 711 / 440;
    position: relative;
    margin-left: 44px;
}

.v-slider__shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Photo posée à même le fond de page, sans cadre propre en temps normal —
   sans contour, elle ne se distingue plus du fond gris en contraste élevé. */
html.a11y-contrast .v-slider__shot,
html.a11y-enhanced .v-slider__shot {
    border: 2px solid var(--mr-encre);
}

@media (max-width: 1100px) {
    .v-slider {
        grid-template-columns: 56px minmax(0, 1fr);
        column-gap: 12px;
    }

    .v-slider__shot {
        grid-column: 1 / -1;
        margin-left: 0;
        margin-top: 26px;
    }
}

/* ===== Fabrication & caractéristiques — carrousel horizontal ===== */
.facts-section {
    padding: 76px 0 60px;
}

.facts-title {
    text-align: center;
    margin: 0 0 56px;
    color: var(--mr-blanc);
    font-weight: 900;
    font-size: var(--mr-fs-titre-section);
    line-height: 1.1;
}

.facts__viewport {
    overflow: hidden;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
    cursor: grab;
}

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

.facts__track {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    will-change: transform;
}

.facts__item {
    padding: 0 16.5px;
    box-sizing: border-box;
}

/* Fond, titre et corps sont désormais posés en style inline par
   caractéristique (cheese-show.php, comme .v-slider__btn et .ribbon) :
   couleurs personnalisables depuis l'admin, avec le même repli (fond
   blanc, titre en encre du site, corps en #222) que l'apparence
   historique quand rien n'est personnalisé. */
.facts__card {
    padding: 32px 34px 36px;
    height: 100%;
    box-sizing: border-box;
}

.facts__card h3 {
    margin: 0 0 18px;
    font-weight: 700;
    font-size: clamp(19px, 1.6vw, 25px);
    line-height: 1.25;
    overflow-wrap: break-word;
    hyphens: auto;
}

.facts__card p {
    margin: 0;
    font-size: 18px;
    line-height: 1.6;
}

/* .facts__card (fond blanc) : ressort déjà bien sur le fond de thème très
   assombri en contraste élevé (.facts-section.theme-bg-plain, plus haut) —
   mais un contour propre, comme sur sa cousine .engagement-card
   (cheese-index.css, même motif de carte blanche), reste plus cohérent
   avec le reste du site. */
html.a11y-contrast .facts__card,
html.a11y-enhanced .facts__card {
    border: 2px solid var(--mr-encre);
}

.facts__controls {
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

.facts__dots {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.fact-dot {
    border: 0;
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 44px;
    padding: 0 4px;
}

.fact-dot__bar {
    display: block;
    width: 7px;
    height: 7px;
    border-radius: var(--mr-r-pill);
    background: var(--mr-blanc);
    opacity: 0.45;
    transition: width 0.3s ease, opacity 0.3s ease;
}

.fact-dot[aria-current='true'] .fact-dot__bar {
    width: 26px;
    opacity: 1;
}

/* ===== Boutons flèche accordés à la teinte du fromage =====
   Complètent .arrow-btn (carousel.css) sans casser la surcharge du mode
   accessibilité renforcée/contraste élevé (règles par attribut, plus
   spécifiques, chargées après ce fichier). */
.arrow-btn--theme {
    background: var(--cheese-theme);
    transition: filter 0.2s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
}

.arrow-btn--theme:hover {
    background: var(--cheese-theme);
    filter: brightness(0.88);
    transform: scale(1.08);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

.arrow-btn--theme[aria-disabled='true'] {
    background: color-mix(in srgb, var(--cheese-theme) 24%, #fff);
    color: var(--cheese-theme);
}

.arrow-btn--on-theme {
    background: var(--mr-blanc);
    color: var(--cheese-theme);
}

.arrow-btn--on-theme:hover {
    background: var(--mr-blanc);
    color: var(--cheese-theme);
    transform: scale(1.1);
    box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.35);
}

.arrow-btn--on-theme[aria-disabled='true'] {
    background: rgba(255, 255, 255, 0.42);
    color: var(--cheese-theme);
}

/* ===== Conseil de dégustation ===== */
.cheese-conseil {
    padding: 76px 0 40px;
}

/* 50/50 (retour utilisateur) : conteneur d'image et bloc de texte se
   partagent exactement la même largeur, plutôt qu'une colonne image
   plafonnée à 390px face au reste de l'espace disponible. */
.cheese-conseil__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(28px, 4vw, 56px);
    align-items: center;
    justify-content: center;
}

.cheese-conseil__media {
    width: 100%;
    height: auto;
    margin: 0 auto;
}

/* Seul le conteneur du sous-titre/texte doit être compact (retour
   utilisateur : pas les deux colonnes) — la colonne image, elle, reste
   pleine largeur (50/50 ci-dessus). Une longueur de ligne confortable pour
   le texte, comme sur le site actuel (capture à l'appui), plutôt qu'un
   texte étiré sur toute la largeur de sa colonne. */
.cheese-conseil__body {
    max-width: 340px;
}

/* Même situation que .cheese-identite__media : photo posée sur le gris de
   la page, sans cadre propre. */
html.a11y-contrast .cheese-conseil__media,
html.a11y-enhanced .cheese-conseil__media {
    border: 2px solid var(--mr-encre);
}

/* Titre de section centré au-dessus de l'image + du conseil (reprend
   l'affichage du site actuel, actu.maregion.leclerc — retour utilisateur),
   plutôt que collé au texte à côté de l'image comme avant. */
.cheese-conseil__title {
    text-align: center;
    margin: 0 0 40px;
    font-weight: 900;
    font-size: var(--mr-fs-titre-section);
    line-height: 1.1;
    text-transform: uppercase;
}

.cheese-conseil__subtitle {
    margin: 0 0 12px;
    font-weight: 700;
    /* Légèrement agrandi (retour utilisateur) : clamp(19px, 1.6vw, 27px)
       auparavant. */
    font-size: clamp(22px, 2vw, 32px);
    line-height: 1.2;
    text-transform: uppercase;
}

.cheese-conseil__text {
    margin: 0;
    color: #3a423c;
    font-size: 17px;
    line-height: 1.7;
    text-wrap: pretty;
}

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

/* ===== Vidéo ===== */
.cheese-video {
    padding: 76px 0 88px;
}

.cheese-video__inner {
    max-width: 1000px;
}

.cheese-video h2 {
    text-align: center;
    margin: 0 0 48px;
    color: var(--mr-blanc);
    font-weight: 900;
    font-size: var(--mr-fs-titre-section);
    line-height: 1.1;
    text-wrap: balance;
}

.cheese-video__frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    overflow: hidden;
}

.cheese-video__frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* ===== Promo + jeu ===== */
.cheese-offres {
    padding: 52px 0 60px;
}

.cheese-offres__grid {
    /* Pas de padding horizontal ici : cet élément porte aussi .wrap
       (base.css), qui gère déjà le gouttière responsive gauche/droite —
       sans ça, le contenu touche les bords de l'écran sous 1100px+2×gouttière. */
    list-style: none;
    margin: 0 auto;
    /* 1160px (au lieu de 1100px) : suit l'agrandissement de
       .cheese-offres__img ci-dessous. */
    max-width: 1160px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(24px, 4vw, 48px);
    align-items: start;
}

.cheese-offres__img {
    width: 100%;
    /* 540px (au lieu de 500px) : agrandissement léger demandé par
       l'utilisateur pour tous les visuels de fiche fromage. */
    max-width: 540px;
    height: auto;
    display: block;
}

/* Fond propre à chaque fromage (offres_bg, éditable en back-office) : sans
   contour, l'image ne se distingue plus de ce fond en contraste élevé. */
html.a11y-contrast .cheese-offres__img,
html.a11y-enhanced .cheese-offres__img {
    border: 2px solid var(--mr-encre);
}

.cheese-offres__grid li:first-child .cheese-offres__img {
    margin: 0 0 0 auto;
}

.cheese-offres__grid li:last-child .cheese-offres__img {
    margin: 0 auto 0 0;
}

@media (max-width: 640px) {
    .cheese-offres__grid {
        grid-template-columns: 1fr;
    }

    .cheese-offres__grid li:first-child .cheese-offres__img,
    .cheese-offres__grid li:last-child .cheese-offres__img {
        margin: 0 auto;
    }
}

/* ===== Articles à la une ===== */
.cheese-une {
    padding: 56px 0 70px;
}

.cheese-une__grid {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 1600px;
    /* Flex (pas grid) : jusqu'à 3 articles ici (ArticleRepository::forCheese),
       et le nombre réel varie d'un fromage à l'autre (1 à 3) — flex-wrap
       centre correctement 1, 2 OU 3 cartes sur une même ligne (contrairement
       à un grid-template-columns figé à 3, qui aurait laissé des colonnes
       vides visiblement décalées à gauche quand il y a moins de 3 articles).
       512px de plafond par carte, comme avant (remesuré sur
       actu.maregion.leclerc, .cheese_article y fait 512px à 1920px de
       large) ; 280px de plancher (pas 300px) pour que 3 cartes restent sur
       la même ligne dès ~950px de conteneur (retour utilisateur : elles
       repassaient à 2+1 dès qu'on quittait un très grand écran) — en
       dessous, flex-wrap les repasse naturellement à la ligne. */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(24px, 4vw, 56px);
    align-items: stretch;
}

.cheese-une__grid > li {
    flex: 1 1 280px;
    max-width: 512px;
}

.cheese-une__cta {
    text-align: center;
    margin: 30px 0 0;
}