/*
 * Boutique Ma Selfie Box — feuille publique.
 *
 * Separee de admin.css, et c'est volontaire : celle du back-office pese
 * 96 Ko, dont rien ne sert ici. Sur un telephone en 4G, c'est une demi-
 * seconde de rendu perdue sur chaque page — et le temps d'affichage du
 * plus grand element est un critere de classement.
 *
 * Pas de JavaScript sur les pages de contenu. Rien a charger, rien a
 * attendre, rien a casser.
 */

:root {
    --msb-noir: #000000;
    --msb-texte: #171616;
    --msb-turquoise: #10DCCB;
    --msb-turquoise-fonce: #1C9A8F;
    --msb-fond: #EFF3F3;
    --msb-blanc: #FFFFFF;
    --msb-bordure: #D6DEDE;
    --msb-texte-doux: #5E6363;
    --msb-police-titre: "Mulish", system-ui, sans-serif;
    --msb-police-texte: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
    --msb-rayon: 10px;
    --msb-large: 68rem;
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--msb-police-texte);
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--msb-texte);
    background: var(--msb-blanc);
    -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { font-family: var(--msb-police-titre); line-height: 1.2; margin: 0 0 0.6em; }
h1 { font-size: clamp(1.85rem, 1.2rem + 2.4vw, 2.9rem); font-weight: 800; }
h2 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem); font-weight: 800; margin-top: 2.2rem; }
h3 { font-size: 1.2rem; font-weight: 700; margin-top: 1.6rem; }
p { margin: 0 0 1.1rem; }
a { color: var(--msb-texte); text-decoration-color: var(--msb-turquoise); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
img { max-width: 100%; height: auto; }

.lire-contenu {
    position: absolute; left: -9999px;
    background: var(--msb-noir); color: var(--msb-blanc); padding: 0.75rem 1rem;
}
.lire-contenu:focus { left: 0; top: 0; z-index: 10; }

.large { width: min(100% - 2rem, var(--msb-large)); margin-inline: auto; }

/* Lu par les lecteurs d'écran, invisible à l'œil. La classe existait dans
 * la feuille du back-office et pas ici : le texte destiné aux lecteurs
 * d'écran s'affichait en clair dans le calendrier et débordait la page. */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------- tête */
.tete {
    border-bottom: 1px solid var(--msb-bordure);
    background: var(--msb-blanc);
}
.tete__barre {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 0.75rem 1.5rem; padding: 0.9rem 0;
}
.tete__marque { font-family: var(--msb-police-titre); font-weight: 800; font-size: 1.15rem; text-decoration: none; }
.tete__liens { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; align-items: center; }
.tete__liens a { font-size: 0.95rem; text-decoration: none; }
.tete__liens a:hover { text-decoration: underline; }
.tete__tel { font-weight: 600; white-space: nowrap; }

/* -------------------------------------------------------------- bandeau */
.bandeau {
    background: var(--msb-fond);
    padding: 2.5rem 0 2.75rem;
}
.bandeau p.chapo {
    font-size: 1.15rem; max-width: 46rem; margin-bottom: 1.5rem;
    color: var(--msb-texte-doux);
}
.bandeau--brouillon { background: #FFF8EF; border-bottom: 3px solid #D98324; }

/* v8 (02/11) — l'image en bandeau, deux affichages.
 * « dessus » (.bandeau-visuel) : l'image entière, sans recadrage, au-dessus
 * du titre — pour un visuel qui porte déjà son texte.
 * « fond » (.bandeau--image) : sur ordinateur, elle occupe tout le bandeau
 * et le texte se pose à gauche sur un voile blanc ; sur téléphone, elle
 * passe au-dessus du texte, recadrée au centre en 16:9. */
.bandeau-visuel { background: var(--msb-fond); line-height: 0; }
.bandeau-visuel img { display: block; width: 100%; height: auto; }
.bandeau--image { position: relative; padding: 0; overflow: hidden; }
.bandeau__image { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: center; background: var(--msb-fond); }
.bandeau--image .bandeau__texte { padding: 1.75rem 0 2.25rem; }
@media (min-width: 48rem) {
    .bandeau--image { display: flex; align-items: center; min-height: clamp(22rem, 33vw, 34rem); }
    .bandeau--image .bandeau__image { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
    .bandeau--image::before {
        content: ""; position: absolute; inset: 0; z-index: 1;
        background: linear-gradient(90deg, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.86) 38%, rgba(255,255,255,0) 68%);
    }
    .bandeau--image .bandeau__texte { position: relative; z-index: 2; padding: 3rem 0; }
    .bandeau--image .bandeau__texte > * { max-width: 34rem; }
    .bandeau--image p.chapo { color: var(--msb-texte); }
}
.bandeau--image.bandeau--brouillon { border-bottom: 3px solid #D98324; }

/* ------------------------------------------------------------- fil */
.fil { font-size: 0.875rem; color: var(--msb-texte-doux); padding: 0.9rem 0 0; }
.fil ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; padding: 0; }
.fil li::after { content: "›"; margin-left: 0.35rem; color: var(--msb-bordure); }
.fil li:last-child::after { content: ""; }
.fil a { text-decoration: none; }

/* ------------------------------------------------------------- boutons */
.action {
    display: inline-block; padding: 0.85rem 1.6rem; border-radius: var(--msb-rayon);
    background: var(--msb-turquoise); color: var(--msb-noir);
    font-family: var(--msb-police-titre); font-weight: 800; font-size: 1.05rem;
    text-decoration: none; border: 2px solid var(--msb-turquoise);
}
.action:hover { background: var(--msb-turquoise-fonce); border-color: var(--msb-turquoise-fonce); color: var(--msb-blanc); }
.action--discret { background: transparent; border-color: var(--msb-noir); color: var(--msb-noir); }
.action--discret:hover { background: var(--msb-noir); color: var(--msb-blanc); }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.5rem 0 0; }

/* ------------------------------------------------------------- contenu */
.contenu { padding: 2.5rem 0 3rem; }
.contenu > section + section { margin-top: 0.5rem; }
.corps { max-width: 44rem; }
.corps p:last-child { margin-bottom: 0; }

.prix {
    display: inline-flex; align-items: baseline; gap: 0.5rem;
    font-family: var(--msb-police-titre); font-weight: 800;
    font-size: 1.6rem; margin: 0 0 1rem;
}
.prix small { font-size: 0.95rem; font-weight: 400; color: var(--msb-texte-doux); }

/* --------------------------------------------------------------- cartes */
.cartes {
    display: grid; gap: 1rem; margin: 1.25rem 0 0; padding: 0; list-style: none;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}
.cartes li {
    border: 1px solid var(--msb-bordure); border-radius: var(--msb-rayon);
    padding: 1rem 1.1rem; background: var(--msb-blanc);
}
.cartes a { font-family: var(--msb-police-titre); font-weight: 700; text-decoration: none; }
.cartes a:hover { text-decoration: underline; }
.cartes p { font-size: 0.925rem; color: var(--msb-texte-doux); margin: 0.35rem 0 0; }

/* ------------------------------------------------------------------ FAQ */
.questions { margin-top: 1rem; }
.questions details {
    border-bottom: 1px solid var(--msb-bordure); padding: 0.9rem 0;
}
.questions summary {
    font-family: var(--msb-police-titre); font-weight: 700; cursor: pointer;
    font-size: 1.05rem;
}
.questions details > :not(summary) { margin-top: 0.6rem; }

/* ------------------------------------------------------------------ pied */
.pied {
    border-top: 1px solid var(--msb-bordure); background: var(--msb-fond);
    padding: 2rem 0 2.5rem; font-size: 0.925rem; color: var(--msb-texte-doux);
    margin-top: 3rem;
}
.pied h2 { font-size: 1rem; margin: 0 0 0.5rem; }
.pied ul { list-style: none; margin: 0; padding: 0; columns: 2; }
.pied li { margin-bottom: 0.3rem; break-inside: avoid; }
.pied__colonnes { display: grid; gap: 1.5rem 2.5rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.pied__mentions { margin-top: 1.75rem; padding-top: 1rem; border-top: 1px solid var(--msb-bordure); }

/* ------------------------------------------------------------- brouillon */
.brouillon {
    background: #FFF8EF; border-left: 4px solid #D98324; border-radius: var(--msb-rayon);
    padding: 0.9rem 1.1rem; margin: 0 0 1.5rem; font-size: 0.95rem;
}
.brouillon strong { font-family: var(--msb-police-titre); }

@media (max-width: 40rem) {
    .pied ul { columns: 1; }
    .tete__barre { gap: 0.5rem; }
}

/* ------------------------------------------------------------------
 * v2 — le tunnel de reservation.
 * ------------------------------------------------------------------ */

.tunnel { padding: 2rem 0 3rem; max-width: 52rem; }
.tunnel h1 { margin-top: 0.5rem; }
.tunnel .chapo { font-size: 1.1rem; color: var(--msb-texte-doux); max-width: 42rem; }
.annonce {
    background: var(--msb-fond); border-radius: var(--msb-rayon);
    padding: 0.85rem 1.1rem; margin: 0 0 1.5rem;
}

/* Les étapes. Numérotées : on veut savoir combien il en reste. */
.etapes { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; list-style: none; margin: 0 0 1.75rem; padding: 0; }
.etapes li { display: flex; align-items: center; gap: 0.4rem; color: var(--msb-texte-doux); font-size: 0.9rem; }
.etapes__num {
    display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%;
    border: 2px solid var(--msb-bordure); font-weight: 700; font-size: 0.85rem;
}
.etapes__faite .etapes__num { background: var(--msb-turquoise); border-color: var(--msb-turquoise); color: var(--msb-noir); }
.etapes__ici { color: var(--msb-texte); font-weight: 600; }
.etapes__ici .etapes__num { border-color: var(--msb-noir); }

.alerte-boutique {
    background: #FDECEA; border-left: 4px solid #B3261E; border-radius: var(--msb-rayon);
    padding: 0.9rem 1.1rem; margin: 0 0 1.5rem;
}
.alerte-boutique p { margin: 0.2rem 0; }

/* Le calendrier. Un bouton par jour libre : pas de JavaScript, donc pas
 * de date choisie qu'un script aurait manquée. */
.creneau-choix fieldset { border: 0; padding: 0; margin: 1.5rem 0; }
.creneau-choix legend { font-family: var(--msb-police-titre); font-weight: 700; margin-bottom: 0.5rem; }
.pastille-choix { display: inline-flex; align-items: center; gap: 0.5rem; margin-right: 1.25rem; }
.pastille-choix small { display: block; color: var(--msb-texte-doux); font-size: 0.85rem; }

.calendrier-boutique { margin: 1.5rem 0; }
.calendrier-boutique__tete {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.75rem;
}
.calendrier-boutique__tete h2 { margin: 0; text-transform: capitalize; font-size: 1.25rem; }
.calendrier-boutique__grille { width: 100%; border-collapse: collapse; table-layout: fixed; }
.calendrier-boutique__grille th {
    font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--msb-texte-doux); padding-bottom: 0.4rem; font-weight: 600;
}
.calendrier-boutique__grille td { padding: 2px; text-align: center; }
.jour {
    display: block; width: 100%; padding: 0.7rem 0; border-radius: var(--msb-rayon);
    font-family: var(--msb-police-titre); font-weight: 700; font-size: 1rem;
    border: 2px solid transparent; background: var(--msb-fond); color: var(--msb-texte);
}
button.jour--libre { cursor: pointer; background: var(--msb-blanc); border-color: var(--msb-turquoise); }
button.jour--libre:hover { background: var(--msb-turquoise); }
.jour--pris { color: #AAB0B0; background: transparent; }

/* Les formules. */
.formules { border: 0; padding: 0; margin: 1.75rem 0; }
.formules legend { font-family: var(--msb-police-titre); font-weight: 800; font-size: 1.15rem; margin-bottom: 0.75rem; }
.formule {
    display: flex; gap: 0.75rem; align-items: flex-start; padding: 1rem 1.1rem; margin-bottom: 0.6rem;
    border: 2px solid var(--msb-bordure); border-radius: var(--msb-rayon); cursor: pointer;
}
.formule:has(input:checked) { border-color: var(--msb-turquoise); background: #F4FEFD; }
.formule__corps { display: block; }
.formule__titre { display: block; font-family: var(--msb-police-titre); font-weight: 700; }
.formule__detail { display: block; font-size: 0.925rem; color: var(--msb-texte-doux); margin-top: 0.15rem; }
.formule__prix { display: block; font-family: var(--msb-police-titre); font-weight: 800; font-size: 1.2rem; margin-top: 0.35rem; }
.formule__lien { font-size: 0.9rem; }

/* Les formulaires du tunnel. */
.tunnel fieldset { border: 0; padding: 0; margin: 1.75rem 0; }
.tunnel legend { font-family: var(--msb-police-titre); font-weight: 800; font-size: 1.15rem; margin-bottom: 0.5rem; }
.tunnel label { display: block; margin-bottom: 0.9rem; font-weight: 600; }
.tunnel label small { display: block; font-weight: 400; color: var(--msb-texte-doux); font-size: 0.875rem; }
.tunnel input[type="text"], .tunnel input[type="email"], .tunnel input[type="tel"] {
    display: block; width: 100%; margin-top: 0.25rem; padding: 0.65rem 0.8rem; font: inherit;
    border: 2px solid var(--msb-bordure); border-radius: var(--msb-rayon); background: var(--msb-blanc);
}
.tunnel input:focus-visible { outline: 3px solid var(--msb-turquoise); outline-offset: 1px; }
.champs-deux { display: grid; gap: 0 1rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }

/* Le récapitulatif. */
.recap { border: 2px solid var(--msb-bordure); border-radius: var(--msb-rayon); padding: 1.25rem; margin: 1.5rem 0; }
.recap__quoi { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1.25rem; margin: 0 0 1.25rem; }
.recap__quoi dt { font-weight: 600; color: var(--msb-texte-doux); }
.recap__quoi dd { margin: 0; }
.recap__lignes { width: 100%; border-collapse: collapse; }
.recap__lignes th { text-align: left; font-weight: 400; padding: 0.35rem 0; }
.recap__lignes td { text-align: right; padding: 0.35rem 0; white-space: nowrap; }
.recap__lignes tfoot { border-top: 2px solid var(--msb-bordure); }
.recap__lignes tfoot th { padding-top: 0.6rem; }
.recap__total th, .recap__total td { font-family: var(--msb-police-titre); font-weight: 800; font-size: 1.1rem; }
.recap__acompte th, .recap__acompte td { font-weight: 700; color: var(--msb-turquoise-fonce); }

.case-cgv { display: flex; gap: 0.6rem; align-items: flex-start; font-weight: 400; margin: 1.5rem 0; }
.action--payer { font-size: 1.1rem; padding: 1rem 2rem; }
.reference { font-size: 1.15rem; }

@media (max-width: 40rem) {
    .etapes__nom { display: none; }
    .etapes__ici .etapes__nom { display: inline; }
    .recap__quoi { grid-template-columns: 1fr; }
    .recap__quoi dt { margin-top: 0.5rem; }
}

/* ------------------------------------------------------------------
 * v3 — le HT sous le TTC, la vitrine par famille.
 * ------------------------------------------------------------------ */

/* TTC en gros, HT en petit dessous. Les deux portent leur mention : un
 * « 200 € » seul sous « 240 € » se lirait comme un prix barré. */
.prix-double { display: inline-flex; flex-direction: column; line-height: 1.15; vertical-align: top; }
.prix-double__ht {
    font-family: var(--msb-police-texte); font-weight: 400; font-size: 0.6em;
    color: var(--msb-texte-doux); margin-top: 0.15rem; white-space: nowrap;
}
.prix-double__ttc { white-space: nowrap; }
.prix { align-items: flex-start; flex-wrap: wrap; }
.prix__de { font-size: 0.7em; font-weight: 700; padding-top: 0.25em; }
.formule__prix .prix-double__ht { font-size: 0.72em; }
.recap__lignes td .prix-double { align-items: flex-end; }
.recap__lignes td .prix-double__ht { font-size: 0.8rem; }

.vitrine { margin-bottom: 1rem; }
.vitrine__famille + .vitrine__famille { margin-top: 0.5rem; }
.vitrine__famille h2 a { text-decoration: none; }
.vitrine__accroche { color: var(--msb-texte-doux); margin: -0.3rem 0 0; }
.vitrine__produits .produit { display: flex; flex-direction: column; }
.produit img { border-radius: calc(var(--msb-rayon) - 4px); margin-bottom: 0.6rem; object-fit: cover; aspect-ratio: 3 / 2; }
.produit__nom { font-family: var(--msb-police-titre); font-weight: 700; }
.produit__prix {
    margin-top: auto !important; padding-top: 0.6rem; color: var(--msb-texte) !important;
    font-family: var(--msb-police-titre); font-weight: 800; font-size: 1.25rem !important;
    display: flex; gap: 0.35rem; align-items: flex-start;
}
.produit__prix .prix__de { font-size: 0.8rem; }
.vitrine__suite { margin-top: 1.5rem; }

/* Les options du tunnel, rangées par famille. */
.formules--famille legend small { display: block; font-family: var(--msb-police-texte); font-weight: 400; font-size: 0.9rem; color: var(--msb-texte-doux); }

/* Les liens légaux du pied de page. */
.pied__legal { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; margin-top: 0.75rem; }

/* ------------------------------------------------------------------
 * v4 — la couleur de chaque famille, en accent : un trait devant le
 * titre et un liseré sur les cartes. Jamais en couleur de texte.
 * ------------------------------------------------------------------ */
.vitrine__famille > h2, .formules--famille > legend { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.6rem; }
.vitrine__famille > h2::before, .formules--famille > legend::before {
    content: ""; flex: none; width: 0.4rem; height: 1.1em; border-radius: 3px; align-self: center;
    background: var(--famille, var(--msb-bordure));
}
.formules--famille > legend small { flex-basis: 100%; }
.vitrine__famille .produit { border-top: 4px solid var(--famille, var(--msb-bordure)); }
.formules--famille .formule { border-left: 6px solid var(--famille, var(--msb-bordure)); }
.formules--famille .formule:has(input:checked) { border-color: var(--famille, var(--msb-turquoise)); background: color-mix(in srgb, var(--famille, #10DCCB) 8%, #fff); }

/* ------------------------------------------------------------------
 * v5 — le choix de la formule tient en deux colonnes, avec photo, et
 * le total suit chaque clic.
 * ------------------------------------------------------------------ */
.formules__grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.formules__grille .formule { margin-bottom: 0; flex-direction: column; gap: 0; padding: 0; overflow: hidden; }
.formules__grille .formule__corps { padding: 0.85rem 1rem 1rem; display: flex; flex-direction: column; gap: 0.15rem; flex: 1; }
.formule__ligne { display: flex; align-items: flex-start; gap: 0.5rem; }
.formule__ligne input { margin-top: 0.3rem; flex: none; width: 1.1rem; height: 1.1rem; accent-color: var(--msb-noir); }
.formule__photo { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--msb-fond); }
.formules__grille .formule__prix { margin-top: auto; padding-top: 0.4rem; }
/* Une carte seule : toute la largeur, photo à gauche. */
.formules__grille--seule { grid-template-columns: 1fr; }
.formules__grille.formules__grille--seule > .formule { flex-direction: row; align-items: stretch; }
.formules__grille.formules__grille--seule .formule__photo { width: 11rem; flex: none; height: auto; align-self: stretch; aspect-ratio: auto; min-height: 7rem; }

/* La barre du total, collée en bas de l'écran pendant le choix. */
.total-direct {
    position: sticky; bottom: 0; z-index: 5; margin: 1.5rem -1rem 0; padding: 0.85rem 1rem;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    background: var(--msb-blanc); border-top: 2px solid var(--msb-turquoise);
    box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.08);
}
.total-direct[hidden] { display: none; }
.total-direct__montant { display: flex; flex-direction: column; line-height: 1.25; }
.total-direct__montant strong { font-family: var(--msb-police-titre); font-size: 1.35rem; }
.total-direct__montant small { color: var(--msb-texte-doux); font-size: 0.8rem; }
.total-direct__libelle { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--msb-texte-doux); }
.total-direct__remise { color: var(--msb-turquoise-fonce) !important; font-weight: 600; }

@media (max-width: 40rem) {
    .formules__grille .formule__corps { padding: 0.65rem 0.7rem 0.8rem; font-size: 0.92rem; }
    .formules__grille .formule__detail { font-size: 0.8rem; }
    .formules__grille .formule__prix { font-size: 1.05rem; }
    .formules__grille.formules__grille--seule .formule__photo { width: 7.5rem; }
    .total-direct .action { padding-inline: 1rem; }
}
.formules--famille .formules__grille .formule { border-left-width: 2px; border-top: 5px solid var(--famille, var(--msb-bordure)); }
.sous-total { background: var(--msb-fond); border-radius: var(--msb-rayon); padding: 0.75rem 1rem; margin: 0 0 1.25rem; }
/* « .tunnel label » (display: block) l'emportait sur « .formule » : les
 * cartes restaient en bloc, et la carte seule n'avait pas sa photo à gauche. */
.tunnel label.formule { display: flex; font-weight: 400; }
.tunnel .formules__grille label.formule { margin-bottom: 0; }
.acompte-regles { margin: -0.75rem 0 1.25rem; padding: 0.75rem 1rem 0.75rem 2rem; background: var(--msb-fond); border-radius: var(--msb-rayon); font-size: 0.925rem; }
.acompte-regles li { margin: 0.2rem 0; }

/* Livraison ou retrait en boutique (29/10) */
.tunnel label.remise-choix__option, .remise-choix__option {
    display: flex; font-weight: 400; gap: 0.75rem; align-items: flex-start; padding: 0.8rem 1rem; margin: 0 0 0.6rem;
    border: 1px solid var(--msb-bordure); border-radius: var(--msb-rayon); cursor: pointer; background: var(--msb-blanc);
}
.remise-choix__option:has(input:checked) { border-color: var(--msb-turquoise-fonce); background: var(--msb-fond); }
.remise-choix__option input { margin-top: 0.35rem; flex: 0 0 auto; }
.remise-choix__option span { display: flex; flex-direction: column; gap: 0.1rem; }
.remise-choix__option small { color: var(--msb-texte-doux); font-size: 0.9rem; }
#retrait-heures { margin-top: 0.4rem; }
.tunnel input[type="datetime-local"] {
    display: block; width: 100%; margin-top: 0.25rem; padding: 0.65rem 0.8rem; font: inherit;
    border: 2px solid var(--msb-bordure); border-radius: var(--msb-rayon); background: var(--msb-blanc);
}
.remise-imposee { margin: 1rem 0 1.5rem; padding: 0.7rem 1rem; background: var(--msb-fond); border-radius: var(--msb-rayon); }

/* Commande au-delà de la distance habituelle (29/10) */
.alerte-boutique--info { background: #E8F7F5; border-left-color: var(--msb-turquoise-fonce); }

/* ------------------------------------------------------------------
 * v9 (09/11) — carte produit entièrement cliquable, bandeau de mise en
 * avant (« Le plus demandé »…), photos sur la page d'un produit.
 * ------------------------------------------------------------------ */
.vitrine__produits .produit { position: relative; }
.vitrine__produits a.produit__nom::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.vitrine__produits .produit:has(a.produit__nom):hover { border-color: var(--msb-turquoise-fonce); }
.vitrine__produits .produit:has(a.produit__nom:focus-visible) { outline: 3px solid var(--msb-turquoise); outline-offset: 2px; }

.ruban {
    display: inline-block; max-width: calc(100% - 1.2rem);
    padding: 0.25rem 0.65rem; border-radius: 999px;
    background: var(--msb-noir); color: var(--msb-blanc);
    font-family: var(--msb-police-titre); font-weight: 800; font-size: 0.78rem;
    letter-spacing: 0.02em; line-height: 1.3; text-transform: uppercase;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ruban::before { content: "★ "; color: var(--msb-turquoise); }
.produit .ruban { position: absolute; top: 0.6rem; left: 0.6rem; z-index: 1; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18); }
.produit--en-avant { border-color: var(--msb-turquoise-fonce); box-shadow: 0 0 0 1px var(--msb-turquoise-fonce); }
/* Sans photo, le ruban ne doit pas masquer le nom. */
.produit--en-avant:not(:has(img)) { padding-top: 2.6rem; }
.ruban--page { margin: 0 0 0.8rem; }

.galerie-produit {
    display: grid; gap: 0.75rem; margin: 0 0 1.5rem;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
}
.galerie-produit__photo { margin: 0; }
.galerie-produit__photo img {
    display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
    border-radius: var(--msb-rayon); background: var(--msb-fond);
}
.galerie-produit__photo--une { grid-column: 1 / -1; }
@media (min-width: 48rem) {
    .galerie-produit { grid-template-columns: repeat(4, 1fr); }
    .galerie-produit__photo--une { grid-column: span 4; max-width: 46rem; }
}
/* Le ruban dans le tunnel de réservation. */
.formule { position: relative; }
.formule .ruban { position: absolute; top: 0.6rem; left: 0.6rem; z-index: 1; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18); }
.formule--en-avant:not(:has(.formule__photo)) { padding-top: 2.6rem; }
.formules__grille .formule--en-avant:not(:has(.formule__photo)) .formule__corps { padding-top: 2.6rem; }
.formules__grille .formule--en-avant:not(:has(.formule__photo)) { padding-top: 0; }