/*
 * Décors OUA Concept : ce que les réglages de Mon Builder ne font pas (rotation, superpositions,
 * fil pointillé, numérotation automatique, champs soulignés). Chaque bloc est rattaché à une classe
 * posée dans l'onglet Avancé de l'élément (oua-…).
 */

/* ---------- En-tête ---------- */
.oua-entete > .mb-container { border-bottom: 1px solid rgba(23, 19, 20, .06); }
.oua-entete .mb-button { white-space: nowrap; } /* « Réserver mon audit gratuit » toujours sur une ligne. */
/* Logo : au survol, il se déforme comme une gelée (écrasé, étiré, puis rebondit en place),
   dans l'esprit des formes rondes et molles de la charte. Déformation depuis le bas, comme posé. */
.oua-logo a { display: inline-block; line-height: 0; border-radius: 4px; transform-origin: 50% 100%; }
.oua-logo img { height: auto; }
.oua-logo a:hover, .oua-logo a:focus-visible { animation: oua-gelee .75s ease-in-out both; }
.oua-logo a:focus-visible { outline: 2px solid var(--mb-primary); outline-offset: 6px; }
@keyframes oua-gelee {
	0%   { transform: scale(1, 1); }
	22%  { transform: scale(1.14, .86); }
	40%  { transform: scale(.9, 1.1) rotate(-3deg); }
	56%  { transform: scale(1.06, .95) rotate(2deg); }
	72%  { transform: scale(.98, 1.03); }
	86%  { transform: scale(1.01, .99); }
	100% { transform: scale(1, 1); }
}
/* Joué même quand l'appareil demande moins d'animations (choix de l'utilisatrice, comme « Comment ? ») :
   effet court, déclenché seulement par le survol. */

/* Pied de page : ligne du bas centrée, sous un filet. */
.oua-pied__legal { border-top: 1px solid var(--mb-ligne); padding-top: 18px; }
.oua-pied__legal p { margin: 0; }
.oua-pied__legal a { text-decoration: underline; text-underline-offset: 3px; }
.oua-pied__legal span { white-space: nowrap; }

/* ---------- Ouverture ---------- */
.oua-logo-bloc .mb-container__inner { position: relative; }
.oua-once { transform: rotate(-8deg) translate(-6px, 6px); }
.oua-bande .mb-heading { background: var(--mb-primary); padding: .18em .2em .18em .55em; line-height: 1.3; }
/* Ouverture de l'accueil en plein écran (hauteur de l'écran moins l'en-tête de 84 px) :
   le contenu est centré, « Comment ? » reste en bas. */
