/* Madame Beans : blocs ajoutés au site existant.
   Tout le reste vient du thème Odoo d'origine (polices, couleurs, boutons).
   Les couleurs reprennent la charte : vert #5b7254, jaune #fbc629, sable #e2dbcb, nude #cfb083. */

.mb-section { padding-top: 64px; padding-bottom: 64px; }
.mb-section-sm { padding-top: 40px; padding-bottom: 40px; }
.mb-sable { background-color: rgb(250, 247, 240); }

.mb-title { text-align: center; color: rgb(91, 114, 84); font-size: 2.5rem; margin-bottom: .4rem; }
.mb-title.mb-dark { color: rgb(35, 40, 36); font-weight: 700; font-size: 2.1rem; }
.mb-sub { text-align: center; color: rgb(207, 176, 131); font-size: 1.25rem; font-weight: 600; margin-bottom: 0; }
.mb-lead { font-size: 1.15rem; }
@media (max-width: 991.98px) {
  .mb-title { font-size: 1.75rem; }
  .mb-title.mb-dark { font-size: 1.5rem; }
}

/* Pastille verte de titre, comme « Madame Beans dans la presse... » */
.mb-pill { display: inline-block; background: rgb(91, 114, 84); border-radius: 20px; padding: 12px 34px; }
.mb-pill h2 { color: #fff; margin: 0; font-size: 1.75rem; }

/* ---------- Accueil : « Comment pouvons-nous vous accompagner ? » ---------- */

.mb-sectors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 40px; }

