/* ==========================================================================
   ARCT - Page d'accueil 2026
   Monde visuel : clair, editorial, tres aere. La photo et le blanc portent
   la page ; la couleur de marque ne sert que pour agir.
   Mobile-first : les regles de base ciblent le telephone.
   ========================================================================== */

:root {
    /* Surfaces claires. Le papier est franchement plus gris que le blanc :
       a 1.03 de rapport, les blocs blancs etaient invisibles sur le fond.
       A 1.13 on distingue les sections sans que la page paraisse sale. */
    --hp-paper: #F1F1F5;
    --hp-surface: #FFFFFF;
    --hp-surface-soft: #E4E4EA;
    --hp-hairline: rgba(20, 20, 26, 0.16);

    /* Encre */
    --hp-ink: #16161A;
    --hp-ink-soft: #5B5B66;

    /* Bleu de marque, utilise comme surface pleine pour la course */
    --hp-deep: #0F52BA;
    --hp-deep-2: #06265C;

    /* Un seul rayon pour toute la page */
    --hp-r: 12px;

    /* Rythme vertical : c'est ici que se joue l'aeration */
    --hp-y: 84px;

    /* Ombres teintees, jamais du noir a plat */
    --hp-shadow: 0 24px 48px -28px rgba(20, 20, 40, 0.40);
    --hp-shadow-cta: 0 14px 28px -12px rgba(205, 55, 77, 0.48);

    /* #CD374D ne passe pas sur le voile sombre du hero (3.19:1). */
    --hp-primary-on-dark: #FF6076;

    --hp-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* La page d'accueil verrouille le theme clair de bout en bout. */
body.hp {
    background-color: var(--hp-paper);
    color: var(--hp-ink);
}

.hp-wrap {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 22px;
    box-sizing: border-box;
}

.hp-narrow {
    max-width: 720px;
}

/* --------------------------------------------------------------------------
   Header : la barre d'origine est en texte blanc, illisible sur fond clair.
   On la repasse en encre sur cette page uniquement.
   -------------------------------------------------------------------------- */

/* En haut de page le header est pose sur la photo du hero : texte blanc,
   fond transparent. Des que la page defile il devient clair et l'encre reprend. */
body.hp .header {
    background: transparent;
    border-bottom: 1px solid transparent;
    box-shadow: none;
}

body.hp .header.scrolled {
    background: rgba(241, 241, 245, 0.94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom-color: var(--hp-hairline);
    box-shadow: none;
}

body.hp .nav-links a {
    color: #FFFFFF;
    opacity: 0.82;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
}

body.hp .header.scrolled .nav-links a {
    color: var(--hp-ink);
    opacity: 0.62;
    text-shadow: none;
}

body.hp .nav-links a:hover,
body.hp .nav-links a.active,
body.hp .header.scrolled .nav-links a:hover,
body.hp .header.scrolled .nav-links a.active {
    color: var(--color-primary);
    opacity: 1;
    text-shadow: none;
}

body.hp .logo img {
    filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.45));
}

body.hp .header.scrolled .logo img {
    filter: none;
}

/* Barre plus basse et logo plus present que la version d'origine. */
body.hp .header,
body.hp .header.scrolled {
    padding: 14px 0 !important;
    min-height: 0;
}

body.hp .navbar {
    padding: 0 22px;
}

body.hp .logo img {
    height: 46px;
}

/* Le burger d'origine est un carre gris pose sur la barre. On enleve la boite
   et on affine les trois traits. */
body.hp .burger {
    background: none !important;
    border-radius: 0 !important;
    padding: 11px 0 !important;
    min-width: 44px !important;
    min-height: 44px !important;
    gap: 6px;
}

