/* Page La salle : seulement ses sections propres. Haut de page, bandeau, titres et fin de page
   viennent des styles communs (accueil, page Hyrox). Préfixe ls- partout. */

/* Rubrique active de l'en-tête : marquée par le menu commun (version-2c-fluo.css, 06/10). */

/* Bandeau : la piste recule de la moitié de sa largeur ; sans l'écart final, cette moitié tombait
   14 px avant la 3ᵉ répétition et les mots sautaient à chaque boucle (revue Codex, 02/10). */
.ls-page .hy-ribbon>div{padding-right:28px}

/* 3. L'espace : trois bandes de couleurs alternées (une par H3), texte sur carte, élément graphique
   en face. Un seul fond blanc pour les trois faisait beaucoup (Virginie, 01/10). */
.ls-band-surface{background:var(--soft)}
.ls-band-gear{background:var(--paper)}
.ls-band-kids{background:var(--sky)}
.ls-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:70px;align-items:center;padding:0 10px 10px 0}
.ls-card{padding:38px 36px;border-radius:12px;background:var(--soft);box-shadow:10px 10px 0 var(--night);transform:rotate(-1deg)}
.ls-card-sky{background:var(--sky);transform:rotate(1deg)}
.ls-band-surface .ls-card,.ls-band-kids .ls-card{background:var(--paper)}
.ls-card h3{margin:0 0 16px;font-size:26px!important;line-height:1.2}
.ls-card p{margin:0}
.ls-card a{color:inherit;text-decoration:underline;text-decoration-color:var(--fluo);text-decoration-thickness:4px;text-underline-offset:3px}

/* a. Les 220 m² : le chiffre en très grand, la photo de la salle à l'intérieur, un très petit
   espace entre les chiffres (Virginie, 02/10), « m² » en étiquette fluo. */
.ls-area{display:flex;align-items:flex-start;justify-content:center;margin:0}
.ls-area-num{font-size:210px;font-weight:900;line-height:.86;letter-spacing:.02em;background:url('/m/assets/photos/pornic-hybrid-training/salle-sport-pornic-piste-sled.webp') center 60%/cover;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:2px var(--night)}
.ls-area-unit{margin:6px 0 0 6px;padding:8px 12px;background:var(--fluo);color:var(--night);font-size:44px;font-weight:900;line-height:1;box-shadow:5px 5px 0 var(--night);transform:rotate(-4deg)}

