/*
 * Pro/Active — Page d'un service (préfixe `sv-`).
 * Additionnel à proactive.css + vitrine.css, qui ne sont pas modifiés.
 * Charte Volt : aucun border-radius, marine #012647, accent #FF6C02,
 * points de rupture 900px (grilles) et 640px (rails mobiles, cf. accueil.css).
 */

/* ==========================================================================
   Bandeau — visuel du service (lot photos-a, 11/09/2026)
   --------------------------------------------------------------------------
   Actif seulement quand `static/img/services/<slug>.webp` existe (classe
   `.sv-bandeau` posée par le gabarit à côté de `.vt-entete-page`, jamais à sa
   place) : sans visuel, l'en-tête garde son rendu d'origine (fond
   `--pa-fond-profond` uni). L'image déborde de 120px en haut/bas
   (`inset: -120px 0`, même marge que `.ac-hero__fond`/`.vt-hero__fond`) pour
   que la parallaxe du socle (`data-parallaxe`, static/js/animations.js) ne
   révèle jamais de bord vide en défilant.
   ========================================================================== */
.sv-bandeau {
  position: relative;
  overflow: hidden;
  min-height: clamp(320px, 46vw, 460px);
  display: flex;
  align-items: flex-end;
}
.sv-bandeau__img {
  position: absolute;
  inset: -120px 0;
  width: 100%;
  height: calc(100% + 240px);
  object-fit: cover;
  object-position: center 55%;
  z-index: 0;
}
/* Voile sombre : dégradé, plus dense en bas où vit le texte — pas un aplat
   uniforme, pour garder un peu de la photo lisible en haut de bandeau. */
.sv-bandeau__voile {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(1, 26, 47, 0.5) 0%,
    rgba(1, 26, 47, 0.72) 55%,
    rgba(1, 26, 47, 0.9) 100%
  );
}
.sv-bandeau__contenu {
  position: relative;
  z-index: 2;
  width: 100%;
}
@media (max-width: 640px) {
  .sv-bandeau {
    min-height: clamp(280px, 70vw, 360px);
  }
}

/* ==========================================================================
   Bandeau — accroche + méta (durée / prix / statut) + action
   ========================================================================== */

.sv-accroche {
  max-width: 640px;
}

.sv-entete__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  margin: 22px 0 24px;
  padding-top: 20px;
  border-top: 1px solid var(--pa-bordure-douce);
}
.sv-entete__duree {
  font-size: 12.5px;
  color: var(--pa-sourdine);
  font-weight: 700;
  /* Pas de capitales : « 1 h 45 » se lit comme on le dit, « 1 H 45 » non. */
  letter-spacing: 0.06em;
}
.sv-entete__prix {
  font-family: var(--pa-police-titre);
  font-size: 30px;
  color: var(--pa-blanc);
}
.sv-entete__prix--attente {
  font-family: var(--pa-police-texte);
  font-size: 15px;
  color: var(--pa-sourdine);
  font-weight: 700;
}

@media (max-width: 640px) {
  .sv-entete__meta {
    gap: 14px;
  }
  .sv-entete__prix {
    font-size: 26px;
  }
}

/* ==========================================================================
   Ce que c'est / pour qui
   ========================================================================== */

.sv-intro {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: start;
}
.sv-intro__texte .pa-texte {
  font-size: 17px;
}

