/* ===========================================================================
   MaPièce Auto — accueil de la vitrine, PARTIE HAUTE :
   barre utilitaire, en-tête, bandeau-titre, bloc de recherche en trois
   colonnes, bandeau « devis », ligne d'état du véhicule.

   Jetons : vitrine-tokens.css (chargée avant).
   Sections basses (familles, catégories, marques, réassurance, expert,
   newsletter, pied de page) : vitrine-home-sections.css (chargée après).
   Chargée APRÈS style.css et vitrine.css : à spécificité égale, elle gagne.
   =========================================================================== */

/* ------------------------------------------------ 1. barre supérieure fine */
.topbar { background: var(--color-surface-2); border-bottom: 1px solid var(--color-line); }
.topbar-nav {
  display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: flex-end;
  padding-block: var(--space-2); font-size: var(--text-sm);
}
.topbar-nav a {
  color: var(--color-muted); text-decoration: none; font-weight: 600;
  transition: color var(--duration-fast) var(--ease-out);
}
.topbar-nav a:hover, .topbar-nav a:focus-visible { color: var(--color-text-strong); }

/* ------------------------------------------------------------- 2. en-tête */
body.vitrine header {
  display: block; padding: 0; border-bottom: 1px solid var(--color-line);
  background: linear-gradient(180deg, var(--color-surface), var(--color-base));
}
.header-grid {
  display: grid; align-items: center; gap: var(--space-4);
  grid-template-columns: auto 1fr auto auto; padding-block: var(--space-4);
}
header h1.marque { margin: 0; font-size: var(--text-lg); }
header .logo { display: flex; align-items: center; gap: var(--space-2); }
.logo-texte { font-weight: 800; letter-spacing: -.02em; color: var(--color-text-strong); }
.logo-accent { color: var(--color-accent-text); }
/* Emplacement du bandeau : le cadre est posé par la feuille, l'image (photo du
   manifeste ou illustration SVG) est injectée par vitrine-home.js. */
.header-visuel { display: block; justify-self: center; max-width: 360px; width: 100%; }
.header-banniere {
  display: block; width: 100%; height: auto; max-height: 72px;
  object-fit: contain; border-radius: var(--radius-md);
}
.tel-pastille {
  display: grid; margin: 0; padding: var(--space-2) var(--space-4); line-height: 1.3;
  background: var(--color-surface-2); border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-pill); text-align: right;
}
.tel-pastille:empty { display: none; }
.tel-appel {
  font-size: var(--text-eyebrow); letter-spacing: .12em;
  text-transform: uppercase; color: var(--color-muted);
}
.tel-numero { font-weight: 800; color: var(--color-text-strong); text-decoration: none; }
.tel-note { font-size: var(--text-sm); color: var(--color-muted); }
header nav.header-nav { display: flex; align-items: center; gap: var(--space-5); }
.compte {
  display: grid; grid-template-columns: auto 1fr; align-items: center;
  gap: 0 var(--space-2); font-size: var(--text-sm);
}
.compte-icone { grid-row: span 2; }
.compte a, header nav a { margin: 0; color: var(--color-text); text-decoration: none; }
.compte a:hover, .compte a:focus-visible { color: var(--color-accent-text); }
.lien-panier {
  display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap;
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill);
  background: var(--color-accent-strong); color: var(--color-on-accent); font-weight: 700;
  transition: background var(--duration-fast) var(--ease-out);
}
.lien-panier::before {
  content: ""; width: 22px; height: 22px; flex: none;
  background: url("/images/accueil/picto-panier.svg") center / contain no-repeat;
}
.lien-panier:hover, .lien-panier:focus-visible { background: var(--color-accent-deep); }
.badge-count { background: var(--color-on-accent); color: var(--color-accent-deep); }

/* ------------------------------------------------ 3. bandeau-titre encadré */
.bandeau-titre {
  display: grid; gap: var(--space-2); justify-items: center; text-align: center;
  padding: var(--space-5) var(--space-4); background: var(--color-surface);
  border: 1px solid var(--color-line-strong); border-radius: var(--radius-lg);
}
.bandeau-titre h2 {
  margin: 0; font-size: var(--text-display); font-weight: 800;
  letter-spacing: -.02em; color: var(--color-text-strong);
}

/* -------------------------------------------- 4. bloc de recherche, 3 col. */
.colonnes { display: grid; gap: var(--space-5); align-items: start; }
.colonne {
  position: relative; display: grid; gap: var(--space-3); align-content: start;
  padding: var(--space-5); background: var(--color-surface); box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-line); border-radius: var(--radius-lg);
}
body.vitrine .colonne .tab {
  justify-self: start; padding: 0 0 var(--space-2); background: none; border: 0;
  border-bottom: 2px solid transparent; color: var(--color-muted); cursor: pointer;
  font-size: var(--text-eyebrow); font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase;
  transition: color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
}
body.vitrine .colonne .tab:hover { background: none; color: var(--color-text); }
.colonne .tab.active { color: var(--color-accent-text); border-bottom-color: var(--color-accent); }
.colonne label { font-size: var(--text-sm); font-weight: 600; color: var(--color-muted); }
.colonne select, .colonne input {
  width: 100%; min-width: 0; padding: var(--space-3); background: var(--color-base);
  border: 1px solid var(--color-line-strong); border-radius: var(--radius-sm);
  color: var(--color-text); font-size: var(--text-base);
}
.colonne-aide { margin: 0; font-size: var(--text-sm); color: var(--color-muted); line-height: 1.5; }
.colonne-illu {
  width: 100%; max-width: 280px; height: auto;
  margin-top: var(--space-3); justify-self: center;
}
/* Les trois colonnes restent visibles en permanence : le mécanisme d'onglets
   historique (`.tabpanel.hidden`) ne pilote plus que le panneau VIN. */
