/* ============================================================
   1. BASES & RESET
   ============================================================ */
html, body { 
    margin: 0; 
    padding: 0; 
    overflow: hidden; /* Nécessaire pour le scroll-snap */
    background-color: white; 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.scroll-container {
    height: 100vh;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
}

/* ============================================================
   2. OVERLAY DE BLOCAGE (Orientation mobile)
   ============================================================ */
#orientation-blocker {
    display: none;
}

@media (orientation: landscape) and (max-width: 1024px) {
    #orientation-blocker {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: fixed;
        top: 0; left: 0;
        width: 100vw; height: 100vh;
        background-color: #0d0d0d;
        color: #ffffff;
        z-index: 1000000;
        text-align: center;
    }
    header, main { display: none !important; }
}

/* --- Animation Téléphone --- */
.animation-container { position: relative; width: 150px; height: 150px; margin-bottom: 20px; }
.phone-device {
    width: 50px; height: 90px; background: #1a1a1a; border: 3px solid #3d3d3d; border-radius: 10px;
    position: absolute; top: 50%; left: 50%; margin-top: -45px; margin-left: -25px;
    animation: rotatePhone 2.5s ease-in-out infinite;
}
.phone-device::before {
    content: ''; position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
    width: 15px; height: 3px; background: #3d3d3d; border-radius: 10px;
}
.rotation-arrows {
    width: 110px; height: 110px; border: 3px solid transparent;
    border-top: 3px solid #e10600; border-bottom: 3px solid #e10600; border-radius: 50%;
    position: absolute; top: 50%; left: 50%; margin-top: -55px; margin-left: -55px;
    animation: spin 2.5s linear infinite;
}

