/* Sites vitrine (add-on) — habillage minimal au-dessus de public.css.
   Tokens var(--…) uniquement (public.css), mobile-first. */

.vitrine-apercu-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-4);
  flex-wrap: wrap;
  padding: var(--s-3) var(--s-6);
  background: var(--accent-soft);
  color: var(--text-primary);
  font-size: var(--t-small);
  text-align: center;
}

.vitrine-apercu-banner a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
}

/* Sélecteur de style dans le bandeau d'aperçu (E-210). */
.vitrine-apercu-themes { display: inline-flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.vitrine-apercu-banner .vitrine-apercu-themes a {
  padding: var(--s-1) var(--s-3);
  border-radius: var(--r-full);
  text-decoration: none;
  border: 1px solid var(--accent-border, var(--accent));
}
.vitrine-apercu-banner .vitrine-apercu-themes a[aria-current="page"] { background: var(--accent); color: var(--text-on-accent); }

.vitrine-nav-disabled {
  color: var(--text-tertiary);
  cursor: default;
  pointer-events: none;
}

.vitrine-contact {
  display: grid;
  gap: var(--s-12);
  margin-bottom: var(--s-16);
}

@media (min-width: 768px) {
  .vitrine-contact { grid-template-columns: 1fr 1.4fr; }
}

.vitrine-contact-form form,
.vitrine-form form {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.vitrine-contact-form label,
.vitrine-form label { font-size: var(--t-small); color: var(--text-secondary); }

.vitrine-contact-form input,
.vitrine-contact-form textarea,
.vitrine-form input,
.vitrine-form textarea,
.vitrine-form select {
  font: inherit;
  padding: var(--s-3);
  border: 1px solid var(--border-default);
  border-radius: var(--r-sm);
  background: var(--bg-surface);
  color: var(--text-primary);
}

.vitrine-contact-form textarea,
.vitrine-form textarea { min-height: 120px; resize: vertical; }

/* Réservation en ligne — vitrine (E-184 PR8), un seul formulaire réutilisant
   les mêmes primitives que le contact (input/textarea/select), plus
   fieldset/legend pour les groupes de choix radio (famille, plage) et le
   pot de miel anti-bot masqué hors écran (même pattern que le widget). */
.vitrine-form fieldset {
  display: flex;
  gap: var(--s-4);
  flex-wrap: wrap;
  border: 1px solid var(--border-default);
  border-radius: var(--r-sm);
  padding: var(--s-3);
  margin: 0;
}

.vitrine-form legend {
  padding: 0 var(--s-1);
  font-size: var(--t-small);
  color: var(--text-secondary);
}

.vitrine-form fieldset label {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

/* Finition du formulaire de réservation (E-202 D3) — c'est la page que les
   garages collent sur leur fiche Google : elle doit avoir l'air finie, à la
   couleur du garage (`--accent` posé sur <body> par vitrine/base.html). */
.vitrine-form form { accent-color: var(--accent); }

.vitrine-form input,
.vitrine-form select { min-height: 44px; /* cible tactile WCAG 2.5.8 */ }

.vitrine-form input:focus-visible,
.vitrine-form select:focus-visible,
.vitrine-form textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

/* Champ date : natif (meilleur sélecteur sur mobile), aligné sur les autres
   champs — même hauteur, même police, pleine largeur, sans rétrécir à sa
   largeur intrinsèque sous iOS. */
.vitrine-form input[type="date"] {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  text-align: left;
}
.vitrine-form input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.vitrine-form input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; }

.vitrine-calendrier-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}

.vitrine-jours {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.vitrine-jours a {
  display: inline-block;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--border-default, currentColor);
  border-radius: var(--r-md, 6px);
}

.vitrine-jours a[aria-current="date"] {
  font-weight: 700;
}

.vitrine-champ {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

/* Une seule liste à la fois : Service pour l'atelier, Voiture à l'essai pour
   un essai — sans JavaScript, sur le bouton radio coché. Un navigateur sans
   `:has()` ignore la règle entière : les deux listes restent visibles, ce qui
   reste juste (le serveur ne lit que celle de la famille choisie). */
.vitrine-form form:has(input[name="type_rdv"][value="atelier"]:checked) [data-famille="essai"],
.vitrine-form form:has(input[name="type_rdv"][value="essai"]:checked) [data-famille="atelier"] {
  display: none;
}

.vitrine-submit {
  justify-content: center;
  margin-top: var(--s-2);
  cursor: pointer;
  font: inherit;
  font-weight: 600;
}
.vitrine-submit:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (min-width: 768px) {
  .vitrine-submit { align-self: flex-start; }
}

.vitrine-honeypot {
  position: absolute;
  left: -9999px;
}

.vitrine-contact-erreur { color: var(--accent); font-size: var(--t-small); }

.vitrine-contact-envoye {
  background: var(--accent-soft);
  border-radius: var(--r-md);
  padding: var(--s-4);
}

.vitrine-rdv {
  max-width: 640px;
  /* Respiration sous le bandeau titre : sans elle, la légende du premier
     groupe collait au filet du hero (E-202 D3). */
  margin: var(--s-8) auto var(--s-16);
}

/* --- Contact permanent (spec § 8.1) ------------------------------------ */
.vitrine-contact-permanent {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-top: var(--s-5);
}

.vitrine-cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px; /* cible tactile WCAG 2.5.8 */
  padding: 0 var(--s-5);
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  color: var(--text-primary);
  font-weight: 600;
  font-size: var(--t-small);
}

.vitrine-cta-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text-on-accent);
}