/* b. Le matériel par marque : trois plaques, une photo, les équipements du texte. */
.ls-gear{display:grid;gap:22px}
.ls-brands{display:flex;flex-wrap:wrap;gap:12px}
.ls-brand{padding:13px 18px;border:3px solid var(--night);border-radius:10px;background:var(--paper);color:var(--night);font:inherit;font-size:15px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;box-shadow:4px 4px 0 var(--night);cursor:pointer;transition:transform .2s,box-shadow .2s,background .2s}
.ls-brand[aria-selected=true]{background:var(--fluo);transform:translate(2px,2px);box-shadow:2px 2px 0 var(--night)}
.ls-brand:focus-visible{outline:3px solid var(--night);outline-offset:4px}
.ls-brand:not(.is-seen){animation:ls-halo 1.8s ease-out infinite}
@keyframes ls-halo{0%{box-shadow:4px 4px 0 var(--night),0 0 0 0 #d9ff25cc}80%,100%{box-shadow:4px 4px 0 var(--night),0 0 0 12px #d9ff2500}}
.ls-panel{position:relative}
/* La carte de texte se centre sur la PHOTO, pas sur les plaques + photo (Virginie, 01/10) : les
   plaques passent sur une ligne à part de la grille, la carte se centre sur la ligne de la photo. */
.ls-row-flip{row-gap:22px}
.ls-row-flip .ls-gear{display:contents}
.ls-row-flip .ls-brands{grid-column:1;grid-row:1}
.ls-row-flip .ls-panel{grid-column:1;grid-row:2}
.ls-row-flip .ls-card{grid-column:2;grid-row:2;align-self:center}
.ls-panel img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;box-shadow:10px 10px 0 var(--night);transform:rotate(1deg)}
.ls-panel ul{position:absolute;left:18px;right:18px;bottom:18px;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.ls-panel li{padding:7px 13px;border-radius:999px;background:var(--paper);color:var(--night);font-size:14px;font-weight:850;box-shadow:3px 3px 0 var(--night)}

/* c. L'étage des enfants : la salle en coupe. */
.ls-floors{position:relative;margin:0}
.ls-floors svg{display:block;width:100%;height:auto;max-width:470px;margin:0 auto;fill:none;stroke:var(--night);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.ls-floors .ls-wall{fill:var(--paper)}
.ls-floors .ls-kids{fill:var(--sky);stroke-width:2}
.ls-floors .ls-ball{fill:var(--fluo);animation:ls-bounce 1.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.ls-floors .ls-bar{stroke-width:5}
@keyframes ls-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.ls-tag{position:absolute;padding:7px 12px;border-radius:6px;font-size:13px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;box-shadow:4px 4px 0 var(--night)}
.ls-tag-up{top:14%;left:4%;background:var(--fluo);color:var(--night);transform:rotate(-3deg)}
.ls-tag-down{bottom:4%;right:2%;background:var(--night);color:var(--paper);box-shadow:4px 4px 0 var(--fluo);transform:rotate(2deg)}

/* 4. L'accès, sur le moucheté (seule section sombre) : le tableau des départs, les informations
   pratiques, puis la carte pleine largeur. */
.ls-access{padding-bottom:0;margin-bottom:-70px;background:var(--night) url('/m/assets/v2c-fluo/mouchete.svg') center/240px;color:var(--paper)}
.ls-access .hx-title{color:var(--paper);text-align:center}
/* Les deux cartes de l'accès à la même hauteur, contenu centré (règle des cartes parallèles). */
.ls-access-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:stretch;padding:0 10px 10px 0}
/* Fond gris clair (= --soft, #EEEFEA), essai demandé par Virginie le 02/10 : le bleu ciel #E2E8EF
   répétait la bande de l'espace enfants juste au-dessus. */
.ls-board{display:flex;flex-direction:column;justify-content:center;padding:30px 32px 28px;border-radius:14px;background:var(--soft);color:var(--night);box-shadow:10px 10px 0 var(--fluo);transform:rotate(-.6deg)}
.ls-board-intro{margin:0 0 18px;font-size:18px!important}
.ls-departures{perspective:600px}
.ls-departure{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px;padding:13px 4px;color:var(--night);text-decoration:none}
.ls-departure+.ls-departure{border-top:1px solid #20232233}
.ls-departure-name{display:flex;align-items:center;gap:14px;margin:0;font-size:18px!important}
.ls-departure-name strong{flex:1 1 auto}
.ls-dash{opacity:.45}
.ls-min{min-width:78px;padding:7px 10px;border-radius:6px;background:linear-gradient(#000 0 49%,#2c302d 49% 51%,#000 51%);color:var(--fluo);font-size:17px;font-weight:900;letter-spacing:.06em;text-align:center;font-variant-numeric:tabular-nums;transform-origin:center;transition:transform .45s cubic-bezier(.3,1.4,.5,1) calc(var(--k) * .14s)}
.ls-board.is-waiting .ls-min{transform:rotateX(90deg)}
.ls-go{font-size:12px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--night);opacity:.55;transition:opacity .2s}
.ls-departure:hover .ls-go,.ls-departure:focus-visible .ls-go{opacity:1}
.ls-departure:hover strong{text-decoration:underline;text-decoration-color:var(--night);text-decoration-thickness:3px;text-underline-offset:4px}
.ls-departure:focus-visible{outline:3px solid var(--night);outline-offset:2px;border-radius:6px}
.ls-board-outro{margin:18px 0 0;font-size:16px!important}
.ls-info{display:flex;flex-direction:column;justify-content:center;padding:36px 38px;border-radius:12px;background:var(--paper);color:var(--night);box-shadow:10px 10px 0 var(--fluo);transform:rotate(1deg)}
.ls-info p{margin:0 0 22px}
.ls-facts{display:grid;gap:14px;margin:0;padding:0;list-style:none}
.ls-facts li{display:flex;align-items:center;gap:14px;font-size:17px;font-weight:750}
.ls-facts a{color:inherit;text-decoration:none}
.ls-ico{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--fluo)}
.ls-ico svg{width:20px;height:20px;fill:none;stroke:var(--night);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ls-route{margin-top:28px}
.ls-map{position:relative;margin-top:90px;height:490px}
.ls-map :is(iframe,:where(.c-carte-plan)){height:490px;min-height:490px}
/* La fin de page arrondie suit la carte : la carte passe sous le coin arrondi (70 px), sinon un
   morceau de fond clair apparaît dans l'angle (même réglage que Remise en forme ; la marge négative
   est sur .ls-access, plus haut). */
.ls-access + .hm-closing{z-index:1}
.ls-map-open{position:absolute;left:max(16px,calc((100% - 1140px) / 2));bottom:96px;padding:14px 20px;border-radius:10px;background:var(--fluo);color:var(--night);font-size:15px;font-weight:850;text-decoration:none;box-shadow:4px 4px 0 var(--night)}
.ls-map-open:focus-visible{outline:3px solid var(--night);outline-offset:3px}

@media(prefers-reduced-motion:reduce){.ls-brand,.ls-min,.ls-go{transition:none}.ls-brand:not(.is-seen),.ls-floors .ls-ball{animation:none}}
@media(max-width:1023px){
  .ls-row,.ls-access-grid{grid-template-columns:1fr;gap:40px}
  .ls-row-flip .ls-brands,.ls-row-flip .ls-panel,.ls-row-flip .ls-card{grid-column:1;grid-row:auto}
  .ls-row-flip .ls-card{order:-1}
  .ls-card,.ls-card-sky,.ls-board,.ls-info,.ls-panel img{transform:none}
  /* Version téléphone (08/10) : « 220 m² » à la largeur de l'écran (en 210 px, il en demandait 510), cartes moins
     rembourrées, et les départs du tableau tiennent sur une ligne (nom, minutes, « y aller »). */
  .ls-area-num{font-size:136px}
  .ls-area-unit{font-size:30px}
  .ls-card{padding:28px 24px}
  .ls-card h3{font-size:22px!important}
  /* Le tableau des départs : la ville et ses minutes sur une ligne, « Itinéraire » dessous (sur une ligne, les trois
     se chevauchaient : « 15 min » passait sur deux lignes, par-dessus « Itinéraire »). */
  .ls-departure{display:flex;flex-wrap:wrap;gap:6px 10px}
  .ls-departure-name{flex:1 1 100%;justify-content:space-between;gap:10px;font-size:16px!important}
  .ls-departure-name .ls-dash{display:none}
  .ls-min{flex:none;min-width:62px;padding:6px 8px;font-size:15px;white-space:nowrap}
}
/* Très petits téléphones : « 220 m² » et les rangées à la largeur de l'écran (les grilles suivaient leur contenu). */
@media(max-width:359px){.ls-row,.ls-access-grid{grid-template-columns:minmax(0,1fr)}.ls-area-num{font-size:112px}.ls-area-unit{font-size:26px}}
/* Grand titre sur téléphone (22/10) : « moderne et conviviale » fait 379 px à 40 px ; la taille se réduit pour qu'il tienne (hyrox-mix/page.css). */
.hy-hero-copy h1.pg-h1-grand{--pg-h1-ratio:0.1055}