/* =========================================================
   Vélo-Cité Avignon — feuille de style unique
   Palette et polices reprises du site d'origine (2016).
   Aucun framework : ~14 Ko contre 897 Ko auparavant.
   ========================================================= */

@font-face {
  font-family: "Lobster";
  src: url("fonts/lobster.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "Fira Sans";
  src: url("fonts/firasans.woff") format("woff");
  font-weight: 400;
  font-display: swap;
}

:root {
  /* Palette d'origine, contrastes corrigés pour WCAG AA */
  --petrole:      #1F5975;  /* texte principal — 7.65:1 sur blanc */
  --petrole-nuit: #1C435E;  /* pied de page */
  --turquoise:    #17787B;  /* assombri depuis #208E91 pour le contraste */
  --turquoise-cl: #D9EDEC;  /* fonds clairs */
  --vert-eau:     #75BFAD;
  --lien:         #10707F;  /* assombri depuis #2A99B6 → 4.9:1 sur blanc */
  --lien-actif:   #0C5560;
  --accent:       #0E7F82;  /* emphase — assombri depuis #109094 */
  --gris-fond:    #F4F5F5;
  --blanc:        #FFFFFF;

  /* Nuances neutres : un gris qui tire vers le bleu de la charte,
     plus juste qu'un gris pur sur les fonds et les filets. */
  --encre:        #16394C;  /* titres — 11.4:1 sur blanc */
  --encre-douce:  #4A6C7E;  /* texte secondaire — 4.8:1 */
  --filet:        #E2E8EA;  /* séparateurs */
  --filet-fort:   #CBD6DA;

  --pad: clamp(1rem, 4vw, 2.5rem);
  --max: 1080px;

  /* ---- Échelle d'espacement (base 4 px) ----
     Une seule suite de valeurs, au lieu des 17 marges différentes
     relevées avant refonte. */
  --e1: .25rem;   /*  4 px */
  --e2: .5rem;    /*  8 px */
  --e3: .75rem;   /* 12 px */
  --e4: 1rem;     /* 16 px */
  --e5: 1.5rem;   /* 24 px */
  --e6: 2rem;     /* 32 px */
  --e7: 3rem;     /* 48 px */
  --e8: 4rem;     /* 64 px */

  /* ---- Rayons ---- */
  --r-s: 8px;
  --r-m: 14px;
  --r-l: 20px;
  --r-pill: 999px;
  --radius: var(--r-m);      /* compatibilité avec les règles existantes */

  /* ---- Élévation : une seule famille, trois niveaux ---- */
  --ombre-1: 0 1px 2px rgba(22, 57, 76, .05), 0 2px 8px rgba(22, 57, 76, .05);
  --ombre-2: 0 2px 4px rgba(22, 57, 76, .05), 0 8px 24px rgba(22, 57, 76, .09);
  --ombre-3: 0 4px 8px rgba(22, 57, 76, .06), 0 16px 40px rgba(22, 57, 76, .14);
  --ombre: var(--ombre-1);
  --ombre-f: var(--ombre-2);

  /* ---- Transitions ---- */
  --t-rapide: .18s cubic-bezier(.4, 0, .2, 1);
  --t-douce:  .32s cubic-bezier(.4, 0, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  font-family: "Fira Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* Typo fluide : plus de 26pt figés en mode « mobile » */
  font-size: clamp(1rem, .96rem + .28vw, 1.15rem);
  line-height: 1.65;
  color: var(--petrole);
  background: var(--blanc);
  -webkit-font-smoothing: antialiased;
}

/* Titres : Lobster est une script serrée — un léger interlettrage l'aère
   et évite l'effet « collé » à grande taille. */
h1, h2, h3 {
  font-family: "Lobster", Georgia, serif;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: .012em;
  color: var(--encre);
  text-wrap: balance;          /* évite les orphelins en fin de titre */
}
h2 { font-size: clamp(1.9rem, 1.35rem + 2.1vw, 3rem); margin: 0 0 var(--e4); }
h3 { font-size: clamp(1.2rem, 1.05rem + .7vw, 1.5rem); margin: 0 0 var(--e2); letter-spacing: .015em; }

/* Texte courant : un gris-bleu plus doux que l'encre des titres,
   ce qui crée une hiérarchie sans changer de taille. */
p { color: var(--petrole); }
p + p { margin-top: var(--e4); }

p { margin: 0 0 1em; }
img { max-width: 100%; height: auto; display: block; }

a { color: var(--lien); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--lien-actif); }
:focus-visible { outline: 3px solid var(--lien); outline-offset: 3px; border-radius: 4px; }

.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--pad); }
section { padding-block: clamp(var(--e7), 6vw, 4.5rem); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Lien d'évitement (accessibilité clavier) */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--petrole); color: #fff; padding: .8rem 1.2rem;
  border-radius: 0 0 var(--radius) 0;
}
.skip:focus { left: 0; }

/* ---------- En-tête ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
}
/* La bordure n'apparaît qu'une fois la page défilée : en haut, l'en-tête
   se fond dans le hero au lieu de le couper d'un trait. */
.site-header.colle { border-bottom-color: var(--filet); }

.nav-bar {
  max-width: var(--max); margin-inline: auto;
  padding: var(--e3) var(--pad);
  display: flex; align-items: center; gap: var(--e4);
}

.brand {
  display: flex; align-items: center; gap: var(--e2);
  text-decoration: none; color: var(--encre);
  margin-right: auto; flex-shrink: 0;
}
.brand img { width: 38px; height: 38px; flex-shrink: 0; }
.brand span {
  font-family: "Lobster", serif; font-size: 1.35rem;
  letter-spacing: .012em; white-space: nowrap;
}

.nav-links {
  display: flex; gap: var(--e1);
  list-style: none; margin: 0; padding: 0; flex-wrap: nowrap;
}
.nav-links a {
  position: relative;
  display: block; padding: .5rem .7rem;
  border-radius: var(--r-s);
  text-decoration: none; color: var(--petrole);
  font-size: .93rem; white-space: nowrap;
  transition: color var(--t-rapide), background var(--t-rapide);
}
/* Trait qui se déploie depuis le centre — plus fin qu'un fond plein. */
.nav-links a::after {
  content: "";
  position: absolute; left: 50%; right: 50%; bottom: .18rem;
  height: 2px; border-radius: 2px;
  background: var(--turquoise);
  transition: left var(--t-rapide), right var(--t-rapide);
}
.nav-links a:hover { color: var(--encre); background: transparent; }
.nav-links a:hover::after { left: .7rem; right: .7rem; }

