/*
 * Les Atlantes — feuille de style du site.
 *
 * Reproduction fidèle du site Adobe Muse : toutes les dimensions, pourcentages
 * et breakpoints proviennent du CSS généré par Muse (voir PLAN.md).
 * Ne pas « arrondir » ces valeurs sans comparaison visuelle.
 *
 * Breakpoints Muse (largeur de la fenêtre) :
 *   ≥ 1001 px           desktop
 *   811 – 1000 px       desktop étroit
 *   701 – 810 px        tablette
 *   601 – 700 px        petite tablette
 *   451 – 600 px        smartphone (menu hamburger)
 *   ≤ 450 px            petit smartphone (menu hamburger)
 */

/* ==================================================
   Base
   ================================================== */

:root {
    --color-blue: #0071BC;          /* bandeaux header / footer, liens */
    --color-blue-light: #29ABE2;    /* menu survolé / actif, fond des sous-menus */
    --color-blue-pressed: #3598DB;  /* menu enfoncé */
    --color-page: #DAEBFF;          /* fond de page */
    --color-yellow: #FCEE21;        /* liens jaunes du footer */
    --page-max-width: 1380px;       /* largeur de la maquette Muse (page, bandeaux, footer) */
    --header-height: 62px;          /* bandeau bleu fixe du header */
    --content-left: 7%;             /* colonne de texte : retrait et largeur (valeurs par largeur ci-dessous) */
    --content-width: 86%;
    --content-top: 88px;            /* haut de la colonne sous le header fixe */
    --section-gap: 34px;            /* espace entre deux sections, bandeaux, photos */
    /* Google Fonts : Lato et Bebas Neue sont les polices du site Muse (servies alors par Typekit) ;
       Montserrat remplace Univia Pro (police commerciale) pour les titres. */
    --font-text: 'Lato', sans-serif;
    --font-title: 'Montserrat', sans-serif;
    --font-menu: 'Bebas Neue', sans-serif;
}

@media (max-width: 700px) {
    :root { --content-left: 5.7%; --content-width: 88.6%; --section-gap: 30px; }
}

@media (max-width: 450px) {
    :root { --content-left: 4.25%; --content-width: 91.5%; --content-top: 84px; --section-gap: 26px; }
}

html {
    background-color: var(--color-page);
    min-height: 100%;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}

body {
    margin: 0;
    position: relative;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 14px;
    line-height: 17px;
    text-align: left;
    word-wrap: break-word;
    text-rendering: optimizeLegibility;
    font-feature-settings: "liga";
}

@media (max-width: 1000px) {
    body { overflow-x: hidden; }
}

/* Canvas de l'effet neige (créé par site.js en hiver, dessiné par scripts/snowcanvas.js) :
   couvre tout le document, au-dessus du contenu, sans capter la souris. */
#snowCanvas {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 100;
}

@media (max-width: 450px) {
    body { min-width: 320px; }
}

h1, h2, h3, p, ul, li, canvas {
    margin: 0;
    padding: 0;
}

ul { list-style: none; }

h1, h2, h3 {
    font-size: 100%;
    font-weight: inherit;
}

img {
    border: 0;
    display: block;
}

a:link, a:visited {
    color: var(--color-blue);
    text-decoration: none;
}

a:hover {
    color: #0000CA;
    text-decoration: underline;
}

a:active {
    color: var(--color-blue-light);
    text-decoration: none;
}

/* ==================================================
   Styles de texte
   --------------------------------------------------
   Titres et paragraphes des colonnes de texte (.text-block, .band-text, .photo-row-text), sans classe sur
   les balises. Deux paragraphes sont séparés d'une ligne (Muse y mettait un paragraphe vide).
   ================================================== */

:is(.text-block, .band-text, .photo-row-text) :where(h1, h2) {
    font-family: var(--font-title);
    font-size: 24px;
    line-height: 29px;
    font-weight: 700;
    text-decoration: underline;
    margin-bottom: 17px;
}

:is(.text-block, .band-text, .photo-row-text) :where(p, li) {
    font-family: var(--font-text);
    font-size: 20px;
    line-height: 24px;
    font-weight: 400;
}

:is(.text-block, .band-text, .photo-row-text) :is(p, ul) + :is(p, ul) {
    margin-top: 24px;
}

@media (min-width: 451px) and (max-width: 700px) {
    :is(.text-block, .band-text, .photo-row-text) :where(h1, h2) { font-size: 20px; line-height: 24px; }
    :is(.text-block, .band-text, .photo-row-text) :where(p, li) { font-size: 18px; line-height: 22px; }
    :is(.text-block, .band-text, .photo-row-text) :is(p, ul) + :is(p, ul) { margin-top: 22px; }
}

@media (max-width: 450px) {
    :is(.text-block, .band-text, .photo-row-text) :where(h1, h2) { font-size: 16px; line-height: 19px; }
    :is(.text-block, .band-text, .photo-row-text) :where(p, li) { font-size: 14px; line-height: 17px; }
    :is(.text-block, .band-text, .photo-row-text) :is(p, ul) + :is(p, ul) { margin-top: 17px; }
}

/* Titres en Lato (page activites, style Muse « Titre Lato ») */
.lato { font-family: var(--font-text); }

/* ==================================================
   Header (bandeau bleu fixe)
   ================================================== */

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    min-height: var(--header-height);
    background-color: var(--color-blue);
    z-index: 61;
}

/* ==================================================
   Navigation (un seul menu pour toutes les largeurs)
   --------------------------------------------------
   ≥ 601 px : six entrées de largeur égale (grille), menu centré à 85,51 % de la largeur (1180 px au plus,
   comme la maquette Muse à 1380 px) ; sous-menus déroulants sous leur entrée, niveau 2 à droite.
   ≤ 600 px : bouton hamburger et panneau déroulant, sous-menus en accordéon (section suivante).
   ================================================== */

/* Positionné dans le header fixe (et non fixé lui-même) : le texte garde le même anticrénelage que sur Muse. */
.main-navigation {
    position: absolute;
    top: 14px;
    left: 0;
    right: 0;
    z-index: 64;
    width: 85.51%;
    max-width: 1180px;
    margin: 0 auto;
}

.menu {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    height: 34px;
}

.menu > li {
    position: relative;
}

.menu a {
    display: block;
    color: #FFFFFF;
    text-decoration: none;
    font-family: var(--font-menu);
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
}

/* 2 + 29 + 3 = 34 px : le texte est 2 px sous le haut de la barre, comme dans Muse */
.menu > li > a {
    padding: 2px 0 3px;
    font-size: 24px;
    line-height: 29px;
}

.menu > li > a:hover,
.menu > li > a.is-active {
    color: var(--color-blue-light);
}

.menu > li > a:active {
    color: var(--color-blue-pressed);
}

/* Sous-menus : ouverts au survol ou au clavier (≥ 601 px) ; .is-open = ouverts au premier appui
   (écran tactile, panneau mobile — site.js § 2). */

.submenu {
    display: none;
    position: absolute;
    top: 34px;
    left: 0;
    width: 97.44%;
    padding: 2px 0;
    background-color: var(--color-blue-light);
}

.menu li.is-open > .submenu {
    display: block;
}

@media (min-width: 601px) {
    .menu li:hover > .submenu,
    .menu li:focus-within > .submenu {
        display: block;
    }
}

.submenu > li {
    position: relative;
    width: 97.9%;
    margin-left: 1.06%;
}

.submenu > li + li {
    margin-top: 1px;
}

.submenu a {
    padding: 6px 2px 2px;
    font-size: 24px;
    line-height: 29px;
}

.submenu a:hover,
.submenu a.is-active {
    background-color: var(--color-blue);
}

/* Première ligne de chaque sous-menu : la page parente elle-même, séparée de ses sous-pages */
.submenu-self {
    border-bottom: 1px solid rgba(255, 255, 255, 0.45);
}

/* Sous-menu de niveau 2 : s'ouvre à droite de son parent. */
.submenu .submenu {
    top: 0;
    left: 100%;
    width: 102.16%;
}

@media (min-width: 811px) and (max-width: 1000px) {
    .submenu { width: 134.76%; }
}

@media (min-width: 601px) and (max-width: 810px) {
    .menu > li > a { padding: 6px 0; font-size: 18px; line-height: 22px; }
    .submenu > li { width: 97.57%; margin-left: 1.22%; }
    .submenu a { padding: 7px 2px 4px; font-size: 18px; line-height: 22px; }
    .submenu .submenu { width: 100%; }
    .submenu .submenu > li { width: 97.5%; margin-left: 1.25%; }
}

@media (min-width: 701px) and (max-width: 810px) {
    .menu > li:nth-child(2) > .submenu { width: 145.14%; }
    .menu > li:nth-child(3) > .submenu { width: 140.36%; }
}

