/* Template "Garage" — garages, concessions, mécanique.

   Parti pris : le seul template sombre par défaut (les trois autres sont
   clairs), registre "fiche technique d'atelier". Deux accents plutôt qu'un
   seul : --primary (couleur du client) porte les actions, --signal (ambre
   de signalisation, non surchargeable) est réservé aux statuts de stock.
   Ce double accent évite le cliché "fond noir + un accent acide".

   Le thème ne bascule pas en clair : l'identité sombre est le choix
   graphique du template, pas une préférence d'interface. */
:root {
  --primary: #e0202f;
  --primary-2: #0c0f13;
  --primary-soft: #2a161a;
  --signal: #f0b429;
  --bg: #12161c;
  --surface: #191f27;
  --border: #29313b;
  --text: #eef2f7;
  --font-heading: "Segoe UI", -apple-system, Roboto, Helvetica, Arial, sans-serif;
  --font-body: "Segoe UI", -apple-system, Roboto, Helvetica, Arial, sans-serif;
  --text-muted: #94a1b2;
}

* { box-sizing: border-box; }

h1, h2, h3 { font-family: var(--font-heading); }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
}

img { max-width: 100%; display: block; }

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 22px;
}

a { color: var(--primary); }

:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  background: var(--primary);
  color: #fff;
  padding: 10px 18px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 700;
  transition: top .2s ease;
}

.skip-link:focus-visible { top: 12px; }

/* Étiquette technique : petite capitale très espacée, précédée d'un tiret
   — le repère de section de ce template (Atelier a sa règle graduée,
   Studio son rail épinglé). */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 16px;
}

.tag::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--primary);
}

/* --- Header --- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(12, 15, 19, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.site-header-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 22px;
  max-width: 1200px;
  margin: 0 auto;
}

.site-brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-size: clamp(1rem, 3.2vw, 1.22rem);
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--text);
  text-decoration: none;
  margin-right: auto;
  white-space: nowrap;
}

.site-logo { height: 40px; width: auto; display: block; }

.site-nav { display: none; gap: 26px; }

.site-nav a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: color .2s ease;
}

.site-nav a:hover { color: var(--text); }

/* Le bouton d'appel reste visible sur mobile — c'est le geste principal
   sur un site de garage. Il se réduit à sa seule icône sous 620px pour ne
   pas écraser le nom du site (le numéro reste dans le menu déroulant). */
.site-header-cta { padding: 10px 13px; }
.site-header-cta span { display: none; }

@media (min-width: 620px) {
  .site-header-cta { padding: 12px 20px; }
  .site-header-cta span { display: inline; }
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 8px 10px;
  cursor: pointer;
  color: var(--text);
}

.site-nav-mobile {
  display: none;
  flex-direction: column;
  padding: 0 22px 14px;
  background: var(--primary-2);
  border-bottom: 1px solid var(--border);
}

.site-nav-mobile.open { display: flex; }

.site-nav-mobile a {
  padding: 12px 2px;
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid var(--border);
}

.site-nav-mobile a:last-child { border-bottom: none; }

@media (min-width: 860px) {
  .site-nav { display: flex; }
  .nav-toggle { display: none; }
  .site-nav-mobile { display: none !important; }
}

/* --- Ancres de section dans le menu --- */
.nav-sep { width: 1px; height: 14px; background: var(--border); flex: none; }
.site-nav .nav-anchor { font-weight: 600; letter-spacing: .08em; }
@media (max-width: 1199px) { .site-nav .nav-anchor, .nav-sep { display: none; } }

/* --- Sections --- */
section { padding: 78px 0; }
section.surface { background: var(--surface); }

h2 {
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0 0 10px;
}

.section-lead {
  color: var(--text-muted);
  max-width: 620px;
  margin: 0 0 40px;
}

/* --- Boutons --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 26px;
  border-radius: 4px;
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  font-size: .92rem;
  letter-spacing: .02em;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s ease, filter .22s ease;
}

.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -14px var(--primary); filter: brightness(1.08); }
.btn:active { transform: translateY(0); }

.btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}

.btn-ghost:hover { border-color: var(--primary); box-shadow: none; filter: none; }

/* --- Hero --- */
/* Trame technique en fond (deux dégradés répétés, pur CSS) : la référence
   au papier millimétré de l'atelier, sans aucune image à fournir. */
