/* ========================================
   RESET & BASE
======================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Archivo", Arial, sans-serif;
    background: #f4f4f0;
    color: #111;
}

/* ========================================
   HEADER
======================================== */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 92px;
    padding: 0 45px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 1000;
    background: rgba(244, 244, 240, 0.92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

/* ========================================
   LOGO
======================================== */
.logo {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: #111;
    line-height: 0.9;
    width: 180px;
}

.logo-main {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    margin-bottom: 5px;
}

.logo-name {
    font-size: 20px;
    font-weight: 900;
    letter-spacing: -1px;
}

/* ========================================
   NAVIGATION (Style "Decathlon CMA CGM")
======================================== */
.main-nav {
    display: flex;
    align-items: center;
    gap: 10px; /* Réduit un peu l'espace car les boutons ont du padding */
}

.nav-link {
    position: relative;
    text-decoration: none;
    color: #111;
    font-size: 13px;
    font-weight: 800; /* Plus gras pour l'effet sport pro */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 10px 18px;
    border-radius: 30px; /* Effet pilule */
    transition: all 0.25s ease;
}

/* L'effet au survol et pour le lien actif */
.nav-link:hover, 
.nav-link.active {
    background: #111;
    color: #f4f4f0;
}

/* ========================================
   MENU MOBILE
======================================== */
.menu-button {
    display: none;
    border: none;
    background: transparent;
    cursor: pointer;
    width: 40px;
    height: 40px;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
}

.menu-button span {
    display: block;
    width: 25px;
    height: 2px;
    background: #111;
}

/* Sur tablette/téléphone : le bouton burger apparaît et le menu devient déroulant */
@media (max-width: 1000px) {
    .site-header {
        padding: 0 20px;
    }

    .menu-button {
        display: flex;
    }

    .main-nav {
        display: none;
        position: absolute;
        top: 92px;
        left: 0;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 5px;
        padding: 20px;
        background: #f4f4f0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
    }

    .main-nav.mobile-open {
        display: flex;
    }

    .nav-link {
        text-align: center;
        font-size: 15px;
    }
}

/* ========================================
   HERO
======================================== */
.hero {
    min-height: 100vh;
    position: relative;
    display: flex;
    /* On centre verticalement pour correspondre à l'image */
    align-items: center; 
    /* 92px de padding-top pour compenser la hauteur du header fixe */
    padding: 92px 45px 0; 
    background: 
        linear-gradient(
            90deg,
            rgba(0,0,0,0.7) 0%,   /* Ombre prononcée à gauche pour faire ressortir le texte */
            rgba(0,0,0,0.45) 60%,
            rgba(0,0,0,0.3) 100%
        ),
        url("../images/hero.jpg");
    background-color: #111;
    /* La photo tient entre le menu (92px) et le bas de l'écran pour ne pas cacher
       le bouquet levé, et 47 % garde les deux bouquets dans le cadre sur téléphone */
    background-size: cover, auto calc(100% - 92px);
    background-position: 0 0, 47% bottom;
    background-repeat: no-repeat;
    color: white;
}

/* Sur ordinateur : la photo est affichée en entier sur la droite, entre le menu
   et le bas de l'écran. La partie gauche est noire avec un fondu vers la photo,
   pour que le texte ne soit pas posé sur l'équipe.
   Largeur de la photo = 1,139 × sa hauteur = 1,139 × (100vh - 92px) = 113.9vh - 105px */
@media (min-width: 1001px) {
    .hero {
        background-color: #111;
        background-image:
            /* fondu noir -> photo, calé sur le bord gauche de la photo */
            linear-gradient(
                90deg,
                #111 0%,
                #111 calc(100% - 113.9vh + 105px),
                rgba(17,17,17,0) calc(100% - 113.9vh + 105px + 25vh)
            ),
            /* léger voile à gauche pour la lisibilité du texte */
            linear-gradient(
                90deg,
                rgba(0,0,0,0.45) 0%,
                rgba(0,0,0,0) 50%
            ),
            url("../images/hero.jpg");
        background-size: auto, auto, auto calc(100% - 92px);
        background-position: 0 0, 0 0, right bottom;
        background-repeat: no-repeat;
    }
}

.hero-content {
    max-width: 1000px;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* S'assure que tout est aligné à gauche */
}

/* ========================================
   TITRE HERO
======================================== */
.hero-title {
    display: flex;
    flex-direction: column;
    font-weight: 900;
    margin-bottom: 35px; /* Espace avant le bouton */
}

.title-large {
    font-size: clamp(60px, 8vw, 110px);
    line-height: 0.95;
    letter-spacing: -2px;
}

.title-small {
    font-size: clamp(45px, 6vw, 85px);
    line-height: 0.95;
    letter-spacing: -1px;
}

/* ========================================
   BOUTON HERO
======================================== */
.hero-button {
    display: inline-flex;
    align-items: center;
    gap: 25px;
    padding: 18px 25px;
    background: white;
    color: #111;
    text-decoration: none;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 30px; /* On ajoute l'effet "pilule" comme dans le menu */
    transition: all 0.3s ease;
}

.hero-button span {
    font-size: 20px;
    transition: transform 0.3s ease;
}

.hero-button:hover {
    background: #111;
    color: white;
}

.hero-button:hover span {
    transform: translate(4px, -4px);
}

/* ========================================
   SECTION À LA UNE (ACTUALITÉS)
======================================== */
.news-section {
    padding: 80px 0 100px;
    background: #ffffff;
}

.news-section .container {
    max-width: 1450px; 
    margin: 0 auto; 
    padding: 0 45px;
}

.section-title {
    text-align: center;
    font-size: 28px;
    font-weight: 900;
    letter-spacing: -1px;
    margin-bottom: 45px;
    color: #111;
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 50px; 
}

.news-card {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    text-decoration: none; /* La carte est un lien : pas de soulignement */
    color: inherit;
}

.news-card:hover .news-title {
    color: #e60045;
}

.news-title {
    transition: color 0.3s ease;
}

.news-image {
    width: 100%;
    aspect-ratio: 3 / 2;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 15px;
}

.news-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.news-card:hover .news-image img {
    transform: scale(1.05);
}

.news-category {
    font-size: 13px;
    font-weight: 500;
    color: #444;
    margin-bottom: 8px;
    display: block;
}

.news-title {
    font-size: 18px;
    font-weight: 800;
    line-height: 1.3;
    color: #0c1222;
    letter-spacing: -0.5px;
}

/* ========================================
   SECTION STATISTIQUES (COMPTEURS)
======================================== */
.stats-section {
    background: #111; /* Fond noir */
    color: #ffffff; /* Texte blanc */
    padding: 120px 0;
    text-align: center;
}

.stats-grid {
    display: flex;
    justify-content: center;
    gap: 150px; /* Espace entre les deux compteurs */
}

.stat-box {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stat-number {
    font-size: clamp(40px, 6vw, 80px); /* Texte géant qui s'adapte à l'écran */
    font-weight: 900;
    line-height: 1;
    letter-spacing: -3px;
    margin-bottom: 15px;
}

.stat-label {
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: #888; /* Gris clair pour contraster avec le chiffre blanc */
}

/* On ajoute l'adaptation pour mobile dans les Media Queries existantes */
@media (max-width: 800px) {
    .stats-grid {
        flex-direction: column;
        gap: 60px; /* Les compteurs se mettent l'un sous l'autre sur téléphone */
    }
}

/* ========================================
   SECTION GALERIES (SLIDER)
======================================== */
.gallery-section {
    padding: 100px 0;
    background: #f4f4f0; /* Fond global du site */
}

.gallery-section .container {
    max-width: 1450px; 
    margin: 0 auto; /* C'est cette ligne qui force le centrage au milieu de la page */
    padding: 0 45px;
}
/* En-tête (Titre) */
.gallery-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.gallery-header h2 {
    font-size: 32px;
    font-weight: 900;
    letter-spacing: -1px;
}

/* Wrapper du slider pour positionner les flèches */
.gallery-slider-wrapper {
    position: relative;
}

/* La piste qui défile */
.gallery-track {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding-bottom: 15px; /* Laisse de la place pour la scrollbar si elle s'affiche */
    
    /* Masquer la scrollbar sur la plupart des navigateurs pour un look épuré */
    scrollbar-width: none; 
}
.gallery-track::-webkit-scrollbar { 
    display: none; 
}

/* Les cartes individuelles */
.gallery-card {
    flex: 0 0 280px; /* Largeur fixe des cartes. Elles ne se compresseront pas */
    aspect-ratio: 4 / 5; /* Format vertical (portrait) */
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    scroll-snap-align: start;
    cursor: pointer;
}

.gallery-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.gallery-card:hover img {
    transform: scale(1.05); /* Petit zoom au survol */
}



/* Boutons de navigation (Flèches) */
.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: white;
    border: 1px solid rgba(0,0,0,0.1);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    color: #111;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.2s ease;
}

.slider-btn:hover {
    background: #111;
    color: white;
}

/* On décale légèrement les boutons vers l'extérieur */
.prev-btn { left: -22px; }
.next-btn { right: -22px; }

/* Responsive */
@media (max-width: 1000px) {
    /* Sur tablette/mobile, on cache souvent les flèches pour forcer le glissement tactile (swipe) */
    .slider-btn {
        display: none;
    }
}

/* ========================================
   SECTION PARTENAIRES
======================================== */
.partners-section {
    padding: 100px 0;
    background: #ffffff;
}

.partners-section .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 45px;
}