body.hp .burger div {
    background-color: #FFFFFF;
    width: 26px;
    height: 2px;
    margin: 0;
    border-radius: 2px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

body.hp .header.scrolled .burger div {
    background-color: var(--hp-ink);
    box-shadow: none;
}

body.hp .burger:hover div {
    background-color: var(--color-primary);
}

/* Le panneau mobile reste sombre : c'est un calque, pas une section. */
@media (max-width: 768px) {

    body.hp .nav-links.nav-active a,
    body.hp .nav-links.nav-active a.active {
        color: #FFFFFF;
        opacity: 0.9;
    }

    body.hp .nav-links.nav-active a.active {
        color: var(--color-primary);
        opacity: 1;
    }
}

/* Cibles d'ancre : le header est fixe, sans cette reserve le titre de la
   section visee se retrouve masque derriere la barre. */
#contenu,
#course,
#acces,
#piste,
#club,
#galerie {
    scroll-margin-top: 92px;
}

/* --------------------------------------------------------------------------
   Typographie de page
   -------------------------------------------------------------------------- */

.hp-h2 {
    font-family: var(--font-heading);
    font-weight: 700;
    text-transform: none;
    font-size: clamp(1.75rem, 6.6vw, 2.9rem);
    line-height: 1.06;
    letter-spacing: -0.02em;
    color: var(--hp-ink);
    text-wrap: balance;
    margin: 0 0 18px;
}

.hp-p {
    font-size: 1.03rem;
    line-height: 1.72;
    color: var(--hp-ink-soft);
    max-width: 62ch;
    margin: 0 0 28px;
}

.hp-p:last-child {
    margin-bottom: 0;
}

/* Icones : SVG auteur, trait 1.5, identique partout. */
.hp-ico {
    width: 21px;
    height: 21px;
    flex: 0 0 21px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* --------------------------------------------------------------------------
   Boutons
   -------------------------------------------------------------------------- */

.hp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 28px;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.87rem;
    letter-spacing: 0.055em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid transparent;
    border-radius: var(--hp-r);
    cursor: pointer;
    transition: transform 0.35s var(--hp-ease), background-color 0.35s var(--hp-ease),
        border-color 0.35s var(--hp-ease), box-shadow 0.35s var(--hp-ease);
}

.hp-btn-solid {
    background-color: var(--color-primary);
    color: #FFFFFF;
    box-shadow: var(--hp-shadow-cta);
}

.hp-btn-solid:hover {
    background-color: #B92C43;
    transform: translateY(-2px);
}

/* Secondaire sur fond clair. Le contour doit se voir : un filet a 11%
   disparaissait sur le papier. */
.hp-btn-line {
    background-color: var(--hp-surface);
    border-color: rgba(20, 20, 26, 0.42);
    color: var(--hp-ink);
}

.hp-btn-line:hover {
    border-color: var(--hp-ink);
    background-color: var(--hp-surface);
    transform: translateY(-2px);
}

/* Secondaire pose sur la photo du hero */
.hp-btn-photo {
    background-color: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.75);
    color: #FFFFFF;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.hp-btn-photo:hover {
    background-color: #FFFFFF;
    border-color: #FFFFFF;
    color: var(--hp-ink);
    transform: translateY(-2px);
}

/* Variante posee sur la bande bleue de la course */
.hp-btn-onDeep {
    background-color: #FFFFFF;
    color: var(--hp-deep-2);
    box-shadow: 0 14px 28px -14px rgba(0, 0, 0, 0.55);
}

.hp-btn-onDeep:hover {
    background-color: #F0F2F6;
    transform: translateY(-2px);
}

/* Secondaire sur la bande bleue : le trait d'encre y serait illisible. */
.hp-btn-onDeep-alt {
    background-color: transparent;
    border-color: rgba(255, 255, 255, 0.42);
    color: #FFFFFF;
    box-shadow: none;
}

.hp-btn-onDeep-alt:hover {
    background-color: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.70);
    color: #FFFFFF;
    transform: translateY(-2px);
}

.hp-btn:active {
    transform: translateY(1px);
}

/* Lien d'evitement pour la navigation au clavier */
.hp-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 2000;
    padding: 12px 20px;
    background: var(--hp-ink);
    color: #FFFFFF;
    font-size: 0.9rem;
    border-radius: 0 0 var(--hp-r) 0;
    text-decoration: none;
}

.hp-skip:focus {
    left: 0;
}

.hp-btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   1. Hero : titre au calme, puis grande photo pleine largeur
   -------------------------------------------------------------------------- */

