/* ==========================================================================
   Auto Pièces VSP : accueil (2026-10-29)

   Hero plein écran (front-page.php) : image de remplacement, vidéos en fondu
   (assets/js/accueil.js), voile sombre, titre d'affiche, deux boutons,
   indicateurs de progression. Chargé sur l'accueil seulement (inc/accueil.php).

   Couleurs : variables des couleurs globales du Customizer (--noir, --blanc,
   --jaune, --bleu-fonce) et jetons de theme.css. Aucun !important.

   Contraste du texte blanc sur le voile (pire cas : image entièrement blanche
   derrière le texte ; --noir = #1a1a1a de la direction artistique) :
   - voile uniforme 35 % + dégradé de lisibilité (75 % en bas, 45 % à 55 % de
     la hauteur, 25 % à 80 %, 0 en haut).
   - haut du titre en bureau (≈ 55 % de la hauteur) : opacité cumulée 0,64 →
     5,2:1 (AA texte courant ; le titre est du grand texte).
   - haut du titre en mobile (≈ 75 % de la hauteur) : opacité ≥ 0,54 → 4,5:1.
   - phrase et boutons, plus bas (opacité cumulée ≥ 0,75) : ≥ 7,7:1.
   - bouton principal : --bleu-fonce sur --jaune (bouton opaque, theme.css).
   ========================================================================== */

/* 0. En-tête de l'accueil : la barre flotte au-dessus du hero ----------------- */
/* Décision client du 2026-10-29 (point 7) : l'image du hero monte tout en haut
   de la page, sous la barre, sans bande blanche. La barre reste collante
   (theme.css, avec ses décalages pour la barre d'administration : 32 px, 46 px
   sous 783 px, 0 sous 601 px), mais ne prend plus de place dans le flux : hauteur
   nulle, la barre intérieure déborde vers le bas. Tout est en CSS, appliqué dès
   le premier affichage : aucun décalage (CLS) au chargement ni au défilement.
   La barre garde un fond blanc opaque (pas d'effet verre sur la photo). */
body.home .apv-header {
  height: 0;
  padding-top: 0;
}

body.home .apv-header .apv-header__inner {
  position: relative;
  top: 0.75rem;
}

body.home .apv-header .apv-header__inner,
body.home .apv-header.is-scrolled .apv-header__inner {
  border-color: var(--blanc);
  background-color: var(--blanc);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: var(--apv-ombre-barre);
}

/* 1. Cadre ----------------------------------------------------------------- */
/* Décision client du 2026-10-29 : les cartes « Votre spécialiste VSP » passent
   sous le hero, sans chevauchement (une vidéo viendra dans le hero). */
.apv-hero {
  --apv-hero-hauteur: 70svh;
  --apv-hero-fondu: 0.9s;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: max(30rem, var(--apv-hero-hauteur));
  margin: 0;
  overflow: hidden;
  background-color: var(--bleu-fonce);
  color: var(--blanc);
}

@media (min-width: 768px) {
  .apv-hero {
    /* Tout l'écran : la barre d'en-tête flotte au-dessus (section 0) */
    --apv-hero-hauteur: 100svh;
    min-height: max(34rem, var(--apv-hero-hauteur));
  }

  /* Connecté : la barre d'administration de WordPress occupe le haut */
  .admin-bar .apv-hero {
    --apv-hero-hauteur: calc(100svh - 46px);
  }
}

@media (min-width: 783px) {
  .admin-bar .apv-hero {
    --apv-hero-hauteur: calc(100svh - 32px);
  }
}

/* 2. Médias : image de remplacement, vidéos, voile ---------------------------- */
.apv-hero__medias {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.apv-hero .apv-hero__poster,
.apv-hero .apv-hero__video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

.apv-hero .apv-hero__video {
  opacity: 0;
  transition: opacity var(--apv-hero-fondu) ease;
}

.apv-hero .apv-hero__video.est-active {
  opacity: 1;
}

.apv-hero__voile {
  position: absolute;
  inset: 0;
  background-color: color-mix(in srgb, var(--noir) 35%, transparent);
  /* Dégradé de lisibilité (il encode la zone du texte, pas un décor) */
  background-image: linear-gradient(
    to top,
    color-mix(in srgb, var(--noir) 75%, transparent) 0%,
    color-mix(in srgb, var(--noir) 45%, transparent) 55%,
    color-mix(in srgb, var(--noir) 25%, transparent) 80%,
    transparent 100%
  );
}

/* 3. Texte et boutons ----------------------------------------------------------- */
.apv-hero__contenu {
  width: min(var(--apv-largeur-section, 75rem), 100% - 2 * max(1.25rem, var(--apv-gouttiere)));
  margin-inline: auto;
  /* Haut : place de la barre flottante (le texte ne passe jamais dessous) */
  padding-block: calc(var(--apv-entete) + 1.5rem) clamp(2.5rem, 9vh, 6rem);
}

.apv-hero .apv-hero__legende {
  margin: 0 0 0.75rem;
  font-family: var(--apv-police-titre);
  font-size: var(--apv-taille-0);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blanc);
}