/* En-tête (Titre et ligne noire) */
.partners-header {
    text-align: center;
    margin-bottom: 70px;
}

.partners-header h2 {
    font-size: 36px;
    font-weight: 900;
    color: #111; 
    letter-spacing: -1px;
    margin-bottom: 20px;
}

.separator {
    width: 50px;
    height: 3px;
    background: #111; 
    margin: 0 auto;
}

/* La grille des logos (5 colonnes) */
.partners-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr); 
    gap: 40px;
    align-items: center; 
    justify-items: center; 
}

/* Les liens autour des logos */
.partner-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.partner-logo img {
    max-width: 170px; 
    max-height: 90px;
    object-fit: contain; 
    
    /* Effet grisé par défaut */
    filter: grayscale(100%) opacity(1);
    transition: all 0.3s ease;
}

/* Au survol de la souris */
.partner-logo:hover img {
    transform: scale(1.05);
    filter: grayscale(0%); /* Le logo reprend ses couleurs au survol */
}

/* ========================================
   PIED DE PAGE (FOOTER)
======================================== */
.site-footer {
    background: #111;
    color: #fff;
    padding: 60px 0 20px;
}

.site-footer .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 45px;
}

.footer-content {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr; /* 3 colonnes bien alignées */
    gap: 60px;
    margin-bottom: 50px;
}