@media (min-width: 601px) and (max-width: 700px) {
    .menu > li:nth-child(2) > .submenu { width: 167.35%; }
    .menu > li:nth-child(3) > .submenu { width: 163.27%; }
}

/* ==================================================
   Header mobile (≤ 600 px) : bouton hamburger, panneau du menu, logo, titre
   --------------------------------------------------
   Remplace le widget « DLMenu » (Codrops) du site Muse et sa seconde copie de l'arborescence :
   le même <nav> devient un panneau déroulant sous le bouton, les sous-menus se déplient en accordéon
   (le premier appui sur une entrée ouvre, le second suit le lien).
   ================================================== */

.menu-toggle,
.mobile-logo,
.mobile-title {
    display: none;
}

@media (max-width: 600px) {
    /* Bouton : trois barres blanches sur fond bleu clair, en croix quand le menu est ouvert. */
    .menu-toggle {
        display: block;
        position: absolute;
        top: 8px;
        left: 8px;
        z-index: 68;
        width: 48px;
        height: 45px;
        padding: 0;
        border: 0;
        background: var(--color-blue-light);
        cursor: pointer;
    }

    .menu-toggle span,
    .menu-toggle span::before,
    .menu-toggle span::after {
        position: absolute;
        left: 8px;
        width: 32px;
        height: 4px;
        border-radius: 2px;
        background: #FFFFFF;
        transition: transform 0.25s ease, background-color 0.25s ease;
    }

    .menu-toggle span { top: 20px; }

    .menu-toggle span::before,
    .menu-toggle span::after {
        content: "";
        left: 0;
    }

    .menu-toggle span::before { transform: translateY(-10px); }
    .menu-toggle span::after { transform: translateY(10px); }

    .menu-open .menu-toggle span { background: transparent; }
    .menu-open .menu-toggle span::before { transform: rotate(45deg); }
    .menu-open .menu-toggle span::after { transform: rotate(-45deg); }

    /* Panneau sous le bouton (8 + 45 + 5 px), fondu et léger glissement à l'ouverture. */
    .main-navigation {
        top: 58px;
        left: 8px;
        right: auto;
        width: min(260px, calc(100vw - 16px));
        max-width: none;
        margin: 0;
        pointer-events: none;   /* le conteneur garde la taille du panneau masqué : ne pas capter les clics */
    }

    .menu-open .main-navigation { pointer-events: auto; }

    .menu {
        display: block;
        height: auto;
        max-height: calc(100vh - 66px);
        overflow-y: auto;
        background: var(--color-blue-light);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
        opacity: 0;
        visibility: hidden;
        transform: translateY(10px);
        transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
    }

    .menu-open .menu {
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    .menu a {
        position: relative;
        text-align: left;
        white-space: normal;
        font-family: var(--font-text);
    }

    .menu > li > a,
    .submenu a {
        padding: 12px 40px 12px 20px;
        font-size: 16px;
        line-height: 20px;
    }

    .menu > li > a:hover,
    .menu > li > a:active,
    .menu > li > a.is-active {
        color: #FFFFFF;
    }

    .no-touch .menu a:hover {
        background-color: rgba(14, 30, 40, 0.25);
    }

    .menu a.is-active {
        background-color: var(--color-blue);
    }

    /* Sous-menus en accordéon, légèrement assombris et décalés */
    .submenu,
    .submenu .submenu {
        position: static;
        width: auto;
        padding: 0;
        background-color: rgba(0, 0, 0, 0.12);
    }

    .submenu > li,
    .submenu .submenu > li {
        width: auto;
        margin: 0;
    }

    .submenu a { padding-left: 36px; }
    .submenu .submenu a { padding-left: 52px; }

    /* Chevron des entrées à sous-menu ; pointe vers le haut quand l'entrée est ouverte */
    .menu li > a:not(:only-child)::after {
        content: "";
        position: absolute;
        top: 50%;
        right: 16px;
        width: 9px;
        height: 9px;
        margin-top: -7px;
        border: solid #FFFFFF;
        border-width: 0 2px 2px 0;
        opacity: 0.75;
        transform: rotate(45deg);
        transition: transform 0.25s ease;
    }

    .menu li.is-open > a:not(:only-child)::after {
        margin-top: -2px;
        transform: rotate(-135deg);
    }

    /* Logo et titre à droite du header fixe (même anticrénelage du texte que sur Muse). */
    .mobile-logo {
        display: block;
        position: absolute;
        top: 13px;
        right: 123px;
        z-index: 78;
        width: 40px;
        overflow: hidden;
    }

    .mobile-title,
    .mobile-title:link,
    .mobile-title:visited {
        display: block;
        position: absolute;
        top: 21px;
        right: 32px;
        z-index: 74;
        width: 87px;
        min-height: 23px;
        color: #FFFFFF;
        font-family: var(--font-menu);
        font-size: 18px;
        line-height: 22px;
        font-weight: 400;
        text-align: right;
        text-decoration: none;
    }
}

/* ==================================================
   Page (conteneur centré) et colonne de contenu
   ================================================== */

.page {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: var(--page-max-width);
    min-height: 100vh;   /* les pages courtes gardent le footer en bas de la fenêtre */
    margin: 0 auto;
}

/* Colonne de texte commune à toutes les pages (retrait, largeur et haut par largeur d'écran : variables) */
.page-content {
    position: relative;
    z-index: 27;
    margin-top: var(--content-top);
    margin-left: var(--content-left);
    width: var(--content-width);
    padding-bottom: 30px;   /* espace avant le footer */
}

.text-block {
    position: relative;
}

/* Sections, bandeaux, rangées photo et images se suivent à --section-gap ; une page peut préciser. */
:is(.text-block, .band, .photo-row, .page-image, .intro-wrap) + * {
    margin-top: var(--section-gap);
}

/* Image de contenu (cadre Muse « clip_frame ») */
.page-image {
    display: block;
    position: relative;
    overflow: hidden;
}

.page-image img {
    display: block;
}

/* Liste à puces Muse : puce placée à gauche du texte, retrait de 34 px. */
.list {
    padding-left: 34px;
}

.list li {
    position: relative;
}

.list li::before {
    content: '•';
    position: absolute;
    right: 100%;
    margin-right: 6px;
}

/* Tableau des passages de brevet (styles repris du bloc HTML inséré dans Muse) */
.calendar-table {
    border-collapse: collapse;
    border-spacing: 0;
}

.calendar-table th,
.calendar-table td {
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: normal;
    padding: 10px 5px;
    border: 1px solid black;
    overflow: hidden;
    word-break: normal;
    text-align: center;
    vertical-align: top;
    background-color: #ecf4ff;
}

.calendar-table th {
    background-color: #dae8fc;
}

/* Bandeau bleu pleine largeur au milieu d'une page. Le fond est positionné par rapport
   au body (comme le footer) ; site.js lui donne la hauteur du bandeau. */
.band {
    position: static;
}

.band-bg {
    position: absolute;
    left: 0;
    right: 0;
    z-index: -1;
    background-color: var(--color-blue);
}

.band-inner {
    position: relative;
    display: flow-root;   /* les marges des blocs internes restent dans le bandeau */
    max-width: var(--page-max-width);
    margin: 0 auto;
    padding: var(--section-gap) 0;
}

.band-text {
    position: relative;
    margin-left: var(--content-left);
    width: var(--content-width);
    color: #FFFFFF;
}

/* Liens jaunes sur fond bleu (style Muse « Hyperliens Jaunes ») : tout lien d'un bandeau et de l'accueil */
.band-text a:link, .home a:link { color: var(--color-yellow); text-decoration: none; }
.band-text a:visited { color: #F7931E; text-decoration: none; }
.home a:visited { color: var(--color-yellow); text-decoration: none; }
.band-text a:hover, .home a:hover { color: #FBB03B; text-decoration: underline; }
.band-text a:active, .home a:active { color: #FBB03B; text-decoration: none; }

/* Cadre d'image (Muse « clip_frame ») : l'image occupe la largeur du cadre. */
.photo-frame {
    overflow: hidden;
}

.photo-frame img {
    display: block;
    width: 100%;
    height: auto;
}

/* Cibles d'ancres (sections avec id) : arrêt sous le header fixe */
[id] { scroll-margin-top: calc(var(--header-height) + 10px); }

/* Photo en fond de bloc (Muse « museBGSize ») */
.bg-photo {
    background: transparent no-repeat center center;
    background-size: cover;
}

/* ==================================================
   Mise en page « photos et bandeaux » (lacs, épaves, carrières, mers-oceans, autres-sorties)
   --------------------------------------------------
   intro → bandeau bleu (texte + photo) → rangée (photo + texte) → bandeau bleu. Sur desktop la photo
   (238 px) est à droite du texte du bandeau et à gauche du texte de la rangée ; sous 1001 px elle passe
   sous son texte, centrée (407 px au plus, fluide sous 451 px).
   ================================================== */

.page-content.photo-layout {
    position: static;
    margin-left: 0;
    width: 100%;
}

.photo-layout .intro { margin-left: var(--content-left); width: var(--content-width); }
.photo-layout .band-text { width: 50.73%; }
.photo-layout .band-inner { min-height: 238px; }
.photo-layout .band-photo { position: absolute; top: 50%; left: 59.5%; width: 32.4%; height: 238px; transform: translateY(-50%); }   /* centrée sur la hauteur du texte */
.photo-layout .photo-row { position: relative; display: flow-root; margin-left: var(--content-left); width: var(--content-width); min-height: 238px; }
.photo-layout .photo-row-photo { position: absolute; top: 50%; left: 0; width: 37.66%; height: 238px; transform: translateY(-50%); }
.photo-layout .photo-row-text { position: relative; margin-left: 41.79%; width: 58.22%; }

@media (max-width: 1000px) {
    .photo-layout .band-text { width: var(--content-width); }
    .photo-layout .band-inner { min-height: 0; }
    .photo-layout .band-photo,
    .photo-layout .photo-row-photo { position: relative; top: 0; left: auto; width: min(407px, var(--content-width)); height: auto; aspect-ratio: 407 / 238; margin: 24px auto 0; transform: none; }
    .photo-layout .photo-row { display: flex; flex-direction: column; margin-left: 0; width: 100%; min-height: 0; }
    .photo-layout .photo-row-text { order: 1; margin-left: var(--content-left); width: var(--content-width); }
    .photo-layout .photo-row-photo { order: 2; }
}

/* Espaceur qui pousse le footer en bas de la fenêtre sur les pages courtes */
.footer-spacer {
    flex: 1 1 auto;
}

/* ==================================================
   Bandeau d'accueil de page (diaporama / photo fixe + titre)
   --------------------------------------------------
   Sur desktop : diaporama pleine largeur (widget MuseThemes « Cinch Responsive Slideshow » :
   fondu 1 s, défilement automatique 5 s, flèches, hauteur = hauteur de la photo).
   Sous 1001 px : photo fixe pleine largeur (bandeau .band) et titre en texte.
   ================================================== */
/* flow-root : la marge haute du titre ne doit pas traverser le bandeau ; sur desktop, site.js donne
   au bandeau la hauteur réelle du diaporama (comme le JS Muse pour ses « browser_width »). */
.hero { position: static; display: flow-root; box-sizing: border-box; }

/* Photo fixe pleine largeur (fond .band-bg dimensionné par site.js), absente sur desktop */
.hero-bg {
    display: none;
    background-repeat: no-repeat;
    background-position: left top;
    background-size: cover;
}

.slideshow {
    position: relative;
    z-index: 2;
    user-select: none;
    /* Couche composée (comme le translate3d de slick) : le titre au-dessus est lissé en niveaux de gris. */
    transform: translateZ(0);
}

.hero .slideshow {
    position: absolute;
    left: 0;
    right: 0;
}

/* Variante à hauteur fixe (widget « fixed-true ») : l'image est centrée verticalement et rognée */
.slideshow-fixed { overflow: hidden; }
.slideshow-fixed .slide,
.slideshow-fixed .slide.is-active { position: absolute; top: 0; left: 0; bottom: 0; width: 100%; overflow: hidden; }
.slideshow-fixed .slide img { position: relative; top: 50%; transform: translateY(-50%); }

/* Effet « glissement » (fade:false chez slick) : la diapositive entrante arrive du côté opposé */
.slideshow[data-effect="slide"] .slide { opacity: 1; visibility: hidden; transition: transform 0.7s ease, visibility 0s 0.7s; }
.slideshow[data-effect="slide"] .slide.is-active { visibility: visible; transition: transform 0.7s ease; }

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    margin: 0;
    opacity: 0;
    transition: opacity 1s ease;
}

.slide.is-active {
    position: relative;
    z-index: 1;
    opacity: 1;
}

.slide img {
    display: block;
    width: 100%;
    height: auto;
}

/* Bandeau d'accueil (le-club, la-plongee) : l'image ne dépasse pas 75 % de la hauteur de la fenêtre sur les
   grands écrans (Muse : 1080 px à 1920 px de large), recadrée au centre. */
.hero .slide img {
    max-height: 75vh;
    object-fit: cover;
}

.slide-prev,
.slide-next {
    position: absolute;
    top: 50%;
    z-index: 4;
    width: 50px;
    height: 50px;
    margin: -25px 0 0 0;
    padding: 0;
    border: 0;
    background: none;
    opacity: 0.6;
    cursor: pointer;
}

.slide-prev { left: 1rem; }
.slide-next { right: 1rem; }

.slide-prev:hover,
.slide-next:hover { opacity: 1; }

/* Chevrons : carré bordé sur deux côtés, tourné (comme le widget) */
.slide-prev::before,
.slide-next::before {
    content: "";
    position: absolute;
    top: 50%;
    width: 35px;
    height: 35px;
    margin-top: -18px;
    border-right: 3px solid #FFFFFF;
    border-bottom: 3px solid #FFFFFF;
}

.slide-prev::before {
    left: 50%;
    margin-left: -17px;
    transform: rotate(-225deg) skew(-20deg, -20deg);
}

.slide-next::before {
    right: 50%;
    margin-right: -17px;
    transform: rotate(-45deg) skew(-20deg, -20deg);
}

/* Sous 481 px, le widget réduit les chevrons (25 px, trait de 2 px) */
@media (max-width: 480px) {
    .slide-prev::before,
    .slide-next::before { width: 25px; height: 25px; margin-top: -13px; border-width: 2px; }
}

/* Titre du bandeau (Muse l'exportait en image sur desktop pour la-plongee ; texte réel partout) */
.hero-title {
    position: relative;
    z-index: 4;
    text-align: center;
    color: #FFFFFF;
    font-family: var(--font-menu);
    font-weight: 400;
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.5), 0 0 8px rgba(0, 0, 0, 0.5);
}

.hero-title .accent { color: #93D4E2; }

/* Logo centré dans le bandeau (cadre Muse « clip_frame ») */
.hero-logo {
    position: relative;
    z-index: 5;
    margin-left: 50%;
    overflow: hidden;
}

.hero-logo img { display: block; }

@media (max-width: 1000px) {
    .hero .slideshow { display: none; }
    .hero-bg { display: block; }
}

/* Apparition en glissant (animate.css « fadeInRight » / « fadeInLeft ») dès l'entrée à l'écran (site.js § 5) ;
   masqué seulement si le script tourne (html.js), visible d'emblée si l'utilisateur limite les animations. */
.js .animate-in { opacity: 0; }
.animate-in.is-visible { animation: fadeInRight 1s ease-out both; }
.animate-in.from-left.is-visible { animation-name: fadeInLeft; }

@media (prefers-reduced-motion: reduce) {
    .js .animate-in { opacity: 1; }
    .animate-in.is-visible,
    .animate-in.from-left.is-visible { animation: none; }
}

@keyframes fadeInRight {
    from { opacity: 0; transform: translate3d(100%, 0, 0); }
    to { opacity: 1; transform: none; }
}

@keyframes fadeInLeft {
    from { opacity: 0; transform: translate3d(-100%, 0, 0); }
    to { opacity: 1; transform: none; }
}

/* ==================================================
   Galerie vidéos (widget MuseThemes « Show Video Gallery » + visionneuse)
   --------------------------------------------------
   Grille de vignettes YouTube (3 colonnes, 1 sous 451 px), coins arrondis, voile et bouton
   « lecture » au survol ; la visionneuse plein écran remplace lightGallery (jQuery).
   ================================================== */
.video-gallery {
    display: flex;
    flex-flow: row wrap;
}

.video-item {
    display: block;
    position: relative;
    box-sizing: border-box;
    width: calc(100% / 3);
    padding: 10px;
    overflow: hidden;
    z-index: 1;
}

.video-item:last-child { margin-left: auto; margin-right: auto; }

.video-item img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
    transition: transform 0.15s linear;
    transform-origin: 50% 50%;
}

.video-item:hover img { transform: scale3d(1.1, 1.1, 1.1); }

.video-overlay {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.1);
    transition: background-color 0.15s ease 0s;
    z-index: 1;
}

.video-item:hover .video-overlay { background-color: rgba(0, 0, 0, 0.5); }

.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 48px;
    height: 48px;
    margin: -24px 0 0 -24px;
    opacity: 0.8;
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAQAAAAAYLlVAAAEHElEQVR4AbWZBa/kSAyErUijSMvMDCMdMzMzMzMzM8MeM/PdMjMz74vyn76jVil5kzehji0IuV3dbVfsxMoJLY7jAd5lNvuJE7qD2bzMnRxkTQkDuIJv5bZv3cFnnEXLr/ODeJe9xCV0G88zxo/zQ/iKuJJGvMHEes4H8XLGwAt4nKs5hLbi4iCO5mpeZE3Hs3u5j7Cq+3PY1mu4b7ml+8Iyg/uY3ctqOYeUd97i+dQgu7ibQYWtR/EiUcJ6P7eUXfo/U+YvFnYuYSLvp6bwfuHMYAxLE4YfMrFGAP9CLP2efsWWb10ihC6zWkKQ2so/cwOSoSzX42uYZh6EK9ifWIVW99D7M5Fso8yTcHQin97u9uDzidQZZB6FiQkI1/ad9+JzJppn4TgiZVU7M/WEMeIEa0C4XhOcR9B5+0XdvskaEuSjg5g4HBGGNSa0mCdmHZ6+9b1ujMqJ57PqvVsVCU9lz//2nAEuJOanOvzAy5rqUF0Ua28kLAAgJqrwdhDRi5buU/yr2rnTLB+AUvV6gkoQ3nAjrHP2XC3mH1AMgHQRJ1cA0Jb9cf9f+AmRZHEA0s/Kk5Zy4UUzI9QGnFoWgJjtKQaUAnCns1z6H0VqA8IqABS+V5QAMEN2Y4wH3OFPZlUBiGCPLFoliPbPNz5zh4/XASB9t1g3wMfu+UeNRe7wiroAtJUP5G8mD+NC2EQLh9cHIF3DhTnjXOyenG0yGuUHgPQX2l3GOQEHVQDo5w+A9DWG55DRNgEw8wtA3UDQNRGjJgEs59R8JhAABngFsINbaHVt+N1LWQAY5xHAa3pZ5wXhOmOXOzzaE4CfaBdqVpSGC9zh1R4ArOF8KyQ8qgpU1dDz1QGogQ+toPCts3rAuB3XitUC8G6ZRo5AG3+WClIiBlUE8GfZLyAcKdvhRsAOd3JhBQAbqzTwPJBadb2Qvy0JYC8P088qCKv0Mk41pRGjSgD4mHGVm3U3husvCNkmRMUAzCvGGjnFyLzOpnEXg3IBbMvq7yvVg9frIuOIiq0B4xhgtYQvnKfNhFndyn4mW4PCqcSZXRgT2a9KJmjMfT+Wqy3rl1EmOr27MQDvEvfJObRY3vAnmquJuzIObTVpO5jh3f3pRFr+4fnfydYxzqv7wzW5vRyUw9Ji+bY395exX+OeX4CnREseYoGAx4mlD+QbhKkfDo8S1Ey8r5JFelGj75M9b/V14OLUT5yXC0+GVq+fDd+WjwdOYF5qjAfKf1hN/yN8m4NKOP8+ZbuNU6280FbFrOTkeU4m6LJ5Z/Fuxq+uUdUj+BZ2ZXQ9H/M4V3OQ9Eiu5nm+0polIZ9v9YThPCUQ5XQzt9PPfAiDuI81pZzP43pC8ysczTMsz3U9m4eZYc0Jo7iQR3mf2SxNzHc2b3A3Z5X/gvw3ig3ow2qn8eAAAAAASUVORK5CYII=') no-repeat;
    background-size: 48px;
    transition: opacity 0.2s;
}

