/* ==========================================================================
   Europa Gym — feuille de style unique

   Reproduit à l'identique le rendu de l'ancien site (UIkit 3.3.3 + general.css
   + menu.css + styles.css + flexslider.css) sans aucun framework :
   ~20 Ko (≈ 5 Ko compressé) au lieu de ~290 Ko de CSS.

   Sommaire
     1. Variables
     2. Base (typographie et espacements hérités d'UIkit)
     3. Structure : en-tête, barre « Catégories », logo, menu, diaporama, pied de page
     4. Composants de contenu
     5. Visionneuse de photos
     6. Accessibilité et préférences utilisateur
     7. Tablettes et mobiles
   ========================================================================== */


/* 1. Variables
   ========================================================================== */

:root {
    --c-green: #abbc2c;          /* vert Europa : titres, liens des menus */
    --c-green-soft: #ccd67e;
    --c-olive: #565b33;          /* filets des menus */
    --c-olive-light: #858f3c;
    --c-gold: #c9ae24;           /* grand titre de l'accueil et des stages */
    --c-teal: #2bbdba;           /* titres des cartes (stages, inscriptions) */
    --c-red: #dc2b23;            /* lignes « Calendrier » */
    --c-label: #8490ad;          /* libellés « Public cible », « Programme »… */
    --c-ink: #0b0b0b;            /* fond des barres */
    --c-grey: #ccc;
    --c-link: #1e87f0;
    --c-link-hover: #0f6ecd;
    --c-rule: #e5e5e5;

    --font-body: "Century Gothic", Verdana, Geneva, sans-serif;
    --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans",
        sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-nav: Verdana, sans-serif;

    --page-width: 1024px;
    --stack-gap: 40px;           /* espace entre blocs empilés (grille UIkit) */
    --space-large: 70px;         /* uk-margin-large */
    --menu-gap: 5.7px;           /* espace sous le menu principal (ligne de texte de l'ancien site) */
}

@media (max-width: 1199px) {
    :root {
        --stack-gap: 30px;
        --space-large: 40px;
    }
}


/* 2. Base
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-family: var(--font-ui);
    font-size: 16px;
    line-height: 1.5;
    color: #666;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    background: #0d0d0d url("../img/background.webp") no-repeat center center fixed;
    background-size: cover;
}

body {
    margin: 0;
    font-family: var(--font-body);
}

a {
    color: var(--c-link);
    text-decoration: none;
}

a:hover {
    color: var(--c-link-hover);
    text-decoration: underline;
}

b,
strong {
    font-weight: bolder;
}

img,
svg {
    vertical-align: middle;
}

img {
    max-width: 100%;
    height: auto;
}

h1,
h2,
h3,
h4 {
    margin: 0;
    font-family: var(--font-ui);
    font-weight: 400;
}

p,
ul,
ol,
dl,
dd,
figure {
    margin: 0;
    padding: 0;
}

ul,
ol {
    list-style: none;
}

p {
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 26px;
}

* + p {
    margin-top: 20px;
}

table {
    border-collapse: collapse;
}

th {
    font-weight: bold;
}

hr {
    overflow: visible;
    height: 0;
    margin: 20px 0;
    border: 0;
    border-top: 1px solid var(--c-rule);
}


/* 3. Structure
   ========================================================================== */

.site {
    position: relative;
    max-width: var(--page-width);
    margin: 0 auto;
}

/* En-tête : barre « Catégories » (fixe) + logo */

.site-header {
    position: relative;
    z-index: 100;
    margin: 0 auto 5px;
    text-align: center;
    color: #fff;
}

.topbar {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    max-width: var(--page-width);
    margin: 0 auto;
    background: var(--c-ink);
    border-bottom: 1px solid var(--c-olive);
    font-size: 14px;
    line-height: 30px;
}

.topbar__nav {
    width: fit-content;
}

