/* ===== VARIABLES ===== */
:root {
  --noir: #0b0b0b;
  --gris: #1f1f1f;
  --gris2: #2e2e2e;
  --blanc: #f5f5f5;
  --muted: #9a9a9a;
  --orange: #e8582a;
  --orange2: #ff7a45;
  --display: 'Barlow Condensed', sans-serif;
  --body: 'Barlow', sans-serif;
  --banner-h: 42px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Les animations d'apparition décalent les blocs de 60px sur le côté avant de
   les révéler, ce qui rend le document plus large que l'écran. Posé sur body
   seul, Chrome Android laisse quand même scroller latéralement : il faut aussi
   le poser sur html. `clip` plutôt que `hidden` pour ne pas transformer la
   racine en conteneur de défilement (hidden est le repli). */
html, body { overflow-x: hidden; }
@supports (overflow: clip) {
  html, body { overflow-x: clip; }
}
body {
  font-family: var(--body);
  background: var(--noir);
  color: var(--blanc);
  line-height: 1.6;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* ===== TYPO ===== */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1;
}
h2 { font-size: clamp(40px, 6vw, 72px); font-style: italic; }
h2 em { font-style: italic; color: var(--orange); }
h3 { font-size: 26px; }
h4 { font-size: 20px; color: var(--orange); margin-bottom: 4px; }
.eyebrow {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 14px;
  color: var(--orange);
  margin-bottom: 12px;
}
.eyebrow::before {
  content: '';
  display: inline-block;
  width: 30px; height: 2px;
  background: var(--orange);
  vertical-align: middle;
  margin-right: 10px;
}

/* ===== BOUTONS ===== */
.btn {
  display: inline-block;
  font-family: var(--display);
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 18px;
  padding: 14px 32px;
  background: var(--orange);
  color: #fff;
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  transition: transform .25s, background .25s;
}
.btn:hover { background: var(--orange2); transform: translateX(4px); }
.btn-ghost { background: transparent; box-shadow: inset 0 0 0 2px var(--orange); }
.btn-ghost:hover { background: var(--orange); }
.btn-small { padding: 15px 44px; font-size: 26px;}

/* ===== BANNIÈRE OUVERTURE ===== */
.banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 110;
  height: var(--banner-h);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 16px;
  background: var(--orange);
  color: #fff;
  font-family: var(--display);
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
}
.banner::before, .banner::after {
  content: '';
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #fff;
  flex: none;
  animation: bannerDot 1.8s ease-in-out infinite;
}
.banner::after { animation-delay: .9s; }
@keyframes bannerDot { 50% { opacity: .25; } }