.apv-hero .apv-hero__legende[hidden] {
  display: none;
}

.apv-hero .apv-hero__video-titre {
  color: var(--jaune);
}

.apv-hero .apv-hero__video-sous-titre:not(:empty)::before {
  content: "·";
  margin-inline: 0.5em;
  color: var(--blanc);
}

body .apv-hero h1.apv-hero__titre {
  max-width: 12ch;
  margin: 0;
  font-family: var(--apv-police-titre);
  font-size: var(--apv-taille-6);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--blanc);
  text-wrap: balance;
}

/* Filet jaune du logo sous le titre */
body .apv-hero h1.apv-hero__titre::after {
  content: "";
  display: block;
  width: 4.5rem;
  height: var(--apv-filet);
  margin-top: clamp(1rem, 2vw, 1.5rem);
  border-radius: 2px;
  background-color: var(--jaune);
}

.apv-hero .apv-hero__phrase {
  max-width: 38rem;
  margin: clamp(1rem, 2vw, 1.375rem) 0 0;
  font-size: clamp(1.0625rem, 1rem + 0.45vw, 1.375rem);
  line-height: 1.5;
  color: var(--blanc);
}

.apv-hero__boutons {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

.apv-hero .apv-btn {
  min-height: 3.25rem;
  padding-inline: 1.625rem;
  font-size: 1.0625rem;
}

.apv-hero .apv-btn svg {
  flex: 0 0 auto;
  transition: transform 0.2s ease;
}

.apv-hero .apv-btn:hover svg {
  transform: translateX(3px);
}

/* Secondaire sur fond sombre : contour blanc, plein blanc au survol */
.apv-hero .apv-btn.apv-btn--secondary {
  border-color: var(--blanc);
  background-color: transparent;
  color: var(--blanc);
}

.apv-hero .apv-btn.apv-btn--secondary:hover {
  border-color: var(--blanc);
  background-color: var(--blanc);
  color: var(--bleu-fonce);
}

.apv-hero :focus-visible {
  outline: 3px solid var(--jaune);
  outline-offset: 3px;
}

@media (min-width: 600px) {
  .apv-hero__boutons {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
}

/* 4. Indicateurs et pause (grand écran, vidéos en lecture) -------------------- */
.apv-hero__commandes {
  position: absolute;
  right: max(1.25rem, var(--apv-gouttiere), (100% - var(--apv-largeur-section, 75rem)) / 2);
  bottom: clamp(1.25rem, 3vh, 2rem);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.apv-hero__commandes[hidden] {
  display: none;
}

.apv-hero__indicateurs {
  display: flex;
  gap: 0.25rem;
}

/* Cible de 44 px de haut, barre fine dessinée au centre */
.apv-hero .apv-hero__indicateur {
  display: flex;
  align-items: center;
  width: 3.5rem;
  min-height: 2.75rem;
  margin: 0;
  padding: 0 0.25rem;
  border: 0;
  border-radius: var(--apv-rayon);
  background: none;
  cursor: pointer;
}

.apv-hero__barre {
  position: relative;
  display: block;
  width: 100%;
  height: 4px;
  overflow: hidden;
  border-radius: 2px;
  background-color: color-mix(in srgb, var(--blanc) 45%, transparent);
}

.apv-hero__progression {
  position: absolute;
  inset: 0;
  background-color: var(--jaune);
  transform: scaleX(var(--apv-progression, 0));
  transform-origin: left center;
}

.apv-hero .apv-hero__indicateur:hover .apv-hero__barre {
  background-color: color-mix(in srgb, var(--blanc) 70%, transparent);
}

/* Bouton pause retiré (décision client du 2026-10-29). */

/* Sous 768 px : jamais de commandes (aucune vidéo chargée) */
@media (max-width: 767px) {
  .apv-hero .apv-hero__commandes {
    display: none;
  }
}

/* 5. Contenu de la page sous le hero ---------------------------------------- */
/* Le premier bloc du contenu suit le hero : écart de section normal. */
.apv-accueil .entry-content > :first-child {
  margin-top: var(--apv-espace-section, 4rem);
}

/* Groupes mis en grille ou en flex : WordPress (thème sans theme.json) enveloppe
   leurs enfants dans .wp-block-group__inner-container ; l'enveloppe s'efface pour
   que la grille voie les colonnes. */
.apv-accueil .entry-content :is(.apv-accueil-vsp, .apv-accueil-vsp__cartes, .apv-accueil-vsp__carte, .apv-accueil-lieu__grille, .apv-accueil-lieu__infos, .apv-accueil-lieu__info, .apv-accueil-lieu__texte, .apv-accueil-lieu__cadre) > .wp-block-group__inner-container {
  display: contents;
}

/* 6. « Votre spécialiste VSP » : trois cartes blanches sous le hero ---------- */
/* Décisions client du 2026-10-29 : bandeau bleu et voitures détourées retirés ;
   les trois cartes passent sous le hero (écart de section normal, section 5),
   sans chevauchement. Trois cartes de même rôle visuel et de même hauteur :
   lignes de grille en 1fr (toutes les lignes égales, même empilées en mobile),
   contenu en colonne, bouton poussé en bas (margin-top: auto). Cartes non
   cliquables : au survol, la bordure seule change (jaune), sans élévation ni
   ombre en plus (décision client).
   Contrastes : --texte et --apv-titres sur --blanc (≥ 9:1) ; icône
   --bleu-fonce sur pastille --jaune-clair (#fff7cc, ≥ 11:1). */
.apv-accueil .entry-content > .apv-accueil-vsp {
  position: relative;
  margin-top: var(--apv-espace-section, 4rem);
  margin-bottom: 0;
  padding-inline: max(1rem, var(--apv-gouttiere));
}

.apv-accueil .entry-content .apv-accueil-vsp .apv-accueil-vsp__cartes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: 1fr;
  align-items: stretch;
  gap: 1rem;
  max-width: var(--apv-largeur-section, 75rem);
  margin: 0 auto;
}

.apv-accueil .entry-content .apv-accueil-vsp .apv-accueil-vsp__carte {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  margin: 0;
  padding: clamp(1.5rem, 2.5vw, 2.25rem) clamp(1.25rem, 2.5vw, 2rem);
  border: 1px solid var(--bordure);
  border-radius: var(--apv-rayon-carte);
  background-color: var(--blanc);
  box-shadow: var(--apv-ombre-panneau);
  text-align: center;
  transition: border-color 200ms ease;
}

.apv-accueil .entry-content .apv-accueil-vsp .apv-accueil-vsp__carte:hover {
  border-color: var(--apv-carte-bordure-survol, var(--jaune));
}

/* Remise à zéro en :where (spécificité 0,3,0) : les marges voulues ci-dessous
   (titre, texte, bouton) passent devant. */
.apv-accueil .entry-content .apv-accueil-vsp :where(.apv-accueil-vsp__carte, .apv-accueil-vsp__carte > .wp-block-group__inner-container) > * {
  margin: 0;
}

.apv-accueil .entry-content .apv-accueil-vsp .apv-icone-bloc {
  line-height: 0;
}

/* Icône sur pastille jaune clair (le SVG porte la pastille) */
.apv-accueil .entry-content .apv-accueil-vsp svg.apv-icone {
  box-sizing: content-box;
  display: block;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0.9375rem;
  border-radius: 50%;
  background-color: var(--jaune-clair, color-mix(in srgb, var(--jaune) 22%, var(--blanc)));
  color: var(--bleu-fonce);
}

/* Titre, texte et boutons : sélecteurs avec .apv-accueil-vsp__carte pour passer
   devant la remise à zéro des marges ci-dessus (spécificité 0,5,0), sinon les
   écarts icône / titre / texte tombent à 0. */
.apv-accueil .entry-content .apv-accueil-vsp .apv-accueil-vsp__carte h3.wp-block-heading {
  margin-top: 1rem; /* ≈ 16 px sous l'icône */
  font-size: var(--apv-taille-2);
  font-weight: 800;
  line-height: 1.25;
  color: var(--apv-titres);
}

.apv-accueil .entry-content .apv-accueil-vsp .apv-accueil-vsp__carte p {
  max-width: 36ch;
  margin-top: 0.625rem; /* 10 px sous le titre */
  font-size: var(--apv-taille-1);
  line-height: 1.6;
  color: var(--texte);
}

/* Bouton en bas de la carte : margin-top auto aligne les boutons d'une rangée,
   le padding garde un écart minimal sous le texte. */
.apv-accueil .entry-content .apv-accueil-vsp .apv-accueil-vsp__carte .wp-block-buttons {
  justify-content: center;
  margin-top: auto;
  padding-top: 1.25rem;
}

/* Tablette et plus : trois colonnes égales */
@media (min-width: 768px) {
  .apv-accueil .entry-content .apv-accueil-vsp .apv-accueil-vsp__cartes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 2vw, 1.75rem);
  }
}