.oua-hero--plein > .mb-container { min-height: calc(100vh - 84px); min-height: calc(100svh - 84px); display: flex; flex-direction: column; }
.oua-hero--plein > .mb-container > .mb-container__inner { flex: 1 1 auto; width: 100%; }
.oua-hero--plein > .mb-container > .mb-container__inner > :first-child { margin-block: auto; }
#approche { scroll-margin-top: 84px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* « Comment ? » : la flèche se dessine à l'arrivée, le mot s'écrit, puis l'ensemble invite à descendre. */
.oua-comment { display: inline-flex; align-items: flex-start; gap: 10px; color: var(--mb-secondary); text-decoration: none; margin: 52px 0 0 -4px; padding: 6px 10px 6px 0; } /* −4 px : le trait commence à 4 px du bord du dessin, il tombe ainsi sur le bord du titre. */
.oua-comment svg { width: 60px; height: 42px; color: var(--mb-secondary); overflow: visible; transition: transform .3s cubic-bezier(.2, .7, .3, 1); }
.oua-comment span { font-family: 'Caveat', cursive; font-size: 29px; color: var(--mb-primary); padding-top: 22px; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .35s; }
.oua-comment:hover span, .oua-comment:focus-visible span { background-size: 100% 1px; }
.oua-comment:hover svg, .oua-comment:focus-visible svg { transform: translate(2px, 5px); }
.oua-comment:focus-visible { outline: 2px solid var(--mb-primary); outline-offset: 4px; border-radius: 4px; }
/* Tracé et écriture : joués une fois, pour tous (petit mouvement sur place, sans déplacement de la page). */
.oua-comment .oua-trace { stroke-dasharray: 1; stroke-dashoffset: 1; animation: oua-trace 1.1s .6s cubic-bezier(.6, 0, .3, 1) forwards; }
.oua-comment .oua-pointe { opacity: 0; animation: oua-apparait .25s 1.6s forwards; }
.oua-comment span { clip-path: inset(0 100% 0 0); animation: oua-ecrit .9s 1.5s steps(9, end) forwards; }
/* Rebond en continu, pour tous les visiteurs (demande d'OUA) ; il s'arrête au survol pour laisser cliquer. */
.oua-comment { animation: oua-invite 2.8s 2.6s ease-in-out infinite; }
.oua-comment:hover, .oua-comment:focus-visible { animation-play-state: paused; }
@keyframes oua-trace { to { stroke-dashoffset: 0; } }
@keyframes oua-apparait { to { opacity: 1; } }
@keyframes oua-ecrit { to { clip-path: inset(0 -10% 0 0); } }
@keyframes oua-invite { 0%, 55%, 100% { transform: translateY(0); } 25% { transform: translateY(7px); } 40% { transform: translateY(2px); } }

/* ---------- Fil pointillé à gauche des étapes 01 et 03 ---------- */
.oua-fil > .mb-container { position: relative; }
/* Fil à 22 px à gauche du contenu (1 320 px de large, voir OUA_BOXED dans lib.php). */
.oua-fil > .mb-container::after { content: ""; position: absolute; top: 0; bottom: 0; left: max(14px, calc(50% - 660px - 22px)); border-left: 1px dashed rgba(87, 33, 17, .35); pointer-events: none; }
.oua-section .mb-w-text p { margin: 0; }

/* ---------- Étiquettes (collages) ---------- */
.oua-collage > .mb-container { position: relative; overflow: visible; }
.oua-tag { position: absolute; z-index: 2; }
.oua-tag .mb-heading { display: inline-block; margin: 0; font: 700 14px/1 'Archivo', sans-serif; letter-spacing: .22em; text-transform: uppercase; padding: 11px 15px 10px; white-space: nowrap; box-shadow: 0 6px 14px rgba(23, 19, 20, .12); }
.oua-tag--creme .mb-heading { background: var(--mb-light); color: var(--mb-secondary); }
.oua-tag--noir .mb-heading { background: var(--mb-secondary); color: var(--mb-light); }
.oua-tag--petit .mb-heading { font: 600 13px/1.2 'Inter', sans-serif; letter-spacing: 0; text-transform: none; padding: 9px 13px; background: var(--mb-light); color: var(--mb-secondary); }
.oua-tag--petit.oua-tag--noir .mb-heading { background: var(--mb-secondary); color: var(--mb-light); }
.oua-tag--bulle .mb-heading { font: 500 13px/1 'Inter', sans-serif; letter-spacing: 0; text-transform: none; padding: 10px 15px; border-radius: 100px; background: var(--mb-light); color: var(--mb-secondary); }

/* 01 : carré rose à bord pointillé, trois étiquettes et une flèche. */
.oua-collage--strategie > .mb-container::before { content: ""; position: absolute; inset: 22px 34px 26px 18px; background: var(--mb-accent); outline: 1px dashed var(--mb-primary); outline-offset: -1px; }
.oua-collage--strategie .oua-pos-1 { top: 6px; left: -2px; transform: rotate(-2deg); }
.oua-collage--strategie .oua-pos-2 { top: 46%; right: -18px; transform: rotate(1deg); }
.oua-collage--strategie .oua-pos-3 { bottom: 4px; left: 6px; transform: rotate(-1deg); }
.oua-fleche-collage { position: absolute; top: 70px; left: 42%; width: 58px; height: 58px; color: var(--mb-secondary); z-index: 1; }