/* ===== HEADER ===== */
.header {
  position: fixed;
  top: var(--banner-h); left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 40px;
  transition: background .3s, padding .3s;
}
.header.scrolled { background: rgba(11,11,11,.95); padding: 10px 40px; }
.logo img { height: 70px; }
.nav { display: flex; gap: 32px; }
.nav a {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 17px;
  position: relative;
}
.nav a::after {
  content: '';
  position: absolute;
  left: 0; bottom: -4px;
  width: 0; height: 2px;
  background: var(--orange);
  transition: width .3s;
}
.nav a:hover::after { width: 100%; }
.burger { display: none; background: none; border: 0; cursor: pointer; }
.burger span { display: block; width: 26px; height: 3px; background: #fff; margin: 5px 0; transition: .3s; }

/* ===== HERO ===== */
.hero {
  min-height: calc(100vh - var(--banner-h));
  display: flex;
  align-items: center;
  padding: calc(120px + var(--banner-h)) 40px 80px;
  position: relative;
  overflow: hidden;
  background: radial-gradient(ellipse at 70% 40%, #1a1a1a 0%, var(--noir) 60%);
}
/* lignes orange façon logo */
.hero-lines span {
  position: absolute;
  left: -20%;
  width: 140%;
  height: 4px;
  background: var(--orange);
  transform: rotate(-12deg) scaleX(0);
  transform-origin: left;
  animation: lineIn 1.2s cubic-bezier(.7,0,.2,1) forwards;
  opacity: .9;
}
.hero-lines span:nth-child(1) { top: 62%; animation-delay: .1s; }
.hero-lines span:nth-child(2) { top: 68%; height: 8px; animation-delay: .25s; }
.hero-lines span:nth-child(3) { top: 76%; height: 14px; animation-delay: .4s; opacity: .5; }
@keyframes lineIn { to { transform: rotate(-12deg) scaleX(1); } }

.hero-content { position: relative; z-index: 2; max-width: 880px; }
.hero h1 {
  font-size: clamp(64px, 11vw, 150px);
  font-style: italic;
  font-weight: 900;
  letter-spacing: -2px;
  margin-bottom: 28px;
}
/* le masque ne doit rogner que par le bas (sens de l'animation) : on élargit
   la zone de clipping en haut et à droite pour ne pas couper l'italique ni le
   point final, sans décaler le texte (padding compensé par une marge négative) */
.hero h1 .line {
  display: block;
  overflow: hidden;
  padding: .18em .35em 0 0;
  margin: -.18em -.35em 0 0;
}
.hero h1 .line span {
  display: block;
  transform: translateY(110%);
  animation: up .8s cubic-bezier(.2,.8,.2,1) forwards;
}
.hero h1 .line:nth-child(2) span { animation-delay: .12s; }
.hero h1 .line:nth-child(3) span { animation-delay: .24s; }
.hero h1 .accent span { color: var(--orange); }
@keyframes up { to { transform: translateY(0); } }

.hero-text { font-size: 19px; color: var(--muted); max-width: 520px; margin-bottom: 36px; opacity: 0; animation: fade .8s .5s forwards; }
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; opacity: 0; animation: fade .8s .7s forwards; }
@keyframes fade { to { opacity: 1; } }

/* balle qui rebondit + raquette*/

.scroll-hint {
  position: absolute;
  bottom: 30px; left: 40px;
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 13px;
  color: var(--muted);
  padding-left: 40px;
}
.scroll-hint::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 30px; height: 1px;
  background: var(--muted);
  animation: slide 1.5s infinite;
}
@keyframes slide { 50% { width: 10px; } }

.hero-jongle {
  position: absolute;
  right: 8%;
  bottom: 40px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  z-index: 1;
}
.hero-ball {
  position: relative;
  width: 90px; height: 90px;
  margin-left: 30px;   /* centre la balle sur le tamis (qui est à gauche du svg) */
  margin-bottom: 2px;  /* la balle s'arrête juste sur la tranche */
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffe86b, #cddc39 60%, #8fa11a);
  box-shadow: 0 30px 40px rgba(0,0,0,.6);
  animation: bounce 3.2s ease-in-out infinite;
}
.hero-ball::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,.55);
  clip-path: inset(0 40% 0 40%);
  transform: rotate(-30deg);
}
/* 0% = impact, 50% = sommet — vitesse continue, sans à-coup en bas */
@keyframes bounce {
  0%   { transform: translateY(0) scale(1, 1); }
  50%  { transform: translateY(-260px) scale(1, 1); }
  100% { transform: translateY(0) scale(1, 1); }
}

.hero-racket {
  width: 210px;
  transform-origin: 85% 50%; /* pivote côté manche */
  animation: racket 3.2s ease-out infinite;
  filter: drop-shadow(0 24px 34px rgba(0,0,0,.6));
}
/* coup sec vers le haut à l'impact (0%), retour lent, petite préparation avant le suivant */
@keyframes racket {
  0%   { transform: translateY(-16px) rotate(5deg); }
  10%  { transform: translateY(3px) rotate(-1deg); }
  35%  { transform: translateY(0) rotate(0deg); }
  90%  { transform: translateY(0) rotate(0deg); }
  96%  { transform: translateY(4px) rotate(-2deg); }  /* armé */
  100% { transform: translateY(-16px) rotate(5deg); } /* frappe */
}