/* 7. « Réparation et entretien » : bouton à droite, survol des cartes -------- */
/* Bouton aligné à droite (point 9) : réglage natif du bloc Boutons
   (justification à droite) ; repris ici pour l'aperçu sans le CSS de WordPress. */
.apv-accueil .entry-content .apv-accueil-reparation > .wp-block-buttons {
  justify-content: flex-end;
}

/* Jetons de survol des cartes (--apv-carte-*, theme.css) ;
   valeurs de repli tant qu'ils n'existent pas : bordure jaune, -3 px, ombre
   légère, 200 ms. Rien sous prefers-reduced-motion (section 9). */
.apv-accueil .entry-content .apv-accueil-reparation .wp-block-group.apv-service {
  border: var(--apv-carte-bordure, 1px solid var(--bordure));
  box-shadow: var(--apv-carte-ombre, none);
  transition: var(--apv-transition-carte, transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease);
}

.apv-accueil .entry-content .apv-accueil-reparation .wp-block-group.apv-service:hover {
  border-color: var(--apv-carte-bordure-survol, var(--jaune));
  box-shadow: var(--apv-carte-ombre-survol, 0 8px 22px color-mix(in srgb, var(--bleu-fonce) 12%, transparent));
  transform: translateY(var(--apv-carte-elevation, -3px));
}