/* Typographie du Footer */
.footer-brand {
    font-size: 24px;
    font-weight: 900;
    letter-spacing: -1px;
    margin-bottom: 15px;
}

.footer-brand span {
    color: #888;
}

.footer-desc {
    color: #999;
    font-size: 14px;
    line-height: 1.6;
    max-width: 350px;
}

.footer-title {
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 20px;
}

/* Liens du Footer */
.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 12px;
}

.footer-links a {
    color: #999;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: #fff;
}

/* Barre inférieure (Copyright et Légal) */
.footer-bottom {
    border-top: 1px solid #333;
    padding-top: 20px;
    text-align: center;
    color: #666;
    font-size: 12px;
}

.footer-bottom a {
    color: #999;
    text-decoration: none;
    margin: 0 8px;
    transition: color 0.3s ease;
}

.footer-bottom a:hover {
    color: #fff;
}

/* ========================================
   RESPONSIVE (ACTUALITÉS)
======================================== */
@media (max-width: 1000px) {
    .news-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px 25px;
    }
}

@media (max-width: 650px) {
    .news-grid {
        grid-template-columns: 1fr;
    }
    
    .section-title {
        font-size: 24px;
        margin-bottom: 35px;
    }
}

@media (max-width: 1000px) {
    .partners-grid {
        grid-template-columns: repeat(3, 1fr); 
        gap: 50px 30px;
    }
}