.hero {
  position: relative;
  padding: 108px 0 96px;
  background: var(--primary-2);
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 52px 52px;
  opacity: .9;
  mask-image: radial-gradient(ellipse 85% 75% at 68% 45%, #000 35%, transparent 80%);
}

.hero.hero-has-image {
  background-size: cover;
  background-position: center;
}

.hero.hero-has-image::before {
  background-image: none;
  background: linear-gradient(100deg, var(--primary-2) 18%, rgba(12,15,19,.72) 62%, rgba(12,15,19,.45));
  mask-image: none;
  opacity: 1;
}

.hero-inner { position: relative; z-index: 1; max-width: 660px; }

.hero h1 {
  font-size: clamp(2.5rem, 6vw, 4.2rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.035em;
  margin: 0 0 18px;
  animation: heroSlide .5s cubic-bezier(.22,1,.36,1) both;
}

.hero p {
  font-size: 1.08rem;
  color: var(--text-muted);
  margin: 0 0 30px;
  max-width: 52ch;
  animation: heroSlide .5s cubic-bezier(.22,1,.36,1) .08s both;
}

.hero .btn { animation: heroSlide .5s cubic-bezier(.22,1,.36,1) .16s both; }

@keyframes heroSlide {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- Services : grille à filets (aspect tableau technique) --- */
/* Les cellules sont séparées par un seul filet partagé (gap de 1px sur un
   fond de bordure) plutôt que par des cartes détachées — c'est ce qui
   donne l'allure "tableau de spécifications" propre à ce template. */
.service-table {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}

@media (min-width: 700px) { .service-table { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .service-table { grid-template-columns: repeat(3, 1fr); } }

.service-cell {
  background: var(--bg);
  padding: 32px 28px;
  transition: background .25s ease;
}

.service-cell:hover { background: var(--surface); }

.service-cell h3 { margin: 0 0 8px; font-size: 1.05rem; font-weight: 700; }
.service-cell p { margin: 0; color: var(--text-muted); font-size: .94rem; }

.cell-icon {
  width: 46px;
  height: 46px;
  border-radius: 4px;
  background: var(--primary-soft);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  transition: background .25s ease, color .25s ease;
}

.service-cell:hover .cell-icon { background: var(--primary); color: #fff; }

/* --- Fiches techniques : la signature du template --- */
/* Ligne de spécification à conducteur pointillé, comme sur une fiche
   constructeur. Réutilisée par les véhicules et par les formules. */
.specs { margin: 0; }

.spec-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 0;
  font-size: .88rem;
}

.spec-row .spec-key { color: var(--text-muted); flex: none; }
.spec-row .spec-dots { flex: 1; border-bottom: 1px dotted var(--border); }
.spec-row .spec-val { font-weight: 700; flex: none; }

/* --- Nos occasions --- */
.vehicle-grid {
  display: grid;
  gap: 22px;
  grid-template-columns: 1fr;
}

@media (min-width: 700px) { .vehicle-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .vehicle-grid { grid-template-columns: repeat(3, 1fr); } }

.vehicle-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .28s cubic-bezier(.22,1,.36,1), border-color .28s ease, box-shadow .28s ease;
}

.vehicle-card:hover {
  transform: translateY(-5px);
  border-color: var(--primary);
  box-shadow: 0 24px 44px -26px #000;
}

.vehicle-photo-wrap { position: relative; overflow: hidden; }

.vehicle-photo {
  width: 100%;
  height: 200px;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.22,1,.36,1);
}

.vehicle-card:hover .vehicle-photo { transform: scale(1.05); }

.vehicle-photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-2);
  color: var(--border);
}

.vehicle-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--signal);
  color: #241a04;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 3px;
}

.vehicle-body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.vehicle-body h3 { margin: 0 0 14px; font-size: 1.12rem; font-weight: 800; letter-spacing: -.01em; }

.vehicle-price {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: -.02em;
}

.vehicle-price span { font-size: .74rem; font-weight: 600; color: var(--text-muted); letter-spacing: .06em; }

.stock-empty {
  border: 1px dashed var(--border);
  border-radius: 6px;
  padding: 44px 24px;
  text-align: center;
  color: var(--text-muted);
}

/* --- About --- */
.about-grid {
  display: grid;
  gap: 44px;
  grid-template-columns: 1fr;
  align-items: center;
}

@media (min-width: 860px) { .about-grid { grid-template-columns: 1fr 1fr; } }

.about-image {
  width: 100%;
  height: 340px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--border);
}

/* --- Galerie --- */
.gallery-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 700px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }

.gallery-grid img {
  width: 100%;
  height: 210px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--border);
  cursor: zoom-in;
  transition: transform .35s cubic-bezier(.22,1,.36,1), border-color .35s ease;
}

.gallery-grid img:hover { transform: scale(1.03); border-color: var(--primary); }

/* --- Témoignages --- */
.testimonial-grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 820px) { .testimonial-grid { grid-template-columns: repeat(3, 1fr); } }

.testimonial-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: 4px;
  padding: 24px;
}

.testimonial-rating { color: var(--signal); letter-spacing: 2px; margin-bottom: 10px; font-size: .9rem; }
.testimonial-text { margin: 0 0 12px; }
.testimonial-name { margin: 0; color: var(--text-muted); font-size: .85rem; font-weight: 600; }

/* --- FAQ --- */
.faq-list { display: flex; flex-direction: column; max-width: 820px; border-top: 1px solid var(--border); }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item summary { cursor: pointer; padding: 18px 0; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--primary); font-weight: 800; flex: none; }
.faq-item[open] summary::after { content: "–"; }
.faq-item p { margin: 0 0 20px; color: var(--text-muted); }

/* --- Équipe --- */
.team-grid { display: grid; gap: 22px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 820px) { .team-grid { grid-template-columns: repeat(4, 1fr); } }