.topbar__nav:hover {
    background: linear-gradient(to bottom, #000 0%, #000 1%, rgb(0 0 0 / 0%) 100%);
}

.topbar__label {
    margin-right: 30px;
    padding: 5px;
    background: var(--c-green);
    color: #f9faee;
    font-weight: bold;
    text-transform: uppercase;
}

.topbar__list,
.topbar__list li {
    display: inline;
}

.topbar__list a {
    margin-right: 20px;
    padding: 3px;
    color: var(--c-green);
    font-size: 16px;
    font-style: italic;
}

.topbar__list a:hover {
    color: #fff;
    transition: all 0.5s ease-in-out;
}

.topbar__facebook {
    position: absolute;
    top: 0;
    right: 2px;
    height: 30px;
}

.topbar__facebook img {
    display: block;
}

.topbar__facebook:hover {
    border-top: 3px solid var(--c-green);
    opacity: 0.7;
}

.site-logo {
    display: block;
    max-width: 350px;
    margin: 50px auto 0;
}

.site-logo img {
    display: block;
    width: 100%;
}

/* Grand titre doré (accueil et stages) */

.hero-title {
    margin: 10px 0 40px;
    text-align: center;
}

.hero-title h1 {
    color: var(--c-gold);
    font-size: 35px;
    line-height: 1.2;
}

/* Menu principal et sous-menu déroulant « Club » */

.main-nav {
    position: relative;
    z-index: 10;
    height: 25px;
    background: var(--c-ink);
    border-top: 1px solid var(--c-olive);
    border-bottom: 1px solid var(--c-olive);
    font-family: var(--font-nav);
    font-size: 16px;
    font-style: italic;
    font-weight: lighter;
    line-height: 25px;
    text-align: center;
}

.main-nav__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.main-nav li {
    border-right: 1px solid transparent;
}

.main-nav a {
    display: block;
    min-width: 145px;
    max-width: 256px;
    height: 22px;
    margin: auto;
    padding: 0 5px 3px;
    border-left: 1px solid var(--c-olive);
    color: var(--c-green);
    line-height: 22px;
    text-align: center;
    text-transform: uppercase;
}

.main-nav__list > li:first-child > a {
    border-left: 0;
}

.main-nav a:hover {
    color: #faf9f2;
    transition: all 0.5s ease-in-out;
}

.has-submenu {
    position: relative;
}

.main-nav__submenu {
    position: absolute;
    top: 100%;
    left: -9999px;
    width: 200px;
}

.has-submenu:hover > .main-nav__submenu,
.has-submenu:focus-within > .main-nav__submenu,
.has-submenu.is-open > .main-nav__submenu {
    left: 0;
}

.main-nav__submenu:hover {
    background: rgb(0 0 0 / 80%);
    transition: all 1s ease-in-out;
}

/* Ouvert au clavier ou au toucher : même fond que survolé, pour rester lisible */
.has-submenu:focus-within > .main-nav__submenu,
.has-submenu.is-open > .main-nav__submenu {
    background: rgb(0 0 0 / 80%);
}

.main-nav__submenu li {
    width: fit-content;
    border-top: 1px solid transparent;
    font-size: 11px;
}

/* Diaporama (accueil et stages) : fondu enchaîné géré par site.js */

.slideshow {
    position: relative;
    z-index: 1;
    max-width: 940px;
    margin: calc(var(--menu-gap) + 3px) auto 0;
}

.slideshow__slides {
    display: grid;
}

.slideshow__slide {
    display: none;
    grid-area: 1 / 1;
    opacity: 0;
    transition: opacity 0.6s;
}

.slideshow__slide.is-active,
.slideshow__slide.is-preloaded {
    display: block;
}

.slideshow__slide.is-active {
    opacity: 1;
}

.slideshow__slide img {
    display: block;
    width: 100%;
    max-width: 705px;
    margin: 0 auto;
    border-bottom: 1px solid var(--c-olive);
}

.slideshow__toggle {
    position: absolute;
    bottom: 10px;
    left: 50%;
    padding: 4px 10px;
    border: 1px solid var(--c-green);
    background: var(--c-ink);
    color: #fff;
    font: 13px/1.4 var(--font-body);
    cursor: pointer;
    transform: translateX(-50%);
}

.slideshow__toggle:not(:focus-visible) {
    clip-path: inset(50%);
}

/* Contenu principal : l'espace haut reprend les marges de l'ancien site */

.site-main {
    margin-bottom: 165px;
    padding-top: calc(var(--menu-gap) + 20px);
}

.site-main--spaced {
    padding-top: calc(var(--menu-gap) + var(--space-large));
}

.slideshow + .site-main {
    padding-top: var(--space-large);
}

.site-main p {
    color: #fff;
}

/* Pied de page fixe */

.site-footer {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 999;
    padding-bottom: 13px;
    background: var(--c-ink);
    border-top: 1px solid var(--c-green);
    text-align: center;
}

.partners {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px;
    padding: 2px;
}

.partners img {
    display: block;
    width: 50px;
}

.site-footer p {
    margin: 0;
}

.site-footer__contact {
    margin-top: 10px !important;
    color: var(--c-green);
}

.site-footer__address {
    color: var(--c-green-soft);
}

.site-footer a {
    color: #fff;
}

.site-footer a:hover {
    color: #6c6;
}


/* 4. Composants de contenu
   ========================================================================== */

/* Titre de page vert en capitales (ancien <h2>) */
.page-title {
    margin-bottom: 15px;
    color: var(--c-green);
    font-size: 16px;
    line-height: 30px;
    text-transform: uppercase;
}

/* Sous-titre vert (ancien <h3>) */
.subtitle {
    margin-bottom: 15px;
    color: var(--c-green);
    font-size: 1.2rem;
    line-height: 28px;
}

/* Bloc centré (ancien .para) */
.para {
    text-align: center;
}

.text-left {
    text-align: left;
}

.bold {
    font-weight: 700;
}

/* Ancienne ligne vide (<br>) laissée entre un paragraphe et le bloc suivant */
.blank-line-before {
    margin-top: 44px;
}

p.blank-line-before {
    margin-top: 64px;
}

/* Blocs empilés (ancienne grille UIkit à une colonne) */
.stack,
.cards {
    display: flex;
    flex-direction: column;
}

.stack > * + *,
.cards > * + * {
    margin-top: var(--stack-gap);
}

.stack > * > :last-child {
    margin-bottom: 0;
}

.stack--page {
    margin-bottom: var(--space-large);
}

/* Cartes (stages, étapes d'inscription) : la marge du dernier paragraphe est conservée */
.card__title {
    margin-bottom: 20px;
    color: var(--c-teal);
    font-size: 1.1rem;
    line-height: 1.4;
}

/* Accueil : informations et calendriers */
.home-infos {
    margin-top: var(--space-large);
    padding: 5px;
}

.home-infos__box {
    padding: 5px 5px 5px 10px;
    border-left: 1px solid var(--c-olive-light);
    font-weight: lighter;
    color: var(--c-grey);
}

.site-main .calendar {
    margin: 0 0 15px;
    color: var(--c-red);
    font-family: var(--font-ui);
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 28px;
}

.calendar strong {
    color: var(--c-link);
}

.calendar img {
    width: 20px;
    height: 20px;
    vertical-align: -25%;
}

/* Fiches des groupes : « Public cible », « Programme »… */
.facts {
    width: fit-content;
    margin: 0 auto;
    padding: 10px;
    font-weight: lighter;
    color: var(--c-grey);
    text-align: center;
}

.facts dl {
    margin-bottom: 20px;
    color: #fff;
    font-size: 14px;
    line-height: 26px;
}

/* Page Adultes : bloc de 688 px de large, texte aligné sur sa droite (comme l'ancien tableau) */
.facts--right {
    width: min(688px, 100%);
}

.facts--right > * {
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
}

.facts__title {
    color: #fff;
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 26px;
}

.facts dt,
.facts dd {
    display: inline;
}

.facts dt {
    color: var(--c-label);
    font-weight: bold;
    text-transform: uppercase;
}

/* Galeries de vignettes (4 colonnes maximum, dernière vignette isolée centrée) */
.gallery {
    display: grid;
    grid-template-columns: repeat(var(--columns, 4), minmax(0, 200px));
    justify-content: center;
    gap: 5px;
    padding: 5px;
}

.gallery--wide {
    gap: 10px;
}

.gallery--loose {
    gap: 15px;
    padding: 10px;
}

.gallery > li:last-child:nth-child(4n + 1):not(:first-child) {
    grid-column: 1 / -1;
    justify-self: center;
    width: min(200px, 100%);
}

.gallery a,
.gallery img {
    display: block;
}

.gallery img {
    width: 100%;
}

/* Planche de vignettes de la page Photos */
.photo-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 125px));
    justify-content: center;
    gap: 5px;
    padding: 5px;
}