/* 03 : publication rose, cadre vide, message, bulle et réactions. */
.oua-collage--social > .mb-container::before { content: ""; position: absolute; left: 6%; top: 24%; width: 42%; height: 52%; background: var(--mb-accent); }
.oua-collage--social > .mb-container::after { content: ""; position: absolute; right: 6%; top: 16%; width: 44%; height: 58%; border: 1.5px solid var(--mb-secondary); }
.oua-collage--social .oua-pos-1 { top: 10%; left: 2%; transform: rotate(-2deg); }
.oua-collage--social .oua-pos-2 { top: 48%; right: -4%; transform: rotate(1deg); }
.oua-collage--social .oua-pos-3 { bottom: 10%; left: 10%; }
.oua-collage--social .oua-pos-4 { position: absolute; bottom: 12%; right: 20%; }
.oua-collage--social .oua-pos-5 { position: absolute; bottom: 12%; right: 13%; }

/* 02 : polaroïds inclinés. */
.oua-polaroid { width: min(240px, 46%); flex: 0 0 auto !important; }
.oua-polaroid > .mb-container { background: #fff; padding: 10px 10px 4px; box-shadow: 0 14px 30px rgba(0, 0, 0, .28); }
.oua-polaroid img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.oua-polaroid--1 { transform: rotate(-4deg) translateY(10px); }
.oua-polaroid--2 { transform: rotate(3deg) translateY(-14px); }

/* ---------- Liens soulignés avec flèche ---------- */
.oua-lien .mb-button { border-bottom: 1px solid currentColor !important; border-radius: 0; padding: 0 0 4px !important; font-size: 15px; font-weight: 600; }
.oua-lien .mb-button svg { width: .8em; height: .8em; }
.oua-lien--clair .mb-button { color: var(--mb-light) !important; }
.oua-lien--clair .mb-button:hover { color: var(--mb-accent) !important; }

/* ---------- Liste numérotée des réalisations (accueil) ---------- */
.oua-liste .mb-posts__grid { counter-reset: oua-real; border-top: 1px solid var(--mb-secondary); }
.oua-liste .mb-posts__card { overflow: visible; counter-increment: oua-real; border-bottom: 1px solid var(--mb-ligne); position: relative; background: none; box-shadow: none; }
.oua-ligne .mb-container__inner { justify-content: flex-start !important; }
.oua-ligne > .mb-container > .mb-container__inner::before { content: counter(oua-real, decimal-leading-zero); font: italic 400 26px/1 'Instrument Serif', serif; color: var(--mb-primary); width: 48px; flex: 0 0 auto; align-self: center; }
.oua-ligne .mb-w-icon { margin-left: auto; }
.oua-ligne .mb-post-title a { color: inherit; text-decoration: none; }
.oua-ligne .mb-post-title a::after { content: ""; position: absolute; inset: 0; }
.oua-liste .mb-posts__card:hover .mb-post-title { color: var(--mb-primary); }
.oua-liste .mb-posts__card:hover .mb-w-icon { transform: translate(3px, -3px); transition: transform .2s; }

/* ---------- Formulaire d'audit : champs soulignés ---------- */
.oua-form .mb-form { position: relative; }
.oua-form .mb-form__input, .oua-form .mb-form__textarea, .oua-form select { border-width: 0 0 1px !important; padding-left: 0 !important; padding-right: 0 !important; background: transparent !important; box-shadow: none !important; }
.oua-form .mb-form__label { font-weight: 500; }
.oua-form .mb-form__progress { border-top: 1px solid var(--mb-secondary); padding-top: 10px; margin-bottom: 22px; }
.oua-form .mb-form__progress-text { font: 500 12px/1 'Inter', sans-serif; letter-spacing: .22em; text-transform: uppercase; color: var(--mb-gris); }
.oua-form .mb-form__progress-bar { display: none; }
.oua-form .mb-form__step-title { position: absolute; top: 11px; right: 0; font: 500 12px/1 'Inter', sans-serif !important; letter-spacing: .22em; text-transform: uppercase; color: var(--mb-gris); }

/* ---------- Chiffres séparés par des filets ---------- */
.oua-chiffres > .mb-container > .mb-container__inner > .oua-chiffre { flex: 1 1 0; }
.oua-chiffre > .mb-container { border-left: 1px solid var(--mb-ligne); padding: 4px 24px !important; height: 100%; }
.oua-chiffres .oua-chiffre:first-child > .mb-container { border-left: 0; }
/* Chiffres alignés à gauche : le premier commence sur le bord du titre au-dessus. */
.oua-section:not(.oua-hero) .oua-chiffres .oua-chiffre:first-child > .mb-container { padding-left: 0 !important; }
.oua-chiffre p { margin: 0; }

/* ---------- Cartes de la page Réalisations ---------- */
.oua-carte__visuel > .mb-container { position: relative; }
.oua-badge { position: absolute; left: 16px; bottom: 16px; }
.oua-badge .mb-field { margin: 0; background: rgba(23, 19, 20, .55); backdrop-filter: blur(6px); padding: 6px 12px; border-radius: 100px; font-size: 12px; letter-spacing: .08em; }
.oua-titre-point .mb-post-title::after { content: "."; color: var(--mb-primary); }
.oua-titre-point .mb-post-title a { color: inherit; text-decoration: none; }
.oua-carte .mb-field { margin: 0; }
.oua-carte .mb-w-icon a, .oua-carte .mb-w-icon .mb-icon-box-shape { transition: background .2s, color .2s; }

/* ---------- Fiche réalisation ---------- */
.oua-intro { max-width: 640px; margin-inline: auto; text-align: center; }
.oua-fiche-hero .mb-w-featured-image { width: 100%; }
.oua-video-avis > .mb-container { position: relative; }
.oua-video-legende { position: absolute; left: 24px; bottom: 20px; pointer-events: none; z-index: 2; }
.oua-section .mb-w-custom-field .mb-field { margin: 0; }

/* ---------- Ouverture : collage de trois images ---------- */
.oua-hero-collage > .mb-container { position: relative; overflow: visible; }
.oua-hc { position: absolute; }
.oua-hc img { width: 100%; height: auto; object-fit: cover; display: block; }
.oua-hc-1 { left: 0; top: 4%; width: 58%; transform: rotate(-2deg); }
.oua-hc-1 img { aspect-ratio: 4 / 5; }
.oua-hc-2 { right: 2%; bottom: 0; width: 46%; transform: rotate(3deg); }
.oua-hc-2 img { aspect-ratio: 1; }
.oua-hc-3 { right: 6%; top: 0; width: 30%; transform: rotate(4deg); }
.oua-hc-3 img { aspect-ratio: 9 / 14; }
.oua-hc-1, .oua-hc-2, .oua-hc-3 { box-shadow: 0 16px 34px rgba(23, 19, 20, .18); border: 6px solid #fff; }
.oua-hero-collage .oua-once { position: absolute; left: 40%; top: -6%; z-index: 3; }
.oua-hero-collage .oua-pos-hero { left: -4%; bottom: 10%; transform: rotate(-3deg); }

/* ---------- Liste des réalisations : vignette ---------- */
/* Écran tactile : petite vignette à gauche du nom. Souris : grande vignette qui suit le curseur (oua.js). */
.oua-vignette { flex: 0 0 72px !important; width: 72px; margin-right: 4px; }
@media (hover: hover) and (pointer: fine) {
	.oua-liste .oua-vignette { position: fixed; left: 0; top: 0; width: 260px; pointer-events: none; z-index: 50; opacity: 0; width: 320px; transform: translate(calc(var(--x, -400px) + 28px), calc(var(--y, 0px) - 50%)) rotate(-3deg) scale(.9); transition: opacity .25s ease, transform .35s cubic-bezier(.2, .7, .3, 1); }
	.oua-liste .mb-posts__card:hover .oua-vignette { opacity: 1; transform: translate(calc(var(--x, -400px) + 28px), calc(var(--y, 0px) - 50%)) rotate(-3deg) scale(1); }
	.oua-liste .oua-vignette img { box-shadow: 0 18px 40px rgba(23, 19, 20, .25); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
	.oua-liste .oua-vignette { transition: opacity .2s; }
}

/* ---------- Instagram ---------- */
.oua-insta .oua-insta__tuile { flex: 1 1 0; min-width: 0; }
.oua-insta__tuile img { aspect-ratio: 1; object-fit: cover; width: 100%; display: block; border-radius: 4px; }
/* Survol : la tuile entière se soulève (rien n'est rogné par un cadre). */
.oua-insta__tuile a { display: block; border-radius: 4px; transition: transform .3s cubic-bezier(.2, .7, .3, 1), box-shadow .3s; }
.oua-insta__tuile a:hover, .oua-insta__tuile a:focus-visible { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(23, 19, 20, .16); }

/* ---------- Audit : Chloé ---------- */
.oua-chloe > .mb-container { border-top: 1px solid var(--mb-ligne); }
.oua-chloe img { width: 76px; height: 76px; object-fit: cover; border-radius: 50%; }

/* ---------- Offres ---------- */
.oua-offre { scroll-margin-top: 70px; }
.oua-temps { flex: 1 1 0; }
.oua-temps > .mb-container { border-top: 1px solid rgba(255, 241, 231, .3); padding-top: 18px !important; }
.oua-faq summary, .oua-faq .mb-accordion__title { border-bottom: 1px solid var(--mb-ligne); }

/* ---------- Page Réalisations : filtres et cartes ---------- */
.oua-filtres { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.oua-filtres button { font: 500 15px/1 'Inter', sans-serif; color: var(--mb-secondary); background: transparent; border: 1px solid var(--mb-ligne); border-radius: 100px; padding: 13px 22px; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.oua-filtres button:hover { border-color: var(--mb-secondary); }
.oua-filtres button.is-active { background: var(--mb-secondary); border-color: var(--mb-secondary); color: var(--mb-light); }
.oua-filtres button:focus-visible { outline: 2px solid var(--mb-primary); outline-offset: 2px; }
.oua-filtres__vide { text-align: center; margin: 0; font-family: 'Caveat', cursive; font-size: 27px; color: var(--mb-primary); }
.oua-cartes .mb-posts__card { position: relative; background: none; box-shadow: none; }
.oua-cartes .mb-posts__card[hidden] { display: none; }
.oua-carte__filtres { display: none; }
.oua-carte--lien { cursor: pointer; }
.oua-carte .mb-post-title a { color: inherit; text-decoration: none; }
.oua-carte__fleche a { display: inline-flex; }
.oua-carte__fleche a:focus-visible { outline: 2px solid var(--mb-primary); outline-offset: 3px; border-radius: 50%; }
.oua-cartes .mb-posts__card:hover .oua-carte__fleche .mb-icon-box-shape, .oua-carte__fleche a:focus-visible .mb-icon-box-shape { background: var(--mb-secondary); color: var(--mb-light); fill: var(--mb-light); }
/* Survol : la photo entière se soulève, sans zoom rogné par son cadre. La carte ne coupe rien (flèche qui glisse). */
.oua-cartes .mb-posts__card { overflow: visible; }
.oua-carte__visuel > .mb-container { transition: transform .35s cubic-bezier(.2, .7, .3, 1), box-shadow .35s; border-radius: 6px; }
.oua-cartes .mb-posts__card:hover .oua-carte__visuel > .mb-container { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(23, 19, 20, .16); }
.oua-cartes .mb-posts__card:hover .mb-post-title { color: var(--mb-primary); }
.oua-carte__pied > .mb-container { border-top: 1px solid var(--mb-ligne); }
/* Deux cartes côte à côte : le pied (Services / Résultat) est calé en bas, à la même hauteur dans les deux. */
.oua-cartes .mb-posts__card > .mb-layout,
.oua-cartes .oua-carte,
.oua-cartes .oua-carte > .mb-container,
.oua-cartes .oua-carte > .mb-container > .mb-container__inner { height: 100%; }
.oua-cartes .oua-carte > .mb-container > .mb-container__inner { display: flex; flex-direction: column; }
.oua-cartes .oua-carte__pied { margin-top: auto; }
.oua-carte__fleche { transition: transform .2s; }
.oua-cartes .mb-posts__card:hover .oua-carte__fleche { transform: translate(3px, -3px); }
.oua-badge { z-index: 2; }

/* ---------- Carrousel d'avis : points de 10 px, mais zone cliquable de 26 px (doigt, souris) ---------- */
.mb-tcarousel .mb-carousel__dot { position: relative; }
.mb-tcarousel .mb-carousel__dot::before { content: ""; position: absolute; inset: -8px; }
.mb-tcarousel .mb-carousel__dot:focus-visible { outline: 2px solid var(--mb-primary); outline-offset: 3px; }

/* ---------- Fiche : vidéos, projet suivant ---------- */
/* 4e tuile « Toutes nos vidéos » : même format que les vidéos, entièrement cliquable ; survol par la couleur (la rangée défile sur mobile, un déplacement y serait rogné). */
.oua-video-plus > .mb-container { aspect-ratio: 9 / 16; position: relative; transition: background-color .25s; }
.oua-video-plus:hover > .mb-container { background-color: var(--mb-secondary) !important; }
.oua-video-plus__titre a { color: inherit; text-decoration: none; }
.oua-video-plus__titre a::after { content: ""; position: absolute; inset: 0; }
.oua-video-plus .mb-w-text p, .oua-video-plus .mb-heading { margin: 0; }
/* Galerie : pas de zoom rogné, la photo s'éclaircit simplement au survol. */
.oua-univers .mb-gallery__item img { transition: filter .3s; }
.oua-univers .mb-gallery__item a:hover img, .oua-univers .mb-gallery__item a:focus-visible img { filter: brightness(1.08) saturate(1.05); }
.oua-video .mb-video { max-height: 520px; }
.oua-suivant .mb-post-nav { border-top: 1px solid var(--mb-ligne); border-bottom: 1px solid var(--mb-ligne); padding: 26px 0; }
.oua-suivant .mb-post-nav__label { font: 500 13px/1 'Inter', sans-serif; letter-spacing: .2em; text-transform: uppercase; }
.oua-suivant .mb-post-nav__title { font: 800 36px/1.1 'Archivo', sans-serif; }
.oua-suivant .mb-post-nav__link:hover .mb-post-nav__title { color: var(--mb-primary); }

/* ---------- Champs vides (vrais projets sans année, résultat ou chiffres) : rien d'affiché, pas de trou ---------- */
.oua-badge:not(:has(.mb-field)) { display: none; }
.oua-carte__pied .mb-w-container:not(:has(.mb-field)) { display: none; }
.oua-chiffre:not(:has(.mb-field)) { display: none; }
.oua-chiffres:not(:has(.mb-field)) { display: none; }

/* ---------- Ancres : le haut de la section reste visible sous l'en-tête fixe ---------- */
.oua-ancre, .oua-offre, [id="devis"], [id="rendez-vous"] { scroll-margin-top: 100px; }

/* ---------- Services : les 3 chapitres, de même hauteur, bouton en bas ---------- */
.oua-tarifs > .mb-container > .mb-container__inner > .oua-tarif { flex: 1 1 0; }
.oua-tarif > .mb-container { height: 100%; box-shadow: 0 1px 0 var(--mb-ligne); }
.oua-tarif > .mb-container > .mb-container__inner { height: 100%; }
.oua-tarif__engagement { margin-top: auto; }
.oua-tarif .oua-prix .mb-heading { white-space: nowrap; }
.oua-tarif--fonce > .mb-container { box-shadow: 0 18px 40px rgba(87, 33, 17, .25); }
.oua-rubrique__image img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }

/* ---------- À propos : portrait sur un carré rose, membre de l'équipe ---------- */
.oua-portrait-cadre > .mb-container { position: relative; }
.oua-portrait-cadre > .mb-container::before { content: ""; position: absolute; inset: 14% 0 0 8%; background: var(--mb-accent); border-radius: 6px; }
.oua-portrait { position: relative; }
.oua-portrait img { position: relative; width: 100%; height: auto; display: block; }
.oua-membre__photo img, .oua-chiaffy img { object-position: 50% 12%; }
.oua-membre .mb-icon-list { margin: 0; }

/* ---------- Formulaire : choix (« Une entreprise / Un particulier ») à la taille du texte ---------- */
.oua-form .mb-form__choice { font: 400 16px/1.5 'Inter', sans-serif; color: var(--mb-secondary); }

/* ---------- Logos clients ---------- */
.oua-logos img { object-fit: contain; }

/* ---------- Tablette (768 à 1024 px) : rien ne dépasse, aucun mot coupé ---------- */
@media (min-width: 768px) and (max-width: 1024px) {
	/* « @once_upon_a_concept » est un seul mot : il rétrécit avec l'écran. */
	.oua-compte .mb-heading { font-size: min(40px, 4.4vw) !important; }
}
@media (min-width: 768px) and (max-width: 900px) {
	/* Trois cartes de tarifs côte à côte sont trop étroites : une par ligne. */
	.oua-tarifs > .mb-container > .mb-container__inner { flex-direction: column !important; }
	/* Les 4 temps de la méthode : 2 par ligne. */
	.mb-container__inner:has(> .oua-temps) { flex-direction: row !important; flex-wrap: wrap !important; }
	.oua-temps { flex: 1 1 calc(50% - 16px); }
}

@media (max-width: 767px) {
	.oua-videos > .mb-container > .mb-container__inner { overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
	.oua-videos .oua-video { flex: 0 0 72% !important; scroll-snap-align: start; }
	/* Dans la rangée qui défile, une apparition « vers le haut » serait rognée : simple fondu. */
	.oua-videos .mb-anim { transform: none !important; translate: none !important; }
	.oua-suivant .mb-post-nav__title { font-size: 20px; }
	.oua-hc-3 { display: none; }
	.oua-hc-1 { width: 62%; }
	.oua-hc-2 { width: 50%; }
	/* Liste des réalisations : numéro et vignette plus petits, titre qui suit la largeur de l'écran.
	   Aucun nom n'est coupé en plein mot, même sur un téléphone de 320 px. */
	.oua-ligne > .mb-container > .mb-container__inner::before { width: 30px; font-size: 21px; }
	.oua-vignette { flex-basis: 56px !important; width: 56px; margin-right: 0; }
	.oua-ligne .mb-post-title { font-size: min(22px, 6.2vw) !important; }
	/* « @once_upon_a_concept » est un seul mot : il rétrécit avec l'écran pour tenir sur une ligne. */
	.oua-compte .mb-heading { font-size: min(26px, 7vw) !important; }
	.oua-insta .oua-insta__tuile { flex: 0 0 calc(33.333% - 7px); }
	.oua-insta .oua-insta__tuile:nth-child(n+4) { display: none; }
	.oua-fil > .mb-container::after { display: none; }
	.oua-collage--strategie .oua-pos-2 { right: 0; }
	.oua-polaroid { width: 46%; }
	.oua-chiffre > .mb-container { border-left: 0; padding: 12px 0 !important; border-top: 1px solid var(--mb-ligne); }
}