/* Photo pleine hauteur, texte cale en bas. Le reste de la page est clair :
   la photo est un visuel, pas une section inversee. */
.hp-hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background-color: #0C0C0F;
}

.hp-hero-media {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hp-hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 60% center;
}

.hp-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top,
            rgba(10, 10, 13, 0.94) 0%,
            rgba(10, 10, 13, 0.72) 34%,
            rgba(10, 10, 13, 0.22) 64%,
            rgba(10, 10, 13, 0.52) 100%);
}

.hp-hero-body {
    position: relative;
    z-index: 2;
    width: 100%;
    padding-top: 128px;
    padding-bottom: 56px;
}

.hp-hero h1 {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: clamp(2.35rem, 11.5vw, 5rem);
    line-height: 1.07;
    letter-spacing: -0.005em;
    text-transform: uppercase;
    color: #FFFFFF;
    margin: 0 0 20px;
    max-width: 13ch;
    text-wrap: balance;
}

.hp-hero h1 em {
    font-style: normal;
    color: var(--hp-primary-on-dark);
}

.hp-hero-sub {
    font-size: 1.06rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.86);
    max-width: 44ch;
    margin: 0 0 32px;
}

.hp-hero-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.hp-hero-actions .hp-btn {
    width: 100%;
}

/* --------------------------------------------------------------------------
   2. La course : un seul bloc de couleur pleine, une seule fois dans la page
   -------------------------------------------------------------------------- */

.hp-race {
    background: linear-gradient(160deg, var(--hp-deep) 0%, var(--hp-deep-2) 100%);
    color: #FFFFFF;
    padding: calc(var(--hp-y) - 12px) 0;
}

.hp-race-date {
    display: inline-block;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.82rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #FFFFFF;
    background-color: var(--color-primary);
    padding: 8px 14px;
    border-radius: 6px;
    margin-bottom: 20px;
}

.hp-race h2 {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(1.8rem, 7vw, 3rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: #FFFFFF;
    margin: 0 0 16px;
    max-width: 16ch;
    text-wrap: balance;
}

.hp-race-lead {
    font-size: 1.03rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.80);
    max-width: 54ch;
    margin: 0 0 32px;
}

/* Les infos de la course : lignes fines, pas de cartes. */
.hp-race-facts {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin: 0 0 34px;
    border-top: 1px solid rgba(255, 255, 255, 0.20);
}

.hp-race-facts div {
    padding: 15px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.13);
}

.hp-race-facts dt {
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 5px;
}

.hp-race-facts dd {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    font-size: 1.06rem;
    color: #FFFFFF;
}

.hp-race-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.hp-race-actions .hp-btn {
    width: 100%;
}

/* --------------------------------------------------------------------------
   3. Venir rouler : le bloc pratique
   -------------------------------------------------------------------------- */

.hp-access {
    padding: var(--hp-y) 0;
}

.hp-access-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 34px;
    align-items: start;
}

.hp-facts {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 0 0 26px;
}

.hp-fact {
    display: flex;
    align-items: flex-start;
    gap: 13px;
}

.hp-fact .hp-ico {
    color: var(--color-primary);
    margin-top: 3px;
}

.hp-fact-body {
    font-size: 0.97rem;
    line-height: 1.5;
}

.hp-fact-body strong {
    display: block;
    font-weight: 600;
    color: var(--hp-ink);
    margin-bottom: 3px;
}

.hp-fact-body span,
.hp-fact-body a {
    color: var(--hp-ink-soft);
    text-decoration: none;
    transition: color 0.3s var(--hp-ease);
}

.hp-fact-body a {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(20, 20, 26, 0.25);
}

.hp-fact-body a:hover {
    color: var(--color-primary);
}

/* L'indication qui manque au GPS. C'est la que les gens se perdent. */
.hp-tip {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 26px;
    padding: 16px 18px;
    background-color: var(--hp-surface);
    border: 1px solid var(--hp-hairline);
    border-radius: var(--hp-r);
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--hp-ink);
    box-shadow: 0 10px 22px -18px rgba(20, 20, 40, 0.5);
}

