/* --- calques ---------------------------------------------------- */
.hero-section{min-height:100vh;position:relative;padding-bottom:140px;}
.bg-pattern,.bg-cyclistes{position:absolute;inset:0;background-size:cover;background-position:center;}
.bg-pattern{background-image:url('../img/bg-motif.png');z-index:1;}
.bg-cyclistes{background-image:url('../img/bg-cyclistes.png');z-index:2;background-repeat:no-repeat;background-size:contain;background-position:bottom center;height:85vh;}
.z-3{position:relative;z-index:3;}

/* --- haut -------------------------------------------------------- */
.uci-logo{width:140px}
.partner-logo{width:42px}
.btn-inscription{background:#009fe3;padding:.35rem 1.1rem;border-radius:.25rem}

/* Gran Fondo logo */
.gran-title{max-width:500px;width:100%}
.mt-6{margin-top:6rem}

/* infos course */
.infos-banner-wrapper{text-align: right;}
.infos-banner{max-width:380px;width:90%;}

.hero-bottom-elements {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 900px;
  padding-bottom: 2rem;
  z-index: 3;
}

.gran-logo-wrapper img {
  max-width: 500px;
  width: 100%;
}

.infos-banner-wrapper img {
  max-width: 380px;
  width: 90%;
}

/* --- nav sticky -------------------------------------------------- */
.navbar-nav .nav-link{color:#000;font-weight:600}
.navbar-nav .nav-link:hover{color:#009fe3}
.navbar-toggler{background:transparent}
.navbar-toggler-icon{width:25px;height:2px;background:#000;display:block;position:relative}
.navbar-toggler-icon::before,.navbar-toggler-icon::after{content:"";background:#000;width:25px;height:2px;position:absolute;left:0}
.navbar-toggler-icon::before{top:-8px}
.navbar-toggler-icon::after{top:8px}

/* --- header / langue -------------------------------------------------- */

.language-selector {
  position: relative;
  z-index: 10;
}

.lang-toggle {
  background: transparent;
  border: none;
  cursor: pointer;
  font-weight: bold;
  padding: .4rem .6rem;
  border-radius: 4px;
  color: #000;
  font-size: 0.9rem;
}

.lang-toggle .dropdown-icon {
  margin-left: 4px;
  transition: transform 0.2s;
}

.language-selector:hover .dropdown-icon {
  transform: rotate(180deg);
}

.lang-dropdown {
  list-style: none;
  margin: 0;
  padding: 0.5rem 0;
  position: absolute;
  background: white;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  top: 100%;
  left: 0;
  min-width: 140px;
  display: none;
  border-radius: 6px;
}

.language-selector:hover .lang-dropdown {
  display: block;
}

.lang-dropdown li {
  padding: 0;
}

.lang-dropdown a {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #333;
  text-decoration: none;
  padding: 6px 12px;
  font-size: 0.9rem;
}

.lang-dropdown a:hover {
  background-color: #f3f3f3;
}


/* --- parcours -------------------------------------------------- */

.parcours-section {
  background: #fff;
}

.title-parcours {
  font-family: 'Montserrat', sans-serif;
  font-size: 2.5rem;
  font-weight: 800;
  color: #0a2e5c;
  text-transform: uppercase;
}

.dot {
  width: 45px;
  height: 45px;
}

.jour-header {
 position: relative;
}

.jour-header .map-icon {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-30%, -50%);
  z-index: 2;
  background: white;
}

.jour-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.2rem;
  font-weight: 800;
  text-transform: uppercase;
  padding: 1rem 1.5rem 1rem 5rem; /* espace à gauche pour éviter que le texte chevauche l'image */
  border-radius: 6px;
  margin-left: 3rem;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.jour-label.blue {
  background: #0077c8;
  color: #fff;
  padding: 0.5rem 1.2rem;
  border-radius: 3px;
}

.jour-label.orange {
  background: #f7931e;
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 3px;
}

.bike-icon {
  width: 40px;
  height: auto;
}

.text-parcours {
  font-family: 'Open Sans', sans-serif;
  font-size: 1rem;
  color: #222;
  line-height: 1.6;
  padding: 0 60px;
}

.highlight-green {
  position: relative;
  height: 200px;
  background: url('../img/col-des-mamelles.png') no-repeat center center/contain ;
  border-radius: 6px;
  margin-top: 2rem;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.overlay-text {
  width: 100%;
  padding: 1rem;
  text-align: center;
  color: #fff;
  font-size: 1rem;
  text-shadow: 1px 1px 4px rgba(0,0,0,0.8);
  line-height: 1.5;
}

.overlay-text strong {
  font-weight: 700;
}

.parcours-img {
  border-radius: 6px;
  box-shadow: 0 0 8px rgba(0,0,0,0.1);
  max-width: 100%;
}


/* ===========  SECTION PROGRAMME  =================================== */
.programme-section {
  background: #ffffff;
  font-family: 'Montserrat', sans-serif;
}

.programme-block {
  position: relative;
  margin-bottom: 4rem;
}

.programme-inner {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: relative;
}

.programme-visual {
  flex: 1 1 100%;
  max-width: 100%;
  text-align: center;
}

.programme-img {
  width: 100%;
  height: auto;
  display: block;
}

.programme-visual img{
  width:80%;
}

.programme-text {
  position: absolute;
  left: 5%;
  top: 15%;
  max-width: 40%;
  z-index: 2;
  color: #003865;
}

.programme-heading {
  font-weight: 800;
  font-size: 2.4rem;
  line-height: 1.1;
  margin-bottom: 0.5rem;
}

.orange-text {
  color: #f7931e;
}

.picto-photo {
  width: 36px;
  margin-top: 1rem;
}

.programme-heading {
  font-size: 1.9rem;
  font-weight: 800;
  color: #003b71;
  line-height: 1.25;
  text-transform: uppercase;
}

.orange-text {
  color: #f7931e;
  font-size: 1.7rem;
  line-height: 1.25;
}

/* --- VISUEL -------------------------------------------------------- */
.programme-img {
  max-width: 380px;
  width: 100%;
  border-radius: 6px;
}

/* --- CARTES JOUR --------------------------------------------------- */
.day-card {
  border-radius: 6px;
  padding: 2rem 2.5rem;
  color: #ffffff;
  position: relative;
  overflow: hidden;
}

.day1   { background: #003b71; }
.day2 { background: #f7931e; }

/* En-tête de chaque carte */
.day-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  font-size: 2rem;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  padding: 10px;
}

.day-date {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.day-date strong{
  font-size: 1rem;
}

.day-date img {
  width: 40px;
  height: auto;
}

/* Liste infos */
.day-info {
  list-style: none;
  margin: 0;
  padding: 0;
  color:#222;
}

.day-info li {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  margin-bottom: 1.2rem;
  line-height: 1.5;
  font-size: 1rem;
}

.day-info img {
  width: 60px;
  margin-top: .3rem;
}

.day-info .info-text {
  display: inline-block;
  text-align: left;
  line-height: 1.5;
}
.modalities-heading {
  font-family: 'Montserrat ExtraBold', sans-serif;
  font-size: 2rem;
  text-transform: uppercase;
  line-height: 1.1;
}
.category-heading {
  background: #003b71;
  font-family: 'Montserrat ExtraBold', sans-serif;
  font-size: 1.3rem;
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: 1rem;
}
.price-tile {
  flex: 1 1 auto;
  padding: 1.2rem 1rem;
  border-radius: 6px;
  text-align: center;
  color: #fff;
  line-height: 1.4;
}
.price-title {
  font-size: 1.25rem;
  font-weight: 700;
}
.price-subtitle {
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: .3rem;
}
.price-amount {
  font-size: 2rem;
  font-weight: 800;
}
.participation-section {
  font-family: 'Montserrat', sans-serif;
  background: #fff;
}
.section-title {
  font-family: 'Georgia', serif;
  font-size: 2.3rem;
  font-weight: 700;
  display: inline-block;
  margin-bottom: 1rem;
}
.subheading {
  font-size: 2.4rem;
  font-weight: 800;
  color: #003b71;
  text-transform: uppercase;
  line-height: 1;
  width: 100%;
}
.highlight-blue {
  color: #0071bc;
}
.inline-icon {
  width: 60px;
  margin-left: 5px;
}
.pricing-box {
  display: flex;
  gap: 1rem;
}
.price-tile {
  flex: 1 1 auto;
  padding: 1rem;
  border-radius: 6px;
  text-align: center;
  color: #fff;
}
.price-tile.blue {
  background: #0071bc;
}
.price-tile.orange {
  background: #f7931e;
}
.price-title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.3rem;
}
.price-amount {
  font-size: 1.8rem;
  font-weight: 800;
}
.included-list {
  padding-left: 1.2rem;
}
.included-list li {
  font-size: 0.95rem;
  margin-bottom: 0.4rem;
}
.text-bold {
  font-weight: 700;
}
.categories-box ul,
.security-box ul {
  font-size: 0.95rem;
  margin-bottom: 1rem;
}
.categories-box ul li,
.security-box ul li {
  margin-bottom: 0.3rem;
}
.security-box p {
  font-size: 0.95rem;
  line-height: 1.6;
}

.guadeloupe-section {
  position: relative;
  background: #fff;
  font-family: 'Montserrat', sans-serif;
  overflow: hidden;
}

#iles{
  position: relative; 
}
.bg-pattern-iles {
  position: absolute;
  inset: 0;
  background-image: url('../img/bg-motif.png');
  background-size: cover;
  background-position: top center;
  z-index: 1;
  opacity: 0.6; /* optionnel pour adoucir*/
} 

.guadeloupe-section > .container-fluid {
  position: relative;
  z-index: 2;
}


    .guadeloupe-section .section-title {
      font-size: 2.5rem;
      font-weight: 700;
      margin-bottom: 1rem;
    }

    .map-img {
      width: 400px;
    }

    .guadeloupe-intro p {
      font-size: 1rem;
      line-height: 1.6;
      color:#003b71;
    }

    .guadeloupe-stats .stat-tile {
      padding: 1.5rem;
      border-left: 2px solid #f7931e;
      border-right: 2px solid #f7931e;
      margin-bottom: 1rem;
      color: #003b71;
    }

    .guadeloupe-stats .stat-number {
      font-size: 4rem;
      line-height: 1;
      font-weight: 800;
      color: #003b71;
    }

    .guadeloupe-stats .stat-label {
      font-size: 1.2rem;
      line-height: 1;
    }

    .heritage-note {
      font-size: 0.95rem;
      line-height: 1.5;
      border-left: 2px solid #f7931e;
      border-right: 2px solid #f7931e;
       color: #003b71;
    }

    .highlight-title {
      font-size: 1.4rem;
      font-weight: 900;
      line-height: 1.2;
      text-transform: uppercase;
      color: #003865;
    }

    .text-blue {
      color: #003b71;
      font-weight: 700;
    }

    .text-orange {
      color: #f7931e;
      font-weight: 700;
    }

    .highlight-img {
      width: 100%;
      max-width: 400px;
      border-radius: 4px;
    }

    .tripadvisor-box {
      background: #f8f8f8;
      padding: 1rem;
      border-left: 4px solid #009e74;
    }

    .trip-logo {
      height: 60px;
    }

    .trip-title {
      font-size: 1rem;
      font-weight: 700;
    }

    .trip-text {
      font-size: 0.95rem;
    }

    .trip-link {
      font-weight: 700;
      color: #003b71;
      text-decoration: underline;
    }

    .highlight-orange {
      font-weight: 800;
      color: #f7931e;
      text-transform: uppercase;
    }

    .orange-bold {
      font-weight: 700;
      color: #f7931e;
    }

.destination-highlight {
  position: relative;
  height: 300px; /* ajustable selon besoin */
  margin-bottom: 4rem;
}

.highlight-visual {
  position: absolute;
  top: 0;
  right: 0;
  width: 70%;
  max-width: 800px;
  z-index: 1;
}

.highlight-merged-img {
  width: 100%;
  height: auto;
  display: block;
}

.highlight-text {
  position: absolute;
  top: 5%;
  left: 0;
  z-index: 2;
  color: #003865;
  max-width: 60%;
}

.highlight-title {
  font-weight: 800;
  font-size: 2rem;
  line-height: 1.1;
  color: #003865;
}

.text-orange {
  color: #f7931e;
}

.picto-photo {
  width: 36px;
}

/* ─────────────────────────────────────────────
   TRANSPORT  –  Carte + listes + badge + avion
   ───────────────────────────────────────────── */
.transport-title, .heberg-title, .orga-title{
  font-size: 2.4rem;
    font-weight: 800;
    color: #003b71;
    text-transform: uppercase;
    line-height: 1;
    width: 100%;
    font-family: 'Montserrat ExtraBold', sans-serif;
}

.transport-sub{
   color: #003b71;
   font-size: 1.2rem;
}

.transport-layout {                     /* le .row qui contient tout */
  position: relative;                   /* support des overlays PNG  */
  background: #043c6e;                  /* fond bleu carte           */
  padding: 2.5rem 2rem;
  overflow: hidden;
  border-radius: 4px;
  color: #fff;
}

/* ---- fond raster (carte Atlantique) ---------------------------- */
.transport-layout::before{
  content:"";
  position:absolute;
  inset:0;
  background:url('../img/bg-transp.png') center/cover no-repeat;
  filter:brightness(1) hue-rotate(0deg);
  opacity:.85;
  z-index:0;
}

/* ---- avion + pointillés --------------------------------------- */
.plane-path{
  position:absolute;
  bottom:18%;
  left:-8%;
  width:58%;
  z-index:1;
}

/* ---- deux colonnes listes ------------------------------------- */
.dest-block{
  position:relative;
  z-index:2;
  color:#fff;
  font:500 .92rem/1.4 'Montserrat',sans-serif;
  padding:.9rem 1.1rem .9rem 1.1rem;
}

.map-box img {
  display: none;
}

.dest-block ul{margin:.5rem 0 0 1.2rem;padding:0;}
.dest-header{
  display:block;
  font-weight:700;
  text-transform:uppercase;
  font-size:.95rem;
  margin-bottom:.3rem;
}
.bg-orange{background:#f7931e;}
.bg-blue  {background:#0071bc;}

/* ---- badge “18 destinations” ---------------------------------- */
.badge-18 {
  position: relative;
  display: inline-block;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  z-index: 2;
  margin-left: 40rem; /* <-- décalage à gauche */
}
.badge-18 .number{
  font:800 3.1rem/1 'Montserrat',sans-serif;
  display: block;
}
.badge-18 .small{
  font:600 1rem/1 'Montserrat',sans-serif;
}

/* barres orange haut / bas */
.badge-18::before,
.badge-18::after{
  content:"";
  display:block;
  width:120px;
  height:4px;
  margin:.25rem auto;
  background:#f7931e;
}
.badge-18::before{margin-bottom:.5rem;}
.badge-18::after {margin-top:.5rem;}

/* ---- mini carte Guadeloupe + cercle orange -------------------- */

.mini-gp {
  position: absolute;
  bottom: -10px;
  left: 38%;            /* <-- plus proche du badge */
  transform: translateX(-100%);
  width: 200px;
  z-index: 2;
}

.destination-name{
  padding-top: 15px;
}

.destination-name ul li {
  color: #fff !important;
  font-weight: 500;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.3); /* meilleure lisibilité */
  position: relative;
  z-index: 4;
}

.partner-link{
  width: 40%;
}

.heberg-text{
  font-size: 1.2rem;
  color: #003b71;
}

.heberg-text strong{
  font-size: 1.5rem;
  border-bottom: 2px solid #f7931e;
}


/* ─────────────────────────────────────────────
   SECTION ORGANISATEUR
   ───────────────────────────────────────────── */
.section-organisateur {
  background: #f7f6ee;
  font-family: 'Montserrat', sans-serif;
  color: #111;
}

.section-organisateur .section-title {
  color: #005bac;
  font-weight: 800;
  font-size: 2.2rem;
  text-transform: uppercase;
  margin-bottom: 2rem;
  text-align: left;
}

.section-organisateur .logo-footer {
  max-height: 90px;
  margin-bottom: 1rem;
}

.section-organisateur p {
  font-size: 1rem;
  line-height: 1.6;
}

.section-organisateur p.small {
  font-size: .9rem;
}

.footer-compact {
  background: #003b71;
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.95rem;
}

.footer-logo {
  max-width: 200px;
}

.footer-small-text {
  font-size: 0.85rem;
  line-height: 1.4;
}

.contact-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: #f7931e;
  margin-bottom: .3rem;
}

.footer-compact a {
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  display: inline-block;
  margin-bottom: 0.25rem;
}

.footer-compact a:hover {
  color: #f7931e;
}

.footer-social img {
  width: 40px;
  height: 40px;
  filter: brightness(0) invert(1);
  transition: transform 0.2s ease;
}

.footer-social img:hover {
  transform: scale(1.1);
}

/* --- responsive -------------------------------------------------- */
@media(max-width:992px){
  .gran-title{max-width:80%}
  .infos-banner{max-width:85%}

  .programme-heading      { font-size: 1.6rem; text-transform: uppercase; }
  .orange-text            { font-size: 1.4rem; }
  .day-header             { font-size: 1.1rem; }
  .programme-img          { max-width: 320px; }
  .day-card               { padding: 1.5rem 1.8rem; }

  .destinations{position:static; width:100%; margin-top:1rem;}
  .badge-18   {position:static; margin:1rem auto 0; max-width:150px;}
  .partners-box{flex-direction:row; flex-wrap:wrap; justify-content:center;}
  .partners-box a{flex:0 0 33%; max-width:33%;}
  .partners-box img{max-height:35px;}
}
@media(max-width:768px){
  .uci-logo{width:110px}
  .partner-logo{width:30px}
  .btn-inscription{font-size:.85rem;padding:.3rem 1rem}
  .bg-cyclistes{background-size:contain;height:45vh}

  .hero-section {
    min-height: 70vh;
    position: relative;
    padding-bottom: 140px;
}

.map-img {
    width: 100%;
}

.destination-highlight {
  height: 130px;
}

.text-parcours{
  padding: 0;
}

.overlay-text{
  padding: 3rem;
  font-size: 1rem;
  line-height: 1.2;
}
  .infos-banner-wrapper{
    text-align: center;
  }
 
  .jour-header { flex-direction: column; align-items: center; }

  .jour-header .map-icon {
    position: static;
    transform:none;
    margin-bottom: 0.75rem;
  }

  .jour-label {
    padding: 1rem;
    text-align: center;
    font-size: 1rem;
    flex-direction: column;
    gap: .5rem;
    margin-left: 0;
  }

  .bike-icon {
    height: 24px;
  }

  .title-parcours {
    font-size: 2rem;
  }
   .highlight-green {
    height: 200px;
  }

  .highlight-green::after {
    font-size: 0.9rem;
    padding: 0.8rem;
  }

  .programme-heading {
    font-size: 1.5rem;
  }

  .orange-text {
    font-size: 1.3rem;
  }

  .day-header {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    line-height: 0.5;
    font-size:1.3rem;
  }

  .programme-heading      { font-size: 1.1rem;line-height: 1.1rem; }
  .orange-text            { font-size: 1.1rem;line-height: 1rem; }
  .section-title          { font-size: 2rem; }
  .day-card               { margin-bottom: 1.5rem; }
  .day-date img           { width: 22px; }
  .day-info li            { font-size: .9rem; }
  .programme-img          { max-width: 260px; margin-top:1rem; }

   .section-title {
    font-size: 1.8rem;
  }
  .subheading {
    font-size: 2rem;
    width: 100%;
  }
  .price-tile {
    width: 100%;
  }

    .guadeloupe-stats .stat-number {
        font-size: 2rem;
      }
      .guadeloupe-stats .stat-label {
        font-size: 0.85rem;
      }
      .highlight-title {
        font-size: 1.2rem;
      }

      .footer-links {
    flex-direction: column;
    text-align: center;
  }

  .footer-links ul {
    margin-bottom: 1.5rem;
  }

  .section-organisateur .logo-footer {
    max-width: 80px;
    margin-bottom: .5rem;
  }

    .programme-inner {
    flex-wrap: nowrap;
  }

  .programme-text,
  .programme-visual {
    flex: 1;
  }

  .programme-visual img {
    width: 100%;
    padding-top: 65px;
  }

}

@media (max-width:576px){
  .partners-box a{flex:0 0 50%; max-width:50%;}
  .transport-title{font-size:1.8rem;}
  .dest-block{font-size:.8rem;}
  .badge-18 .number{font-size:2rem;}
}