/* RESPONSIVE AUDIT 02/10 (Romain 9 h 37, iPhone: « ce genre de bugs ne doit JAMAIS arriver »). Last sheet of the head
   (after design-boutons.css). One rule per defect found by scripts/responsive-audit/balayage.cjs on the CURRENT theme
   (stale cached copies excluded), with its page and width. Prefix rsp- for the few classes the script sets. */

/* ---------- Floating bubbles (info « i », « Notre méthodologie », note detail): never wider than the screen; the
   script responsive-audit.js slides them back inside once open and keeps the arrow on its button ---------- */
.info__bulle, .calcul-note__corps { max-width: calc(100vw - 24px); box-sizing: border-box; }
.info__bulle.rsp-cale::before { left: var(--rsp-fleche, 50%) !important; right: auto !important; transform: translateX(-50%) rotate(45deg) !important; }

/* ---------- Breadcrumb (fiche variants, brand pages, collections at 320 to 360): main.css forces « nowrap » on the
   list at phone widths but a later rule removed the ellipsis, so the last item ran out of the screen (Canapé Anakin
   Bobochic 335 px at 320). It wraps instead, like on tablets. ---------- */
@media (max-width: 900px) {
  .ariane ol, .dk .ariane ol { flex-wrap: wrap; min-width: 0; overflow: visible; }
  .ariane li, .dk .ariane li { flex: 0 1 auto; min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
}

/* ---------- Home « Choisir par forme » (320): « Convertibles » pushed its tile 9 px out of the screen ---------- */
@media (max-width: 560px) { .formes-budgets .formes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.forme { min-width: 0; }
.forme__nom { overflow-wrap: break-word; hyphens: auto; }
@media (max-width: 374px) { .ha .forme { padding-inline: 0.7rem; } .ha .forme__nom { font-size: 0.98rem; } }

/* ---------- Home « Les meilleurs canapés » (320, fallback fonts): the price ran to the screen edge ---------- */
@media (max-width: 374px) {
  .ha .top-canapes__ligne { column-gap: 0.7rem; }
  .ha .top-canapes__chiffres { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.8rem; min-width: 0; }
}

/* ---------- Fiche T1 figures « note / prix / largeur » (320 to 374): « cm » glued to the screen edge ---------- */
@media (max-width: 374px) {
  .fiche.ft .achat__chiffres > .achat__prix { flex: 1 1 0; min-width: 0; }
  .fiche.ft .achat__chiffres > .ft-larg { flex: 0 0 auto; }
  .fiche.ft .achat__chiffres > * { padding: 0 0.45rem !important; }
  .fiche.ft .achat__chiffres > :first-child { padding-left: 0 !important; }
  .fiche.ft .achat__chiffres > :last-child { padding-right: 0 !important; }
  .fiche.ft .note-globale__chiffre, .fiche.ft .achat__prix [data-v-prix], .fiche.ft .ft-larg__v { font-size: 1.5rem !important; }
  .fiche.ft .ft-larg__v small { margin-left: 0.1em; }
}

/* ---------- Fiche T1 on tablets in landscape and small laptops (901 to 1199): the 4 columns of the desktop
   (text / photo / 2 scenes) were squeezed into 973 px: scenes 49 px out of the screen, title over the photo, tool
   labels on top of each other, merchant button cut (« Voir le canapé chez B… »). Under 1200 px the head takes the
   2 columns of the tablet logic: the scenes column goes (as on phones and tablets in portrait, they stay in the
   gallery strip), the text column gets half of the width, the tools wrap on 2 columns. ---------- */
@media (min-width: 901px) and (max-width: 1199px) {
  .fiche.ft1 .fiche__tete { grid-template-columns: minmax(0, 1fr) 1.4rem minmax(0, 1.05fr);
    grid-template-areas:
      "kick . main" "h1 . main" "h2 . main" "intro . main" "suite . main" "chif . main" "situe . main" "cta . main" "fill . vig"
      "vtit . notes" "axes . notes" "ctit . notes" "coul . serv" "enc . notice" "outils outils outils"; }
  .fiche.ft1a2 .fiche__tete { grid-template-columns: minmax(0, 1fr) 1.6rem minmax(0, 1.05fr);
    grid-template-areas:
      "kick . main" "h1 . main" "h2 . main" "intro . main" "suite . main" "chif . main" "situe . main" "cta . main"
      "outils . vig" "ctit . notes" "coul . notes" "vtit . serv" "axes . notice" "enc . notice"; }
  .fiche.ft1a2.ft-solo .fiche__tete { grid-template-columns: minmax(0, 1fr) 1.6rem minmax(0, 1.05fr); }
  .fiche.ft .ft-scenes { display: none !important; }
  .fiche.ft1a2 .fiche-outils { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; column-gap: 1.2rem !important; }
  .fiche.ft1a2 .fiche-outils > .voir-chez-moi, .fiche.ft1a2 .fiche-outils > .outil { white-space: normal !important; min-width: 0; }
}

/* ---------- Sticky purchase bar (fiches T1, 390 to 430): the merchant block must shrink with the screen, never push
   past it (it went to 482 px at 430 on a cached copy) ---------- */
.barre-achat__contenu { min-width: 0; }
.barre-achat__achat { min-width: 0; max-width: 100%; }
.barre-achat__achat > .bouton { min-width: 0; max-width: 100%; }
.barre-achat .cta__texte { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Brand pages in the collection layout (/test-canape-maison-du-monde/, 320 to 414): the « Notre avis sur
   les canapés ... » block took the width of its one-line button (403 px): heading, text and button out of the
   screen ---------- */
.collection.dk > section.bloc:not([class*=" "]) > .lecture { grid-template-columns: minmax(0, 1fr); }
.collection.dk > section.bloc:not([class*=" "]) > .lecture .bouton { max-width: 100%; white-space: normal; text-align: left; }

/* ---------- Followed brands (/marques-de-canapes/, 320 with fallback fonts): « 1 offre, trop peu pour un prix »
   ran out of the screen ---------- */
@media (max-width: 480px) {
  .marques-suivies li { flex-wrap: wrap; gap: 0.1rem 1rem; }
  .marques-suivies__prix { white-space: normal; min-width: 0; }
}

/* ---------- Inspiration « Par couleur » (320, tile opened by a tap): the caption grew with its one-line text and ran
   5 px out of the screen; its column now shrinks and the ellipsis works ---------- */
.im-nu-lab { grid-template-columns: minmax(0, 1fr); box-sizing: border-box; max-width: 100%; }

/* ---------- Fiches T1 on phones (Romain 02/10 10 h 24, Wallas on iPhone): every fiche, variants, classic and
   armchairs, up to 640 px (tablets and desktop unchanged).
   1. the « L'avis · mis à jour le ... » line goes: the date stays lower in the page (« Publié le ..., mis à jour
      le ... ») and in the JSON-LD;
   2. the title gets a clear top margin under the header (it was glued to it), the same breathing as the T1 heads of
      the collections and guides (title about 25 px under the header);
   3. straight into the subject: title (with its subtitle), brand, photo, formats and colours, actions, then
      note / price / width, THEN the introduction and « Lire la suite ». The HTML order is kept (SEO); only the
      display order changes (the introduction is one paragraph and one button, read first by a screen reader). */
@media (max-width: 640px) {
  .fiche.ft .achat > .achat__surtitre { display: none !important; }
  .fiche.ft .achat > .achat__titre { order: 2; margin-top: 1.55rem !important; }
  .fiche.ft .achat > .achat__marque { order: 3; }
  .fiche.ft .achat > .galerie { order: 5; }
  .fiche.ft .achat > .format-choix, .fiche.ft .achat > .variantes > .format-choix { order: 6; }
  .fiche.ft .achat > .variantes > .variantes__titre:first-child { order: 7; }
  .fiche.ft .achat > .variantes > .variantes__axes { order: 8; }
  .fiche.ft .achat > .variantes > .format-encart { order: 9; }
  .fiche.ft .achat > .variantes > .variantes__titre:not(:first-child) { order: 10; }
  .fiche.ft .achat > .variantes > .variantes__couleurs { order: 11; }
  .fiche.ft .achat > .fiche-outils { order: 12; }
  .fiche.ft .achat > .achat__chiffres { order: 13; margin-top: 1rem; }
  .fiche.ft .achat > .prix-situe { order: 13; }
  .fiche.ft .achat > .ft-intro { order: 14; margin-top: 1.1rem; }
  .fiche.ft .achat > .ft-suite { order: 14; }
  .fiche.ft .achat > .notes { order: 15; }
}

/* ---------- « Choisir mon format » of the variant fiches (Romain 02/10 10 h 47: « bouton rond moche » on phones):
   design-boutons already squares it (4 px, 44 px); here it takes the rest of the Éditorial principal: the same type
   as « Voir chez ... » and the other principal buttons, the arrow after the label instead of the small chevron.
   Under body.dbt only (with the system off, the theme stays as before). ---------- */
.dbt .format-choix__action { gap: 0.45rem; min-height: 44px; padding: 0 1rem; border-radius: 4px; background: var(--anthracite); color: var(--blanc); font: 600 0.9rem/1.15 var(--sans); letter-spacing: 0; }
.dbt .format-choix__action svg { display: none; }
.dbt .format-choix__action::after { content: "→"; transition: transform 0.2s ease; }
.dbt .format-choix__bouton:hover .format-choix__action { background: #000; }
.dbt .format-choix__bouton:hover .format-choix__action::after { transform: translateX(4px); }
@media (max-width: 380px) { .dbt .format-choix__action { padding: 0 0.75rem; font-size: 0.84rem; } }
@media (prefers-reduced-motion: reduce) { .dbt .format-choix__action::after { transition: none; } }

/* ---------- Éditorial everywhere on phones and tablets (Romain 02/10 10 h 55): what the automatic inventory
   (boutons-hors.cjs, menus and panels opened) still found round or as a pill once design-boutons is on. The form of
   the system (4 px corners, 44 px targets) is applied; the colours of the « Nuit » header, menu and footer (validated
   the same morning) are kept. ---------- */
/* phone menu « Nuit »: search field, chips, the pinned « Les meilleurs canapés » bar and its arrow, Mon projet */
.dbt.en-nuit :is(.en-chercher, .en-pastille, .en-epingle__phare, .en-epingle__projet, .entete--mag .bouton-recherche) { border-radius: 4px; }
.dbt.en-nuit .en-epingle__phare i { border-radius: 2px; }
/* footer networks and share buttons: square like the heart and every other icon button of the system */
.dbt.en-nuit .pied__reseaux a { border-radius: 4px; }
.dbt .partage__lien { border-radius: 4px; }
.dbt .partage--panneau .partage__lien { border-radius: 4px; }
/* the « i » of the help texts (collections): 22 px drawn and round like the « i » of the notes (a glyph badge, as
   design-boutons keeps it), 44 px to touch */
.dbt .aide-i { position: relative; }
.dbt .aide-i::before { content: ""; position: absolute; inset: -11px; }
/* icon buttons drawn as circles: the gallery arrow, « back to top » of the legal pages: square like the heart */
.dbt :is(.galerie__fleche, .dl-haut) { border-radius: 4px; }
/* Comparatifs: the jump cards « Les meilleurs », « Les duels » (14 px / pill corners): the corners of the system */
.dbt .sel-saut { border-radius: 4px; }
/* Pinterest « Enregistrer » of the brand pages: 44 px like the others */
.dbt .dzm-epingle { min-height: 44px; padding-inline: 0.9rem; }
/* Pinterest « Enregistrer » of the pillar page: the official red pill, 44 px like the others (planche 2) */
.dbt .dzp-pin { min-height: 44px; padding-inline: 0.9rem; }

/* ---------- Home « Choisir par taille / par marque » (414 and 430): the names stayed on one line and touched the
   screen edge in the right column; they wrap ---------- */
.acc-pastille, .ha .acc-pastille, .acc-pastille__nom, .ha .acc-pastille__nom { white-space: normal; min-width: 0; }
.acc-pastille__nom { min-width: 0; overflow-wrap: break-word; }

/* ---------- Mag' article rail « La sélection liée » (320): the mini cards took the width of their longest name
   (302 px in a 288 px column), the rail ran out of the screen ---------- */
.dz-rail__bloc, .dz-minis { grid-template-columns: minmax(0, 1fr); }
.dz-minis > li, .dz-mini > * { min-width: 0; }
.dz-mini__nom { overflow-wrap: break-word; }
/* « Nos guides » links outside the guide pages (/marques-de-canapes/...): serif pills of 34 px; they take the chip
   the guide pages already give them (design-guide.css .dg .guide-piliers a) */
.dbt .guide-piliers a { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 44px; padding: 0 0.8rem; border: 1px solid var(--trait); border-radius: 4px; background: var(--blanc); color: var(--anthracite); font: 500 0.82rem/1.2 var(--sans); text-decoration: none; }
.dbt .guide-piliers a:hover { border-color: var(--anthracite); box-shadow: inset 0 -3px 0 var(--moutarde); }