.hp-tip .hp-ico {
    color: var(--color-primary);
    margin-top: 2px;
}

.hp-tip strong {
    font-weight: 600;
}

.hp-access-cta {
    width: 100%;
}

.hp-map {
    position: relative;
    height: 280px;
    border-radius: var(--hp-r);
    overflow: hidden;
    border: 1px solid var(--hp-hairline);
    box-shadow: var(--hp-shadow);
}

.hp-map::before {
    content: "Carte indisponible. Utilisez le bouton Ouvrir l'itinéraire ci-dessus.";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    text-align: center;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--hp-ink-soft);
    background-color: var(--hp-surface-soft);
}

.hp-map iframe {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* --------------------------------------------------------------------------
   4. La piste : grande photo, texte pose dessous, chiffres sur une ligne
   -------------------------------------------------------------------------- */

.hp-track {
    padding: var(--hp-y) 0;
    background-color: var(--hp-surface);
    border-top: 1px solid var(--hp-hairline);
    border-bottom: 1px solid var(--hp-hairline);
}

.hp-track-shot {
    border-radius: var(--hp-r);
    overflow: hidden;
    margin-bottom: 40px;
    background-color: var(--hp-surface-soft);
}

.hp-track-shot img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.hp-specs {
    display: grid;
    grid-template-columns: 1fr;
    margin-top: 34px;
    border-top: 1px solid var(--hp-hairline);
}

.hp-specs div {
    padding: 17px 0;
    border-bottom: 1px solid var(--hp-hairline);
}

.hp-specs dt {
    font-family: var(--font-heading);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-size: 1.22rem;
    color: var(--hp-ink);
    margin-bottom: 3px;
}

.hp-specs dd {
    margin: 0;
    font-size: 0.92rem;
    color: var(--hp-ink-soft);
}

/* --------------------------------------------------------------------------
   5. Le club : composition editoriale
   -------------------------------------------------------------------------- */

.hp-club {
    padding: var(--hp-y) 0;
}

.hp-club-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: center;
}

.hp-club-shot {
    border-radius: var(--hp-r);
    overflow: hidden;
    background-color: var(--hp-surface-soft);
    box-shadow: var(--hp-shadow);
}

.hp-club-shot img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform 0.9s var(--hp-ease);
}

.hp-club-shot:hover img {
    transform: scale(1.03);
}

/* --------------------------------------------------------------------------
   6. Galerie : bande horizontale
   -------------------------------------------------------------------------- */

.hp-gallery {
    padding: var(--hp-y) 0;
    background-color: var(--hp-surface);
    border-top: 1px solid var(--hp-hairline);
}

.hp-gallery-head {
    margin-bottom: 30px;
}

/* Mosaique : les 6 photos sont visibles d'un coup, sans geste ni attente.
   Sur telephone une bande a defilement cache la moitie du contenu et un
   carrousel automatique reprend la main au visiteur ; ni l'un ni l'autre
   ne se justifie pour une galerie de club.
   6 photos = 6 cellules exactement, aucune case vide. */
.hp-mosaic {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

/* La photo d'action ouvre et ferme la mosaique en pleine largeur. */
.hp-mosaic .hp-shot:first-child,
.hp-mosaic .hp-shot:last-child {
    grid-column: 1 / -1;
}

.hp-shot {
    position: relative;
    border-radius: var(--hp-r);
    overflow: hidden;
    background-color: var(--hp-surface-soft);
    margin: 0;
}

.hp-shot img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.9s var(--hp-ease);
}

.hp-mosaic .hp-shot img {
    aspect-ratio: 1 / 1;
}

.hp-mosaic .hp-shot:first-child img,
.hp-mosaic .hp-shot:last-child img {
    aspect-ratio: 16 / 9;
}

.hp-shot:hover img {
    transform: scale(1.04);
}

/* --------------------------------------------------------------------------
   7. Rejoindre : une seule action, beaucoup d'air
   -------------------------------------------------------------------------- */

.hp-join {
    padding: calc(var(--hp-y) + 16px) 0;
    text-align: center;
}