.team-card { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.team-photo { width: 100%; aspect-ratio: 1; object-fit: cover; }
.team-body { padding: 16px 18px 18px; }
.team-card h3 { margin: 0 0 2px; font-size: 1rem; font-weight: 700; }
.team-role { margin: 0 0 8px; color: var(--primary); font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.team-text { margin: 0; color: var(--text-muted); font-size: .88rem; }

/* --- Tarifs --- */
.pricing-grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 820px) { .pricing-grid { grid-template-columns: repeat(3, 1fr); } }

.pricing-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
}

.pricing-card h3 { margin: 0; font-size: .8rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); }
.pricing-price { font-size: 1.9rem; font-weight: 800; letter-spacing: -.03em; margin: 10px 0 18px; }
.pricing-card .specs { margin-bottom: 22px; }
.pricing-card .btn { margin-top: auto; justify-content: center; }

/* --- Réseaux sociaux : carrousel de logos --- */
/* Boucle sans à-coup : deux groupes identiques et une piste translatée de
   -50%. Le masque en dégradé estompe les deux bords, pour que les logos
   entrent et sortent du cadre au lieu d'y apparaître d'un coup.
   L'animation se met en pause au survol ET au focus clavier, sinon les
   liens seraient impossibles à viser. */
.social-marquee {
  overflow: hidden;
  /* Padding vertical indispensable : la piste est en `overflow: hidden` pour
     la boucle, et le `translateY` negatif du survol faisait sortir le haut
     des ronds de la zone visible — ils apparaissaient coupes. */
  padding: 12px 0;
  margin-top: 30px;
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.social-track {
  display: flex;
  width: max-content;
  animation: socialScroll 36s linear infinite;
}

.social-marquee:hover .social-track,
.social-marquee:focus-within .social-track { animation-play-state: paused; }

.social-group { display: flex; gap: 14px; padding-right: 14px; flex: none; }

@keyframes socialScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) { .social-track { animation: none; } }

.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 5px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-muted);
  text-decoration: none;
  transition: border-color .25s ease, transform .25s cubic-bezier(.22,1,.36,1);
}

.social-link:hover { border-color: var(--primary); transform: translateY(-3px); }

.social-logo { flex: none; display: block; }
.social-logo.is-brand { color: var(--brand); }

/* --- Contact --- */
.contact-grid { display: grid; gap: 36px; grid-template-columns: 1fr; }
@media (min-width: 860px) { .contact-grid { grid-template-columns: .85fr 1.15fr; } }

.contact-info { display: flex; flex-direction: column; gap: 2px; }

.contact-info-item {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}

.contact-info-item:first-child { border-top: 1px solid var(--border); }

.contact-icon {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 4px;
  background: var(--primary-soft);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-info-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.contact-label {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.contact-value { color: var(--text); text-decoration: none; font-weight: 600; }
.contact-value:hover { color: var(--primary); }

.contact-form { display: flex; flex-direction: column; gap: 14px; }

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 14px 16px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--primary-2);
  color: var(--text);
  font: inherit;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder { color: var(--text-muted); }

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus { outline: none; border-color: var(--primary); }

.contact-form textarea { min-height: 132px; resize: vertical; }

.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
/* Formulaire sombre : icône du calendrier claire (demande de rendez-vous). */
.contact-form input[type=date] { color-scheme: dark; }

.form-notice {
  background: var(--surface);
  border: 1px solid var(--primary);
  border-radius: 6px;
  padding: 22px;
}

/* --- Texte générique --- */
.text-block { max-width: 760px; }
.text-block p { color: var(--text-muted); }
/* Les paragraphes saisis dans le back-office sont des retours à la ligne :
   sans `pre-line`, des mentions légales entières tenaient en un seul pavé. */
.text-block p { white-space: pre-line; }

/* --- Erreur --- */
.error-page { padding: 110px 0; text-align: center; }
.error-page .error-code { color: var(--primary); font-weight: 800; letter-spacing: .18em; margin: 0 0 10px; }
.error-page h1 { margin: 0 0 12px; }
.error-page p { color: var(--text-muted); margin: 0 0 28px; }

/* --- Lightbox --- */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(6, 8, 11, .95);
  align-items: center;
  justify-content: center;
}

.lightbox.open { display: flex; }

.lightbox-img { max-width: 88vw; max-height: 84vh; object-fit: contain; border-radius: 6px; }

.lightbox-close,
.lightbox-nav {
  position: absolute;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  width: 44px;
  height: 44px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-close:hover,
.lightbox-nav:hover { border-color: var(--primary); color: var(--primary); }

.lightbox-close { top: 22px; right: 22px; }
.lightbox-nav { top: 50%; transform: translateY(-50%); }
.lightbox-prev { left: 22px; }
.lightbox-next { right: 22px; }

/* --- Footer --- */
/* Deux zones : le client en haut, la signature B-In-Tech en dessous, separees
   par un filet. Le bloc "Realisation" est volontairement distinct pour
   qu'un visiteur ne confonde jamais le telephone de B-In-Tech avec celui du
   commerce qu'il consulte. */
.site-footer {
  background: var(--primary-2);
  color: var(--text-muted);
  padding: 46px 0 22px;
  border-top: 3px solid var(--primary);
}

.site-footer a { color: inherit; text-decoration: none; transition: color .2s ease; }
.site-footer a:hover { color: var(--primary); }

.site-footer-top {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 26px;
}

.site-footer-brand strong { font-size: 1.12rem; color: var(--text); }
.site-footer-logo { height: 42px; width: auto; }

.site-footer-social { display: flex; gap: 10px; flex-wrap: wrap; }

.site-footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 5px;
  background: var(--surface);
  transition: background .22s ease, color .22s ease, transform .22s ease;
}

