/* Reset WordPress theme spacing */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.entry-content,
.wp-block-group,
.wp-block-group__inner-container,
.page-content {
    max-width: 100% !important;  /* override theme variable */
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* FullPage container & sections */
#fullpage,
.section {
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative;
}

/* FullPage video section */
.wpfps-video-section {
    position: relative;
    width: 100vw;        /* full viewport width */
    height: 100vh;       /* full viewport height */
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.wpfps-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;   /* crop to fill, works on all aspect ratios */
    z-index: 0;
}

/* Le voile, entre la vidéo et le texte. Sa couleur est celle du fond de la
   section, son intensité un réglage de la section ; les deux arrivent en
   variables posées par le gabarit. Plein jusqu'à `--wpfps-veil-stop`, que
   `sections.js` place là où le texte s'arrête, puis au tiers au bord opposé.
   Sans script, la variable manque et le voile est plein partout. */
.wpfps-video-veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        rgb(var(--wpfps-veil-rgb, 8 36 76) / var(--wpfps-veil, 0.65)) 0,
        rgb(var(--wpfps-veil-rgb, 8 36 76) / var(--wpfps-veil, 0.65)) var(--wpfps-veil-stop, 100%),
        rgb(var(--wpfps-veil-rgb, 8 36 76) / calc(var(--wpfps-veil, 0.65) * 0.35)) 100%
    );
}

/* Le contenu d'une section vidéo est celui d'une section ordinaire : toute la
   largeur, et la mise en page du thème à l'intérieur. La section reste un
   conteneur flexible pour l'ancien raccourci `[fp_video]`, qui centre son
   `.wpfps-content`.

   **FullPage enveloppe le contenu dans `.fp-overflow`**, et dans ce conteneur
   flexible il se rétrécissait à la largeur du texte : mesuré, 688 px au lieu
   de 1280, le titre à 320 px du bord au lieu de 64. D'où la largeur posée sur
   lui, et des sélecteurs descendants plutôt qu'enfants. */
.wpfps-video-section > .fp-overflow { width: 100%; }

.wpfps-video-section .wpfps-inner {
    position: relative;
    z-index: 2;
    width: 100%;
}

.wpfps-video-section .wpfps-section-label { z-index: 3; }

/* Center content on top — the legacy [fp_video] shortcode only. */
.wpfps-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
    width: 90%;
    margin: auto;
    text-align: center;
    color: #fff;
}


/* Menu */
/* Menu */
.wpfps-side-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 260px;
  height: 100vh;
  background: rgba(0,0,0,0.9);
  /* Ce panneau porte son fond, donc il porte son texte. Sans cela, ce que le
     menu accueille — la porte du club, dessinée par le thème et qui emprunte la
     couleur courante — héritait du gris de la page et devenait illisible sur ce
     noir : mesuré à 1,7:1. */
  color: #fff;
  transform: translateX(-100%);
  transition: transform 0.4s ease;
  z-index: 9999;
}

.wpfps-side-menu.open {
  transform: translateX(0);
}

/* La place que le chrome flottant prend sur le contenu.
   Le bouton du menu est fixe en haut à gauche et la flèche en bas à gauche : sur
   une section dont le contenu remplit la fenêtre, le titre passait dessous. Le
   plugin réserve lui-même la place, plutôt que de laisser le thème deviner la
   taille d'un bouton qui lui appartient — et symétriquement, pour que le
   contenu centré le reste. */
:root {
    --wpfps-chrome: 76px;
}

.wpfps-inner {
    padding-block: var(--wpfps-chrome);
}

.wpfps-menu-toggle {
    position: fixed;
    top: 20px;
    left: 20px;
    width: 40px; 
    height: 40px;
    background: var(--surface-scrim, rgb(0 0 0 / 0.5)); /* same translucence */
    border-radius: 12px;           /* same rounded corners */
    padding: 10px;                 /* space around the lines */
    border: none;
    cursor: pointer;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;           /* center the bars */
    transition: background 0.3s ease, transform 0.3s ease;
    animation: gentle-pulse 2s ease-in-out infinite;
}

.wpfps-menu-toggle:hover {
    background: var(--surface-scrim-hover, rgb(0 0 0 / 0.65));
    transform: scale(1.1);
    animation: none;
}

.wpfps-menu-toggle.active {
    animation: none;
}

.wpfps-menu-toggle span {
    display: block;
    width: 100%;
    height: 3px;
    background: #fff;
    border-radius: 3px;
}

.wpfps-menu-nav {
  margin-top: 80px;
  padding-left: 20px;
}

.wpfps-menu-nav ul {
  list-style: none;
  padding: 0;
}

.wpfps-menu-nav li {
  /* L'écart suit la taille : 20px entre des lignes de 19,2 tenaient un rythme
     que les mêmes 20px entre des lignes de 16 rendaient lâche. */
  margin-bottom: 16px;
}

/* **`ul a` et non `a` : cette règle habille les ancres, pas tout ce que le menu
   accueille.** Écrite pour la liste des sections, elle pesait (0,1,1) et
   attrapait donc aussi la porte du club posée en dessous — un `.tgc-button`, qui
   ne pèse que (0,1,0) : le bouton sortait à 19,2px et 54px de haut là où les
   boutons de la page font 14px et 45. Le même piège que `.bcp-input` contre les
   champs du thème, et la même réponse — restreindre celui qui déborde plutôt
   qu'alourdir celui qu'il écrase, sans quoi il faudra recommencer au prochain
   objet posé dans ce menu. */