/* ===== COMMUN AUX SECTIONS ===== */
.section { padding: 110px 40px; max-width: 1300px; margin: 0 auto; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 40px; }
.center { text-align: center; margin-top: 60px; }
h2 { font-size: clamp(40px, 6vw, 72px); font-style: italic; }
/* titre avec la barre orange qui traverse */
.title { display: inline-block; position: relative; padding: 0 30px; z-index: 1; }
.title::before {
  content: '';
  position: absolute;
  left: 0; top: 55%;
  width: 100%; height: 10px;
  background: var(--orange);
  transform: translateY(-50%) scaleX(0);
  transform-origin: left;
  transition: transform .8s .3s cubic-bezier(.7,0,.2,1);
  z-index: -1;
}
.visible .title::before, .title.visible::before { transform: translateY(-50%) scaleX(1); }
.subtitle {
  font-family: var(--display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 8px;
}
.head { margin-bottom: 60px; }
.content { font-size: 17px; margin: 30px 0; }
.content p { margin-bottom: 16px; color: var(--muted); }
.content strong { color: var(--blanc); }
.stores { display: flex; gap: 12px; margin-top: 30px; }
.store { padding: 12px 22px; background: var(--gris2); font-weight: 600; font-size: 15px; transition: transform .4s, background .3s; }
.store:hover { transform: rotate(-4deg); background: var(--orange); }

/* ticker */
.ticker { background: var(--orange); color: #fff; overflow: hidden; padding: 12px 0; white-space: nowrap; }
.ticker-track { display: inline-flex; gap: 60px; font-family: var(--display); font-weight: 700; font-size: 16px; letter-spacing: 2px; text-transform: uppercase; animation: ticker 28s linear infinite; }
.ticker-track span::before { content: '●'; font-size: 9px; vertical-align: middle; margin-right: 24px; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* services blocs colorés */
.services { padding: 110px 0; }
.service { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 24px; }
.service.reverse .service-img { order: 2; }
.service-img { overflow: hidden; }
.service-img img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 9/7; transition: transform .7s; }
.service:hover .service-img img { transform: scale(1.06); }
.service-txt {
  background: var(--orange); color: #fff;
  padding: 50px; font-size: 22px; line-height: 1.3;
  display: flex; flex-direction: column; justify-content: center;
  transition: background .4s;
}
.service:hover .service-txt { background: var(--gris2); }
.service-txt b { display: block; font-family: var(--display); font-weight: 800; font-style: italic; text-transform: uppercase; font-size: 32px; line-height: 1; margin-bottom: 10px; }
.ico { width: 56px; height: 56px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; margin-bottom: 24px; transition: transform .5s; }
.service:hover .ico { transform: rotate(-12deg); }

/* split */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.split.reverse .split-img { order: 2; }
.split-img { position: relative; }
.split-img img { aspect-ratio: 4/5; object-fit: cover; width: 100%; }
.split-img::before { content: ''; position: absolute; inset: 20px -20px -20px 20px; border: 3px solid var(--orange); z-index: -1; }
.split.reverse .split-img::before { inset: 20px 20px -20px -20px; }
.split-text h2 { margin-bottom: 20px; }
.feature { margin-bottom: 22px; padding-left: 20px; border-left: 3px solid var(--orange); }
.feature h4 { font-size: 20px; color: var(--orange); margin-bottom: 4px; }
.feature p { margin: 0; color: var(--muted); }

/* stats */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--orange); color: #fff; }
.stat { padding: 40px 20px; text-align: center; border-right: 1px solid rgba(255,255,255,.25); }
.stat:last-child { border: 0; }
.stat strong { display: block; font-family: var(--display); font-size: 64px; font-weight: 900; font-style: italic; line-height: 1; }
.stat span { font-family: var(--display); text-transform: uppercase; letter-spacing: 2px; font-size: 14px; }

/* panneau tarifs */
.prices { padding: 110px 0; text-align: center; background: var(--gris); background-image: repeating-linear-gradient(90deg, transparent 0 120px, rgba(255,255,255,.04) 120px 122px); }
.board { max-width: 760px; margin: 0 auto; background: var(--noir); border-radius: 20px; padding: 30px 40px; border: 6px solid #222; box-shadow: 0 30px 60px rgba(0,0,0,.5); }
.board-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: center; padding: 18px 0; border-bottom: 1px dashed #333; }
.board-row:last-child { border: 0; }
.board-label { text-align: right; font-family: var(--display); text-transform: uppercase; font-weight: 700; font-size: 20px; letter-spacing: 1px; }
.board-num { font-family: 'Courier New', monospace; font-weight: 900; font-size: 64px; color: var(--orange); text-shadow: 0 0 20px rgba(232,88,42,.7); min-width: 100px; }
.board-unit { text-align: left; color: var(--muted); font-size: 15px; }

/* cartes tarifs */
.pricecards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: 800px; margin: 0 auto; }
.price { position: relative; padding: 44px 30px; background: var(--noir); text-align: center; border: 1px solid var(--gris2); transition: transform .35s, border-color .35s; }
.price:hover { transform: translateY(-6px); border-color: var(--orange); }
.price.featured { border-color: var(--orange); }
.tag { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--orange); font-family: var(--display); text-transform: uppercase; letter-spacing: 1px; font-size: 13px; padding: 4px 14px; }
.price-label { display: block; font-family: var(--display); text-transform: uppercase; letter-spacing: 2px; font-size: 18px; color: var(--muted); }
.price-value { display: block; font-family: var(--display); font-size: 90px; font-weight: 900; font-style: italic; line-height: 1; margin: 14px 0 6px; }
.price-value sup { font-size: 34px; color: var(--orange); margin-left: 4px; }
.price-note { font-size: 14px; color: var(--muted); }

