/*
 * Pro/Active — Pages de service et liste /services/ (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 (téléphone).
 *
 * Refonte « V3 » du 19/10/2026 — téléphone d'abord (390 px), le moins de texte
 * possible, une photo avant chaque bloc de texte, pas de rail de cartes
 * coupées : on empile. Mécanique reprise de Com'in Clean V3
 * (`services-anim.*` : étapes qui s'allument, cartes en cascade, FAQ ;
 * `bandeau.js` : photos qui se relaient — ici `banniere-defile.js`).
 *
 * Règle d'or des animations (docs/PROJET.md §10) : le masquage n'existe QUE
 * sous une classe que `static/js/service.js` pose lui-même (`sv-pre`,
 * `sv-mots-pret`). Sans JavaScript, ou avec `prefers-reduced-motion`, tout
 * est visible.
 */

/* ==========================================================================
   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(340px, 38vw, 440px);
  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.74) 55%,
    rgba(1, 26, 47, 0.92) 100%
  );
}
.sv-bandeau__contenu {
  position: relative;
  z-index: 2;
  width: 100%;
}
@media (max-width: 640px) {
  .sv-bandeau {
    min-height: 0;
  }
}

/* Lien de retour : le surtitre orange sert aussi de fil d'Ariane. Zone
   tactile de 44 px sans agrandir le trait visible. */
.sv-retour {
  display: inline-block;
  min-height: 44px;
  padding: 15px 0 11px;
  text-decoration: none;
}
.sv-retour:hover {
  color: var(--pa-blanc);
}

.sv-titre {
  margin-bottom: 14px;
}
.sv-accroche {
  max-width: 640px;
  margin-bottom: 0;
}

/* Titre mot par mot (standard V3 : « titres mot par mot »). Le masquage
   n'existe que sous `.sv-mots-pret`, posée par service.js juste après avoir
   découpé le titre ; `.sv-mots-go` lance l'arrivée. */
.sv-mot {
  display: inline-block;
}
.sv-titre.sv-mots-pret .sv-mot {
  opacity: 0;
  transform: translateY(0.55em);
}
.sv-titre.sv-mots-go .sv-mot {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--sv-i, 0) * 90ms);
}

/* ==========================================================================
   Bandeau — prix et durée en gros, bouton Réserver
   ========================================================================== */
.sv-fiche {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 22px 0 18px;
}
.sv-fiche__prix {
  font-family: var(--pa-police-titre);
  font-size: clamp(42px, 12vw, 58px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--pa-blanc);
}
.sv-fiche__prix--attente {
  font-family: var(--pa-police-texte);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0;
  color: var(--pa-texte-3);
}
.sv-fiche__duree {
  padding: 8px 14px;
  border: 2px solid var(--pa-bordure-vive);
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  color: var(--pa-blanc);
  white-space: nowrap;
}

/* Jours et heures de la récupération (QA du 19/10/2026) : même bloc que le
   bandeau de /recuperer/ (recuperer.css, `.rc-horaires`). */
.sv-horaires {
  display: inline-flex;
  flex-direction: column;
  margin: 0 0 18px;
  padding: 11px 16px;
  color: var(--pa-blanc);
  background: rgba(1, 26, 47, 0.82);
  border-left: 4px solid var(--pa-accent);
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: 0.015em;
}
.sv-horaires strong {
  color: var(--pa-blanc);
}
.sv-horaires__point {
  color: var(--pa-accent);
  font-weight: 800;
}
.sv-famille .sv-horaires {
  margin-top: 4px;
}
.sv-accroche + .sv-horaires {
  margin-top: 22px;
}

/* Autres durées d'une même technique, sous le bouton Réserver d'un pack. */
.sv-durees {
  margin-top: 18px;
}
.sv-durees__titre {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pa-texte-2);
}
.sv-durees__liste {
  margin: 0;
}
.sv-durees a.vt-technique__duree {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--pa-blanc);
  border-color: var(--pa-accent);
  background: rgba(1, 26, 47, 0.6);
}
.sv-durees a.vt-technique__duree:hover,
.sv-durees a.vt-technique__duree:focus-visible {
  color: var(--pa-fond);
  background: var(--pa-accent);
}

/* Hub : le bouton suit directement l'accroche. */
.sv-accroche + .sv-entete__action {
  margin-top: 22px;
}
.sv-entete__action .pa-btn {
  width: 100%;
}
.sv-entete__action .pa-btn-secondaire {
  width: 100%;
}
@media (min-width: 641px) {
  .sv-entete__action .pa-btn,
  .sv-entete__action .pa-btn-secondaire {
    width: auto;
  }
}