/* Section en cours de lecture : posée par le script. */
.nav-links a.actif { color: var(--turquoise); font-weight: 600; }
.nav-links a.actif::after { left: .7rem; right: .7rem; }

.tel-btn {
  display: inline-flex; align-items: center; gap: var(--e2);
  background: var(--turquoise); color: #fff !important; text-decoration: none;
  padding: 0 var(--e4); height: 38px;      /* aligné sur le logo et le sélecteur */
  border-radius: var(--r-pill); font-weight: 600; white-space: nowrap;
  font-size: .95rem; letter-spacing: .01em;
  box-shadow: var(--ombre-1);
  transition: background var(--t-rapide), box-shadow var(--t-rapide), transform var(--t-rapide);
}
.tel-btn:hover {
  background: var(--lien-actif); color: #fff;
  box-shadow: var(--ombre-2); transform: translateY(-1px);
}

/* Bouton menu — masqué au-dessus de 1080px */
.burger {
  display: none; width: 44px; height: 44px; border: 0; border-radius: var(--r-s);
  background: var(--turquoise-cl); cursor: pointer; padding: 0;
  align-items: center; justify-content: center;
}
.burger span { display: block; width: 20px; height: 2px; background: var(--petrole); position: relative; }
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: var(--petrole);
}
.burger span::before { top: -6px; } .burger span::after { top: 6px; }

/* ---------- Hero ---------- */
.hero {
  text-align: center;
  background: linear-gradient(to bottom, #fff 0%, var(--turquoise-cl) 100%);
  padding-block: clamp(2rem, 6vw, 4rem) clamp(3rem, 8vw, 5rem);
  position: relative; overflow: hidden;
}
.hero-logo { max-width: min(480px, 85vw); margin: 0 auto 1.5rem; }
/* (le titre du hero est visible — voir .hero-titre plus bas) */
.hero p.accroche {
  font-size: clamp(1.1rem, 1rem + .7vw, 1.5rem);
  max-width: 34ch; margin: 0 auto 2rem;
}
.hero-actions { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  padding: .9rem 1.75rem; border-radius: var(--r-pill); text-decoration: none;
  font-weight: 600; font-size: 1.02rem; letter-spacing: .01em;
  border: 1px solid transparent;
  transition: transform var(--t-rapide), box-shadow var(--t-rapide),
              background var(--t-rapide), border-color var(--t-rapide);
}
.btn-primary {
  background: var(--turquoise); color: #fff;
  box-shadow: var(--ombre-2);
}
.btn-primary:hover {
  background: var(--lien-actif); color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--ombre-3);
}
.btn-ghost {
  background: transparent; color: var(--petrole);
  border-color: var(--filet-fort);
}
.btn-ghost:hover {
  background: var(--blanc); color: var(--encre);
  border-color: var(--turquoise);
  box-shadow: var(--ombre-1);
  transform: translateY(-2px);
}

/* ---------- Bandeau concept ---------- */
.concept { background: var(--turquoise); color: #fff; }
/* Fond turquoise : tout le contenu passe en blanc. La règle générale
   `p { color: var(--petrole) }` tombait ici à 1,46:1 — illisible. */
.concept h2,
.concept p,
.concept a,
.concept .chiffre,
.concept .chiffre-note,
.concept strong { color: #fff; }
.concept .wrap { max-width: 68ch; }
.concept .chiffre {
  font-family: "Lobster", serif;
  font-size: clamp(2.6rem, 2rem + 2.4vw, 3.6rem);
  display: block; line-height: 1; letter-spacing: .012em;
}
.concept .chiffre-note {
  display: block;
  font-size: .95rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; opacity: .82;
  margin-bottom: var(--e5);
}

/* ---------- Grille de services ---------- */
.services-grid {
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  list-style: none; margin: 0; padding: 0;
}
.card {
  position: relative;
  background: var(--blanc);
  border: 1px solid var(--filet);
  border-radius: var(--r-l);
  padding: var(--e6) var(--e5);
  text-align: center;
  box-shadow: var(--ombre-1);
  transition: transform var(--t-douce), box-shadow var(--t-douce), border-color var(--t-douce);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--ombre-3);
  border-color: var(--filet-fort);
}
.card img { width: 64px; height: 64px; object-fit: contain; margin: 0 auto var(--e4); }
.card h3 { margin-bottom: var(--e2); }
.card p { font-size: .98rem; margin-bottom: 0; }
.card a.stretched { text-decoration: none; color: inherit; display: block; }

/* ---------- Blocs de service ---------- */
.service { border-top: 1px solid var(--turquoise-cl); }

/* Confort de lecture : au-delà de ~70 caractères, l'œil perd la ligne. */
.service-body p,
.concept p,
.local-texte p { max-width: 62ch; }
.service:nth-of-type(even) { background: var(--gris-fond); }
.service-head { display: flex; align-items: center; gap: var(--e4); margin-bottom: var(--e5); }
.service-head img { width: 56px; height: 56px; object-fit: contain; flex-shrink: 0; }
.service-head h2 { margin: 0; }
.service-body { max-width: 68ch; }

/* Sous-titres et listes d'interventions dans un bloc de service */
.service-body h3 {
  font-size: 1.18rem;
  color: var(--petrole);
  margin: var(--e6) 0 var(--e3);
}
.liste-services {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--e5);
  display: grid;
  gap: var(--e3);
}
.liste-services li {
  position: relative;
  padding-left: var(--e5);
  color: var(--encre-douce);
  line-height: 1.6;
}
/* Puce dessinee : un disque vert d'eau aligne sur la premiere ligne */
.liste-services li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--vert-eau);
}
.liste-services strong { color: var(--encre); }