@media (max-width: 650px) {
    .partners-grid {
        grid-template-columns: repeat(2, 1fr); 
        gap: 40px 20px;
    }
}

@media (max-width: 800px) {
    .footer-content {
        grid-template-columns: 1fr; /* Les 3 colonnes s'empilent */
        gap: 40px;
        text-align: center;
    }

    .footer-desc {
        margin: 0 auto;
    }
}

/* ========================================
   PAGE ÉQUIPE & BUREAU
======================================== */
.page-header {
    padding: 180px 45px 60px;
    text-align: center;
    background: transparent;
}

.page-header h1 {
    font-size: clamp(40px, 6vw, 70px);
    font-weight: 900;
    color: #111;
    letter-spacing: -2px;
    margin-bottom: 15px;
}

.page-header h1 span {
    color: #888;
}

.page-header p {
    color: #666;
    font-size: 18px;
    max-width: 600px;
    margin: 0 auto;
}

/* Conteneur principal */
.team-roster {
    padding: 0 0 100px;
}

.team-roster .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 45px;
}

/* Séparation entre Bureau et Équipe */
.roster-group {
    margin-bottom: 100px;
}

.roster-category {
    text-align: center;
    margin-bottom: 50px;
}

.roster-category h2 {
    font-size: 36px;
    font-weight: 900;
    color: #111;
    letter-spacing: -1px;
    margin-bottom: 20px;
}

/* Grille de 4 colonnes */
.roster-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

/* ========================================
   CARTES INDIVIDUELLES (AVEC HOVER)
======================================== */
.rider-card {
    position: relative;
    display: block;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    text-decoration: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.rider-card.visible {
    opacity: 1;
    transform: translateY(0);
}

.rider-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(10%);
    transition: transform 0.4s ease, filter 0.4s ease;
}

/* Dégradé noir et texte par-dessus l'image */
.rider-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 60px 20px 20px;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    z-index: 2;
}

.rider-name {
    font-size: 22px;
    font-weight: 900;
    color: #fff;
    margin: 0;
    letter-spacing: -0.5px;
    transform: translateY(12px); /* Décalé vers le bas */
    transition: transform 0.3s ease;
}

.rider-role {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    color: #ccc;
    letter-spacing: 1px;
    margin-top: 5px;
    opacity: 0; /* Masqué par défaut */
    transform: translateY(10px);
    transition: all 0.3s ease;
}

/* Effets d'animation de la carte au survol */
.rider-card:hover .rider-img {
    transform: scale(1.05);
    filter: grayscale(0%);
}

.rider-card:hover .rider-name {
    transform: translateY(0);
}

.rider-card:hover .rider-role {
    opacity: 1;
    transform: translateY(0);
}