/* Rappel « Prestation réalisée par un professionnel qualifié » (demande
   client du 15/09/2026) sur CHAQUE page de service, standard ET hub — voir
   templates/vitrine/service.html. Une marque orange dessinée en CSS : pas de
   pictogramme. */
.sv-badge-kine {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 18px 0 0;
  max-width: 460px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--pa-texte);
}
.sv-badge-kine__marque {
  flex: none;
  width: 3px;
  align-self: stretch;
  background: var(--pa-accent);
}

/* ==========================================================================
   Ce que c'est — trois photos, trois courtes lignes
   ========================================================================== */
.sv-trio__tete {
  max-width: 760px;
  margin-bottom: 28px;
}
.sv-trio__tete .vt-titre-marketing {
  margin: 10px 0 0;
}
.sv-trio__lead {
  margin: 16px 0 0;
  padding-left: 16px;
  border-left: 3px solid var(--pa-accent);
  font-size: 18px;
  line-height: 1.5;
  color: var(--pa-texte-2);
}

.sv-trio__liste {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Deux étapes : deux colonnes ; une seule (Fit Cales) : photo et texte côte
   à côte, la photo ne s'étale pas sur toute la largeur. */
.sv-trio--deux .sv-trio__liste {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 860px;
}
.sv-trio--un .sv-trio__liste {
  grid-template-columns: minmax(0, 1fr);
  max-width: 560px;
}

.sv-etape {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--pa-panneau);
  border-top: 4px solid var(--pa-accent);
}
.sv-etape__photo {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--pa-fond-profond);
}
.sv-etape__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.sv-etape__corps {
  position: relative;
  padding: 24px 20px 22px;
}
/* Le numéro chevauche le bas de la photo : il s'allume à l'arrivée de l'étape
   (`sv-halo`), l'une après l'autre. */
.sv-etape__n {
  position: absolute;
  top: -20px;
  left: 20px;
  padding: 7px 11px;
  background: var(--pa-accent);
  color: var(--pa-fond);
  font-family: var(--pa-police-titre);
  font-size: 18px;
  line-height: 1;
}
.sv-etape__titre {
  margin: 0 0 6px;
  font-family: var(--pa-police-titre);
  font-size: 21px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--pa-blanc);
}
.sv-etape__texte {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--pa-texte-2);
}
@media (hover: hover) {
  .sv-etape:hover .sv-etape__photo img {
    transform: scale(1.06);
  }
}

/* Une seule étape (Fit Cales) sur grand écran : la photo à gauche, le texte à
   droite, au lieu d'une carte isolée au milieu du vide. */
@media (min-width: 901px) {
  .sv-trio--un .sv-trio__liste {
    max-width: 960px;
  }
  .sv-trio--un .sv-etape {
    flex-direction: row;
  }
  .sv-trio--un .sv-etape__photo {
    flex: 0 0 55%;
    aspect-ratio: auto;
    height: 400px;
  }
  .sv-trio--un .sv-etape__corps {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 32px 36px;
  }
  .sv-trio--un .sv-etape__n {
    position: static;
    align-self: flex-start;
    margin-bottom: 14px;
  }
  .sv-trio--un .sv-etape__titre {
    font-size: 26px;
  }
  .sv-trio--un .sv-etape__texte {
    font-size: 17px;
  }
}

@media (max-width: 900px) {
  .sv-trio__liste,
  .sv-trio--deux .sv-trio__liste {
    grid-template-columns: minmax(0, 1fr);
    max-width: 560px;
    gap: 20px;
  }
  .sv-trio--un .sv-trio__liste {
    max-width: 560px;
  }
}
/* Étapes : états de départ posés par service.js, jamais ici seuls. */
.sv-etape.sv-pre {
  opacity: 0;
  transform: translateY(40px);
}
.sv-etape.sv-pre .sv-etape__photo img {
  transform: scale(1.18);
}
.sv-etape.sv-go {
  animation: sv-monte 0.85s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  animation-delay: var(--sv-d, 0ms);
}
.sv-etape.sv-go .sv-etape__photo img {
  animation: sv-pose 1.5s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  animation-delay: var(--sv-d, 0ms);
}
.sv-etape.sv-go .sv-etape__n {
  animation: sv-halo 1.2s ease-out backwards;
  animation-delay: calc(var(--sv-d, 0ms) + 400ms);
}

