/* Planche lot 1 : tokens du kit de marque A. Mobile d'abord.
   Contrastes mesurés (WCAG 2.1) : marine sur crème 15,29 ; bleu sur crème 8,10 ;
   blanc sur bleu 8,46 ; gris texte #4a5470 sur crème 7,20. Le rouge (3,94 sur crème,
   4,12 sous du blanc) ne porte jamais de texte : il reste décoratif. */

@font-face { font-family: "Poppins"; src: url("/polices/poppins-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/polices/poppins-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/polices/poppins-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/polices/poppins-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/polices/inter-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --creme: #FBFAF6; --marine: #14213d; --bleu: #1d3fbb; --rouge: #e5402c; --blanc: #ffffff;
  /* Ambre réservé aux boutons de devis (simulation couleurs, variante B choisie par Alex le 20/10) ;
     texte marine, contraste 7,41. Jamais de texte crème ou blanc dessus (2,06). */
  --orange: #E8A33D; --orange-survol: #D9922C;
  /* Vert forêt réservé aux régions (même choix) : carte, légende, menu, titres ; 5,06 sur crème. */
  --vert: #1F7A55;
  --gris: #4a5470; --ligne: rgba(20, 33, 61, .12); --voile: #eef0f6;
  --titres: "Poppins", system-ui, sans-serif;
  --texte: "Inter", system-ui, sans-serif;
  --rayon: 14px; --gouttiere: 16px; --largeur: 1200px;
}
html[data-typo="1"] { --texte: "Poppins", system-ui, sans-serif; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--creme); color: var(--marine); font: 400 16px/1.6 var(--texte); overflow-x: clip; }
img { max-width: 100%; display: block; }
a { color: var(--bleu); text-underline-offset: 3px; }
h1, h2, h3 { font-family: var(--titres); line-height: 1.15; margin: 0; letter-spacing: -.01em; }
h1 { font-size: clamp(30px, 7.6vw, 54px); font-weight: 700; }
h2 { font-size: clamp(24px, 5.4vw, 36px); font-weight: 700; }
h3 { font-size: 17px; font-weight: 600; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--bleu); outline-offset: 3px; border-radius: 4px; }
.cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.evitement { position: absolute; left: 8px; top: -60px; background: var(--marine); color: var(--creme); padding: 10px 14px; z-index: 100; border-radius: 8px; }
.evitement:focus { top: 8px; }
.conteneur { max-width: var(--largeur); margin: 0 auto; padding: 0 var(--gouttiere); }
.section { padding: 56px 0; position: relative; overflow: hidden; }
.section > .conteneur, .hero > .conteneur, .entete-page > * { position: relative; z-index: 1; }
.section-tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 12px 24px; margin-bottom: 24px; }
.section-tete p { color: var(--gris); max-width: 620px; margin-top: 8px; }
.lien-fleche { font-weight: 600; white-space: nowrap; }
.provisoire { display: inline-block; font: 600 11px/1 var(--texte); letter-spacing: .06em; text-transform: uppercase; color: var(--marine); background: #ffe9a8; border-radius: 999px; padding: 5px 9px; vertical-align: middle; }

/* Boutons : le bleu porte l'action, rien d'autre ne lui ressemble */
.bouton { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 22px; border-radius: 999px; font: 600 15px/1.2 var(--titres); text-decoration: none; border: 2px solid transparent; cursor: pointer; }
.bouton-plein { background: var(--orange); color: var(--marine); }
.bouton-plein:hover { background: var(--orange-survol); }
.bouton-contour { border-color: var(--marine); color: var(--marine); background: transparent; }
.bouton-contour:hover { background: var(--marine); color: var(--creme); }

/* Barre de planche (privée) */
.planche { background: #2a2f3a; color: #f2f2f2; font: 500 12px/1.4 var(--texte); }
.planche .conteneur { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; padding-top: 7px; padding-bottom: 7px; }
.planche fieldset { border: 0; margin: 0; padding: 0; display: flex; gap: 4px; align-items: center; }
.planche legend { float: left; margin-right: 6px; }
.planche button { font: inherit; color: inherit; background: transparent; border: 1px solid #6b7280; border-radius: 999px; padding: 3px 10px; cursor: pointer; }
.planche button[aria-pressed="true"] { background: #f2f2f2; color: #111; border-color: #f2f2f2; }

/* Bandeau pro et en-tête */
.bandeau-pro { background: var(--marine); color: var(--creme); font-size: 13px; }
.bandeau-pro .conteneur { display: flex; flex-wrap: wrap; gap: 4px 18px; justify-content: center; align-items: center; min-height: 38px; padding-top: 6px; padding-bottom: 6px; text-align: center; }
.bandeau-pro a { color: var(--creme); font-weight: 600; }
.bandeau-pro .secondaire { display: none; }
.entete { background: var(--creme); border-bottom: 1px solid var(--ligne); position: sticky; top: 0; z-index: 20; }
.entete .conteneur { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; max-width: 1440px; }
.logo img { height: 32px; width: auto; }
.navigation { display: none; }
.navigation > ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 22px; }
.navigation a { color: var(--marine); text-decoration: none; font: 500 15px var(--titres); padding: 6px 0; border-bottom: 2px solid transparent; }
.navigation li.deroulant { position: relative; }
.navigation li.deroulant > a::after { content: ""; display: inline-block; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-3px) rotate(45deg); margin-left: 8px; }
.navigation .sous-menu { display: none; position: absolute; left: -18px; top: 100%; min-width: 260px; list-style: none; margin: 0; padding: 10px 0; background: var(--blanc); border: 1px solid var(--ligne); border-radius: 12px; box-shadow: 0 16px 32px rgba(20, 33, 61, .12); z-index: 40; }
.navigation li.deroulant:hover .sous-menu, .navigation li.deroulant:focus-within .sous-menu { display: block; }
.navigation .sous-menu a { display: flex; justify-content: space-between; gap: 16px; padding: 9px 18px; border: 0; font-size: 15px; }
.navigation .sous-menu a:hover { background: var(--voile); }
.navigation .sous-menu small { color: var(--gris); font: 400 13px var(--texte); }
.navigation .sous-menu li.tout a { border-top: 1px solid var(--ligne); margin-top: 6px; padding-top: 12px; font-weight: 600; }
.menu-mobile .sous-menu-mobile { list-style: none; margin: 0; padding: 0 0 6px 16px; position: static; box-shadow: none; border: 0; }
.menu-mobile .sous-menu-mobile a { font-size: 15px; padding: 11px 0; display: flex; justify-content: space-between; }
.menu-mobile .sous-menu-mobile small { color: var(--gris); font: 400 13px var(--texte); }
.navigation a:hover, .navigation a[aria-current="page"] { border-bottom-color: var(--bleu); }
.entete .bouton { display: none; min-height: 42px; padding: 9px 18px; font-size: 14px; }
/* Menu du téléphone (audit mobile du 06/11) : bouton de 44 px à trois traits (croix quand il est ouvert) ;
   panneau fixe de la base de l'en-tête au bas de l'écran, qui défile seul ; sous-menus en accordéon. */
.menu-mobile summary { list-style: none; cursor: pointer; width: 44px; height: 44px; display: grid; place-items: center; border: 1.5px solid var(--marine); border-radius: 999px; }
.menu-mobile summary::-webkit-details-marker { display: none; }
.burger, .burger::before, .burger::after { display: block; width: 18px; height: 2px; background: var(--marine); border-radius: 2px; position: relative; transition: transform .15s; }
.burger::before, .burger::after { content: ""; position: absolute; left: 0; }
.burger::before { top: -6px; } .burger::after { top: 6px; }
.menu-mobile[open] .burger { background: transparent; }
.menu-mobile[open] .burger::before { top: 0; transform: rotate(45deg); }
.menu-mobile[open] .burger::after { top: 0; transform: rotate(-45deg); }
.menu-mobile > nav { position: fixed; left: 0; right: 0; top: var(--bas-entete, 100px); bottom: 0; overflow-y: auto; overscroll-behavior: contain; background: var(--creme); border-top: 1px solid var(--ligne); padding: 12px var(--gouttiere) calc(24px + env(safe-area-inset-bottom)); z-index: 25; }
.menu-mobile > nav > ul { list-style: none; margin: 0; padding: 0; }
.menu-mobile li a { display: block; padding: 13px 0; border-bottom: 1px solid var(--ligne); color: var(--marine); text-decoration: none; font: 500 17px var(--titres); }
.menu-actions { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; padding: 4px 0 14px; }
.menu-actions .bouton { display: inline-flex; min-height: 46px; }
.tel-menu, .tel-bandeau { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: none; }
.tel-menu { color: var(--vert); min-height: 44px; }
.accordeon-tete { display: flex; align-items: center; border-bottom: 1px solid var(--ligne); }
.accordeon-tete a { flex: 1; border-bottom: 0 !important; }
.ouvrir-sous-menu { width: 44px; height: 44px; flex: none; display: grid; place-items: center; background: none; border: 0; cursor: pointer; color: var(--marine); }
.ouvrir-sous-menu span { width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform .15s; }
.ouvrir-sous-menu[aria-expanded="true"] span { transform: rotate(-135deg) translate(-2px, -2px); }
.js .accordeon .sous-menu-mobile { display: none; }
.js .accordeon-tete:has(> [aria-expanded="true"]) + .sous-menu-mobile { display: block; }
.menu-ouvert body { overflow: hidden; }

/* Devis toujours accessible sur mobile */
.devis-mobile { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--creme); border-top: 1px solid var(--ligne); padding: 10px var(--gouttiere) calc(10px + env(safe-area-inset-bottom)); display: flex; gap: 10px; align-items: center; }
.devis-mobile span { font-size: 13px; color: var(--gris); line-height: 1.3; flex: 1; }
.devis-mobile .bouton { min-height: 46px; flex: none; }

/* Fil d'Ariane */
.ariane { font-size: 14px; color: var(--gris); padding-top: 16px; }
.ariane ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.ariane li[aria-current] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.ariane li + li::before { content: "›"; margin-right: 4px; color: var(--gris); }
.ariane a { color: var(--gris); }

/* Hero, variante A : texte et montage de photos réelles */
.hero { position: relative; overflow: hidden; }
.hero-a { padding: 32px 0 48px; }
.hero-a .conteneur { display: grid; gap: 32px; }
.hero-a .decor { position: absolute; right: -180px; top: -40px; width: 620px; opacity: .14; pointer-events: none; }
.hero-texte { position: relative; z-index: 1; }
.signature { font: 600 13px/1.4 var(--titres); letter-spacing: .08em; text-transform: uppercase; color: var(--bleu); margin-bottom: 14px; }
.hero-texte h1 { max-width: 15em; }
.hero-texte p.appui { font-size: 17px; color: var(--gris); margin-top: 18px; max-width: 34em; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.montage { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 46px; gap: 8px; }
.montage figure { margin: 0; overflow: hidden; border-radius: var(--rayon); background: var(--voile); }
.montage img { width: 100%; height: 100%; object-fit: cover; }
.montage .m1 { grid-column: 1; grid-row: 1 / 4; }
.montage .m4 { grid-column: 1; grid-row: 4 / 6; }
.montage .m7 { grid-column: 1; grid-row: 6 / 8; }
.montage .m2 { grid-column: 2; grid-row: 1 / 3; }
.montage .m5 { grid-column: 2; grid-row: 3 / 6; }
.montage .m8 { grid-column: 2; grid-row: 6 / 8; }
.montage .m3 { grid-column: 3; grid-row: 1 / 3; }
.montage .m6 { grid-column: 3; grid-row: 3 / 5; }
.montage .m9 { grid-column: 3; grid-row: 5 / 8; }
.montage figure.packshot { background: var(--blanc); border: 1px solid var(--ligne); }
.montage figure.packshot img { object-fit: contain; padding: 3%; }
.montage figcaption { display: none; }

/* Hero, variante B : une seule grande photo */
/* Bandeau de confiance */
.confiance { background: var(--blanc); border-top: 1px solid var(--ligne); border-bottom: 1px solid var(--ligne); }
.confiance ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; }
.confiance li { padding: 20px 14px 20px 0; border-bottom: 1px solid var(--ligne); font-size: 14px; color: var(--gris); }
.confiance li strong { display: block; font: 600 16px/1.3 var(--titres); color: var(--marine); margin-bottom: 4px; }
.confiance .lien-mentions { padding: 14px 0 18px; font-size: 14px; }

/* Tuiles (occasions, familles) */
.tuiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tuile { position: relative; display: block; border-radius: var(--rayon); overflow: hidden; aspect-ratio: 4 / 5; background: var(--voile); color: var(--blanc); text-decoration: none; }
.tuile img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.tuile:hover img { transform: scale(1.04); }
.tuile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20, 33, 61, .88), rgba(20, 33, 61, 0) 60%); }
.tuile span { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 1; font: 600 15px/1.25 var(--titres); }
.tuile small { display: block; font: 400 13px/1.35 var(--texte); margin-top: 4px; opacity: .92; }
.tuile-texte { aspect-ratio: auto; min-height: 120px; background: var(--blanc); color: var(--marine); border: 1px solid var(--ligne); padding: 18px; }
.tuile-texte::after { display: none; }
.tuile-texte span { position: static; }
.tuile-texte small { color: var(--gris); }

