/* layout.css — coque de page : header, barre de chips, stats, grille wrap/rail, filtres, barre de résultats. */
/* header */
header{background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30}
/* flex-wrap manquait : logo + recherche + nav + téléphone tenaient sur une ligne unique et
   incompressible, donc s'écrasaient sous 900px. Avec le retour à la ligne, la recherche prend
   toute la largeur sur petit écran (flex-basis:100% via l'ordre ci-dessous) au lieu d'être
   réduite à un timbre-poste. */
.hrow{display:flex;align-items:center;gap:20px;padding:14px 26px;max-width:1580px;margin:0 auto;flex-wrap:wrap}
/* .logo est un <button> depuis le lot 2b : text-align pour annuler le centrage par défaut
   des boutons, display:block pour que le <small> passe bien à la ligne. */
.logo{font-family:"Barlow Condensed";font-weight:700;font-size:26px;letter-spacing:.06em;line-height:.9;text-align:left;display:block}
.logo small{display:block;font-size:9.5px;letter-spacing:.28em;color:var(--grey);font-weight:600}
/* Marque bicolore reprise du logo : MERCATO sombre, STOCK bleu vif. --brand est propre au logo :
   la palette de l'application reste le bleu ardoise sourd (--blue), volontairement discret sur un
   catalogue dense. Seule la marque porte le bleu franc. */
:root{--brand:#2b7fe0}
.logo .mk,.glogo .mk{color:var(--brand)}
.search{flex:1;display:flex;max-width:640px;border:1px solid var(--ink)}
/* `outline:none` retiré : il supprimait l'indicateur de focus du champ de recherche, qui est
   la porte d'entrée principale de l'outil. Le focus est désormais géré globalement par la
   règle `:focus-visible` de tokens.css — donc invisible au clic souris, visible au clavier.
   L'offset négatif garde l'anneau à l'intérieur du cadre du champ, qui est collé au bouton. */
.search input{flex:1;border:none;padding:11px 14px;font-size:14px}
.search input:focus-visible{outline-offset:-3px}
.search button{background:var(--blue2);color:var(--card);padding:0 18px;font-size:16px}
nav{display:flex;gap:22px;font-family:"Barlow Condensed";text-transform:uppercase;font-size:15px;letter-spacing:.05em;font-weight:600}
/* Les entrées de nav sont des <button> depuis le lot 2b (elles changent de vue, elles ne
   naviguent pas vers une URL). font:inherit pour reprendre la police condensée de <nav>,
   que le style natif des boutons écraserait. */
nav button{color:var(--blue);padding:4px 0;border-bottom:2px solid transparent;font:inherit;letter-spacing:inherit;text-transform:inherit}
nav button.active,nav button:hover{color:var(--ink);border-color:var(--blue2)}
.subrow{display:flex;align-items:center;gap:14px;padding:8px 26px;max-width:1580px;margin:0 auto;border-top:1px solid var(--soft);flex-wrap:wrap}
.subrow select{border:1px solid var(--line);background:var(--card);padding:6px 8px;font-family:inherit;font-size:13px;color:var(--ink)}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--deep);cursor:pointer;padding:5px 9px;border:1px solid var(--line);background:var(--card)}
.chip .n{background:var(--blue2);color:var(--card);border-radius:10px;font-size:11px;padding:0 6px;min-width:17px;text-align:center}
/* Bandeau « mode interne » : visible UNIQUEMENT en mode coût, où le prix d'achat du garage est
   affiché. Texte en --ink sur crème (13,4:1) plutôt qu'en --warn (4,26:1, sous le seuil AA) :
   la pastille colorée porte l'alerte, le texte porte la lisibilité. */
.modebar{display:none;align-items:center;gap:9px;flex-wrap:wrap;padding:8px 26px;
  background:var(--warn-bg);border-top:1px solid var(--warn-line);color:var(--ink);font-size:12.5px}
body.costmode .modebar{display:flex}
.modebar .dot{width:8px;height:8px;border-radius:50%;background:var(--warn);flex:0 0 auto}
.modebar-cta{margin-left:auto;border:1px solid var(--warn);color:var(--warn-ink);background:var(--card);
  padding:4px 11px;font-size:12px;font-weight:700;letter-spacing:.03em;cursor:pointer}
.modebar-cta:hover{background:var(--warn);color:var(--card)}
/* Étiquette du montant : « MON COÛT » sur chaque prix en mode interne. Le bandeau donne l'état
   global, cette étiquette suit le montant lui-même — c'est ce que l'œil lit vraiment. */
.plabel{display:none;font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--warn-ink);font-weight:700;line-height:1.2}
body.costmode .plabel{display:block}
/* stats */
.stats{max-width:1580px;margin:0 auto;padding:16px 26px;display:flex;gap:38px;flex-wrap:wrap;border-bottom:1px solid var(--line)}
.stat b{font-family:"Barlow Condensed";font-size:30px;font-weight:700;display:block;line-height:1}
.stat span{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey);font-weight:600}
/* layout */
.wrap{max-width:1580px;margin:0 auto;display:grid;grid-template-columns:266px 1fr;gap:26px;padding:22px 26px 60px}
/* --header-h est mesuré au runtime (syncHeaderHeight, app.js). Le 118px codé en dur d'origine
   supposait un header de hauteur fixe : il devenait faux dès que la barre de chips passait sur
   deux lignes, et l'ajout du bandeau « mode interne » l'a décalé de 39px de plus — le haut du
   rail passait sous le header. Le repli 118px ne sert que le temps du premier rendu.
   100dvh et non 100vh : sur mobile, 100vh inclut la barre d'adresse rétractable de Safari iOS,
   ce qui donne un rail plus haut que l'écran réellement visible. */