/* Encadrés infos (horaires, tarifs) */
.infos { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin: 2rem 0; }
.info-box {
  background: var(--blanc);
  border: 1px solid var(--filet);
  border-left: 3px solid var(--turquoise);
  border-radius: var(--r-s) var(--r-m) var(--r-m) var(--r-s);
  padding: var(--e5);
  box-shadow: var(--ombre-1);
  transition: box-shadow var(--t-douce), transform var(--t-douce);
}
.info-box:hover { box-shadow: var(--ombre-2); transform: translateY(-2px); }
.service:nth-of-type(even) .info-box { background: #fff; }
.info-box h3 { font-size: 1.15rem; color: var(--turquoise); margin-bottom: var(--e2); }

/* Lignes de tarif : libelle a gauche, prix a droite, chiffres alignes */
.tarif-ligne {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--e3); margin-bottom: var(--e2);
  border-bottom: 1px dotted var(--filet-fort); padding-bottom: var(--e2);
}
.tarif-ligne:last-of-type { border-bottom: 0; }
.tarif-ligne span { color: var(--encre-douce); }
.tarif-ligne strong {
  color: var(--petrole); font-size: 1.12rem; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.tarif-note { font-size: .88rem; color: var(--encre-douce); margin-top: var(--e2); }
.info-box ul { margin: 0; padding-left: 1.1rem; }
.info-box li { margin-bottom: var(--e1); }
.info-box .prix { font-weight: 600; color: var(--accent); }

/* ---------- Galeries ---------- */
.gallery { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); margin-top: var(--e5); }
.gallery img { border-radius: var(--radius); box-shadow: var(--ombre); aspect-ratio: 4/3; object-fit: cover; width: 100%; }

/* Mobile : 178px ne laissait tenir que 2 colonnes, soit 8 rangees pour 15 visuels.
   Des vignettes plus petites ramenent la galerie a 3 colonnes. */