.photo-grid a,
.photo-grid img {
    display: block;
}

.photo-grid img {
    width: 100%;
    aspect-ratio: 5 / 3;
    object-fit: cover;
}

/* Encadré « Horaires » (Détection) */
.schedule {
    padding: 10px;
    border-right: 1px solid var(--c-green-soft);
    border-left: 1px solid var(--c-green-soft);
    font-style: italic;
    font-weight: bold;
}

.schedule__title {
    margin-bottom: 15px;
    color: var(--c-green);
    font-size: 1.2rem;
    line-height: 28px;
}

.site-main .schedule__text {
    margin: 0;
    color: #fff;
    font-size: 13px;
    line-height: 22px;
    text-indent: 15px;
}

/* Le club : historique */
.history {
    font-weight: lighter;
    color: var(--c-grey);
    text-align: center;
}

.history__group {
    display: flex;
    flex-direction: column;
    padding: 10px;
}

.history__group > p + p {
    margin-top: 20px;
}

.history__title {
    margin-bottom: 15px;
    color: var(--c-green);
    font-size: 1.2rem;
    line-height: 28px;
}

/* Conseil d'administration */
.board {
    margin: 0 auto;
    border-collapse: separate;
    border-spacing: 3px;
    font-weight: lighter;
    color: var(--c-grey);
}

