@media only screen and (max-width: 768px) 
{
.block-home-1-mobile {
    background-color: rgba(255,255,255,.9);
    border-radius: 0px;
    padding: 5px;
    text-align: left;
    color: black;
    margin-bottom: 20px;
    height: auto;
    box-shadow: none;
    margin-top: -25px;
    display: block;
}


.block-home {
	margin-top: 50px;
	background-color: rgba(255, 255, 255, 1);
	border-radius: 15px;
	padding: 15px;
	text-align: center;
	color: #444;
	margin-bottom: 20px;
	box-shadow: 3px 3px 5px 0px #555;
  margin-left: 30px;
  margin-right: 30px;
}

.block-home-1-mobile > P {
    font-size: 16px;
    color: #222;
}

.container {
    padding-left: 0px;
    padding-right: 0px;
}

.btn-group-lg > .btn, .btn-lg {
    padding: 6px 27px;
    font-size: 19px;
    line-height: 1.33333;
    border-radius: 6px;
    margin-top: 15px;
}

#block-home-ctn {
	font-size: 16px;
}

li {
    margin-bottom: 10px;
}

.pres-course {
	width: 100%;
	float: left;
	background-color: #b9da9e;
	padding: 10px;
	margin-right: 0%;
	margin-bottom: 20px;
}

.partcol1 {
	width: 100%;
	float: left;
}

.partcol2 {
	width: 100%;
	float: left;
}

#block-pres-sp {
	background-color: transparent;
	padding: 10px;
	border-radius: 10px;
	width: 100%;
	margin: auto;
}

.spqpage {
	margin: 1%;
	width: 98%;
	box-shadow: 3px 3px 5px 0px #111;
}

#madeleine {
	background-image: url("../img/madeleine_background_2025.png");
}

#kemberg {
	background-image: url("../img/fond-tdk.png");
}

/* ========== MOBILE-FIRST FIXES (<= 768px) ========== */
@media (max-width: 768px){

  /* Container & gutters plus serrés */
  .page-wrap{ padding: 16px 12px; }
  .row.g-4{ --bs-gutter-x: 1rem; --bs-gutter-y: 1rem; }

  /* Titres/eyebrow plus compacts */
  .eyebrow{ font-size: 12px; letter-spacing:.06em; }
.hero-title {
	font-size: clamp(1.35rem, 6vw, 1.8rem);
	line-height: 1.6;
	letter-spacing: .5px;
}
  .hero-sub{ font-size: 16px; margin-bottom: 12px; }

  /* Cards plus légères */
    .card {
        padding: 16px;
        border-radius: 12px;
        box-shadow: 0 4px 14px rgba(0,0,0,.08);
        margin-bottom: 20px;
    }
  .hero-card{ padding: 16px; gap: 8px; }

  /* Badges qui wrap proprement */
  .hero-badges{ display:flex; flex-wrap:wrap; gap:6px; }

  /* Flyer 100% largeur, pas d’overflow */
  .flyer-home{ width:100%; height:auto; border-radius: 10px; display:block; }

  /* Countdown XXL lisible mais pas géant */
  #countdown-section{ padding: 16px; }
  .countdown-card{ padding: 18px; }
  .countdown-card .countdown{
    font-size: clamp(1.6rem, 9vw, 2.3rem);
    line-height: 1.1;
  }
  .countdown-card .countdown-header{ font-size: .95rem; }

  /* Liste d’infos compacte, icônes respirent */
  .infos-pratiques ul{ padding-left: 0; margin: 0; list-style: none; }
  .infos-pratiques li{ margin: .5rem 0; display:flex; align-items:flex-start; gap:8px; }
  .infos-pratiques li i, .infos-pratiques li .fa-layers{ flex: 0 0 auto; margin-top: 2px; }

  /* CTA : gros bouton centré, pleine largeur */
  .btn-cta, .cta-main{ 
    display:block; width:100%;
    text-align:center; padding: .9rem 1.1rem; 
    font-size: 1.05rem; border-radius: 14px;
    margin: 12px 0 0;
  }

  /* Cartes épreuves : texte plus court, pas de br */
  .race-card{ text-align:left; }
  .race-card .course-title-2{ font-size: 1rem; }
  .race-card br{ display:none; }
  .race-card div, .race-card em{ display:block; margin-top:4px; }

  /* Images/liens longs : pas de casse layout */
  .links-list a{ word-break: break-word; overflow-wrap: anywhere; }

  /* Éléments décor (forêt, overlays) : pas d’empiètement */
  .forest-bg, .hero-decor{
    background-attachment: scroll !important;
    background-position: center top !important;
    background-size: cover !important;
  }
  /* Si un décor dépasse le contenu : */
  .hero-decor, .forest-bg{ max-height: 30vh; }
}

/* ========== TABLETTE (768–992px) ========== */
@media (min-width: 769px) and (max-width: 991.98px){
  .page-wrap{ padding: 20px 16px; }
  .hero-title{ font-size: clamp(1.6rem, 3.2vw, 2rem); }
  .hero-badges{ gap:8px; flex-wrap:wrap; }
  .btn-cta{ font-size: 1.05rem; padding: .85rem 1.4rem; }
  .countdown-card .countdown{ font-size: clamp(1.9rem, 5vw, 2.8rem); }
}

/* ========== DIVERS ROBUSTESSE ========== */
/* Empêche tout débordement horizontal fantôme */
html, body{ overflow-x: hidden; }

/* Les iframes, images et maps s’adaptent */
img, iframe{ max-width:100%; height:auto; }

/* Boutons “outline” centrés dans les cards */
.text-center .btn-cta-outline{ margin: 6px auto 0; }

/* Safe-area iOS pour une barre sticky si tu l’ajoutes */
@supports (padding: max(0px)) {
  .cta-sticky-mobile{ padding-bottom: max(.6rem, env(safe-area-inset-bottom)); }
}



.row {
	margin-left: 0px;
	margin-right: 0px;
}

#faq {
	margin-left: 30px;
	margin-right: 30px;
}

#map {
	height: 420px;
	width: 91%;
	border-radius: var(--radius);
	margin-left: 15px;
	margin-right: 15px;
}

.body-container {
	flex: 1;
	min-height: 100px;
	margin-top: 0px;
}

.block-home-0 {
	margin-top: 50px;
	background-color: rgba(255, 255, 255, .9);
	border-radius: 15px;
	padding: 15px;
	text-align: center;
	color: #444;
	margin-bottom: 20px;
	box-shadow: 3px 3px 5px 0px #555;
}

.block-home-2 {
	background-color: transparent;
	border-radius: 15px;
	padding: 15px;
	text-align: center;
	color: #444;
	margin-bottom: 20px;
	min-height: 600px;
	box-shadow: unset;
}
	
.cta-button-2 {
	margin-top: 20px;
}

.card.login {
	max-width: 300px !important;

}
}