/* MOBILE APPROFONDI (Romain 03/10: « je veux que l'audit mobile soit plus approfondi, j'ai encore vu des bugs »).
   The defects found by scripts/mobile-approfondi/profond.cjs (iPhone SE, iPhone 15, Pixel 7, iPad presets with touch,
   Chromium and WebKit, pages scrolled to the end, menus, sheets, filters and forms operated). Everything under
   body.mba (inc/mobile-approfondi.php, option canape_mba_off). LAST sheet of the head. */

/* ---------- M1 (grave). The fiche sticky purchase bar stayed ON TOP of the open menu (z-index 35 against the menu,
   which lives inside the header's stacking context): the bar leaves while the menu is open. ---------- */
body.mba.menu-ouvert .barre-achat { visibility: hidden; transform: translateY(110%); }

/* ---------- M2. « Choisir mon format »: the sheet and its close button were the last round shapes of the fiche
   (18 px corners, a 44 px grey disc). Éditorial: 4 px corners, the close button a square with a 1 px rule, like the
   menu's close button. The trigger box loses its 14 px corners too (it is a button: 4 px). ---------- */
.mba .format-choix__bouton { border-radius: 4px; }
.mba .format-feuille { border-radius: 4px 4px 0 0; }
.mba .format-feuille__fermer { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--anthracite); border-radius: 4px; background: var(--blanc); color: var(--anthracite); }
.mba .format-feuille__fermer:hover { box-shadow: inset 0 -3px 0 var(--moutarde); }
.mba .format-feuille__fermer:focus-visible { outline: 3px solid var(--moutarde); outline-offset: 2px; }
.mba .format-feuille__choix { border-radius: 4px; }

/* ---------- M3. Filters sheet of the collections (phones and tablets up to 900 px): 4 px corners, and the
   « Voir les N canapés » button now sits on a plaster band (the options no longer show under and around it). ---------- */
@media (max-width: 900px) {
  .mba .filtres { border-radius: 4px 4px 0 0; }
  .mba .filtres__fermer { z-index: 1; margin-top: 0.75rem; box-shadow: 0 0 0 12px var(--platre), 0 -1px 0 12px var(--trait) !important; }
}

/* ---------- M4. Sticky purchase bar on small phones: « Voir le … » (label cut by an ellipsis). Under 400 px the
   label is the short one, « Voir », whole, with the arrow block; the merchant stays in the link's title text. ---------- */
@media (max-width: 400px) {
  .mba .barre-achat .dbt-m .cta__texte { font-size: 0; padding-right: 0.85rem; text-overflow: clip; }
  .mba .barre-achat .dbt-m .cta__texte::before { content: "Voir"; font-size: 0.98rem; }
  .mba .barre-achat .dbt-m .cta__texte > * { display: none; }
}

/* ---------- M6. iPhone zoomed the whole page on every field under 16 px (sort « Les mieux notés », the calculator
   filters of the collections, the comparator search...): on touch screens every text field and list is 16 px. ---------- */
@media (max-width: 1024px), (pointer: coarse) {
  .mba :is(select, textarea, input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=submit]):not([type=button]):not([type=hidden])) { font-size: 16px; }
}

/* ---------- M7. Quiz of the collections: « Afficher ces N canapés dans la sélection » was a bare .bouton (no fill,
   no frame: read as plain text). The Éditorial principal: anthracite, 4 px, 48 px, the label on 2 lines at most. ---------- */