.site-footer-social a:hover { background: var(--primary); color: #fff; transform: translateY(-2px); }

.site-footer-maker {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 22px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.site-footer-maker-logo {
  height: 58px;
  width: auto;
  border-radius: 10px;
  flex: none;
}

.site-footer-made { margin: 0 0 5px; font-size: .96rem; color: var(--text); }
.site-footer-made a { color: var(--primary); font-weight: 700; }
.site-footer-made .flag { vertical-align: -2px; border-radius: 2px; margin: 0 1px; }

.site-footer-maker-meta {
  margin: 0;
  font-size: .84rem;
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  align-items: center;
}

.site-footer-legal-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  justify-content: space-between;
  font-size: .82rem;
  padding-top: 18px;
}

.site-footer-legal { display: flex; gap: 8px; flex-wrap: wrap; }
.site-footer-legal a { text-decoration: underline; }

/* --- Retour en haut --- */
.back-to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 60;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  box-shadow: 0 12px 26px -14px rgba(0,0,0,.7);
  transition: opacity .25s ease, transform .25s ease, visibility .25s, filter .2s ease;
}

.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { filter: brightness(1.1); }

/* Tant que le bandeau cookies est affiche, le bouton remonte pour ne pas
   recouvrir son bouton "Compris" sur les petits ecrans. */
body.has-cookie-banner .back-to-top { bottom: 104px; }

@media (min-width: 700px) {
  body.has-cookie-banner .back-to-top { bottom: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .back-to-top { transition: none; }
}

/* --- Bandeau cookies --- */
.cookie-banner {
  position: fixed;
  left: 20px;
  right: 20px;
  bottom: 20px;
  z-index: 50;
  max-width: 560px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  box-shadow: 0 20px 40px -16px #000;
}

.cookie-banner p { margin: 0; font-size: .84rem; flex: 1; min-width: 200px; color: var(--text-muted); }
.cookie-banner a { color: var(--primary); }

.cookie-banner button {
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 9px 20px;
  font-weight: 700;
  cursor: pointer;
  font: inherit;
}

/* --- Apparition au défilement --- */
/* Cadence sèche et rapide, sans rebond : le registre technique du template
   (Commerce rebondit, Studio prend son temps). Les enfants de grille
   utilisent `translate` et non `transform`, pour ne jamais écraser les
   transforms de survol des cartes (voir CLAUDE.md). */
.js section:not(.hero) {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .45s cubic-bezier(.22,1,.36,1), transform .45s cubic-bezier(.22,1,.36,1);
}

.js section:not(.hero).is-visible { opacity: 1; transform: translateY(0); }

.js section:not(.hero) :is(.service-table, .vehicle-grid, .gallery-grid, .testimonial-grid, .team-grid, .pricing-grid, .faq-list) > * {
  opacity: 0;
  translate: 0 14px;
  transition: opacity .38s ease, translate .38s cubic-bezier(.22,1,.36,1);
}

.js section.is-visible :is(.service-table, .vehicle-grid, .gallery-grid, .testimonial-grid, .team-grid, .pricing-grid, .faq-list) > * {
  opacity: 1;
  translate: 0 0;
}

.js section.is-visible :is(.service-table, .vehicle-grid, .gallery-grid, .testimonial-grid, .team-grid, .pricing-grid, .faq-list) > *:nth-child(2) { transition-delay: .05s; }
.js section.is-visible :is(.service-table, .vehicle-grid, .gallery-grid, .testimonial-grid, .team-grid, .pricing-grid, .faq-list) > *:nth-child(3) { transition-delay: .1s; }
.js section.is-visible :is(.service-table, .vehicle-grid, .gallery-grid, .testimonial-grid, .team-grid, .pricing-grid, .faq-list) > *:nth-child(4) { transition-delay: .15s; }
.js section.is-visible :is(.service-table, .vehicle-grid, .gallery-grid, .testimonial-grid, .team-grid, .pricing-grid, .faq-list) > *:nth-child(5) { transition-delay: .2s; }
.js section.is-visible :is(.service-table, .vehicle-grid, .gallery-grid, .testimonial-grid, .team-grid, .pricing-grid, .faq-list) > *:nth-child(6) { transition-delay: .25s; }
.js section.is-visible :is(.service-table, .vehicle-grid, .gallery-grid, .testimonial-grid, .team-grid, .pricing-grid, .faq-list) > *:nth-child(n+7) { transition-delay: .3s; }

@media (prefers-reduced-motion: reduce) {
  .js section:not(.hero),
  .js section:not(.hero) :is(.service-table, .vehicle-grid, .gallery-grid, .testimonial-grid, .team-grid, .pricing-grid, .faq-list) > * {
    opacity: 1 !important;
    transform: none !important;
    translate: none !important;
    transition: none !important;
  }
  .hero h1, .hero p, .hero .btn { animation: none !important; }
}


/* --- Lien vers la fiche Google --- */
/* Les avis sont saisis a la main ; ce lien permet au visiteur de verifier
   la source, et le clic renforce le referencement local du client. */
.google-review-link {
  margin: 26px 0 0;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: .92rem;
}

.google-review-link strong { font-weight: 800; }
.google-review-link a { font-weight: 600; }

/* --- Marques travaillées : carrousel de logos --- */
/* Même mécanique que le carrousel des réseaux : deux groupes identiques et
   une piste translatée de -50%, donc une boucle sans à-coup. Le padding
   vertical est indispensable — la piste est en `overflow: hidden` et le
   survol soulève les pastilles, dont le haut serait sinon rogné. */
.brand-marquee {
  overflow: hidden;
  margin-top: 30px;
  padding: 12px 0;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.brand-track {
  display: flex;
  width: max-content;
  animation: brandScroll 40s linear infinite;
}

.brand-marquee:hover .brand-track { animation-play-state: paused; }

.brand-group { display: flex; align-items: center; gap: 14px; padding-right: 14px; flex: none; }

@keyframes brandScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) { .brand-track { animation: none; } }

/* Pastille claire même sur le template sombre : ces logos sont des marques
   déposées en couleurs officielles, et plusieurs contiennent du blanc
   (BMW, Triumph, Benelli, Harley) qui disparaîtrait sur fond sombre. */
.brand-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 178px;
  height: 122px;
  padding: 16px 20px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: #fff;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.brand-item:hover {
  transform: translateY(-3px);
  border-color: var(--primary);
  box-shadow: 0 14px 26px -16px rgba(0,0,0,.45);
}