.hp-join .hp-h2 {
    max-width: 17ch;
    margin-left: auto;
    margin-right: auto;
}

.hp-join .hp-p {
    margin-left: auto;
    margin-right: auto;
    max-width: 48ch;
}

.hp-join .hp-btn {
    width: 100%;
}

.hp-join-alt {
    display: block;
    margin-top: 20px;
    font-size: 0.93rem;
    color: var(--hp-ink-soft);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(20, 20, 26, 0.25);
    transition: color 0.3s var(--hp-ease);
}

.hp-join-alt:hover {
    color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   Mouvement : une seule idee, l'entree des blocs.
   -------------------------------------------------------------------------- */

/* L'animation ne s'arme que si le JS a repondu present (classe .js posee dans
   le head). Sans ce garde-fou, JS coupe ou bloque laissait le CTA final et
   la moitie de la page a opacity 0, donc invisibles pour toujours. */
@media (prefers-reduced-motion: no-preference) {
    .js .hp-rise {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.8s var(--hp-ease), transform 0.8s var(--hp-ease);
    }

    .js .hp-rise.hp-in {
        opacity: 1;
        transform: none;
    }

    .js .hp-rise-2 {
        transition-delay: 0.09s;
    }

    .js .hp-rise-3 {
        transition-delay: 0.18s;
    }
}

@media (prefers-reduced-motion: reduce) {

    .hp-btn,
    .hp-shot img,
    .hp-club-shot img {
        transition: none;
    }
}

/* --------------------------------------------------------------------------
   Tablette
   -------------------------------------------------------------------------- */

@media (min-width: 700px) {
    :root {
        --hp-y: 120px;
    }

    .hp-wrap {
        padding: 0 36px;
    }

    .hp-hero-body {
        padding-top: 150px;
        padding-bottom: 72px;
    }

    .hp-hero-actions {
        flex-direction: row;
    }

    .hp-hero-actions .hp-btn,
    .hp-access-cta,
    .hp-join .hp-btn {
        width: auto;
    }

    .hp-join .hp-btn {
        min-width: 260px;
    }

    .hp-race-actions {
        flex-direction: row;
    }

    .hp-race-actions .hp-btn {
        width: auto;
    }

    .hp-race-facts,
    .hp-specs {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }

    .hp-race-facts div,
    .hp-specs div {
        border-bottom: none;
        padding: 18px 0 0;
    }

    .hp-map {
        height: 340px;
    }

    .hp-mosaic {
        gap: 14px;
    }
}

/* --------------------------------------------------------------------------
   Desktop
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) {
    :root {
        --hp-y: 150px;
    }

    .hp-hero-body {
        padding-top: 178px;
        padding-bottom: 88px;
    }

    .hp-hero-sub {
        font-size: 1.15rem;
    }

    /* Asymetrie : le pratique pese plus lourd que la carte. */
    .hp-access-grid {
        grid-template-columns: 1.1fr 1fr;
        gap: 68px;
        align-items: center;
    }

    .hp-map {
        height: 420px;
    }

    .hp-track-shot {
        margin-bottom: 52px;
    }

    .hp-track-text {
        display: grid;
        grid-template-columns: 1fr;
        max-width: 760px;
    }

    .hp-specs {
        max-width: 820px;
    }

    .hp-club-grid {
        grid-template-columns: 1fr 1.02fr;
        gap: 72px;
    }

    .hp-race-facts {
        max-width: 860px;
    }

    /* Desktop : la photo d'action prend 2 colonnes sur 2 rangees,
       les cinq autres se rangent autour. Toujours 6 cellules pleines. */
    .hp-mosaic {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }

    .hp-mosaic .hp-shot:first-child {
        grid-column: 1 / 3;
        grid-row: 1 / 3;
    }

    .hp-mosaic .hp-shot:last-child {
        grid-column: auto;
        grid-row: auto;
    }

    .hp-mosaic .hp-shot:first-child img {
        aspect-ratio: auto;
        height: 100%;
    }

    .hp-mosaic .hp-shot:last-child img {
        aspect-ratio: 1 / 1;
    }
}