.vitrine-cta-primary:hover { background: var(--accent-hover); color: var(--text-on-accent); }

/* Barre d'action en mobile : le levier de conversion n°1 reste atteignable
   pendant tout le scroll.
   `position: fixed`, PAS `sticky` : le bloc est le dernier enfant du
   `.container` du hero, qui enveloppe ses enfants au plus juste — un élément
   sticky n'y a aucune marge de déplacement et défilerait avec le hero sans
   jamais s'accrocher. `fixed` sort du flux et vise le viewport.

   La compensation de flux est portée par <body> (`.vitrine-avec-barre`, posée
   par accueil.html sous la MÊME garde que la barre) et PAS par un cale-pied
   inséré dans le partial : la barre `fixed` recouvre les derniers pixels du
   VIEWPORT, donc la fin du DOCUMENT — c'est-à-dire le <footer> (lien
   « Mentions légales » + crédit), qui vit hors du bloc `content`. Un cale-pied
   placé dans le hero (revue finale I-1) ou même en fin de `content` reste
   AVANT le footer et ne compense donc rien : seul un padding-bottom sur un
   conteneur qui ENGLOBE le footer déplace réellement la fin du document.
   Verrouillé par `VitrineCascadeCssTests` (core/tests/test_vitrine_pages.py),
   qui résout réellement la cascade au lieu de lire le markup. */
@media (max-width: 767px) {
  .vitrine-contact-permanent {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    margin: 0;
    padding: var(--s-3) var(--s-6);
    background: var(--bg-surface);
    border-top: 1px solid var(--border-subtle);
  }
  .vitrine-cta { flex: 1; justify-content: center; }

  /* Hauteur = celle de la barre, exprimée avec les MÊMES tokens : si le
     gabarit du bouton ou le padding changent, la compensation suit toute
     seule. Aucune règle hors media query : desktop = barre dans le flux,
     rien à compenser. */
  .vitrine-avec-barre {
    padding-bottom: calc(44px + 2 * var(--s-3) + 1px);
  }
}

/* --- Horaires (spec § 6) ----------------------------------------------- */
.vitrine-ouvert { color: var(--accent); font-weight: 600; }
.vitrine-ferme { color: var(--text-tertiary); }

.vitrine-horaires-table { border-collapse: collapse; margin: var(--s-4) 0; }
.vitrine-horaires-table th,
.vitrine-horaires-table td {
  text-align: left;
  padding: var(--s-1) var(--s-6) var(--s-1) 0;
  font-weight: 400;
}
.vitrine-horaires-table th { color: var(--text-secondary); }
.vitrine-jour-ferme { color: var(--text-tertiary); }

.vitrine-horaires-note {
  font-size: var(--t-small);
  color: var(--text-tertiary);
  margin-top: var(--s-3);
}


/* =====================================================================
   Refonte de l'accueil (E-209, 2026-09-29) — maquette
   docs/maquettes/vitrine-cars-top-deal/. La vitrine NE RESSEMBLE PAS à
   GarageManager (spec vitrine-themes D6) : typographie propre (Fraunces pour
   les titres, Outfit pour le texte), couleur = celle du garage (--accent posé
   sur <body> par base.html, déjà ramenée au contraste AA).
   ===================================================================== */
