/* Rapport 1:1 strict : Danny, Kevin, Paul et Yoann restent parfaitement ronds. */
:root {
  --max: 1200px !important;
}

.site-header {
  height: 200px !important;
}

.header-inner {
  height: auto !important;
  padding-top: 50px !important;
  align-items: flex-start !important;
}

.header-logo,
.header-contact {
  margin-top: 0 !important;
}

.header-contact {
  margin-top: 52px !important;
}

.coach-card img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 50% !important;
  clip-path: circle(50% at 50% 50%);
}

@media (max-width: 900px) {
  .site-header {
    height: 170px !important;
  }

  .header-inner {
    width: calc(100% - 28px) !important;
    height: auto !important;
    padding-top: 50px !important;
    align-items: flex-start !important;
  }

  .header-logo {
    width: 100px !important;
    height: 100px !important;
    margin-top: 0 !important;
    object-fit: contain !important;
  }

  .header-contact {
    margin-top: 30px !important;
  }

  .hero-content {
    padding-top: 190px !important;
  }
}

/* La vidéo conserve son format 16:9 complet, sans recadrage. */
.video-frame {
  width: min(1200px, calc(100% - 48px)) !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  margin-inline: auto !important;
  background: transparent !important;
  overflow: hidden !important;
}

.video-frame video,
.video-frame iframe {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  background: transparent !important;
  border: 0 !important;
}

@media (max-width: 900px) {
  .video-frame {
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
  }
}

/* Parallaxe Divi : le décor baseball reste fixe sous le dégradé de lecture. */
.history-background {
  background-attachment: scroll, fixed !important;
}

/* Photo d'équipe affichée dans son format complet sur toute la largeur. */
.team-band {
  position: relative !important;
  isolation: isolate;
  width: 100% !important;
  min-height: 0 !important;
  aspect-ratio: 1881 / 793 !important;
  background-color: var(--navy) !important;
  background-image: url('/assets/team-background-v111.jpg') !important;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
  background-blend-mode: normal !important;
}

/* Comme sur Divi : l'image reste fixe pendant que la fenêtre de la section défile. */
@media (max-width: 900px) {
  .history-background {
    background-attachment: scroll, scroll !important;
  }

  .team-band {
    background-attachment: scroll !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .history-background {
    background-attachment: scroll, scroll !important;
  }

  .team-band {
    background-attachment: scroll !important;
  }
}

/* Alignement homogène des listes dans les quatre offres. */
.offer-card:not(:has(.offer-city)) h3 {
  margin-bottom: 25px !important;
}

.offer-card ul {
  width: 100% !important;
  display: grid !important;
  grid-auto-rows: minmax(28px, auto) !important;
  gap: 12px !important;
  align-content: start !important;
}

.offer-card li {
  min-height: 28px !important;
  margin: 0 !important;
  padding-left: 32px !important;
  display: flex !important;
  align-items: flex-start !important;
  line-height: 1.4 !important;
  text-align: left !important;
}

.offer-card li::before {
  left: 2px !important;
  top: .42em !important;
  width: 12px !important;
  height: 12px !important;
}

/* Sélecteur premium du club dans le formulaire de contact. */
.club-selector {
  min-width: 0;
  margin: 0 0 32px;
  padding: 0;
  border: 0;
}

.club-selector legend {
  margin-bottom: 14px;
  padding: 0;
  color: var(--gold);
  font-family: Montserrat, sans-serif;
  font-size: 13px;
  font-weight: 700;
}

.club-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.club-choice {
  display: block;
  min-width: 0;
  cursor: pointer;
}

.club-choice input {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  pointer-events: none;
}

.club-choice-card {
  position: relative;
  isolation: isolate;
  min-height: 210px;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 34px;
  align-items: end;
  gap: 16px;
  padding: 24px;
  overflow: hidden;
  border: 1px solid rgba(244, 231, 187, .52);
  border-radius: 22px;
  background: #101b2e;
  color: #fff;
  box-shadow: 0 16px 38px rgba(4, 11, 20, .22);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.club-choice-card::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  transform: scale(1.015);
  transition: transform .28s ease, filter .28s ease;
}

.club-choice:first-child .club-choice-card::before {
  background-image: url('/assets/club-rouen.jpg');
}

.club-choice:last-child .club-choice-card::before {
  background-image: url('/assets/club-le-havre.jpg');
}

.club-choice-card::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 15, 28, .18) 0%, rgba(10, 20, 37, .58) 44%, rgba(10, 20, 37, .96) 100%);
  transition: background .22s ease;
}

.club-choice:hover .club-choice-card {
  transform: translateY(-4px);
  border-color: var(--gold);
  box-shadow: 0 20px 46px rgba(4, 11, 20, .34);
}

.club-choice:hover .club-choice-card::before {
  transform: scale(1.055);
}

.club-choice-marker {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(244, 231, 187, .9);
  border-radius: 50%;
  background: rgba(10, 20, 37, .72);
  color: var(--gold);
  backdrop-filter: blur(4px);
  font-family: Montserrat, sans-serif;
  font-size: 15px;
  font-weight: 900;
  box-shadow: 0 8px 20px rgba(0,0,0,.2);
}