/* ==========================================================================
   Pour qui / Vous repartez avec / À savoir
   ========================================================================== */
.sv-duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px 56px;
  align-items: start;
}
.sv-duo--seul {
  grid-template-columns: minmax(0, 760px);
}
.sv-bloc__titre {
  margin: 0 0 12px;
  font-family: var(--pa-police-titre);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--pa-blanc);
}
.sv-bloc__titre--suite {
  margin-top: 28px;
}
.sv-liste {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sv-liste li {
  position: relative;
  padding: 13px 0 13px 34px;
  border-top: 1px solid var(--pa-bordure-douce);
  font-size: 16px;
  line-height: 1.45;
  color: var(--pa-texte);
}
.sv-liste li:first-child {
  border-top: 0;
}
/* Coche dessinée en CSS : pas de pictogramme à répéter dans le HTML. */
.sv-liste li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 15px;
  width: 8px;
  height: 15px;
  border: solid var(--pa-accent);
  border-width: 0 3px 3px 0;
  transform: rotate(40deg);
}
@media (max-width: 900px) {
  .sv-duo {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
}

/* ==========================================================================
   Formules du hub bike fitting — trois cartes comparables d'un coup d'œil
   --------------------------------------------------------------------------
   Même gabarit pour les trois : étiquette, nom, PRIX en gros, durée, lignes
   cochées, bouton. Empilées sur téléphone (plus de rail coupé, plus de case
   radio masquée : trois cartes visibles suffisent, il n'y a plus rien à
   « mettre en avant » au toucher). Le petit indicateur à trois barres
   (`.sv-pack__niveau`) se remplit d'une, deux, trois barres : du plus simple
   au plus complet, sans mot de plus.
   ========================================================================== */
.sv-formules__aide {
  margin: 0 0 24px;
  font-size: 14px;
  color: var(--pa-sourdine);
}

.sv-packs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}
.sv-pack {
  display: flex;
  flex-direction: column;
  background: var(--pa-panneau);
  border-top: 4px solid var(--pa-accent);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    background-color 0.35s ease;
}
.sv-pack__media {
  height: clamp(150px, 16vw, 190px);
  overflow: hidden;
}
.sv-pack__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
}
/* Cadrage des visuels de formule : le visage de la cycliste de Fit Clinique
   (photo en portrait) reste dans le cadre. */
#bike-fitting-clinique .sv-pack__media img {
  object-position: center 28%;
}
.sv-pack__corps {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 22px 24px;
}
.sv-pack__tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.sv-pack__etiquette {
  margin: 0;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pa-accent);
}
.sv-pack__niveau {
  display: flex;
  gap: 4px;
  margin-left: auto;
}
.sv-pack__niveau i {
  display: block;
  width: 22px;
  height: 6px;
  background: var(--pa-accent);
}
.sv-pack--n1 .sv-pack__niveau i:nth-child(n + 2),
.sv-pack--n2 .sv-pack__niveau i:nth-child(n + 3) {
  background: var(--pa-bordure-vive);
}
.sv-pack__nom {
  margin: 0;
}
.sv-pack__fiche {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 14px;
}
.sv-pack__prix {
  font-family: var(--pa-police-titre);
  font-size: clamp(38px, 10vw, 46px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--pa-blanc);
}
.sv-pack__prix--attente {
  font-family: var(--pa-police-texte);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0;
  color: var(--pa-texte-3);
}
.sv-pack__duree {
  padding: 6px 12px;
  border: 2px solid var(--pa-bordure-vive);
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  color: var(--pa-blanc);
  white-space: nowrap;
}
.sv-pack__points {
  flex: 1;
  display: grid;
  align-content: start;
  gap: 9px;
  margin: 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--pa-bordure-douce);
  list-style: none;
}
.sv-pack__points li {
  position: relative;
  padding-left: 28px;
  font-size: 15.5px;
  line-height: 1.4;
  color: var(--pa-texte);
}
.sv-pack__points li::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 7px;
  height: 13px;
  border: solid var(--pa-accent);
  border-width: 0 3px 3px 0;
  transform: rotate(40deg);
}
.sv-pack__action .pa-btn,
.sv-pack__action .pa-btn-secondaire {
  width: 100%;
}
.sv-pack__plus {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin: -6px 0 -10px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--pa-texte-3);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sv-pack__plus:hover {
  color: var(--pa-accent);
}
/* Survol / focus : la carte se soulève et prend le fond « carte alt » — là où
   la souris existe. Sur téléphone, rien à toucher pour comparer. */