/* 8. « Où nous trouver ? » : photo du showroom en fond, carte à droite ------- */
/* Point 10 : photo du bloc Image du contenu (classe apv-accueil-lieu__fond,
   aucun ID ici : la photo se change dans l'éditeur) en fond de section,
   voile --bleu-fonce à 85 %.
   Pire cas (pixel blanc sous le voile) : fond équivalent #2a5d84 → blanc
   7,0:1 (AA, et AAA en grand texte). Texte à gauche, plan dans un cadre blanc
   à liseré jaune à droite ; section centrée dans les 1 200 px du contenu. */
.apv-accueil .entry-content > .apv-accueil-lieu {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-block: var(--apv-espace-section, 4rem);
  padding: clamp(3.5rem, 7vw, 6rem) max(1rem, var(--apv-gouttiere));
  background-color: var(--bleu-fonce);
  color: var(--blanc);
}

.apv-accueil .entry-content > .apv-accueil-lieu::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: color-mix(in srgb, var(--bleu-fonce) 85%, transparent);
}

.apv-accueil .entry-content .apv-accueil-lieu .apv-accueil-lieu__fond {
  position: absolute;
  inset: 0;
  z-index: -2;
  margin: 0;
}

.apv-accueil .entry-content .apv-accueil-lieu .apv-accueil-lieu__fond img {
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

.apv-accueil .entry-content .apv-accueil-lieu .apv-accueil-lieu__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 4vw, 4rem);
  max-width: var(--apv-largeur-section, 75rem);
  margin: 0 auto;
}

.apv-accueil .entry-content .apv-accueil-lieu :is(.apv-accueil-lieu__texte, .apv-accueil-lieu__texte > .wp-block-group__inner-container) > * {
  margin: 0;
}

.apv-accueil .entry-content .apv-accueil-lieu .apv-accueil-lieu__texte h2.wp-block-heading {
  color: var(--blanc);
}

/* Trait jaune du logo sous le titre */
.apv-accueil .entry-content .apv-accueil-lieu .apv-accueil-lieu__texte h2.wp-block-heading::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: var(--apv-filet);
  margin-top: 1rem;
  border-radius: 2px;
  background-color: var(--jaune);
}

.apv-accueil .entry-content .apv-accueil-lieu .apv-accueil-lieu__texte p {
  max-width: 60ch;
  color: var(--blanc);
}