@font-face { font-family: 'Fraunces'; src: url('/static/fonts/Fraunces-Variable.woff2') format('woff2-variations'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Outfit'; src: url('/static/fonts/Outfit-Variable.woff2') format('woff2-variations'); font-weight: 100 900; font-display: swap; }

body.vitrine {
  --v-titre: 'Fraunces', Georgia, serif;
  --v-texte: 'Outfit', system-ui, sans-serif;
  font-family: var(--v-texte);
  font-size: 17px;
  line-height: 1.6;
  background: var(--bg-surface);
}
.vitrine h1, .vitrine h2 { font-family: var(--v-titre); font-weight: 500; letter-spacing: -0.015em; line-height: 1.12; color: var(--text-primary); }
.vitrine h2 { font-size: clamp(28px, 3.2vw, 42px); margin: 0 0 var(--s-6); }
.vitrine h3 { font-family: var(--v-texte); }

.vitrine-surtitre {
  margin: 0 0 var(--s-2);
  font-size: var(--t-caption);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.vitrine-bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 var(--s-6);
  border-radius: var(--r-full);
  border: 1.5px solid transparent;
  font-weight: 600;
  font-size: 16px;
  transition: transform var(--dur-fast) var(--ease-out);
}
.vitrine-bouton:hover { transform: translateY(-1px); }
.vitrine-bouton-accent { background: var(--accent); color: var(--text-on-accent); }
.vitrine-bouton-accent:hover { background: var(--accent-hover); color: var(--text-on-accent); }
.vitrine-bouton-ligne { border-color: var(--border-default); color: var(--text-primary); background: var(--bg-surface); }
.vitrine-bouton-clair { border-color: rgba(255, 255, 255, 0.25); color: var(--text-on-dark); }
.vitrine-bouton-clair:hover { color: var(--text-on-dark); border-color: rgba(255, 255, 255, 0.5); }

/* --- En-tête ---------------------------------------------------------- */
.vitrine-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-subtle);
}
.vitrine-header-inner {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  min-height: 72px;
}
.vitrine-brand { display: flex; align-items: center; gap: var(--s-3); color: var(--text-primary); font-weight: 600; font-size: 18px; }
.vitrine-brand:hover { color: var(--text-primary); }
.vitrine-logo { height: 36px; width: auto; }
/* Logo présent : le nom devient discret (le logo porte déjà la marque). */
.vitrine-brand-nom-secondaire { font-size: var(--t-small); color: var(--text-secondary); font-weight: 500; }
.vitrine-nav { display: flex; align-items: center; gap: var(--s-6); margin-left: auto; font-size: 15px; font-weight: 500; }
.vitrine-nav a { color: var(--text-secondary); }
.vitrine-nav a:hover { color: var(--accent); }
.vitrine-nav .vitrine-nav-cta { color: var(--accent); font-weight: 600; }
.vitrine-header-tel { font-weight: 600; color: var(--text-primary); white-space: nowrap; }
@media (max-width: 767px) {
  .vitrine-header-inner { flex-wrap: wrap; gap: var(--s-3) var(--s-5); padding-block: var(--s-3); min-height: 0; }
  .vitrine-nav { margin-left: 0; order: 3; width: 100%; gap: var(--s-5); overflow-x: auto; }
  .vitrine-header-tel { margin-left: auto; font-size: var(--t-small); }
  .vitrine-brand-nom-secondaire { display: none; }
}