.mba [data-quiz-appliquer] {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; min-height: 48px; padding: 0.6rem 1.1rem;
  border: 1.5px solid var(--anthracite); border-radius: 4px; background: var(--anthracite); color: var(--blanc);
  font: 600 0.95rem/1.2 var(--sans); text-align: center; text-transform: none; letter-spacing: 0.005em; white-space: normal; text-wrap: balance; box-shadow: none; cursor: pointer;
}
.mba [data-quiz-appliquer]::after { content: "→"; flex: none; transition: transform 0.2s ease; }
.mba [data-quiz-appliquer]:hover { background: #000; border-color: #000; }
.mba [data-quiz-appliquer]:hover::after { transform: translateX(4px); }
.mba [data-quiz-appliquer]:focus-visible { outline: 3px solid var(--moutarde); outline-offset: 2px; }

/* ---------- M8. « Notre choix », « Alternative », « Le mieux noté de ces résultats »: the last pill badges on the
   cards (999 px). Éditorial tag: 2 px corners like the duels; on narrow cards the long label keeps clear of the heart. ---------- */
.mba .repere-choix { border-radius: 2px; line-height: 1.15; }
@media (max-width: 480px) { .mba .carte .repere-choix { max-width: calc(100% - 1.6rem); } }

/* ---------- M9 (critique, Romain 03/10: « photos coupées sur smartphone dans l'aperçu sur les fiches produits »).
   The main photo of the classic fiches and armchairs was « cover » in a 4:3 frame: the merchants' square or tall
   photos lost a quarter of their height on phones (the sofa's top or feet with close framings). Rule: a product photo
   is NEVER cropped. Every gallery photo is « contain », pinned to the frame, on the studio grey. ---------- */
.mba .galerie__principale { position: relative; background: #e6e5e8; }
.mba .galerie__principale > img, .mba .galerie__principale > picture > img, .mba .galerie__principale img[data-galerie-image] {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; object-position: center;
}
.mba .galerie__vignette img { object-fit: contain; }

/* ---------- M10. The 12 px floor (harmonisation) still missed a few texts on phones: counts and labels of the menu
   drawer, the measuring line of the cards (« 246 cm »), the Brunelia kicker, table headings, the home page kickers,
   the « /10 » of the format sheet, the « C'est l'analyse ci-dessus » line. All at 12 px at least. ---------- */
.mba :is(.en-pastille > span, .en-une small, .en-label, .cote__val, .db-surtitre, table thead th, .une__requete, form.place > label, .format-feuille__note small, .tf__ici, .guide-piliers .num, .essentiel__pourquoi sup) { font-size: 12px; }

/* ---------- M11. Titles that ended with one word alone on their last line (cards « ... bouclette », « Bobochic »,
   « moment », the fiche's reading titles): balanced lines. ---------- */
.mba :is(.carte__titre, .top-canapes__texte h3, .une-page__titre, details.acc > summary > h2) { text-wrap: balance; }
.mba :is(main h2, main h3) { text-wrap: pretty; }

/* ---------- M12 (critique, same rule). Product cards everywhere (collections, similar models on the fiches,
   duels, search, quiz results, sticky bar, format sheet): the photo is whole, « contain » on the studio grey. Most
   photos are 4:3 like the boxes, so nothing moves for them; the square and tall ones are no longer cut. ---------- */
.mba :is(.carte__photo, .quiz__resultat .carte__photo, .duel__photo, .repere__lien, .barre-achat__photo) { background-color: #e6e5e8; }
.mba :is(.carte__photo img, .quiz__resultat img, .duel img, .duel__carte img, .repere__lien > img, .format-feuille img, .comparateur__propositions img, img.barre-achat__photo) { object-fit: contain; background-color: #e6e5e8; }
/* the photo box was the photo's own size (square photos: 138 x 138 in a 138 x 103 frame, a quarter cut): pinned to the frame */
.mba .carte__photo { position: relative; }
.mba .carte__photo img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }

/* ---------- M13. Fiche figures on phones: « 1 349 €261 cm », the price ran into the width column (the price cell
   could shrink below its own figure). The price cell never gets narrower than its figure; figures stay on one line. ---------- */
@media (max-width: 430px) {
  .mba .fiche.ft .achat__chiffres > .achat__prix { min-width: min-content; }
  .mba .fiche.ft .achat__chiffres :is([data-v-prix] .num, .ft-larg__v) { white-space: nowrap; }
}
/* at 320 px the 3 cells measured 114 + 85 + 109 px for 288: the two figures at 20 px (instead of 24) make them fit */
@media (max-width: 400px) {
  .mba .fiche.ft .achat__chiffres :is([data-v-prix] .num, .ft-larg__v) { font-size: 20px; }
  .mba .fiche.ft .achat__chiffres > .ft-larg { flex: 0 1 auto; min-width: min-content; }
}

/* ---------- M14. « Affiché » (the format shown, list « Tous les formats » of the variant fiches): the last mustard
   pill of the fiche. Éditorial tag, 2 px corners. ---------- */
.mba #tous-les-formats [aria-current="true"] .tf__nom::after { border-radius: 2px; }

/* ---------- M15 (grave). Pilier « Le Manuel », questionnaire on phones: its big title stayed STICKY (the desktop rule
   is more specific than the phone one), so the 5 questions and the result scrolled right over « Quel canapé choisir
   pour vous, le questionnaire en 5 questions » (text on text). Static on phones; the answers become Éditorial
   chips (4 px corners) like everywhere else. ---------- */
@media (max-width: 760px) {
  .mba.dzp-manuel .quiz-selection .quiz > .dzp-quiz-tete { position: static; }
}
.mba.dzp-manuel .quiz-selection .quiz__reponse span { border-radius: 4px; }
.mba.dzp-manuel .quiz-selection :is(.quiz__resultat, .mini) { border-radius: 4px; }

/* ---------- M16. Touch screens keep « :hover » after a tap: once the menu was closed, the menu button (and the
   search, project and heart buttons) stayed as a pale square in the dark header. No hover look without a mouse. ---------- */
@media (hover: none) {
  .mba .entete--mag :is(.bouton-recherche, .entete-projet, .entete-selection, .bouton-menu):hover:not([aria-expanded="true"]) { background: transparent; }
}

/* ---------- M17. Mon projet: the « Largeur maximale 250 cm × retirer » chip was a pill (999 px): Éditorial chip. ---------- */
.mba .projet__pastille { border-radius: 4px; }

/* ---------- M18 (grave). Open menu: every small fixed layer of the page left (the legal pages' « ↑ » back-to-top,
   the duel recall bar, the fiche purchase bar): they were drawn over the menu's pinned « Les meilleurs canapés ». ---------- */
body.mba.menu-ouvert :is(.dl-haut, .dzd-rappel, .barre-achat, .retour-haut, .actions-mobile) { visibility: hidden !important; }

/* ---------- M19 (grave). Duels: once scrolled past the face-to-face, the « Anna ou Rousseau » recall bar was FIXED AT
   THE VERY TOP, over the site header (z-index 40 against 30): no menu, no search, no heart on any duel while
   scrolling. The bar now slides in UNDER the header. ---------- */
.mba .dzd-rappel { top: var(--haut-entete, 61px); }
@media (min-width: 1024px) { .mba .dzd-rappel { top: var(--haut-entete, 72px); } }

/* ---------- M20. Cookie banner on small phones: 520 px of a 568 px screen, top corners at 18 px under the header.
   Compact text, 4 px corners, never taller than the screen under the header (its own scroll if needed). The two
   choices stay side by side and equally visible. ---------- */
@media (max-width: 480px) {
  .mba .consentement { border-radius: 4px 4px 0 0; max-height: calc(100dvh - var(--haut-entete, 61px) - 8px); overflow-y: auto; overscroll-behavior: contain; }
  .mba .consentement p:not([class*=titre]) { font-size: 0.9rem; line-height: 1.45; }
}

/* ---------- M21. « Voir chez La Redoute » (article boxes, palmarès): the italic merchant name lost its descenders
   (the label box 3 px too short for the serif italic). ---------- */
.mba :is(.dbt-m, .bouton--marchand) .cta__texte { padding-block: 0.12em; line-height: 1.25; }

/* ---------- M22. Pilier, « Votre situation, le bon modèle » on phones: « 205 canapés » ran into « Des invités de temps
   en temps » (text on text). The name first, the count after it on the same line when it fits, the filter below. ---------- */
@media (max-width: 760px) {
  .mba.dzp-manuel .situations__liste a { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.25rem 1rem; }
  .mba.dzp-manuel .situations__nom { flex: 1 1 11rem; min-width: 0; order: 1; text-align: left; }
  .mba.dzp-manuel .situations__n { flex: none; order: 2; white-space: nowrap; }
  .mba.dzp-manuel .situations__filtre { flex: 1 1 100%; order: 3; }
}

/* ---------- M23. Space calculator of the collections and guides on phones: every field had the width of its own
   label (a ragged column), the long labels (« PROFONDEUR DISPONIBLE ») ran over the field's frame and the field
   showed « facultat... ». Two equal columns, labels on two lines when needed, the field fills its cell. ---------- */
@media (max-width: 480px) {
  .mba .calc__champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; align-items: stretch; }
  .mba .calc__champ { min-width: 0; }
  .mba .calc__champs > :not(.calc__champ) { grid-column: 1 / -1; }
  .mba .calc__lib { min-width: 0; flex-wrap: wrap; white-space: normal; letter-spacing: 0.04em; }
  .mba .calc__saisie { display: flex; min-width: 0; padding-right: 0.55rem; }
  .mba .calc__champ > .calc__lib { padding: 0.45rem 0.55rem 0; }
  .mba .calc__saisie input { flex: 1 1 0; width: 0; min-width: 0; }
}

/* ---------- M24. Sticky purchase bar on tablets (iPad Mini 768 px), armchairs and long merchant names: the name was
   squeezed to « Sam · Mais... » by « Voir le fauteuil chez Maisons du Monde ». The little photo steps aside (the
   page above shows the product), the name keeps 8 rem. ---------- */
@media (min-width: 641px) and (max-width: 900px) {
  .mba .barre-achat .barre-achat__photo { display: none; }
  .mba .barre-achat .barre-achat__produit { flex: 1 0 8rem; min-width: 8rem; }
}

/* ---------- M25. Colour swatches of the variant fiches on every phone: after a format change a 10th swatch left the
   screen at 393 px (iPhone 15). They go to a second line, like at 320 px. ---------- */
@media (max-width: 640px) { .mba .fiche .variantes__couleurs.coloris { flex-wrap: wrap !important; } }

/* ---------- M26. Search window on phones (from the header or the menu): the « Chercher » button took half of the
   box (full-width phone rule of the principal buttons) and the field showed « Canapé d'ar »; 18 px corners. The
   field takes the room, the button its own width; Éditorial corners. ---------- */
.mba dialog.recherche { border-radius: 4px; }
.mba .recherche form > .bouton { flex: none; width: auto; min-width: 0; padding: 0 1rem; }
@media (max-width: 480px) { .mba dialog.recherche { width: calc(100vw - 24px); padding: 0.75rem; } }

/* ---------- M27. Pilier questionnaire on small phones: the live result (« Pour l'instant 363 canapés » + a card +
   the button) is sticky at the bottom and covered 55 % of a 568 px screen while answering. While answering it shows
   only the count and the button; once the last question is answered it becomes a normal block with its cards. ---------- */
@media (max-width: 480px) {
  .mba.dzp-manuel .quiz-selection .quiz__resultat { padding: 0.9rem 1rem; }
  .mba.dzp-manuel .quiz-selection .quiz__resultat :is(.quiz__minis, .quiz__aussi) { display: none; }
  .mba.dzp-manuel .quiz-selection .quiz__choix { font-size: 1.3rem; }
  .mba.dzp-manuel .quiz-selection .quiz:has(.quiz__question:last-of-type input:checked) .quiz__resultat { position: static; }
  .mba.dzp-manuel .quiz-selection .quiz:has(.quiz__question:last-of-type input:checked) .quiz__resultat .quiz__minis { display: grid; }
  .mba.dzp-manuel .quiz-selection .quiz:has(.quiz__question:last-of-type input:checked) .quiz__resultat .quiz__aussi { display: block; }
}