/* Sur téléphone/tablette (pas de survol possible), on affiche directement le rôle */
@media (hover: none) {
    .rider-name,
    .rider-role {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive Mobile & Tablette */
@media (max-width: 1000px) {
    .roster-grid {
        grid-template-columns: repeat(2, 1fr); 
    }
}

@media (max-width: 650px) {
    .roster-grid {
        grid-template-columns: 1fr; 
        gap: 40px;
    }
}

/* ========================================
   PAGE ACTUALITÉS
======================================== */
.news-section {
    padding: 80px 0 100px;
}

.news-section .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 45px;
}

/* --- 1. ARTICLE À LA UNE --- */
.featured-news {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Coupe l'écran en deux */
    gap: 60px;
    align-items: center;
    margin-bottom: 80px;
}

.featured-img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.featured-img-link:hover .featured-img {
    transform: scale(1.02);
}

.tag-red {
    color: #d90429;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 20px;
}

.featured-title {
    font-size: clamp(30px, 4vw, 45px);
    font-weight: 900;
    color: #111;
    line-height: 1.1;
    margin-bottom: 20px;
    letter-spacing: -1px;
}

.featured-desc {
    font-size: 18px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 40px;
}

.featured-action {
    display: flex;
    align-items: center;
    gap: 20px;
}

.btn-read-story {
    background-color: #e60045; /* Le bouton rouge de ta capture */
    color: #fff;
    padding: 12px 30px;
    border-radius: 30px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.btn-read-story:hover {
    background-color: #bf0039;
}

.read-time {
    font-size: 14px;
    color: #888;
}

/* Ligne séparatrice */
.news-divider {
    border: none;
    height: 1px;
    background-color: #eee;
    margin: 60px 0;
}

/* --- 2. LISTE DES ARTICLES CLASSIQUES --- */
.news-list {
    display: flex;
    flex-direction: column;
    gap: 50px;
    max-width: 900px;
    margin: 0 auto; /* Centre la liste */
}

.news-item {
    display: grid;
    grid-template-columns: 350px 1fr; /* 350px pour l'image, le reste pour le texte */
    gap: 40px;
    align-items: center;
}

.news-item-img {
    width: 100%;
    aspect-ratio: 16/10;
    object-fit: cover;
    border-radius: 12px;
    transition: transform 0.3s ease;
}

.news-item-link:hover .news-item-img {
    transform: scale(1.03);
}

.news-item-tags {
    margin-bottom: 15px;
    display: flex;
    gap: 15px;
}

.tag-blue {
    color: #3f3398; /* Le bleu/violet de ta capture */
    font-size: 14px;
    font-weight: 700;
}

.news-item-title {
    font-size: 24px;
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 15px;
}

.news-item-title a {
    color: #111;
    text-decoration: none;
    transition: color 0.3s ease;
}

.news-item-title a:hover {
    color: #e60045;
}

.news-item-date {
    font-size: 14px;
    color: #111;
    font-weight: 600;
}

/* --- 3. RESPONSIVE (MOBILES) --- */
@media (max-width: 900px) {
    .featured-news {
        grid-template-columns: 1fr; /* Empile l'image et le texte */
        gap: 30px;
    }
    
    .news-item {
        grid-template-columns: 1fr; /* Empile l'image et le texte */
        gap: 20px;
    }
    
    .news-item-img {
        aspect-ratio: 16/9;
    }
}

/* ========================================
   PAGE ARTICLE (ACTUALITÉ EN ENTIER)
======================================== */
.article-page {
    padding: 160px 45px 100px;
    background: #ffffff;
}

.article-container {
    max-width: 780px;
    margin: 0 auto;
}

.article-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 40px;
    color: #666;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: color 0.2s ease;
}

.article-back:hover {
    color: #111;
}

.article-title {
    font-size: clamp(30px, 5vw, 50px);
    font-weight: 900;
    color: #111;
    line-height: 1.1;
    letter-spacing: -1px;
    margin-bottom: 20px;
}

.article-date {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #888;
    margin-bottom: 40px;
}

.article-cover {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin-bottom: 50px;
}

.article-body p {
    font-size: 18px;
    line-height: 1.75;
    color: #333;
    margin-bottom: 25px;
}

/* Évite que les « 4e », « 12e »... écartent les lignes */
.article-body sup,
.article-title sup {
    line-height: 0;
}

/* Intertitres à l'intérieur d'un article */
.article-subtitle {
    font-size: 22px;
    font-weight: 800;
    color: #111;
    line-height: 1.3;
    margin: 40px 0 15px;
}

/* Photos supplémentaires sous le texte de l'article */
.article-photos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 15px;
    margin-top: 30px;
}

.article-photos img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 10px;
}

/* Une seule photo verticale : affichée en entier, centrée */
.article-photos-portrait {
    grid-template-columns: 1fr;
    justify-items: center;
}

.article-photos-portrait img {
    aspect-ratio: auto;
    max-width: 460px;
}

/* Les noms des coureurs renvoient vers leur fiche */
.article-body a {
    color: #111;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: #e60045;
    text-underline-offset: 3px;
    transition: color 0.2s ease;
}

.article-body a:hover {
    color: #e60045;
}

.article-credit {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #eee;
    font-size: 13px;
    font-style: italic;
    line-height: 1.6;
    color: #888;
}

/* Article précédent / suivant */
.article-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 60px;
}

.article-nav-link {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 25px;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    text-decoration: none;
    transition: border-color 0.3s ease, transform 0.3s ease;
}

.article-nav-link:hover {
    border-color: #111;
    transform: translateY(-3px);
}

