/* ============================
   PALETTE GLOBALE (inspirée Département)
   ============================ */

:root {
  --accent-main: #001478;
  --accent-light: #99dfff;
  --accent-sand: #bda87d;
  --text-dark: #222222;
  --text-white: #ffffff;
  --accent-turquoise: #9bf1ff;
}

/* ============================
   THEMES VTT & GRAVEL
   ============================ */

body.vtt-theme {
  --accent-main: #2e5d32;
  background-color: #2e5d32 !important;
}

body.gravel-theme {
  --accent-main: #d87a2f;
  background-color: #d87a2f !important; /* ton orange */  
}

/* Couleur des liens du menu latéral UNIQUEMENT sur la page d'accueil */
body:not(.vtt-theme):not(.gravel-theme) #menu .links a {
  color: var(--accent-sand); /* beige sable */
}

/* Hover général (inchangé) */
#menu .links a:hover {
  color: var(--accent-turquoise);
}

/* Supprimer TOUTES les flèches des boutons .next */
.button.next:before,
.button.next:after,
.button.next:hover:before,
.button.next:hover:after {
  content: '' !important;
  display: none !important;
}



/* ============================
   SECTIONS INTERNES (fond sable)
   ============================ */

#main > section {
  background-color: var(--accent-sand) !important;
  color: var(--text-dark) !important;
}

#main > section .inner {
  background-color: var(--accent-sand) !important;
}

#main > section p {
  color: var(--text-white) !important;
  opacity: 1 !important;
}


/* ============================
   SUPPRESSION DU VOILE BANNIÈRE (ancienne tentative)
   ============================ */

#banner:before,
#banner.major:before,
#banner.style2:before,
#banner.style3:before {
  display: none !important;
}

#banner.major p {
  color: var(--accent-turquoise) !important;
}

/* ============================
   TYPOGRAPHIE
   ============================ */

body {
  color: var(--text-dark);
}

a {
  color: var(--accent-main);
}

a:hover {
  color: var(--accent-light);
}

/* ============================
   BOUTONS
   ============================ */

.button.primary {
  background-color: var(--accent-main);
  border-color: var(--accent-main);
  color: #ffffff;
}

.button.primary:hover {
  background-color: var(--accent-light);
  border-color: var(--accent-light);
  color: #001478;
}

.button.next {
  background-color: var(--accent-light) !important;
  border-color: var(--accent-light) !important;
  color: var(--accent-main) !important;
}

.button.next:hover { 
  background-color: var(--accent-main) !important;
  border-color: var(--accent-main) !important;
  color: var(--text-white) !important;
}

/* ============================
   TUILES – CORRECTION FORTY (uniquement parcours)
   ============================ */

.parcours-tiles article:before,
.parcours-tiles article:after {
  opacity: 0 !important;
  background: none !important;
}

.parcours-tiles article:nth-child(6n - 5):before,
.parcours-tiles article:nth-child(6n - 4):before,
.parcours-tiles article:nth-child(6n - 3):before,
.parcours-tiles article:nth-child(6n - 2):before,
.parcours-tiles article:nth-child(6n - 1):before,
.parcours-tiles article:nth-child(6n):before {
  background: none !important;
}

.parcours-tiles article {
  background-image: none !important;
}

.parcours-tiles article .image {
  display: block !important;
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
}

.parcours-tiles article .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.parcours-tiles article header {
  position: relative;
  z-index: 3;
}

.parcours-tiles article header h3,
.parcours-tiles article header p {
  color: #ffffff !important;
  text-shadow: 0 0 5px rgba(0,0,0,0.6);
}

/* ============================
   VOILE DE DIFFICULTÉ
   ============================ */

.parcours-tiles article .image::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  opacity: 0.45;
}

.parcours-tiles .difficulty-green .image::before { background: #4CAF50; }
.parcours-tiles .difficulty-blue .image::before { background: #2196F3; }
.parcours-tiles .difficulty-red .image::before { background: #E53935; }
.parcours-tiles .difficulty-black .image::before { background: #000000; }

/* ============================
   TUILES – CORRECTION TUILE N°2 ACCUEIL & VTT
   ============================ */

.tiles > article:nth-child(2):before {
  background-color: var(--accent-main) !important;
}

body.vtt-theme .tiles > article:nth-child(2):before {
  background-color: #2e5d32 !important;
}

/* ============================
   SECTIONS
   ============================ */

#one,
#two,
#three {
  background-color: var(--accent-sand);
  color: var(--text-dark);
}

/* ============================
   FOOTER
   ============================ */

#footer {
  background-color: var(--accent-main);
  color: #ffffff;
}

#footer a {
  color: var(--accent-light);
}

/* ============================
   PATCH LISIBILITÉ HEADER
   ============================ */

#header .logo span,
#header nav a {
  color: var(--accent-sand) !important;
}

/* ============================
   PATCH LISIBILITÉ SECTIONS
   ============================ */

#one p {
  color: var(--text-white) !important;
  opacity: 1 !important;
}

#two p,
#three p {
  color: var(--text-dark) !important;
  opacity: 1 !important;
}

/* ============================
   AUTRES
   ============================ */

.logo-vef {
  width: 30% !important;
  height: auto !important;
  display: block;
  margin: 0 auto;
}