/* Les fichiers arrivent déjà équilibrés par surface encrée : ce cadre ne
   sert que de garde-fou, il ne redimensionne presque jamais. */
.brand-logo {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.brand-item-word {
  font-weight: 800;
  font-size: .95rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #1f2430;
  text-align: center;
  line-height: 1.2;
}

/* --- Fiche véhicule (page dédiée) --- */
/* `object-fit: contain` partout sur les véhicules : une voiture ou une moto
   rognée par un cadrage automatique est inexploitable pour un acheteur. On
   accepte donc des marges sur les photos au format inhabituel. */
.vehicle-detail { padding-top: 40px; }

.vehicle-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
  margin-bottom: 26px;
}

.vehicle-detail-grid {
  display: grid;
  gap: 36px;
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 940px) {
  .vehicle-detail-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 48px; }
}

.vehicle-main-photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--primary-2);
  padding: 0;
  cursor: zoom-in;
  overflow: hidden;
  position: relative;
}

.vehicle-main-photo img { width: 100%; height: 100%; object-fit: contain; }

.vehicle-zoom-hint {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(0,0,0,.62);
  color: #fff;
  font-size: .78rem;
  font-weight: 600;
}

.vehicle-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.vehicle-thumb {
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--primary-2);
  cursor: pointer;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  transition: border-color .2s ease, transform .2s ease;
}

.vehicle-thumb img { width: 100%; height: 100%; object-fit: contain; }
.vehicle-thumb:hover { transform: translateY(-2px); }
.vehicle-thumb.is-active { border-color: var(--primary); border-width: 2px; }

.vehicle-summary h1 {
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  margin: 10px 0 6px;
  letter-spacing: -.02em;
}

.vehicle-detail-price {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 800;
  color: var(--primary);
  margin: 0 0 22px;
  letter-spacing: -.02em;
}

.vehicle-detail-price span { font-size: .7rem; font-weight: 600; color: var(--text-muted); letter-spacing: .06em; }

.vehicle-options { margin: 24px 0; }
.vehicle-options h2 { font-size: 1rem; margin: 0 0 6px; }
.vehicle-options p { margin: 0; color: var(--text-muted); }

.vehicle-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* Cartes de stock agrandies et jamais rognées : le véhicule doit être
   entièrement visible dès la liste, c'est le premier argument de vente. */
.vehicle-photo {
  height: 260px !important;
  object-fit: contain !important;
  background: var(--primary-2);
}

.vehicle-card { text-decoration: none; color: inherit; display: block; }

/* ===========================================================================
   Personnalisation par site — voir app/site_theme.py
   Les couleurs et les polices passent par des variables CSS ; les rayons et
   la densité pilotent trop de règles pour tenir dans une variable, ils
   passent donc par une classe sur <body>. Ces règles sont volontairement
   en fin de fichier : elles doivent gagner sur les valeurs du template.
   =========================================================================== */