.video-item:hover .play-button { opacity: 1; }

/* Titre de la vidéo sur un dégradé au bas de la vignette */
.video-title {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 24px 12px 8px;
    border-radius: 0 0 10px 10px;
    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.65));
    color: #FFFFFF;
    font-family: var(--font-text);
    font-size: 14px;
    line-height: 18px;
    text-align: left;
}

@media (max-width: 450px) {
    .video-item { width: 100%; }
}

/* Visionneuse (allure de lightGallery : fond noir, barre haute avec compteur et fermeture,
   flèches latérales, bandeau de vignettes en bas) */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: #000;
    color: #999;
    font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
}

.lightbox-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 47px;
    background: rgba(0, 0, 0, 0.45);
    z-index: 2;
}

.lightbox-title {
    position: absolute;
    left: 90px;
    right: 60px;
    top: 0;
    padding: 12px 0;
    overflow: hidden;
    color: #FFFFFF;
    font-family: var(--font-text);
    font-size: 15px;
    line-height: 23px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.lightbox-counter {
    display: inline-block;
    padding: 12px 20px;
    font-size: 16px;
    line-height: 23px;
}

.lightbox-close,
.lightbox-prev,
.lightbox-next {
    border: 0;
    background: none;
    color: #999;
    cursor: pointer;
    font-family: inherit;
    line-height: 1;
}

.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover { color: #FFFFFF; }

.lightbox-close {
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 47px;
    font-size: 28px;
}

.lightbox-stage {
    position: absolute;
    top: 47px;
    bottom: 85px;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-video {
    width: 855px;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 100%;
    border: 0;
    background: #000;
}

.lightbox-prev,
.lightbox-next {
    position: absolute;
    top: 50%;
    margin-top: -10px;
    padding: 8px 10px;
    border-radius: 2px;
    background: rgba(0, 0, 0, 0.45);
    font-size: 22px;
    z-index: 2;
}

.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }

.lightbox-thumbs {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 85px;
    padding: 5px 0;
    box-sizing: border-box;
    background: #0D0D0D;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
}

.lightbox-thumb {
    display: inline-block;
    width: 100px;
    height: 75px;
    margin: 0 5px 0 0;
    padding: 0;
    border: 2px solid #FFFFFF;
    border-radius: 4px;
    box-sizing: border-box;
    background: #000 center / cover no-repeat;
    cursor: pointer;
    vertical-align: top;
}

.lightbox-thumb.is-active { border-color: #A90707; }

/* ==================================================
   Galerie de photos « justifiée » + visionneuse (pages albums)
   --------------------------------------------------
   Reprise du widget Unite Gallery (thème « tiles », type justified, hauteur de base 150 px,
   espace 3 px) utilisé par le site Muse : site.js range les vignettes en rangées de largeur
   égale ; la visionneuse plein écran (fond noir, bandeau haut, flèches, image bordée de 10 px)
   utilise les icônes du widget (images/gallery/).
   ================================================== */
.tile-gallery {
    position: relative;
    overflow: hidden;
    font-family: Arial, Helvetica, sans-serif;
}

.tile {
    position: absolute;
    display: block;
    overflow: hidden;
    cursor: pointer;
}

.tile img {
    position: absolute;
    display: block;
    max-width: none;
}

/* Au survol : voile noir (::before) et loupe centrée (::after), sans balise dans le HTML. */
.tile::before,
.tile::after {
    content: "";
    position: absolute;
    opacity: 0;
    transition: opacity 0.3s;
}

.tile::before {
    inset: 0;
    background: #000000;
}

.tile::after {
    top: 50%;
    left: 50%;
    width: 38px;
    height: 38px;
    margin: -19px 0 0 -19px;
    background: url("../images/gallery/icon-zoom32.png") no-repeat 0 0;
}

.tile:hover::before { opacity: 0.4; }
.tile:hover::after { opacity: 1; }

.photo-lightbox {
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: #000000;
    font-family: Arial, Helvetica, sans-serif;
    user-select: none;
}

.photo-lightbox-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 44px;
    background: rgba(0, 0, 0, 0.4);
    z-index: 2;
}

.photo-lightbox-numbers {
    position: absolute;
    top: 14px;
    left: 8px;
    color: #E5E5E5;
    font-size: 12px;
    z-index: 3;
}

.photo-lightbox-close,
.photo-lightbox-prev,
.photo-lightbox-next {
    position: absolute;
    padding: 0;
    border: 0;
    background: transparent no-repeat 0 0;
    cursor: pointer;
}

.photo-lightbox-close {
    top: 2px;
    right: 2px;
    width: 36px;
    height: 36px;
    background-image: url("../images/gallery/lightbox-icon-close.png");
    z-index: 4;
}

.photo-lightbox-close:hover { background-position: 0 -35px; }

.photo-lightbox-prev,
.photo-lightbox-next {
    top: 50%;
    width: 50px;
    height: 55px;
    margin-top: -27.5px;
    z-index: 3;
}

/* Flèches : chevron blanc épais dessiné en CSS sur un fond sombre arrondi, lisible sur toute photo
   (le sprite du widget Muse, trait fin et gris, ne l'était pas). */
.photo-lightbox-prev { left: 10px; }
.photo-lightbox-next { right: 10px; }

.photo-lightbox-prev,
.photo-lightbox-next {
    background-color: rgba(0, 0, 0, 0.45);
    border-radius: 6px;
    transition: background-color 0.2s;
}

.photo-lightbox-prev:hover,
.photo-lightbox-next:hover { background-color: rgba(0, 0, 0, 0.75); }

.photo-lightbox-prev::before,
.photo-lightbox-next::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    border: solid #FFFFFF;
    border-width: 0 0 4px 4px;
    transform: translate(-30%, -50%) rotate(45deg);
}

.photo-lightbox-next::before { transform: translate(-70%, -50%) rotate(-135deg); }

.photo-lightbox-stage {
    position: absolute;
    top: 44px;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.photo-lightbox-image {
    display: block;
    max-width: 100%;
    max-height: 100%;
    box-sizing: border-box;
    border: 10px solid #FFFFFF;
}

/* ==================================================
   Footer
   --------------------------------------------------
   Bande bleue pleine largeur sans élément absolu : le fond déborde par une ombre étalée (box-shadow)
   rognée à la hauteur du footer (clip-path). Contenu limité à la largeur de page : adresse à gauche,
   trois logos à droite, espacés proportionnellement à la fenêtre (positions Muse aux largeurs de maquette).
   ================================================== */

.site-footer {
    background-color: var(--color-blue);
    box-shadow: 0 0 0 100vmax var(--color-blue);
    clip-path: inset(0 -100vmax);
    color: #FFFFFF;
    font-family: var(--font-text);
    font-weight: 400;
}

.footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    box-sizing: border-box;
    max-width: var(--page-max-width);
    min-height: 130px;
    margin: 0 auto;
    padding: 11px var(--content-left) 16px;
}

.footer-text {
    max-width: 487px;
}

.footer-name {
    font-size: 16px;
    line-height: 19px;
    font-weight: 700;
}

.footer-legal {
    font-size: 12px;
    line-height: 14px;
}

.footer-legal a:link,
.footer-legal a:visited { color: var(--color-yellow); text-decoration: none; }
.footer-legal a:visited { color: #F7931E; }
.footer-legal a:hover { color: #FBB03B; text-decoration: underline; }
.footer-legal a:active { color: #FBB03B; text-decoration: none; }
/* Lien « Cookies » (réaffiche le bandeau d'information) : en blanc comme le texte */
.footer-legal a.cookie-settings:link,
.footer-legal a.cookie-settings:visited,
.footer-legal a.cookie-settings:hover,
.footer-legal a.cookie-settings:active { color: #FFFFFF; }

/* Logos : hauteur commune (--footer-logo), largeur suivant l'image */
.footer-logos {
    display: flex;
    align-items: flex-start;
    gap: min(155px, 11.23vw);
    margin-top: 15px;
    --footer-logo: 78px;
}

.footer-logos a {
    display: block;
    height: var(--footer-logo);
}

.footer-logos img {
    display: block;
    height: 100%;
    width: auto;
}

@media (min-width: 811px) and (max-width: 1000px) {
    .footer-inner { min-height: 120px; padding-top: 10px; padding-bottom: 4px; }
    .footer-logos { gap: 9.2vw; }
}

@media (min-width: 601px) and (max-width: 810px) {
    .footer-inner { min-height: 224px; padding-top: 10px; padding-bottom: 9px; }
    .footer-name { font-size: 14px; line-height: 17px; }
    .footer-line { font-size: 12px; line-height: 14px; }
    .footer-legal { text-align: center; }
    .footer-logos { gap: 3.2vw; margin-top: 20px; --footer-logo: 60px; }
}

/* Mobile : logo du club à gauche, adresse centrée, Facebook et YouTube empilés à droite */
@media (max-width: 600px) {
    .footer-inner {
        display: grid;
        grid-template-columns: 50px 1fr 40px;
        grid-template-rows: auto auto;
        column-gap: 8px;
        min-height: 141px;
        padding: 12px 5.34% 31px;
    }
    .footer-logos { display: contents; --footer-logo: 40px; }
    .footer-text { grid-area: 1 / 2 / 3 / 3; text-align: center; }
    .footer-logo { grid-area: 1 / 1 / 3 / 2; margin-top: 24px; }
    .footer-facebook { grid-area: 1 / 3; justify-self: end; }
    .footer-youtube { grid-area: 2 / 3; justify-self: end; margin-top: 16px; }
    .footer-name { font-size: 12px; line-height: 14px; }
    .footer-line, .footer-gap, .footer-legal { font-size: 10px; line-height: 12px; }
    .footer-org-sep, .footer-design-sep { display: none; }
    .footer-org-2, .footer-design { display: block; }
}

/* ==================================================
   Bandeau cookies (site.js § 10)
   --------------------------------------------------
   Bande bleue fixée en bas, texte en Lato ; « Accepter » reprend le bouton « Plus » de l'accueil (dégradé
   jaune, orange au survol). Bandeau d'information : Google Analytics est chargé par le head.
   ================================================== */

.cookie-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    background-color: var(--color-blue);
    color: #FFFFFF;
    font-family: var(--font-text);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
}

.cookie-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 28px;
    box-sizing: border-box;
    max-width: var(--page-max-width);
    margin: 0 auto;
    padding: 14px var(--content-left);
}

.cookie-text {
    flex: 1 1 320px;
    margin: 0;
    font-size: 15px;
    line-height: 20px;
}

.cookie-actions {
    display: flex;
    gap: 12px;
    flex: 0 0 auto;
}

.cookie-accept {
    box-sizing: border-box;
    min-width: 110px;
    padding: 8px 18px;
    border: 1px solid transparent;
    border-radius: 3px;
    font: 15px/20px var(--font-text);
    cursor: pointer;
}

.cookie-accept {
    color: #4E4E4E;
    background: linear-gradient(#FCED20, #FAB039);
}

.cookie-accept:hover {
    color: #FFFFFF;
    background: linear-gradient(#EE8400, #E84C3A);
}

@media (max-width: 600px) {
    .cookie-inner { padding: 12px 5.34%; }
    .cookie-text { font-size: 14px; line-height: 19px; }
    .cookie-actions { width: 100%; }
    .cookie-accept { flex: 1 1 0; }
}

/* ==================================================
   Pages
   --------------------------------------------------
   Colonne, espacements et tailles de texte sont communs (variables --content-*, --section-gap) ; ici
   seulement ce qui est propre à une page : images, tableau, logos, bandeaux d'accueil.
   ================================================== */

/* Page : entrainements — photo centrée entre deux sections */
.page-entrainements .page-image { width: 620px; max-width: 100%; margin-left: auto; margin-right: auto; }
.page-entrainements .page-image img { width: 100%; height: auto; }

/* Page : federations — logos CMAS et Lifras côte à côte sous le texte */
.page-federations .logo-row { display: flex; align-items: center; justify-content: center; gap: 8%; }
.page-federations .logo-row a { display: block; }
.page-federations .logo-row img { display: block; width: 100%; height: auto; }
.page-federations .logo-cmas { width: 154px; max-width: 30%; }
.page-federations .logo-lifras { width: 252px; max-width: 48%; }

/* Page : inscriptions — tableau des passages de brevet, centré */
.page-inscriptions .calendar { margin-top: 57px; }
.page-inscriptions .calendar-table { margin: 0 auto; max-width: 100%; }

/* Pages « photos et bandeaux » : seules les photos de fond sont propres à chaque page */
.page-lacs .photo-platetaille { background-image: url("../images/lacs_platetaille.jpg"); }
.page-lacs .photo-robertville { background-image: url("../images/lacs_robertville.jpg"); }
.page-lacs .photo-butgenbach { background-image: url("../images/lacs_butgenbach.jpg"); }
.page-epaves .photo-mediterranee { background-image: url("../images/epaves_méditerranée.jpg"); }
.page-epaves .photo-merrouge { background-image: url("../images/epaves_merrouge.jpg"); }
.page-epaves .photo-avion { background-image: url("../images/epaves_avion.jpg"); }
.page-carrieres .photo-lagombe { background-image: url("../images/carrières_lagombe.jpg"); }
.page-carrieres .photo-lille { background-image: url("../images/carrières_lillé.jpg"); }
.page-carrieres .photo-vodelee { background-image: url("../images/carrières_vodelée.jpg"); }
.page-carrieres .photo-autres { background-image: url("../images/carrières_autres.jpg"); }
.page-autres-sorties .photo-nemo { background-image: url("../images/autressorties_nemo.jpg"); }
.page-autres-sorties .photo-ourthe { background-image: url("../images/autressorties_ourthe.jpg"); }
.page-autres-sorties .photo-siegburg { background-image: url("../images/autressorties_siegburg.jpg"); }
.page-mers-oceans .photo-zelande { background-image: url("../images/mersetocéans_zélande.jpg"); }
.page-mers-oceans .photo-mediterranee { background-image: url("../images/mers-océans_méditerranée.jpg"); }
.page-mers-oceans .photo-merrouge { background-image: url("../images/mers-océans_merrouge.jpg"); }
.page-mers-oceans .photo-oceans { background-image: url("../images/mers-océans_océans.jpg"); }

/* Page : activites — intro, bandeau (texte + photo), section, bandeau (photo + texte), section.
   Sur desktop, texte et photo côte à côte (flottants) ; en dessous, la photo passe sous le texte, centrée. */
.page-activites .page-content { position: static; margin-left: 0; width: 100%; }
.page-activites .intro,
.page-activites .section-club,
.page-activites .section-other { margin-left: var(--content-left); width: var(--content-width); }
.page-activites .band .list li::before { color: #FFFFFF; }
@media (min-width: 1001px) {
    .page-activites .band .band-text { float: left; width: 35.29%; }
    .page-activites .band .band-photo { float: right; margin-top: 40px; margin-right: 7%; width: 37.98%; }
    .page-activites .band-second .band-photo { float: left; margin-top: 70px; margin-left: var(--content-left); margin-right: 0; width: 35.29%; }
    .page-activites .band-second .band-photo img { width: 92.41%; }
    .page-activites .band-second .band-text { float: left; margin-left: 1.02%; width: 49.79%; }
}
@media (max-width: 1000px) {
    .page-activites .band-inner { display: flex; flex-direction: column; }
    .page-activites .band-text { order: 1; }
    .page-activites .band-photo { order: 2; width: min(530px, 77%); margin: 24px auto 0; }
}

/* Page : la-plongee — bandeau diaporama (desktop) ou photo fixe, deux blocs de texte, manta animée */
.page-la-plongee .page-content { position: static; margin-top: var(--header-height); margin-left: 0; width: 100%; }
/* Muse plaçait une image de 712 × 70 px à 240 px du haut ; le texte de 58 px est centré au même endroit (246 px). */
.page-la-plongee .hero-title { width: 712px; min-height: 50px; margin-top: 246px; margin-left: 50%; left: -356px; font-size: 48px; line-height: 58px; }
.page-la-plongee .text-block { z-index: 3; margin-top: 22px; margin-left: var(--content-left); width: var(--content-width); }
.page-la-plongee .manta { position: relative; z-index: 1; margin-top: 13px; margin-left: var(--content-left); width: 51.24%; overflow: hidden; }
.page-la-plongee .manta img { display: block; width: 100%; height: auto; }
.page-la-plongee .text-block-second { z-index: 0; margin-top: 7px; }
@media (max-width: 1000px) {
    .page-la-plongee .hero { min-height: 304px; padding-bottom: 496px; }
    .page-la-plongee .hero-bg { background-image: url("../images/laplongée_slidesshow_0002.jpg"); }
    .page-la-plongee .hero-title { width: 700px; left: -350px; }
}
@media (max-width: 700px) {
    .page-la-plongee .hero { min-height: 143px; padding-bottom: 124px; }
    .page-la-plongee .hero-bg { background-image: url("../images/laplongée_slidesshow_0002-u295980-fr.jpg"); }
    .page-la-plongee .hero-title { width: 460px; margin-top: 93px; left: -230px; font-size: 30px; line-height: 36px; }
    .page-la-plongee .text-block { margin-top: 65px; }
    .page-la-plongee .manta { margin-top: 9px; }
    .page-la-plongee .text-block-second { margin-top: 10px; }
}
@media (min-width: 451px) and (max-width: 600px) {
    .page-la-plongee .hero-bg { background-image: url("../images/laplongée_slidesshow_0002-u295980-fr2.jpg"); }
}
@media (max-width: 450px) {
    .page-la-plongee .hero { min-height: 120px; padding-bottom: 70px; }
    .page-la-plongee .hero-bg { background-image: url("../images/laplongée_slidesshow_0002-u295980-fr3.jpg"); }
    .page-la-plongee .hero-title { width: 328px; margin-top: 70px; left: -164px; font-size: 24px; line-height: 29px; }
    .page-la-plongee .text-block { margin-top: 44px; }
    .page-la-plongee .manta { margin-top: 22px; }
    .page-la-plongee .text-block-second { margin-top: 21px; }
}

/* Page : le-club — bandeau diaporama (desktop) ou photo fixe avec logo et titre, intro, bandeau bleu
   (texte + plongeur animé), deux sections */
.page-le-club .page-content { position: static; margin-top: var(--header-height); margin-left: 0; width: 100%; }
.page-le-club .hero-logo { width: 210px; margin-top: 67px; left: -105px; }
.page-le-club .hero-logo img { margin-left: -1px; margin-right: 4px; }
.page-le-club .hero-title { width: 700px; min-height: 50px; margin-top: 54px; margin-left: 50%; left: -340px; font-size: 48px; line-height: 58px; }
.page-le-club .intro { margin-top: 43px; margin-left: var(--content-left); width: var(--content-width); }
.page-le-club .hero.band { margin-top: 0; }
.page-le-club .section-new,
.page-le-club .section-experienced { margin-left: var(--content-left); width: var(--content-width); }
.page-le-club .diver { position: relative; margin-top: var(--section-gap); left: 50.66%; width: 332px; max-width: 49%; overflow: hidden; }
.page-le-club .diver img { display: block; width: 100%; height: auto; }
@media (max-width: 1000px) {
    /* Le padding haut Muse (67 px) est porté par la marge du logo : le fond absolu part du haut du bandeau. */
    .page-le-club .hero { min-height: 800px; padding-bottom: 411px; }
    .page-le-club .hero-bg { background-image: url("../images/leclub_slideshow_0003.jpg"); }
}
@media (max-width: 700px) {
    .page-le-club .hero { min-height: 267px; padding-bottom: 53px; }
    .page-le-club .hero-bg { background-image: url("../images/leclub_slideshow_0003-u295337-fr.jpg"); }
    .page-le-club .hero-logo { width: 130px; margin-top: 22px; left: -64px; }
    .page-le-club .hero-logo img { width: 128px; height: 130px; margin-right: 3px; }
    .page-le-club .hero-title { width: 460px; margin-top: 12px; left: -231px; font-size: 30px; line-height: 36px; }
    .page-le-club .intro { margin-top: 64px; }
    .page-le-club .diver { left: 0; margin-left: auto; margin-right: auto; max-width: 100%; }
}
@media (min-width: 451px) and (max-width: 600px) {
    .page-le-club .hero-bg { background-image: url("../images/leclub_slideshow_0003-u295337-fr2.jpg"); }
}
@media (max-width: 450px) {
    .page-le-club .hero { min-height: 190px; padding-bottom: 7px; }
    .page-le-club .hero-bg { background-image: url("../images/leclub_slideshow_0003-u295337-fr3.jpg"); }
    .page-le-club .hero-logo { width: 101px; left: -51px; }
    .page-le-club .hero-logo img { width: 99px; height: 101px; margin: 0; padding-right: 2px; }
    .page-le-club .hero-title { width: 100%; margin-top: 10px; margin-left: 0; left: 0; font-size: 24px; line-height: 29px; }
    .page-le-club .intro { margin-top: var(--section-gap); }
    .page-le-club .diver { width: 56.45%; }
}

/* Page : galerie-videos — en-tête icône + lien, titre, intro centrée, grille de 10 vidéos */
.page-galerie-videos .page-content { margin-top: 78px; }
.page-galerie-videos .gallery-header { position: relative; min-height: 32px; }
.page-galerie-videos .gallery-icon { position: absolute; top: 0; left: 0; width: 32px; overflow: hidden; }
.page-galerie-videos .gallery-icon img { display: block; }
/* Lien « Vidéos », titre et intro : sans police sur le site Muse (Arial du navigateur) ; ici polices du site. */
.page-galerie-videos .gallery-label { position: absolute; top: 0; left: 47px; min-height: 32px; padding-top: 2px; font-family: var(--font-text); line-height: 24px; text-decoration: none; }
.page-galerie-videos .gallery-title { margin-top: 16px; color: #FFFFFF; font-family: var(--font-menu); font-weight: normal; font-size: 48px; line-height: 58px; text-align: center; text-shadow: 0 0 8px rgba(0, 0, 0, 0.5), 0 0 8px rgba(0, 0, 0, 0.5); }
.page-galerie-videos .gallery-title .accent { color: #93D4E2; }
.page-galerie-videos .gallery-intro { margin-top: var(--section-gap); font-family: var(--font-text); font-size: 20px; line-height: 24px; text-align: center; }
.page-galerie-videos .video-gallery { margin-top: 17px; }
@media (max-width: 700px) {
    .page-galerie-videos .gallery-title { font-size: 30px; line-height: 36px; }
    .page-galerie-videos .gallery-intro { font-size: 18px; line-height: 22px; }
}
@media (max-width: 450px) {
    .page-galerie-videos .page-content { margin-top: 75px; }
    .page-galerie-videos .gallery-title { font-size: 24px; line-height: 29px; }
    .page-galerie-videos .gallery-intro { font-size: 14px; line-height: 17px; }
}

/* Page : photos — liste des albums (bloc écrit à la main sur le site Muse, règles reprises d'albums.css ;
   tailles en em de la police de base 14 px / 17 px). */
.page-photos .page-content { margin: 0; width: 100%; }
/* Groupe Muse vide de 97 px de marge sous les albums (desktop seulement) */
.page-photos .page-content { margin-bottom: 97px; }
.albums {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-top: 75px;
    gap: 20px;
}
.albums h1 {
    margin-top: 50px;
    margin-bottom: 25px;
    font-family: var(--font-menu);
    font-size: 5em;
    color: #FFFFFF;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.75), 0 0 3px rgba(0, 0, 0, 0.75);
}
.album {
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
}
.album h2,
.album h3 {
    width: 100%;
    max-width: 80%;
    font-family: var(--font-menu);
    color: #FFFFFF;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.75), 0 0 3px rgba(0, 0, 0, 0.75);
}
.album h2 { margin-bottom: 20px; font-size: 2.5em; font-weight: bold; }
.album h3 { margin-bottom: 15px; font-size: 2.5em; line-height: 1em; color: #93D4E2; }
/* Image en ligne dans le lien (comme albums.css) : 4 px de descendante sous l'image */
.album img { display: inline; width: 620px; max-width: 100%; height: auto; border-radius: 4px; vertical-align: baseline; }
@media (max-width: 1000px) {
    /* Les copies Muse du bloc sous 1001 px n'ont pas de titre ni de marge basse */
    .albums h1 { display: none; }
    .page-photos .page-content { margin-bottom: 0; }
}
@media (max-width: 700px) {
    .album img { width: 410px; }
}
@media (max-width: 450px) {
    .album { padding: 10px; }
    .album h2,
    .album h3 { max-width: 100%; }
}

/* Pages albums (main.album-page, aucune règle par album) : en-tête « Photos », titre ombré, galerie justifiée. */
.album-page { margin-top: 78px; margin-left: 0; width: var(--content-width); }
.album-page .gallery-header { position: relative; display: flow-root; margin-left: 8.18%; width: 11.46%; min-height: 32px; }
.album-page .gallery-icon { position: absolute; top: 0; left: 0; width: 32px; overflow: hidden; }
.album-page .gallery-icon img { display: block; }
.album-page .gallery-label { position: absolute; top: 0; left: 27.95%; width: 98px; min-height: 32px; padding: 2px 0 0 15px; box-sizing: border-box; font-family: var(--font-text); font-size: 20px; line-height: 24px; text-decoration: none; }
/* Titre (style Muse « Titre-blanc-Grand », sans police donc Arial ; ici Bebas Neue comme les autres bandeaux) :
   48 px blanc centré, ombre portée ; les deux albums les plus récents ont un titre 72 px écrit à la main. */
.album-title { position: relative; width: 100%; min-height: 23px; margin-left: 8.13%; left: -1px; padding: 0; color: #FFFFFF; font-family: var(--font-menu); font-size: 48px; line-height: 58px; text-align: center; text-shadow: 0 0 3px rgba(0, 0, 0, 0.75), 0 0 3px rgba(0, 0, 0, 0.75); }
.album-title .accent { color: #93D4E2; }
.album-title-big { font-size: 72px; line-height: 72px; }
.album-page .tile-gallery { margin-top: 23px; margin-left: 8.09%; width: 100%; }
/* Au-dessus de 701 px, l'espaceur Muse est dans le groupe des commentaires et n'occupe pas de place. */
@media (min-width: 811px) and (max-width: 1000px) {
    .album-page { width: 86%; }
    .album-page .gallery-header { margin-left: 8.26%; width: 14.66%; }
    .album-page .gallery-label { left: 22.23%; }
    .album-title { margin-left: 8.14%; left: 0; }
    .album-page .tile-gallery { margin-left: 8.14%; }
}
@media (min-width: 701px) and (max-width: 810px) {
    .album-page { width: 92.97%; }
    .album-page .gallery-icon { left: 7.57%; }
    .album-page .gallery-label { left: 10.5%; }
    .album-title { width: 92.57%; margin-left: 7.51%; left: 0; }
    .album-page .tile-gallery { width: 92.57%; margin-left: 7.57%; }
}
@media (min-width: 601px) and (max-width: 810px) {
    .album-page .gallery-header { margin-left: 0; width: 100%; }
}
@media (max-width: 700px) {
    .album-page .gallery-label { top: 4px; width: 70px; min-height: 21px; padding: 0 0 0 10px; font-size: 18px; line-height: 22px; }
    .album-title { margin-top: 3px; font-size: 30px; line-height: 36px; }
    .album-title-big { font-size: 45px; line-height: 45px; }
    .album-page .tile-gallery { margin-top: 25px; }
}
@media (min-width: 601px) and (max-width: 700px) {
    .album-page { width: 94.29%; }
    .album-page .gallery-icon { left: 6.07%; }
    .album-page .gallery-label { left: 11.97%; }
    .album-title { width: 93.94%; margin-left: 6.07%; left: 0; }
    .album-page .tile-gallery { width: 93.94%; margin-left: 6.07%; }
}
@media (min-width: 451px) and (max-width: 600px) {
    .album-page { width: 88.67%; }
    .album-page .gallery-header { margin-left: 6.4%; width: 19.37%; }
    .album-page .gallery-label { left: 32.04%; }
    .album-title { width: 99.82%; margin-left: 6.49%; left: 0; }
    .album-page .tile-gallery { width: 99.82%; margin-left: 6.4%; }
}
@media (max-width: 450px) {
    .album-page { margin-top: 75px; width: 91.56%; }
    .album-page .gallery-header { margin-left: 4.62%; width: 33.5%; }
    .album-page .gallery-label { top: 6px; left: 28.99%; width: 71.02%; min-height: 20px; padding: 0 0 0 5px; font-size: 14px; line-height: 17px; }
    .album-title { margin-top: 22px; width: 99.76%; margin-left: 4.74%; left: 1px; font-size: 24px; line-height: 29px; }
    .album-title-big { font-size: 36px; line-height: 36px; }
    .album-page .tile-gallery { margin-top: 21px; margin-left: 4.62%; }
}

/* Page : contacts — page écrite à la main sur le site Muse (styles/style.css) ; contenu repris tel quel,
   header et footer communs. Colonne blanche pleine largeur, cartes de contact en flex. */
/* 62 px = hauteur du header fixe ; interligne « normal » comme sur la page d'origine. */
.page-contacts .page-content { display: flex; flex-direction: column; margin-top: var(--header-height); margin-left: 0; width: 100%; background: #FFFFFF; line-height: normal; }
.page-contacts .footer-spacer { background: #FFFFFF; }
.contacts-title { margin: 0; font-family: var(--font-menu); font-weight: 400; font-size: 48px; text-align: center; }
.contacts-address { margin: 10px; font-family: var(--font-text); font-size: 20px; text-align: center; }
.contacts-map { width: 90%; height: 300px; margin-bottom: 25px; align-self: center; border: 0; }
.contact-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; width: 100%; }
.contact-list-last { margin-bottom: 20px; }
.contact-card { text-align: center; }
.contact-photo { display: inline-block; width: 150px; height: 200px; margin: 10px; border: 1px solid #29ABE2; }
.contact-role, .contact-name, .contact-level, .contact-phone { margin: 2px; font-family: Arial, sans-serif; font-size: 14px; color: #3598DB; }
.contact-role { font-weight: bold; color: #0071BC; }
@media (max-width: 860px) {
    .contact-card { flex: 1 1 calc(33.33% - 20px); }
}
@media (max-width: 768px) {
    .contact-card { flex: 1 1 calc(50% - 20px); }
}
@media (max-width: 600px) {
    .contacts-title { font-size: 36px; }
    .contacts-address { font-size: 18px; }
}

/* ==================================================
   Page : index (accueil)
   --------------------------------------------------
   Menu dans le flux (pas de bandeau fixe), logo et titre centrés sur la photo de fond, puis la colonne
   commune sur un voile gris, sections dans l'ordre de lecture : bienvenue, diaporama, « Belgique » (texte,
   trois cartes rondes, plongeur), bandeau bleu « cours » (texte, trois cartes, texte « piscine »),
   « sorties » (texte et plongeur, diaporama), « et vous ? », bandeau bleu LIFRAS (texte, logos).
   Trois largeurs : ordinateur (≥ 1001 px), tablette (601–1000, blocs empilés, cartes en ligne), mobile
   (≤ 600, cartes « photo rectangulaire + texte » en alternance gauche / droite).
   ================================================== */
/* Photo de fond calée sur la largeur (2 370 px au moins, soit 3 700 px de haut) et non sur la hauteur de page :
   la ligne d'eau, à 24,5 % de la photo, garde la même place quel que soit le contenu. Le bloc gris commence
   sur cette ligne (--home-sky = hauteur du ciel) ; sous la photo, la couleur de son bas. */
body.page-index { background: #A1C8AC url("../images/background.jpg") no-repeat center top; background-size: max(100%, 2370px) auto; }
.page-index { --home-sky: calc(max(100vw, 2370px) * 0.3825); }
.page-index .site-header { position: relative; height: 48px; min-height: 0; background: none; }
.page-index .mobile-logo,
.page-index .mobile-title { display: none; }
.page-index .page-content { margin-top: 0; padding-bottom: 0; }

/* Logo et titre sur le ciel */
.home-logo { width: 205px; margin: 79px auto 0; }
.home-logo img { display: block; width: 100%; height: auto; }
.home-title { margin: 23px 0 0; color: #FFFFFF; font-family: var(--font-menu); font-weight: 400; font-size: 48px; line-height: 58px; text-align: center; text-shadow: 0 0 8px rgba(0, 0, 0, 0.5), 0 0 8px rgba(0, 0, 0, 0.5); }
.home-title .accent { color: #93D4E2; }

/* Colonne sur voile gris (Muse : bloc #7F7F7F à 25 %) ; les sections se suivent à --section-gap */
.home-collage { margin-top: calc(var(--home-sky) - 416px); padding-top: 23px; background: rgba(127, 127, 127, 0.25); }   /* 416 = menu, logo et titre */
.home-collage > * + * { margin-top: var(--section-gap); }
.home p + p { margin-top: 1lh; }   /* une ligne vide entre paragraphes, comme Muse */

.home-welcome { padding: 0 1.6%; color: #FFFFFF; font-family: var(--font-title); font-weight: 900; font-size: 24px; line-height: 29px; text-align: center; }
.home-text { color: #FFFFFF; font-family: var(--font-text); font-size: 20px; line-height: 24px; }

/* Diaporamas à hauteur fixe (les diapositives sont absolues : la hauteur vient du rapport) */
.home-slideshow-1 { aspect-ratio: 3 / 1; max-height: 400px; }
.home-slideshow-2 { aspect-ratio: 4 / 3; max-height: 400px; }

/* Sections sur le voile et bandeaux bleus */
.home-section { padding: 0 1.6%; }
.home-band { padding: 17px 1.7% 18px; background: #3598DB; }

.home-belgique { display: grid; grid-template-columns: 37% 1fr; column-gap: 3%; align-items: start; }
.home-belgique .home-cards { padding-left: 4%; }
.home-belgique .home-diver { grid-column: 1 / -1; width: min(547px, 46%); margin: 20px 0 0 42%; }

.home-band-cours { display: grid; grid-template-columns: 56% 1fr; column-gap: 3%; row-gap: 40px; align-items: start; }
.home-band-cours .home-text-moniteurs { grid-column: 1 / -1; }
.home-band-cours .home-text-piscine { margin-top: 18px; }

.home-sorties { display: grid; grid-template-columns: 1fr 44.2%; column-gap: 3%; }
.home-sorties-text { display: flex; flex-direction: column; justify-content: space-between; }
.home-sorties .home-diver { width: min(517px, 100%); margin-top: 24px; }

.home-text-vous { padding: 0 1.6%; }

.home-band-lifras { display: flex; align-items: center; gap: 4%; }
.home-band-lifras .home-text { flex: 1 1 auto; }
.home-logos { display: flex; align-items: center; justify-content: space-between; flex: 0 0 42%; }
.home-logos img { display: block; height: auto; }
.home-logo-lifras { width: 202px; }
.home-logo-cmas { width: 95px; }

/* Cartes : photo ronde, libellé, bouton « Plus » (dessiné en CSS ; Muse l'exportait en 96 PNG) */
.home-cards { display: flex; justify-content: space-between; gap: 4%; }
.home-card { flex: 0 1 27%; text-align: center; }
.card-photo { width: 80%; margin: 0 auto; border-radius: 50%; overflow: hidden; }
.card-photo img { display: block; width: 100%; height: auto; }
.card-label { margin: 15px 0 0; color: #FFFFFF; font-family: var(--font-menu); font-weight: 400; font-size: 30px; line-height: 36px; text-transform: uppercase; }
.card-more { display: inline-block; min-width: 80px; margin-top: 16px; padding: 8px 12px; box-sizing: border-box; border-radius: 3px; background: linear-gradient(#FCED20, #FAB039); color: #4E4E4E; font: 14px/1 "Times New Roman", Times, serif; text-decoration: none; }
.home .card-more:link, .home .card-more:visited { color: #4E4E4E; text-decoration: none; }
.home .card-more:hover, .home .card-more:active { color: #FFFFFF; background: linear-gradient(#EE8400, #E84C3A); text-decoration: none; }

.home-diver img { display: block; width: 100%; height: auto; }

@media (min-width: 1001px) {
    .page-index .menu > li > a { padding: 4px 0; font-size: 22px; line-height: 26px; }
}

/* Tablette : blocs empilés, cartes en ligne */
@media (max-width: 1000px) {
    .home-logo { width: 177px; margin-top: 65px; }
    .home-collage { margin-top: calc(var(--home-sky) - 371px); }
    .home-welcome { font-size: 18px; line-height: 22px; }
    .home-text { font-size: 18px; line-height: 22px; }
    .home-slideshow-1 { aspect-ratio: 2 / 1; }
    .home-slideshow-2 { aspect-ratio: 2 / 1; max-height: none; }
    .home-belgique,
    .home-band-cours,
    .home-sorties { display: block; }
    .home-belgique .home-cards,
    .home-band-cours .home-cards { justify-content: space-around; margin-top: 30px; padding: 0; }
    .home-card { flex: 0 1 24%; }
    .home-band-cours .home-text-piscine { margin-top: 30px; }
    .home-belgique .home-diver { width: min(339px, 40%); margin: 16px 0 0 55%; }
    .home-sorties .home-slideshow-2 { margin-top: 24px; }
    .home-sorties .home-diver { width: min(295px, 40%); margin: 20px 0 0 10%; }
    .card-label { font-size: 24px; line-height: 29px; }
    .home-logo-lifras { width: 141px; }
    .home-logo-cmas { width: 66px; }
}

@media (max-width: 600px) {
    .page-index .site-header { height: var(--header-height); min-height: var(--header-height); }
    .home-logo { width: 145px; margin-top: 86px; }
    .home-title { margin-top: 20px; font-size: 36px; line-height: 44px; }
    .home-collage { margin-top: calc(var(--home-sky) - 360px); }
    .home-welcome { font-size: 14px; line-height: 17px; }
    .home-text { font-size: 14px; line-height: 17px; }
    .home-band { padding: 13px 1.7% 20px; }
    /* Cartes : photo rectangulaire et texte côte à côte, photo à gauche puis à droite en alternance */
    .home-cards { display: block; }
    .home-card { display: flex; align-items: center; gap: 4%; }
    .home-card:nth-child(even) { flex-direction: row-reverse; }
    .home-card + .home-card { margin-top: 24px; }
    .card-photo { flex: 0 0 70%; height: 125px; margin: 0; border-radius: 0; }
    .card-photo img { height: 100%; object-fit: cover; }
    .card-text { flex: 1 1 auto; }
    .card-label { margin-top: 0; font-size: 18px; line-height: 22px; }
    .card-more { display: block; min-width: 0; margin-top: 8px; padding: 6px 4px; }
    .home-belgique .home-diver { width: 179px; margin: 20px 0 0 41%; }
    .home-sorties .home-diver { width: 169px; margin: 20px 0 0 31%; }
    .home-band-lifras { display: block; }
    .home-logos { justify-content: space-around; width: 70%; margin: 16px auto 0; }
    .home-logo-lifras { width: 112px; }
    .home-logo-cmas { width: 54px; }
}