/* Le lien « plus ancien » reste à droite même s'il est seul */
.article-nav-next {
    grid-column: 2;
    text-align: right;
}

.article-nav-label {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #888;
}

.article-nav-title {
    font-size: 16px;
    font-weight: 800;
    line-height: 1.3;
    color: #111;
}

@media (max-width: 650px) {
    .article-page {
        padding: 130px 20px 60px;
    }

    .article-body p {
        font-size: 17px;
    }

    .article-nav {
        grid-template-columns: 1fr;
    }

    .article-nav-next {
        grid-column: auto;
    }
}

/* ========================================
   PAGES MENTIONS LÉGALES & CONFIDENTIALITÉ
======================================== */
.legal-page {
    padding: 160px 45px 100px;
    background: #ffffff;
}

.legal-container {
    max-width: 780px;
    margin: 0 auto;
}

.legal-container h1 {
    font-size: clamp(34px, 5vw, 50px);
    font-weight: 900;
    color: #111;
    letter-spacing: -1px;
    line-height: 1.1;
    margin-bottom: 15px;
}

.legal-updated {
    font-size: 14px;
    color: #888;
    padding-bottom: 30px;
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
}

.legal-container h2 {
    font-size: 22px;
    font-weight: 800;
    color: #111;
    margin: 45px 0 15px;
}

.legal-container h3 {
    font-size: 17px;
    font-weight: 800;
    color: #111;
    margin: 30px 0 12px;
}

.legal-container p,
.legal-container li {
    font-size: 16px;
    line-height: 1.7;
    color: #444;
}

.legal-container p {
    margin-bottom: 15px;
}

.legal-container ul {
    margin: 0 0 15px 22px;
}

.legal-container a {
    color: #111;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: #e60045;
    text-underline-offset: 3px;
}

.legal-container a:hover {
    color: #e60045;
}

@media (max-width: 650px) {
    .legal-page {
        padding: 130px 20px 60px;
    }
}

/* ========================================
   PAGE RÉSULTATS - BANDEAU NOIR
======================================== */
.stats-banner {
    background-color: #111;
    padding: 160px 0 80px; /* Laisse l'espace pour le menu fixe en haut */
}

.stats-container {
    display: flex;
    justify-content: center;
    gap: 100px; /* Espace entre les deux compteurs */
    text-align: center;
}

.stat-number {
    display: block;
    font-size: clamp(40px, 6vw, 80px); /* S'adapte à l'écran (sinon trop grand sur téléphone) */
    font-weight: 900;
    color: #ffffff;
    line-height: 1;
    letter-spacing: -2px;
}

.stat-label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #888;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-top: 15px;
}

/* ========================================
   PAGE RÉSULTATS - GRILLE
======================================== */
.results-grid-section {
    padding: 80px 0 120px;
    background-color: #ffffff;
}

.results-grid-section .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 45px;
}

.section-title {
    text-align: center;
    font-size: 32px;
    font-weight: 800;
    color: #111;
    margin-bottom: 60px;
}

.results-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-bottom: 60px;
}

.result-card {
    display: flex;
    flex-direction: column;
    text-decoration: none; /* Enlève le soulignement bleu par défaut des liens */
    cursor: pointer;
}

.result-img-wrapper {
    overflow: hidden; 
    border-radius: 8px;
    margin-bottom: 15px;
}

.result-img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease; /* Prépare l'animation de zoom */
    
}

.result-rider {
    font-size: 14px;
    color: #666;
    margin-bottom: 8px;
    transition: color 0.3s ease;
}

.result-title {
    font-size: 20px;
    font-weight: 800;
    color: #111;
    line-height: 1.3;
    transition: color 0.3s ease;
}


.result-card:hover .result-img {
    transform: scale(1.05);
}

.result-card:hover .result-title {
    color: #e60045; /* Met le titre en rouge au survol (modifie si besoin) */
}

/* Bouton Outline */
.btn-container {
    text-align: center;
}

.btn-outline {
    display: inline-block;
    padding: 14px 30px;
    border: 1px solid #111;
    color: #111;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-outline:hover {
    background-color: #111;
    color: #ffffff;
}