/* Cartes parcours : photo plein cadre, titre posé sur un dégradé, pastille jaune qui pivote au survol */
.mb-sector {
  position: relative; display: block; aspect-ratio: 3 / 4; border-radius: 28px; overflow: hidden;
  isolation: isolate; background: rgb(226, 219, 203); color: #fff; text-decoration: none;
  box-shadow: 0 1px 0 rgba(35, 40, 36, .04);
  transition: transform .45s cubic-bezier(.2, .7, .3, 1), box-shadow .45s cubic-bezier(.2, .7, .3, 1);
}
.mb-sector img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .9s cubic-bezier(.2, .7, .3, 1);
}
.mb-sector::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(35, 40, 36, 0) 0%, rgba(35, 40, 36, .04) 35%, rgba(35, 40, 36, .22) 58%, rgba(35, 40, 36, .55) 80%, rgba(35, 40, 36, .8) 100%);
  transition: background .45s ease;
}
.mb-sector-body {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; padding: 24px 24px 22px;
}
.mb-sector h3 { margin: 0; color: #fff; font-size: 1.55rem; line-height: 1.12; text-shadow: 0 2px 14px rgba(0, 0, 0, .25); }
.mb-sector-go {
  flex: 0 0 auto; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%;
  background: rgb(251, 198, 41); color: rgb(35, 40, 36); font-size: 1.05rem;
  transition: transform .45s cubic-bezier(.2, .7, .3, 1);
}
.mb-sector:hover, .mb-sector:focus-visible { transform: translateY(-8px); box-shadow: 0 26px 50px -18px rgba(35, 40, 36, .45); color: #fff; }
.mb-sector:hover img, .mb-sector:focus-visible img { transform: scale(1.07); }
.mb-sector:hover::after { background: linear-gradient(180deg, rgba(91, 114, 84, .08) 30%, rgba(35, 40, 36, .86) 100%); }
.mb-sector:hover .mb-sector-go { transform: rotate(-45deg) scale(1.08); }
.mb-sector:focus-visible { outline: 3px solid rgb(251, 198, 41); outline-offset: 4px; }
@media (max-width: 991.98px) { .mb-sector h3 { font-size: 1.25rem; } .mb-sector-body { padding: 18px; } }
@media (max-width: 767.98px) {
  .mb-sectors { grid-template-columns: 1fr; gap: 16px; }
  .mb-sector { aspect-ratio: 16 / 11; border-radius: 22px; }
}
@media (prefers-reduced-motion: reduce) { .mb-sector, .mb-sector img, .mb-sector-go { transition: none; } }
.mb-curious { text-align: center; margin-top: 36px; }
.mb-curious p { font-weight: 700; font-size: 1.3rem; margin-bottom: 12px; }
.mb-round {
  display: inline-grid; place-items: center; width: 58px; height: 58px; border-radius: 50%;
  background: rgb(251, 198, 41); color: rgb(35, 40, 36); font-size: 1.4rem; text-decoration: none;
  transition: transform .2s ease;
}
.mb-round:hover { transform: translateY(3px); color: rgb(35, 40, 36); }

/* ---------- Listes à cocher (les cases se cochent au scroll) ---------- */

.mb-checks { list-style: none; padding: 0; margin: 18px 0 0; }
.mb-checks li { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; font-size: 1.12rem; }
.mb-checks li::before {
  content: ""; flex: 0 0 auto; width: 24px; height: 24px; margin-top: 2px; border-radius: 6px;
  background: rgb(76, 175, 80) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat;
  transform: scale(0); transition: transform .4s cubic-bezier(.34, 1.56, .64, 1);
}
.mb-checks.mb-on li::before { transform: scale(1); }
.mb-checks.mb-on li:nth-child(2)::before { transition-delay: .08s; }
.mb-checks.mb-on li:nth-child(3)::before { transition-delay: .16s; }
.mb-checks.mb-on li:nth-child(4)::before { transition-delay: .24s; }
.mb-checks.mb-on li:nth-child(5)::before { transition-delay: .32s; }
.mb-checks.mb-on li:nth-child(6)::before { transition-delay: .40s; }
.mb-checks.mb-outline li::before { background-color: transparent; border-radius: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5.5 5.5L20 6.5' fill='none' stroke='%235b7254' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-size: 100%; }
@media (prefers-reduced-motion: reduce) { .mb-checks li::before { transform: none; transition: none; } }

/* ---------- Visuels ---------- */

.mb-photo { width: 100%; max-height: 430px; border-radius: 20px; object-fit: cover; }
.mb-box { background: rgb(226, 219, 203); border-radius: 20px; padding: 30px; }

.mb-badges { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin-top: 32px; }
.mb-badges.mb-five { grid-template-columns: repeat(5, 1fr); max-width: 960px; margin-inline: auto; }
.mb-badges img { width: 100%; border-radius: 14px; }
@media (max-width: 991.98px) { .mb-badges, .mb-badges.mb-five { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 575.98px) { .mb-badges, .mb-badges.mb-five { grid-template-columns: repeat(2, 1fr); } }

.mb-products { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 32px; }
.mb-products img { width: 100%; border-radius: 20px; transition: transform .3s ease; }
.mb-products img:hover { transform: translateY(-5px); }
@media (max-width: 767.98px) { .mb-products { grid-template-columns: 1fr; } }

.mb-partners { display: flex; justify-content: center; align-items: center; gap: 40px; flex-wrap: wrap; margin-top: 16px; }
.mb-partners img { max-height: 90px; width: auto; }

.mb-gallery { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-top: 28px; }
.mb-gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; transition: transform .3s ease; }
.mb-gallery img:hover { transform: scale(1.04); }
@media (max-width: 991.98px) { .mb-gallery { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 575.98px) { .mb-gallery { grid-template-columns: repeat(2, 1fr); } }

/* Bloc miettes : liste sable à gauche, photo et bulle « fiches techniques » à droite */
.mb-crumbs { position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 24px; margin-top: 32px; }
.mb-crumbs-media { position: relative; min-height: 380px; border-radius: 20px; overflow: hidden;
  background: #fff url("/assets/mb/miettes.jpg") center / cover no-repeat; display: grid; place-items: center; }
.mb-bubble { background: rgb(226, 219, 203); border-radius: 50% 46% 54% 44% / 48% 56% 44% 52%;
  padding: 44px 34px; max-width: 320px; text-align: center; }
.mb-bubble p { font-weight: 700; margin-bottom: 14px; }
@media (max-width: 991.98px) { .mb-crumbs { grid-template-columns: 1fr; } .mb-crumbs-media { min-height: 300px; } }

/* ---------- Formulaire HubSpot ---------- */

.mb-form-note { margin: 8px 0 0; font-size: .95rem; }
.mb-form-note[data-state="ok"] { color: rgb(91, 114, 84); font-weight: 600; }
.mb-form-note[data-state="ko"] { color: #b3261e; }

/* ---------- Popup starter pack ---------- */

.mb-pop { position: fixed; inset: 0; z-index: 1100; display: grid; place-items: center; padding: 20px;
  background: rgba(35, 40, 36, .55); opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.mb-pop.mb-on { opacity: 1; pointer-events: auto; }
.mb-pop-box { position: relative; background: #fff; border-radius: 25px; padding: 36px 32px; width: min(100%, 520px); text-align: center; }
.mb-pop-box img { width: 70px; margin: 0 auto 10px; }
.mb-pop-box h3 { color: rgb(91, 114, 84); }
.mb-pop-box form { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 16px; }
.mb-pop-box input { flex: 1 1 220px; }
.mb-pop-close { position: absolute; top: 10px; right: 14px; border: 0; background: none; font-size: 1.8rem; line-height: 1; cursor: pointer; }

/* Premier bloc des pages parcours : dégagé du bandeau de navigation fixe */
.mb-first { padding-top: 150px; }
@media (max-width: 991.98px) { .mb-first { padding-top: 110px; } }
/* Le souligné dessiné par Odoo se casse si le mot passe à la ligne */
.mb-title .o_text_highlight { white-space: nowrap; }
.mb-img-plateau { width: 760px; max-width: 100%; height: auto; }
/* Sur mobile, la gouttière large de Bootstrap dépassait du conteneur de quelques pixels */
@media (max-width: 991.98px) { .mb-section .row { --bs-gutter-x: 1.5rem; } }
@media (max-width: 991.98px) {
  .mb-section .row { margin-left: 0; margin-right: 0; }
  .mb-section .row > [class*="col-"] { padding-left: 0; padding-right: 0; }
}
.mb-section { overflow-x: clip; }
/* Défaut présent sur le site d'origine : le souligné se dessine à côté du mot quand celui-ci passe à la ligne */
#wrap .o_text_highlight { white-space: nowrap; }

/* ---------- Logo du bandeau (fichier recadré) ---------- */
header .navbar-brand img[src*="logo-nav"] { width: auto !important; height: 58px; }
@media (max-width: 991.98px) { header .navbar-brand img[src*="logo-nav"] { height: 50px; } }

/* ---------- Bandeau cookies : même rendu que le site, affiché dès l'arrivée ---------- */
.mb-cookies { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1090; box-shadow: 0 -8px 30px rgba(35, 40, 36, .12); }
.mb-cookies[hidden] { display: none !important; }
.mb-cookies .btn + .btn { margin-left: 6px; }
@media (max-width: 991.98px) { .mb-cookies .text-end { text-align: left !important; padding-top: 4px; } }

/* ---------- Vidéos : vignette cliquable, YouTube chargé au clic ---------- */
.mb-video { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden;
  background: #1f2a1c; box-shadow: 0 18px 40px -18px rgba(40, 55, 36, .45); }
.mb-video-play { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0;
  background: none; cursor: pointer; display: grid; place-items: center; }
.mb-video-play img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s cubic-bezier(.2, .7, .2, 1), filter .4s; filter: brightness(.82); }
.mb-video-play:hover img { transform: scale(1.04); filter: brightness(.7); }
.mb-video-btn { position: relative; width: 84px; height: 84px; border-radius: 50%; background: #fbc629;
  box-shadow: 0 0 0 0 rgba(251, 198, 41, .6); animation: mb-pulse 2.2s ease-out infinite; transition: transform .3s; }
.mb-video-btn::after { content: ""; position: absolute; left: 34px; top: 26px; border-style: solid;
  border-width: 16px 0 16px 26px; border-color: transparent transparent transparent #2c3a28; }
.mb-video-play:hover .mb-video-btn { transform: scale(1.1); }
@keyframes mb-pulse { 0% { box-shadow: 0 0 0 0 rgba(251, 198, 41, .6); } 100% { box-shadow: 0 0 0 26px rgba(251, 198, 41, 0); } }
.mb-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Boutons « Prendre RDV » : texte lisible sur le jaune ---------- */
#wrap .btn-custom.bg-o-color-1, #wrap .btn-custom.bg-o-color-1 * { color: #212529 !important; }
#wrap .btn-custom.bg-o-color-1 { border-color: #fbc629 !important; transition: transform .25s, box-shadow .25s, background-color .25s; }
#wrap .btn-custom.bg-o-color-1:hover { filter: none; background-color: #fccf49 !important;
  transform: translateY(-2px); box-shadow: 0 10px 22px -10px rgba(160, 120, 0, .6); }

/* ---------- Site vivant : arrivée du hero, blocs qui montent, soulignés dessinés ---------- */
.mb-anim .mb-hero { animation: mb-carte 1s cubic-bezier(.2, .7, .2, 1) both; }
.mb-anim .mb-hero img { animation: mb-logo 1s cubic-bezier(.3, 1.4, .5, 1) .25s both; }
.mb-anim .mb-hero.mb-in .mb-hero-logo { animation: none; }
@keyframes mb-carte { from { opacity: 0; transform: translateY(40px) scale(.96); } }
@keyframes mb-logo { from { opacity: 0; transform: scale(.7) rotate(-6deg); } }

.mb-anim .mb-reveal { opacity: 0; transform: translateY(28px);
  transition: opacity .8s ease var(--mb-d, 0ms), transform .9s cubic-bezier(.2, .7, .2, 1) var(--mb-d, 0ms); }
.mb-anim .mb-reveal.mb-in { opacity: 1; transform: none; }

.o_text_highlight[class*="freehand"] { position: relative; }
#wrap .o_text_highlight svg.mb-souligne { position: absolute; left: -2%; bottom: -.28em; width: 104%;
  height: .45em; overflow: visible; pointer-events: none; z-index: 0; }
.mb-souligne path { fill: none; stroke: var(--text-highlight-color, #fbc629); stroke-width: calc(var(--text-highlight-width, 3px) + 1px);
  stroke-linecap: round; vector-effect: non-scaling-stroke; }
/* le trait se dessine de gauche à droite (le tiret SVG se comportait mal avec
   vector-effect: non-scaling-stroke et coupait le trait en deux) */
.mb-anim .mb-souligne { clip-path: inset(0 100% 0 0); transition: clip-path 1s ease .3s; }
.mb-anim .mb-in .mb-souligne { clip-path: inset(0 -2% 0 0); }

@media (prefers-reduced-motion: reduce) { .mb-video-btn { animation: none; } }

/* ---------- Menu : les déroulants s'ouvrent au survol (sans attendre le JS d'Odoo) ---------- */
@media (hover: hover) and (min-width: 992px) {
  header .nav-item.dropdown { position: relative; }
  header .nav-item.dropdown > .dropdown-menu { top: 100%; left: 0; margin-top: 0; }
  header .nav-item.dropdown:hover > .dropdown-menu { display: block; animation: mb-menu .25s ease both; }
  header .nav-item.dropdown > .dropdown-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
}
@keyframes mb-menu { from { opacity: 0; transform: translateY(-6px); } }

/* ---------- Boutons : les images décoratives d'Odoo (traits, z-index 5) passaient par-dessus ---------- */
#wrap .o_grid_item:has(a.btn) { z-index: 20 !important; }

/* ---------- Mobile : marges latérales (les rangées Odoo annulaient la marge du conteneur) ---------- */
@media (max-width: 991.98px) {
  #wrap section > .container { padding-left: 16px; padding-right: 16px; }
  #wrap section > .container > .row { margin-left: 0; margin-right: 0; }
  header .container.px-0 { padding-left: 12px !important; padding-right: 12px !important; }
}
/* Mobile : la photo avant « Utilisation, stockage, conformité » touchait le bandeau jaune */
@media (max-width: 991.98px) { #wrap .s_masonry_block.pb0 { padding-bottom: 32px !important; } }

/* =========================================================================
   Retours V1 de la cliente (06/10) : ajustements et nouveaux blocs
   ========================================================================= */

/* Les grilles d'Odoo sont réglées sur des lignes de 50 px et toutes les compositions
   (rectangles sable, ronds jaunes, pictogrammes) sont calées dessus. Laisser les lignes
   grandir au contenu désalignait les fonds par rapport aux textes : c'est le « ça ne
   s'affiche pas correctement » signalé par la cliente le 04/11 sur « Entre tradition et
   innovation » et « Nos engagements ». On garde donc la trame d'origine. */
#wrap .row.o_grid_mode { grid-auto-rows: 50px; }

/* Une interligne entre chaque phrase */
.mb-para { display: block; }
.mb-para + .mb-para { margin-top: .7em; }

/* ---------- Ouverture : l'encart se centre, le logo arrive, la signature s'écrit ---------- */
#wrap .s_image_title.o_full_screen_height { padding-top: 0 !important; padding-bottom: 0 !important;
  display: flex; align-items: center; min-height: 100svh !important; }
#wrap .s_image_title.o_full_screen_height > .container { width: 100%; }
.mb-hero { text-align: center; }
.mb-hero-logo { display: block; margin: 0 auto; max-width: 100%; height: auto; }
/* le logo et la signature occupent la même place : le contenu de l'encart change */
.mb-hero-pile { display: grid; }
.mb-hero-pile > * { grid-area: 1 / 1; align-self: center; margin: 0; }
.mb-hero-mots { max-width: 720px; margin: 0 auto; opacity: 0; }
.mb-hero.mb-in .mb-hero-mots { opacity: 1; }
.mb-hero.mb-in .mb-hero-pile h1 { opacity: 0; transform: scale(.86); }
.mb-anim .mb-hero-mots { transition: opacity .8s ease .25s; }
.mb-anim .mb-hero-pile h1 { transition: opacity .6s ease, transform .9s cubic-bezier(.2, .7, .2, 1); }
.mb-hero-t { color: rgb(91, 114, 84); font-size: clamp(1.25rem, 2.6vw, 2rem); line-height: 1.25;
  margin: 18px 0 10px; }
.mb-hero-s { font-size: clamp(1rem, 1.5vw, 1.19rem); margin: 0; }
.mb-anim .mb-hero-t { transform: translateY(10px); transition: transform .8s cubic-bezier(.2, .7, .2, 1) .25s; }
.mb-anim .mb-hero.mb-in .mb-hero-t { transform: none; }
@media (max-width: 991.98px) { .mb-hero-t { margin-top: 12px; } }

/* ---------- Phrase-clé mise en avant ---------- */
.mb-claim { max-width: 820px; margin: 44px auto 0; text-align: center; font-size: 1.35rem;
  line-height: 1.45; color: rgb(91, 114, 84); font-weight: 600; }
@media (max-width: 991.98px) { .mb-claim { font-size: 1.12rem; margin-top: 32px; } }

.mb-sous-titre { text-align: center; font-size: 1.2rem; font-weight: 600; color: rgb(35, 40, 36);
  max-width: 900px; margin: 12px auto 0; }
.mb-sous-titre.mb-gauche { text-align: left; margin-left: 0; }
.mb-aere { margin-bottom: 18px; }
.mb-une-ligne { text-wrap: balance; }
@media (min-width: 1200px) { .mb-une-ligne { white-space: nowrap; font-size: min(2.2rem, 2.55vw); } }

/* ---------- Badges : le texte est du texte, le pictogramme reste l'illustration ---------- */
.mb-badge { margin: 0; border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; }
.mb-badge figcaption { font-family: "Fredoka", sans-serif; font-weight: 600; text-transform: uppercase;
  text-align: center; line-height: 1.15; font-size: clamp(.72rem, 1.05vw, .95rem); padding: 12px 8px 4px;
  min-height: 3.1em; display: flex; align-items: center; justify-content: center; }
.mb-badge img { width: 100%; height: auto; display: block; border-radius: 0; }
.mb-vert { background: rgb(91, 114, 84); }
.mb-vert figcaption { color: #fff; }
.mb-jaune { background: rgb(254, 200, 41); }
.mb-jaune figcaption { color: rgb(35, 40, 36); }
.mb-badge.mb-sable { background: rgb(207, 176, 131); }
.mb-badge.mb-sable figcaption { color: rgb(35, 40, 36); }

/* ---------- Plateaux : défilement continu ---------- */
.mb-plateaux { padding: 8px 0 40px; overflow: hidden; }
.mb-mq { overflow: hidden; }
.mb-mq-piste { display: flex; gap: 10px; width: max-content; }
.mb-mq-piste img { width: clamp(190px, 21vw, 300px); height: auto; }
.mb-mq-d .mb-mq-piste { animation: mb-def-d 46s linear infinite; }
.mb-mq-g .mb-mq-piste { animation: mb-def-g 46s linear infinite; }
@keyframes mb-def-d { from { transform: translateX(-33.333%); } to { transform: translateX(0); } }
@keyframes mb-def-g { from { transform: translateX(0); } to { transform: translateX(-33.333%); } }
@media (prefers-reduced-motion: reduce) { .mb-mq-piste { animation: none !important; } }

/* ---------- Plateau annoté : entrée, plat, dessert apparaissent dans l'ordre ---------- */
.mb-regimes { padding-top: 48px; padding-bottom: 48px; }
.mb-plateau { position: relative; width: min(820px, 100%); margin: 18px auto 0; }
.mb-plateau-fond { width: 100%; height: auto; display: block; }
.mb-etiq { position: absolute; height: auto; }
.mb-anim .mb-etiq { opacity: 0; transform: scale(.82); }
.mb-anim .mb-plateau.mb-in .mb-etiq { animation: mb-pop .55s cubic-bezier(.2, 1.5, .5, 1) both; }
.mb-anim .mb-plateau.mb-in .mb-etiq-2 { animation-delay: .45s; }
.mb-anim .mb-plateau.mb-in .mb-etiq-3 { animation-delay: .9s; }
@keyframes mb-pop { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .mb-etiq { opacity: 1 !important; transform: none !important; } }
@media (min-width: 992px) and (max-height: 860px) { .mb-plateau { width: min(620px, 100%); } }

/* ---------- Bouton mis en avant ---------- */
#wrap .btn.mb-cta { padding: 14px 34px; font-size: 1.12rem; border-radius: 40px;
  box-shadow: 0 14px 28px -12px rgba(160, 120, 0, .65); }
#wrap .btn.mb-cta:hover { transform: translateY(-3px); }

/* ---------- Fiches techniques : la forme ovale est retirée ---------- */
.mb-crumbs-media { place-items: center; }

/* ---------- Industrie : titre en pastille et vignettes d'applications ---------- */
.mb-pastille { margin: 0 0 22px; }
.mb-pastille span { display: inline-block; background: rgb(91, 114, 84); color: #fff; border-radius: 16px;
  padding: 10px 26px; font-family: "Fredoka", sans-serif; font-size: clamp(1.2rem, 2vw, 1.7rem); }
.mb-pastille-sm span { font-size: 1rem; padding: 8px 18px; border-radius: 12px; }
.mb-usages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 18px; }
.mb-usage { margin: 0; background: #fff; border-radius: 16px; padding: 14px; display: flex;
  flex-direction: column; gap: 12px; box-shadow: 0 10px 24px -18px rgba(35, 40, 36, .5); }
.mb-usage img { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; border-radius: 10px; }
.mb-usage-icone { display: grid; place-items: center; aspect-ratio: 16 / 11; color: rgb(91, 114, 84);
  font-size: 5rem; background: rgb(250, 247, 240); border-radius: 10px; }
.mb-usage figcaption { font-weight: 700; color: rgb(35, 40, 36); }
@media (max-width: 767.98px) { .mb-usages { grid-template-columns: repeat(2, 1fr); gap: 12px; } }

/* ---------- Nous découvrir : premier bloc de la maquette Canva ---------- */
.mb-savoir { padding: 8px 0 24px; }
.mb-savoir-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .48fr); gap: 32px; align-items: stretch; }
.mb-savoir-photo { overflow: hidden; border-radius: 0 0 0 24px; }
.mb-savoir-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }

.mb-2x { background: rgb(226, 219, 203); border-radius: 50%; width: 270px; max-width: 70%; aspect-ratio: 1;
  display: grid; place-content: center; text-align: center; color: rgb(91, 114, 84); padding: 10px; }
.mb-2x span { font-weight: 600; font-size: .98rem; letter-spacing: .02em; }
.mb-2x span + strong + span { text-transform: uppercase; }
.mb-2x strong { font-family: "Fredoka", sans-serif; font-size: 3.6rem; line-height: 1; }
.mb-fleche { width: 110px; height: 80px; display: block; }
.mb-fleche-1 { margin: -6px 0 -6px 240px; }
.mb-fleche-2 { margin: 6px 0 0 90px; transform: scaleX(-1); }
.mb-encart-vert { background: rgb(91, 114, 84); color: #fff; border-radius: 22px; padding: 24px 28px;
  margin-left: auto; width: min(560px, 100%); }
.mb-encart-vert p { margin: 0; text-align: justify; }
.mb-conso-bloc { text-align: center; max-width: 560px; margin: 14px 0 0; }
.mb-pourtant { color: rgb(91, 114, 84); font-weight: 700; font-size: 1.25rem; margin: 0; }
.mb-conso { display: flex; align-items: center; justify-content: center; gap: 42px; margin: 18px 0 0; }
.mb-conso figure { margin: 0; text-align: center; position: relative; }
.mb-conso img { width: 195px; height: auto; }
.mb-globe { width: 212px; height: auto; }
.mb-globe-ancien { display: grid; place-items: center; width: 205px; height: 205px; border-radius: 50%;
  background: rgb(226, 219, 203); color: rgb(91, 114, 84); font-size: 8rem; }
.mb-conso figcaption { position: absolute; left: 50%; bottom: 24%; transform: translateX(-50%);
  background: #fff; color: rgb(35, 40, 36); border-radius: 6px; padding: 3px 8px; font-size: .78rem;
  font-weight: 700; white-space: nowrap; box-shadow: 0 4px 12px -6px rgba(35, 40, 36, .5); }
.mb-savoir .mb-pastille { margin: 22px 0 0; }
@media (max-width: 991.98px) {
  .mb-savoir-grid { grid-template-columns: 1fr; }
  .mb-fleche-1 { margin-left: 150px; }
  .mb-encart-vert { margin-left: 0; }
  .mb-conso { gap: 20px; justify-content: center; }
  .mb-conso img, .mb-globe { width: 130px; }
  .mb-conso-bloc { margin-left: auto; margin-right: auto; }
  /* la bande de bols passe sous le texte : on la ramène à une hauteur de photo */
  .mb-savoir-photo { height: 340px; border-radius: 20px; }
}

/* Nos valeurs : texte lisible sur le jaune et le sable */
#wrap .mb-encre, #wrap .mb-encre font, #wrap .mb-encre span { color: rgb(35, 40, 36) !important; }
.mb-label { align-self: center; }

/* ---------- Pied de page de la maquette Canva ---------- */
.mb-foot-grid { display: flex; align-items: center; justify-content: space-between; gap: 32px;
  flex-wrap: wrap; padding: 16px 0 24px; }
.mb-foot-logo img { width: min(430px, 100%); height: auto; }
.mb-foot-social { position: relative; display: flex; align-items: flex-end; gap: 6px; }
.mb-foot-doodle { width: 54px; height: auto; margin-bottom: 6px; }
.mb-foot-card { background: #fff; border-radius: 22px; padding: 16px 28px; text-align: center; }
.mb-foot-card p { color: rgb(91, 114, 84); font-weight: 700; text-transform: uppercase; margin: 0 0 6px;
  font-size: .95rem; letter-spacing: .02em; }
.mb-foot-card a { color: rgb(91, 114, 84); font-size: 1.9rem; line-height: 1; }
.mb-foot-card a + a { margin-left: 18px; }
.mb-foot-card a:hover { color: rgb(35, 40, 36); }
.o_footer_copyright a { color: #fff; margin-right: 1.6rem; }
.o_footer_copyright a:hover { color: rgb(254, 200, 41); }
.o_footer_copyright .col-sm { display: flex; flex-wrap: wrap; align-items: center; }
@media (max-width: 767.98px) {
  .mb-foot-grid { justify-content: center; text-align: center; }
  .mb-foot-logo img { width: min(320px, 100%); }
  /* le doodle poussait la carte vers la droite : il sort du flux, la carte se centre */
  .mb-foot-social { justify-content: center; }
  .mb-foot-doodle { position: absolute; left: -62px; bottom: 6px; margin-bottom: 0; }
}

/* Le bouton « Contactez-nous » suffit : le lien de menu faisait doublon */
@media (min-width: 992px) {
  header .navbar-nav .nav-item > a.nav-link[href="/#contact"] { display: none; }
}

/* Pied de page : le thème force la couleur et la taille des liens du footer */
#bottom .mb-foot-logo { flex: 0 1 auto; max-width: 430px; }
#bottom .mb-foot-logo img { width: 100%; }
#bottom .mb-foot-card a { color: rgb(91, 114, 84) !important; font-size: 2rem; line-height: 1; }
#bottom .mb-foot-card a:hover { color: rgb(35, 40, 36) !important; }
#bottom .mb-foot-card .fa { font-size: inherit; }
#bottom .o_footer_copyright a { color: #fff !important; margin-right: 1.1rem; }
#bottom .o_footer_copyright a:hover { color: rgb(254, 200, 41) !important; }

/* Mobile : colonnes moins espacées et photo d'ouverture moins haute */
@media (max-width: 991.98px) {
  .mb-section .row { --bs-gutter-y: 1.5rem; }
  .mb-photo { max-height: 300px; }
}

/* L'encart d'ouverture occupait les lignes 2 à 9 de la grille : il tombait 50 px trop bas */
#wrap .mb-hero { grid-row: 1 / -1 !important; }

/* =========================================================================
   Retours V2 de la cliente (04/11)
   ========================================================================= */

/* ---------- Encart « carnet de recettes » revu dans le Canva ---------- */
.mb-carnet { padding: 8px 0 72px; }
.mb-carnet-boite { position: relative; overflow: hidden; background: rgb(251, 198, 41);
  border-radius: 28px; display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  align-items: center; gap: 32px; padding: 34px 48px 34px 40px; }
.mb-carnet-graines { position: absolute; left: -46px; top: 50%; transform: translateY(-50%);
  width: 440px; opacity: .92; pointer-events: none; }
.mb-carnet-livre { position: relative; width: 100%; max-width: 260px; height: auto; justify-self: center;
  transform: rotate(-6deg); filter: drop-shadow(0 18px 26px rgba(35, 40, 36, .18)); }
.mb-carnet-mots { position: relative; text-align: center; }
.mb-carnet-titre { color: rgb(35, 40, 36); font-weight: 700; font-size: 1.45rem; margin: 0 0 14px; }
.mb-carnet-texte { color: rgb(35, 40, 36); font-size: 1.05rem; margin: 0 auto 26px; max-width: 460px; }
.mb-carnet-action { position: relative; display: inline-block; }
.mb-carnet-cta { display: inline-block; background: #fff; color: rgb(35, 40, 36); font-weight: 700;
  font-size: 1.15rem; border-radius: 999px; padding: 14px 30px; text-decoration: none;
  box-shadow: 0 6px 16px rgba(35, 40, 36, .14); transition: transform .2s ease, box-shadow .2s ease; }
.mb-carnet-cta:hover { color: rgb(35, 40, 36); transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(35, 40, 36, .2); }
.mb-carnet-doodle { position: absolute; right: -44px; bottom: -6px; width: 30px; height: auto;
  pointer-events: none; }
@media (max-width: 767.98px) {
  .mb-carnet-boite { grid-template-columns: 1fr; padding: 30px 22px; gap: 20px; }
  .mb-carnet-livre { max-width: 190px; }
  .mb-carnet-graines { left: -90px; width: 300px; }
  .mb-carnet-doodle { display: none; }
}
@media (prefers-reduced-motion: reduce) { .mb-carnet-cta { transition: none; } }

/* ---------- « Parlons de votre projet » (industrie agroalimentaire) ---------- */
.mb-invite { text-align: center; color: rgb(35, 40, 36); font-weight: 700; font-size: 1.3rem;
  margin: 40px 0 0; }
.mb-invite + p { margin-top: 16px !important; }

/* ---------- Fenêtre du calendrier HubSpot ---------- */
.mb-rdv { position: fixed; inset: 0; z-index: 2000; background: rgba(35, 40, 36, .55);
  display: grid; place-items: center; padding: 20px; }
.mb-rdv[hidden] { display: none; }
.mb-rdv-boite { position: relative; background: #fff; border-radius: 22px; width: min(960px, 100%);
  max-height: min(760px, 92vh); overflow: auto; padding: 44px 16px 16px; }
.mb-rdv-fermer { position: absolute; top: 8px; right: 14px; border: 0; background: none;
  font-size: 2rem; line-height: 1; color: rgb(91, 114, 84); cursor: pointer; }
.mb-rdv-zone { min-height: 560px; }
.mb-rdv-zone iframe { width: 100% !important; border: 0; }

/* ---------- Formulaire de contact HubSpot embarqué ---------- */
#wrap .row.o_grid_mode.mb-grille-libre { grid-auto-rows: minmax(50px, auto); }
.mb-hs-form { min-height: 420px; }
.mb-hs-form iframe { width: 100% !important; border: 0; }

/* ---------- Formulaire de candidature (page Nous rejoindre) ---------- */
.mb-candidature .mb-cand-titre { color: rgb(91, 114, 84); font-weight: 700; font-size: 1.75rem;
  margin: 0 0 10px; }
.mb-candidature .mb-cand-intro { color: rgb(35, 40, 36); margin: 0 0 26px; }
.mb-candidature .mb-champ { margin-bottom: 18px; }
.mb-candidature .mb-etiquette { display: block; font-weight: 600; color: rgb(35, 40, 36);
  margin-bottom: 6px; font-size: .95rem; }
.mb-candidature .mb-requis { color: rgb(91, 114, 84); }
/* Le bouton natif des champs fichier est dans la langue du navigateur :
   on le remplace pour qu'il reste en français, comme sur la maquette. */
.mb-candidature .mb-fichier { position: relative; display: flex; align-items: center; gap: 9px;
  border: 1px solid #ced4da; border-radius: 10px; padding: 6px 10px; background: #fff; }
.mb-candidature .mb-fichier input { position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer; }
.mb-candidature .mb-fichier-bouton { flex: 0 0 auto; background: rgb(226, 219, 203);
  color: rgb(35, 40, 36); border-radius: 7px; padding: 6px 11px; font-size: .85rem; font-weight: 600; }
.mb-candidature .mb-fichier-nom { min-width: 0; color: rgba(35, 40, 36, .6); font-size: .85rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-candidature .mb-aide { display: block; color: rgba(35, 40, 36, .6); font-size: .85rem; margin: -2px 0 6px; }
.mb-candidature .form-control, .mb-candidature .form-select { border-radius: 10px; }
.mb-candidature textarea.form-control { min-height: 150px; }
.mb-candidature .mb-case { display: flex; align-items: flex-start; gap: 10px; }
.mb-candidature .mb-case input { margin-top: 5px; flex: 0 0 auto; width: 18px; height: 18px; }
.mb-candidature .mb-case label { margin: 0; font-size: .95rem; color: rgb(35, 40, 36); }
.mb-candidature .mb-envoi { display: flex; justify-content: flex-end; }
.mb-candidature .mb-cand-envoi { background-color: rgb(91, 114, 84); border: 0; border-radius: 10px;
  padding: 12px 26px; }
.mb-candidature .mb-cand-envoi:hover { background-color: rgb(35, 40, 36); }
.mb-cand-merci { background: rgba(91, 114, 84, .08); border-radius: 16px; padding: 24px 26px; }
.mb-cand-merci[hidden] { display: none; }
.mb-cand-merci p { color: rgb(35, 40, 36); margin: 0 0 10px; }
.mb-cand-merci p:last-child { margin-bottom: 0; }
.mb-cand-merci-titre { color: rgb(91, 114, 84); font-weight: 700; font-size: 1.4rem; }

/* =========================================================================
   Retours du 09/11
   ========================================================================= */

/* Entre tradition et innovation (desktop) : la carte sable grandit avec le texte */
.mb-trad { padding-top: 40px; padding-bottom: 8px; }
.mb-trad-boite { position: relative; padding-top: 34px; }
.mb-trad-carte { position: relative; margin-left: 110px; background: rgb(226, 219, 203); border-radius: 27px;
  padding: 52px 52px 46px 200px; }
.mb-trad-bol { position: absolute; left: 0; top: calc(34px + 50%); transform: translateY(-46%);
  width: 260px; height: auto; z-index: 2; }
.mb-trad-titre { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); z-index: 3; }
.mb-trad-titre h2 { margin: 0; background: rgb(91, 114, 84); color: #fff; border-radius: 11px;
  padding: 8px 46px; font-size: 1.875rem; font-weight: 400; white-space: nowrap; }
.mb-trad-rayons { position: absolute; right: calc(100% + 6px); bottom: 34%; width: 92px; height: auto; }
.mb-trad-texte p { margin: 0; text-align: justify; }
.mb-trad-graines { position: absolute; right: -24px; bottom: -104px; width: 250px; height: auto;
  z-index: 1; pointer-events: none; }
.mb-trad-action { text-align: center; margin-top: 34px; position: relative; z-index: 2; }
@media (max-width: 1199.98px) {
  .mb-trad-carte { margin-left: 90px; padding: 48px 40px 42px 170px; }
  .mb-trad-bol { width: 220px; }
  .mb-trad-titre h2 { font-size: 1.6rem; padding: 7px 34px; }
  .mb-trad-graines { width: 210px; bottom: -92px; }
}

/* « Ingrédients simples » : lien vers goum.co */
.mb-goum { display: block; transition: transform .25s ease; }
.mb-goum:hover { transform: scale(1.02); }

/* Témoignages : logo de la structure à côté de la signature */
p[data-mb-signe] { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.mb-signe-logo { flex: 0 0 auto; width: auto; height: 46px; background: #fff; border-radius: 10px;
  padding: 5px 9px; box-sizing: content-box; }
.mb-signe-logo[src$="logo-papillote.png"] { height: 54px; padding: 4px; border-radius: 50%; }
.mb-signe-logo[src$="logo-sodexo.png"] { height: 26px; padding: 12px 12px; }
.mb-signe-logo[src$="logo-manger-bio.png"] { height: 42px; padding: 4px 6px; }

/* Nous découvrir : bulle « 2X » en forme de haricot, typographie de la maquette */
.mb-2x { background: url(/assets/mb/haricot-2x.png) center / 100% 100% no-repeat; border-radius: 0;
  width: 360px; max-width: 86%; aspect-ratio: 584 / 554; padding: 26px 20px 16px; gap: 2px; }
.mb-2x span { font-weight: 700; font-size: 1.08rem; letter-spacing: 0; }
.mb-2x strong { font-weight: 700; font-size: 6.6rem; line-height: .9; }
.mb-2x span + strong + span { font-family: "Fredoka", sans-serif; font-weight: 700; font-size: 2.05rem;
  line-height: 1; text-shadow: 0 4px 0 rgba(91, 114, 84, .35); }
.mb-fleche-1 { margin: 6px 0 14px 300px; }
.mb-fleche-2 { margin: 16px 0 4px 90px; }
@media (max-width: 991.98px) { .mb-fleche-1 { margin-left: 170px; } }
@media (max-width: 575.98px) {
  .mb-2x { width: 300px; }
  .mb-2x strong { font-size: 5.4rem; }
  .mb-2x span + strong + span { font-size: 1.7rem; }
  .mb-fleche-1 { margin-left: 140px; }
}

/* La France plus petite que la Terre : 1,4 kg contre 7 kg */
.mb-conso { align-items: center; }
.mb-conso img { width: 120px; }
.mb-conso .mb-globe { width: 240px; }
@media (max-width: 991.98px) {
  .mb-conso img { width: 92px; }
  .mb-conso .mb-globe { width: 170px; }
}

/* Photo d'équipe : carrée dans une case qui ne l'est pas, elle n'est plus rognée */
#wrap img[src="/assets/mb/equipe.webp"] { object-fit: contain !important; }

/* Pied de page : « Nous rejoindre » mis en avant */
.mb-foot-rejoindre { display: inline-block; background: rgb(254, 200, 41); color: rgb(35, 40, 36);
  border-radius: 999px; padding: 13px 30px; font-family: "Fredoka", sans-serif; font-weight: 600;
  font-size: 1.15rem; box-shadow: 0 10px 22px -12px rgba(0, 0, 0, .45); transition: transform .2s ease; }
#bottom .mb-foot-rejoindre { color: rgb(35, 40, 36) !important; text-decoration: none; }
.mb-foot-rejoindre:hover { transform: translateY(-2px); }
@media (max-width: 767.98px) {
  .mb-foot-grid { flex-direction: column; gap: 28px; }
  /* le doodle sortait à gauche de la carte et la faisait paraître décalée */
  .mb-foot-doodle { left: -14px; top: -30px; bottom: auto; width: 34px; transform: rotate(-28deg); }
}
.mb-trad-texte p > br:first-child { display: none; }
.mb-trad-texte p:empty { display: none; }
.mb-2x strong { font-size: 8.2rem; }
.mb-2x span + strong + span { font-size: 2.45rem; }
.mb-conso figure:first-child figcaption { position: static; transform: none; display: inline-block; margin-top: 10px; }
@media (max-width: 575.98px) {
  .mb-2x strong { font-size: 6.4rem; }
  .mb-2x span + strong + span { font-size: 1.95rem; }
}
/* logo devant la signature : à droite, il butait sur les guillemets de fin */
p[data-mb-signe] { justify-content: flex-start; gap: 14px; }
.mb-signe-logo { order: -1; height: 36px; }
.mb-signe-logo[src$="logo-papillote.png"] { height: 50px; }
.mb-signe-logo[src$="logo-sodexo.png"] { height: 20px; padding: 10px 10px; }
.mb-signe-logo[src$="logo-manger-bio.png"] { height: 34px; }
@media (min-width: 768px) {
  .mb-foot-social { margin-left: auto; }
}
@media (max-width: 767.98px) {
  .mb-foot-doodle { left: -10px; top: -46px; width: 28px; }
}
p[data-mb-signe] { text-align: left !important; }
.mb-conso figure:first-child figcaption { display: table; margin: 10px auto 0; }

/* =========================================================================
   Retours du 09/11 (2e passage)
   ========================================================================= */

/* Odoo trace aussi son soulignement : on ne garde que le nôtre (« approuvée » souligné deux fois) */
#wrap .o_text_highlight > svg.o_text_highlight_svg { display: none !important; }

/* Rayons accrochés au bouton, centrés sur sa hauteur */
.mb-btn-r { position: relative; display: inline-block; }
.mb-rayon { position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%);
  width: auto; height: 50px; pointer-events: none; }
.mb-carnet-doodle { top: 50%; bottom: auto; transform: translateY(-50%); right: -42px; }

/* Témoignages dépliés (Nos partenaires, Ils en parlent) : la carte grandit avec le texte */
/* (mb.js pose mb-grille-libre sur la grille quand une carte déborde) */

/* Entre tradition et innovation : le titre ne chevauche plus le bord de la carte */
.mb-trad-boite { padding-top: 92px; }
.mb-trad-titre { top: -22px; left: calc(50% - 55px); transform: translate(-50%, -100%); }
.mb-trad-carte { padding-top: 46px; }
@media (max-width: 1199.98px) { .mb-trad-titre { left: calc(50% - 45px); } }

/* Nous découvrir : composition fixe pour que les flèches relient toujours bulle, encadré et chiffres */
@media (min-width: 992px) {
  .mb-savoir { --mb-cw: 960px; }
  .mb-savoir > .container { max-width: none; padding-right: 0;
    padding-left: calc((100% - var(--mb-cw)) / 2 + var(--bs-gutter-x, 1.5rem) * .5); }
  .mb-savoir-col { width: 100%; max-width: 640px; margin: 0 auto; }
  .mb-savoir-col .mb-encart-vert { margin-left: 80px; width: auto; }
  .mb-savoir-col .mb-fleche-1 { margin: 6px 0 12px 270px; }
  .mb-savoir-col .mb-fleche-2 { margin: 14px 0 4px 120px; }
  .mb-savoir-col .mb-conso-bloc { margin-left: 40px; margin-right: 0; }
  /* la photo des bols va jusqu'au bord droit de l'écran */
  .mb-savoir-photo { border-radius: 24px 0 0 24px; }
}
@media (min-width: 1200px) { .mb-savoir { --mb-cw: 1140px; } }
@media (min-width: 1400px) { .mb-savoir { --mb-cw: 1320px; } }
.mb-rayon.mb-rayon-off { display: none; }