@media (hover: hover) {
  .sv-pack:hover,
  .sv-pack:focus-within {
    transform: translateY(-8px);
    background: var(--pa-carte-alt);
  }
}
@media (max-width: 900px) {
  .sv-packs {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
  .sv-pack__media {
    height: 150px;
  }
}

/* Cartes : arrivée en cascade, lignes cochées qui se dessinent (états de
   départ `sv-pre` posés par service.js). */
.sv-pack.sv-pre,
.vt-technique.sv-pre,
.sv-lies__item.sv-pre,
.sv-faq__item.sv-pre,
.vt-service.sv-pre {
  opacity: 0;
  transform: translateY(34px);
}
.sv-pack.sv-go,
.vt-technique.sv-go,
.sv-lies__item.sv-go,
.sv-faq__item.sv-go,
.vt-service.sv-go {
  animation: sv-monte 0.75s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  animation-delay: var(--sv-d, 0ms);
}
.sv-pack.sv-go .sv-pack__points li::before {
  animation: sv-coche 0.5s cubic-bezier(0.3, 1.4, 0.5, 1) backwards;
}
.sv-pack.sv-go .sv-pack__points li:nth-child(1)::before { animation-delay: calc(var(--sv-d, 0ms) + 350ms); }
.sv-pack.sv-go .sv-pack__points li:nth-child(2)::before { animation-delay: calc(var(--sv-d, 0ms) + 450ms); }
.sv-pack.sv-go .sv-pack__points li:nth-child(3)::before { animation-delay: calc(var(--sv-d, 0ms) + 550ms); }
.sv-pack.sv-go .sv-pack__points li:nth-child(4)::before { animation-delay: calc(var(--sv-d, 0ms) + 650ms); }
.sv-pack.sv-go .sv-pack__points li:nth-child(5)::before { animation-delay: calc(var(--sv-d, 0ms) + 750ms); }

/* ==========================================================================
   Option « second vélo » — une ligne
   ========================================================================== */
.sv-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 32px;
  margin-top: 22px;
  padding: 20px 24px;
  background: var(--pa-panneau);
  border-left: 4px solid var(--pa-accent);
}
.sv-option__nom {
  margin: 6px 0 4px;
  font-family: var(--pa-police-titre);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--pa-blanc);
}
.sv-option__detail {
  margin: 0;
  font-size: 15px;
  color: var(--pa-texte-2);
}
.sv-option__tarif {
  max-width: 340px;
  text-align: right;
}
.sv-option__prix {
  margin: 0 0 6px;
  font-family: var(--pa-police-titre);
  font-size: 30px;
  line-height: 1;
  color: var(--pa-blanc);
}
.sv-option__note {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--pa-texte-3);
}
.sv-option__note a {
  color: var(--pa-blanc);
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width: 900px) {
  .sv-option {
    grid-template-columns: minmax(0, 1fr);
    padding: 18px 20px;
  }
  .sv-option__tarif {
    max-width: none;
    text-align: left;
  }
}

/* ==========================================================================
   Hub massages — les carrés de techniques (include `_grille_techniques.html`)
   --------------------------------------------------------------------------
   Les classes `.vt-technique*` vivent dans vitrine.css ; ici, la V3 : la photo
   de la technique en tête, des puces de durée de 44 px au toucher, aucune
   rupture de grille.
   ========================================================================== */
.sv-formules .vt-technique {
  display: flex;
  flex-direction: column;
  padding: 0 0 20px;
}
.vt-technique__photo {
  height: clamp(150px, 15vw, 180px);
  margin-bottom: 18px;
  overflow: hidden;
}
.vt-technique__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.sv-formules .vt-technique__titre,
.sv-formules .vt-technique__description,
.sv-formules .vt-technique__durees {
  margin-left: 20px;
  margin-right: 20px;
}
.sv-formules .vt-technique__durees {
  margin-top: 16px;
}
.sv-formules a.vt-technique__duree,
.sv-formules .vt-technique__duree--attente {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  font-size: 14px;
}
.sv-formules a.vt-technique__duree {
  color: var(--pa-blanc);
  border-color: var(--pa-accent);
}
.sv-formules a.vt-technique__duree:hover {
  background: var(--pa-accent);
  color: var(--pa-fond);
}
@media (hover: hover) {
  .sv-formules .vt-technique:hover .vt-technique__photo img {
    transform: scale(1.06);
  }
}
@media (max-width: 640px) {
  .vt-technique__photo {
    height: 140px;
  }
}