/* matériel (raquettes & balles) */
.materiel-head { text-align: center; margin: 80px 0 40px; }
.materiel { max-width: 800px; }

/* offres de crédits */
.credits-head { text-align: center; margin: 80px 0 40px; }
.credits-title { font-size: clamp(30px, 4vw, 44px); font-style: italic; }
.credits { grid-template-columns: repeat(3, 1fr); max-width: 1100px; }
.bonus {
  display: inline-block;
  margin-top: 12px;
  margin-left: 10px;
  font-family: var(--display);
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  font-size: 15px;
  color: var(--orange);
  border: 1px solid var(--orange);
  padding: 4px 14px;
}
.price.featured .bonus { background: var(--orange); color: #fff; }

/* instagram */
.insta { padding: 110px 0; }
.insta .head { text-align: center; }
.insta-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.insta-grid a { overflow: hidden; }
.insta-grid img { aspect-ratio: 1; object-fit: cover; transition: transform .5s, filter .5s; filter: grayscale(.4); }
.insta-grid a:hover img { transform: scale(1.1); filter: grayscale(0); }

/* contact : carte deux volets */
.contact { padding: 110px 0 }
.contact .head { text-align: center; }
.contact-card { display: grid; grid-template-columns: 1fr 1.7fr; max-width: 1000px; margin: 0 auto; box-shadow: 0 30px 60px rgba(0,0,0,.4); }
.contact-side { background: var(--orange); color: #fff; padding: 50px 40px; }
.contact-side h3 { font-size: 34px; line-height: 1; margin-bottom: 36px; }
.contact-side p { margin-bottom: 22px; font-size: 16px; }
.contact-side b { display: block; font-family: var(--display); text-transform: uppercase; letter-spacing: 2px; font-size: 13px; opacity: .8; margin-bottom: 2px; }
.contact-side a:hover { text-decoration: underline; }
.contact-form { position: relative; background: var(--noir); padding: 50px 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 28px 24px; }
/* Champ leurre anti-robots : il doit rester dans le DOM et rester remplissable
   pour qu'un robot morde, donc on le sort de l'écran au lieu de le retirer du
   rendu. `display: none` fonctionnerait aussi, mais c'est le premier motif que
   les robots un peu sérieux apprennent à ignorer.
   Le positionnement est absolu (donc hors de la grille du formulaire, sans
   laisser de cellule vide) et relatif à .contact-form, d'où le `position:
   relative` ci-dessus. `overflow-x: clip` sur html empêche tout débordement. */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.field { position: relative; }
.full { grid-column: 1 / -1; }
.field input, .field textarea {
  width: 100%; background: #1a1a1a; border: 1px solid #3a3a3a; border-bottom: 2px solid #4a4a4a; color: #fff;
  font: 500 16px var(--body); padding: 24px 14px 10px; outline: none; resize: none; transition: border-color .3s, background .3s;
}
.field input:hover, .field textarea:hover { border-color: #555; }
.field label {
  position: absolute; left: 14px; top: 18px;
  font-family: var(--display); text-transform: uppercase; letter-spacing: 2px; font-size: 14px; color: var(--muted);
  pointer-events: none; transition: .25s;
}
.field input:focus, .field textarea:focus { border-color: var(--orange); background: #202020; }
.field input:focus + label, .field textarea:focus + label,
.field input:not(:placeholder-shown) + label, .field textarea:not(:placeholder-shown) + label { top: 6px; font-size: 11px; color: var(--orange); }
.contact-form .btn { border: 0; cursor: pointer; margin-top: 6px; }
.contact-form .btn:disabled { opacity: .6; cursor: wait; transform: none; }

/* Retour d'envoi. `:empty` : tant que contact.js n'a rien écrit, le bloc ne
   prend aucune place dans la grille — mais il reste dans le DOM, sans quoi
   role="status" n'aurait rien à annoncer au moment voulu. */
.form-statut { font-size: 16px; line-height: 1.4; }
.form-statut:empty { display: none; }
/* 10,5:1 et 8,8:1 sur le fond noir. Le pictogramme ✓ / ⚠ écrit par le script
   double l'information, pour ne pas la porter par la seule couleur. */
.form-statut.ok { color: #5fd48a; }
.form-statut.ko { color: #ff8f6d; }

/* footer */
.footer { background: var(--noir); border-top: 4px solid var(--orange); padding: 50px 0 30px; text-align: center; }
.footer-in { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.footer-logo { height: 50px; }
.footer p { color: var(--muted); font-size: 15px; }
.footer a:hover { color: var(--orange); }
.small { font-size: 12px; opacity: .7; }
.footer .credit {
  margin-top: -4px;
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 12px;
  color: #6d6d6d;
}
.footer .credit a { color: var(--muted); border-bottom: 1px solid var(--gris2); }

/* bouton recentrer (carte) */
.recentre {
  background: var(--noir); color: #fff; border: 2px solid var(--orange); cursor: pointer;
  font: 700 13px var(--display); text-transform: uppercase; letter-spacing: 1px;
  padding: 8px 14px; margin: 10px; transition: background .3s;
}
.recentre:hover { background: var(--orange); }

/* lightbox */
.lb {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,.92);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s;
}
.lb.open { opacity: 1; visibility: visible; }
.lb img { max-width: 90vw; max-height: 85vh; box-shadow: 0 30px 80px rgba(0,0,0,.8); transform: scale(.95); transition: transform .3s; }
.lb.open img { transform: scale(1); }
.lb button {
  position: absolute; background: none; border: 0; color: #fff; cursor: pointer;
  font: 900 48px var(--display); line-height: 1; padding: 10px 18px; transition: color .3s;
}
.lb button:hover { color: var(--orange); }
.lb-close { top: 16px; right: 20px; }
.lb-prev { left: 10px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 10px; top: 50%; transform: translateY(-50%); }
.insta-grid a { cursor: zoom-in; }

/* retour en haut */
.top { position: fixed; right: 16px; bottom: 16px; width: 44px; height: 44px; border-radius: 50%; background: var(--noir); border: 2px solid #fff; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 900; opacity: 0; visibility: hidden; transition: .4s; z-index: 90; }
.top.show { opacity: 1; visibility: visible; }
.top:hover { background: var(--orange); }

/* apparition au scroll */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity .8s ease, transform .8s ease; }
.reveal.from-left { transform: translateX(-60px); }
.reveal.from-right { transform: translateX(60px); }
.reveal.visible { opacity: 1; transform: none; }
.insta-grid a:nth-child(2), .pricecards .price:nth-child(2) { transition-delay: .1s; }
.insta-grid a:nth-child(3), .pricecards .price:nth-child(3) { transition-delay: .2s; }
.insta-grid a:nth-child(4) { transition-delay: .3s; }
.insta-grid a:nth-child(5) { transition-delay: .4s; }
.insta-grid a:nth-child(6) { transition-delay: .5s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal, .hero-text, .hero-actions { opacity: 1; transform: none; }
  .hero h1 .line span { transform: none; }
  .hero-lines span { transform: rotate(-12deg) scaleX(1); }
  .title::before { transform: translateY(-50%) scaleX(1); }
}

/* responsive */
@media (max-width: 960px) {
  .header { padding: 14px 20px; }
  .nav, .header .btn { display: none; }
  .burger { display: block; }
  .header.open .nav { display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: var(--noir); padding: 20px; gap: 16px; }
  .banner { font-size: 13px; letter-spacing: 1px; gap: 8px; }
  .banner::before, .banner::after { width: 7px; height: 7px; }
  /* 70px de haut, le logo mangeait la moitié de la largeur de l'écran */
  .logo img { height: 42px; }
  .hero { padding: calc(110px + var(--banner-h)) 20px 90px; }
  .hero-ball { width: 60px; height: 60px; right: 8%; bottom: 14%; }
  .scroll-hint { left: 20px; }
  .wrap { padding: 0 20px; }
  .services, .prices, .insta, .section { padding: 70px 0; }
  .service, .split, .pricecards, .credits { grid-template-columns: 1fr; }
  .service.reverse .service-img, .split.reverse .split-img { order: 0; }
  .split { gap: 50px; }
  .service-txt { padding: 30px; font-size: 18px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2) { border: 0; }
  .stat { border-bottom: 1px solid rgba(255,255,255,.25); }
  .board { padding: 20px; }
  .board-row { grid-template-columns: 1fr; gap: 4px; }
  .board-label, .board-unit { text-align: center; }
  .board-num { font-size: 48px; }
  .insta-grid { grid-template-columns: repeat(3, 1fr); }
  .contact-card, .contact-form { grid-template-columns: 1fr; }
  .contact-side, .contact-form { padding: 30px 24px; }
  .map-grid { max-width: 100%; }
  /* Décor du hero masqué sur mobile, faute de place. Les traits obliques sont
     calés en % de la hauteur du hero ; le contenu y étant bien plus haut que
     sur desktop, ils tombaient en travers du paragraphe, et les descendre les
     faisait couper les boutons : à -12° ils balaient 105px sur 412 de large. */
  .hero-ball, .hero-racket, .hero-lines { display: none; }
  /* Un décalage horizontal de 60px fait déborder la page de côté tant que
     l'élément n'est pas apparu — sur mobile ça se voit (scroll latéral).
     On révèle verticalement, la largeur ne bouge plus. */
  .reveal.from-left, .reveal.from-right { transform: translateY(40px); }
}

/* ===== Section appli ===== */
.phone-wrap::before { display: none; }
.phone {
  /* largeur fixe = débordement sous 380px de large (beaucoup d'Android font
     360) : la grille .split se calait sur les 340px du faux téléphone */
  width: min(340px, 100%); margin: 0 auto;
  background: #000; border-radius: 40px; padding: 14px;
  border: 2px solid var(--gris2);
  box-shadow: 0 40px 60px rgba(0,0,0,.6);
  animation: float 5s ease-in-out infinite;
}
@keyframes float { 50% { transform: translateY(-14px); } }
.phone-screen { background: var(--gris); border-radius: 28px; padding: 26px 20px; }
.split-img .phone-top img { aspect-ratio: auto; height: 44px; width: auto; max-width: 100%; margin: 0 auto 16px; object-fit: contain; }
.phone-date { font-family: var(--display); text-transform: uppercase; letter-spacing: 2px; font-size: 13px; color: var(--muted); text-align: center; margin-bottom: 14px; }
.phone-slot {
  background: var(--noir); padding: 12px; margin-bottom: 8px; font-size: 13px;
  display: flex; justify-content: space-between; border-radius: 8px;
}
.phone-slot b { color: var(--orange); font-family: var(--display); text-transform: uppercase; }
.phone-slot b.full { color: var(--muted); }
.phone-btn {
  background: var(--orange); color: #fff; text-align: center; padding: 12px; margin-top: 14px; border-radius: 8px;
  font-family: var(--display); font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: 1px; font-size: 16px;
}

/* ===== CARTE ===== */
.map { padding: 110px 0 110px;}
.map-grid { display: grid; grid-template-columns: 380px 1fr; max-width: 80%; margin: 0 auto; align-items: stretch; }
.map-infos { background: var(--noir); padding: 50px 40px; font-size: 17px; }
.map-infos p { color: var(--muted); margin-bottom: 24px; }
.map-infos b { display: block; color: var(--blanc); font-family: var(--display); font-size: 22px; text-transform: uppercase; margin-bottom: 4px; }
/* position + z-index : contexte d'empilement propre, pour que les panes et
   contrôles Leaflet (z-index 400 à 1000) ne passent pas devant le header */
#carte { min-height: 480px; height: auto; background: var(--gris2); position: relative; z-index: 0; }
.leaflet-container { font-family: var(--body); }
/* Les tuiles OpenStreetMap sont claires : on les inverse pour obtenir un fond
   sombre accordé au site. `grayscale` d'abord, sinon l'inversion vire les verts
   et les bleus de la carte au violet. Le filtre ne porte que sur le calque des
   tuiles : le pin orange et la popup, dans d'autres calques Leaflet, gardent
   leurs couleurs. */
.leaflet-tile-pane { filter: grayscale(1) invert(1) brightness(.9) contrast(1.1); }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--noir); color: #fff; border-radius: 0; }
.leaflet-popup-content b { color: var(--orange); font-family: var(--display); font-size: 18px; text-transform: uppercase; }
.pin { width: 22px; height: 22px; background: var(--orange); border: 3px solid #fff; border-radius: 50%; box-shadow: 0 0 0 0 rgba(232,88,42,.6); animation: pulse 2s infinite; }
@keyframes pulse { to { box-shadow: 0 0 0 20px rgba(232,88,42,0); } }
@media (max-width: 960px) {
  .map-grid { grid-template-columns: 1fr; }
  #carte { min-height: 340px; }
  .map-infos { padding: 30px 24px; }
}

/* ===== alternance de fonds entre sections ===== */
.services { background: var(--noir); }
#app { max-width: none; background: var(--gris); padding: 110px 40px; display: block; }
#app .wrap { padding: 0; }
#app .split-text .content p, #app .feature p { color: #bdbdbd; }
.prices { background: var(--noir); background-image: none; }
.price { background: var(--gris); }
.map {background: var(--gris); }
.insta { background: var(--gris); }
.contact { background: var(--noir); }

/* ===== ACCESSIBILITÉ =====
   Bloc volontairement placé en fin de feuille : les règles de focus doivent
   passer après les styles de composants (.field pose un `outline: none`). */

/* Anneau blanc + halo sombre : le blanc ressort sur les fonds noirs, le halo
   le détache des fonds orange (bannière, bouton, volet contact). */
:root {
  --focus: #fff;
  --focus-halo: #0b0b0b;
}

/* ----- Lien d'évitement -----
   Premier élément tabulable du document : il saute la bannière et le menu pour
   envoyer directement au contenu. Sorti de l'écran par `top` plutôt que masqué
   (display:none / visibility:hidden le retireraient de l'ordre de tabulation). */
.skip-link {
  position: fixed;
  top: -120px;
  left: 8px;
  z-index: 300; /* au-dessus de la bannière (110), du header (100), de la lightbox (200) */
  padding: 12px 24px;
  background: var(--noir);
  color: #fff;
  border: 2px solid var(--orange);
  font-family: var(--display);
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 18px;
  transition: top .2s ease;
}
.skip-link:focus { top: calc(var(--banner-h) + 8px); }

/* Cible du lien : `tabindex="-1"` en HTML pour que Safari y déplace vraiment le
   focus, sans afficher d'anneau autour de tout le contenu de la page. */
#contenu:focus { outline: none; }

/* ----- Focus clavier -----
   `:focus-visible` : l'anneau n'apparaît qu'au clavier, jamais au clic souris. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  /* peint sous l'outline : comble les 3px d'offset d'un liseré sombre */
  box-shadow: 0 0 0 6px var(--focus-halo);
}

/* .btn est découpé au `clip-path` (biseau) : outline ET box-shadow externe sont
   rognés avec le reste. L'anneau doit donc être posé à l'intérieur du bouton. */
.btn:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 3px var(--focus), inset 0 0 0 6px var(--focus-halo);
}
.btn-ghost:focus-visible {
  /* on conserve le liseré orange qui fait tout le style du bouton fantôme */
  box-shadow: inset 0 0 0 3px var(--focus), inset 0 0 0 6px var(--orange);
}

/* Champs du formulaire : ils portent `outline: none` par défaut, on le rétablit
   au clavier. Offset réduit pour ne pas passer sous le label flottant. */
.field input:focus-visible,
.field textarea:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* Le menu souligne ses liens au survol : même repère au clavier. */
.nav a:focus-visible::after { width: 100%; }

/* ----- Blocs service et cartes tarif -----
   Contenus non cliquables, mais mis en valeur au survol : sans `tabindex="0"`
   (posé en HTML) le clavier ne les atteint pas et cette mise en valeur reste
   réservée à la souris. On y ajoute l'anneau et on rejoue l'effet du survol. */
.service, .price {
  /* le header est fixe : sans cette marge, le bloc tabulé se cale sous lui */
  scroll-margin-top: calc(var(--banner-h) + 110px);
}
.service:focus-visible,
.price:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--focus-halo);
}
.service:focus-visible .service-txt { background: var(--gris2); }
.service:focus-visible .service-img img { transform: scale(1.06); }
.service:focus-visible .ico { transform: rotate(-12deg); }
/* posé après .price:hover et .reveal.visible, qui touchent aussi au transform */
.price:focus-visible { transform: translateY(-6px); border-color: var(--orange); }

/* Boutons ronds ou sur fond clair : l'anneau suit déjà l'arrondi, on garde
   seulement un offset un peu plus serré pour rester lisible. */
.top:focus-visible,
.burger:focus-visible,
.lb button:focus-visible,
.recentre:focus-visible { outline-offset: 2px; }

/* Le halo sombre disparaîtrait sur le volet orange du bloc contact : on le
   remplace par un liseré foncé plus contrasté encore. */
.contact-side a:focus-visible { box-shadow: 0 0 0 6px rgba(0,0,0,.55); }

/* Mode contraste forcé (Windows) : les couleurs sont écrasées, on s'appuie sur
   le mot-clé système pour que l'anneau reste dessiné. */
@media (forced-colors: active) {
  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  textarea:focus-visible,
  .btn:focus-visible,
  .service:focus-visible,
  .price:focus-visible,
  [tabindex]:focus-visible {
    outline: 3px solid Highlight;
    outline-offset: 3px;
  }
  /* les box-shadow sont neutralisées dans ce mode : le biseau du .btn doit
     être levé, sinon l'outline de repli serait rognée avec lui */
  .btn:focus-visible { clip-path: none; }
}