.board th,
.board td {
    padding: 3px;
    vertical-align: top;
}

.board th {
    text-align: right;
}

.board td {
    text-align: left;
}

.board td.board__mail {
    text-align: center;
}

.board__mail img {
    margin-left: -15px;
}

/* Organigramme (tableau) */
.data-table {
    width: 100%;
    margin: 20px 0;
    font-weight: lighter;
    color: var(--c-grey);
}

.data-table thead th {
    padding: 16px 12px;
    color: #999;
    font-size: 0.875rem;
    font-weight: 400;
    text-align: left;
    text-transform: uppercase;
    vertical-align: bottom;
}

.data-table td,
.data-table tbody th {
    padding: 16px 12px;
    font-weight: inherit;
    text-align: left;
    vertical-align: top;
}

.data-table tbody tr {
    border-top: 1px solid var(--c-rule);
}

/* Entraîneurs */
.team-photo {
    width: fit-content;
    margin: 0 auto;
    padding: 5px;
}

.team-photo img {
    display: block;
    width: 940px;
}

.trainers {
    display: table;
    margin: 0 auto;
    font-weight: lighter;
    color: var(--c-grey);
    text-align: center;
}

.trainer {
    display: table-row;
}

.trainer__photo,
.trainer__info {
    display: table-cell;
    padding: 5px;
    vertical-align: top;
}

.trainer__photo img {
    display: block;
    width: 85px;
    height: 85px;
}

.trainer__name {
    color: var(--c-green);
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: lighter;
    line-height: 24px;
    text-transform: uppercase;
}

.site-main .trainer__bio {
    margin: 18px 0 0;
    color: var(--c-grey);
    font-size: 12px;
    line-height: 18px;
}

/* Règlement */
.rules {
    color: var(--c-grey);
}

.rules__list li {
    font-size: 13px;
    line-height: 22px;
    text-indent: 15px;
}

.rules__sanctions {
    text-align: left;
}

.rules__sanctions li {
    font-size: 13px;
    line-height: 22px;
}

.rules__sanctions li + li {
    margin-top: 10px;
}

.site-main .signature {
    margin: 0;
    color: var(--c-grey);
    font-size: 16px;
    line-height: 24px;
}

/* Contact */
.contact {
    font-style: normal;
}

.link-green {
    color: var(--c-green);
}

.link-green:hover {
    color: var(--c-green-soft);
}

.link-orange {
    color: #f98f2b;
}

/* Alerte rouge refermable (liste d'attente) */
.alert {
    position: relative;
    padding: 15px 29px 15px 15px;
    background: #fef4f6;
    color: #f0506e;
    transition: opacity 0.15s linear;
}

.alert.is-closing {
    opacity: 0;
}