/* ==========================================================================
   Questions fréquentes — <details>/<summary>, repliées, sans JavaScript
   --------------------------------------------------------------------------
   Resserré et centré (demande client du 11/09/2026, tranchée ici) : une seule
   colonne lit une question à la fois, sans le déséquilibre qu'une réponse
   ouverte donnait à deux colonnes. service.js n'en laisse qu'une ouverte.
   ========================================================================== */
.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: 0 22px;
}
.sv-faq__item .pa-texte {
  margin: 0;
  padding: 0 0 20px;
  animation: sv-ouvre 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.sv-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 60px;
  padding: 14px 0;
  cursor: pointer;
  font-family: var(--pa-police-texte);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.35;
  color: var(--pa-blanc);
  list-style: none;
}
.sv-faq__question::-webkit-details-marker {
  display: none;
}
.sv-faq__question::after {
  content: "+";
  flex: none;
  font-family: var(--pa-police-titre);
  font-size: 22px;
  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;
}

/* ==========================================================================
   À voir aussi — des vignettes photo, pas une liste de liens
   ========================================================================== */
.sv-lies {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.sv-lies__item {
  display: flex;
  flex-direction: column;
  background: var(--pa-panneau);
  border-top: 4px solid var(--pa-accent);
  color: var(--pa-blanc);
  font-weight: 800;
  font-size: 15.5px;
  line-height: 1.3;
  text-decoration: none;
  transition: background-color 0.3s ease;
}
.sv-lies__photo {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.sv-lies__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.sv-lies__nom {
  padding: 16px 20px 0;
}
.sv-lies__fleche {
  padding: 4px 20px 16px;
  color: var(--pa-accent);
  font-size: 22px;
  line-height: 1;
}
.sv-lies__item:hover {
  background: var(--pa-carte-alt);
}
@media (hover: hover) {
  .sv-lies__item:hover .sv-lies__photo img {
    transform: scale(1.06);
  }
}
/* Téléphone : une vignette carrée à gauche, le nom à droite — trois liens
   tiennent en moins d'un écran. */
@media (max-width: 640px) {
  .sv-lies {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .sv-lies__item {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 4px;
    min-height: 96px;
  }
  .sv-lies__photo {
    grid-row: 1;
    grid-column: 1;
    height: 100%;
    aspect-ratio: auto;
  }
  .sv-lies__nom {
    grid-column: 2;
    padding: 12px 8px 12px 14px;
  }
  .sv-lies__fleche {
    grid-column: 3;
    padding: 0 16px 0 0;
  }
  /* Sans photo : le nom reprend la première colonne. */
  .sv-lies__item > .sv-lies__nom:first-child {
    grid-column: 1 / 3;
  }
}

/* ==========================================================================
   Bandeau d'appel final — vraie photo, voile, prix et boutons
   ========================================================================== */
.sv-cta {
  position: relative;
  overflow: hidden;
  padding-block: 64px;
  background: var(--pa-fond-profond);
  text-align: center;
}
.sv-cta__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
}
.sv-cta__voile {
  position: absolute;
  inset: 0;
  background: rgba(1, 26, 47, 0.84);
}
.sv-cta__contenu {
  position: relative;
}
.sv-cta .vt-titre-marketing {
  margin-bottom: 14px;
}
.sv-cta__fiche {
  margin: 0 0 22px;
  font-family: var(--pa-police-titre);
  font-size: clamp(32px, 9vw, 44px);
  line-height: 1;
  color: var(--pa-blanc);
}
.sv-cta__fiche span {
  font-family: var(--pa-police-texte);
  font-size: 18px;
  font-weight: 800;
  color: var(--pa-texte-2);
}
.sv-cta .vt-lien-plus {
  margin-top: 22px;
}
@media (max-width: 640px) {
  .sv-cta {
    padding-block: 48px;
  }
  .sv-cta .vt-lien-plus > a {
    width: 100%;
  }
}

/* ==========================================================================
   Liste /services/ — onglets par famille, cartes courtes
   --------------------------------------------------------------------------
   Sans JavaScript : les trois familles sont empilées, les onglets sont de
   simples liens d'ancre (la classe `est-actif` n'existe pas). Avec service.js :
   `html.sv-onglets-actifs` (posée par le script), une seule famille à la fois.
   ========================================================================== */
.sv-index-tete {
  padding-bottom: 0;
}
.sv-onglets {
  display: flex;
  gap: 2px;
  margin-top: 28px;
  max-width: 760px;
}
.sv-onglet {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-height: 56px;
  padding: 10px 14px;
  background: var(--pa-panneau);
  border-top: 4px solid transparent;
  color: var(--pa-texte-2);
  text-decoration: none;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.sv-onglet__nom {
  font-family: var(--pa-police-titre);
  font-size: 15px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.sv-onglet__sous {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--pa-sourdine);
}
.sv-onglet:hover {
  background: var(--pa-carte-alt);
  color: var(--pa-blanc);
}
.sv-onglet.est-actif {
  background: var(--pa-carte-alt);
  border-top-color: var(--pa-accent);
  color: var(--pa-blanc);
}
.sv-onglet:focus-visible {
  outline: 2px solid var(--pa-accent);
  outline-offset: -2px;
}

.sv-index {
  padding-top: 32px;
}
.sv-famille[hidden] {
  display: none;
}
/* Quand les onglets font le tri, le titre de famille est lu par les lecteurs
   d'écran mais ne se redit pas à l'œil (c'est l'onglet actif). */
.sv-onglets-actifs .sv-famille__tete {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.sv-index .vt-bloc-pilier {
  margin-bottom: 40px;
}
.sv-index .vt-service {
  gap: 12px;
  padding: 20px 20px 22px;
}
.sv-index .vt-service__media {
  height: clamp(150px, 16vw, 200px);
  margin: -20px -20px 0;
}
.sv-index .vt-service__media a {
  display: block;
  height: 100%;
}
.sv-index .vt-service__prix {
  font-size: 30px;
}
.sv-index .vt-service__duree {
  font-size: 15px;
  color: var(--pa-texte-2);
}
.sv-index .vt-service__pied {
  align-items: center;
}
.sv-index .vt-service__action .pa-btn,
.sv-index .vt-service__action .pa-btn-secondaire {
  min-height: 52px;
}
.sv-index__mention {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--pa-sourdine);
}
@media (max-width: 640px) {
  .sv-index .vt-service__media {
    height: clamp(120px, 34vw, 150px);
  }
  .sv-onglet {
    padding: 8px 8px;
  }
  .sv-onglet__nom {
    font-size: 13px;
  }
  .sv-onglet__sous {
    font-size: 10.5px;
    line-height: 1.25;
  }
}

/* ==========================================================================
   Keyframes
   ========================================================================== */
@keyframes sv-monte {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: none; }
}
@keyframes sv-pose {
  from { transform: scale(1.18); }
  to { transform: scale(1); }
}
@keyframes sv-halo {
  0% { box-shadow: 0 0 0 0 rgba(255, 108, 2, 0.7); }
  100% { box-shadow: 0 0 0 16px rgba(255, 108, 2, 0); }
}
@keyframes sv-coche {
  0% { transform: rotate(40deg) scale(0); }
  60% { transform: rotate(40deg) scale(1.35); }
  100% { transform: rotate(40deg) scale(1); }
}
@keyframes sv-ouvre {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sv-etape,
  .sv-etape.sv-pre,
  .sv-pack.sv-pre,
  .vt-technique.sv-pre,
  .sv-lies__item.sv-pre,
  .sv-faq__item.sv-pre,
  .vt-service.sv-pre {
    opacity: 1 !important;
    transform: none !important;
  }
  .sv-etape.sv-go,
  .sv-etape.sv-go .sv-etape__photo img,
  .sv-etape.sv-go .sv-etape__n,
  .sv-pack.sv-go,
  .sv-pack.sv-go .sv-pack__points li::before,
  .vt-technique.sv-go,
  .sv-lies__item.sv-go,
  .sv-faq__item.sv-go,
  .vt-service.sv-go,
  .sv-faq__item .pa-texte {
    animation: none !important;
  }
  .sv-titre.sv-mots-pret .sv-mot {
    opacity: 1 !important;
    transform: none !important;
  }
  .sv-pack,
  .sv-etape__photo img,
  .vt-technique__photo img,
  .sv-lies__photo img {
    transition: none !important;
  }
}