/* --- Hero ------------------------------------------------------------- */
.vitrine-hero {
  padding: var(--s-16) 0;
  background: linear-gradient(180deg, var(--bg-app), var(--bg-surface) 85%);
}
.vitrine-hero-grille { display: grid; gap: var(--s-12); align-items: center; }
.vitrine-hero-avec-visuel .vitrine-hero-grille { grid-template-columns: 1fr 1.05fr; }
.vitrine-hero h1 { font-size: clamp(38px, 5vw, 62px); margin: var(--s-4) 0; max-width: 18ch; }
.vitrine-hero-surtitre { margin: var(--s-4) 0 0; font-size: var(--t-small); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); }
.vitrine-hero-intro { font-size: 19px; color: var(--text-secondary); max-width: 38ch; margin: 0; }
.vitrine-hero-lien { margin: var(--s-5) 0 0; font-weight: 600; }
.vitrine-hero-lien a { color: var(--accent); }
.vitrine-etat {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0;
  padding: var(--s-1) var(--s-3);
  border-radius: var(--r-full);
  background: var(--bg-subtle);
  color: var(--text-secondary);
  font-size: var(--t-small);
  font-weight: 600;
}
.vitrine-etat-ouvert { background: color-mix(in srgb, var(--success) 12%, transparent); color: var(--success); }
.vitrine-etat-ouvert::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--success); }
.vitrine-hero-visuel { position: relative; margin: 0; }
.vitrine-hero-visuel img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-xl); box-shadow: var(--sh-lg); }
.vitrine-vedette {
  position: absolute;
  left: calc(-1 * var(--s-6));
  bottom: var(--s-6);
  display: grid;
  gap: 2px;
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-lg);
  background: var(--bg-surface);
  box-shadow: var(--sh-lg);
}
.vitrine-vedette-pastille { font-size: var(--t-caption); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.vitrine-vedette strong { color: var(--text-primary); }
.vitrine-vedette-prix { font-family: var(--v-titre); font-size: 22px; font-weight: 600; color: var(--text-primary); }
@media (max-width: 900px) {
  .vitrine-hero { padding: var(--s-10) 0; }
  .vitrine-hero-avec-visuel .vitrine-hero-grille { grid-template-columns: 1fr; }
  .vitrine-vedette { position: relative; left: auto; bottom: auto; margin: calc(-1 * var(--s-8)) var(--s-4) 0; }
}

/* --- Bandeau de preuves ----------------------------------------------- */
.vitrine-preuve { border-block: 1px solid var(--border-subtle); }
.vitrine-preuve ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.vitrine-preuve li { margin: 0; padding: var(--s-6) var(--s-5); border-left: 1px solid var(--border-subtle); display: flex; flex-direction: column; gap: var(--s-1); }
.vitrine-preuve li:first-child { border-left: 0; padding-left: 0; }
.vitrine-preuve strong { font-family: var(--v-titre); font-size: 34px; font-weight: 500; line-height: 1.05; color: var(--text-primary); }
.vitrine-preuve .vitrine-preuve-marques strong { font-family: var(--v-texte); font-size: 17px; font-weight: 600; }
.vitrine-preuve span { font-size: var(--t-small); color: var(--text-secondary); }
@media (max-width: 640px) {
  .vitrine-preuve ul { grid-template-columns: 1fr 1fr; }
  .vitrine-preuve li { border-left: 0; padding-left: 0; }
}

/* --- Sections --------------------------------------------------------- */
.vitrine-main-accueil { display: block; }
.vitrine-bloc { padding: var(--s-16) 0; }
.vitrine-alt { background: var(--bg-app); }
.vitrine-bloc-tete { display: flex; align-items: end; justify-content: space-between; gap: var(--s-6); flex-wrap: wrap; margin-bottom: var(--s-8); }
.vitrine-bloc-tete h2 { margin: 0; }
.vitrine-avant .public-grid { margin: 0; }

/* Cartes véhicule (partial partagé avec le catalogue) : habillées ici. */
.vitrine .public-card { border-radius: var(--r-lg); transition: box-shadow var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out); }
.vitrine .public-card:hover { box-shadow: var(--sh-lg); transform: translateY(-3px); }
.vitrine .public-card-title { font-family: var(--v-texte); font-weight: 600; }
.vitrine .public-card-price { font-family: var(--v-titre); color: var(--text-primary); }

/* Pourquoi nous */
.vitrine-atouts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s-5); }
.vitrine-atout { margin: 0; padding: var(--s-6); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); background: var(--bg-surface); }
.vitrine-atout-icone { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-bottom: var(--s-4); border-radius: var(--r-md); background: var(--accent-soft); color: var(--accent); }
.vitrine-atout-icone svg { width: 22px; height: 22px; }
.vitrine-atout h3 { margin: 0 0 var(--s-1); font-size: 18px; font-weight: 600; color: var(--text-primary); }
.vitrine-atout p { margin: 0; font-size: 15px; color: var(--text-secondary); }