/* --- Rayons --- */
body.corners-sharp :is(.card, .testimonial-card, .pricing-card, .vehicle-card,
  .team-card, .faq-item, .btn, .btn-pill, .btn-outline, .btn-ghost, .form-notice,
  .service-table, .contact-info-card, .contact-form input, .contact-form select, .contact-form textarea,
  .gallery-grid img, .about-image, .team-photo, .about-frame, .about-grid img,
  .vehicle-photo, .cookie-banner) { border-radius: 0; }

body.corners-sharp :is(.social-link, .card-icon, .cell-icon, .contact-icon,
  .vehicle-badge, .skip-link) { border-radius: 2px; }

body.corners-soft :is(.card, .testimonial-card, .pricing-card, .vehicle-card,
  .team-card, .faq-item, .btn, .btn-outline, .btn-ghost, .form-notice,
  .service-table, .contact-info-card, .contact-form input, .contact-form select, .contact-form textarea,
  .gallery-grid img, .about-image, .team-photo, .about-frame, .about-grid img,
  .vehicle-photo, .cookie-banner) { border-radius: 10px; }

body.corners-soft :is(.social-link, .card-icon, .cell-icon, .contact-icon) { border-radius: 12px; }

body.corners-round :is(.card, .testimonial-card, .pricing-card, .vehicle-card,
  .team-card, .faq-item, .form-notice, .service-table, .contact-info-card,
  .contact-form input, .contact-form select, .contact-form textarea, .gallery-grid img, .about-image,
  .team-photo, .about-frame, .about-grid img, .vehicle-photo,
  .cookie-banner) { border-radius: 24px; }

body.corners-round :is(.btn, .btn-pill, .btn-outline, .btn-ghost, .social-link,
  .card-icon, .cell-icon, .contact-icon, .skip-link) { border-radius: 999px; }

/* --- Densité --- */
/* `:not(.hero)` est indispensable : le hero gère son propre rythme vertical
   (celui d'Atelier est même à `padding: 0` pour sa photo à fond perdu), et
   ces règles ont une spécificité plus forte que `.hero`. */
body.density-compact section:not(.hero) { padding-block: 44px; }
body.density-spacious section:not(.hero) { padding-block: 108px; }

/* Sur téléphone, le bandeau cookies passe sur deux lignes et devient plus
   haut que le décalage prévu : le bouton « retour en haut » en recouvrait le
   texte. Il attend simplement que le bandeau soit fermé (un seul tap). */
@media (max-width: 699px) {
  body.has-cookie-banner .back-to-top { opacity: 0; pointer-events: none; }
}

/* `hidden` doit toujours masquer. Le bandeau cookies est en `display: flex` :
   cette règle l'emportait sur l'attribut `hidden`, et « Compris » ne fermait
   rien (le choix était pourtant bien enregistré). Corrigé le 2026-09-28. */
[hidden] { display: none !important; }

/* --- Formulaire de contact : erreur, confidentialité, libellés (2026-09-28) ---
   Le balisage est commun aux 5 templates (sites/_contact_form.html). Les
   libellés existent pour les lecteurs d'écran, qui ne lisent pas toujours un
   placeholder ; à l'écran, le placeholder suffit. */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.form-error {
  margin: 0; padding: 12px 16px; border-left: 3px solid #dc2626;
  background: rgba(220, 38, 38, .1); color: inherit; font-size: .95rem; line-height: 1.5;
}
.form-privacy { margin: 0; font-size: .82rem; opacity: .75; line-height: 1.5; }
.form-privacy a { color: inherit; text-decoration: underline; }

/* ===========================================================================
   Bandeau d'annonce, horaires, plan d'accès (2026-09-28)
   Balisage commun : sites/_announcement.html, _hours.html, _map.html.
   =========================================================================== */