/* ============================
   OPTION 3 — VOILE LÉGER + TEXTE BLANC (bannières)
   ============================ */

/* Voile léger noir */
#banner:after,
#banner.style1:after,
#banner.style2:after,
#banner.style3:after,
#banner.style4:after,
#banner.style5:after,
#banner.style6:after {
  background: rgba(0,0,0,0.40) !important;
  opacity: 1 !important;
}

/* Texte blanc lisible */
#banner h1,
#banner p {
  color: #ffffff !important;
  text-shadow: 0 0 8px rgba(0,0,0,0.6);
}

/* Grille des partenaires */
.partners-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
  align-items: center;
  margin-top: 1.5rem;
}

/* Chaque logo */
.partner {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 180px;
}

/* Images partenaires */
.partner img {
  max-width: 100%;
  max-height: 100px;
  height: auto;
  object-fit: contain;
  background: #ffffff;
  padding: 8px;
  border-radius: 4px;
}

/* Texte du partenaire (ex: Balisage 90) */
.partner span {
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--text-dark);
}

/* Suppression des pointillés sous les logos partenaires */
.partners-grid a {
  border-bottom: none !important;
  text-decoration: none !important;
}

.partners-grid a:hover {
  border-bottom: none !important;
  text-decoration: none !important;
}

/* Empile les deux boutons du banner en version mobile */
@media screen and (max-width: 736px) {

  #banner .actions {
    display: block !important;
    width: 100% !important;
  }

  #banner .actions li {
    display: block !important;
    width: 100% !important;
    margin: 0 0 1rem 0 !important;
  }

  #banner .actions li .button {
    width: 100% !important;
    text-align: center !important;
    display: block !important;
  }
}

/* Forcer l'affichage du & Gravel90 en mobile */
#header .logo span {
  display: inline !important;
  opacity: 1 !important;
  visibility: visible !important;
  font-weight: 600 !important;
}

/* Neutraliser la règle mobile de Forty */
@media screen and (max-width: 736px) {
  #header .logo span {
    display: inline !important;
  }
}

/* Liste Infos Générales en blanc */
#two .inner ul:first-of-type li {
  color: var(--text-white);
}

/* Deuxième section de la page Infos = "Dans la presse" */
section .inner ul.links a {
  color: var(--text-white);
}

section .inner ul li {
  color: var(--text-white);
}

/* Augmenter la hauteur de toutes les bannières du site */
#banner,
#banner.style1,
#banner.style2,
#banner.style3,
#banner.style4,
#banner.style5,
#banner.style6 {
  min-height: 60vh !important; /* Ajuste la valeur selon ton goût */
}

.button.disabled {
  pointer-events: none;      /* empêche le clic */
  opacity: 0.5;              /* visuel "désactivé" */
  background-color: #777 !important; /* gris */
  cursor: default;
}

/* Lisibilité des liens dans la partie Gravel */
body.gravel-theme #main a {
  font-weight: 600; /* semi-bold */
  color: var(--accent-main); /* orange Gravel */
  text-decoration: underline; /* lisible sur fond sable */
}

body.gravel-theme #main a:hover {
  color: var(--accent-light); /* orange clair au survol */
}

/* pour la gestion du profil alti */
#profile {
  position: relative;
  z-index: 1;
  background: white;
  padding: 10px;
  margin-bottom: 30px; /* espace sous le profil */
}

#profile .elevation {
  width: 100% !important;
  height: auto !important; /* laisse le graphe prendre sa vraie hauteur */
  min-height: 260px;       /* sécurité */
}

#profile svg {
  display: block;
  width: 100% !important;
  height: auto !important;
}

.leaflet-control-elevation {
  z-index: 2 !important;
}

#map {
  margin-bottom: 20px;
}

/* === Correction du débordement Leaflet-Elevation === */

/* Le conteneur principal du plugin (celui qui déborde) */

.leaflet-control-elevation.elevation {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  margin-bottom: 50px !important;
  padding-bottom: 20px !important;
  z-index: 1 !important;
  pointer-events: auto !important;
}

/* Le SVG du graphe */
.leaflet-control-elevation.elevation svg {
  width: 100% !important;
  height: auto !important;
  display: block;
}

/* Le résumé sous le graphe */
.leaflet-control-elevation .elevation-summary {
  position: relative !important;
  margin-top: 10px !important;
}

/* Désactive les clics sur le conteneur global des contrôles Leaflet */
.leaflet-control-container {
  pointer-events: none !important;
}

/* Réactive les clics sur les vrais contrôles Leaflet */
.leaflet-control-container .leaflet-control {
  pointer-events: auto !important;
}

/* Réactive les clics sur le profil altimétrique */
.leaflet-control-elevation.elevation {
  pointer-events: auto !important;
}

/* Espace entre le profil et le bouton sur mobile */
@media screen and (max-width: 736px) {
  section + section .actions {
    margin-top: 2rem !important; /* augmente si tu veux plus d'air */
  }
}

/* Taille et espacement de la carte */
#map {
  width: 100%;
  height: 400px;
  margin-bottom: 20px;
}

/* Taille du profil altimétrique */
#profile {
  width: 100%;
  height: 250px;
}

.elevation-toggle-icon {
    display: none !important;
}