.apv-accueil .entry-content .apv-accueil-lieu :is(.apv-accueil-lieu__texte, .apv-accueil-lieu__texte > .wp-block-group__inner-container) > p {
  margin-top: 1.5rem;
}

.apv-accueil .entry-content .apv-accueil-lieu .apv-accueil-lieu__infos {
  display: grid;
  gap: 1.25rem;
  margin-top: 2rem;
}

/* Icône à gauche, titre et texte à droite */
.apv-accueil .entry-content .apv-accueil-lieu .apv-accueil-lieu__info {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 1rem;
  align-items: start;
  margin: 0;
}

.apv-accueil .entry-content .apv-accueil-lieu :is(.apv-accueil-lieu__info, .apv-accueil-lieu__info > .wp-block-group__inner-container) > * {
  grid-column: 2;
  margin: 0;
}

.apv-accueil .entry-content .apv-accueil-lieu :is(.apv-accueil-lieu__info, .apv-accueil-lieu__info > .wp-block-group__inner-container) > .apv-icone-bloc {
  grid-column: 1;
  grid-row: 1 / span 2;
  line-height: 0;
}

.apv-accueil .entry-content .apv-accueil-lieu .apv-accueil-lieu__info svg.apv-icone {
  box-sizing: content-box;
  display: block;
  width: 1.375rem;
  height: 1.375rem;
  padding: 0.75rem;
  border-radius: 50%;
  background-color: var(--jaune);
  color: var(--bleu-fonce);
}

.apv-accueil .entry-content .apv-accueil-lieu .apv-accueil-lieu__info h3.wp-block-heading {
  margin-top: 0.125rem;
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--blanc);
}

.apv-accueil .entry-content .apv-accueil-lieu .apv-accueil-lieu__info p {
  margin-top: 0.25rem;
}

.apv-accueil .entry-content .apv-accueil-lieu .apv-accueil-lieu__texte a {
  font-weight: 700;
  color: var(--blanc);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.apv-accueil .entry-content .apv-accueil-lieu .apv-accueil-lieu__texte a:hover {
  color: var(--jaune);
  text-decoration-thickness: 2px;
}

.apv-accueil .entry-content .apv-accueil-lieu .apv-accueil-lieu__texte :focus-visible {
  outline-color: var(--jaune);
}

/* Cadre blanc à liseré jaune autour du plan (bloc apv/plan, chargé au clic) */
.apv-accueil .entry-content .apv-accueil-lieu .apv-accueil-lieu__cadre {
  margin: 0;
  padding: 0.5rem;
  border: 3px solid var(--jaune);
  border-radius: var(--apv-rayon-carte);
  background-color: var(--blanc);
}

.apv-accueil .entry-content .apv-accueil-lieu .apv-accueil-lieu__cadre .apv-plan {
  margin: 0;
  border: 0;
  border-radius: var(--apv-rayon);
}

@media (min-width: 960px) {
  .apv-accueil .entry-content .apv-accueil-lieu .apv-accueil-lieu__grille {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  }
}

/* 9. Mouvement réduit -------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .apv-hero .apv-hero__video,
  .apv-hero .apv-btn svg,
  .apv-accueil .entry-content .apv-accueil-vsp .apv-accueil-vsp__carte,
  .apv-accueil .entry-content .apv-accueil-reparation .wp-block-group.apv-service {
    transition: none;
  }

  .apv-hero .apv-btn:hover svg,
  .apv-accueil .entry-content .apv-accueil-reparation .wp-block-group.apv-service:hover {
    transform: none;
  }
}

/* Écart entre le hero et les 3 cartes (étape 8) : la marge générique de la première section valait 24 px.
   Sélecteur par l'ancre de la section, plus fort que les règles génériques du contenu. */
body.home .entry-content > #head-vsp {
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

/* « Où nous trouver ? » (étape 9) : air entre le texte et les infos (horaires, téléphone), annulé par la
   remise à zéro des marges des enfants de __texte ; même sélecteur renforcé par l'ancre de la section. */
body.home .entry-content .apv-accueil-lieu .apv-accueil-lieu__texte .wp-block-group.apv-accueil-lieu__infos {
  margin-top: 1.75rem;
}

body.home .entry-content .apv-accueil-lieu .apv-accueil-lieu__info + .apv-accueil-lieu__info {
  margin-top: 0.25rem;
}