/* Services */
.vitrine-services-grille { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: var(--s-12); align-items: start; }
.vitrine-services-cta { margin: var(--s-4) 0 0; }
.vitrine-services-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s-8); }
.vitrine-services-liste li { margin: 0; padding: var(--s-4) 0; border-top: 1px solid var(--border-subtle); display: flex; flex-direction: column; gap: 2px; }
.vitrine-services-liste strong { color: var(--text-primary); font-weight: 600; }
.vitrine-services-liste span { font-size: 15px; color: var(--text-secondary); }
@media (max-width: 900px) {
  .vitrine-services-grille { grid-template-columns: 1fr; gap: var(--s-6); }
}
@media (max-width: 640px) {
  .vitrine-services-liste { grid-template-columns: 1fr; }
}

/* À propos */
.vitrine-apropos-grille { max-width: 760px; }
.vitrine-apropos-avec-photo { max-width: none; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-12); align-items: center; }
.vitrine-apropos-photo { margin: 0; }
.vitrine-apropos-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-xl); box-shadow: var(--sh-lg); }
.vitrine-apropos-texte p { margin: 0 0 var(--s-4); }
@media (max-width: 900px) {
  .vitrine-apropos-avec-photo { grid-template-columns: 1fr; gap: var(--s-8); }
}

/* Avis Google */
.vitrine-avis-carte { display: flex; align-items: center; gap: var(--s-8); flex-wrap: wrap; padding: var(--s-8); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); }
.vitrine-avis-note { margin: 0; font-family: var(--v-titre); color: var(--text-primary); }
.vitrine-avis-note strong { font-size: 52px; font-weight: 500; }
.vitrine-avis-note span { font-size: 22px; color: var(--text-secondary); }
.vitrine-avis-etoiles { display: flex; gap: 2px; margin: 0; color: var(--warning); }
.vitrine-avis-etoiles svg { width: 20px; height: 20px; }
.vitrine-avis-carte p { margin: 0; }
.vitrine-avis-carte .vitrine-bouton { margin-left: auto; }

/* Bandeau rendez-vous */
.vitrine-rdv-bandeau { padding-top: 0; }
.vitrine-rdv-carte { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--s-8); align-items: center; padding: var(--s-12); border-radius: var(--r-xl); background: var(--bg-inverse); color: var(--text-on-dark); }
.vitrine-rdv-carte h2 { color: var(--text-on-dark); margin-bottom: var(--s-3); }
.vitrine-rdv-carte p { margin: 0; font-size: 18px; opacity: 0.85; }
.vitrine-rdv-actions { display: flex; flex-direction: column; gap: var(--s-3); }
@media (max-width: 900px) {
  .vitrine-rdv-carte { grid-template-columns: 1fr; padding: var(--s-8) var(--s-6); }
}

/* Horaires + accès */
/* auto-fit : sans horaires, la carte adresse prend toute la largeur au lieu d'une demi-colonne vide. */
.vitrine-venir-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--s-12); align-items: start; }
.vitrine-venir .vitrine-horaires-table { width: 100%; }
.vitrine-venir .vitrine-horaires-table th,
.vitrine-venir .vitrine-horaires-table td { padding: var(--s-3) 0; border-bottom: 1px solid var(--border-subtle); }
.vitrine-venir .vitrine-horaires-table td { text-align: right; }
.vitrine-adresse { padding: var(--s-8); border-radius: var(--r-lg); background: var(--bg-surface); border: 1px solid var(--border-subtle); }
.vitrine-adresse p { margin: 0 0 var(--s-3); }
.vitrine-adresse-nom { font-weight: 600; color: var(--text-primary); }
.vitrine-lien-fort { font-weight: 600; color: var(--accent); }
@media (max-width: 900px) {
  .vitrine-venir-grille { grid-template-columns: 1fr; gap: var(--s-8); }
}

/* --- Pied de page ----------------------------------------------------- */
.vitrine-footer { margin-top: 0; padding: var(--s-12) 0; background: var(--bg-inverse); color: var(--text-tertiary); font-size: var(--t-small); }
.vitrine-footer-grille { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s-8); }
.vitrine-footer p { margin: 0 0 var(--s-2); }
.vitrine-footer a { color: var(--text-tertiary); }
.vitrine-footer a:hover { color: var(--text-on-dark); }
.vitrine-footer-nom { color: var(--text-on-dark); font-weight: 600; font-size: var(--t-body); }
@media (max-width: 640px) {
  .vitrine-footer-grille { grid-template-columns: 1fr; gap: var(--s-4); }
}