/* Carte de France */
.carte-section { background: var(--voile); }
.carte-grille { display: grid; gap: 28px; }
.carte-svg { max-width: 460px; width: 100%; margin: 0 auto; }
.carte-svg path { fill: var(--blanc); stroke: #c3c9da; stroke-width: 2; }
.etat-regions { margin-top: 18px; padding: 14px 16px; border-left: 3px solid var(--bleu); background: var(--blanc); border-radius: 0 10px 10px 0; font-size: 15px; }

/* Cartes produit */
.grille-produits { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.carte-produit { background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--rayon); overflow: hidden; display: flex; flex-direction: column; color: var(--marine); text-decoration: none; position: relative; }
.carte-produit:hover { border-color: rgba(20, 33, 61, .3); }
.carte-produit .visuel { position: relative; aspect-ratio: 1; background: var(--blanc); }
.carte-produit .visuel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 10%; }
.carte-produit .visuel img.ambiance { object-fit: cover; padding: 0; opacity: 0; transition: opacity .35s; }
.carte-produit:hover .visuel img.ambiance, .carte-produit:focus-visible .visuel img.ambiance { opacity: 1; }
.sans-photo { position: absolute; inset: 0; display: grid; place-items: center; color: var(--gris); font-size: 13px; background: var(--voile); }
.carte-produit .corps { padding: 12px 12px 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.carte-produit h3 { font-size: 14px; line-height: 1.3; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.origine { display: inline-flex; align-items: center; gap: 6px; font: 600 12px/1.2 var(--texte); color: var(--marine); }
.origine::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--bleu); flex: none; }
.prix { font-size: 13px; color: var(--gris); margin-top: auto; }
.prix strong { color: var(--marine); font: 600 15px var(--titres); white-space: nowrap; }

/* Qui sommes-nous, journal */
.qsn { display: grid; gap: 20px; }
.qsn p { color: var(--gris); max-width: 40em; }
.articles { display: grid; gap: 12px; }
.article-carte { background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 20px; text-decoration: none; color: var(--marine); display: flex; flex-direction: column; gap: 10px; }
.article-carte .theme { font: 600 12px var(--texte); letter-spacing: .06em; text-transform: uppercase; color: var(--bleu); }
.article-carte.a-venir { background: transparent; border-style: dashed; color: var(--gris); }

/* Bloc devis */
.devis { background: var(--marine); color: var(--creme); overflow: hidden; }
.qsn-section { overflow: hidden; }
.qsn-section .decor { position: absolute; left: -150px; bottom: -120px; width: 520px; pointer-events: none; opacity: .9; }
.qsn-section .conteneur { position: relative; z-index: 1; }
.devis .conteneur { position: relative; z-index: 1; }
.devis p { color: #d5dae6; max-width: 40em; margin-top: 12px; }
.devis a:not(.bouton) { color: var(--creme); }
.devis .bouton-plein { margin-top: 24px; }

/* Pied de page */
.separateur { height: 40px; width: 100%; object-fit: contain; margin-top: 8px; }
.pied { padding-top: 32px; padding-bottom: 48px; font-size: 14px; color: var(--gris); }
.signature-pied { margin-bottom: 20px; }
.pied nav ul { list-style: none; margin: 0 0 24px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.pied a { color: var(--marine); }
.pied .logo img { height: 34px; margin-bottom: 14px; }

/* Page famille : filtres */
.filtres { display: flex; flex-direction: column; gap: 14px; margin: 20px 0 16px; padding: 16px; background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--rayon); }
.filtres fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filtres legend { font: 600 13px var(--titres); margin-bottom: 8px; width: 100%; }
.filtres label { position: relative; }
.filtres input { position: absolute; opacity: 0; inset: 0; }
.filtres label span { display: inline-block; padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--ligne); font-size: 14px; cursor: pointer; background: var(--creme); }
.filtres input:checked + span { background: var(--marine); border-color: var(--marine); color: var(--creme); }
.filtres input:focus-visible + span { outline: 3px solid var(--bleu); outline-offset: 2px; }
.compteur { font-size: 14px; color: var(--gris); margin-bottom: 14px; }
.intro-famille { color: var(--gris); max-width: 46em; margin-top: 10px; }