.rail{align-self:start;position:sticky;top:calc(var(--header-h, 118px) + 16px);
  max-height:calc(100dvh - var(--header-h, 118px) - 32px);overflow-y:auto}
.fbox{background:var(--card);border:1px solid var(--line);padding:16px 16px 6px}
.fhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
/* h2 et non h3 : le titre « Filtres » a changé de niveau au lot 2a (il sautait un niveau sous
   le h1). Le sélecteur était resté sur h3, donc mort — le titre s'affichait à 22,5px, la taille
   par défaut du navigateur, au lieu des 16px voulus. */
.fhead h2{font-size:16px}
.reset{font-size:12px;color:var(--blue);letter-spacing:.06em;text-transform:uppercase;font-weight:600}
.fgroup{border-top:1px solid var(--soft);padding:13px 0}
.fgroup>.lbl{display:block;margin-bottom:9px}
.rangeval{font-weight:600;color:var(--ink);font-size:13px}
input[type=range]{width:100%;accent-color:var(--blue2);margin-top:4px}
.opt{display:flex;align-items:center;gap:8px;padding:3px 0;font-size:13.5px}
.opt input{accent-color:var(--blue2)}
.opt .c{margin-left:auto;color:var(--grey);font-size:12px}
.scrolly{max-height:210px;overflow:auto}
select.full{width:100%;border:1px solid var(--line);padding:8px;background:var(--card);font-family:inherit}
.mqsearch{width:100%;border:1px solid var(--line);padding:6px 8px;margin-bottom:7px;background:var(--card);font-family:inherit;font-size:13px;color:var(--ink)}
.mqsearch::placeholder{color:var(--grey)}
/* results */
.rbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.rbar .count{font-family:"Barlow Condensed";font-size:20px;font-weight:700}
.rbar .spacer{flex:1}
.rbar select{border:1px solid var(--line);padding:7px 9px;background:var(--card);font-family:inherit;font-size:13px}
.toggle{display:flex;border:1px solid var(--line)}
.toggle button{padding:7px 11px;font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--grey)}
.toggle button.on{background:var(--ink);color:var(--card)}
/* chips d'interprétation de la recherche IA (au-dessus de la barre de résultats) */
.aichips{margin:8px 0}
.aichips-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.aichips-lbl{font-size:13px;color:var(--grey)}
.aichip{background:var(--chip-bg,#eef);border-radius:999px;padding:2px 10px;font-size:13px}
.aichips-clr{margin-left:auto;font-size:13px;background:none;border:0;text-decoration:underline;cursor:pointer;color:var(--grey)}
.aichips-note{font-size:12.5px;color:var(--grey);margin:6px 0 0}

/* ===================== DISTINCTION VUE GARAGE / VUE CLIENT =====================
   Deux erreurs étaient rapportées : montrer l'écran interne à un client, et annoncer le prix
   d'achat en croyant lire le prix de vente. Le mode devait donc devenir LISIBLE, et non plus
   déductible. Trois signaux redondants, chacun couvrant une défaillance de l'autre. */

/* 1. Sélecteur nommé : les deux vues sont écrites, celle en cours est pleine. */
.modesw{display:inline-flex;border:1px solid var(--warn);border-radius:999px;overflow:hidden;
  background:var(--card)}
.modesw-opt{border:0;background:none;cursor:pointer;padding:5px 13px;font-size:12.5px;
  font-weight:700;letter-spacing:.02em;color:var(--grey);white-space:nowrap;font-family:inherit}
.modesw-opt + .modesw-opt{border-left:1px solid var(--warn-line)}
.modesw-opt:hover{background:var(--warn-bg)}
#swGarage.on{background:var(--warn);color:#fff}
#swClient.on{background:var(--blue);color:#fff}

/* 2. Cadre plein écran + pastille permanente en vue garage. Le bandeau d'en-tête sort du champ
      au défilement ; ni le cadre ni la pastille ne bougent — c'est ce qui empêche de présenter
      l'écran interne sans s'en apercevoir. Cadre épais et pastille en bas à droite, là où le
      regard revient constamment sur un catalogue qu'on fait défiler. */
.modeframe{display:none;position:fixed;inset:0;border:8px solid var(--warn);
  pointer-events:none;z-index:60}
.modeframe::after{content:"🔒 VUE GARAGE — prix d’achat affichés";position:absolute;
  right:0;bottom:0;background:var(--warn);color:#fff;font-weight:800;font-size:12px;
  letter-spacing:.06em;padding:6px 14px;border-radius:6px 0 0 0;white-space:nowrap}
body.costmode .modeframe{display:block}
/* Toute la barre d'en-tête bascule en ambre : le changement est perçu avant même d'être lu. */
body.costmode header{background:var(--warn-bg)}
/* Le bloc prix lui-même est teinté : chaque montant interne porte sa propre alerte, même
   lorsqu'une seule carte est visible à l'écran. */
body.costmode .pricewrap{background:var(--warn-bg);border-left:3px solid var(--warn);
  padding:6px 8px;border-radius:0 4px 4px 0}

/* 3. Rappel du prix client SOUS le coût, en vue garage : les deux montants côte à côte
      suppriment l'erreur d'annonce. */
.cprice{font-size:12px;color:var(--blue);font-weight:600;margin-top:2px}
.cprice b{font-weight:800}

/* L'étiquette du montant devient une pastille : « MON COÛT » en petites capitales grises se
   confondait avec le reste de la fiche. */
body.costmode .plabel{display:inline-block;background:var(--warn);color:#fff;
  padding:2px 8px;border-radius:3px;letter-spacing:.08em;font-size:11px}

/* Provenance (nom de source) réservée aux administrateurs : le filtre disparaît entièrement,
   libellé compris, plutôt que de rester vide et intrigant. */
body:not(.sourcesok) #fgSource{display:none}