/* Responsive */
@media (max-width: 900px) {
    .stats-container {
        gap: 50px;
        flex-direction: column;
    }
    .results-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .results-grid {
        grid-template-columns: 1fr;
    }
}

/* Placé ici (après la 2e définition de .section-title) pour qu'il s'applique bien */
@media (max-width: 650px) {
    .section-title {
        font-size: 24px;
        margin-bottom: 35px;
    }
}

/* ========================================
   PAGE PARTENAIRES
======================================== */
.partners-page {
    padding: 160px 0 120px; /* Laisse l'espace pour le header */
    background-color: #fafafa; /* Fond très légèrement gris pour faire ressortir le blanc des cartes */
}

.partners-page .container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 45px;
}

/* En-tête de la page */
.partners-header {
    text-align: center;
    margin-bottom: 60px;
}

.partners-header h1 {
    font-size: clamp(35px, 5vw, 50px);
    font-weight: 900;
    color: #111;
    margin-bottom: 30px;
    letter-spacing: -1px;
}

/* La ligne séparatrice sous le titre principal */
.title-separator {
    border: none;
    height: 1px;
    background-color: #ccc;
    width: 100%;
    margin: 0;
}

/* Titres des sous-sections */
.partners-group {
    margin-bottom: 80px;
    text-align: center;
}

.partners-group h2 {
    font-size: 22px;
    font-weight: 800;
    color: #111;
    margin-bottom: 40px;
}

/* ========================================
   LES GRILLES
======================================== */
.partners-grid-main {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 colonnes pour les principaux */
    gap: 40px;
    max-width: 800px; /* Les empêche de devenir trop géantes sur grand écran */
    margin: 0 auto;
}

.partners-grid-official {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 colonnes pour les officiels */
    gap: 30px;
}

/* ========================================
   LE DESIGN DES CARTES (CARRÉ BLANC)
======================================== */
.partner-card {
    background-color: #ffffff;
    aspect-ratio: 1 / 1; /* Force la forme en carré parfait */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px; /* Espace autour du logo */
    border-radius: 8px; /* Bords très légèrement arrondis */
    box-shadow: 0 4px 15px rgba(0,0,0,0.03); /* Petite ombre légère */
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    text-decoration: none;
}

.partner-logo {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Assure que le logo n'est pas déformé */
    transition: transform 0.4s ease;
}

/* Animations au survol de la souris */
.partner-card:hover {
    transform: translateY(-8px); /* La carte se soulève */
    box-shadow: 0 15px 35px rgba(0,0,0,0.08); /* L'ombre devient plus forte */
}

.partner-card:hover .partner-logo {
    transform: scale(1.05); /* Le logo zoome très légèrement */
}

/* ========================================
   RESPONSIVE (MOBILES ET TABLETTES)
======================================== */
@media (max-width: 800px) {
    .partners-grid-main {
        grid-template-columns: 1fr; /* 1 colonne sur mobile */
        gap: 30px;
        padding: 0 20px;
    }
    
    .partners-grid-official {
        grid-template-columns: repeat(2, 1fr); /* 2 colonnes pour les petits sur tablette */
        gap: 20px;
    }
}

@media (max-width: 500px) {
    .partners-grid-official {
        grid-template-columns: 1fr; /* Tout passe à 1 colonne sur petit téléphone */
    }
}

/* ========================================
   PAGE PROFIL COUREUR
======================================== */

/* --- Section Hero (Photo + Infos) --- */
.profile-hero {
    padding: 180px 45px 100px;
    background: #f4f4f0;
}

.profile-hero-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    gap: 70px;
    align-items: center;
}

.profile-photo-wrapper {
    flex: 0 0 400px;
    aspect-ratio: 3 / 4;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.profile-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-details {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.btn-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    margin-bottom: 30px;
    color: #666;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: color 0.2s ease;
}

.btn-back:hover {
    color: #111;
}

.profile-title {
    font-size: clamp(45px, 6vw, 80px);
    font-weight: 900;
    line-height: 0.95;
    letter-spacing: -2px;
    color: #111;
    margin-bottom: 40px;
}

.profile-stats-list {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.15);
}

.profile-stats-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