.wpfps-menu-nav ul a {
  color: #fff;
  text-decoration: none;
  /* **La mesure du club, pas une de plus.** Ces liens faisaient 1,2rem — 19,2px
     — quand le tiroir du membre, qui est exactement le même objet (un panneau
     de liens), écrit les siens en `--fs-md`. Deux menus dans un même club
     n'avaient aucune raison de ne pas se ressembler, et celui-ci écrasait aussi
     le bouton posé à sa suite. Le repli littéral vaut pour le cas où ce plugin
     serait rendu sans le thème. */
  font-size: var(--fs-md, 1rem);
  transition: color 0.3s;
}

.wpfps-menu-nav ul a:hover {
  color: #f0f0f0;
}

/* Section title label (left side, vertical) */
.wpfps-section-label {
    position: absolute;
    left: 24px;
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
    transform-origin: center center;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: inherit;
    opacity: 0.7;
    white-space: nowrap;
    z-index: 5;
    pointer-events: none;
}

/* BOUNCING ARROW */
/* Scroll arrow container */

.wplsv-scroll-arrow {
    position: absolute;
    bottom: 20px; /* distance from bottom */
    left: 30px;   /* align to the left */
    cursor: pointer;
    z-index: 10;
    /*opacity: 1;
    transition: opacity 0.3s ease, transform 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;*/
}

/* The theme's menu button takes this look on the landing, so the two read as
   one pair: both read `--surface-scrim` (black at 50 %, 65 % on hover), which
   holds 3:1 against the white strokes and against a white section — black at
   40 % gave 2.85 (2026-10-09). The fallback is for a theme without tokens. */
.wplsv-arrow-wrapper {
    width: 40px;
    height: 40px;
    background: var(--surface-scrim, rgb(0 0 0 / 0.5));
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background 0.3s ease, transform 0.3s ease;
}

.wplsv-scroll-arrow svg {
    width: 22px;
    height: 22px;
    animation: bounce 1.5s infinite;
    display: block; /* not necessary but safe */
    /* REMOVE left:50% and position:relative */
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(10px);
    }
    60% {
        transform: translateY(5px);
    }
}

@keyframes gentle-pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

/* Scroll arrows are visible on any section that includes one */
.wplsv-scroll-arrow {
    display: block;
}

.wplsv-scroll-arrow:hover .wplsv-arrow-wrapper {
    background: var(--surface-scrim-hover, rgb(0 0 0 / 0.65)); /* slightly darker on hover */
    transform: scale(1.1);          /* subtle bounce effect */
}


/* ==============================
   RESPONSIVE — Tablet (≤ 768px)
   ============================== */
@media (max-width: 768px) {
    .wpfps-content {
        max-width: 100%;
        width: 92%;
    }
}

/* ==============================
   RESPONSIVE — Phone (≤ 600px)
   ============================== */
@media (max-width: 600px) {
    /* Video content overlay */
    .wpfps-content {
        width: 94%;
    }
    .wpfps-content h1 { font-size: 1.5rem; }
    .wpfps-content h2 { font-size: 1.2rem; }
    .wpfps-content p  { font-size: 0.92rem; }

    /* Section title label — smaller on mobile */
    .wpfps-section-label {
        left: 14px;
        font-size: 0.72rem;
        letter-spacing: 1.5px;
    }

    /* Scroll arrow — match hamburger (36×36, 10px radius) */
    .wplsv-arrow-wrapper {
        width: 36px;
        height: 36px;
        border-radius: 10px;
    }
    .wplsv-scroll-arrow svg {
        width: 20px;
        height: 20px;
    }
    .wplsv-scroll-arrow {
        bottom: 14px;
        left: 14px;
    }

    /* Menu toggle */
    .wpfps-menu-toggle {
        top: 14px;
        left: 14px;
        width: 36px;
        height: 36px;
        padding: 8px;
        border-radius: 10px;
    }

    /* Plus petit et plus près du bord : la réserve suit. */
    :root {
        --wpfps-chrome: 62px;
    }
}

/* ==============================
   RESPONSIVE — Phone landscape
   ============================== */
@media (max-width: 900px) and (orientation: landscape) {
    /* Scroll arrow — match hamburger menu size (40×40, 12px radius) */
    .wplsv-arrow-wrapper {
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }
    .wplsv-scroll-arrow svg {
        width: 22px;
        height: 22px;
    }
}

.wpfps-footer-section {
    text-align: center;
    padding: 60px 20px;
    background: var(--navy-800, #08244c); /* WPFPS_DEFAULT_BG, the club navy, through the theme's token */
    color: var(--text-on-navy, #fff);
    position: relative;
}

.wpfps-footer-section .fp-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--navy-800, #08244c);
    z-index: 0;
}

.wpfps-footer-content {
    position: relative;
    z-index: 1;
}

.wpfps-footer-section h2 {
    font-size: 2rem;
    margin-bottom: 20px;
}

.wpfps-footer-section .footer-menu {
    list-style: none;
    padding: 0;
    margin: 20px 0;
    z-index: 1;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
}

/* La couleur du texte de la section, et non un noir écrit ici : le pied
   est navy par défaut, et le bureau en choisit la couleur. */
.wpfps-footer-section .footer-menu li a {
    color: inherit;
    text-decoration: none;
    font-weight: 500;
    transition: opacity 0.3s;
}

.wpfps-footer-section .footer-menu li a:hover {
    opacity: 0.75;
}

.wpfps-footer-section .fp-watermark {
    position: absolute;
    bottom: 10px;
    right: 10px;
    font-size: 0.8rem;
    z-index: 1;
}