/* =========================================================================
   BRAND — Auto Motor (Épaviste Pays Basque)
   Compléments propres au projet : signature visuelle tirée du logo
   (liseré tricolore basque, bandes diagonales rouges, barre d'appel mobile).
   Ne redéfinit jamais une valeur en dur : tout passe par les tokens/preset.
   ========================================================================= */

/* --- Liseré tricolore basque : détail signature récurrent -------------- */
.basque-bar {
  height: 8px;
  background: linear-gradient(
    to bottom,
    var(--b-500) 0 34%,
    var(--n-0) 34% 66%,
    var(--ok-500) 66% 100%
  );
}

/* --- En-tête : fond plein, pas de verre dépoli -------------------------- */
/* Le logo est un aplat noir mat, pas du glassmorphism : on remplace le
   fond translucide + backdrop-filter du composant générique par un fond
   plein. Effet de bord : backdrop-filter crée un bloc de confinement pour
   les descendants en position fixed — sans ce correctif, le panneau de
   navigation mobile (position fixed) se calait sur la hauteur du header
   au lieu de la fenêtre. */
.c-header {
  background: var(--surface);
  backdrop-filter: none;
}
/* Logo et menu toujours sur une seule ligne : sous 1024px, le menu passe en ☰ */
.c-header > .split { flex-wrap: nowrap; }
.c-nav { white-space: nowrap; }

/* --- Bandes diagonales rouges (motif "AUTO" du logo) -------------------- */
.stripes {
  display: inline-flex;
  gap: 4px;
  align-items: flex-end;
  height: 0.9em;
}
.stripes span {
  display: block;
  width: 4px;
  height: 100%;
  background: var(--brand);
  transform: skewX(-18deg);
}
.stripes span:nth-child(2) { opacity: .7; }
.stripes span:nth-child(3) { opacity: .45; }

.eyebrow-row { display: flex; align-items: center; gap: var(--space-xs); }

/* --- Logo / lockup d'en-tête -------------------------------------------- */
.brand-lockup { display: flex; align-items: center; gap: var(--space-xs); text-decoration: none; }
.brand-lockup__icon {
  width: 44px; height: 44px; border-radius: var(--radius-full);
  border: 2px solid var(--brand); object-fit: cover; flex-shrink: 0;
  background: #000;
}
.brand-lockup__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-lockup__word {
  font-family: var(--font-display); font-size: var(--step-1);
  letter-spacing: 0.01em; color: var(--text); text-transform: uppercase;
}
.brand-lockup__word b { color: var(--brand); font-weight: inherit; }
.brand-lockup__tag {
  font-size: var(--step--2); letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--ok-500); font-weight: 600;
}

/* --- Barre d'appel fixe mobile : le bloc le plus rentable du site ------- */
.c-callbar {
  display: none;
  position: fixed; inset-inline: 0; bottom: 0; z-index: var(--z-toast);
  padding: var(--space-xs) var(--gutter);
  padding-bottom: calc(var(--space-xs) + env(safe-area-inset-bottom));
  background: var(--brand); color: var(--text-on-brand);
  align-items: center; justify-content: center; gap: var(--space-2xs);
  font-weight: 700; text-decoration: none; font-size: var(--step-1);
  box-shadow: 0 -6px 20px oklch(0% 0 0 / .35);
}
@media (max-width: 800px) {
  .c-callbar { display: flex; }
  body { padding-bottom: calc(var(--header-h) + env(safe-area-inset-bottom)); }
}

/* --- Hero ---------------------------------------------------------------- */
.hero-grid {
  display: grid; gap: var(--space-xl);
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
}
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }
.hero-visual { position: relative; }
.hero-visual__photo {
  width: 100%; display: block; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius-l); border: 1px solid var(--border);
  box-shadow: 0 24px 48px oklch(0% 0 0 / .6);
}
/* Pastille logo posée sur la photo : rappelle la marque sans masquer le camion */
.hero-visual__logo {
  position: absolute; left: var(--space-s); bottom: calc(var(--space-s) * -1);
  width: clamp(64px, 9vw, 96px); height: auto; border-radius: var(--radius-full);
  border: 3px solid var(--brand); background: #000;
  box-shadow: 0 12px 24px oklch(0% 0 0 / .5);
}
.hero-badges { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-s); }

/* --- Bande des villes (façon logo : "BAYONNE · BIARRITZ · ANGLET…") ----- */
.zone-strip {
  display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-s);
  font-family: var(--font-display); text-transform: uppercase;
  font-size: var(--step-0); letter-spacing: .02em; color: var(--text-muted);
}
.zone-strip span { color: var(--text-subtle); }

/* --- Cartes ville --------------------------------------------------------- */
.c-card--city { gap: var(--space-2xs); }
.c-card--city .c-card__kicker {
  font-family: var(--font-display); font-size: var(--step--2);
  color: var(--brand); letter-spacing: .04em; text-transform: uppercase;
}

/* --- Étapes numérotées ---------------------------------------------------- */
.step-card { position: relative; padding-top: var(--space-l); }
.step-card__num {
  font-family: var(--font-display); font-size: var(--step-5); line-height: 1;
  color: var(--brand); display: block; margin-block-end: var(--space-2xs);
}

/* --- Bandeau assermenté / réassurance ------------------------------------- */
.trust-strip {
  border-block: 1px solid var(--border);
  background: var(--surface-sunken);
}

/* --- Adresse cliquable dans le pied de page -------------------------------- */
.c-footer .basque-bar { margin-block-end: var(--space-l); }

/* --- Galerie de réalisations + visionneuse -------------------------------- */
.gallery {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: var(--space-xs);
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1000px) { .gallery { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .gallery { grid-template-columns: repeat(2, 1fr); } }
.gallery a {
  display: block; overflow: hidden; border-radius: var(--radius-m);
  border: 1px solid var(--border); background: var(--surface-raised);
}
.gallery img {
  width: 100%; height: 100%; display: block; aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.gallery a:hover img, .gallery a:focus-visible img { transform: scale(1.05); }
/* Repli : JS pose data-collapsed, sans JS toutes les photos restent visibles */
.gallery[data-collapsed] li:nth-child(n + 13) { display: none; }
.gallery__more { text-align: center; }

@media (max-width: 1000px) { .gallery--strip { grid-template-columns: repeat(2, 1fr); } }

.c-lightbox {
  border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100dvh;
  width: 100vw; height: 100dvh; overflow: hidden;
}
.c-lightbox::backdrop { background: oklch(0% 0 0 / .9); }
.c-lightbox[open] { display: grid; place-items: center; }
.c-lightbox img {
  max-width: min(100vw - 2 * var(--gutter), 1400px); max-height: calc(100dvh - 7rem);
  object-fit: contain; border-radius: var(--radius-m);
}
.c-lightbox__btn {
  position: absolute; display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: var(--radius-full); border: 0; cursor: pointer;
  background: oklch(100% 0 0 / .12); color: #fff; font-size: 1.5rem;
}
.c-lightbox__btn:hover { background: var(--brand); }
.c-lightbox__btn[data-close] { top: var(--space-s); right: var(--space-s); }
.c-lightbox__btn[data-prev]  { left: var(--space-s); top: 50%; translate: 0 -50%; }
.c-lightbox__btn[data-next]  { right: var(--space-s); top: 50%; translate: 0 -50%; }
@media (max-width: 700px) {
  .c-lightbox__btn[data-prev], .c-lightbox__btn[data-next] { top: auto; bottom: var(--space-m); translate: none; }
}