/* ==========================================================================
   PAGE ACCUEIL VÉLO — styles propres à accueil-velo.html
   Chargé APRÈS styles.css : réutilise ses tokens et composants (nav, boutons,
   pill, h-display, FAQ, CTA final, footer). Aucune valeur
   de couleur en dur : tout passe par les tokens de :root.
   ========================================================================== */

/* Ancres : on ne passe pas sous la nav fixe */
.page-velo [id]{scroll-margin-top:6rem}

/* ---------- 1. Intro ---------- */
.velo-hero{background:var(--beige);padding:9.25rem var(--pad-x) 6.5rem}
.velo-hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.velo-hero-text{display:flex;flex-direction:column}
.velo-hero h1{font-family:var(--font-display);font-weight:400;font-size:var(--fs-h1);line-height:1.05;color:var(--ink);text-wrap:balance}
.velo-lead{margin-top:1.5rem;max-width:32.5rem;font-size:var(--fs-lead);line-height:1.55;color:var(--ink)}
.velo-lead strong{font-weight:600}
.velo-hero-ctas{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
.velo-hero-ctas .btn-acid,.velo-hero-ctas .btn-outline{align-self:auto}


.velo-hero-visual{margin:0;justify-self:end;width:min(100%,30rem);border-radius:var(--r-lg);overflow:hidden}
.velo-hero-visual img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:center 35%}


/* ---------- Histoire ---------- */
.velo-story-grid{display:grid;grid-template-columns:5fr 7fr;gap:4rem;align-items:start}
.velo-prose{display:flex;flex-direction:column;gap:1.25rem;max-width:40rem}
.velo-prose p{font-size:var(--fs-body-lg);line-height:1.65;color:var(--ink)}
.velo-prose strong{font-weight:600}

/* ---------- En-têtes de section de la page ---------- */
.velo-sec-head{max-width:45rem}
.velo-sec-head .h-display{margin:0}
.velo-sec-lead{margin-top:1.25rem;font-size:var(--fs-body-lg);line-height:1.6;color:var(--text-2)}

/* ---------- 2. Services ---------- */
.velo-services{display:grid;grid-template-columns:5fr 7fr;gap:3rem;margin-top:3.5rem;align-items:start}
.velo-services-photo{position:sticky;top:6.5rem;margin:0}
.velo-services-photo img{width:100%;height:auto} /* photo détourée et inclinée : jamais recadrée */
.velo-services-photo figcaption{margin-top:.75rem;font-family:var(--font-sans);font-size:var(--fs-caption);color:var(--text-3)}
/* Paquet de photos inclinées (local vélo) : cartes empilées, chacune avec son
   inclinaison ; « suivante » envoie la carte du dessus derrière la pile. */
.velo-services{align-items:stretch}  /* la colonne photo prend la hauteur de la liste de services… */
.velo-services-photo.velo-deck{position:static;display:flex;flex-direction:column;width:100%;contain:size} /* contain : n'agrandit pas la rangée, en prend la hauteur */
.velo-deck .deck-cards{position:relative;width:100%;aspect-ratio:440/496;flex:0 1 auto;min-height:0;container-type:size} /* …et le paquet + flèches ne la dépassent jamais (le paquet rétrécit en hauteur) */
/* chaque carte prend la forme de sa photo (pas de recadrage) ; --w fixe sa largeur */
.deck-card{
  position:absolute;left:50%;top:50%;width:var(--w,73%);padding:.5rem;
  background:var(--white);border-radius:var(--r-sm);border:1px solid rgba(var(--rgb-ink),.06);
  transform:translate(calc(-50% + var(--dx,0%)),calc(-50% + var(--dy,0%))) rotate(var(--rot,0deg)); /* décalages en % de la carte : suivent sa taille */
  transition:transform .32s cubic-bezier(.2,.7,.2,1),opacity .22s ease;
}
.deck-card img{width:100%;height:auto;border-radius:.1875rem;display:block}
.deck-card:nth-child(1){--w:min(73cqw,66cqh)}   /* local vélo : vertical — largeur bornée par la largeur ET la hauteur du paquet */
.deck-card:nth-child(2){--w:min(57cqw,48cqh)}   /* coin réparation : très haut */
.deck-card:nth-child(3){--w:min(88cqw,115cqh)}  /* prise de recharge : horizontal */
.deck-card[data-pos="0"]{--rot:-2.5deg;z-index:3}
.deck-card[data-pos="1"]{--rot:4deg;--dx:7%;--dy:1%;z-index:2}
.deck-card[data-pos="2"]{--rot:-7deg;--dx:-7%;--dy:2%;z-index:1}
.deck-card.is-leaving{--rot:-12deg;--dx:-55%;--dy:3%;opacity:0;z-index:4}
.deck-foot{display:flex;justify-content:center;flex:none;margin-top:1.25rem}
.velo-deck .arrow-btn{display:flex} /* visibles aussi sur mobile (les sliders du site masquent leurs flèches ≤900px) */
@media (prefers-reduced-motion:reduce){ .deck-card{transition:none} }
.service-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.service{display:flex;flex-direction:column;gap:1.25rem;padding:1.5rem;border-radius:var(--r-md);background:var(--white)}
.service h3,.tip h3{color:var(--ink)}
.service p,.tip p{margin-top:.5rem;font-size:var(--fs-body);line-height:1.5;color:var(--text-2)}
.tip strong{font-weight:600;color:var(--ink)}