/* Fiche produit */
.fiche { display: grid; gap: 24px; padding-top: 20px; padding-bottom: 48px; }
.fiche-visuel { background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--rayon); aspect-ratio: 1; position: relative; }
.fiche-visuel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 8%; }
.fiche h1 { font-size: clamp(24px, 5.6vw, 36px); }
.bloc-origine { margin-top: 18px; background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 16px; }
.bloc-origine .origine { font-size: 15px; }
.bloc-origine dl { margin: 12px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 14px; }
.bloc-origine dt { color: var(--gris); }
.bloc-origine dd { margin: 0; }
.bloc-origine .liens { margin-top: 12px; font-size: 14px; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.bloc-prix { margin-top: 18px; }
.bloc-prix .prix { font-size: 15px; }
.bloc-prix .prix strong { font-size: 24px; }
.bloc-prix ul { margin: 10px 0 0; padding-left: 18px; color: var(--gris); font-size: 14px; }

@media (min-width: 700px) {
  :root { --gouttiere: 28px; }
  .bandeau-pro .secondaire { display: inline; }
  .confiance ul { grid-template-columns: repeat(4, 1fr); }
  .confiance li { border-bottom: 0; border-right: 1px solid var(--ligne); padding: 24px 18px; }
  .confiance li:first-child { padding-left: 0; }
  .confiance li:last-child { border-right: 0; }
  .tuiles { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .grille-produits { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .articles { grid-template-columns: repeat(3, 1fr); }
  .pied nav ul { grid-template-columns: repeat(4, 1fr); }
  .filtres { flex-direction: row; flex-wrap: wrap; gap: 20px 40px; }
  .filtres fieldset { width: auto; }
}
@media (min-width: 1000px) {
  body { padding-bottom: 0; }
  .devis-mobile { display: none; }
  .menu-mobile { display: none; }
  .navigation { display: block; }
  .entete .bouton { display: inline-flex; }
  .logo img { height: 40px; }
  .navigation a, .entete .bouton { white-space: nowrap; }
  .entete .conteneur { min-height: 80px; }
  .section { padding: 80px 0; }
  .hero-a { padding: 56px 0 72px; }
  .hero-a .conteneur { grid-template-columns: 1fr 1.05fr; align-items: center; gap: 56px; }
  .hero h1 { font-size: 46px; }
  .tuile { aspect-ratio: 4 / 3; }
  .qsn-section { padding-bottom: 140px; }
  .hero-a .decor { right: -60px; top: -150px; width: 760px; opacity: 1; }
  .montage { grid-auto-rows: 74px; gap: 10px; }
      .grille-produits { grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .carte-produit h3 { font-size: 15px; }
  .carte-grille { grid-template-columns: 1fr 1fr; align-items: center; gap: 56px; }
  .qsn { grid-template-columns: 1fr 1fr; align-items: start; gap: 56px; }
  .fiche { grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; padding-top: 28px; }
  .pied nav ul { grid-template-columns: repeat(5, 1fr); }
}
@media (min-width: 1000px) and (max-width: 1239px) {
  .logo img { height: 32px; }
  .navigation > ul { gap: 14px; }
  .navigation a { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* Ronds du kit A, en coins et sur les côtés (retour d'Alex du 15/10 : davantage présents).
   Toujours décoratifs, jamais sous un texte de lecture : ils débordent des sections. */
.rond { position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; }
.rond-bleu { background: var(--bleu); }
.rond-rouge { background: var(--rouge); }
.rond-anneau { border: solid var(--marine); }
.rond-anneau-clair { border: solid var(--creme); }
.hero-a .r1 { width: 150px; height: 150px; left: -75px; bottom: -75px; }
.hero-a .r2 { width: 64px; height: 64px; right: -24px; top: -26px; }
#occasions .r1 { width: 170px; height: 170px; left: -110px; top: 36px; }
#occasions .r2 { width: 92px; height: 92px; border-width: 20px; right: -36px; bottom: 48px; }
#regions .r1 { width: 220px; height: 220px; right: -90px; bottom: -90px; }
#regions .r2 { width: 60px; height: 60px; left: 18px; top: 22px; }
#incontournables .r1 { width: 104px; height: 104px; border-width: 22px; left: -62px; top: 42%; }
#journal .r1 { width: 120px; height: 120px; right: -60px; top: 10px; }
.devis .r1 { width: 230px; height: 230px; right: -80px; top: -90px; }
.devis .r2 { width: 84px; height: 84px; border-width: 18px; right: 90px; bottom: -30px; }
.entete-page { position: relative; overflow: hidden; }
.entete-page .r1 { width: 130px; height: 130px; right: -50px; top: -40px; }
.entete-page .r2 { width: 46px; height: 46px; right: 92px; top: 34px; }
.fiche-page .r1 { right: auto; left: -70px; top: auto; bottom: 30%; width: 140px; height: 140px; }
.fiche-page .r2 { right: -23px; top: auto; bottom: 24px; }
.hero-a .decor { display: none; }
@media (min-width: 1000px) {
  .hero-a .decor { display: block; }
  .hero-a .r2 { display: none; }
  .hero-a .r1 { width: 220px; height: 220px; left: -110px; bottom: -110px; }
  #occasions .r1 { width: 240px; height: 240px; left: -150px; }
  #incontournables .r1 { width: 140px; height: 140px; border-width: 30px; left: -80px; }
  #journal .r1 { width: 180px; height: 180px; right: -80px; }
  .entete-page .r1 { width: 220px; height: 220px; right: -60px; top: -90px; }
  .entete-page .r2 { width: 70px; height: 70px; right: 190px; top: 30px; }
  .fiche-page .r1 { left: -90px; top: auto; bottom: 20%; right: auto; width: 180px; height: 180px; }
  .fiche-page .r2 { right: -35px; top: auto; bottom: 40px; }
}

/* Pages de texte (rubriques, occasions, régions, hub, journal, pages fixes) :
   gabarit neutre, sans planche validée ; il reprend les éléments du kit sans en ajouter. */
.page-texte { padding-bottom: 8px; }
.texte-page { padding-top: 12px; padding-bottom: 48px; }
.texte-page > h1 { font-size: clamp(28px, 6.4vw, 46px); max-width: 22em; margin-top: 12px; }
.theme-article { font: 600 12px var(--texte); letter-spacing: .06em; text-transform: uppercase; color: var(--bleu); margin-top: 16px; }
.chapo { max-width: 46em; margin-top: 14px; font-size: 18px; color: var(--gris); }
.chapo p + p { margin-top: 10px; }
.prose-section, .faq, .liens-section, .sources, .en-bref, .texte-page > .tableau { max-width: 46em; }
.prose-section, .faq, .liens-section, .sources { margin-top: 40px; }
.texte-page h2 { font-size: clamp(22px, 4.6vw, 30px); margin: 32px 0 10px; }
.texte-page h3 { margin: 22px 0 6px; }
.texte-page p, .texte-page li { color: var(--marine); }
.texte-page p + p { margin-top: 10px; }
.texte-page ul, .texte-page ol { padding-left: 20px; margin: 10px 0; }
.texte-page li + li { margin-top: 6px; }
.texte-page blockquote { margin: 20px 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--bleu); font: 600 19px/1.4 var(--titres); }
/* Rubriques : texte et colonne « L'essentiel » (planche du 28/10, option A). */
.edito-colonnes { display: grid; gap: 28px; }
.edito-colonnes > * { min-width: 0; }
.essentiel { background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 18px 20px; align-self: start; }
.essentiel-titre { font: 600 13px var(--titres); text-transform: uppercase; letter-spacing: .06em; color: var(--gris); margin: 0 0 6px; }
.essentiel .repere { padding: 10px 0; border-top: 1px solid var(--ligne); margin: 0; }
.essentiel .repere strong { display: block; font: 700 22px/1.2 var(--titres); }
.essentiel .repere span { font-size: 14px; color: var(--gris); }
.essentiel .bouton-devis { display: block; text-align: center; margin-top: 12px; }
.essentiel .sommaire { margin-top: 14px; font-size: 14px; }
.essentiel .sommaire a { display: block; padding: 4px 0; text-decoration: none; }
.edito-texte > .prose-section:first-child { margin-top: 0; }
.edito-texte .prose-section, .edito-texte .faq { max-width: none; }
.edito-texte .prose-section > :not(.tableau), .edito-texte .faq > * { max-width: 46em; }
@media (max-width: 999px) { .essentiel { order: -1; } .essentiel .sommaire { display: none; } }
@media (min-width: 1000px) { .edito-colonnes { grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; } .essentiel { position: sticky; top: 96px; } }
/* Tableaux (planche du 28/10, carte blanche d'Alex sur l'UX) : en-tête marine, lignes alternées, prix en gras
   alignés à droite ; sur téléphone, chaque ligne devient une carte (libellé de colonne et valeur). */
.tableau { overflow-x: auto; margin: 20px 0; border: 1px solid var(--ligne); border-radius: var(--rayon); background: var(--blanc); }
.tableau table { border-collapse: collapse; width: 100%; font-size: 14.5px; }
.tableau th { background: var(--marine); color: var(--blanc); font: 600 13px/1.3 var(--titres); text-align: left; padding: 11px 14px; vertical-align: bottom; }
.tableau td { text-align: left; vertical-align: middle; padding: 11px 14px; border-top: 1px solid var(--ligne); }
.tableau tbody tr:nth-child(even) td { background: #f7f6f1; }
.tableau th.prix, .tableau td.prix { text-align: right; white-space: nowrap; }
.tableau td.prix { font: 700 15px var(--titres); }
.tableau td:first-child a { font-weight: 600; }
.tableau .v { display: block; }
.region-cellule { display: block; color: var(--gris); font-size: 12.5px; }
.pastille-ofg { display: inline-block; font-size: 12px; font-weight: 600; color: var(--bleu); background: #e8edfb; border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
@media (max-width: 699px) {
  .tableau { border: 0; background: none; overflow: visible; }
  .tableau thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tableau table, .tableau tbody, .tableau tr, .tableau td { display: block; width: 100%; }
  .tableau tr { background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 10px 14px; margin-bottom: 10px; }
  .tableau tbody tr:nth-child(even) td { background: none; }
  .tableau td { border: 0; padding: 3px 0; display: grid; grid-template-columns: minmax(0, 42%) 1fr; gap: 12px; text-align: right; }
  .tableau td::before { content: attr(data-label); color: var(--gris); text-align: left; font: 400 13px var(--texte); }
  .tableau td:first-child { display: block; text-align: left; font: 600 15px var(--titres); padding-bottom: 6px; }
  .tableau td:first-child::before { content: none; }
  .tableau td.prix { text-align: right; }
}
.texte-page .bandeau-preuve { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.texte-page .bandeau-preuve li { margin: 0; padding: 7px 14px; border-radius: 999px; background: var(--blanc); border: 1px solid var(--ligne); font: 600 13px var(--texte); }
.en-bref { margin-top: 24px; background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 16px 18px; }
.en-bref h2 { font-size: 18px; margin: 0 0 6px; }
.selection { margin-top: 28px; }
.texte-page .sous-cats ul { list-style: none; padding: 0; margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 8px; }
.sous-cats li { margin: 0; }
.sous-cats a { display: inline-block; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--ligne); background: var(--blanc); color: var(--marine); text-decoration: none; font-size: 14px; }
.sous-cats small { color: var(--gris); }
.groupe-produits h2 { font-size: 20px; margin: 28px 0 12px; }
.faq h3 { font-size: 17px; }
.liens-cartes { display: grid; gap: 12px; }
.liens-cartes .article-carte h3, .articles-liste .article-carte h2 { font-size: 17px; margin: 0; }
.sources { font-size: 14px; }
.sources p, .sources li { color: var(--gris); overflow-wrap: anywhere; }
.maj { margin-top: 32px; font-size: 14px; color: var(--gris); }
.tuiles-texte { margin-top: 24px; }
.liens-bas { margin-top: 28px; font-size: 15px; }
@media (min-width: 700px) {
  .liens-cartes { grid-template-columns: 1fr 1fr; }
  .grille-produits { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1000px) {
  .collection .grille-produits { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 699px) {
  /* Sur téléphone, les ronds décoratifs passeraient sous le titre des pages de texte. */
  .page-texte > .rond { display: none; }
}

/* Grille de prix de la fiche (brief Cocometa du 19/10) : une ligne par palier réel. */
.grille-prix { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 15px; background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--rayon); }
.grille-prix caption { text-align: left; font: 600 15px var(--titres); padding-bottom: 8px; }
.grille-prix th, .grille-prix td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--ligne); vertical-align: top; }
.grille-prix thead th { font: 600 13px var(--titres); color: var(--gris); background: var(--voile); }
.grille-prix thead th span { display: block; font: 400 12px var(--texte); }
.grille-prix tbody th { font-weight: 500; white-space: nowrap; }
.grille-prix td { font-weight: 600; white-space: nowrap; }
.grille-prix .au-devis { font-weight: 400; color: var(--gris); white-space: normal; }
.grille-prix small { font-weight: 400; color: var(--gris); }
.mention-prix { font-size: 13px; color: var(--gris); margin-top: 8px; }
.prix .inclus { display: block; font-size: 12px; color: var(--marine); margin-top: 2px; }
@media (max-width: 699px) {
  .grille-prix { table-layout: fixed; font-size: 14px; }
  .grille-prix th, .grille-prix td { padding: 8px; white-space: normal; overflow-wrap: anywhere; }
}

/* Pages de sélection à la IA Goodies (choix d'Alex du 19/10, simu_pages_selection B, B, B). */
.bande-selection { background: #f1ede4; border-bottom: 1px solid var(--ligne); text-align: center; padding: 34px 0 30px; }
.bande-selection h1 { font-size: clamp(28px, 5.4vw, 44px); margin: 6px 0 10px; }
.bande-selection .sous-titre p { max-width: 62em; margin: 0 auto; color: var(--gris); font-size: 17px; }
.surtitre { font: 600 12px var(--texte); letter-spacing: .08em; text-transform: uppercase; color: var(--bleu); margin: 0; }
.barre-selection { position: sticky; top: 65px; z-index: 15; background: var(--blanc); border-bottom: 1px solid var(--ligne); padding: 10px 0 4px; }
.barre-selection .pastilles { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 2px; }
.barre-selection .pastilles button { flex: none; font: 500 14px var(--titres); border: 1px solid var(--ligne); background: var(--blanc); color: var(--marine); border-radius: 999px; padding: 7px 13px; cursor: pointer; white-space: nowrap; }
.barre-selection .pastilles small { color: var(--gris); font-size: 12px; }
.barre-selection .pastilles button[aria-pressed="true"] { background: var(--marine); color: var(--creme); border-color: var(--marine); }
.barre-selection .pastilles button[aria-pressed="true"] small { color: #c9cfdd; }
.barre-selection .cases { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; font-size: 14px; }
.barre-selection .cases label { border: 1px solid var(--ligne); border-radius: 8px; padding: 6px 10px; display: inline-flex; gap: 6px; align-items: center; cursor: pointer; background: var(--blanc); }
.barre-selection .libelle { color: var(--gris); }
.barre-selection .sep { width: 1px; height: 22px; background: var(--ligne); margin: 0 4px; }
.barre-selection .compteur { margin: 6px 0 0; font-size: 13px; }
.en-bref-replie { margin: 22px 0 6px; border: 1px solid var(--ligne); border-radius: 12px; background: var(--blanc); max-width: none; }
.en-bref-replie summary { cursor: pointer; padding: 12px 16px; font: 600 15px var(--titres); }
.en-bref-replie > div { padding: 0 16px 14px; }
.groupe-selection { margin-top: 30px; }
.groupe-selection > h2 { font-size: clamp(22px, 4.6vw, 28px); margin: 0 0 6px; }
.sc { margin-top: 18px; }
.sc-tete { display: flex; align-items: baseline; gap: 10px; border-left: 3px solid var(--bleu); padding-left: 10px; margin-bottom: 12px; }
.sc-tete h3 { margin: 0; font-size: 17px; }
.sc-tete .compte { color: var(--gris); font-size: 13px; }
.tout-voir { font: 600 14px var(--titres); color: var(--marine); background: none; border: 0; text-decoration: underline; cursor: pointer; margin-left: auto; }
.rang { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.tuile-plus { border: 1.5px dashed var(--bleu); border-radius: var(--rayon); background: #eef1fb; color: var(--marine); font: 500 14px var(--titres); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 16px; cursor: pointer; min-height: 160px; text-decoration: none; }
.tuile-plus strong { font-size: 26px; }
html:not(.js) .tout-voir { display: none; }
.js .rang:not(.ouvert) [data-plus] { display: none; }
.rang.ouvert .tuile-plus { display: none; }
[hidden] { display: none !important; }
@media (min-width: 700px) { .rang { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 699px) { .barre-selection .cases { flex-wrap: nowrap; overflow-x: auto; } .barre-selection .cases label, .barre-selection .libelle { flex: none; } }

/* Accueil, occasions : quatre colonnes et une huitième tuile « Toutes les occasions »
   (choix d'Alex du 19/10 sur simu_accueil_tuiles_occasions, B) : deux lignes pleines. */
/* Huit occasions en 4 x 2 (2 x 4 sur téléphone), planches validées par Alex les 22 et 23/10 : ni tuile ni
   lien « Toutes les occasions », l'entrée « Par occasion » du menu y mène. */
@media (min-width: 700px) { #occasions .tuiles, .tuiles-occasions { grid-template-columns: repeat(4, 1fr); } }
/* Pages /catalogue/ et /occasions/ : mêmes tuiles que l'accueil (demande d'Alex du 05/11), un peu d'air sous l'intro. */
.tuiles-hub { margin-top: 28px; }

/* Page devis : formulaire Netlify (planche validée par Alex le 19/10, B, B, B). */
.devis-page { max-width: 1100px; }
.devis-grille { display: grid; gap: 28px; margin-top: 28px; }
@media (min-width: 900px) { .devis-grille { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; } }
.formulaire-devis { background: #fff; border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 24px; display: grid; gap: 18px; }
.formulaire-devis fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 14px; }
.formulaire-devis legend { font: 600 18px/1.2 var(--titres); margin-bottom: 10px; padding: 0; }
.champ { display: grid; gap: 6px; }
.champ label { font-weight: 600; font-size: 15px; }
.facultatif { font-weight: 400; color: var(--gris); font-size: 13px; }
.champ input, .champ textarea { font: inherit; color: var(--marine); background: var(--creme); border: 1.5px solid #c9cdd8; border-radius: 10px; padding: 11px 12px; width: 100%; }
.champ input[type=file] { background: #fff; padding: 9px; }
.champ input:focus, .champ textarea:focus { outline: 3px solid var(--bleu); outline-offset: 1px; border-color: var(--bleu); }
.aide { color: var(--gris); font-size: 13px; margin: 0; }
.deux { display: grid; gap: 14px; }
@media (min-width: 700px) { .deux { grid-template-columns: 1fr 1fr; } }
.rgpd { color: var(--gris); font-size: 13px; }
.envoyer { justify-self: start; border: 0; font: 600 16px var(--titres); cursor: pointer; padding: 14px 24px; }
.apres-envoi { background: var(--voile); border-radius: var(--rayon); padding: 22px; position: sticky; top: 90px; }
.apres-envoi h2 { font-size: 20px; margin-bottom: 12px; }
.apres-envoi ol { margin: 0 0 14px; padding-left: 20px; display: grid; gap: 10px; }
.apres-envoi p { margin-top: 10px; font-size: 14px; }
.produit-choisi { display: grid; grid-template-columns: 96px 1fr auto; gap: 14px; align-items: center; background: #fff; border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 12px; margin-bottom: 16px; }
.produit-choisi img { border-radius: 10px; width: 96px; height: 96px; object-fit: cover; }
.surtitre-produit { color: var(--gris); font-size: 13px; }
.nom-produit { font: 600 16px/1.3 var(--titres); }
.details-produit { font-size: 14px; margin-top: 4px; }
.details-produit .origine { margin-right: 6px; }
.changer { font-weight: 600; font-size: 14px; }
.merci { background: #fff; border: 1px solid var(--ligne); border-left: 5px solid var(--bleu); border-radius: var(--rayon); padding: 24px; margin-top: 28px; }
.merci-titre { font: 700 22px var(--titres); margin-bottom: 8px; }
@media (max-width: 699px) { .produit-choisi { grid-template-columns: 72px 1fr; } .produit-choisi img { width: 72px; height: 72px; } .changer { grid-column: 2; } .apres-envoi { position: static; } }
.produit-choisi[hidden], .merci[hidden], .champ-besoin[hidden], .erreur-envoi[hidden] { display: none; }
.erreur-envoi { color: var(--rouge); font-weight: 600; }
.envoyer[disabled] { opacity: .6; cursor: wait; }

/* Saut de qualité A (19/10) : fiche recomposée, demande multi-produits, contact. */
.fiche { padding-top: 16px; padding-bottom: 32px; }
.galerie { display: grid; gap: 10px; }
.vignettes { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.vignettes button { width: 72px; height: 72px; padding: 4px; border: 1.5px solid var(--ligne); border-radius: 10px; background: var(--blanc); cursor: pointer; }
.vignettes button[aria-current="true"] { border-color: var(--marine); }
.vignettes img { width: 100%; height: 100%; object-fit: contain; }
.fiche-infos { display: grid; gap: 14px; align-content: start; }
.badge-ofg { justify-self: start; background: var(--marine); color: var(--creme); font: 600 13px var(--titres); padding: 5px 12px; border-radius: 999px; }
.badge-ofg::before { content: "\2713\00a0"; }
.bloc-prix { margin-top: 0; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; align-items: center; }
.actions button.bouton { border: 0; cursor: pointer; font: inherit; }
.ajoute { flex-basis: 100%; color: #0a7a3d; font-weight: 600; font-size: 14px; }
.ajoute[hidden] { display: none; }
.reassurance { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 6px; color: var(--marine); font-size: 14px; }
.reassurance li::before { content: "\2713"; color: var(--bleu); margin-right: 8px; font-weight: 700; }
.fiche-suite { display: grid; gap: 28px; padding-bottom: 48px; }
.fiche-suite h2 { font-size: 22px; margin-bottom: 12px; }
.bloc-grille .grille-prix { max-width: 560px; margin-top: 0; }
.ligne-logo { margin-top: 10px; font-size: 15px; }
.bloc-origine { margin-top: 0; max-width: 760px; }
.bloc-descriptif, .bloc-synthese { max-width: 760px; }
.bloc-descriptif p + p { margin-top: 8px; }
.source-descriptif { font-size: 13px; color: var(--gris); }
.ajout-collant { display: none; }
@media (max-width: 699px) {
  .ajout-collant { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--blanc); padding: 10px 16px; box-shadow: 0 -6px 18px rgba(20,33,61,.12); }
  .ajout-collant .bouton { width: 100%; justify-content: center; }
  body:has(.ajout-collant) .devis-mobile { display: none; }
}
.contact-pied { margin-top: 10px; }
.ma-demande { background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 18px; margin-bottom: 16px; display: grid; gap: 12px; }
.ma-demande[hidden], .selection-vide[hidden], .champ[hidden] { display: none; }
.ma-demande h2 { font-size: 18px; }
.ligne-demande { display: grid; grid-template-columns: 72px 1fr auto auto; gap: 14px; align-items: center; border-top: 1px solid var(--ligne); padding-top: 12px; }
.ligne-demande img { width: 72px; height: 72px; object-fit: contain; border-radius: 10px; background: var(--blanc); border: 1px solid var(--ligne); }
.nom-l { font-weight: 600; color: var(--marine); text-decoration: none; display: block; line-height: 1.3; }
.det-l { font-size: 13px; color: var(--gris); }
.origine-l { font-weight: 600; color: var(--marine); margin-right: 4px; }
.qte-l { display: grid; gap: 4px; font-size: 13px; font-weight: 600; }
.qte-l input { font: inherit; font-size: 16px; width: 110px; padding: 9px 10px; border: 1.5px solid #c9cdd8; border-radius: 10px; background: var(--creme); }
.retirer { background: none; border: 0; color: var(--bleu); text-decoration: underline; cursor: pointer; font: inherit; font-size: 14px; }
.ajouter-autre { font-weight: 600; font-size: 14px; }
/* Audit mobile du 06/11 : ligne ajoutée signalée, total indicatif, sélecteur de logo en français. */
.ligne-nouvelle { background: var(--creme); border-radius: 10px; box-shadow: inset 3px 0 0 var(--marine); padding: 12px 8px 12px 12px; }
.total-demande { font-size: 15px; border-top: 1px solid var(--ligne); padding-top: 12px; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.total-demande strong { font-size: 18px; color: var(--marine); }
.total-demande span { font-size: 13px; color: var(--gris); }
.choisir-logo { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.choisir-logo input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.choisir-logo input[type="file"]:focus-visible + .bouton { outline: 3px solid var(--bleu); outline-offset: 2px; }
.nom-logo { font-size: 14px; color: var(--gris); min-width: 0; overflow-wrap: anywhere; }
.champ.case label { font-weight: 600; display: flex; gap: 8px; align-items: center; }
.champ.case input { width: auto; flex: none; margin: 0; padding: 0; } /* case et libellé sur une ligne (remarque d'Alex du 05/11) */
@media (max-width: 699px) { .ligne-demande { grid-template-columns: 56px 1fr; } .ligne-demande img { width: 56px; height: 56px; } .qte-l, .retirer { grid-column: 2; justify-self: start; } }

/* ---------- Saut de qualité B : navigation, recherche, sélection, carte, logos ---------- */
.invisible { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Menu Catalogue sur deux colonnes, sans comptes. */
.navigation .sous-menu.deux-colonnes { display: none; min-width: 520px; grid-template-columns: 1fr 1fr; column-gap: 8px; }
.navigation li.deroulant:hover .sous-menu.deux-colonnes, .navigation li.deroulant:focus-within .sous-menu.deux-colonnes { display: grid; }
.navigation .sous-menu.deux-colonnes li.tout { grid-column: 1 / -1; }
.navigation .sous-menu li.tout a { border-top: 0; margin-top: 0; padding-top: 9px; border-bottom: 1px solid var(--ligne); margin-bottom: 6px; padding-bottom: 12px; }
/* Pied de page en colonnes. */
.colonnes-pied { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 20px; margin: 8px 0 24px; }
.colonnes-pied h2 { font: 600 15px var(--titres); color: var(--marine); margin-bottom: 10px; }
.colonnes-pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.colonnes-pied .adresse { font-size: 13px; margin-top: 8px; }
.mentions-pied { margin-bottom: 6px; }
@media (min-width: 900px) { .colonnes-pied { grid-template-columns: 1.2fr 1fr 1fr 1.2fr; } }
/* Catalogue : tuiles avec photo. */
.tuiles-rubriques { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 28px; }
.tuile-rubrique { background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--rayon); overflow: hidden; display: flex; flex-direction: column; }
.tuile-rubrique-visuel { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--voile); text-decoration: none; }
.tuile-rubrique-visuel img { width: 100%; height: 100%; object-fit: cover; }
.tuile-rubrique-nom { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 16px 12px; background: linear-gradient(transparent, rgba(20, 33, 61, .78)); color: var(--blanc); font: 600 19px/1.2 var(--titres); }
.tuile-rubrique-sc { list-style: none; margin: 0; padding: 12px 16px 0; display: grid; gap: 4px; font-size: 15px; }
.tuile-rubrique-nombre { padding: 8px 16px 14px; color: var(--gris); font-size: 13px; margin-top: auto; }
@media (min-width: 640px) { .tuiles-rubriques { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .tuiles-rubriques { grid-template-columns: repeat(3, 1fr); } }
/* Repères des pages de sélection. */
/* Barre de filtres sur une ligne ; panneau en menu sur ordinateur, tiroir plein écran sur téléphone. */
.barre-selection { padding: 8px 0; }
.barre-ligne { display: flex; align-items: center; gap: 10px; }
.barre-ligne .pastilles { flex: 1; min-width: 0; scrollbar-width: none; }
.barre-ligne .pastilles::-webkit-scrollbar { display: none; }
.barre-selection .compteur { margin: 0; white-space: nowrap; color: var(--gris); }
.panneau-filtres { position: relative; flex: none; }
.panneau-filtres summary { list-style: none; min-height: 38px; padding: 7px 16px; font-size: 14px; cursor: pointer; }
.panneau-filtres summary::-webkit-details-marker { display: none; }
.panneau-corps { position: absolute; right: 0; top: calc(100% + 8px); width: 340px; max-height: 70vh; overflow: auto; background: var(--blanc); border: 1px solid var(--ligne); border-radius: 14px; box-shadow: 0 16px 32px rgba(20, 33, 61, .14); padding: 14px 16px; z-index: 30; }
.groupe-filtre { border: 0; margin: 0 0 12px; padding: 0; }
.groupe-filtre legend { font: 600 14px var(--titres); margin-bottom: 6px; padding: 0; }
.groupe-filtre label { display: flex; gap: 8px; align-items: center; padding: 4px 0; font-size: 15px; cursor: pointer; }
.groupe-filtre small { color: var(--gris); }
.panneau-actions { display: flex; gap: 8px; justify-content: space-between; border-top: 1px solid var(--ligne); padding-top: 12px; }
.panneau-actions .bouton { min-height: 40px; padding: 8px 14px; font-size: 14px; }
@media (max-width: 699px) {
  .barre-selection .compteur { display: none; }
  .panneau-corps { position: fixed; inset: 0; width: auto; max-height: none; border-radius: 0; z-index: 60; padding: 20px var(--gouttiere) 96px; }
  .panneau-actions { position: fixed; left: 0; right: 0; bottom: 0; background: var(--blanc); padding: 12px var(--gouttiere); }
  .panneau-actions .bouton { flex: 1; }
}
/* Lignes de huit produits, tuile « Voir les N » en pied de ligne. */
.rang { grid-template-columns: repeat(2, 1fr); }
.tuile-plus { grid-column: 1 / -1; flex-direction: row; gap: 10px; min-height: 52px; }
.tuile-plus strong { font-size: 16px; }
@media (min-width: 700px) { .rang { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .rang { grid-template-columns: repeat(4, 1fr); } }
/* Bandeau de logos clients. */
.bandeau-logos { padding: 28px 0; border-top: 1px solid var(--ligne); border-bottom: 1px solid var(--ligne); background: var(--blanc); }
.bandeau-logos-lien { display: block; text-align: center; text-decoration: none; color: var(--marine); }
.surtitre-logos { font: 600 13px var(--titres); text-transform: uppercase; letter-spacing: .06em; color: var(--gris); margin-bottom: 16px; }
.bandeau-logos ul { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 20px; align-items: center; justify-items: center; }
.bandeau-logos img { height: 30px; width: auto; max-width: 100%; filter: grayscale(1); opacity: .7; }
.bandeau-logos-lien:hover img { opacity: 1; }
@media (min-width: 800px) { .bandeau-logos ul { grid-template-columns: repeat(6, 1fr); } .bandeau-logos img { height: 36px; } }
.grille-clients { margin: 24px auto; max-width: 768px; background: var(--blanc); border-radius: var(--rayon); }
.grille-clients img { width: 100%; height: auto; }
/* Carte des régions. */
.carte-figure { margin: 24px 0; display: grid; gap: 20px; }
.carte-regions { width: 100%; max-width: 560px; height: auto; margin: 0 auto; display: block; }
.carte-regions .region { fill: #e6e8ef; stroke: var(--blanc); stroke-width: 1.5; }
.carte-regions .region.ouverte { fill: var(--bleu); }
.carte-regions .lien-region:hover .region, .carte-regions .lien-region:focus .region { fill: var(--marine); }
.carte-regions .region.surlignee { fill: var(--rouge); }
.carte-vignette { max-width: 220px; margin: 8px 0 24px; }
.legende-regions { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; font-size: 15px; }
.legende-regions li { color: var(--gris); }
.legende-regions small { font-size: 13px; color: var(--gris); }
.credit-carte { font-size: 12px; color: var(--gris); margin-top: 10px; }
@media (min-width: 900px) { .carte-figure { grid-template-columns: 1.3fr 1fr; align-items: center; } }
/* Recherche. */
.recherche-page { display: flex; gap: 8px; margin: 20px 0 12px; max-width: 640px; }
.recherche-page input { flex: 1; min-width: 0; font: 400 17px var(--texte); padding: 12px 14px; border: 1px solid var(--ligne); border-radius: 12px; background: var(--blanc); color: var(--marine); }
.compteur-recherche { color: var(--gris); margin-bottom: 8px; }
.suggestions-rubriques { margin-bottom: 16px; }
.recherche-vide { margin: 16px 0; display: grid; gap: 12px; justify-items: start; }
/* Accueil v1.3 : accroche, points du hero, chiffres, rubriques, étapes. */
.hero-texte .accroche { font: 600 clamp(18px, 2.6vw, 24px)/1.3 var(--titres); color: var(--bleu); margin: 12px 0 10px; }
.points-hero { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; }
.points-hero li { padding-left: 26px; position: relative; }
.points-hero li::before { content: ""; position: absolute; left: 4px; top: 7px; width: 10px; height: 6px; border-left: 2px solid var(--bleu); border-bottom: 2px solid var(--bleu); transform: rotate(-45deg); }
.tuiles-rubriques-accueil .tuile { aspect-ratio: 4 / 3; }
@media (min-width: 1000px) { .tuiles-rubriques-accueil { grid-template-columns: repeat(4, 1fr); } }
.etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: etape; }
.etapes li { background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 16px 18px; }
.etape-numero { display: inline-flex; width: 30px; height: 30px; border-radius: 50%; background: var(--bleu); color: var(--blanc); font: 600 15px var(--titres); align-items: center; justify-content: center; margin-bottom: 8px; }
.etapes strong { display: block; font-family: var(--titres); }
@media (min-width: 800px) { .etapes { grid-template-columns: repeat(4, 1fr); } }
.pied .colonnes-pied ul { grid-template-columns: 1fr; margin: 0; gap: 7px; }
.entete .logo { flex: none; }
.entete .logo img { width: 148px; height: auto; }
@media (min-width: 1000px) and (max-width: 1199px) { .entete .logo img { width: 124px; } .navigation ul { gap: 10px !important; } .navigation a { font-size: 13px; } .navigation li.deroulant > a::after { margin-left: 5px; } .entete .bouton { font-size: 13px; } .entete .conteneur { gap: 10px; } .entete .bouton { padding: 9px 12px; } }

/* ---------- Saut de qualité C1 : règle des ronds ----------
   Trois zones seulement : hero de l'accueil, en-tête des pages de texte, bandeau devis final.
   Une composition par zone, ancrée dans le coin haut droit (le bandeau devis : haut droit et bas
   droit), dans la gouttière, sous le contenu (z-index 0, zone en overflow hidden).
   Sous 1024 px : aucun rond hors du hero, et dans le hero un seul, réduit, en haut à droite. */
.hero, .entete-page, .section.devis { position: relative; overflow: hidden; }
.rond { z-index: 0; }
.hero-a .r1 { width: 72px; height: 72px; left: auto; bottom: auto; right: -36px; top: -36px; }
.hero-a .r2, .entete-page .rond, .section.devis .rond { display: none; }
@media (min-width: 1024px) {
  .hero-a .r1 { width: 200px; height: 200px; right: -100px; top: -100px; }
  .hero-a .r2 { display: block; width: 56px; height: 56px; left: auto; right: -28px; top: 132px; bottom: auto; }
  .entete-page .rond { display: block; }
  .entete-page .r1 { width: 160px; height: 160px; right: -80px; top: -80px; }
  .entete-page .r2 { width: 40px; height: 40px; right: -20px; top: 104px; }
  .section.devis .rond { display: block; }
  .section.devis .r1 { width: 200px; height: 200px; right: -100px; top: -100px; }
  .section.devis .r2 { width: 84px; height: 84px; border-width: 18px; right: 140px; bottom: -42px; top: auto; }
}

/* ---------- Saut de qualité C2 à C5 : cartes, mentions, en-tête téléphone, accessibilité ---------- */
.carte { position: relative; display: flex; flex-direction: column; }
.carte .carte-produit { flex: 1; }
.carte-produit .visuel { aspect-ratio: 1 / 1; background: var(--blanc); border-bottom: 1px solid var(--ligne); }
.carte-produit .corps { gap: 6px; min-height: 104px; }
.carte-produit h3 { -webkit-line-clamp: 2; min-height: 2.6em; }
.carte-produit .prix { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
.carte-produit .prix strong { font-size: 15px; }
.badge-ofg { display: inline-flex; align-items: center; }
.badge-carte { align-self: flex-start; font-size: 11px; padding: 3px 9px; }
.ajout-carte { position: absolute; top: 8px; right: 8px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--ligne); background: var(--blanc); color: var(--marine); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 6px rgba(20, 33, 61, .12); }
.ajout-carte:hover { background: var(--marine); color: var(--creme); }
.ajout-carte.ajoute-ok { background: var(--bleu); color: var(--blanc); border-color: var(--bleu); }
.ajout-carte.ajoute-ok svg path { d: path("M4 10l4 4 8-8"); }
.js .rang:not(.ouvert) .carte[data-plus] { display: none; }
.carte[hidden] { display: none; }
/* C2 : plus de pastille bleue devant la mention. */
.origine::before { content: none; }
/* C3 : en-tête téléphone, bandeau sur une ligne de 32 px au plus ; logo, loupe, Ma demande, menu. */
@media (max-width: 999px) {
  /* Audit mobile du 06/11 : le bandeau passe sur deux lignes au besoin et porte le téléphone ; l'en-tête
     tient sans déborder de 320 à 999 px, même avec « Ma demande (10) ». */
  .bandeau-pro .conteneur { min-height: 0; padding-top: 6px; padding-bottom: 6px; gap: 2px 14px; font-size: 12px; line-height: 1.35; }
  .entete .bouton-demande { display: inline-flex; min-height: 44px; padding: 7px 12px; font-size: 13px; white-space: nowrap; }
  .entete .conteneur { gap: 6px; }
  .entete .logo { margin-right: auto; }
  .entete .logo img { width: 112px; }
}
@media (min-width: 1000px) { .tel-bandeau { display: none; } }
.tel-bandeau { color: var(--creme); }
.bandeau-court { display: none; }
/* Sous 600 px, le bandeau tient sur une ligne : texte court et téléphone ; le texte long reste lu par les lecteurs d'écran. */
@media (max-width: 599px) {
  .bandeau-pro .conteneur { flex-wrap: nowrap; justify-content: space-between; white-space: nowrap; }
  .bandeau-pro .conteneur > span:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .bandeau-court { display: inline; overflow: hidden; text-overflow: ellipsis; }
}
.tel-bandeau .picto-tel { width: 13px; height: 13px; }
.bouton-demande .libelle-mini { display: none; }
@media (max-width: 389px) { .entete .logo img { width: 96px; } .entete .bouton-demande { padding: 7px 10px; } .bouton-demande .libelle-court { display: none !important; } .bouton-demande .libelle-mini { display: inline; } }
/* C5 : focus visible partout, y compris dans les zones sombres. */
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--bleu); outline-offset: 3px; }
.devis a:focus-visible, .bandeau-pro a:focus-visible { outline-color: var(--creme); }
.carte-produit:focus-visible { outline-offset: -3px; }
.bouton-demande .libelle-court { display: none; }
@media (max-width: 999px) { .bouton-demande .libelle-long { display: none; } .bouton-demande .libelle-court { display: inline; } }
/* Arborescence v1.4 : dix rubriques, deux rangées de cinq. */
@media (min-width: 1000px) {
  .tuiles-rubriques { grid-template-columns: repeat(5, 1fr); gap: 16px; }
  .tuile-rubrique-nom { font-size: 16px; padding: 24px 12px 10px; }
  .tuile-rubrique-sc { padding: 10px 12px 0; font-size: 14px; }
  .tuile-rubrique-nombre { padding: 6px 12px 12px; }
  .tuiles-rubriques-accueil { grid-template-columns: repeat(5, 1fr); }
}
@media (min-width: 640px) and (max-width: 999px) { .tuiles-rubriques-accueil { grid-template-columns: repeat(2, 1fr); } }
/* Cartes par modèle et sélecteur de variante (v1.4, §3). */
.variantes-carte { font-size: 12px; color: var(--gris); }
/* Coloris (planche du 04/11, option B d'Alex) : ronds sous la référence, nom dessous ; mini-ronds sur les cartes. */
.couleurs { margin: 14px 0 4px; }
.ronds-couleur { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.rond-couleur { width: 30px; height: 30px; border-radius: 50%; padding: 0; cursor: pointer; background: var(--teinte); border: 1px solid rgba(20, 33, 61, .3); box-shadow: inset 0 0 0 2px var(--blanc); }
.rond-couleur[aria-pressed="true"] { outline: 2px solid var(--marine); outline-offset: 2px; }
.nom-couleur { font-size: 14px; margin: 10px 0 0; }
.nom-couleur strong { font-weight: 600; }
.nom-couleur span, .aussi-couleur { color: var(--gris); }
.aussi-couleur { font-size: 14px; margin: 6px 0 0; }
.coloris-carte { display: flex; align-items: center; gap: 5px; }
.coloris-carte i { width: 12px; height: 12px; border-radius: 50%; background: var(--teinte); border: 1px solid rgba(20, 33, 61, .3); }
.selecteur-variantes { margin: 14px 0 4px; }
.selecteur-titre { font-size: 14px; margin-bottom: 8px; }
.selecteur-nombre { color: var(--gris); }
.selecteur-variantes ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.selecteur-variantes a { display: inline-flex; flex-direction: column; gap: 2px; padding: 7px 12px; border: 1px solid var(--ligne); border-radius: 10px; background: var(--blanc); color: var(--marine); text-decoration: none; font-size: 14px; }
.selecteur-variantes a small { color: var(--gris); font-size: 12px; }
.selecteur-variantes a:hover { border-color: var(--marine); }
.selecteur-variantes a[aria-current="true"] { border: 2px solid var(--marine); padding: 6px 11px; font-weight: 600; }

/* ---------- Audit externe du 20/10, P0-1 : rien ne déborde à 390 px ---------- */
.rang, .grille-produits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 700px) { .rang { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grille-produits { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .rang, .collection .grille-produits, .grille-produits { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.carte, .carte-produit, .carte-produit .corps, .carte-produit h3 { min-width: 0; }
.fiche-suite, .fiche-suite > * { min-width: 0; }
.bloc-grille { overflow-x: auto; }
.grille-prix { width: 100%; }
.titre-404 { font-size: 20px; margin: 24px 0 10px; }
.liste-404 { list-style: none; margin: 0 0 24px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; }
.liste-404 a { display: inline-block; padding: 6px 0; }
@media (min-width: 800px) { .liste-404 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Audit externe P1-5 (choix d'Alex : 05A) : un seul bouton principal sur la fiche. */
.lien-devis-seul { font-weight: 600; font-size: 15px; display: inline-block; padding: 10px 0; }
/* Audit P1-9 (choix d'Alex : 09A) : plus de barre collante en bas sur téléphone. */
body { padding-bottom: 0; }
@media (max-width: 999px) { body:has(.ajout-collant) { padding-bottom: 76px; } }

/* ---------- Audit P2-13 (choix d'Alex : 13B) : une signature de ronds par type de page ----------
   Accueil : grand rond bleu en haut à droite, anneau en bas à gauche, à moitié hors cadre.
   Bandeau devis : inversé, rond rouge en bas à gauche, anneau en haut à droite.
   Catégories, occasions, régions : un seul rond bleu en bas à droite de la bande de titre.
   Pages éditoriales : l'anneau en haut à gauche. Page devis : rond rouge en bas à droite.
   Sous 1024 px : le hero garde ses deux ronds réduits, les autres zones aucun. */
.bande-selection { position: relative; overflow: hidden; }
.bande-selection > .conteneur { position: relative; z-index: 1; }
.rond-anneau { background: none; border: solid var(--marine); }
.hero-a .r1 { width: 96px; height: 96px; right: -48px; top: -48px; left: auto; bottom: auto; }
.hero-a .r2 { display: block; width: 64px; height: 64px; border-width: 14px; left: -32px; bottom: -32px; right: auto; top: auto; }
.bande-selection .rond, .entete-page .rond, .section.devis .rond { display: none; }
@media (min-width: 1024px) {
  .hero-a .r1 { width: 260px; height: 260px; right: -130px; top: -130px; }
  .hero-a .r2 { width: 120px; height: 120px; border-width: 26px; left: -60px; bottom: -60px; }
  .section.devis .rond, .bande-selection .rond, .entete-page .rond { display: block; }
  .section.devis .r1 { width: 200px; height: 200px; left: -100px; bottom: -100px; right: auto; top: auto; }
  .section.devis .r2 { width: 84px; height: 84px; border-width: 18px; right: -42px; top: -42px; left: auto; bottom: auto; }
  .bande-selection .r1 { width: 140px; height: 140px; right: -70px; bottom: -70px; left: auto; top: auto; }
  .entete-edito .r1 { width: 80px; height: 80px; border-width: 18px; left: -40px; top: -40px; right: auto; bottom: auto; }
  .entete-devis .r1 { width: 160px; height: 160px; right: -80px; bottom: -80px; left: auto; top: auto; }
}
/* L'anneau éditorial n'a sa gouttière qu'à partir de 1280 px. */
@media (min-width: 1024px) and (max-width: 1279px) { .entete-edito .rond { display: none; } }
/* Audit P1-4 (choix 04A) : caractéristiques et marquage sous les boutons de la fiche. */
.bloc-carac, .bloc-marquage { background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 14px 16px; margin: 14px 0; }
.bloc-carac h2, .bloc-marquage h2 { font-size: 17px; margin-bottom: 8px; }
.bloc-carac dl, .bloc-marquage dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; margin: 0; font-size: 15px; }
.bloc-carac dt, .bloc-marquage dt { color: var(--gris); }
.bloc-carac dd, .bloc-marquage dd { margin: 0; }
.aide-marquage { font-size: 13px; color: var(--gris); margin-top: 6px; }
/* Audit P2-14 (choix d'Alex : 14 bis A) : familles en carrés, titre sous l'image. */
.tuiles-familles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 14px; }
.tuile-famille { display: flex; flex-direction: column; gap: 10px; color: var(--marine); text-decoration: none; }
.tuile-famille img { width: 100%; aspect-ratio: 1 / 1; height: auto; object-fit: cover; border-radius: var(--rayon); background: var(--voile); transition: transform .3s; }
.tuile-famille:hover img { transform: scale(1.02); }
.tuile-famille span { font: 600 15px/1.25 var(--titres); text-align: center; }
.tuile-famille:hover span { text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 700px) { .tuiles-familles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .tuiles-familles { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px 20px; } .tuile-famille span { font-size: 16px; } }
/* Bandeau de logos (retour d'Alex du 20/10) : plus d'air entre surtitre, logos et lien ; espace
   égal entre les logos, quelle que soit leur largeur ; même hauteur optique. */
.bandeau-logos { padding: 44px 0; }
.surtitre-logos { margin-bottom: 28px; }
.bandeau-logos ul { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 28px 40px; margin: 0 0 28px; }
.bandeau-logos li { flex: none; }
.bandeau-logos img { height: 30px; width: auto; max-width: none; }
.bandeau-logos img[src$="m6.svg"], .bandeau-logos img[src$="leroy-merlin.svg"], .bandeau-logos img[src$="rtl.svg"] { height: 40px; }
@media (min-width: 800px) { .bandeau-logos ul { flex-wrap: wrap; gap: 28px 40px; } }
@media (min-width: 1040px) { .bandeau-logos ul { flex-wrap: nowrap; gap: 64px; } }
@media (min-width: 800px) { .bandeau-logos img { height: 34px; } .bandeau-logos img[src$="m6.svg"], .bandeau-logos img[src$="leroy-merlin.svg"], .bandeau-logos img[src$="rtl.svg"] { height: 46px; } }

/* Variante B du 20/10 : le vert forêt signe tout ce qui touche aux régions. */
.carte-regions .region.ouverte { fill: var(--vert); }
.legende-regions li.ouverte a { color: var(--vert); font-weight: 600; }
#regions h2, .theme-regions h1 { color: var(--vert); }
.navigation .sous-menu[data-menu="regions"] a { color: var(--vert); }

/* Pages de sélection, choix d'Alex du 20/10 (A) : logos dans la bande de titre à la place des repères,
   toutes les familles visibles, régions en pastilles vert forêt sous les familles. */
.logos-entete { background: none; border: 0; padding: 22px 0 0; }
.logos-entete .surtitre-logos { font-size: 13px; margin-bottom: 12px; }
.logos-entete ul { margin: 0 0 10px; gap: 18px 34px; }
.logos-entete img { height: 26px; }
.logos-entete .lien-fleche { font-size: 14px; }
.barre-selection .barre-ligne { align-items: flex-start; }
.lignes-pastilles { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; }
.libelle-ligne { font: 500 13px var(--texte); color: var(--gris); align-self: center; margin-right: 2px; }
.filtre-regions { display: flex; flex-wrap: wrap; gap: 8px; }
.filtre-regions button { flex: none; font: 500 14px var(--titres); border: 1px solid var(--vert); background: var(--blanc); color: var(--vert); border-radius: 999px; padding: 7px 13px; cursor: pointer; white-space: nowrap; }
.filtre-regions small { font-size: 12px; opacity: .8; }
.filtre-regions button:hover { background: #e8f2ec; }
.filtre-regions button[aria-pressed="true"] { background: var(--vert); color: var(--blanc); }
@media (max-width: 699px) {
  .barre-selection { position: static; }
  .barre-selection .barre-ligne { flex-wrap: wrap; gap: 10px; }
  .lignes-pastilles { flex-basis: 100%; order: 2; }
  .barre-selection .pastilles, .filtre-regions { gap: 6px; }
  .barre-selection .pastilles button, .filtre-regions button { padding: 5px 10px; font-size: 13px; }
  .logos-entete ul { gap: 14px 24px; }
  .logos-entete img { height: 22px; }
}

/* Demande d'Alex du 20/10 : le nombre de produits revient dans les menus déroulants. */
.menu-mobile .sous-menu-mobile small { color: var(--gris); font: 400 13px var(--texte); margin-left: 6px; }
.navigation .sous-menu a { align-items: baseline; }

/* Fiche à un bouton et prix tout compris (briefs méta et Cocometa du 20/10, choix B d'Alex, retour :
   origine plus lisible, colonne de droite aérée à la hauteur de la photo). */
.fiche-tc { gap: 16px; }
.fiche-tc h1 { font-size: clamp(26px, 5.6vw, 40px); }
.ligne-origine { margin: 0; font: 600 18px/1.4 var(--titres); color: var(--marine); }
.ligne-origine .region-fiche { color: var(--vert); }
.precision-origine { margin: -8px 0 0; font-size: 14px; color: var(--gris); }
.fiche-tc .bloc-prix { display: grid; gap: 16px; margin-top: 8px; }
.argument { margin: 0; font: 600 16px var(--titres); color: var(--bleu); }
.prix-tc { margin: 0; font-size: 16px; }
.bloc-prix .prix-tc strong { font: 700 34px/1.1 var(--titres); }
.degressif { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); border: 1px solid var(--ligne); border-radius: 12px; overflow: hidden; background: var(--blanc); }
.degressif li { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 4px; border-right: 1px solid var(--ligne); font-size: 13px; color: var(--gris); }
.degressif li:last-child { border-right: 0; }
.degressif li.palier-appel { background: var(--voile); }
.degressif strong { font: 600 17px var(--titres); color: var(--marine); }
/* Paliers cliquables (planche du 05/11, demande d'Alex) : chaque quantité mène au devis à ce palier. */
.degressif li { padding: 0; }
.palier-lien { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; height: 100%; padding: 12px 4px 8px; color: inherit; text-decoration: none; cursor: pointer; transition: background .15s; }
.palier-lien:hover, .palier-lien:focus-visible { background: #eef1fb; box-shadow: inset 0 0 0 2px var(--bleu); outline: 0; }
.palier-lien:hover strong, .palier-lien:focus-visible strong { color: var(--bleu); }
.palier-lien .demander { font-size: 13px; line-height: 1; font-weight: 600; color: var(--bleu); visibility: hidden; }
.palier-lien:hover .demander, .palier-lien:focus-visible .demander { visibility: visible; }
.aide-paliers { font-size: 13px; color: var(--gris); margin: 8px 0 0; }
.faits { margin: 0; font-size: 15px; color: var(--marine); }
.tolerance { margin: -6px 0 0; font-size: 14px; color: var(--gris); }
.fiche-tc .actions { margin-top: 4px; }
.bouton-fiche { padding: 15px 34px; font-size: 17px; }
.mention-tc { margin: 0; font-size: 13px; line-height: 1.45; color: var(--gris); }
.mention-page { margin-top: 8px; margin-bottom: 24px; }
.fiche-suite .bloc-carac { max-width: 760px; margin: 0; padding: 0; }
.fiche-suite .bloc-carac summary { cursor: pointer; padding: 14px 16px; font: 600 18px var(--titres); }
.fiche-suite .bloc-carac dl { padding: 0 16px 6px; }
.fiche-suite .bloc-carac .liens { padding: 0 16px 14px; margin: 0; font-size: 14px; }
.ref-pied { margin: 0; font-size: 12px; color: var(--gris); }
.carte-produit .prix { white-space: normal; overflow: visible; text-overflow: clip; }
.champ-logo { background: var(--voile); border-radius: 12px; padding: 14px 16px; }
.champ-logo label { font-weight: 600; }
.ajouter-autre { margin: 12px 0 0; }
@media (min-width: 1000px) { .fiche-tc { gap: 22px; padding-top: 12px; } .fiche-tc .bloc-prix { gap: 20px; margin-top: 12px; } }
@media (max-width: 699px) {
  .degressif { grid-template-columns: repeat(3, 1fr); }
  .degressif li:nth-child(3n) { border-right: 0; }
  .degressif li:nth-child(n+4) { border-top: 1px solid var(--ligne); }
  .bouton-fiche { display: flex; justify-content: center; width: 100%; }
  .bloc-prix .prix-tc strong { font-size: 30px; }
}
.ligne-origine .lien-mentions { margin-left: 6px; font: 400 14px var(--texte); color: var(--gris); }
.ajouter-autre { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.lien-envoyer { font-weight: 600; }

/* Recherche, choix A d'Alex du 21/10 : liste de correction et de suggestions pendant la frappe, résultats
   triés par prix croissant. Bouton marine : l'ambre reste réservé au devis. Emplacement revu le 22/10
   (planche v2) : loupe dans l'en-tête et barre dans le hero de l'accueil, en fin de feuille. */
.recherche-barre { position: relative; display: flex; align-items: center; gap: 8px; max-width: 760px; margin: 0 auto; background: var(--blanc); border: 2px solid var(--marine); border-radius: 999px; padding: 4px 4px 4px 18px; }
.recherche-barre:focus-within { outline: 3px solid var(--bleu); outline-offset: 2px; }
.recherche-barre input { flex: 1; min-width: 0; border: 0; background: none; font: 400 16px var(--texte); color: var(--marine); padding: 10px 0; }
.recherche-barre input:focus { outline: none; }
.recherche-barre input::-webkit-search-cancel-button { cursor: pointer; }
.bouton-marine { background: var(--marine); color: var(--creme); border: 0; cursor: pointer; }
.bouton-marine:hover { background: #24345a; }
.recherche-barre .bouton { padding: 10px 22px; font-size: 15px; }
.suggestions-saisie { position: absolute; left: 0; right: 0; top: calc(100% + 6px); background: var(--blanc); border: 1px solid var(--ligne); border-radius: 14px; box-shadow: 0 16px 32px rgba(20, 33, 61, .14); padding: 10px 0; z-index: 60; text-align: left; }
.suggestions-saisie ul { list-style: none; margin: 0; padding: 0; }
.suggestions-saisie a { display: block; padding: 9px 18px; color: var(--marine); text-decoration: none; font: 500 15px var(--texte); }
.suggestions-saisie a:hover, .suggestions-saisie a.actif { background: var(--voile); }
.suggestions-saisie small { color: var(--gris); font-weight: 400; }
.sugg-titre { margin: 8px 18px 2px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--gris); }
.sugg-correction { margin: 0 0 4px; font-size: 15px; }
.sugg-correction a { display: inline; padding: 0; color: var(--bleu); text-decoration: underline; }
.sugg-correction { padding: 4px 18px; }
.sugg-tout { margin: 6px 0 0; border-top: 1px solid var(--ligne); padding-top: 4px; }
.sugg-tout a { color: var(--bleu); font-weight: 600; }
.barre-resultats { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin: 18px 0 6px; }
.barre-resultats .compteur-recherche { margin: 0; }
.tri-recherche { margin: 0; font-size: 15px; }
.tri-recherche select { font: 500 16px var(--texte); padding: 8px 12px; border: 1px solid var(--ligne); border-radius: 10px; background: var(--blanc); color: var(--marine); margin-left: 6px; }
.note-correction { font-weight: 600; }
@media (max-width: 699px) {
  .recherche-barre .bouton { padding: 10px 14px; font-size: 14px; }
  .entete .bouton-demande { margin-left: auto; }
}

/* Recherche compacte et téléphone (brief Cocometa du 21/10, planche v2 validée par Alex le 22/10).
   La loupe (zone de 44 px) déploie le volet par-dessus la navigation, à la hauteur de l'en-tête ;
   sur téléphone elle se place à côté du bouton Menu et le volet prend toute la largeur. */
.entete .conteneur { position: relative; }
.outils-entete { display: flex; align-items: center; gap: 12px; }
.loupe-entete, .fermer-recherche { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none; border: 0; background: none; color: var(--marine); border-radius: 999px; cursor: pointer; padding: 0; }
.loupe-entete:hover, .fermer-recherche:hover { background: var(--voile); }
.volet-recherche { --logo-volet: 164px; position: absolute; top: 0; bottom: 0; right: var(--gouttiere); left: calc(var(--gouttiere) + var(--logo-volet)); display: flex; align-items: center; gap: 8px; background: var(--creme); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s; z-index: 30; }
.entete.recherche-ouverte .volet-recherche { opacity: 1; visibility: visible; transform: none; transition: opacity .16s ease, transform .16s ease; }
.volet-recherche .recherche-barre { flex: 1; max-width: none; margin: 0; min-width: 0; }
.recherche-barre input { min-width: 0; }
.volet-recherche .recherche-barre:focus-within { outline: none; border-color: var(--bleu); }
.volet-recherche input::-webkit-search-cancel-button { display: none; }
@media (prefers-reduced-motion: reduce) { .volet-recherche, .entete.recherche-ouverte .volet-recherche { transition: none; transform: none; } }
@media (min-width: 1000px) and (max-width: 1199px) { .volet-recherche { --logo-volet: 120px; } }
.tel-entete { display: none; align-items: center; gap: 6px; font-weight: 600; color: var(--vert); text-decoration: none; white-space: nowrap; }
.tel-entete:hover { text-decoration: underline; }
.tel-entete .picto-tel { flex: none; }
@media (min-width: 1366px) { .tel-entete { display: inline-flex; } }
@media (max-width: 999px) {
  .outils-entete { gap: 6px; margin-left: auto; }
  .outils-entete .loupe-entete { order: 2; }
  .outils-entete .menu-mobile { order: 3; }
  .volet-recherche { left: var(--gouttiere); }
  .volet-recherche .recherche-barre .bouton { display: none; }
}
/* Accueil : la barre complète dans le hero ; un seul bouton plein, le devis en lien texte. */
.hero-a .conteneur > * { min-width: 0; }
.hero-texte .recherche-hero { width: 100%; max-width: 34em; margin: 22px 0 0; box-sizing: border-box; }
.hero-texte .recherche-hero .bouton { padding: 10px 22px; }
.hero-texte .points-hero { margin-top: 20px; }
.hero-texte .devis-hero { margin: 22px 0 0; font-size: 16px; color: var(--gris); }
.hero-texte .devis-hero a { color: var(--bleu); font-weight: 600; text-underline-offset: 3px; }
@media (max-width: 480px) { .hero-texte .recherche-hero .bouton { padding: 10px 16px; } }

/* Gabarit d'article du journal (planche simu_gabarit_article, en-tête B validé par Alex le 23/10). */
.byline { color: var(--gris); font-size: 15px; margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.byline a { color: var(--marine); }
.byline .maj { margin: 0; font-size: inherit; }
.figure-article { margin: 28px 0; max-width: 46em; }
.figure-article img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--rayon); background: var(--blanc); }
.figure-article.detouree img { object-fit: contain; border: 1px solid var(--ligne); }
.figure-info { max-width: 52em; }
.figure-info a { display: block; }
.figure-info img { aspect-ratio: 16 / 9; object-fit: contain; border: 1px solid var(--ligne); }
.tableau-replie { max-width: 46em; margin: 4px 0 20px; }
.tableau-replie summary { cursor: pointer; font: 600 15px var(--titres); color: var(--bleu); min-height: 44px; display: flex; align-items: center; gap: 10px; list-style: none; }
.tableau-replie summary::-webkit-details-marker { display: none; }
.tableau-replie summary::before { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .15s; }
.tableau-replie[open] summary::before { transform: rotate(45deg); }
.tableau-replie .tableau { margin-top: 4px; }
.figure-article figcaption { font-size: 14px; color: var(--gris); margin-top: 8px; }
.figure-article figcaption a { color: var(--bleu); font-weight: 600; margin-left: 6px; }
/* En-tête compacte (planche simu_entete_article_compacte, version A choisie par Alex le 23/10) : titre à
   38 px au plus, lignes équilibrées ; photo de tête entière, jamais recadrée, dans un carré blanc. */
.tete-article h1 { font-size: clamp(28px, 5.6vw, 38px); text-wrap: balance; }
.figure-tete { margin: 22px 0 4px; }
.figure-tete img { aspect-ratio: 1 / 1; object-fit: contain; background: #fff; max-height: 400px; }
@media (min-width: 900px) {
  .tete-article { display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px; align-items: start; }
  .tete-article .figure-tete { margin-top: 8px; }
}

/* Index du journal (planche simu_index_journal, grille A validée par Alex le 23/10). */
.filtres-journal { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 26px; }
.filtres-journal button { font: 500 15px var(--titres); padding: 9px 16px; min-height: 44px; border-radius: 999px; border: 1.5px solid var(--marine); background: none; color: var(--marine); cursor: pointer; }
.filtres-journal button[aria-pressed="true"] { background: var(--marine); color: var(--creme); }
.cartes-journal { display: grid; gap: 22px; grid-template-columns: 1fr; margin-top: 24px; }
@media (min-width: 700px) { .cartes-journal { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .cartes-journal { grid-template-columns: repeat(3, 1fr); } }
.carte-journal { display: flex; flex-direction: column; background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--rayon); overflow: hidden; color: var(--marine); text-decoration: none; }
.carte-journal[hidden] { display: none; }
.carte-journal:hover { box-shadow: 0 10px 24px rgba(20, 33, 61, .08); }
.carte-journal .visuel-j { display: flex; align-items: flex-end; aspect-ratio: 16 / 10; background: var(--voile); }
.carte-journal .visuel-j img { width: 100%; height: 100%; object-fit: cover; display: block; }
.carte-journal .visuel-j.sans { background: linear-gradient(135deg, #eef1fb, #f6efe2); padding: 18px; font: 600 15px var(--titres); color: var(--bleu); }
.carte-journal .corps-j { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 16px 18px 18px; }
.carte-journal .meta-j { font-size: 13px; color: var(--gris); }
.carte-journal h2 { font-size: 19px; line-height: 1.3; margin: 0; }
.carte-journal .extrait-j { font-size: 15px; color: var(--gris); }
.carte-journal .theme-j { margin-top: auto; align-self: flex-start; font: 600 12px var(--titres); text-transform: uppercase; letter-spacing: .05em; color: var(--bleu); }

/* Pages légales (26/10) : lien vers les CGV sous le bouton d'envoi du formulaire, sans case à cocher. */
.lien-cgv { margin: 10px 0 0; font-size: 14px; }
.lien-cgv a { color: var(--bleu); }

/* Demande d'Alex du 28/10 : produits plus haut sur les pages de sélection. Introduction repliée à deux
   lignes (trois sur téléphone) avec « Lire la suite ». Les familles et les régions restent toutes
   visibles sans défilement (choix d'Alex du 20/10). */
.sous-titre.replie p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sous-titre p + p { margin-top: 8px; }
.sous-titre.replie p + p { display: none; }
.lire-suite { background: none; border: 0; padding: 4px 0 0; font: 600 15px var(--titres); color: var(--bleu); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@media (max-width: 699px) {
  .sous-titre.replie p { -webkit-line-clamp: 3; }
}

/* Barre de tri sur une ligne (planche du 29/10, demande d'Alex) : sous-rubriques sur une ligne qui défile
   de côté, régions dans le menu « Région », filtres dans « Filtrer ». */
.barre-selection .barre-ligne { align-items: center; flex-wrap: nowrap; }
.barre-selection .lignes-pastilles { flex: 1; min-width: 0; }
.barre-selection .pastilles { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); mask-image: linear-gradient(90deg, #000 92%, transparent); padding-right: 24px; }
.barre-selection .pastilles::-webkit-scrollbar { display: none; }
.menu-barre { position: relative; flex: none; }
.menu-barre summary { list-style: none; min-height: 38px; padding: 7px 16px; font-size: 14px; cursor: pointer; }
.menu-barre summary::-webkit-details-marker { display: none; }
.panneau-corps-regions { width: 320px; }
.panneau-corps-regions .filtre-regions { flex-direction: column; align-items: stretch; gap: 6px; }
.panneau-corps-regions .filtre-regions button { text-align: left; display: flex; justify-content: space-between; }
.panneau-corps-regions .libelle-ligne { margin-bottom: 4px; }
@media (max-width: 699px) {
  .barre-selection .barre-ligne { flex-wrap: wrap; gap: 8px; }
  .barre-selection .lignes-pastilles { flex-basis: 100%; order: 0; }
  .panneau-corps-regions { position: fixed; inset: auto 0 0 0; width: auto; max-height: 70vh; border-radius: 16px 16px 0 0; z-index: 60; }
}

/* Référence produit sous le titre de la fiche, discrète (demande d'Alex du 30/10 : en pied, personne ne la trouvait). */
.fiche-infos .ref-fiche { margin: 2px 0 0; font-size: 13px; color: var(--gris); letter-spacing: .02em; user-select: all; }
/* Accueil (remarque d'Alex du 04/11) : la liste de suggestions de la recherche du hero dépassait le bas du hero et était
   coupée. Seuls les ronds décoratifs sont rognés, dans leur cadre ; le hero laisse dépasser la liste, au-dessus de la suite. */
.hero.hero-a { overflow: visible; z-index: 3; }
.cadre-ronds { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hero-a .hero-texte { position: relative; z-index: 2; }


/* Fiche sur téléphone (audit mobile du 06/11) : nom, référence, origine et prix d'appel avant la photo ;
   photo moins haute, vignettes sur une ligne qui défile ; grille, puis le bouton unique (décision d'Alex :
   un seul bouton d'action par fiche, pas de bouton collant). */
@media (max-width: 999px) {
  .fiche { display: flex; flex-direction: column; gap: 12px; }
  .fiche .fiche-infos, .fiche .bloc-prix { display: contents; }
  .fiche h1 { order: 1; margin: 0; }
  .fiche .ref-fiche { order: 2; margin-top: -6px; }
  .fiche .ligne-origine { order: 3; margin: 0; }
  .fiche .precision-origine { order: 4; margin: 0; }
  .fiche .bloc-prix > .prix { order: 5; margin: 0; }
  .fiche .galerie { order: 6; }
  .fiche .couleurs { order: 7; margin: 0; }
  .fiche .selecteur-variantes { order: 8; margin: 0; }
  .fiche .argument { order: 9; margin: 6px 0 0; }
  .fiche .grille-prix { order: 10; }
  .fiche .aide-paliers { order: 11; margin-top: -4px; }
  .fiche .actions { order: 12; }
  .fiche .faits { order: 13; margin: 0; }
  .fiche .tolerance { order: 14; margin: 0; }
  .fiche .mention-tc { order: 15; margin: 0; }
  .fiche-visuel { aspect-ratio: 4 / 3; }
  .vignettes { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .vignettes::-webkit-scrollbar { display: none; }
  .vignettes li { flex: none; }
  .vignettes button { width: 60px; height: 60px; }
}
/* Paliers au doigt : « Demander » visible sans survol. */
@media (hover: none) { .palier-lien .demander { visibility: visible; } }
.recherche-page { margin: 0 0 18px; max-width: 640px; }
.voir-plus-recherche { display: flex; margin: 20px auto 0; }

/* Listes sur téléphone (audit mobile du 06/11) : barre de filtres collante sur une ligne (sous-catégories qui
   défilent au doigt, Région, Filtrer) ; le guide éditorial replié sous « Lire tout le guide » ; deux cartes par sous-catégorie avant « Voir les N » ; le bandeau de
   logos clients quitte le haut des familles, occasions et régions (il reste sur l'accueil, le devis et Nos clients). */
@media (max-width: 699px) {
  .barre-selection { position: sticky; padding: 8px 0; }
  .barre-selection .barre-ligne { flex-wrap: nowrap; gap: 8px; align-items: center; }
  .lignes-pastilles { flex-basis: auto; order: 0; flex: 1; min-width: 0; }
  .barre-selection .pastilles { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .barre-selection .pastilles::-webkit-scrollbar { display: none; }
  .barre-selection .libelle-ligne { display: none; }
  .barre-selection .menu-barre > summary, .barre-selection .panneau-filtres > summary { padding: 6px 12px; font-size: 13px; min-height: 36px; }
  .js .rang:not(.ouvert) .carte:nth-child(n+3) { display: none; }
  .js .texte-page.collection.repliable:not(.deplie) { max-height: 150vh; overflow: hidden; position: relative; }
  .js .texte-page.collection.repliable:not(.deplie)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background: linear-gradient(rgba(250, 248, 243, 0), var(--creme)); pointer-events: none; }
  .deplier-guide { display: flex; margin: 12px auto 28px; }
  .groupe-replie [data-sc]:nth-of-type(n+4) { display: none; }
  .voir-familles { display: flex; margin: 4px auto 20px; }
  .logos-entete { display: none; }
}

/* Formulaire de devis (audit mobile du 06/11) : message d'erreur écrit sous le champ, avis de minimum. */
.erreur-champ { margin: 4px 0 0; color: #b42318; font-size: 14px; font-weight: 600; }
[aria-invalid="true"] { border-color: #b42318 !important; }
.avis-qte { font-size: 13px; font-weight: 500; color: var(--gris); }

/* Audit mobile du 06/11 : tête du panneau de filtres ; liens du pied plus faciles à toucher ; images d'ambiance
   des cartes (effet de survol) ni affichées ni téléchargées sur écran tactile. */
.panneau-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.panneau-titre { margin: 0; font: 600 17px var(--titres); color: var(--marine); }
.fermer-panneau { width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: none; color: var(--marine); cursor: pointer; border-radius: 999px; }
@media (min-width: 700px) { .panneau-tete { display: none; } }
@media (max-width: 699px) { .colonnes-pied li a, .contact-pied a { display: inline-block; padding: 8px 0; } .colonnes-pied ul { gap: 0; } }
@media (hover: none) { .carte-produit .visuel img.ambiance { display: none; } }

/* Panneaux de filtres au-dessus de l'en-tête quand ils sont ouverts (audit mobile du 06/11, seconde passe). */
.barre-selection:has(details[open]) { z-index: 70; }
.panneau-corps-regions .panneau-actions { margin-top: 12px; }
@media (max-width: 699px) { .panneau-corps-regions .panneau-tete { display: flex; } .rond-couleur { width: 36px; height: 36px; } }

/* Audit technique du 06/11 (seconde passe). Ancres sous l'en-tête collant, et sous la barre de filtres. */
html { scroll-padding-top: 88px; }
html:has(.barre-selection) { scroll-padding-top: 140px; }
/* Résultats de recherche : la place est réservée pendant le chargement, la page ne saute plus. */
.grille-produits.en-attente { min-height: 120vh; }
.grille-produits.sans-resultat { min-height: 70vh; }
/* Lignes de la demande plus compactes sur téléphone, bouton Retirer à 44 px. */
.retirer { min-height: 44px; padding: 0 4px; }
@media (max-width: 699px) {
  .ligne-demande { grid-template-columns: 56px 1fr auto; gap: 8px 12px; }
  .ligne-demande .info-l { grid-column: 2 / 4; }
  .ligne-demande .qte-l { grid-column: 2; grid-row: 2; }
  .ligne-demande .retirer { grid-column: 3; grid-row: 2; align-self: end; justify-self: end; }
  .ligne-demande img { grid-row: 1 / 3; align-self: start; }
}
/* Audit technique du 06/11 : texte courant un cran plus grand sur téléphone. */
@media (max-width: 699px) {
  .carte-produit h3 { font-size: 15px; }
  .carte-produit .prix, .prix { font-size: 14px; }
  .aide-paliers, .pied .adresse, .mention-tc { font-size: 14px; }
  .pied a { font-size: 15px; }
}

.bandeau-mini { display: none; }
@media (max-width: 389px) { .bandeau-pro .bandeau-court { display: none; } .bandeau-pro .bandeau-mini { display: inline; } }
/* Demande longue : au-delà de trois produits, les suivants se déplient (le formulaire reste proche). */
.lignes-demande.repliee .ligne-demande:nth-child(n+4) { display: none; }
.deplier-lignes { justify-self: start; }

/* Cibles tactiles (audit technique du 06/11) : le « + » des cartes garde son dessin de 36 px et reçoit le doigt sur 44 px ;
   la case de la consultation publique passe à 22 px ; « Voir les N » tient sur une ligne. */
.ajout-carte::before { content: ""; position: absolute; inset: -4px; }
.champ.case input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--marine); }
.tuile-plus { text-align: center; flex-wrap: wrap; }
/* Pied de page plus court sur téléphone : familles et occasions en lignes qui se suivent (audit du 06/11). */
@media (max-width: 699px) {
  .colonnes-pied > div:nth-child(-n+2) { grid-column: 1 / -1; }
  .colonnes-pied > div:nth-child(-n+2) ul { display: flex; flex-wrap: wrap; column-gap: 18px; }
}
@media (max-width: 699px) { .mentions-pied a { display: inline-block; padding: 10px 0; } }
.meme-qte { display: grid; gap: 6px; font-size: 14px; font-weight: 600; }
.meme-qte span { display: flex; gap: 8px; flex-wrap: wrap; }
.meme-qte input { font: inherit; font-size: 16px; width: 120px; padding: 9px 10px; border: 1.5px solid #c9cdd8; border-radius: 10px; background: var(--creme); }
@media (hover: none) { .ajout-carte { width: 44px; height: 44px; top: 4px; right: 4px; } }
.ma-demande.en-attente > :not(h2) { visibility: hidden; }
.lien-occasion { font-weight: 600; }
/* Audit technique du 06/11 : le repli de l'introduction s'applique dès le premier affichage (classe js posée dans l'en-tête). */
.js .sous-titre[data-replie]:not(.deplie) p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.js .sous-titre[data-replie]:not(.deplie) p + p { display: none; }
@media (max-width: 699px) { .js .sous-titre[data-replie]:not(.deplie) p { -webkit-line-clamp: 3; } }
/* Devis : prix des lignes lisibles ; liens des tableaux lisibles sur fond marine. */
.det-l { font-size: 14px; }
.tableau th a { color: var(--blanc); }
.tableau td a { display: inline-block; padding: 6px 0; }
.avis-retrait { background: var(--voile); border-left: 3px solid var(--marine); padding: 10px 12px; border-radius: 8px; font-size: 14px; margin: 0 0 12px; }
/* Décision d'Alex du 06/11 (audit mobile) : barre fixe en bas de fiche sur téléphone et tablette, « Ajouter à ma
   demande » et « Demander un devis » ; bouton de devis dans le premier écran de l'accueil. */
.hero-devis { margin-top: 14px; }
@media (min-width: 700px) { .hero-devis { display: none; } }
.barre-fiche { display: none; }
@media (max-width: 999px) {
  .barre-fiche { display: flex; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--blanc); padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); box-shadow: 0 -6px 18px rgba(20,33,61,.12); }
  .barre-fiche .bouton { flex: 1 1 0; justify-content: center; text-align: center; min-height: 48px; padding: 6px 8px; font-size: 14px; line-height: 1.2; }
  body:has(.barre-fiche) { padding-bottom: 76px; }
  html:has(.barre-fiche) { scroll-padding-bottom: 90px; }
}
/* Hypothèse de prix par technique (brief de la méta IA Goodies du 06/11) : sous le prix d appel, en tout petit (demande d Alex du 06/11). */
.hypothese-prix { font-size: 11.5px; color: var(--gris); margin: 2px 0 0; line-height: 1.35; }
@media (max-width: 999px) { .fiche .bloc-prix > .hypothese-prix { order: 5; margin: -8px 0 0; } }