/*
Theme Name: Les Muletiers (T2C)
Author: Toavina Randrianatrehina
Description: Thème WordPress développé sur-mesure pour le site officiel de la course événementielle du Trophée T2C des Muletiers. Un guide d'utilisation et de modification est disponible en cliquant <a href="https://muletiu.cluster100.hosting.ovh.net/wp-content/uploads/2026/05/GUIDE-Theme-Les-Multiers-63.pdf" target="_blank">ici</a>. Ce thème léger intègre une structure CSS personnalisée, la gestion des cartes interactives avec tracés GPX, ainsi que des modèles de pages dédiés pour les résultats et les galeries photos. Conçu pour une navigation fluide et agréable sur tout types d'appareil en gardant une gestion assez simple.
Requires PHP: 8.4
Version: 1.2
*/

* { font-family: Arial, Helvetica, sans-serif; }
body, html { margin: 0; padding: 0; scroll-behavior: smooth; }

#content-start { scroll-margin-top: 120px; }
body.admin-bar .navbar { top: 32px !important; }
.navbar { position: fixed; top: 0; width: 100%; z-index: 1002; transition: background 0.4s ease; padding: 10px 0; }
.navbar.is-transparent { background: transparent; }
.navbar.is-scrolled, .navbar.is-opaque { background: rgba(0, 0, 0, 0.93); padding: 10px 0; }
.navbar-title { position: absolute; left: 50%; transform: translateX(-50%); color: #ffffff; font-size: 1.2rem; font-weight: bold; text-transform: uppercase; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.4s ease, transform 0.4s ease; }
.header-container { max-width: 1400px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; position: relative;}
.logo a { color: white; text-decoration: none; font-size: 24px; }
.logo img, .custom-logo-link img { max-height: 100px; width: auto; display: block;  border-radius: 20px; transition: border-radius 0.3s ease; }
.logo img:hover ,.custom-logo-link:hover img:hover { border-radius: 60px; } 

.navbar.is-scrolled .navbar-title { opacity: 1; pointer-events: auto;}

@media screen and (max-width: 768px) {
    .navbar-title {font-size: 15px}
}
.hamburger { cursor: pointer; width: 30px; height: 20px; display: flex; flex-direction: column; justify-content: space-between; padding: 15px 15px; box-sizing: content-box; background-color: rgba(255, 255, 255, 0.05); border-radius: 8px; transition: background-color 0.3s ease;}
.hamburger span { display: block; width: 100%; height: 3px; background: white; transition: width 0.3s ease, transform 0.3s ease, opacity 0.3s ease; }
.hamburger:hover { background-color: rgba(255, 255, 255, 0.2);}
.hamburger:hover span:nth-child(2) { width: 90%; }
.hamburger:hover span:nth-child(3) { width: 80%; }

.menu-overlay { position: fixed; top: 0; right: -350px; width: 300px; height: 100vh; background: #1e1e1e; display: flex; flex-direction: column; padding-top: 80px; transition: right 0.4s ease-in-out; box-shadow: -5px 0 15px rgba(0,0,0,0.5); z-index: 1002; }
.is-open .menu-overlay { right: 0; }
.close-btn { position: absolute; top: 25px; right: 30px; color: white; font-size: 40px; cursor: pointer; line-height: 1; transition: color 0.2s; }
.close-btn:hover { color: #ec6619; }
.menu-overlay ul { list-style: none; padding: 0; margin: 0; }
.menu-overlay ul li a { color: white; font-size: 18px; text-decoration: none; display: block; padding: 15px 30px; border-bottom: 1px solid rgba(255,255,255,0.1); transition: 0.2s; }
.menu-overlay ul li a:hover { background: rgba(255,0,0,0.2); padding-left: 40px; }

.hero { height: 100vh; background-size: cover; background-position: center; position: relative; display: flex; align-items: center; justify-content: center; }
.hero-overlay { background: rgba(0,0,0,0.5); width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.hero-content { text-align: center; color: white; }
.hero-title { font-size: 4rem; margin: 0; }
.hero-separator { width: 20rem; height: 2px; background: rgba(255, 255, 255, 0.25); margin: 20px auto; }
.hero-subtitle { font-size: 1.5rem; opacity: 0.8; }
.scroll-down { z-index: 1001; position: absolute; bottom: 30px; color: white; font-size: 2rem; text-decoration: none; animation: pulsate 2s infinite; }
.scroll-down:hover { transform: scale(1.1);}
.hero-blur-transition { position: absolute; bottom: 0; width: 100%; height: 100px; background: linear-gradient(transparent, black); filter: blur(20px); }

.hero-banner { position: relative; height: 70vh; min-height: 350px; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; margin-bottom: 60px; }
.hero-overlay-gradient { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.24) 0%, rgba(0, 0, 0, 0.7) 70%, rgb(0, 0, 0) 100%); z-index: 1; }
.hero-banner .hero-content { position: relative; z-index: 2; text-align: center; color: white; }
.scallop-border { position: absolute; bottom: -20px; left: 0; width: 100%; height: 20px; background-image: radial-gradient(circle at 50% 0, rgba(0, 0, 0, 1) 50%, transparent 51%); background-size: 25px 30px; background-repeat: repeat-x; z-index: 3; }

.main-content { max-width: 1400px; margin: 60px auto; padding: 0 20px; }
.main-content > * { margin-bottom: 30px; }
.main-content > *:last-child { margin-bottom: 0; }
@keyframes pulsate { 0% { opacity: .5 } 50% { opacity: 1 } 100% { opacity: .3 } }

.site-footer { position: relative; background-color: #222; background-size: cover; background-position: center; color: white; padding: 30px 0; margin-top: 30px; }
.footer-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.281); z-index: 1; }
.footer-container { position: relative; z-index: 2; max-width: 1600px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 0 30px; }
.footer-col { flex: 1; }
.footer-links { display: flex; flex-direction: column; gap: 10px; }
.footer-links a { color: #e0e0e0; text-decoration: underline; font-size: 16px; transition: color 0.3s ease; }
.footer-links a:hover { color: #e60000; }
.footer-center { text-align: center; font-size: 30px; }

.footer-contact { text-align: right; font-size: 16px; line-height: 1.5; color: #e0e0e0; }
.footer-contact p { margin: 0 0 5px 0; }
.footer-contact a { color: #e0e0e0; text-decoration: underline; }
.footer-socials { display: flex; justify-content: flex-end; margin-top: 15px; }
.footer-socials svg { width: 28px; height: 28px; fill: white; transition: fill 0.3s ease, transform 0.2s; }
.footer-socials a:hover svg { fill: #e60000; transform: scale(1.1); }
.footer-tel a { text-decoration: none; font-weight: bold; color: white;}

@media screen and (max-width: 768px) {
    .footer-container { flex-direction: column; text-align: center; gap: 30px; }
    .footer-col { width: 100%; }
    .footer-contact { text-align: center; }
    .footer-socials { justify-content: center; }
    .logo img, .custom-logo-link img { max-height: 50px; }
    .header-container { padding: 0 15px; }
    .hero-title { font-size: 2.5rem !important; }
}