.announce { background: var(--announce-bg); color: var(--announce-ink); font-size: .92rem; position: relative; z-index: 21; }
.announce-inner {
  max-width: 1200px; margin: 0 auto; padding: 10px 22px;
  display: flex; align-items: center; gap: 12px;
}
.announce-icon {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 28px; height: 28px; border-radius: 50%; background: rgba(127, 127, 127, .28); color: inherit;
}
.announce-promo .announce-icon { background: var(--primary); color: #fff; }
.announce-text { margin: 0; flex: 1; line-height: 1.45; }
.announce-text a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; margin-left: 4px; }
.announce-close {
  display: none; flex: none; align-items: center; justify-content: center; width: 32px; height: 32px;
  border: 0; border-radius: 8px; background: transparent; color: inherit; opacity: .7; cursor: pointer;
}
.js .announce-close { display: inline-flex; }
.announce-close:hover { opacity: 1; background: rgba(127, 127, 127, .2); }
.announce-promo { box-shadow: inset 0 -3px 0 var(--primary); }
.announce-alert { box-shadow: inset 0 -3px 0 #f59e0b; }
.announce-alert .announce-icon { background: #f59e0b; color: #1f2430; }

.hours-card {
  background: var(--hours-bg, var(--surface)); border: 1px solid var(--border);
  border-radius: var(--feature-radius); padding: 24px 26px; container-type: inline-size;
}
.hours-layout { display: grid; gap: 18px; }
.hours-summary { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.hours-clock {
  display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px;
  border-radius: 50%; color: var(--primary); background: color-mix(in srgb, var(--primary) 14%, transparent);
}
@container (min-width: 720px) {
  .hours-layout { grid-template-columns: minmax(200px, .8fr) minmax(0, 1.5fr); gap: 44px; align-items: center; }
  .hours-state { font-size: 1.02rem; }
}
.hours-state {
  display: inline-flex; align-items: center; gap: 9px; margin: 0; padding: 7px 14px;
  border-radius: 999px; font-weight: 700; font-size: .95rem; color: var(--text);
  background: rgba(22, 163, 74, .14);
}
.hours-state.is-closed { background: rgba(220, 38, 38, .12); }
.hours-dot { width: 9px; height: 9px; border-radius: 50%; background: #16a34a; flex: none; }
.hours-state.is-closed .hours-dot { background: #dc2626; }
.hours-state.is-open .hours-dot { box-shadow: 0 0 0 0 rgba(22, 163, 74, .5); animation: hoursPulse 2.2s ease-out infinite; }
@keyframes hoursPulse { 70% { box-shadow: 0 0 0 7px rgba(22, 163, 74, 0); } 100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); } }
.hours-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.hours-table th, .hours-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: left; font-weight: 500; }
.hours-table td { text-align: right; }
.hours-table tr:last-child th, .hours-table tr:last-child td { border-bottom: 0; }
.hours-table tr.is-closed td { color: var(--text-muted); }
/* Un créneau ne se coupe jamais ; sur téléphone, un créneau par ligne. */
.hours-range { white-space: nowrap; }
.hours-range + .hours-range::before { content: " · "; }
@media (max-width: 560px) {
  .hours-range { display: block; }
  .hours-range + .hours-range::before { content: none; }
}
.hours-table tr.is-today th, .hours-table tr.is-today td { font-weight: 800; background: color-mix(in srgb, var(--primary) 10%, transparent); }
.hours-table tr.is-today th { box-shadow: inset 3px 0 0 var(--primary); }
.hours-note, .hours-empty { margin: 0; color: var(--text-muted); font-size: .93rem; white-space: pre-line; }
/* Fermeture exceptionnelle annoncée dans le bloc horaires (2026-10-01). */
.hours-closure {
  margin: 0; padding: 8px 12px; border-radius: 10px; font-size: .93rem; line-height: 1.45; color: var(--text);
  background: rgba(245, 158, 11, .14); box-shadow: inset 3px 0 0 #f59e0b;
}
/* Un libellé du menu ne se coupe jamais en deux lignes (« À / propos »). */
.site-nav a { white-space: nowrap; }

.map-card {
  display: grid; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--feature-radius); overflow: hidden;
}
.map-card.has-image { grid-template-columns: minmax(0, 1.7fr) minmax(260px, 1fr); }
.map-frame { position: relative; min-height: 300px; background: #e8e8e3; }
.map-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* Repère posé au centre exact de la carte (la carte est centrée sur
   l'adresse, et `object-fit: cover` rogne des deux côtés à parts égales). */
.map-pin {
  position: absolute; left: 50%; top: 50%; translate: -50% -100%; color: var(--primary);
  filter: drop-shadow(0 5px 6px rgba(0, 0, 0, .35)); line-height: 0;
}
.map-credit {
  position: absolute; right: 8px; bottom: 6px; padding: 2px 7px; border-radius: 4px; font-size: 11px;
  background: rgba(255, 255, 255, .88); color: #333; text-decoration: none;
}
.map-info { padding: 26px 28px; display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.map-address { display: flex; gap: 10px; margin: 0; font-weight: 700; font-size: 1.05rem; line-height: 1.45; }
.map-address-icon { color: var(--primary); flex: none; margin-top: 2px; line-height: 0; }
.map-access { margin: 0; color: var(--text-muted); white-space: pre-line; }
.map-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 4px; }
.map-actions svg { flex: none; }
.map-link { color: var(--text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 820px) {
  .map-card.has-image { grid-template-columns: 1fr; }
  .map-frame { min-height: 0; aspect-ratio: 2 / 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hours-state.is-open .hours-dot { animation: none; }
}
:root { --announce-bg: #0b0e12; --announce-ink: var(--text); --announce-accent: var(--primary); --feature-radius: 6px; }
.announce { border-bottom: 1px solid var(--border); }
.hours-table th, .hours-table td { border-bottom-style: dashed; }
.hours-table th { text-transform: uppercase; letter-spacing: .06em; font-size: .85rem; }
.map-frame img { filter: invert(.9) hue-rotate(180deg) brightness(.95) contrast(.9); }
.map-frame { background: #1d232b; }

/* --- Menu ajusté à son contenu (static/sites/nav-fit.js, 2026-09-28) ---
   Le script retire les ancres (`nav-compact`) puis passe au bouton menu
   (`nav-collapsed`) quand la rangée de l'en-tête ne tient pas ; le temps
   d'une mesure, `nav-measure` interdit à tout élément de rétrécir, pour lire
   la largeur naturelle. Le logo ne se déforme jamais : s'il doit céder de la
   place (nom très long sur téléphone), il réduit en gardant ses proportions. */
.site-logo { object-fit: contain; object-position: left center; }
.site-header-cta { white-space: nowrap; }
.site-header-inner.nav-measure > *,
.site-header-inner.nav-measure .site-brand > * { flex-shrink: 0; }
.site-header.nav-compact .site-nav .nav-anchor,
.site-header.nav-compact .site-nav .nav-sep { display: none; }
.site-header.nav-collapsed .site-nav { display: none; }
.site-header.nav-collapsed .nav-toggle { display: inline-flex; }
.site-header.nav-collapsed .site-nav-mobile.open { display: flex !important; }

/* ===========================================================================
   Variantes de mise en page (block_layouts.py, 2026-09-28)
   La signature n'a aucune classe : ces règles ne décrivent que les écarts.
   Communes aux 4 templates : static/sites/variety.css.
   =========================================================================== */

/* --- Hero côte à côte : la trame millimétrée revient derrière le texte, et
   la photo se range à droite dans un cadre à liseré, comme une vue de fiche
   technique. --- */
.hero.hero-has-image.v-split { padding-bottom: 40px; }
.hero.hero-has-image.v-split::before {
  background: none;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 52px 52px;
  opacity: .9;
  mask-image: radial-gradient(ellipse 70% 80% at 22% 45%, #000 35%, transparent 80%);
}
.hero.hero-has-image.v-split > .hero-media {
  position: relative;
  inset: auto;
  z-index: 0;
  height: 240px;
  margin: 40px 22px 0;
  border: 1px solid var(--border);
  border-radius: var(--feature-radius);
}
@media (min-width: 900px) {
  .hero.hero-has-image.v-split { padding: 108px 0 96px; }
  .hero.hero-has-image.v-split .hero-inner { max-width: min(600px, calc(100% - min(42vw, 520px) - 56px)); }
  .hero.hero-has-image.v-split > .hero-media {
    position: absolute;
    top: 56px;
    bottom: 56px;
    right: max(22px, calc((100vw - 1200px) / 2 + 22px));
    width: min(42vw, 520px);
    height: auto;
    margin: 0;
  }
}

/* --- Hero centré --- */
.hero.hero-has-image.v-center::before { background: color-mix(in srgb, var(--primary-2) 80%, transparent); }
.hero.v-center .hero-inner { margin: 0 auto; text-align: center; }
.hero.v-center .hero-inner p { margin-inline: auto; }

.hero.v-compact { padding: 64px 0 56px; }
.hero.v-compact h1 { font-size: clamp(2rem, 4.6vw, 3rem); }
.hero.v-compact p { margin-bottom: 22px; }

/* --- Prestations en variante : angles presque vifs, vedette à l'accent
   (template toujours sombre : une tuile claire y serait un trou). Préfixées
   par l'id de la section : variety.css, chargée après, gagnerait sinon à
   spécificité égale. --- */
#services .svc-icon { border-radius: 4px; }
#services .svc-item h3 { font-weight: 700; }
@media (min-width: 760px) {
  #services .svc-bento .svc-item:first-child { background: var(--primary); color: #fff; }
  #services .svc-bento .svc-item:first-child .svc-icon { background: rgba(0, 0, 0, .22); }
  #services .svc-bento .svc-item:first-child p { color: rgba(255, 255, 255, .86); }
}

/* ---------------------------------------------------------------------------
   Nouveaux blocs (règles communes dans variety.css) : registre fiche
   technique — étiquettes espacées, angles vifs, trait rouge de repère.
   --------------------------------------------------------------------------- */
.blk .stat { position: relative; border-top: 1px solid var(--border); padding-top: 22px; }
.blk .stat::before { content: ""; position: absolute; left: 0; top: -1px; width: 36px; height: 3px; background: var(--primary); }
.blk .stat-label { font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--text-muted); }
.blk .step-number { border-radius: 4px; font-family: Consolas, "Courier New", monospace; }
.blk .blk-area li { border-radius: 4px; background: transparent; font-size: .92rem; letter-spacing: .02em; }
.blk .price-group h3 { border-bottom-width: 1px; font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; color: var(--text-muted); }
.blk .price-value { font-family: Consolas, "Courier New", monospace; color: var(--text); }
.blk .ba-tag { border-radius: 3px; }

/* ---------------------------------------------------------------------------
   Menu et en-tête (règles communes dans variety.css, voir app/site_menu.py) :
   l'en-tête fumé du template, et un bandeau d'infos en registre « fiche
   technique » — chasse fixe, capitales, plus sombre que l'en-tête.
   --------------------------------------------------------------------------- */
.site-header { --header-bg: rgb(12, 15, 19); --header-ink: var(--text); --header-line: var(--border); --header-max: 1200px; }
.topbar { --topbar-bg: #080a0d; --topbar-ink: var(--text-muted); border-bottom: 1px solid var(--border); }
.topbar-inner { font-family: Consolas, "Courier New", monospace; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; }
/* Le numéro et l'état du jour tiennent sur une ligne jusqu'à 360 px. */
@media (max-width: 419px) { .topbar-inner { font-size: .72rem; letter-spacing: .01em; gap: 6px 12px; } }