@media (max-width: 900px) {
  .sv-intro {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* ==========================================================================
   Comment ça se passe — numéros orange (même motif que l'accueil)
   ========================================================================== */

.sv-etape__n {
  font-family: var(--pa-police-titre);
  font-size: 30px;
  line-height: 1;
  color: var(--pa-accent);
  margin-bottom: 12px;
}

/* ==========================================================================
   Vous repartez avec / à savoir
   ========================================================================== */

.sv-emporte {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
@media (max-width: 900px) {
  .sv-emporte {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* ==========================================================================
   Questions fréquentes — <details>/<summary>, sans JavaScript
   --------------------------------------------------------------------------
   Resserré et centré plutôt qu'étalé sur deux colonnes (demande client du
   11/09/2026, tranchée ici) : à 5-7 questions par page, une colonne large
   déséquilibre visuellement le bloc dès qu'un <details> s'ouvre (sa réponse
   allonge une colonne sans que l'autre ne bouge), et une lecture question
   par question est de toute façon plus naturelle qu'un balayage en grille.
   Même traitement que les autres blocs de lecture du site
   (`.vt-entete-section--large`, `.vt-conteneur--etroit`).
   ========================================================================== */

.sv-faq {
  display: grid;
  gap: 2px;
  background: var(--pa-bordure-douce);
  max-width: 680px;
  margin-inline: auto;
}
.sv-faq__item {
  background: var(--pa-panneau);
  padding: 18px 22px;
}
.sv-faq__item[open] {
  padding-bottom: 22px;
}
.sv-faq__item .pa-texte {
  margin: 14px 0 0;
}
.sv-faq__question {
  cursor: pointer;
  font-family: var(--pa-police-texte);
  font-size: 16px;
  font-weight: 800;
  color: var(--pa-blanc);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.sv-faq__question::-webkit-details-marker {
  display: none;
}
.sv-faq__question::after {
  content: "+";
  flex: none;
  font-family: var(--pa-police-titre);
  font-size: 20px;
  color: var(--pa-accent);
}
.sv-faq__item[open] .sv-faq__question::after {
  content: "–";
}
.sv-faq__question:focus-visible {
  outline: 2px solid var(--pa-accent);
  outline-offset: 3px;
}

/* ==========================================================================
   Bike fitting — les trois packs
   --------------------------------------------------------------------------
   Mise en avant au survol / focus clavier / toucher (demande client du
   11/09/2026) : la carte s'élève et emprunte temporairement le traitement
   « recommandé » de la formule du milieu (fond carte-alt, bordure blanche),
   pour que la comparaison entre formules soit un vrai geste, pas un simple
   décor. Sur téléphone, où :hover n'existe pas, l'en-tête de chaque carte
   est un <label> qui coche une case radio masquée (`.sv-pack__radio`) —
   truc CSS pur classique, aucun script : cliquer/toucher un <label> associé
   coche son input même si celui-ci est `display: none`.
   Aucun contenu n'est masqué par cet effet : la phrase de comparaison
   (`.sv-pack__comparatif`) est toujours visible, l'élévation ne fait
   qu'intensifier ce qui est déjà lisible — donc rien à garder « au cas où
   le survol ne marche pas », contrairement au système `.js-anim` du socle.
   ========================================================================== */

.sv-packs__aide {
  margin: 0 0 24px;
  font-size: 14px;
  color: var(--pa-sourdine);
}

.sv-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.sv-packs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 900px) {
  .sv-packs {
    grid-template-columns: 1fr;
  }
}

.sv-pack {
  position: relative;
}

/* La vraie case à cocher : jamais affichée, seulement ciblée par
   `:checked ~ .sv-pack__corps`. Un clic/toucher sur `.sv-pack__entete`
   (son <label>) la coche quand même — comportement natif du navigateur.
   `display: none` (et non un simple `opacity: 0`) : sinon l'input reste
   focusable au clavier sans le moindre indice visuel de focus, un arrêt
   invisible dans la tabulation. Le clavier n'en a de toute façon pas
   besoin : :focus-within se déclenche déjà sur les vrais liens de la carte. */
.sv-pack__radio {
  display: none;
}

.sv-pack__corps {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
  background: var(--pa-panneau);
  border-top: 4px solid var(--pa-accent);
  padding: 28px 26px 30px;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    background-color 0.35s ease, border-color 0.35s ease;
}

/* Visuel de la formule (lot photos-a, 11/09/2026), bord perdu comme les
   cartes de service (`.vt-service__media`, vitrine.css) : marge négative =
   padding du `.sv-pack__corps` (28px 26px). `gap: 14px` du parent sépare
   déjà l'image de l'en-tête, aucun ajustement d'espacement nécessaire. */
.sv-pack__media {
  margin: -28px -26px 0;
  height: clamp(150px, 20vw, 190px);
  overflow: hidden;
}
.sv-pack__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
}

.sv-pack__entete {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}
/* Le nom peut passer sur deux lignes, le badge jamais : sans cela « Fit
   Performance » repoussait son badge sur sa propre ligne et les trois
   cartes n'étaient plus alignées. */
.sv-pack__entete .pa-titre-2 { min-width: 0; }
.sv-pack__entete .pa-badge { flex: 0 0 auto; white-space: nowrap; }

/* Icône de comparaison : indice du geste tactile, utile seulement là où
   :hover n'existe pas — sur un écran à souris/clavier, :hover et
   :focus-within suffisent déjà, l'icône serait un décor sans fonction. */
.sv-pack__comparer-icone {
  display: none;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--pa-sourdine);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  align-self: center;
}
@media (hover: none) {
  .sv-pack__comparer-icone {
    display: block;
  }
}

.sv-pack__accroche {
  margin: 0;
}

.sv-pack__comparatif {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 10px 12px;
  background: rgba(255, 108, 2, 0.12);
  font-size: 13.5px;
  font-weight: 800;
  line-height: 1.4;
  color: var(--pa-blanc);
}
.sv-pack__comparatif svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  fill: none;
  stroke: var(--pa-accent);
  stroke-width: 2;
}

.sv-pack__contenu {
  flex: 1;
}
.sv-pack__pied {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--pa-bordure-douce);
}
.sv-pack__duree {
  font-size: 12.5px;
  color: var(--pa-sourdine);
  font-weight: 700;
  /* Pas de capitales : les durées s'écrivent « 1 h 45 », et « 1 H 45 » se
     lit mal. Le suivi de lettres suffit à les tenir à distance du prix. */
  letter-spacing: 0.06em;
}
.sv-pack__prix {
  font-family: var(--pa-police-titre);
  font-size: 26px;
  color: var(--pa-blanc);
}
.sv-pack__prix--attente {
  font-family: var(--pa-police-texte);
  font-size: 14px;
  color: var(--pa-sourdine);
  font-weight: 700;
}
.sv-pack__action .pa-btn,
.sv-pack__action .pa-btn-secondaire {
  width: 100%;
}
.sv-pack__plus {
  display: inline-block;
  margin-top: -2px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--pa-texte-3);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-align: center;
}
.sv-pack__plus:hover {
  color: var(--pa-accent);
}

/* Formule du milieu mise en avant visuellement PAR DÉFAUT : c'est celle qui
   inclut déjà Fit Cales et que la plupart des cyclistes choisissent
   (réglage complet). `:nth-child`, pas `:nth-of-type` : la case radio et le
   <label> vivent DANS chaque <article>, pas à côté — les trois `.sv-pack`
   restent les enfants directs 1, 2, 3 de `.sv-packs`. */
.sv-pack:nth-child(2) .sv-pack__corps {
  border-top-color: var(--pa-blanc);
  background: var(--pa-carte-alt);
}

/* Mise en avant interactive : survol, focus clavier sur un des liens de la
   carte (bouton de réservation, « en savoir plus »), ou case cochée au
   toucher. Élève la carte et emprunte le traitement « recommandé » —
   utile même sur la formule du milieu, qui gagne encore un peu de relief. */
.sv-pack:hover .sv-pack__corps,
.sv-pack:focus-within .sv-pack__corps,
.sv-pack__radio:checked ~ .sv-pack__corps {
  transform: translateY(-10px);
  border-top-color: var(--pa-blanc);
  background: var(--pa-carte-alt);
}

@media (prefers-reduced-motion: reduce) {
  .sv-pack__corps {
    transition: background-color 0.2s ease, border-color 0.2s ease;
  }
  .sv-pack:hover .sv-pack__corps,
  .sv-pack:focus-within .sv-pack__corps,
  .sv-pack__radio:checked ~ .sv-pack__corps {
    transform: none;
  }
}

/* ==========================================================================
   Option « second vélo » — pleine largeur (corrigé le 11/09/2026 : la
   version précédente plafonnait à 620px et laissait un grand vide à droite
   dans un panneau qui, lui, court sur toute la largeur du conteneur — ça
   faisait accidentel). Bandeau texte + tarif côte à côte sur grand écran,
   empilé sur téléphone.
   ========================================================================== */

.sv-option {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.sv-option__texte {
  flex: 1 1 380px;
}
.sv-option__tarif {
  flex: 0 1 420px;
  text-align: right;
}
.sv-option__prix {
  margin: 14px 0 10px;
  font-family: var(--pa-police-titre);
  font-size: 26px;
  color: var(--pa-blanc);
}
.sv-option__note {
  font-size: 14px;
  color: var(--pa-texte-3);
  margin-bottom: 0;
}
.sv-option__note a {
  text-decoration: underline;
}
@media (max-width: 900px) {
  .sv-option {
    flex-direction: column;
    align-items: stretch;
  }
  .sv-option__tarif {
    text-align: left;
  }
}

/* ==========================================================================
   À voir aussi
   ========================================================================== */

.sv-lies {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--pa-bordure-douce);
}
@media (max-width: 900px) {
  .sv-lies {
    grid-template-columns: 1fr;
  }
}
.sv-lies__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 20px 22px;
  background: var(--pa-fond);
  color: var(--pa-blanc);
  font-weight: 800;
  font-size: 15px;
}
.sv-lies__item:hover {
  background: var(--pa-carte-alt);
}
.sv-lies__fleche {
  color: var(--pa-accent);
  flex: none;
}

/* ==========================================================================
   CTA finale
   ========================================================================== */

.sv-cta-finale {
  text-align: center;
}
.sv-cta-finale .vt-entete-section--large {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* ==========================================================================
   Téléphone : rails horizontaux (standard BE WEB, motif repris à l'identique
   de la fin de static/css/accueil.css) au lieu d'empiler les grilles de
   cartes de cette page.
   ========================================================================== */
@media (max-width: 640px) {
  .vt-grille-3,
  .sv-packs,
  .sv-lies {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: 10px;
    /* déborde jusqu'aux bords de l'écran pour suggérer la suite */
    margin-inline: -20px;
    padding-inline: 20px;
    background: none;
  }
  .vt-grille-3 > *,
  .sv-packs > *,
  .sv-lies > * {
    flex: 0 0 84%;
    scroll-snap-align: start;
    margin: 0;
  }
  /* Indice de défilement sous chaque rail */
  .vt-grille-3::after,
  .sv-packs::after,
  .sv-lies::after {
    content: "";
    flex: 0 0 8px;
  }
}