@keyframes rotatePhone {
    0%, 10% { transform: rotate(90deg); }
    40%, 60% { transform: rotate(0deg); }
    90%, 100% { transform: rotate(90deg); }
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* ============================================================
   3. STRUCTURE DES PAGES (CADRE DOSSIER)
   ============================================================ */
/* --- AJUSTEMENT DU CONTENEUR PARENT --- */

.page {
    height: 100vh;
    width: 100%;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; 
    align-items: center;
    position: relative;
    overflow: hidden;
    /* On remplace 120px par 15vh (environ 15% de la hauteur de l'écran) */
    padding-top: 19vh; 
    box-sizing: border-box;
}

.page-frame {
    position: relative;
    width: 92vw;
    height: 67vh;
    margin: 0 auto;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Tout le monde en haut par défaut */
    align-items: center;
    padding: 15px;
    box-sizing: border-box;
    z-index: 20;
    gap: 10px; /* Espace constant entre les éléments */
}

/* --- AJUSTEMENT DES ANGLES --- */
.page-frame::before {
    content: "";
    position: absolute;
    /* On cale les angles exactement sur les bords du cadre défini au-dessus */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 25;

    /* Taille fixe pour les angles en mobile */
    background: 
        linear-gradient(to right, black 30px, transparent 30px) 0 0,
        linear-gradient(to left, black 30px, transparent 30px) 100% 0,
        linear-gradient(to right, black 30px, transparent 30px) 0 100%,
        linear-gradient(to left, black 30px, transparent 30px) 100% 100%,
        linear-gradient(to bottom, black 30px, transparent 30px) 0 0,
        linear-gradient(to bottom, black 30px, transparent 30px) 100% 0,
        linear-gradient(to top, black 30px, transparent 30px) 0 100%,
        linear-gradient(to top, black 30px, transparent 30px) 100% 100%;
    background-repeat: no-repeat;
    background-size: 30px 2px, 30px 2px, 30px 2px, 30px 2px, 2px 30px, 2px 30px, 2px 30px, 2px 30px;
}

/* --- Bordure intérieure fine --- */
.page-frame::after {
    content: ""; position: absolute; top: 15px; left: 15px; right: 15px; bottom: 15px;
    border: 1px solid black; pointer-events: none; z-index: 20;
}

/* ============================================================
   PAGE 1 : ACCUEIL MOBILE (Conversion VH/VW)
   ============================================================ */

.dossier-title {
    background: linear-gradient(90deg, #965df4 0%, #7d96f1 45%, #76c6ec 75%, #6de6f0 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 3vh; 
    font-weight: 800;
    text-transform: none; /* L'image n'est pas en majuscules */
    text-align: center;
    margin-top: 2vh;
}

.saison-title {
	background: linear-gradient(90deg, #965df4 0%, #7d96f1 45%, #76c6ec 75%, #6de6f0 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 2.4vh; /* ~1.1rem */
    color: #7baaff;
    font-weight: 800;
    text-align: center;
}

.pilot-identity {
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 15px; /* On garde le gap fixe ou 3vw */
    z-index: 5;
    width: 100%;
    justify-content: center;
}

.img-flag-fr {
    height: 4.5vh; /* Remplacé 35px */
    width: auto;
}

.pilot-name .firstname {
    display: block;
    font-family: 'Brush Script MT', cursive;
    font-size: 2.4vh; /* ~1.1rem */
}

.pilot-name .lastname {
    font-size: 4vh; /* ~1.8rem */
    font-weight: 900;
    line-height: 1;
}

/* Logo central réduit */
.main-logo-container {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 100%;
    text-align: center;
}

.main-logo-mpk {
    height: 15vh;
    max-width: 60vw;
    object-fit: contain;
}

/* Championnat Ouest remonté */
.page-1-footer {
    position: absolute;
    bottom: 15vh;
    right: 5vw; /* Remplacé 20px */
    z-index: 5;
    text-align: right;
}

.footer-text-wrap p {
    font-size: 2vh; /* ~0.95rem */
    font-weight: 900;
    line-height: 1.3;
    text-transform: uppercase;
    background: linear-gradient(to right, #7baaff, #a288ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.contact-footer {
    position: absolute;
    bottom: 5vh;
    left: 0;
    right: 0;
    margin: auto;
    width: 100%; /* Plus simple pour centrer */
    text-align: center;
    font-size: 1.3vh; /* ~0.7rem */
    z-index: 15;
}

/* Bandes de couleurs conservées à 150px (ou 18vh pour le ratio) */
.corner-stripes-left, 
.corner-stripes-right {
    position: absolute;
    bottom: 0;
    width: 18vh;  /* Équivalent de ~130-150px selon l'écran */
    height: 18vh;
    z-index: 10;
    pointer-events: none;
}

.corner-stripes-left {
    left: 0;
    background: linear-gradient(45deg, #a288ff 0%, #a288ff 12%, #7baaff 12%, #7baaff 24%, black 24%, black 36%, transparent 36%);
}

.corner-stripes-right {
    right: 0;
    background: linear-gradient(-45deg, #a288ff 0%, #a288ff 12%, #7baaff 12%, #7baaff 24%, black 24%, black 36%, transparent 36%);
}

/* ============================================================
   5. PAGE 2 : PRÉSENTATION & BIO (Mise à jour vh)
   ============================================================ */

#page-2 .page-frame {
    justify-content: flex-start; 
    gap: 1vh; /* Espace proportionnel entre les blocs */
    padding-top: 2vh;
}

.page-2-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.gradient-title { 
    /* 4rem était énorme, on passe à une taille basée sur la hauteur */
    font-size: 4.5vh; 
    font-weight: 800; 
    margin-bottom: 1vh;
    background: linear-gradient(to right, #8a2be2, #00ced1); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent;
}

.img-double-drapeau {
    height: 5vh; 
    width: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

.intro-text { 
    font-size: 1.5vh; /* Remplace 0.7rem */
    max-width: 85%;  /* Plus flexible que 300px */
    margin: 1vh auto; 
    line-height: 1.4; 
    text-align: center;
}

.img-action {
    height: 18vh;    /* Légèrement agrandi pour l'impact visuel */
    width: auto;
    object-fit: contain;
    display: block;
    margin: 1vh auto;
}

.biography-text {
    font-size: 1.35vh; /* Remplace 0.6rem pour être lisible */
    max-width: 85%; 
    margin: 1vh auto; 
    line-height: 1.4; 
    text-align: center;
}

.blue-year {
    color: #00ced1;
    font-weight: bold;
}

/* ============================================================
   6. PAGE 3 : RÉSULTATS
   ============================================================ */

.mini-flag {
    height: 1.8vh; /* Plus petit et proportionnel au texte */
    width: auto;
    object-fit: contain;
    display: inline-block;
    vertical-align: middle;
}

/* Container global de la page 3 */
.results-container {
    display: flex;
    flex-direction: column;
    gap: 1vh; /* Espace réduit entre les blocs */
    width: 95%;
    margin: 0 auto;
}

/* Chaque bloc de résultat (Catégorie + Détails) */
.result-block {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Titre et petit drapeau */
.result-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0.3vh;
}

.result-category-title {
    color: #e62117;
    text-transform: uppercase;
    font-weight: 800;
    font-size: 1.4vh; /* Taille ajustée pour tenir sur une ligne */
    margin: 0;
}

/* Bloc qui contient lieux et rang */
.result-details {
    display: flex;
    flex-direction: column; /* RANK SOUS LA LOCATION */
    align-items: center;    /* Tout centré horizontalement */
    padding: 1vh 0;       /* Padding très fin */
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    text-align: center;
}

/* Texte des circuits et dates */
.result-locations {
    font-size: 1.5vh; /* Taille discrète */
    color: #555;
    line-height: 1.2;
    margin-bottom: 0.4vh;
}

.result-locations span {
    font-weight: 700;
}

/* Le classement (Rank) */
.rank {
    font-weight: 800;
    font-size: 1.5vh; /* Plus gros pour le contraste */
    color: #333;
	white-space: nowrap;
	display: block;
    line-height: 1;
}

/* On cache le logo sur mobile comme convenu */
.result-logo {
    display: none;
}

.yellow-rank {
    color: #f1c40f;
}

/* ============================================================
   7. PAGE 4 : CALENDRIER
   ============================================================ */

.sub-title {
    font-size: 1.8vh;       /* Taille plus petite et discrète */
    font-weight: 600;      /* Un peu moins gras pour alléger le visuel */
    text-align: center;    /* Bien centré sous le header */
    margin-top: 0.2vh;     /* Espace minimal avec le header */
    margin-bottom: 1vh;    /* Un peu d'air avant de commencer les blocs de courses */
    color: #444;           /* Un gris foncé pour rester sobre */
}

/* Si tu veux que le texte en bleu à l'intérieur reste bien visible */
.sub-title .blue-bold {
    color: #0056b3;
    font-weight: 800;
}

/* Container de bloc pour la saison 2026 */
.category-block {
    width: 100%;
    background: rgba(0, 0, 0, 0.02);
    padding: 1.2vh; /* Padding réduit pour gagner de la place */
    border-radius: 8px;
    margin-bottom: 1.5vh;
}

.block-header {
    display: flex;
    align-items: center; 
    gap: 8px;
    margin-bottom: 0.5vh;
    width: 100%; /* Important pour que le flex sache quelle place il a */
}

/* Titre de la compétition (ex: NSK, Ligue...) */
.red-title {
    color: #ff3b3b;
    font-size: 1.4vh; 
    text-transform: uppercase;
    font-weight: 800;
    margin-bottom: 0.8vh;
}

/* Masquer le logo sur le côté sur Mobile */
.logo-side {
    display: none; 
}

/* Structure Flex pour le contenu (Liste ou Images) */
.flex-row {
    display: flex;
    flex-direction: column; /* On empile sur mobile pour utiliser toute la largeur */
    gap: 1vh;
}

/* Lignes du calendrier (Ancenis, Le Mans...) */
.event-row {
    display: flex;
    justify-content: space-between;
    padding: 0.6vh 0;
    border-bottom: 1px dotted #ccc; /* Pointillés pour plus de légèreté */
    font-size: 1.3vh;
}

/* Images des circuits (Angerville, Plessé...) */
.nsk-images {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 0.5vh;
}

.img-circuit {
    width: 40%;        /* Deux images côte à côte */
    height: auto;
    max-height: 10vh;  /* Sécurité verticale */
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Texte d'info (sous réserve de qualification) */
.final-info small {
    display: block;
    font-size: 1vh;
    color: #777;
    margin-bottom: 0.5vh;
    text-align: center;
}

.final-event-date {
    text-align: center;
    font-size: 1.4vh;
    font-weight: 700;
}

/* ============================================================
   8. PAGE 5 : PARTENAIRES
   ============================================================ */

.page-5-content {
    max-width: 100%;
	display: flex;
    flex-direction: column;
    justify-content: center; /* Centre tout le bloc verticalement dans les 67vh */
    height: 100%;
    padding: 0 5%; /* Donne un peu d'air sur les côtés */
}

.main-intro {
    font-size: 1.5vh;      /* Taille réduite pour tenir sur mobile */
    font-weight: 500;
    line-height: 1.5;
    text-align: center;    /* Centre le texte horizontalement */
    color: #333;
    margin: 2vh auto 2vh auto; /* Centre le bloc et ajoute de l'espace en bas */
}

/* Le texte de mise en avant juste en dessous */
.blue-text-highlight {
    color: #3b82f6;
    font-weight: 800;
    font-size: 1.5vh; 
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 2vh;
}

.partnership-text {
    font-size: 1.5vh;
    color: #444;
    line-height: 1.5;
    text-align: justify;
}

.bold-commitment {
    font-weight: 800;
    font-size: 1.5vh;
    text-align: center;
    color: #000;
    margin-top: 1vh;
}

/* Container pour le logo en bas de page */
.logo-footer-partners {
    display: block;      /* Permet d'utiliser margin auto */
    margin: 5vh auto 1.5vh auto;  /* 0 en haut/bas (ou 1.5vh pour l'air) et auto sur les côtés pour centrer */
    
    /* Taille contrôlée */
    height: 10vh;         /* On fixe la hauteur plutôt que la largeur pour le footer */
    width: auto;         /* Garde les proportions de ton logo */
    max-width: 60%;      /* Sécurité : il ne prendra jamais plus de 60% de la largeur du cadre */
    
    object-fit: contain; /* Garantit que le logo n'est pas écrasé */
    opacity: 0.9;        /* Optionnel : un peu plus discret */
}

/* ============================================================
   9. PAGE 6 : PRETS A NOUS RJOINDRE ?
   ============================================================ */
   
.page-6-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Distribue l'espace pour remplir les 67vh */
    align-items: center;
    height: 100%;
    padding: 2vh 0;
    max-width: 85%; /* Ta zone de sécurité pour ne pas toucher le cadre */
    margin: 0 auto;
}

/* Titre Contact */
.page-6-content .gradient-text {
    font-size: 2.5vh;
    margin-bottom: 1vh;
}

/* Liste des réseaux sociaux */
.social-list {
    display: flex;
    flex-direction: column;
    gap: 1.5vh;
    width: 100%;
}

/* Le conteneur d'une ligne (ex: Instagram + @pseudo) */
.social-item {
    display: flex;
    align-items: center;    /* Centre l'icône verticalement par rapport au texte */
    justify-content: center; /* Centre le groupe entier horizontalement */
    gap: 12px;              /* Espace fixe entre le logo et le texte */
    width: 100%;            /* Prend toute la largeur disponible pour centrer */
    margin: 1vh 0;
    text-decoration: none;
    color: black;
}

/* L'icône elle-même */
.social-icon {
    width: 3.5vh;
    height: 3.5vh;
    object-fit: contain;
    flex-shrink: 0;         /* Empêche le logo de s'écraser */
	border-radius: 9px;
}

.website-link {
    width: 100%;            /* Prend toute la largeur pour pouvoir centrer le contenu */
    display: flex;          /* Utilise flex pour un centrage précis */
    justify-content: center; /* Centre le lien horizontalement */
    margin: 2vh 0;          /* Ajoute un peu d'espace au-dessus et en dessous */
}

.website-link a {
    display: inline-block;  /* Permet de bien appliquer les bordures et le padding */
    font-size: 2.2vh;       /* Taille un peu plus grande pour le site web */
    font-weight: 900;
    color: #000;
    text-decoration: none;
    text-align: center;
    padding-bottom: 2px;
    transition: transform 0.2s;
}

.website-link a:active {
    transform: scale(0.95);
}

/* Photo Finale : C'est elle qui donne l'impact */
.final-photo {
    width: 100%;
    height: 23vh; /* Hauteur fixe pour garantir l'équilibre de la page */
    object-fit: cover; /* Coupe l'image proprement pour remplir le rectangle */
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}