/* ---------- 3 + 4. Itinéraires & cols ---------- */
.velo-routes{display:grid;grid-template-columns:1fr 1fr;gap:4rem;margin-top:3.5rem;align-items:start}
.velo-map{position:sticky;top:6.5rem;margin:0;padding:2.5rem 2.5rem 2rem;border-radius:var(--r-lg);background:url(../img/velo-portrait-fond.jpg) center/cover}
.velo-map-logo{position:absolute;left:6%;bottom:12%;width:34% !important;filter:drop-shadow(0 .375rem .875rem rgba(var(--rgb-shadow),.28)) !important}
.velo-map img{width:100%;height:auto;filter:drop-shadow(0 1.125rem 2.5rem rgba(var(--rgb-shadow),.18))}
.velo-map figcaption{margin-top:1.25rem;text-align:center;font-family:var(--font-sans);font-size:var(--fs-caption);color:var(--ink)}
.velo-routes-text h3{font-size:var(--fs-h3);color:var(--ink)}
.velo-routes-text h3:not(:first-child){margin-top:3rem}
.velo-routes-text p{margin-top:.75rem;font-size:var(--fs-body-lg);line-height:1.6;color:var(--ink)}
.velo-routes-text strong{font-weight:600}
.col-list{list-style:none;margin-top:1.25rem;border-top:1px solid rgba(var(--rgb-ink),.12)}
.col-list li{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.875rem 0;border-bottom:1px solid rgba(var(--rgb-ink),.12)}
.col-name{font-family:var(--font-sans);font-weight:600;font-size:var(--fs-body-lg);color:var(--ink)}
.col-alt{font-family:var(--font-sans);font-size:var(--fs-ui);color:var(--green-deep);font-variant-numeric:tabular-nums}
.velo-more{margin-top:2.5rem !important}
.velo-more-article + .velo-more-ext{margin-top:1rem !important}
.velo-more a,.tip a{color:var(--green-deep);text-decoration:underline;text-underline-offset:.1875rem}
.velo-more a{display:inline-flex;align-items:center;gap:.375rem;font-weight:500}
.velo-more .ico{width:1.125rem;height:1.125rem}

/* ---------- 5. Conseils ---------- */
.tips{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:3.5rem}
.tip{display:flex;flex-direction:column;padding:1.5rem;border-radius:var(--r-md);background:var(--white)}
.tip .service-ico{margin-bottom:1.25rem}
.tips-extra{margin-top:2rem;max-width:45rem;font-size:var(--fs-body-lg);line-height:1.6;color:var(--ink)}
.tips-extra strong{font-weight:600}

/* ---------- FAQ : section blanche, déjà stylée par styles.css ---------- */
.page-velo .faq-section{padding-bottom:var(--space-section)}

/* ---------- 6. Réserver + liens utiles ---------- */
.velo-links{margin-bottom:4rem}
.velo-links h2{color:var(--ink)}
.velo-links ul{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.25rem}
.velo-links a{position:relative;display:flex;flex-direction:column;gap:.25rem;height:100%;padding:1.25rem 3.25rem 1.25rem 1.25rem;border-radius:var(--r-md);border:1px solid rgba(var(--rgb-ink),.14);transition:background .15s ease}
.velo-links a:hover{background:var(--beige)}
.velo-links strong{font-family:var(--font-sans);font-weight:600;font-size:var(--fs-body);color:var(--ink)}
.velo-links span{font-family:var(--font-sans);font-size:var(--fs-sm);color:var(--text-2)}
.velo-links .ico{position:absolute;top:1.25rem;right:1.25rem;width:1.25rem;height:1.25rem;color:var(--green-deep)}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1100px){
  .velo-hero-grid{gap:2.5rem}
  .velo-hero h1{font-size:3.25rem}
  .tips{grid-template-columns:1fr 1fr}
  .service-list{grid-template-columns:1fr}
  .velo-routes{gap:2.5rem}
}

@media (max-width:900px){
  .velo-hero{padding-top:7.5rem;padding-bottom:4rem}
  .velo-hero-grid,.velo-story-grid,.velo-services,.velo-routes{grid-template-columns:1fr}
  .velo-hero h1{font-size:clamp(2.25rem,8vw,3rem)}
  .velo-hero-visual{justify-self:stretch;width:100%}
  .velo-hero-visual img{aspect-ratio:1/1;object-position:center 40%}
  .velo-story-grid{gap:1.5rem}
  .velo-services,.velo-routes{gap:2rem;margin-top:2.5rem}
  .velo-services-photo{position:static}
  .velo-map{position:relative;top:auto}
  .velo-services-photo img{max-width:26.25rem;margin:0 auto}
  .velo-deck{width:100%;max-width:24rem;margin:0 auto}
  .velo-services-photo.velo-deck{contain:none}
  .velo-deck .deck-card img{max-width:none;margin:0}
  .service-list{grid-template-columns:1fr 1fr}
  .velo-map{padding:1.5rem}
  .tips{margin-top:2.5rem}
  .page-velo .faq-section{padding-bottom:5rem}
  .velo-links ul{grid-template-columns:1fr}
}

@media (max-width:600px){
  .velo-hero-ctas{flex-direction:column}
  .velo-hero-ctas a{width:100%}
  /* services & conseils : cartes horizontales compactes */
  .service-list,.tips{grid-template-columns:1fr;gap:.75rem}
  .service{flex-direction:row;align-items:flex-start;gap:1rem;padding:1.25rem}
  .tip{padding:1.25rem}
  .tip .service-ico{margin-bottom:1rem}
  .service-ico{width:2.75rem;height:2.75rem}
  .service-ico .ico{width:1.5rem;height:1.5rem}
  .velo-routes-text h3{font-size:1.5rem}
  .velo-routes-text h3:not(:first-child){margin-top:2.5rem}
}