.profile-stats-list .stat-label {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #888;
    margin-top: 0; /* Annule la marge du .stat-label de la page Résultats */
}

.profile-stats-list .stat-value {
    font-size: 15px;
    font-weight: 800;
    color: #111;
    text-align: right;
}

/* --- Section Résultats (fond noir) --- */
.profile-results {
    background: #111;
    color: #fff;
    padding: 100px 0;
}

.profile-results-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 45px;
}

.season-title {
    font-size: 32px;
    font-weight: 900;
    letter-spacing: -1px;
    margin-bottom: 60px;
}

.results-group {
    margin-bottom: 50px;
}

.results-group:last-child {
    margin-bottom: 0;
}

.results-group h3 {
    font-size: 15px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #888;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.results-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.results-list li {
    padding: 12px 0;
    font-size: 16px;
    font-weight: 500;
    color: #e5e5e5;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.results-list li:last-child {
    border-bottom: none;
}

/* --- Responsive --- */
@media (max-width: 900px) {
    .profile-hero-container {
        flex-direction: column;
        gap: 40px;
        text-align: center;
    }

    .profile-photo-wrapper {
        flex: none;
        width: 100%;
        max-width: 350px;
    }

    .profile-stats-list li {
        justify-content: space-between;
    }

    .btn-back {
        margin: 0 auto 30px;
    }
}

@media (max-width: 650px) {
    .profile-hero {
        padding: 150px 25px 60px;
    }

    .profile-title {
        font-size: 40px;
    }

    .season-title {
        font-size: 26px;
    }
}

/* ========================================
   ANIMATION DE CHANGEMENT DE PAGE (Sans le header)
======================================== */
/* Le header reste fixe, on anime seulement le contenu principal et le footer */
main, footer {
    animation: fadeInPage 0.5s ease-out forwards;
}

/* Quand on clique sur un lien, le JS ajoute 'page-leaving' au body, 
   ce qui déclenche la sortie du contenu et du footer */
body.page-leaving main,
body.page-leaving footer {
    animation: fadeOutPage 0.4s ease-in forwards;
}

/* Les mouvements (identiques, mais appliqués uniquement au contenu) */
@keyframes fadeInPage {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeOutPage {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-15px);
    }
}




/* ========================================
   TEXTE INVISIBLE À L'ÉCRAN (lu par Google et les lecteurs d'écran)
======================================== */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ========================================
   ACCUEIL - PROCHAIN ÉVÉNEMENT (affiche)
======================================== */
.event-section {
    background: #111;
    color: #fff;
    padding: 80px 0;
}

.event-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 45px;
    display: grid;
    grid-template-columns: minmax(260px, 420px) 1fr;
    gap: 60px;
    align-items: center;
}

.event-poster {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease;
}

.event-poster-link:hover .event-poster {
    transform: scale(1.02);
}

.event-tag {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 30px;
    background: #f5b72a;
    color: #111;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.event-title {
    font-size: clamp(32px, 4vw, 52px);
    font-weight: 900;
    letter-spacing: -1px;
    line-height: 1.05;
    margin-bottom: 12px;
}

.event-date {
    font-size: 20px;
    font-weight: 800;
    color: #f5b72a;
    margin-bottom: 25px;
}

.event-infos {
    list-style: none;
    padding: 0;
    margin: 0 0 35px;
}

.event-infos li {
    font-size: 16px;
    line-height: 1.6;
    color: #ddd;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.event-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.event-btn {
    display: inline-block;
    padding: 14px 24px;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    transition: all 0.25s ease;
}

.event-btn:hover {
    background: #fff;
    color: #111;
}

.event-btn-main {
    background: #e60045;
    border-color: #e60045;
}

.event-btn-main:hover {
    background: #bf0039;
    border-color: #bf0039;
    color: #fff;
}

@media (max-width: 800px) {
    .event-section {
        padding: 60px 0;
    }

    .event-container {
        grid-template-columns: 1fr;
        gap: 35px;
        padding: 0 20px;
        justify-items: center;
    }

    .event-poster-link {
        max-width: 380px;
        width: 100%;
    }

    .event-content {
        width: 100%;
    }
}