.site-main .alert p {
    margin: 0;
    color: crimson;
    font-weight: 600;
}

.alert a {
    color: var(--c-link);
    text-decoration: underline;
    text-transform: uppercase;
}

.alert__close {
    position: absolute;
    top: 20px;
    right: 15px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    line-height: 0;
    opacity: 0.4;
    cursor: pointer;
}

.alert__close:hover,
.alert__close:focus-visible {
    opacity: 0.8;
}


/* 5. Visionneuse de photos (remplace les lightbox UIkit et Zoombox)
   ========================================================================== */

.lightbox {
    width: 100vw;
    max-width: none;
    height: 100vh;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: #000;
    color: rgb(255 255 255 / 70%);
    overflow: hidden;
}

.lightbox::backdrop {
    background: #000;
}

html:has(.lightbox[open]) {
    overflow: hidden;
}

.lightbox[open] {
    display: flex;
    align-items: center;
    justify-content: center;
    animation: lightbox-in 0.15s linear;
}

.lightbox__image {
    max-width: 100vw;
    max-height: 100vh;
    object-fit: contain;
}

.lightbox__toolbar {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    padding: 10px;
    background: rgb(0 0 0 / 30%);
    text-align: right;
}

.lightbox button {
    border: 0;
    color: rgb(255 255 255 / 70%);
    cursor: pointer;
}

.lightbox button:hover,
.lightbox button:focus-visible {
    color: #fff;
}

.lightbox__close {
    padding: 5px;
    background: none;
    line-height: 0;
}

.lightbox__prev,
.lightbox__next {
    position: absolute;
    top: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    margin-top: -25px;
    background: rgb(0 0 0 / 30%);
}

.lightbox__prev {
    left: 30px;
}

.lightbox__next {
    right: 30px;
}

.lightbox svg {
    fill: none;
    stroke: currentcolor;
}

@keyframes lightbox-in {
    from { opacity: 0; }
}


/* 6. Accessibilité et préférences utilisateur
   ========================================================================== */

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.skip-link {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
    padding: 6px 12px;
    background: var(--c-green);
    color: var(--c-ink);
    font-weight: bold;
    transform: translateY(-120%);
}

.skip-link:focus {
    color: var(--c-ink);
    transform: none;
}

:focus-visible {
    outline: 2px solid var(--c-green);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}


/* 7. Tablettes et mobiles
   ========================================================================== */

/* Menu principal sur une ligne resserrée (tablette paysage) */
@media (min-width: 768px) and (max-width: 1024px) {
    .main-nav a {
        min-width: 121px;
    }
}

/* Barre « Catégories » sur deux lignes : l'icône Facebook suit le texte au lieu de le recouvrir */
@media (min-width: 481px) and (max-width: 1023px) {
    .topbar__facebook {
        position: static;
        display: inline-block;
        vertical-align: top;
    }
}

@media (max-width: 768px) {
    :root {
        --menu-gap: 0px;
    }

    .topbar {
        padding: 0 25px;
    }

    .site-logo {
        margin-top: 100px;
    }

    /* Menu principal empilé */
    .main-nav {
        height: auto;
    }

    .main-nav__list {
        display: block;
    }

    .main-nav li {
        width: auto;
    }

    .main-nav a {
        border: 0;
    }

    .main-nav__submenu {
        width: 100%;
    }

    .main-nav__submenu li {
        width: auto;
    }
}

/* Petits écrans et téléphones à l'horizontale : les barres fixes masquaient
   l'essentiel de l'écran, elles défilent désormais avec la page. */
@media (max-width: 480px), (max-height: 500px) {
    .topbar,
    .site-footer {
        position: static;
    }

    .site-logo {
        margin-top: 20px;
    }

    .site-main {
        margin-bottom: 20px;
    }
}

@media (max-width: 480px) {
    .topbar {
        padding: 0 5px;
    }

    .topbar__nav {
        width: auto;
    }

    .topbar__label,
    .topbar__list li {
        display: block;
        line-height: 18px;
    }

    .topbar__label {
        margin: 0;
    }

    .topbar__list,
    .topbar__list li {
        display: block;
    }

    .topbar__facebook {
        top: -1px;
        right: 10px;
    }

    .site-logo {
        margin-top: 0;
    }
}