#panel-vehicule.hidden, #panel-immat.hidden, #panel-ref.hidden { display: grid; }
.tabpanel { display: grid; gap: var(--space-2); padding: 0; }
.lien-vin {
  font-size: var(--text-sm) !important; letter-spacing: .04em !important;
  text-transform: none !important;
}
/* `max-width` : le même bouton sert dans une colonne étroite et sous le panier,
   où un aplat de 1 200 px de large serait disgracieux. */
.cta {
  margin-top: var(--space-2); padding: var(--space-3) var(--space-5);
  width: 100%; max-width: 420px;
  border: 0; border-radius: var(--radius-sm); cursor: pointer;
  background: var(--color-accent-strong); color: var(--color-on-accent);
  font-size: var(--text-base); font-weight: 700;
  transition: background var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}
.cta:hover { background: var(--color-accent-deep); }
.cta:active { transform: translateY(1px); }
.champ-ok { display: flex; }
.champ-ok input { border-radius: var(--radius-sm) 0 0 var(--radius-sm); border-right: 0; }
.btn-ok {
  flex: none; padding: 0 var(--space-5); border: 0; cursor: pointer;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--color-accent-strong); color: var(--color-on-accent);
  font-size: var(--text-base); font-weight: 800; letter-spacing: .06em;
  transition: background var(--duration-fast) var(--ease-out);
}
.btn-ok:hover { background: var(--color-accent-deep); }
.btn-ok:active { transform: translateY(1px); }

/* Colonne centrale mise en avant : fond plein, légèrement surélevée. */
.col-plaque {
  background: linear-gradient(160deg, var(--color-accent-strong), var(--color-accent-deep));
  border-color: var(--color-accent); box-shadow: var(--shadow-raised);
}
/* Même spécificité que `body.vitrine .colonne .tab`, mais plus bas dans la
   feuille : c'est ce qui redonne le blanc au sur-titre de la colonne accent. */
body.vitrine .col-plaque .tab, body.vitrine .col-plaque .tab:hover,
body.vitrine .col-plaque .tab.active,
.col-plaque label, .col-plaque .colonne-aide { color: var(--color-on-accent); }
.col-plaque .tab.active { border-bottom-color: var(--color-on-accent); }
.col-plaque input {
  background: var(--color-on-accent); color: var(--color-base);
  border-color: var(--color-accent-deep); font-weight: 700;
}
/* Sur le fond accent, le bouton bascule sur l'encre la plus sombre : un fond
   clair y porterait un texte blanc illisible. */
body.vitrine .col-plaque .btn-ok {
  background: var(--color-text-strong); color: var(--color-on-accent);
}
body.vitrine .col-plaque .btn-ok:hover { background: var(--color-text); }
.badge-etoile {
  position: absolute; top: calc(var(--space-3) * -1); right: var(--space-4);
  width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: var(--radius-pill); background: var(--color-surface);
  color: var(--color-accent-text); font-size: var(--text-lg); box-shadow: var(--shadow-md);
}

/* --------------------------------------------------- 5. bandeau « devis » */
.bande-devis {
  display: grid; gap: var(--space-5); align-items: center;
  grid-template-columns: auto 1fr auto; padding: var(--space-5);
  border-radius: var(--radius-lg); background: var(--color-surface-2);
  border: 1px solid var(--color-line);
}
.bande-devis h2 {
  margin: var(--space-1) 0; font-size: var(--text-xl);
  font-weight: 800; color: var(--color-text-strong);
}
.bande-devis p {
  margin: 0; color: var(--color-muted); font-size: var(--text-base); line-height: 1.6;
}
.bande-devis-action .cta { margin: 0; width: auto; white-space: nowrap; }

/* --------------------------------------------------------- 6. ligne d'état */
.ligne-vehicule {
  display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center;
  align-items: center; font-size: var(--text-sm); color: var(--color-muted);
}
.veh-choisi strong { color: var(--color-accent-text); }
/* `body.vitrine` obligatoire : voir la note de spécificité de vitrine.css. */
body.vitrine .veh-effacer {
  padding: var(--space-1) var(--space-3); border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-pill); background: var(--color-surface);
  color: var(--color-muted); font-size: var(--text-sm); cursor: pointer;
}
body.vitrine .veh-effacer:hover {
  background: var(--color-surface); color: var(--color-text-strong);
  border-color: var(--color-accent);
}

/* ----------------------------------------------------------- responsive */
@media (width >= 900px) {
  .colonnes { grid-template-columns: 1fr 1.08fr 1fr; align-items: stretch; }
  .col-plaque { transform: translateY(-10px); }
}

/* En deçà de 900 px : une seule colonne, la plaque EN PREMIER. */
@media (width < 900px) {
  .col-plaque { order: -1; }
  .header-grid { grid-template-columns: 1fr auto; row-gap: var(--space-3); }
  .header-visuel { display: none; }
  .tel-pastille { grid-column: 1; text-align: left; }
  header nav.header-nav { grid-column: 2; justify-content: flex-end; }
  .bande-devis { grid-template-columns: 1fr; text-align: left; }
  .bande-devis-picto { justify-self: start; }
}

@media (width < 560px) {
  .header-grid { grid-template-columns: 1fr; }
  header nav.header-nav { grid-column: 1; flex-wrap: wrap; gap: var(--space-3); }
  .topbar-nav { justify-content: flex-start; gap: var(--space-3); }
  .badge-etoile { right: var(--space-3); }
}