@media (max-width: 620px) {
  /* gap .45rem = 7,2px : deux vignettes cliquables separees de moins de 8px,
     un doigt ouvre la mauvaise photo. 10px passe le seuil tactile. */
  .gallery { grid-template-columns: repeat(3, 1fr); gap: 10px; }
}
@media (max-width: 380px) {
  .gallery { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Références ---------- */
.refs { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.ref-col h3 { color: var(--turquoise); font-size: 1.2rem; }
.ref-col ul { margin: 0; padding-left: 1.1rem; }

/* ---------- Contact ---------- */
.contact { background: var(--petrole-nuit); color: #fff; }
.contact h2 { color: #fff; }
.contact a { color: var(--vert-eau); }
.contact a:hover { color: #fff; }
.contact-grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.contact h3 { color: var(--vert-eau); font-size: 1.2rem; }
.contact address { font-style: normal; line-height: 1.8; }
.map-link {
  display: inline-block; margin-top: var(--e2); padding: .6rem 1.1rem;
  border: 1px solid var(--vert-eau); border-radius: var(--r-pill); text-decoration: none;
}
.map-link:hover { background: rgba(117,191,173,.15); }

/* ---------- Pied de page ---------- */
.site-footer {
  background: var(--petrole-nuit);
  color: rgba(255, 255, 255, .88);
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding-block: var(--e6); font-size: .9rem; text-align: center;
}
/* La règle générale `p { color: var(--petrole) }` tombait ici à 1,36:1. */
.site-footer p { color: inherit; }
.site-footer a { color: rgba(255,255,255,.9); }

/* ---------- Bouton d'appel flottant (mobile) ---------- */
.call-fab {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 90;
  display: none; align-items: center; gap: .5rem;
  background: var(--turquoise); color: #fff; text-decoration: none;
  padding: .9rem 1.3rem; border-radius: var(--r-pill); font-weight: 600;
  box-shadow: var(--ombre-f);
}

/* =========================================================
   RESPONSIVE — sur la LARGEUR uniquement.
   L'ancien site basculait sur min-height + orientation, ce qui
   faisait passer un écran de bureau en portrait en mode téléphone.
   ========================================================= */
@media (max-width: 1080px) {
  .burger { display: flex; }
  .nav-links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: #fff; flex-direction: column; gap: 0;
    padding: .5rem var(--pad) 1rem; box-shadow: var(--ombre-f);
    border-bottom: 1px solid var(--turquoise-cl);
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: .8rem .6rem; border-radius: var(--r-s); }
  /* En colonne, le trait centré n'a pas de sens : on marque la section
     active par un liseré à gauche et un fond léger. */
  .nav-links a::after { display: none; }
  .nav-links a:hover { background: var(--turquoise-cl); }
  .nav-links a.actif {
    background: var(--turquoise-cl);
    box-shadow: inset 3px 0 0 var(--turquoise);
  }
  .header-tel { display: none; }
  .call-fab { display: inline-flex; }
  .site-footer { padding-bottom: 5rem; }
}

@media (min-width: 1081px) {
  .nav-links { display: flex !important; }
}

@media print {
  .site-header, .call-fab, .hero-actions { display: none; }
  body { color: #000; font-size: 11pt; }
  section { padding-block: 1rem; }
}

/* =========================================================
   AMÉLIORATIONS
   ========================================================= */

/* ---------- Bandeau infos pratiques sous le hero ---------- */
.quick-facts {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 2rem;
  padding: 1rem var(--pad); background: var(--gris-fond);
  border-bottom: 1px solid var(--turquoise-cl);
  font-size: .95rem;
}
.quick-facts span { display: inline-flex; align-items: center; gap: .45rem; }
.quick-facts svg { width: 18px; height: 18px; flex-shrink: 0; fill: var(--turquoise); }

/* ---------- Puces à cocher (listes de services) ---------- */
.checklist { list-style: none; padding: 0; margin: 1.2rem 0; }
.checklist li {
  position: relative; padding-left: 1.9rem; margin-bottom: var(--e2);
}
.checklist li::before {
  content: ""; position: absolute; left: 0; top: .45em;
  width: 1.15rem; height: 1.15rem; border-radius: 50%;
  background: var(--turquoise-cl);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2317787B' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");
  background-size: .8rem; background-repeat: no-repeat; background-position: center;
}

/* ---------- Galerie cliquable (lightbox CSS, sans JS) ---------- */
.gallery a { display: block; border-radius: var(--radius); overflow: hidden; position: relative; }
.gallery a img { transition: transform .35s ease; }
.gallery a:hover img { transform: scale(1.04); }
.gallery a::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(31,89,117,0); transition: background .25s ease;
}
.gallery a:hover::after { background: rgba(31,89,117,.12); }

.lightbox {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(15,35,48,.92);
  display: flex; align-items: center; justify-content: center;
  padding: 2rem 1rem;
  opacity: 0; display: none;
}
.lightbox:target { opacity: 1; display: flex; animation: lb-ouvre .25s ease both; }
@keyframes lb-ouvre { from { opacity: 0 } to { opacity: 1 } }
.lightbox img {
  max-width: min(1100px, 95vw); max-height: 88vh;
  width: auto; border-radius: var(--radius); box-shadow: 0 24px 64px rgba(0, 0, 0, .45);
}
.lightbox .close {
  position: absolute; top: 1rem; right: 1.2rem;
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255,255,255,.15); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem; line-height: 1; text-decoration: none;
}
.lightbox .close:hover { background: rgba(255,255,255,.3); color: #fff; }

/* ---------- Carte ---------- */
.map-frame {
  width: 100%; aspect-ratio: 16/10; border: 0;
  border-radius: var(--radius); margin-top: var(--e3);
  filter: saturate(.9);
}
@media (max-width: 600px) { .map-frame { aspect-ratio: 4/3; } }

/* ---------- Bloc contact enrichi ---------- */
.contact-lines { list-style: none; padding: 0; margin: 0; }
.contact-lines li { display: flex; gap: .85rem; margin-bottom: var(--e4); align-items: flex-start; }
.contact-lines svg { width: 22px; height: 22px; flex-shrink: 0; fill: var(--vert-eau); margin-top: var(--e1); }
.contact-lines .label { display: block; font-size: .85rem; opacity: .75; }
.contact-lines a, .contact-lines strong { font-size: 1.08rem; font-weight: 600; }
.contact-lines strong { font-weight: 600; }

/* ---------- Bandeau d'appel avant le pied de page ---------- */
.cta-band {
  background: var(--turquoise); color: #fff; text-align: center;
}
.cta-band h2 { color: #fff; margin-bottom: var(--e2); }
.cta-band p { max-width: 50ch; margin: 0 auto var(--e5); color: #fff; }
.cta-band .btn-primary { background: #fff; color: var(--turquoise); }
.cta-band .btn-primary:hover { background: var(--turquoise-cl); color: var(--lien-actif); }

/* ---------- Apparition au défilement ---------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
  .reveal.seen { opacity: 1; transform: none; }
}

/* ---------- Retour en haut ---------- */
.to-top {
  position: fixed; left: 1rem; bottom: 1rem; z-index: 90;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(31,89,117,.85); color: #fff; text-decoration: none;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s;
}
.to-top.show { opacity: 1; visibility: visible; }
.to-top:hover { background: var(--petrole); color: #fff; }
.to-top svg { width: 20px; height: 20px; fill: currentColor; }

/* ---------- Carte : image de repli (navigateurs sans WebGL) ---------- */
.map-static {
  display: block; position: relative; margin-top: var(--e3);
  border-radius: var(--radius); overflow: hidden; text-decoration: none;
}
.map-static img { width: 100%; height: auto; display: block; }
.map-static-hint {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
  background: rgba(255,255,255,.94); color: var(--petrole);
  padding: .5rem 1.1rem; border-radius: var(--r-pill);
  font-size: .92rem; font-weight: 600; white-space: nowrap;
  box-shadow: var(--ombre);
}
.map-static:hover .map-static-hint { background: #fff; }

/* ---------- Badge de disponibilité (service ponctuel) ---------- */
.badge-dispo {
  display: inline-flex; align-items: center; gap: var(--e2);
  margin: calc(var(--e2) * -1) 0 var(--e5);
  background: var(--turquoise-cl); color: var(--lien-actif);
  padding: var(--e1) var(--e3); border-radius: var(--r-pill);
  font-size: .88rem; font-weight: 600; letter-spacing: .012em;
}
/* pastille : signale une disponibilité, sans mot en plus */
.badge-dispo::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--turquoise); flex-shrink: 0;
}

/* ---------- Intro et sous-titre de section ---------- */
.section-intro {
  max-width: 60ch; margin: 0 0 var(--e5);
  color: var(--encre-douce); font-size: 1.04rem;
}
h2.sous-titre { margin-top: var(--e8); }

/* Le bouton dans un encadré info reste lisible */
.info-box .btn { margin-top: var(--e2); font-size: .98rem; padding: .7rem 1.3rem; }

/* ---------- Revue de presse ---------- */
.presse { list-style: none; padding: 0; margin: 1rem 0 0; }
.presse li {
  padding: .7rem 0 .7rem 1.6rem; border-bottom: 1px solid var(--turquoise-cl);
  position: relative;
}
.presse li:last-child { border-bottom: 0; }
.presse li::before {
  content: "”"; position: absolute; left: 0; top: .5rem;
  font-family: "Lobster", serif; font-size: 1.5rem; color: var(--turquoise);
  line-height: 1;
}
.presse a { font-weight: 600; }

/* =========================================================
   HERO AVEC PHOTO DE L'ATELIER
   ========================================================= */
.hero {
  position: relative;
  min-height: min(88vh, 780px);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding-block: clamp(3rem, 10vw, 6rem);
  overflow: hidden;
  background: var(--petrole-nuit);   /* fond pendant le chargement de l'image */
}

/* Telephone en PAYSAGE : l'ecran ne fait plus que ~390px de haut. Le
   min(88vh, 780px) retenait 780px, soit 195% de l'ecran — titre et bouton
   d'appel tombaient hors champ. On rend la hauteur au contenu et on
   comprime les marges verticales. */
@media (max-height: 540px) and (orientation: landscape) {
  .hero {
    min-height: 0;
    padding-block: clamp(.9rem, 4vh, 1.6rem);
    justify-content: flex-start;
  }
  .hero-titre {
    font-size: clamp(1.25rem, .85rem + 1.5vw, 1.7rem);
    margin-bottom: .3rem;
  }
  .hero-marque { width: 104px; margin-bottom: .25rem; }
  .hero-marque img { height: auto; }
  .hero .accroche { display: none; }   /* le meme texte est repris dans la section suivante */
  .hero-actions { margin-top: .2rem; }
  .hero-scroll { display: none; }

  /* L'en-tete collante faisait 69px et decalait tout le hero vers le bas
     (hero_top=69 mesure) : le bouton d'appel tombait a 401px pour 390px
     d'ecran. On la compacte. */
  .site-header .nav-bar { padding-block: .3rem; }
  .brand img { width: 30px; height: 30px; }
  .brand { font-size: .95rem; }
}

/* La photo, en couverture */
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 58%;
  /* léger zoom lent : donne vie sans distraire */
  animation: heroZoom 26s ease-out forwards;
}
@keyframes heroZoom { from { transform: scale(1.06); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .hero-bg img { animation: none; } }

/* Voile : rend le texte lisible par-dessus la photo */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to bottom, rgba(16,40,55,.62) 0%, rgba(16,40,55,.72) 55%, rgba(16,40,55,.88) 100%);
}

.hero-inner { position: relative; z-index: 2; }

.hero-logo {
  max-width: min(280px, 58vw); margin: 0 auto 1.2rem;
  filter: drop-shadow(0 4px 18px rgba(0,0,0,.45));
}

.hero-titre {
  font-family: "Lobster", Georgia, serif; font-weight: 400;
  font-size: clamp(1.9rem, 1.2rem + 3vw, 3.4rem);
  line-height: 1.12; color: #fff; margin: 0 0 1rem;
  text-shadow: 0 2px 20px rgba(0,0,0,.5);
  max-width: 20ch; margin-inline: auto;
}
.hero-titre span { display: block; color: var(--vert-eau); }

.hero .accroche {
  color: rgba(255,255,255,.94); font-size: clamp(1rem, .95rem + .5vw, 1.25rem);
  max-width: 46ch; margin: 0 auto 2.2rem;
  text-shadow: 0 1px 12px rgba(0,0,0,.5);
}

.hero .btn-primary { background: var(--turquoise); color: #fff; }
.hero .btn-primary:hover { background: #12656a; color: #fff; }
.hero .btn-ghost {
  background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.6);
  backdrop-filter: blur(4px);
}
.hero .btn-ghost:hover { background: rgba(255,255,255,.22); color: #fff; }
.hero .btn svg { flex-shrink: 0; }

/* Flèche de défilement */
.hero-scroll {
  position: absolute; bottom: 1.6rem; left: 50%; margin-left: -22px;
  z-index: 2; width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.14); color: #fff;
  border: 1px solid rgba(255,255,255,.3);
  animation: flotte 2.4s ease-in-out infinite;
}
.hero-scroll:hover { background: rgba(255,255,255,.28); color: #fff; }
.hero-scroll svg { width: 20px; height: 20px; }
@keyframes flotte { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .hero-scroll { animation: none; } }
@media (max-height: 620px) { .hero-scroll { display: none; } }

/* =========================================================
   SECTION « LE LOCAL » — bande photo
   ========================================================= */
.local { background: var(--gris-fond); }
.local-grid {
  display: grid; gap: 1rem; margin-top: var(--e6);
  /* Les 3 photos sont en PAYSAGE : on garde des cadres larges,
     jamais de colonne étroite qui les écraserait. */
  grid-template-columns: repeat(2, 1fr);
}
.local-grid a {
  display: block; overflow: hidden; border-radius: var(--radius);
  position: relative; box-shadow: var(--ombre);
}
.local-grid a:first-child { grid-column: 1 / -1; }   /* le mur de vélos, pleine largeur */
.local-grid img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s cubic-bezier(.2,.7,.3,1);
}
.local-grid a:hover img { transform: scale(1.05); }
.local-grid a::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(31,89,117,0); transition: background .3s;
}
.local-grid a:hover::after { background: rgba(31,89,117,.12); }
/* Photo 1 : paysage (le mur de vélos). Photos 2 et 3 : portrait (la devanture). */
.local-grid a:first-child img { aspect-ratio: 16/9; }
.local-grid a:not(:first-child) img { aspect-ratio: 3/4; }

@media (max-width: 720px) {
  .local-grid { grid-template-columns: 1fr; }
  .local-grid a:first-child { grid-column: auto; }
  .local-grid a:first-child img { aspect-ratio: 4/3; }
  .local-grid a:not(:first-child) img { aspect-ratio: 3/4; }
}

/* =========================================================
   ANIMATIONS D'APPARITION — plus douces, décalées
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0; transform: translateY(24px);
    transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);
  }
  .reveal.seen { opacity: 1; transform: none; }
  /* décalage en cascade dans une même grille */
  .reveal:nth-child(2) { transition-delay: .08s; }
  .reveal:nth-child(3) { transition-delay: .16s; }
  .reveal:nth-child(4) { transition-delay: .24s; }
}

/* Cartes : élévation plus marquée au survol */
.card {
  transition: transform .25s cubic-bezier(.2,.7,.3,1),
              box-shadow .25s ease, border-color .25s ease;
}
.card:hover { transform: translateY(-6px); }
.card img { transition: transform .3s cubic-bezier(.2,.7,.3,1); }
.card:hover img { transform: scale(1.08); }

/* Boutons : réaction plus nette */
.btn:active { transform: translateY(1px); }

/* En-tête : ombre qui apparaît au défilement */
.site-header { transition: box-shadow .3s ease, background .3s ease; }
.site-header.colle { box-shadow: var(--ombre-2); }

/* =========================================================
   AVIS GOOGLE
   ========================================================= */
.avis {
  background:
    radial-gradient(60rem 30rem at 15% -10%, #EAF4F4 0%, transparent 60%),
    var(--gris-fond);
}

/* --- Bandeau de note --- */
.avis-entete {
  display: grid; gap: 1.6rem 2.6rem;
  grid-template-columns: auto 1fr;
  align-items: center;
  background: var(--blanc);
  border-radius: var(--r-m);
  padding: 1.6rem 1.8rem;
  box-shadow: var(--ombre);
  margin-bottom: var(--e6);
}
.avis-score { display: grid; justify-items: center; gap: .35rem; }
.avis-note {
  display: flex; align-items: baseline; gap: .15rem;
  font-family: "Lobster", serif; font-size: 3.4rem; color: var(--turquoise);
  line-height: 1;
}
.avis-note small {
  font-size: 1rem; font-family: "Fira Sans", sans-serif;
  opacity: .65; font-weight: 600;
}
.etoiles { display: inline-flex; gap: .12rem; }
.etoiles svg { width: 21px; height: 21px; fill: #F5A623; }
.etoiles .demi { fill: url(#demiEtoile); }
.etoiles-sm svg { width: 15px; height: 15px; }
.avis-meta { font-size: .88rem; text-align: center; color: var(--petrole); }
.avis-meta strong { font-weight: 600; }

/* --- Répartition des notes --- */
.avis-jauges { display: grid; gap: .3rem; align-content: center; }
.jauge-ligne {
  display: grid; grid-template-columns: 2.4rem 1fr 1.8rem;
  align-items: center; gap: .6rem;
  font-size: .82rem;
}
.jauge-lab {
  display: inline-flex; align-items: center; gap: .15rem;
  justify-content: flex-end; color: var(--petrole); opacity: .85;
}
.jauge-lab svg { width: 12px; height: 12px; fill: #F5A623; }
.jauge-piste {
  height: 7px; border-radius: var(--r-pill); background: #E6E8E8; overflow: hidden;
}
.jauge-part {
  display: block; height: 100%; width: var(--p);
  border-radius: var(--r-pill); background: #F5A623;
}
.jauge-nb { text-align: right; opacity: .7; font-variant-numeric: tabular-nums; }

/* --- Cartes --- */
.avis-grid {
  display: grid; gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}
.avis-carte {
  background: var(--blanc); border-radius: var(--r-m); padding: 1.5rem 1.6rem;
  box-shadow: var(--ombre); display: flex; flex-direction: column;
  border: 1px solid #E7EAEA;
  transition: transform .22s ease, box-shadow .22s ease;
}
.avis-carte:hover { transform: translateY(-3px); box-shadow: var(--ombre-f); }
.avis-carte .etoiles-sm { margin-bottom: var(--e3); }
.avis-carte blockquote {
  margin: 0 0 1.1rem; flex: 1;
  font-size: .97rem; line-height: 1.6; color: var(--petrole);
}
.avis-carte blockquote::before { content: "“"; }
.avis-carte blockquote::after  { content: "”"; }

/* Avis mis en avant */
.avis-vedette {
  border-color: var(--vert-eau);
  box-shadow: var(--ombre-2);
}
.avis-vedette blockquote { font-size: 1.05rem; }

.avis-auteur {
  display: flex; align-items: center; gap: .7rem; font-size: .9rem;
  border-top: 1px solid #EDEFEF; padding-top: .9rem;
}
.avis-auteur .initiale {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: var(--turquoise); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 1rem;
}
.avis-auteur .nom { font-weight: 600; display: block; color: var(--petrole); }
.avis-auteur .quand { opacity: .68; font-size: .8rem; }

.avis-actions { margin-top: var(--e6); display: flex; gap: .8rem; flex-wrap: wrap; }
.avis-source { font-size: .85rem; opacity: .7; margin-top: var(--e4); }

@media (max-width: 620px) {
  .avis-entete { grid-template-columns: 1fr; padding: 1.4rem; }
  .avis-note { font-size: 3rem; }
}

@media (prefers-reduced-motion: reduce) {
  .avis-carte { transition: none; }
  .avis-carte:hover { transform: none; }
}


/* --- Sélecteur de langue --- */
.lang-switch {
  display: inline-flex; align-items: center; height: 38px;
  border: 1px solid var(--filet-fort); border-radius: var(--r-pill);
  overflow: hidden; background: var(--blanc); flex-shrink: 0;
}
.lang-switch a {
  display: inline-flex; align-items: center; height: 100%;
  padding: 0 var(--e3); font-size: .8rem; font-weight: 600;
  color: var(--petrole); text-decoration: none; line-height: 1.3;
  letter-spacing: .02em;
}
.lang-switch a:hover { background: var(--turquoise-cl); }
.lang-switch a.actif {
  background: var(--turquoise); color: #fff;
}
.lang-switch a:focus-visible { outline: 2px solid var(--lien); outline-offset: -2px; }

/* ---------- Confort tactile ----------
   Sur un ecran tactile, une cible de 38px se rate. On passe l'en-tete a 44px
   (hauteurs solidaires : logo, selecteur de langue et bouton telephone sont
   alignes sur la meme ligne, les monter separement les desalignerait).
   Pour les liens DANS le texte, on elargit la zone touchable sans changer le
   flux : padding vertical + marge negative egale. */
@media (hover: none) and (pointer: coarse) {
  /* .tel-btn est en display:none sous 1080px (remplace par le bouton d'appel
     flottant, deja 100x56) : inutile de le viser ici. */
  .lang-switch, .lang-switch a { height: 44px; }

  .service-body p > a:not(.btn),
  .info-box p > a:not(.btn),
  .presse a,
  .contact-lines a:not(.btn) {
    padding-block: .55rem;
    margin-block: -.55rem;
    display: inline-block;
  }
}

/* Sur mobile, 4 titres passent a 2-3 lignes (h1 du hero, "Notre atelier, 44 rue
   Guillaume Puy", etc.). Un interligne de 1,10 colle alors les lignes entre
   elles : on desserre uniquement la ou les titres se cassent. */
@media (max-width: 620px) {
  h1, .hero-titre { line-height: 1.22; }   /* .hero-titre est une classe : sans elle, le h1 du hero garde 1,12 */
  h2, h3 { line-height: 1.24; }
}


/* --- Engrenage animé de l'en-tête --- */
.brand picture { display: inline-flex; flex-shrink: 0; }
.brand img {
  transform-origin: 50% 50%;
  will-change: transform;
}

@keyframes engrenageTour { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: no-preference) {
  /* 1. à l'arrivée sur la page */
  .brand img { animation: engrenageTour 1.1s cubic-bezier(.34, .01, .2, 1) both; }

  /* 2. au survol : rotation continue, douce */
  .brand:hover img,
  .brand:focus-visible img {
    animation: engrenageTour 3.2s linear infinite;
  }

  /* 3. au clic : un tour rapide (classe posée par le script) */
  .brand img.tourne {
    animation: engrenageTour .75s cubic-bezier(.3, 0, .2, 1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand img,
  .brand:hover img,
  .brand img.tourne { animation: none; }
}


/* =========================================================
   TRICYCLE INTÉGRÉ AUX SECTIONS
   Il traverse le bas du bloc qui l'accueille, sans bande dédiée.
   ========================================================= */
.tricycle-hote {
  position: relative;
  overflow: hidden;           /* il ne déborde jamais du bloc */
}
/* de la place sous le contenu pour qu'il ne chevauche pas le texte */
/* Réserve calculée depuis la taille du tricycle : hauteur (≈ 0,67 × largeur)
   + sa marge basse + une respiration. Pas de valeur en dur à resynchroniser. */
.tricycle-hote {
  --taille: 132px;
  --marge-bas: 1.1rem;
}
.tricycle-hote > .wrap {
  position: relative; z-index: 1;
  padding-bottom: calc(var(--taille) * .67 + var(--marge-bas) + 1rem);
}

.tricycle-deco {
  /* Course réelle, mesurée sur la largeur du bloc (et non sur celle de
     l'image : dans translateX, un % se réfère à l'élément déplacé).
     min() borne le déplacement sur les très grands écrans. */
  --course: min(52vw, calc((var(--max) - 2 * var(--pad) - var(--taille)) * .78));

  position: absolute;
  bottom: var(--marge-bas);
  left: var(--pad);
  width: var(--taille);
  line-height: 0;
  z-index: 0;
  pointer-events: none;
  transform: translate3d(calc(var(--avance, 0) * var(--course)), 0, 0);
}
.tricycle-deco picture { display: block; transform-origin: 50% 50%; }
.tricycle-deco img {
  width: 100%; height: auto; display: block;
  transform: rotate(var(--roulis, 0deg));
  transform-origin: 70% 100%;
  filter: drop-shadow(0 6px 7px rgba(31, 89, 117, .14));
}

/* Le sol sur lequel il roule : un trait qui s'efface aux deux bouts. */
.tricycle-hote::after {
  content: "";
  position: absolute;
  left: var(--pad); right: var(--pad);
  bottom: var(--marge-bas);
  height: 1px;
  z-index: 0;
  background: linear-gradient(to right,
    transparent, rgba(31,89,117,.14) 15%, rgba(31,89,117,.14) 85%, transparent);
}

/* Sens inverse : départ à droite, image retournée. */
.tricycle-deco.vers-gauche {
  left: auto; right: var(--pad);
  transform: translate3d(calc(var(--avance, 0) * var(--course) * -1), 0, 0);
}
/* Le miroir s'applique au conteneur, avec une origine centrale : posé sur
   l'image, il pivotait autour du point de tangage (70%) et décalait le
   tricycle de ~53 px. Le tangage, lui, garde son pivot sur la roue arrière. */
.tricycle-deco.vers-gauche picture { transform: scaleX(-1); }

/* Sur les fonds turquoise, le trait et l'ombre passent en clair.
   Ciblé par la section elle-même : pas de :has(), support universel. */
.concept::after,
.cta-band::after {
  background: linear-gradient(to right,
    transparent, rgba(255,255,255,.30) 15%, rgba(255,255,255,.30) 85%, transparent);
}
.sur-fonce img { filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .20)); }

@media (max-width: 620px) {
  .tricycle-hote { --taille: 92px; --marge-bas: .9rem; }
  .tricycle-deco { --course: calc(100vw - 2 * var(--pad) - var(--taille)); }
}

/* Mouvement limité : le tricycle reste en place, sans animation. */
@media (prefers-reduced-motion: reduce) {
  .tricycle-deco,
  .tricycle-deco.vers-gauche { transform: none; }
}


/* =========================================================
   ANIMATIONS THÉMATIQUES
   ========================================================= */

/* --- Engrenage décoratif : il tourne au fil du défilement --- */
.engrenage-hote { position: relative; overflow: hidden; }
.engrenage-deco {
  position: absolute;
  top: 2.2rem; right: -34px;
  width: 152px; height: 152px;
  opacity: .07;
  pointer-events: none;
  z-index: 0;
}
.engrenage-deco img {
  width: 100%; height: 100%;
  display: block;
  transform: rotate(var(--tour, 0deg));
  transform-origin: 50% 50%;
}
.engrenage-hote > .wrap { position: relative; z-index: 1; }

/* --- Icônes de section : elles s'animent à l'apparition --- */
.service-head img { transform-origin: 50% 70%; }

@media (prefers-reduced-motion: no-preference) {
  /* la clé pivote comme si l'on serrait un boulon */
  #reparation .service-head img { animation: cleServre 2.4s ease-in-out .2s 2; }
  /* les roues avancent */
  #location .service-head img,
  #vente .service-head img { animation: rouleDoux 1.4s ease-out .1s both; }
  /* le tricycle démarre */
  #velo-taxi .service-head img { animation: demarre 1.2s cubic-bezier(.3,0,.2,1) both; }

  /* au survol du titre, l'icône réagit */
  .service-head:hover img { animation: sursaut .5s ease; }
}

@keyframes cleServre {
  0%, 100% { transform: rotate(0deg); }
  30%      { transform: rotate(-17deg); }
  55%      { transform: rotate(4deg); }
}
@keyframes rouleDoux {
  from { transform: translateX(-14px) rotate(-22deg); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
@keyframes demarre {
  from { transform: translateX(-20px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
@keyframes sursaut {
  0%, 100% { transform: none; }
  40%      { transform: translateY(-4px) rotate(-6deg); }
}

/* --- Compteurs --- */
.compteur { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .engrenage-deco img { transform: none; }
  .service-head img,
  .service-head:hover img { animation: none !important; }
}


/* Dans le bandeau d'appel, le tricycle termine sa course au CENTRE.
   Il part du bord droit (right: var(--pad)) et doit parcourir la distance
   qui sépare ce bord du milieu de la section, moins la moitié de sa largeur. */
.cta-band .tricycle-deco {
  /* Attention : dans translateX, un % se réfère à l'élément déplacé.
     La course se calcule donc en unités absolues, depuis le bord droit
     du bloc (right: var(--pad)) jusqu'au milieu de la section.
     Largeur visible du bloc = min(100vw, --max). */
  /* Le tricycle est positionné par rapport au .wrap (largeur min(100vw,
     --max)), pas à la section : c'est lui le conteneur de référence.
     Depuis son bord droit, la distance jusqu'au milieu du wrap vaut donc
     la moitié de sa largeur, moins le padding et la demi-largeur du sujet. */
  --largeur-wrap: min(100vw, var(--max));
  --course: calc(var(--largeur-wrap) / 2 - var(--pad) - var(--taille) / 2);
}


/* --- Engrenage du logo d'accueil : il tourne au défilement --- */
/* Le logo est une image d'un seul tenant : l'engrenage ne peut pas tourner
   à l'intérieur. On superpose donc le même engrenage, isolé, exactement
   par-dessus le sien. Position mesurée sur le fichier source (600×374) :
   centre à 51,333 % / 39,305 %, diamètre 14,833 % de la largeur. */
/* Conteneur de la marque : il épouse le logo et sert de repère au rouage.
   Le rouage est volontairement HORS du <picture> — un <source srcset> agit
   sur toutes les <img> qu'il contient, et remplaçait l'engrenage par le
   logo complet (mesuré : currentSrc = logo-sans-rouage.webp, 600×374). */
.hero-marque {
  position: relative;
  max-width: min(280px, 58vw);
  margin: 0 auto 1.2rem;
}
.hero-marque picture { display: block; }
.hero-marque .hero-logo { max-width: 100%; margin: 0; display: block; }

.hero-rouage {
  position: absolute;
  /* 89 px sur 600 de large dans le fichier source. La hauteur est forcée à
     l'identique : sans cela, la règle de largeur du logo l'écrase (mesuré
     42 × 26 px au lieu de 42 × 42). */
  width: 14.833%;
  height: auto;
  aspect-ratio: 1 / 1;
  left: 51.333%;
  top: 39.305%;
  transform: translate(-50%, -50%) rotate(var(--rouage, 0deg));
  transform-origin: 50% 50%;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .hero-rouage { transform: translate(-50%, -50%); }
}


/* =========================================================
   FINITIONS
   ========================================================= */
/* FINITIONS PREMIUM */

/* Alternance discrète des fonds : rythme la page sans bandes marquées. */
.service:nth-of-type(odd) { background: var(--blanc); }
.service:nth-of-type(even) { background: #FAFBFB; }

/* Séparateur de section : un filet fin au lieu d'un trait franc. */
.service { border-top: 1px solid var(--filet); }


/* Prix : chiffres alignés et mis en valeur sans crier. */
.prix {
  font-variant-numeric: tabular-nums;
  font-weight: 600; color: var(--accent);
}

/* Liens de contenu : soulignement fin qui s'épaissit au survol. */
.service-body a:not(.btn),
.concept a:not(.btn) {
  text-underline-offset: .22em;
  text-decoration-thickness: 1px;
  transition: text-decoration-thickness var(--t-rapide), color var(--t-rapide);
}
.service-body a:not(.btn):hover,
.concept a:not(.btn):hover { text-decoration-thickness: 2px; }

/* Images : un filet très léger évite qu'une photo claire « flotte ». */
.gallery img, .local-grid img {
  border: 1px solid var(--filet);
  box-shadow: var(--ombre-1);
}


/* =========================================================
   FAQ
   ========================================================= */
.faq-liste {
  display: grid; gap: var(--e2);
  max-width: 62rem;
}
.faq-item {
  background: var(--blanc);
  border: 1px solid var(--filet);
  border-radius: var(--r-m);
  box-shadow: var(--ombre-1);
  transition: box-shadow var(--t-douce), border-color var(--t-douce);
}
.faq-item:hover { box-shadow: var(--ombre-2); }
.faq-item[open] { border-color: var(--filet-fort); box-shadow: var(--ombre-2); }

.faq-item summary {
  display: flex; align-items: center; gap: var(--e4);
  padding: var(--e4) var(--e5);
  cursor: pointer; list-style: none;
  font-weight: 600; font-size: 1.04rem;
  color: var(--encre); line-height: 1.45;
}
.faq-item summary::-webkit-details-marker { display: none; }

/* Chevron dessiné en CSS : pas d'image à charger. */
.faq-item summary::after {
  content: ""; margin-left: auto; flex-shrink: 0;
  width: 10px; height: 10px;
  border-right: 2px solid var(--turquoise);
  border-bottom: 2px solid var(--turquoise);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--t-rapide);
}
.faq-item[open] summary::after {
  transform: rotate(-135deg) translate(-3px, -3px);
}
.faq-item summary:hover { color: var(--turquoise); }
.faq-item summary:focus-visible {
  outline: 3px solid var(--lien); outline-offset: -3px;
  border-radius: var(--r-m);
}

.faq-rep {
  padding: 0 var(--e5) var(--e5);
  color: var(--petrole);
}
.faq-rep p { margin: 0; max-width: 62ch; }

@media (max-width: 620px) {
  .faq-item summary { padding: var(--e4); font-size: 1rem; }
  .faq-rep { padding: 0 var(--e4) var(--e4); }
}

/* ═══ DEMANDE DE DEVIS ═══════════════════════════════════════════
   Le site n'avait AUCUN formulaire : 10 liens `tel:` et 1 `mailto:`.
   Un touriste étranger, ou quelqu'un à 22 h, n'avait aucun moyen
   d'écrire. C'est ce trou que cette section comble. */
.devis { background: var(--gris-fond); }
.devis-intro {
  max-width: 62ch;
  color: var(--encre-douce);
  margin-bottom: var(--e6);
}
.devis-form {
  max-width: 620px;
  background: var(--blanc);
  border: 1px solid var(--filet);
  border-radius: var(--r-m);
  padding: var(--e6);
  box-shadow: var(--ombre-1);
}
.devis-form .champ { margin-bottom: var(--e5); }
.devis-form label {
  display: block;
  font-weight: 600;
  margin-bottom: var(--e2);
}
.devis-form .opt { font-weight: 400; color: var(--encre-douce); }
.devis-form input,
.devis-form select,
.devis-form textarea {
  width: 100%;
  font: inherit;
  color: var(--encre);
  background: var(--blanc);
  border: 1px solid var(--filet-fort);
  border-radius: var(--r-s);
  padding: .8rem 1rem;
  /* 16px minimum : en dessous, iOS ZOOME sur le champ au focus et
     casse la mise en page. Contrainte mesurée, pas esthétique. */
  font-size: 16px;
}
.devis-form textarea { resize: vertical; min-height: 120px; }
.devis-form input:focus,
.devis-form select:focus,
.devis-form textarea:focus {
  outline: 2px solid var(--turquoise);
  outline-offset: 1px;
  border-color: var(--turquoise);
}
.btn-devis { width: 100%; }
.devis-note {
  font-size: .88rem;
  color: var(--encre-douce);
  line-height: 1.6;
  margin: var(--e4) 0 0;
}
.info-actions { display: flex; flex-wrap: wrap; gap: var(--e3); }

/* ═══ PAGES DE SERVICE (réparation, location) ═══════════════════
   Une page par intention de recherche : « réparation vélo Avignon »
   et « location vélo Avignon » ne se répondent pas avec la même page.
   Ces classes n'existaient pas — les pages étaient créées avant elles. */
.hero-page {
  background: var(--gris-fond);
  border-bottom: 1px solid var(--turquoise-cl);
}
.hero-page h1 { margin-block: var(--e3) var(--e4); }

/* Fil d'Ariane : aide Google à comprendre la hiérarchie, et le visiteur
   à revenir à l'accueil. */
.fil {
  font-size: .88rem;
  color: var(--encre-douce);
  margin-bottom: var(--e2);
}
.fil a { color: var(--lien); }

.chapo {
  font-size: 1.12rem;
  line-height: 1.7;
  max-width: 62ch;
  color: var(--encre);
}

/* Alternance de fond entre sections, pour découper la lecture. */
.service.alt { background: var(--gris-fond); }

.hero-page .hero-actions { margin-top: var(--e5); }