.club-choice-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  text-shadow: 0 2px 12px rgba(0,0,0,.45);
}

.club-choice-copy strong {
  font-family: Montserrat, sans-serif;
  font-size: 20px;
  line-height: 1.15;
  font-weight: 800;
}

.club-choice-copy span {
  color: rgba(255, 255, 255, .88);
  font-size: 13px;
  line-height: 1.4;
}

.club-choice-copy small {
  color: var(--gold);
  font-size: 12px;
  line-height: 1.3;
  font-weight: 700;
}

.club-choice-check {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  align-self: end;
  border: 1px solid rgba(244, 231, 187, .72);
  border-radius: 50%;
  background: rgba(10, 20, 37, .55);
  color: transparent;
  font-size: 16px;
  font-weight: 900;
  backdrop-filter: blur(4px);
}

.club-choice input:checked + .club-choice-card {
  transform: translateY(-3px);
  border: 2px solid var(--gold);
  box-shadow: 0 0 0 3px rgba(244, 231, 187, .14), 0 22px 50px rgba(4, 11, 20, .38);
}

.club-choice input:checked + .club-choice-card::after {
  background: linear-gradient(180deg, rgba(7, 15, 28, .08) 0%, rgba(10, 20, 37, .42) 42%, rgba(10, 20, 37, .94) 100%);
}

.club-choice input:checked + .club-choice-card .club-choice-marker {
  border-color: var(--gold);
  background: var(--gold);
  color: var(--navy);
}

.club-choice input:checked + .club-choice-card .club-choice-check {
  border-color: var(--gold);
  background: var(--gold);
  color: var(--navy);
}

.club-choice input:checked + .club-choice-card .club-choice-copy::after {
  content: "SALLE SÉLECTIONNÉE";
  width: fit-content;
  margin-top: 5px;
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--navy);
  text-shadow: none;
  font-family: Montserrat, sans-serif;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .7px;
}

.club-choice input:focus-visible + .club-choice-card {
  outline: 3px solid #31a8df;
  outline-offset: 4px;
}

@media (max-width: 700px) {
  .club-choice-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .club-choice-card {
    min-height: 185px;
    grid-template-columns: 50px minmax(0, 1fr) 30px;
    gap: 13px;
    padding: 20px 17px;
    border-radius: 18px;
  }

  .club-choice-marker {
    width: 50px;
    height: 50px;
    font-size: 13px;
  }

  .club-choice-copy strong {
    font-size: 18px;
  }

  .club-choice-copy span {
    font-size: 12px;
  }

  .club-choice-copy small {
    font-size: 11px;
  }
}

/* Texte de la section reassurance ramené vers le centre et mieux contrasté. */
.reassurance-content {
  padding: 80px 7% 80px 48% !important;
  align-items: flex-start !important;
}

.reassurance h2 {
  max-width: 520px !important;
  margin-bottom: 45px !important;
}

.reassurance p {
  max-width: 440px !important;
}

@media (max-width: 900px) {
  .reassurance-overlay {
    background: linear-gradient(180deg, rgba(5, 15, 32, .08) 0 28%, rgba(5, 15, 32, .94) 55% 100%) !important;
  }

  .reassurance-content {
    min-height: 640px !important;
    padding: 260px 10% 65px !important;
    justify-content: flex-end !important;
    align-items: flex-start !important;
  }

  .reassurance h2 {
    max-width: 100% !important;
    margin-bottom: 28px !important;
    font-size: 28px !important;
  }

  .reassurance p {
    max-width: 100% !important;
  }
}

@media (min-width: 901px) {
  .reassurance-content {
    /* Recentrage horizontal : le texte démarre plus tôt sans modifier le reste de la section. */
    padding: 80px 8% 80px 38% !important;
  }

  .reassurance h2 {
    width: 100% !important;
    max-width: none !important;
    font-size: clamp(38px, 3.3vw, 48px) !important;
    line-height: 1.12 !important;
    text-align: left !important;
  }

  .reassurance h2 br {
    content: ' ';
  }

  .reassurance h2 br::after {
    content: ' ';
    white-space: pre;
  }

  .reassurance p {
    width: 100% !important;
    max-width: none !important;
    font-size: 19px !important;
    text-align: left !important;
  }
}

/* Footer GinoGym — rapprochement des deux clubs sans modification de contenu */
@media (min-width: 901px) {
  .site-footer .footer-grid {
    grid-template-columns: 260px 220px 220px !important;
    column-gap: 42px !important;
    justify-content: center !important;
  }

  .site-footer .footer-grid > div {
    width: 220px;
  }
}

/* Clubs Rouen / Le Havre — photos réellement plein format et pleine largeur de carte. */
.club-card {
  overflow: hidden !important;
}

.club-card > .club-photo-full {
  display: block !important;
  width: calc(100% + 60px) !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center center !important;
  margin: 10px -30px 28px !important;
  border: 0 !important;
}

@media (max-width: 900px) {
  .club-card > .club-photo-full {
    width: calc(100% + 50px) !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    margin: 10px -25px 28px !important;
  }
}

/* Reassurance plein écran — uniquement desktop, sans modifier les autres .container. */
@media (min-width: 901px) {
  .reassurance > .container.reassurance-content {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }
}