/*
 * 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: 6.96%;          /* colonne de texte du master « pages » : retrait et largeur */
    --content-width: 86.02%;
    /* 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;
}

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";
}

/* min-height du #page Muse (box-sizing border-box) : n'agit que sur la hauteur du document. */
body {
    min-height: var(--page-min-height, 714px);
}

@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 (styles de paragraphe Muse)
   ================================================== */

.title {
    font-family: var(--font-title);
    font-size: 24px;
    line-height: 29px;
    font-weight: 700;
    text-decoration: underline;
    margin-bottom: 17px;   /* ligne vide de 17 px qui suivait chaque titre dans Muse */
}

.text {
    font-family: var(--font-text);
    font-size: 20px;
    line-height: 24px;
    font-weight: 400;
}

@media (min-width: 451px) and (max-width: 700px) {
    .title { font-size: 20px; line-height: 24px; }
    .text { font-size: 18px; line-height: 22px; }
}

@media (max-width: 450px) {
    .title { font-size: 16px; line-height: 19px; }
    .text { font-size: 14px; line-height: 17px; }
}

/* Variantes fixes (ne changent pas avec la largeur), déclarées après les media queries pour l'emporter. */
.title.lato { font-family: var(--font-text); }
.text-medium { font-family: var(--font-text); font-size: 18px; line-height: 22px; font-weight: 400; }

/* ==================================================
   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;
    }

    .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
   ================================================== */

/*
 * Muse calcule en JavaScript la hauteur d'un espaceur placé avant le footer :
 *   - le footer touche le bas de la fenêtre quand le contenu est court ;
 *   - sinon il suit le contenu (espaceur de 1 px) ;
 *   - si la page resterait plus courte que son min-height, l'espaceur reprend
 *     sa hauteur de conception (le footer retrouve sa position de conception).
 * Une colonne flex donne les deux premiers cas ; le troisième est appliqué
 * par site.js car il dépend de la hauteur réelle du contenu. Le min-height du
 * #page Muse, lui, n'agit que sur la hauteur du document (espace sous le footer) :
 * il est porté par body.
 *   --page-min-height  min-height du #page Muse
 *   --spacer-above     data-content-above-spacer Muse (hauteur de conception du contenu, lue par site.js)
 *   --spacer-min       min-height de l'espaceur Muse quand il diffère de 1 px
 * Ces variables sont définies par page (section « Pages » en fin de fichier).
 */
.page {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: var(--page-max-width);
    min-height: 100vh;
    margin: 0 auto;
}

/* Colonne de texte du master « pages ». Marges hautes et hauteurs minimales des sections : voir chaque page. */
.page-content {
    position: relative;
    z-index: 27;
    margin-left: var(--content-left);
    width: var(--content-width);
    padding-bottom: 30px;   /* espace avant le footer (espaceur fluide Muse, ~30 px à 1380 px) */
}

.text-block {
    position: relative;
}

/* 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;
}

.band .title,
.band .text {
    color: #FFFFFF;
}

/* Liens jaunes sur fond bleu (style Muse « Hyperliens Jaunes ») */
.yellow-links a:link { color: var(--color-yellow); text-decoration: none; }
.yellow-links a:visited { color: #F7931E; text-decoration: none; }
.yellow-links a:hover { color: #FBB03B; text-decoration: underline; }
.yellow-links 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;
}

/* Cible d'ancre invisible, placée à la position de conception Muse (voir chaque page).
   Positionnée par rapport au body : la page commence en haut du document. */
.anchor {
    position: absolute;
    width: 22px;
    height: 18px;
}

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

/* ==================================================
   Mise en page « photos et bandeaux » (pages Lacs, Épaves)
   --------------------------------------------------
   intro → bandeau bleu (texte + photo) → rangée (photo + texte) → bandeau bleu.
   Géométrie horizontale commune ici ; marges et hauteurs propres à chaque page
   dans la section « Pages ».
   ================================================== */

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

.photo-layout .intro-wrap { width: 93.05%; }
.photo-layout .intro { margin-top: 3px; left: 7.56%; width: 92.45%; min-height: 110px; }
.photo-layout .band-text { position: relative; left: var(--content-left); width: 50.73%; min-height: 110px; }
.photo-layout .band-second .band-text { left: 7.03%; }
.photo-layout .band-photo { position: absolute; left: 59.5%; width: 32.4%; height: 238px; }
.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: 0; left: 0; width: 37.66%; height: 238px; }
.photo-layout .photo-row-text { position: relative; left: 41.79%; width: 58.22%; min-height: 110px; }

/* Sous 1001 px, chaque photo passe sous son texte, centrée (407 × 238). */
@media (max-width: 1000px) {
    .photo-layout .band-photo,
    .photo-layout .photo-row-photo { position: relative; top: 0; left: -204px; width: 407px; height: 238px; margin-left: 50%; }
    .photo-layout .band-text,
    .photo-layout .band-second .band-text { margin-top: 0; left: 6.5%; width: 87%; }
    .photo-layout .photo-row { display: flex; flex-direction: column; margin-top: 0; margin-left: 0; width: 100%; min-height: 0; }
    .photo-layout .photo-row-text { order: 1; left: 0; margin-left: 6.51%; width: 87%; }
    .photo-layout .photo-row-photo { order: 2; }
}
@media (min-width: 811px) and (max-width: 1000px) {
    .photo-layout .intro-wrap { width: 93.5%; }
    .photo-layout .intro { left: var(--content-left); width: 93.05%; }
}
@media (min-width: 701px) and (max-width: 810px) {
    .photo-layout .intro-wrap { width: 93.46%; }
    .photo-layout .intro { left: 7.01%; width: 93.14%; }
    .photo-layout .band-text,
    .photo-layout .band-second .band-text { left: 6.55%; width: 87.04%; }
    .photo-layout .photo-row-text { margin-left: 6.55%; width: 87.04%; }
}
@media (min-width: 601px) and (max-width: 700px) {
    .photo-layout .intro-wrap { width: 94.29%; }
    .photo-layout .intro { left: 6.07%; width: 93.94%; }
    .photo-layout .band-text,
    .photo-layout .band-second .band-text { left: 5.72%; width: 88.58%; }
    .photo-layout .photo-row-text { margin-left: 5.72%; width: 88.58%; }
}
@media (min-width: 451px) and (max-width: 600px) {
    .photo-layout .intro { margin-top: 0; left: 0; margin-left: 5.67%; width: 88.5%; }
    .photo-layout .band-text,
    .photo-layout .band-second .band-text { left: 5.67%; width: 88.5%; }
    .photo-layout .photo-row-text { margin-left: 5.67%; width: 88.5%; }
}
@media (max-width: 600px) {
    .page-content.photo-layout { margin-top: 91px; }
    .photo-layout .intro-wrap { width: 100%; }
}
@media (max-width: 450px) {
    .photo-layout .intro { margin-top: 0; left: 0; margin-left: 4.23%; width: 91.56%; }
    .photo-layout .band-text,
    .photo-layout .band-second .band-text { left: 4.23%; width: 91.56%; }
    /* Photos fluides : hauteur proportionnelle à la largeur (238 / 412 en conception). */
    .photo-layout .band-photo,
    .photo-layout .photo-row-photo { left: 4.23%; margin-left: 0; width: 91.56%; height: auto; aspect-ratio: 1 / 0.57767; }
    .photo-layout .photo-row-text { margin-left: 4.23%; width: 91.56%; }
    .photo-layout .photo-row-photo { left: 0; margin-left: 4.23%; }
}

/* Espaceur qui pousse le footer en bas de la fenêtre (1 px minimum, ou --spacer-min si la page en définit un). */
.footer-spacer {
    flex: 1 1 auto;
    min-height: var(--spacer-min, 1px);
}

@media (min-width: 811px) and (max-width: 1000px) {
    .page { padding-bottom: 1px; max-width: 1000px; }
    .page-content { margin-left: 7.01%; width: 86%; }
}

@media (min-width: 701px) and (max-width: 810px) {
    .page { max-width: 810px; }
    .page-content { margin-left: 0; width: 92.97%; }
    .text-block { left: 7.57%; width: 92.57%; }
    .text-block + .text-block { left: 0; margin-left: 7.44%; }
}

@media (min-width: 601px) and (max-width: 700px) {
    .page { max-width: 700px; }
    .page-content { margin-left: 0; width: 94.29%; }
    .text-block { left: 6.07%; width: 93.94%; }
    .text-block + .text-block { left: 0; margin-left: 6.07%; }
}

@media (min-width: 451px) and (max-width: 600px) {
    .page { max-width: 600px; }
    .page-content { margin-left: 5.67%; width: 88.5%; }
}

@media (max-width: 450px) {
    .page { max-width: 450px; }
    .page-content { margin-left: 4.23%; width: 91.34%; }
}

/* ==================================================
   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 § 6) ;
   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;
}

.tile-overlay {
    position: absolute;
    inset: 0;
    background: #000000;
    opacity: 0;
    z-index: 3;
    transition: opacity 0.3s;
}

.tile:hover .tile-overlay { opacity: 0.4; }

.tile-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 38px;
    height: 38px;
    margin: -19px 0 0 -19px;
    background: url("../images/gallery/icon-zoom32.png") no-repeat 0 0;
    opacity: 0;
    z-index: 6;
    transition: opacity 0.3s;
}

.tile:hover .tile-icon { opacity: 1; }
.tile-icon:hover { background-position: 0 -38px; }

.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;
}

.photo-lightbox-prev { left: 10px; background-image: url("../images/gallery/lightbox-arrow-left.png"); }
.photo-lightbox-next { right: 10px; background-image: url("../images/gallery/lightbox-arrow-right.png"); }
.photo-lightbox-prev:hover,
.photo-lightbox-next:hover { background-position: 0 -55px; }

.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 § 11)
   --------------------------------------------------
   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
   --------------------------------------------------
   Par page : hauteur minimale Muse (--page-min-height), marge haute de la colonne, hauteurs
   minimales et marges des sections, marge de l'espaceur fluide.
   ================================================== */

/* Page : cours */
.page-cours { --page-min-height: 714px; --spacer-above: 609px; }
.page-cours .page-content { margin-top: 85px; }
.page-cours .text-block { min-height: 110px; }
.page-cours .text-block + .text-block { margin-top: 56px; min-height: 201px; }
@media (min-width: 811px) and (max-width: 1000px) {
    .page-cours { --page-min-height: 713px; --spacer-above: 686px; }
}
@media (min-width: 701px) and (max-width: 810px) {
    .page-cours { --spacer-above: 754px; }
}
@media (min-width: 601px) and (max-width: 700px) {
    .page-cours { --page-min-height: 800px; --spacer-above: 701px; }
}
@media (min-width: 451px) and (max-width: 700px) {
    .page-cours .page-content { margin-top: 83px; }
    .page-cours .text-block + .text-block { margin-top: 22px; min-height: 261px; }
}
@media (min-width: 451px) and (max-width: 600px) {
    .page-cours { --page-min-height: 800px; --spacer-above: 723px; }
}
@media (max-width: 450px) {
    .page-cours { --page-min-height: 712px; --spacer-above: 599px; }
    .page-cours .text-block + .text-block { margin-top: 20px; min-height: 110px; }
}

/* Page : visite-medicale */
.page-visite-medicale { --page-min-height: 753px; --spacer-above: 902px; }
.page-visite-medicale .page-content { margin-top: 92px; }
.page-visite-medicale .text-block { min-height: 322px; }
.page-visite-medicale .text-block + .text-block { margin-top: 37px; min-height: 254px; }
@media (min-width: 811px) and (max-width: 1000px) {
    .page-visite-medicale { --page-min-height: 752px; --spacer-above: 918px; }
}
@media (min-width: 701px) and (max-width: 810px) {
    .page-visite-medicale { --spacer-above: 938px; }
    .page-visite-medicale .text-block { margin-top: 4px; }
}
@media (min-width: 601px) and (max-width: 810px) {
    .page-visite-medicale .page-content { margin-top: 88px; }
}
@media (min-width: 601px) and (max-width: 700px) {
    .page-visite-medicale { --page-min-height: 1012px; --spacer-above: 952px; }
    .page-visite-medicale .text-block { margin-top: 4px; min-height: 365px; }
}
@media (min-width: 451px) and (max-width: 700px) {
    .page-visite-medicale .text-block + .text-block { margin-top: 25px; min-height: 310px; }
}
@media (min-width: 451px) and (max-width: 600px) {
    .page-visite-medicale { --page-min-height: 1012px; --spacer-above: 971px; }
    .page-visite-medicale .text-block { min-height: 365px; }
}
@media (max-width: 450px) {
    .page-visite-medicale { --spacer-above: 705px; }
    .page-visite-medicale .text-block { min-height: 302px; }
    .page-visite-medicale .text-block + .text-block { margin-top: 20px; min-height: 201px; }
}

/* Page : entrainements — la colonne n'a pas de marge gauche, les blocs en ont une (structure Muse). */
.page-entrainements { --page-min-height: 1342px; --spacer-above: 1264px; }
.page-entrainements .page-content { margin-top: 97px; margin-left: 0; }
.page-entrainements .text-block { margin-left: 8.09%; width: 100%; min-height: 279px; }
.page-entrainements .page-image { width: 620px; margin-top: 34px; margin-left: 58.13%; left: -312px; }
.page-entrainements .text-block + .text-block,
.page-entrainements .page-image + .text-block { margin-top: 34px; min-height: 443px; }
@media (min-width: 811px) and (max-width: 1000px) {
    .page-entrainements { --page-min-height: 1341px; --spacer-above: 1266px; }
    .page-entrainements .text-block { margin-left: 8.14%; }
    .page-entrainements .page-image { margin-left: 58.14%; left: -310px; }
}
@media (min-width: 701px) and (max-width: 810px) {
    .page-entrainements { --spacer-above: 1310px; }
    .page-entrainements .text-block { margin-top: 9px; margin-left: 0; width: 92.57%; }
    .page-entrainements .page-image { margin-left: 53.79%; left: -311px; }
    .page-entrainements .page-image + .text-block { margin-top: 34px; left: 0; margin-left: 7.44%; }
}
@media (min-width: 601px) and (max-width: 810px) {
    .page-entrainements .page-content { margin-top: 88px; }
}
@media (min-width: 601px) and (max-width: 700px) {
    .page-entrainements { --page-min-height: 1370px; --spacer-above: 1283px; }
    .page-entrainements .text-block { margin-top: 9px; margin-left: 0; width: 93.94%; }
    .page-entrainements .page-image { width: 93.94%; margin-left: 6.07%; left: 0; }
    .page-entrainements .page-image + .text-block { margin-top: 34px; left: 0; margin-left: 6.07%; min-height: 463px; }
}
@media (max-width: 700px) {
    .page-entrainements .page-image img { width: 100%; height: auto; }
}
@media (min-width: 451px) and (max-width: 600px) {
    .page-entrainements { --page-min-height: 1370px; --spacer-above: 1314px; }
    .page-entrainements .page-content { margin-left: 5.67%; width: 88.67%; }
    .page-entrainements .text-block { margin-left: 0; width: 99.82%; }
    .page-entrainements .page-image { width: 99.82%; margin-left: 0; left: 0; }
    .page-entrainements .page-image + .text-block { margin-top: 35px; min-height: 463px; }
}
@media (max-width: 450px) {
    .page-entrainements { --page-min-height: 753px; --spacer-above: 1122px; }
    .page-entrainements .page-content { margin-left: 4.23%; width: 91.56%; }
    .page-entrainements .text-block { margin-left: 0.25%; width: 99.76%; }
    .page-entrainements .page-image { width: 100%; margin-top: 26px; margin-left: 0; left: 0; }
    .page-entrainements .page-image + .text-block { margin-top: 27px; margin-left: 0; width: 100%; min-height: 434px; }
}

/* Page : federations */
.page-federations { --page-min-height: 1253px; --spacer-above: 1070px; --spacer-min: 61px; }
.page-federations .page-content { padding-bottom: 61px; }
.page-federations .page-content { margin-top: 85px; margin-left: 7.03%; }
.page-federations .text-block { min-height: 726px; }
.page-federations .logo-row { position: relative; width: 736px; margin-top: 31px; margin-left: 18.2%; }
.page-federations .logo-row a { display: block; overflow: hidden; }
.page-federations .logo-cmas { width: 154px; }
.page-federations .logo-lifras { position: absolute; top: 39px; left: 65.77%; width: 252px; }
@media (min-width: 811px) and (max-width: 1000px) {
    .page-federations { --page-min-height: 1252px; --spacer-above: 1062px; --spacer-min: 69px; }
    .page-federations .page-content { margin-left: 7.01%; }
    .page-federations .logo-row { width: 603px; margin-left: 18.14%; }
    .page-federations .logo-lifras { left: 58.21%; }
}
@media (min-width: 701px) and (max-width: 810px) {
    .page-federations { --spacer-above: 1156px; --spacer-min: 1px; }
    .page-federations .logo-row { width: 536px; margin-left: 24.31%; }
    .page-federations .logo-lifras { left: 52.99%; }
}
@media (min-width: 601px) and (max-width: 810px) {
    .page-federations .page-content { margin-left: 0; }
}
@media (min-width: 601px) and (max-width: 700px) {
    .page-federations { --page-min-height: 1214px; --spacer-above: 1099px; --spacer-min: 1px; }
    .page-federations .logo-row { width: 87.88%; margin-top: 48px; margin-left: 9.1%; }
    .page-federations .logo-lifras { top: 20px; left: 56.56%; width: 43.45%; }
}
@media (max-width: 700px) {
    .page-federations .text-block { min-height: 110px; }
    .page-federations .logo-row img { width: 100%; height: auto; }
}
@media (min-width: 451px) and (max-width: 700px) {
    .page-federations .logo-cmas { width: 26.56%; }
}
@media (min-width: 451px) and (max-width: 600px) {
    .page-federations { --page-min-height: 1214px; --spacer-above: 1114px; --spacer-min: 1px; }
    .page-federations .page-content { margin-left: 5.67%; }
    .page-federations .logo-row { width: 93.6%; margin-top: 48px; margin-left: 3.21%; }
    .page-federations .logo-lifras { top: 20px; left: 56.54%; width: 43.47%; }
}
@media (max-width: 450px) {
    .page-federations { --page-min-height: 1015px; --spacer-above: 906px; --spacer-min: 1px; }
    .page-federations .page-content { margin-left: 4.45%; }
    .page-federations .logo-row { width: 89.54%; margin-top: 28px; margin-left: 4.87%; }
    .page-federations .logo-cmas { width: 31.8%; }
    .page-federations .logo-lifras { top: 34px; left: 54.35%; width: 45.66%; }
}

/* Page : brevets */
.page-brevets { --page-min-height: 1344px; --spacer-above: 1266px; }
.page-brevets .page-content { margin-top: 84px; }
.page-brevets .text-block { min-height: 110px; }
.page-brevets .text-block + .text-block { margin-top: 56px; }
@media (min-width: 811px) and (max-width: 1000px) {
    .page-brevets { --page-min-height: 1343px; --spacer-above: 1329px; }
}
@media (min-width: 701px) and (max-width: 810px) {
    .page-brevets { --spacer-above: 1421px; }
    .page-brevets .text-block + .text-block + .text-block { margin-left: 7.57%; }
}
@media (min-width: 601px) and (max-width: 700px) {
    .page-brevets { --page-min-height: 1351px; --spacer-above: 1315px; }
}
@media (min-width: 451px) and (max-width: 700px) {
    .page-brevets .text-block + .text-block { margin-top: 37px; }
    .page-brevets .text-block + .text-block + .text-block { margin-top: 38px; }
}
@media (min-width: 451px) and (max-width: 600px) {
    .page-brevets { --page-min-height: 1351px; --spacer-above: 1398px; }
}
@media (max-width: 450px) {
    .page-brevets { --page-min-height: 1128px; --spacer-above: 1128px; }
    .page-brevets .text-block + .text-block { margin-top: 30px; }
}

/* Page : inscriptions */
.page-inscriptions { --page-min-height: 753px; --spacer-above: 1356px; }
.page-inscriptions .page-content { margin-top: 92px; }
.page-inscriptions .text-block { min-height: 283px; }
.page-inscriptions .text-block + .text-block { margin-top: 25px; min-height: 106px; }
.page-inscriptions .text-block + .text-block + .text-block { margin-top: 26px; min-height: 237px; }
.page-inscriptions .text-block + .text-block + .text-block + .text-block { margin-top: 25px; min-height: 116px; }
.page-inscriptions .calendar { position: relative; min-height: 85px; margin-top: 111px; width: 61.5%; margin-left: 28.31%; }
@media (min-width: 811px) and (max-width: 1000px) {
    .page-inscriptions { --page-min-height: 752px; --spacer-above: 1404px; }
    .page-inscriptions .calendar { width: 61.52%; margin-left: 28.26%; }
}
@media (min-width: 701px) and (max-width: 810px) {
    .page-inscriptions { --spacer-above: 1496px; }
    .page-inscriptions .page-content { margin-top: 88px; }
    .page-inscriptions .text-block { margin-top: 4px; }
    .page-inscriptions .text-block + .text-block + .text-block { margin-top: 25px; margin-left: 7.57%; }
    .page-inscriptions .text-block + .text-block + .text-block + .text-block { margin-top: 26px; margin-left: 7.44%; }
    .page-inscriptions .calendar { margin-top: 110px; width: 56.84%; margin-left: 33.74%; }
}
@media (min-width: 601px) and (max-width: 700px) {
    .page-inscriptions { --spacer-above: 1393px; }
    /* Muse élargissait la colonne à 117,72 % (débordement) : on garde la colonne commune, qui donne la
       même largeur de texte, et le tableau s'aligne à 13,43 % de la fenêtre comme chez Muse. */
    .page-inscriptions .page-content { margin-top: 88px; }
    .page-inscriptions .text-block { margin-top: 4px; }
    .page-inscriptions .calendar { margin-top: 57px; width: 85.76%; margin-left: 14.24%; }
}
@media (min-width: 451px) and (max-width: 700px) {
    .page-inscriptions .text-block + .text-block { margin-top: 12px; min-height: 123px; }
    .page-inscriptions .text-block + .text-block + .text-block { margin-top: 11px; min-height: 233px; }
    .page-inscriptions .text-block + .text-block + .text-block + .text-block { margin-top: 15px; min-height: 202px; }
}
@media (min-width: 451px) and (max-width: 600px) {
    .page-inscriptions { --spacer-above: 1432px; }
    .page-inscriptions .calendar { margin-top: 57px; width: 91.33%; margin-left: 8.67%; }
}
@media (max-width: 450px) {
    .page-inscriptions { --spacer-above: 1235px; }
    .page-inscriptions .page-content { margin-top: 87px; width: 91.56%; }
    .page-inscriptions .text-block { width: 99.76%; }
    .page-inscriptions .text-block + .text-block { margin-top: 12px; min-height: 100px; margin-left: 0.25%; }
    .page-inscriptions .text-block + .text-block + .text-block { margin-top: 11px; min-height: 183px; }
    .page-inscriptions .text-block + .text-block + .text-block + .text-block { margin-top: 12px; min-height: 100px; margin-left: 0; }
    .page-inscriptions .calendar { min-height: 110px; margin-top: 80px; width: 99.76%; margin-left: 0.25%; }
}

/* Page : cotisation — sections numérotées par :nth-of-type (la 4e est la note finale) */
.page-cotisation { --page-min-height: 753px; --spacer-above: 1570px; }
.page-cotisation .page-content { margin-top: 80px; }
.page-cotisation .text-block:nth-of-type(1) { min-height: 540px; }
.page-cotisation .text-block:nth-of-type(2) { margin-top: 36px; min-height: 305px; }
.page-cotisation .text-block:nth-of-type(3) { margin-top: 19px; min-height: 412px; }
.page-cotisation .text-block:nth-of-type(4) { margin-top: 84px; min-height: 65px; }
@media (min-width: 811px) and (max-width: 1000px) {
    .page-cotisation { --page-min-height: 752px; --spacer-above: 1638px; }
}
@media (min-width: 701px) and (max-width: 810px) {
    .page-cotisation { --spacer-above: 1778px; }
}
@media (min-width: 601px) and (max-width: 700px) {
    .page-cotisation { --spacer-above: 1629px; }
}
@media (min-width: 451px) and (max-width: 700px) {
    .page-cotisation .text-block:nth-of-type(1) { min-height: 314px; }
    .page-cotisation .text-block:nth-of-type(2) { margin-top: 20px; min-height: 281px; }
    .page-cotisation .text-block:nth-of-type(3) { min-height: 507px; }
    .page-cotisation .text-block:nth-of-type(4) { margin-top: 18px; min-height: 84px; }
}
@media (min-width: 451px) and (max-width: 600px) {
    .page-cotisation { --spacer-above: 1709px; }
}
@media (max-width: 450px) {
    /* Muse : 91,56 % de large sur cette page (91,34 % ailleurs), ce qui change les retours à la ligne */
    .page-cotisation .page-content { width: 91.56%; }
    .page-cotisation { --spacer-above: 1400px; }
    .page-cotisation .page-content { margin-top: 81px; }
    .page-cotisation .text-block:nth-of-type(1) { min-height: 274px; }
    .page-cotisation .text-block:nth-of-type(2) { margin-top: 20px; min-height: 226px; }
    .page-cotisation .text-block:nth-of-type(3) { margin-top: 20px; min-height: 421px; width: 99.76%; margin-left: 0.25%; }
    .page-cotisation .text-block:nth-of-type(4) { margin-top: 47px; min-height: 43px; width: 100%; margin-left: 0; }
}

/* Page : lacs (mise en page « photos et bandeaux ») */
.page-lacs { --page-min-height: 1281px; --spacer-above: 1281px; }
.page-lacs .band { margin-top: 45px; min-height: 281px; padding-bottom: 46px; }
.page-lacs .band-second { margin-top: 46px; min-height: 283px; padding-bottom: 44px; }
/* Positions propres au desktop (sous 1001 px, la mise en page commune prend le relais). */
@media (min-width: 1001px) {
    .page-lacs .band-text { margin-top: 43px; }
    .page-lacs .band-photo { top: 43px; }
    .page-lacs .photo-row { margin-top: 45px; }
    .page-lacs .band-second .band-text { margin-top: 44px; }
    .page-lacs .band-second .band-photo { top: 45px; }
}
.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"); }
@media (min-width: 701px) and (max-width: 1000px) {
    .page-lacs .band { margin-top: 27px; min-height: 548.975px; padding-bottom: 0; }
    .page-lacs .band-inner { padding: 43px 0 24px; }
    .page-lacs .band-photo { margin-top: 30px; }
    .page-lacs .photo-row-text { margin-top: 33px; }
    .page-lacs .photo-row-photo { margin-top: 33px; }
    .page-lacs .band-second { margin-top: 33px; min-height: 460px; }
    .page-lacs .band-second .band-inner { padding: 44px 0 33px; }
    .page-lacs .band-second .band-photo { margin-top: 35px; }
}
@media (min-width: 811px) and (max-width: 1000px) {
    .page-lacs { --page-min-height: 1765px; --spacer-above: 1721px; }
}
@media (min-width: 701px) and (max-width: 810px) {
    .page-lacs { --page-min-height: 1766px; --spacer-above: 1716px; }
}
@media (max-width: 700px) {
    .page-lacs .band { margin-top: 24px; min-height: 514px; padding-bottom: 0; }
    .page-lacs .band-inner { padding: 30px 0 24px; }
    .page-lacs .band-photo { margin-top: 5px; }
    .page-lacs .photo-row-text { margin-top: 24px; }
    .page-lacs .photo-row-photo { margin-top: 6px; }
    .page-lacs .band-second { margin-top: 24px; min-height: 423px; }
    .page-lacs .band-second .band-inner { padding: 31px 0 20px; }
    .page-lacs .band-second .band-photo { margin-top: 24px; }
}
@media (min-width: 601px) and (max-width: 700px) {
    .page-lacs { --page-min-height: 1655px; --spacer-above: 1612px; }
}
@media (min-width: 451px) and (max-width: 600px) {
    .page-lacs { --page-min-height: 1655px; --spacer-above: 1630px; }
    .page-lacs .band { min-height: 536px; }
    .page-lacs .band-second { min-height: 423px; }
    .page-lacs .photo-row-text { margin-top: 25px; }
    .page-lacs .photo-row-photo { margin-top: 5px; }
}
@media (max-width: 450px) {
    .page-lacs { --page-min-height: 1612px; --spacer-above: 1550px; }
    .page-lacs .band { margin-top: 25px; min-height: 493.775px; }
    .page-lacs .band-second { margin-top: 24px; }
    .page-lacs .band-inner { padding: 26px 0 24px; }
    .page-lacs .band-photo { margin-top: 17px; }
    .page-lacs .photo-row-photo { margin-top: 24px; }
    .page-lacs .band-second { min-height: 381px; }
    .page-lacs .band-second .band-inner { padding: 24px 0 19px; }
    .page-lacs .band-second .band-text { min-height: 82px; }
    .page-lacs .band-second .band-photo { margin-top: 18px; }
}

/* Page : epaves (mise en page « photos et bandeaux ») */
.page-epaves { --page-min-height: 1281px; --spacer-above: 1388px; }
.page-epaves .intro { min-height: 131px; }
.page-epaves .band { margin-top: 24px; min-height: 401px; padding-bottom: 41px; }
.page-epaves .band-second { margin-top: 46px; min-height: 283px; padding-bottom: 44px; }
/* Positions propres au desktop (sous 1001 px, la mise en page commune prend le relais). */
@media (min-width: 1001px) {
    .page-epaves .band-text { margin-top: 43px; }
    .page-epaves .band-photo { top: 102px; }
    .page-epaves .photo-row { margin-top: 37px; }
    .page-epaves .band-second .band-text { margin-top: 44px; }
    .page-epaves .band-second .band-photo { top: 45px; }
}
.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"); }
@media (min-width: 701px) and (max-width: 1000px) {
    .page-epaves .band { margin-top: 31px; min-height: 611.875px; padding-bottom: 0; }
    .page-epaves .band-inner { padding: 33px 0 29px; }
    .page-epaves .band-photo { margin-top: 26px; }
    .page-epaves .photo-row-text { margin-top: 28px; }
    .page-epaves .photo-row-photo { margin-top: 28px; }
    .page-epaves .band-second { margin-top: 33px; min-height: 512px; }
    .page-epaves .band-second .band-inner { padding: 44px 0 33px; }
    .page-epaves .band-second .band-photo { margin-top: 31px; }
}
@media (min-width: 811px) and (max-width: 1000px) {
    .page-epaves { --page-min-height: 1765px; --spacer-above: 1934px; }
}
@media (min-width: 701px) and (max-width: 810px) {
    .page-epaves { --page-min-height: 1766px; --spacer-above: 2025px; }
    .page-epaves .band { min-height: 683.875px; }
    .page-epaves .band-second { min-height: 536px; }
}
@media (max-width: 700px) {
    .page-epaves .intro { min-height: 175px; }
    .page-epaves .band { margin-top: 47px; min-height: 726px; padding-bottom: 0; }
    .page-epaves .band-inner { padding: 30px 0 26px; }
    .page-epaves .band-text { min-height: 405px; }
    .page-epaves .band-photo { margin-top: 27px; }
    .page-epaves .photo-row-text { margin-top: 50px; min-height: 206px; }
    .page-epaves .photo-row-photo { margin-top: 35px; }
    .page-epaves .band-second { margin-top: 24px; min-height: 511px; }
    .page-epaves .band-second .band-inner { padding: 31px 0 20px; }
    .page-epaves .band-second .band-text { min-height: 203px; }
    .page-epaves .band-second .band-photo { margin-top: 19px; }
}
@media (min-width: 601px) and (max-width: 700px) {
    .page-epaves { --page-min-height: 1655px; --spacer-above: 2133px; }
}
@media (min-width: 451px) and (max-width: 600px) {
    .page-epaves { --page-min-height: 1655px; --spacer-above: 2129px; }
    .page-epaves .band-second { margin-top: 25px; }
}
@media (max-width: 450px) {
    .page-epaves { --page-min-height: 1612px; --spacer-above: 1790px; }
    .page-epaves .intro { min-height: 141px; }
    .page-epaves .band { margin-top: 33px; min-height: 607.775px; }
    .page-epaves .band-inner { padding: 26px 0 25px; }
    .page-epaves .band-text { min-height: 302px; }
    .page-epaves .band-photo { margin-top: 17px; }
    .page-epaves .photo-row-text { margin-top: 23px; min-height: 110px; }
    .page-epaves .photo-row-photo { margin-top: 23px; }
    .page-epaves .band-second { margin-top: 24px; min-height: 442px; }
    .page-epaves .band-second .band-inner { padding: 24px 0 19px; }
    .page-epaves .band-second .band-text { min-height: 82px; }
    .page-epaves .band-second .band-photo { margin-top: 23px; }
}

/* Page : carrieres (mise en page « photos et bandeaux », deux rangées photo + texte) */
.page-carrieres { --page-min-height: 1754px; --spacer-above: 1644px; }
.page-carrieres .band { margin-top: 45px; min-height: 281px; padding-bottom: 46px; }
.page-carrieres .band-second { margin-top: 46px; min-height: 283px; padding-bottom: 44px; }
/* Positions propres au desktop (sous 1001 px, la mise en page commune prend le relais). */
@media (min-width: 1001px) {
    .page-carrieres .band-text { margin-top: 43px; }
    .page-carrieres .band-photo { top: 43px; }
    .page-carrieres .photo-row { margin-top: 45px; }
    .page-carrieres .band-second .band-text { margin-top: 44px; }
    .page-carrieres .band-second .band-photo { top: 45px; }
    .page-carrieres .photo-row-second .photo-row-text { margin-top: 60px; left: 41.03%; width: 58.98%; }
    /* Muse colore ce seul lien en jaune pur sur desktop. */
    .page-carrieres .link-vodelee:link, .page-carrieres .link-vodelee:visited { color: #FFFF00; }
}
.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"); }
@media (min-width: 701px) and (max-width: 1000px) {
    .page-carrieres .band { min-height: 610.975px; padding-bottom: 0; }
    .page-carrieres .band-inner { padding: 43px 0 50px; }
    .page-carrieres .photo-row-text { margin-top: 51px; }
    .page-carrieres .photo-row-photo { margin-top: 51px; }
    .page-carrieres .band-second { margin-top: 51px; min-height: 571.575px; }
    .page-carrieres .band-second .band-inner { padding: 44px 0 49px; }
    .page-carrieres .band-second .band-photo { margin-top: 50px; }
}
@media (max-width: 1000px) {
    .page-carrieres .band-photo { margin-top: 42px; }
}
@media (min-width: 811px) and (max-width: 1000px) {
    .page-carrieres { --page-min-height: 2672px; --spacer-above: 2626px; }
}
@media (min-width: 701px) and (max-width: 810px) {
    .page-carrieres { --page-min-height: 2673px; --spacer-above: 2692px; }
    .page-carrieres .band-second { min-height: 595.575px; }
}
@media (max-width: 700px) {
    .page-carrieres .intro { min-height: 261px; }
    .page-carrieres .band { margin-top: 50px; min-height: 551px; padding-bottom: 0; }
    .page-carrieres .band-inner { padding: 22px 0 32px; }
    .page-carrieres .photo-row-text { margin-top: 32px; }
    .page-carrieres .photo-row-photo { margin-top: 32px; }
    .page-carrieres .band-second { margin-top: 32px; min-height: 568px; }
    .page-carrieres .band-second .band-inner { padding: 31px 0 28px; }
    .page-carrieres .band-second .band-photo { margin-top: 32px; }
    .page-carrieres .photo-row-second .photo-row-text { margin-top: 38px; }
    .page-carrieres .photo-row-second .photo-row-photo { margin-top: 39px; }
}
@media (min-width: 601px) and (max-width: 700px) {
    .page-carrieres { --page-min-height: 2555px; --spacer-above: 2504px; }
}
@media (min-width: 451px) and (max-width: 600px) {
    .page-carrieres { --page-min-height: 2555px; --spacer-above: 2519px; }
    .page-carrieres .photo-row-second .photo-row-text { margin-top: 39px; margin-left: 5.84%; }
    .page-carrieres .photo-row-second .photo-row-photo { margin-top: 38px; }
}
@media (max-width: 450px) {
    .page-carrieres { --page-min-height: 2325px; --spacer-above: 2248px; }
    .page-carrieres .intro { min-height: 207px; }
    .page-carrieres .band { margin-top: 41px; min-height: 485.775px; }
    .page-carrieres .band-inner { padding: 23px 0 20px; }
    .page-carrieres .band-photo { margin-top: 33px; }
    .page-carrieres .photo-row-text { margin-top: 36px; }
    .page-carrieres .photo-row-photo { margin-top: 36px; }
    .page-carrieres .band-second { margin-top: 35px; min-height: 497.925px; }
    .page-carrieres .band-second .band-inner { padding: 24px 0 20px; }
    .page-carrieres .band-second .band-photo { margin-top: 27px; }
    .page-carrieres .photo-row-second .photo-row-text { margin-top: 26px; }
    .page-carrieres .photo-row-second .photo-row-photo { margin-top: 22px; }
}

/* Page : autres-sorties (mise en page « photos et bandeaux », décalages horizontaux propres) */
.page-autres-sorties { --page-min-height: 753px; --spacer-above: 1454px; }
.page-autres-sorties .band { margin-top: 20px; min-height: 354px; padding-bottom: 27px; }
.page-autres-sorties .band-second { margin-top: 35px; min-height: 303px; padding-bottom: 24px; }
.page-autres-sorties .page-content { margin-top: 86px; }
.page-autres-sorties .intro { margin-top: 0; }
/* Blanc Muse sous le dernier paragraphe de la descente de l'Ourthe (compris dans les hauteurs minimales). */
.page-autres-sorties .photo-row-text { box-sizing: border-box; padding-bottom: 17px; }
@media (min-width: 1001px) {
    .page-autres-sorties .band-text { margin-top: 27px; left: 7.03%; }
    .page-autres-sorties .band-photo { top: 71px; left: 60.58%; }
    .page-autres-sorties .photo-row { margin-top: 35px; margin-left: 7.03%; }
    .page-autres-sorties .photo-row-photo { top: 68px; }
    .page-autres-sorties .photo-row-text { left: 41.03%; width: 58.98%; }
    .page-autres-sorties .band-second .band-text { margin-top: 24px; }
    .page-autres-sorties .band-second .band-photo { top: 44px; }
}
.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"); }
@media (min-width: 701px) and (max-width: 1000px) {
    .page-autres-sorties .band { min-height: 598.9px; padding-bottom: 0; }
    .page-autres-sorties .band-inner { padding: 27px 0 17px; }
    .page-autres-sorties .band-photo { margin-top: 14px; }
    .page-autres-sorties .photo-row-text { margin-top: 21px; }
    .page-autres-sorties .photo-row-photo { margin-top: 20px; }
    .page-autres-sorties .band-second { margin-top: 20px; min-height: 558.7px; }
    .page-autres-sorties .band-second .band-inner { padding: 24px 0 23px; }
    .page-autres-sorties .band-second .band-text { left: 6.61%; width: 86.9%; }
    .page-autres-sorties .band-second .band-photo { margin-top: 19px; }
}
@media (min-width: 811px) and (max-width: 1000px) {
    .page-autres-sorties { --page-min-height: 752px; --spacer-above: 2133px; }
}
@media (min-width: 701px) and (max-width: 810px) {
    .page-autres-sorties { --spacer-above: 2247px; }
    .page-autres-sorties .band { min-height: 622.9px; }
    .page-autres-sorties .photo-row-text { margin-left: 6.42%; }
    .page-autres-sorties .band-second { min-height: 582.7px; }
    .page-autres-sorties .band-second .band-text { left: 6.67%; width: 86.92%; }
}
@media (max-width: 700px) {
    .page-autres-sorties .intro { min-height: 233px; }
    .page-autres-sorties .band { margin-top: 26px; min-height: 591px; padding-bottom: 0; }
    .page-autres-sorties .band-inner { padding: 19px 0 16px; }
    .page-autres-sorties .band-photo { margin-top: 18px; }
    .page-autres-sorties .photo-row-text { margin-top: 76px; min-height: 466px; }
    .page-autres-sorties .photo-row-photo { margin-top: 35px; }
    .page-autres-sorties .band-second { margin-top: 14px; min-height: 568px; }
    .page-autres-sorties .band-second .band-inner { padding: 16px 0 16px; }
    .page-autres-sorties .band-second .band-text { min-height: 282px; }
    .page-autres-sorties .band-second .band-photo { margin-top: 16px; }
}
@media (min-width: 601px) and (max-width: 700px) {
    .page-autres-sorties { --spacer-above: 2362px; }
}
@media (min-width: 451px) and (max-width: 600px) {
    .page-autres-sorties { --spacer-above: 2358px; }
    /* Blanc Muse sous le texte de Némo 33 */
    .page-autres-sorties .band-inner { padding-bottom: 33px; }
}
@media (max-width: 450px) {
    .page-autres-sorties { --spacer-above: 1973px; }
    .page-autres-sorties .page-content { margin-top: 84px; }
    .page-autres-sorties .intro { min-height: 203px; }
    .page-autres-sorties .band { margin-top: 8px; min-height: 542.55px; }
    .page-autres-sorties .band-inner { padding: 15px 0 14px; }
    .page-autres-sorties .band-text { min-height: 268px; }
    .page-autres-sorties .band-photo { margin-top: 8px; }
    .page-autres-sorties .photo-row-text { margin-top: 15px; min-height: 295px; }
    .page-autres-sorties .photo-row-photo { margin-top: 15px; }
    .page-autres-sorties .band-second { margin-top: 35px; min-height: 493.8px; }
    .page-autres-sorties .band-second .band-inner { padding: 22px 0 12px; }
    .page-autres-sorties .band-second .band-text { min-height: 209px; }
    .page-autres-sorties .band-second .band-photo { margin-top: 13px; }
}

/* Page : activites — intro, bandeau (texte + photo), section, bandeau (photo + texte), section.
   Sous 1001 px, cette page utilise les tailles « moyennes » (titres 20/24, textes 18/22). */
.page-activites { --page-min-height: 2046px; --spacer-above: 1928px; }
.page-activites .list { margin: 17px 0; }
.page-activites .page-content { position: static; margin-top: 88px; margin-left: 0; width: 100%; }
.page-activites .intro-wrap { width: 92.98%; }
.page-activites .intro { margin-top: 22px; left: 7.49%; width: 92.52%; min-height: 110px; }
.page-activites .band { margin-top: 57px; min-height: 376px; padding-bottom: 64px; }
.page-activites .band-text { position: relative; min-height: 110px; }
.page-activites .band .list li::before { color: #FFFFFF; }
.page-activites .section-club { margin-top: 57px; margin-left: var(--content-left); width: var(--content-width); min-height: 110px; }
.page-activites .band-second { margin-top: 57px; min-height: 508px; padding-bottom: 5px; }
.page-activites .section-other { margin-top: 57px; margin-left: var(--content-left); width: var(--content-width); min-height: 252px; }
/* Desktop : texte et photo côte à côte (flottants, comme Muse) */
@media (min-width: 1001px) {
    .page-activites .band-inner { display: flow-root; }
    .page-activites .band .band-text { float: left; margin-top: 41px; margin-left: var(--content-left); width: 35.29%; }
    .page-activites .band .band-photo { float: right; margin-top: 82px; margin-right: 7.01%; width: 37.98%; }
    .page-activites .band-second .band-photo { float: left; margin-top: 107px; margin-left: var(--content-left); margin-right: 0; width: 35.29%; }
    .page-activites .band-second .band-photo img { width: 92.41%; padding: 0 7.599% 5.34% 0; }
    .page-activites .band-second .band-text { float: left; margin-top: 30px; margin-left: 1.02%; width: 49.79%; min-height: 451px; }
}
/* Sous 1001 px : photo sous le texte, centrée (530 px) ou fluide */
@media (max-width: 1000px) {
    .page-activites .text-block { left: 0; }
    .page-activites .band-inner { display: flex; flex-direction: column; }
    .page-activites .band-text { order: 1; left: 6.5%; width: 87%; }
    .page-activites .band-photo { order: 2; position: relative; width: 530px; left: -265px; margin-left: 50%; }
    .page-activites .band-photo img { padding-bottom: 28px; }
}
@media (min-width: 701px) and (max-width: 1000px) {
    .page-activites .title { font-size: 20px; line-height: 24px; }
    .page-activites .text:not(.spacer) { font-size: 18px; line-height: 22px; }
    .page-activites .text.spacer-24 { line-height: 24px; }
    .page-activites .intro { margin-top: 11px; left: var(--content-left); width: 93.05%; }
    .page-activites .intro-wrap { width: 93.5%; }
    .page-activites .band { margin-top: 33px; min-height: 673px; padding-bottom: 0; }
    .page-activites .band-inner { padding: 32px 0 31px; }
    .page-activites .band .band-photo { margin-top: 24px; }
    .page-activites .section-club { margin-top: 33px; margin-left: 6.51%; width: 87%; }
    .page-activites .band-second { margin-top: 104px; min-height: 825.983px; padding-bottom: 0; }
    .page-activites .band-second .band-inner { padding: 30px 0 36px; }
    .page-activites .band-second .band-text { left: 6.4%; width: 87.1%; min-height: 396px; }
    .page-activites .band-second .band-photo { margin-top: 39px; }
    .page-activites .section-other { margin-top: 48px; margin-left: 6.51%; width: 87.1%; min-height: 232px; }
}
@media (min-width: 811px) and (max-width: 1000px) {
    .page-activites { --page-min-height: 2291px; --spacer-above: 2433px; }
}
@media (min-width: 701px) and (max-width: 810px) {
    .page-activites { --page-min-height: 2292px; --spacer-above: 2501px; }
    .page-activites .intro { left: 6.87%; width: 93.14%; }
    .page-activites .intro-wrap { width: 93.46%; }
    .page-activites .band { min-height: 695px; }
    .page-activites .band-text { left: 6.42%; width: 87.04%; }
    .page-activites .section-club { margin-left: 6.42%; width: 87.04%; }
    .page-activites .band-second .band-text { left: 6.42%; width: 87.17%; }
    .page-activites .section-other { margin-left: 6.42%; width: 87.17%; }
}
@media (max-width: 700px) {
    .page-activites .intro { min-height: 92px; }
    .page-activites .band { margin-top: 59px; padding-bottom: 0; }
    .page-activites .band-inner { padding: 39px 0 38px; }
    .page-activites .band-photo { width: 77.15%; left: 11.43%; margin-left: 0; }
    .page-activites .band-photo img { padding-bottom: 0; }
    .page-activites .band .band-photo { margin-top: 11px; }
    .page-activites .section-club { margin-top: 33px; min-height: 378px; }
    .page-activites .band-second { margin-top: 33px; padding-bottom: 0; }
    .page-activites .band-second .band-inner { padding: 30px 0 33px; }
    .page-activites .band-second .band-text { min-height: 466px; }
    .page-activites .band-second .band-photo { margin-top: 31px; }
    .page-activites .band-second .band-photo img { padding-bottom: 5.37%; }
    .page-activites .section-other { margin-top: 41px; min-height: 300px; }
}
@media (min-width: 601px) and (max-width: 700px) {
    .page-activites { --page-min-height: 2292px; --spacer-above: 2665px; }
    .page-activites .intro { left: 6.07%; width: 93.94%; }
    .page-activites .intro-wrap { width: 94.29%; }
    .page-activites .band { min-height: 696px; }
    .page-activites .band-text { left: 5.72%; width: 88.58%; }
    .page-activites .section-club { margin-left: 5.72%; width: 88.58%; }
    .page-activites .band-second { min-height: 892.942px; }
    .page-activites .band-second .band-text { left: 5.72%; width: 88.58%; }
    .page-activites .section-other { margin-left: 5.72%; width: 88.58%; }
}
@media (min-width: 451px) and (max-width: 600px) {
    .page-activites { --page-min-height: 2292px; --spacer-above: 2690px; }
    .page-activites .page-content { margin-top: 110px; }
    .page-activites .intro { margin-top: 0; left: 0; margin-left: 5.67%; width: 88.5%; }
    .page-activites .band { min-height: 695.554px; }
    .page-activites .band-inner { padding: 39px 0 81px; }
    .page-activites .band-text { left: 5.67%; width: 88.5%; }
    .page-activites .band-photo { width: 77.17%; left: 11.5%; }
    .page-activites .section-club { margin-left: 5.67%; width: 88.5%; }
    .page-activites .band-second { min-height: 892.315px; padding-bottom: 1px; }
    .page-activites .band-second .band-inner { padding: 30px 0 66px; }
    .page-activites .band-second .band-text { left: 5.67%; width: 88.5%; }
    .page-activites .band-second .band-photo img { padding-bottom: 5.401%; }
    .page-activites .section-other { margin-left: 5.67%; width: 88.5%; }
}
@media (max-width: 600px) {
    .page-activites .intro-wrap { width: 100%; }
}
@media (max-width: 450px) {
    .page-activites { --page-min-height: 2158px; --spacer-above: 2120px; }
    .page-activites .page-content { margin-top: 94px; }
    .page-activites .intro { margin-top: 0; left: 0; margin-left: 4.23%; width: 91.56%; min-height: 92px; }
    .page-activites .band { margin-top: 31px; min-height: 541px; }
    .page-activites .band-inner { padding: 17px 0 15px; }
    .page-activites .band-text { left: 4.23%; width: 91.56%; }
    .page-activites .band .band-photo { margin-top: 37px; width: 92%; left: 4.23%; }
    .page-activites .section-club { margin-top: 25px; margin-left: 4.23%; width: 91.56%; min-height: 311px; }
    .page-activites .band-second { margin-top: 37px; min-height: 703px; }
    .page-activites .band-second .band-inner { padding: 19px 0 27px; }
    .page-activites .band-second .band-text { left: 4.23%; width: 91.56%; min-height: 298px; }
    .page-activites .band-second .band-photo { margin-top: 28px; width: 91.56%; left: 4.23%; }
    .page-activites .band-second .band-photo img { padding-bottom: 5.34%; }
    .page-activites .section-other { margin-top: 15px; margin-left: 4.23%; width: 91.56%; min-height: 242px; }
}

/* Page : mers-oceans (mise en page « photos et bandeaux », deux rangées photo + texte, ancres) */
.page-mers-oceans { --page-min-height: 1281px; --spacer-above: 1769px; }
.page-mers-oceans #zelande { top: 140px; left: 18px; }
.page-mers-oceans #mermediterranee, #mermediterrranee { top: 534px; left: -119px; }
.page-mers-oceans #merrouge { top: 833px; left: 18px; }
.page-mers-oceans .band { margin-top: 13px; min-height: 377px; padding-bottom: 17px; }
.page-mers-oceans .band-second { margin-top: 22px; min-height: 426px; padding-bottom: 24px; }
/* Positions propres au desktop (sous 1001 px, la mise en page commune prend le relais). */
@media (min-width: 1001px) {
    .page-mers-oceans .page-content { padding-bottom: 79px; }
    .page-mers-oceans .band-text { margin-top: 43px; }
    .page-mers-oceans .band-photo { top: 79px; }
    .page-mers-oceans .photo-row { margin-top: 15px; }
    .page-mers-oceans .photo-row-photo { top: 12px; }
    .page-mers-oceans .band-second .band-text { margin-top: 44px; }
    .page-mers-oceans .band-second .band-photo { top: 106px; }
    .page-mers-oceans .photo-row-second { margin-top: 33px; width: 88.27%; }
    .page-mers-oceans .photo-row-second .photo-row-photo { width: 36.7%; }
    .page-mers-oceans .photo-row-second .photo-row-text { left: 43.27%; width: 56.74%; }
}
.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"); }
@media (min-width: 701px) and (max-width: 1000px) {
    .page-mers-oceans #zelande { top: 190px; left: 19px; }
    .page-mers-oceans #mermediterranee, #mermediterrranee { top: 788px; left: -121px; }
    .page-mers-oceans #merrouge { top: 1286px; left: 19px; }
    .page-mers-oceans .band { margin-top: 15px; min-height: 597.975px; padding-bottom: 0; }
    .page-mers-oceans .band-inner { padding: 28px 0 26px; }
    .page-mers-oceans .band-photo { margin-top: 20px; }
    .page-mers-oceans .photo-row-text { margin-top: 15px; }
    .page-mers-oceans .photo-row-photo { margin-top: 16px; }
    .page-mers-oceans .band-second { margin-top: 15px; min-height: 653.875px; }
    .page-mers-oceans .band-second .band-inner { padding: 24px 0 20px; }
    .page-mers-oceans .band-second .band-photo { margin-top: 14px; }
    .page-mers-oceans .photo-row-second .photo-row-photo { margin-top: 15px; }
}
@media (min-width: 811px) and (max-width: 1000px) {
    .page-mers-oceans { --page-min-height: 1765px; --spacer-above: 2605px; }
}
@media (min-width: 701px) and (max-width: 810px) {
    .page-mers-oceans { --page-min-height: 1766px; --spacer-above: 2696px; }
    .page-mers-oceans .band { min-height: 621.975px; }
    .page-mers-oceans .band-second { min-height: 677.875px; }
    .page-mers-oceans .band-second .band-text { left: 6.42%; }
}
@media (max-width: 700px) {
    .page-mers-oceans #zelande { top: 241px; left: 16px; }
    .page-mers-oceans #mermediterranee, #mermediterrranee { top: 881px; left: -118px; }
    .page-mers-oceans #merrouge { top: 1431px; left: 16px; }
    .page-mers-oceans .intro { min-height: 231px; }
    .page-mers-oceans .band { margin-top: 25px; min-height: 640px; padding-bottom: 0; }
    .page-mers-oceans .band-inner { padding: 24px 0 24px; }
    .page-mers-oceans .band-photo { margin-top: 27px; }
    .page-mers-oceans .photo-row-text { margin-top: 24px; }
    .page-mers-oceans .photo-row-photo { margin-top: 25px; }
    .page-mers-oceans .band-second { margin-top: 24px; min-height: 662px; }
    .page-mers-oceans .band-second .band-inner { padding: 31px 0 20px; }
    .page-mers-oceans .band-second .band-photo { margin-top: 24px; }
    .page-mers-oceans .photo-row-second .photo-row-text { margin-top: 15px; }
    .page-mers-oceans .photo-row-second .photo-row-photo { margin-top: 24px; }
}
@media (min-width: 601px) and (max-width: 700px) {
    .page-mers-oceans { --page-min-height: 1655px; --spacer-above: 2745px; }
}
@media (min-width: 451px) and (max-width: 600px) {
    .page-mers-oceans { --page-min-height: 1655px; --spacer-above: 2894px; }
    .page-mers-oceans .photo-row-text { margin-top: 25px; }
    .page-mers-oceans .photo-row-photo { margin-top: 24px; }
    .page-mers-oceans .band-second { min-height: 728px; }
    .page-mers-oceans .photo-row-second .photo-row-text { margin-top: 15px; }
    .page-mers-oceans .photo-row-second .photo-row-photo { margin-top: 25px; }
}
@media (max-width: 450px) {
    .page-mers-oceans { --page-min-height: 1612px; --spacer-above: 2476px; }
    .page-mers-oceans #zelande { top: 178px; left: -84px; }
    .page-mers-oceans #mermediterranee, #mermediterrranee { top: 637px; left: -118px; }
    .page-mers-oceans #merrouge { top: 1125px; left: -96px; }
    .page-mers-oceans .intro { min-height: 170px; }
    .page-mers-oceans .band { margin-top: 26px; min-height: 539.775px; }
    .page-mers-oceans .band-inner { padding: 17px 0 16px; }
    .page-mers-oceans .band-photo { margin-top: 12px; }
    .page-mers-oceans .photo-row-text { margin-top: 16px; }
    .page-mers-oceans .photo-row-photo { margin-top: 15px; }
    .page-mers-oceans .band-second { margin-top: 15px; min-height: 621px; }
    .page-mers-oceans .band-second .band-inner { padding: 24px 0 13px; }
    .page-mers-oceans .band-second .band-text { min-height: 82px; }
    .page-mers-oceans .band-second .band-photo { margin-top: 21px; }
    .page-mers-oceans .photo-row-second .photo-row-text { margin-top: 16px; }
    .page-mers-oceans .photo-row-second .photo-row-photo { margin-top: 15px; }
}

/* Page : la-plongee — bandeau diaporama (desktop) ou photo fixe, deux blocs de texte (images sur desktop), manta animée */
.page-la-plongee { --page-min-height: 753px; --spacer-above: 1951px; }
.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 { position: relative; z-index: 3; margin-top: 22px; left: 0; 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; margin-left: 7.03%; }
@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; }
    .page-la-plongee .text-block { margin-top: 22px; margin-left: 7.01%; width: 86%; min-height: 110px; }
    .page-la-plongee .manta { margin-left: 7.01%; width: 51.2%; }
    .page-la-plongee .text-block-second { margin-top: 7px; margin-left: 7.01%; }
}
@media (min-width: 811px) and (max-width: 1000px) {
    .page-la-plongee { --page-min-height: 752px; --spacer-above: 1953px; }
}
@media (min-width: 701px) and (max-width: 810px) {
    .page-la-plongee { --spacer-above: 1966px; }
    .page-la-plongee .text-block { margin-left: 6.92%; width: 86.05%; }
    .page-la-plongee .manta { margin-left: 6.92%; width: 51.24%; }
    .page-la-plongee .text-block-second { margin-left: 7.04%; }
}
@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; margin-left: 5.72%; width: 88.58%; }
    .page-la-plongee .manta { margin-top: 9px; margin-left: 5.86%; width: 51.29%; }
    .page-la-plongee .text-block-second { margin-top: 10px; margin-left: 5.72%; }
}
@media (min-width: 601px) and (max-width: 700px) {
    .page-la-plongee { --spacer-above: 1409px; }
}
@media (min-width: 451px) and (max-width: 600px) {
    .page-la-plongee { --spacer-above: 1442px; }
    .page-la-plongee .hero-bg { background-image: url("../images/laplongée_slidesshow_0002-u295980-fr2.jpg"); }
    .page-la-plongee .text-block { margin-left: 5.67%; width: 88.5%; }
    .page-la-plongee .manta { margin-left: 5.84%; width: 51.17%; }
    .page-la-plongee .text-block-second { margin-left: 5.67%; }
}
@media (max-width: 450px) {
    .page-la-plongee { --spacer-above: 1164px; }
    .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; margin-left: 4.45%; width: 91.34%; }
    .page-la-plongee .manta { margin-top: 22px; margin-left: 5.34%; width: 51.34%; }
    .page-la-plongee .text-block-second { margin-top: 21px; margin-left: 4.45%; min-height: 374px; }
}

/* Page : le-club — bandeau diaporama (desktop) ou photo fixe avec logo et titre, intro, bandeau bleu
   (texte + plongeur animé), deux sections. Sous 451 px, Muse empile tout depuis le haut de la page. */
.page-le-club { --page-min-height: 864px; --spacer-above: 1881px; }
.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; left: 0; margin-left: var(--content-left); width: var(--content-width); min-height: 131px; }
.page-le-club .band { margin-top: 33px; min-height: 498px; }
.page-le-club .hero.band { margin-top: 0; min-height: 0; }
.page-le-club .band-inner { padding: 38px 0 35px; }
.page-le-club .band-text { position: relative; left: 7.03%; width: 85.95%; min-height: 203px; }
.page-le-club .diver { position: relative; margin-top: 36px; left: 50.66%; width: 332px; overflow: hidden; }
.page-le-club .diver img { display: block; }
.page-le-club .section-new { margin-top: 19px; left: 0; margin-left: 7.03%; width: 85.95%; min-height: 84px; }
.page-le-club .section-experienced { margin-top: 45px; left: 0; margin-left: 7.03%; width: 85.95%; min-height: 135px; }
@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"); }
    .page-le-club .intro { margin-left: 7.01%; width: 86%; }
    .page-le-club .band { min-height: 509px; }
    .page-le-club .band-text { left: 7.1%; width: 85.9%; }
    .page-le-club .diver { left: 50.6%; }
    .page-le-club .section-new,
    .page-le-club .section-experienced { margin-left: 7.01%; width: 85.9%; }
}
@media (min-width: 811px) and (max-width: 1000px) {
    .page-le-club { --page-min-height: 863px; --spacer-above: 1925px; }
}
/* 701–810 px : Muse élargit le conteneur à 121,98 % de la page (débordement masqué) ; les largeurs
   et marges des textes sont exprimées par rapport à cette largeur. */
@media (min-width: 701px) and (max-width: 810px) {
    .page-le-club { --spacer-above: 1966px; }
    .page-le-club .intro { margin-left: calc(121.98% * 0.0577); width: calc(121.98% * 0.7055); }
    .page-le-club .band { min-height: 533px; }
    .page-le-club .band-text { left: 7.04%; width: 85.93%; }
    .page-le-club .diver { left: 50.62%; }
    .page-le-club .section-new,
    .page-le-club .section-experienced { margin-left: calc(121.98% * 0.0577); width: calc(121.98% * 0.7045); }
}
@media (max-width: 700px) {
    .page-le-club .hero { min-height: 267px; padding-bottom: 53px; }
    .page-le-club .hero-logo { margin-top: 22px; }
    .page-le-club .hero-bg { background-image: url("../images/leclub_slideshow_0003-u295337-fr.jpg"); }
    .page-le-club .hero-logo { width: 130px; 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; margin-left: 5.72%; width: 88.58%; }
    .page-le-club .band { margin-top: 28px; min-height: 515px; }
    .page-le-club .band-inner { padding: 36px 0 28px; }
    .page-le-club .band-text { left: 5.58%; width: 88.72%; min-height: 249px; }
    .page-le-club .diver { margin-top: 15px; margin-left: 50%; left: -166px; }
    .page-le-club .section-new { margin-top: 24px; margin-left: 5.58%; width: 88.72%; }
    .page-le-club .section-experienced { margin-top: 21px; margin-left: 5.58%; width: 88.58%; }
}
@media (min-width: 601px) and (max-width: 700px) {
    .page-le-club { --spacer-above: 1388px; }
}
@media (min-width: 451px) and (max-width: 600px) {
    .page-le-club { --spacer-above: 1383px; }
    .page-le-club .hero-bg { background-image: url("../images/leclub_slideshow_0003-u295337-fr2.jpg"); }
    .page-le-club .intro { margin-left: 5.67%; width: 88.5%; }
    .page-le-club .band-text { left: 5.67%; width: 88.67%; }
    .page-le-club .section-new { margin-left: 5.5%; width: 88.67%; }
    .page-le-club .section-experienced { margin-left: 5.67%; width: 88.5%; }
}
/* ≤ 450 px : bandeau, intro et colonne (bandeau bleu + sections) sont positionnés depuis le haut du
   contenu (groupe Muse de 151,78 % de large décalé de −51,78 %) : grille à une cellule. */
@media (max-width: 450px) {
    .page-le-club { --spacer-above: 1161px; }
    .page-le-club .page-content { display: grid; grid-template-columns: 100%; }
    .page-le-club .page-content > * { grid-area: 1 / 1; align-self: start; min-width: 0; }
    .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: 267px; margin-left: calc(151.78% * 0.3705 - 51.78%); width: calc(151.78% * 0.6018); min-height: 109px; }
    .page-le-club .band { margin-top: 414px; min-height: 383.725px; }
    .page-le-club .band-inner { padding: 13px 0 17px; }
    .page-le-club .band-text { left: 4.23%; width: 91.34%; min-height: 201px; }
    .page-le-club .diver { margin-top: 9px; margin-left: 0; left: 21.56%; width: 56.45%; }
    .page-le-club .diver img { width: 100%; height: auto; }
    .page-le-club .section-new { margin-top: 26px; margin-left: calc(151.78% * 0.369 - 51.78%); width: calc(151.78% * 0.6018); }
    .page-le-club .section-experienced { margin-top: 26px; margin-left: calc(151.78% * 0.3705 - 51.78%); width: calc(151.78% * 0.6018); }
}

/* Page : galerie-videos — en-tête icône + lien, titre, intro centrée, grille de 10 vidéos */
.page-galerie-videos { --page-min-height: 753px; --spacer-above: 938px; }
.page-galerie-videos .page-content { padding-bottom: 93px; }
.page-galerie-videos .page-content { margin-top: 78px; margin-left: 0; width: var(--content-width); }
.page-galerie-videos .gallery-header { position: relative; display: flow-root; margin-left: 8.18%; width: 11.46%; 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: 27.95%; width: 98px; min-height: 32px; padding: 2px 0 0 15px; box-sizing: border-box; font-family: var(--font-text); line-height: 24px; text-decoration: none; }
.page-galerie-videos .gallery-title { position: relative; width: 700px; min-height: 50px; margin-top: 16px; margin-left: 58.13%; left: -351px; 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: 34px; margin-left: 8.09%; width: 100%; min-height: 49px; font-family: var(--font-text); text-align: center; }
.page-galerie-videos .video-gallery { margin-top: 17px; margin-left: 8.09%; width: 100%; }
/* Muse : seconde galerie vidée par le widget (marge de 38 px fusionnée avec celle de l'espaceur) */
@media (min-width: 811px) and (max-width: 1000px) {
    .page-galerie-videos { --page-min-height: 752px; --spacer-above: 930px; }
    .page-galerie-videos .page-content { width: 86%; }
    .page-galerie-videos .gallery-header { margin-left: 8.26%; width: 14.66%; }
    .page-galerie-videos .gallery-label { left: 22.23%; }
    .page-galerie-videos .gallery-title { margin-left: 58.14%; left: -350px; }
    .page-galerie-videos .gallery-intro,
    .page-galerie-videos .video-gallery { margin-left: 8.14%; }
}
@media (min-width: 701px) and (max-width: 810px) {
    .page-galerie-videos { --spacer-above: 926px; }
    .page-galerie-videos .page-content { width: 93.21%; }
    /* Le groupe Muse contient aussi deux widgets invisibles qui lui donnent 45 px de haut. */
    .page-galerie-videos .gallery-header { margin-left: 0; width: 23.45%; min-height: 45px; }
    .page-galerie-videos .gallery-icon { left: 32.21%; }
    .page-galerie-videos .gallery-label { left: 44.64%; }
    .page-galerie-videos .gallery-title { margin-top: 3px; margin-left: 53.65%; }
    .page-galerie-videos .gallery-intro,
    .page-galerie-videos .video-gallery { margin-left: 7.55%; width: 92.32%; }
}
@media (min-width: 601px) and (max-width: 700px) {
    .page-galerie-videos { --spacer-above: 932px; }
    .page-galerie-videos .page-content { width: 118.86%; }
    .page-galerie-videos .gallery-header { margin-left: 0; width: 17.91%; min-height: 45px; }
    .page-galerie-videos .gallery-icon { left: 26.85%; }
    .page-galerie-videos .gallery-label { top: 4px; left: 53.03%; width: 70px; min-height: 21px; padding: 0 0 0 10px; line-height: 22px; }
    .page-galerie-videos .gallery-title { width: 620px; margin-top: 6px; margin-left: 42.07%; left: -310px; font-size: 30px; line-height: 36px; }
    /* Muse place l'intro dans un groupe de 66 px (widget invisible) décalé de −20,68 % */
    .page-galerie-videos .gallery-intro { margin-top: 20px; margin-left: calc(25.49% - 20.68%); width: 74.52%; min-height: 66px; }
    .page-galerie-videos .video-gallery { margin-top: 0; margin-left: 5.89%; width: 72.36%; }
}
@media (min-width: 451px) and (max-width: 600px) {
    .page-galerie-videos .page-content { width: 132.5%; }
    .page-galerie-videos .gallery-header { margin-left: 4.28%; width: 12.96%; }
    .page-galerie-videos .gallery-label { top: 4px; left: 32.04%; width: 70px; min-height: 21px; padding: 0 0 0 10px; line-height: 22px; }
    .page-galerie-videos .gallery-title { width: 620px; margin-top: 19px; margin-left: 37.74%; left: -311px; font-size: 30px; line-height: 36px; }
    /* Groupe Muse de 94,47 % décalé de −23,28 % : intro et galerie sont exprimées par rapport à lui */
    .page-galerie-videos .gallery-intro { margin-top: 20px; margin-left: calc(94.47% * 0.2917 - 23.28%); width: calc(94.47% * 0.7071); min-height: 66px; }
    .page-galerie-videos .video-gallery { margin-top: 0; margin-left: calc(94.47% * 0.3023 - 23.28%); width: calc(94.47% * 0.6871); }
}
@media (max-width: 600px) {
    .page-galerie-videos { --spacer-above: 927px; }
}
@media (max-width: 450px) {
    .page-galerie-videos .page-content { margin-top: 75px; width: 91.56%; }
    .page-galerie-videos .gallery-header { margin-left: 4.62%; width: 33.5%; }
    .page-galerie-videos .gallery-label { top: 6px; left: 28.99%; width: 71.02%; min-height: 20px; padding: 0 0 0 5px; line-height: 17px; }
    .page-galerie-videos .gallery-title { width: 100%; margin-top: 11px; margin-left: 0; left: 0; font-size: 24px; line-height: 29px; }
    .page-galerie-videos .gallery-intro { margin-top: 11px; margin-left: 4.62%; width: 99.76%; }
    .page-galerie-videos .video-gallery { margin-top: 8px; margin-left: 5.1%; width: 93.94%; }
}

/* 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-min-height: 753px; --spacer-above: 7811px; }
.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 (min-width: 811px) and (max-width: 1000px) {
    .page-photos { --page-min-height: 752px; --spacer-above: 7803px; }
}
@media (min-width: 701px) and (max-width: 810px) {
    .page-photos { --spacer-above: 7799px; }
}
@media (max-width: 700px) {
    .album img { width: 410px; }
}
@media (min-width: 601px) and (max-width: 700px) {
    .page-photos { --spacer-above: 6221px; }
}
@media (min-width: 451px) and (max-width: 600px) {
    .page-photos { --spacer-above: 6217px; }
}
@media (max-width: 450px) {
    .page-photos { --spacer-above: 5468px; }
    .album { padding: 10px; }
    .album h2,
    .album h3 { max-width: 100%; }
}

/* Pages albums (stagebormes202504, stageppa202409, cassis003, lavandou001, lavandou002) :
   en-tête « Photos », titre ombré, galerie justifiée. */
.page-stagebormes202504, .page-stageppa202409, .page-cassis003, .page-lavandou001, .page-lavandou002 {
    --page-min-height: 753px;
}
.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) {
    .page-stagebormes202504, .page-stageppa202409, .page-cassis003, .page-lavandou001, .page-lavandou002 { --page-min-height: 752px; }
    .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) {
    .page-stagebormes202504, .page-stageppa202409, .page-cassis003, .page-lavandou001 { --spacer-above: 949px; }
    .page-lavandou002 { --spacer-above: 1007px; }
    .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) {
    .page-stagebormes202504, .page-stageppa202409, .page-cassis003, .page-lavandou001, .page-lavandou002 { --spacer-above: 967px; }
    .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) {
    .page-stagebormes202504, .page-stageppa202409, .page-cassis003, .page-lavandou001, .page-lavandou002 { --spacer-above: 963px; }
    .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) {
    .page-stagebormes202504, .page-stageppa202409, .page-cassis003, .page-lavandou001, .page-lavandou002 { --spacer-above: 969px; }
    .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)
   --------------------------------------------------
   Collage Muse sur fond photo : le menu est dans le flux (pas de bandeau fixe), puis logo, titre et un
   « groupe » où chaque bloc est positionné depuis le haut et la gauche du groupe. Une grille à une
   cellule (.home-stack) reproduit ce comportement : margin-top / margin-left / width par bloc, hauteur
   du groupe = bloc le plus bas. Huit points de rupture Muse propres à cette page (1211 / 1031 / 1001 /
   826 / 811 / 601 / 591). Les valeurs par bloc sont converties depuis le CSS Muse (tools/build, voir
   PLAN.md) ; les ajustements manuels sont en fin de section.
   ================================================== */
body.page-index { background: #DAEBFF url("../images/background.jpg") no-repeat center center; background-size: cover; }
.page-index .site-header { position: relative; height: 48px; min-height: 0; background: none; }
.page-index .mobile-logo,
.page-index .mobile-title { display: none; }
@media (min-width: 1001px) {
    .page-index .menu > li > a { padding: 4px 0; font-size: 22px; line-height: 26px; }
}
.page-index { --page-min-height: 753px; --spacer-above: 3352px; }
.page-index .page-content { margin-top: 0 !important; }

.home-stack { display: grid; grid-template-columns: 100%; }
/* position: relative pour que l'ordre du DOM fasse l'empilement (le voile à 25 % d'opacité passerait sinon au-dessus) */
.home-stack > * { grid-area: 1 / 1; justify-self: start; align-self: start; min-width: 0; position: relative; }

.home-logo { position: relative; overflow: hidden; }
.home-logo img { display: block; width: 205px; height: 208px; }
.home-title { position: relative; 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); }
.home-title .accent { color: #93D4E2; }
/* Sous 1211 px, Muse exportait ce titre en image (police Times étirée) ; ici texte réel en Bebas Neue,
   dans un bloc de la hauteur de l'image Muse pour ne pas déplacer le collage. */
.home-title-break { display: none; }

.home-veil { background: #7F7F7F; opacity: 0.25; }
.home-welcome { color: #FFFFFF; font-family: var(--font-title); font-weight: 900; }
.home-welcome a { color: #FCEE21; }
.home-text { color: #FFFFFF; font-family: var(--font-text); font-weight: 400; font-size: 20px; }
.home-band { background: #3598DB; position: relative; }
.home-card { position: relative; }
.card-photo { position: relative; overflow: hidden; }
.card-photo img { display: block; width: 100%; height: auto; }
.card-label { color: #FFFFFF; font-family: var(--font-menu); font-weight: 400; }
/* Bouton « Plus » : dessiné en CSS (Muse l'exportait en 96 PNG : une image par carte, par largeur et par
   état, texte compris). Le rectangle du bouton (hauteur = rapport Muse par largeur, aspect-ratio ci-dessous)
   occupe la largeur du lien et est centré verticalement dans un lien 17 px plus haut que lui, comme l'était
   l'image centrée ; le texte (14 px pour 32 px de haut) suit la hauteur du bouton en unités de conteneur, comme
   l'image se réduisait avec la carte. Couleurs, rayon et police relevés sur les PNG. */
.card-more { display: block; position: relative; box-sizing: content-box; padding: 8.5px 0; container-type: size;
             color: #4E4E4E; text-decoration: none; }
.card-more span { position: absolute; inset: 8.5px 0; display: flex; align-items: center; justify-content: center;
                  border-radius: 3px; background: linear-gradient(#FCED20, #FAB039);
                  font: 14px/1 "Times New Roman", Times, serif; font-size: 43.75cqh; padding-bottom: 3cqh; }
.card-more:hover span { color: #FFFFFF; background: linear-gradient(#EE8400, #E84C3A); }
.home-diver { overflow: hidden; }
.home-diver img { display: block; width: 100%; height: auto; }
.home-slideshow-1,
.home-slideshow-2 { transform: none; }
.home-logos { width: 100%; }
.home-logo-lifras img { display: block; width: 202px; height: 72px; }
.home-logo-cmas img { display: block; width: 95px; height: 104px; }

/* Valeurs Muse par bloc et par point de rupture (converties automatiquement) */
.home-collage { margin-top: 462px; width: 100%; margin-left: 7.28%; }
.home-veil { width: 90%; height: 2472px; margin-left: 0.08%; }
.home-welcome { margin-top: 23px; width: 90%; min-height: 101px; line-height: 29px; font-size: 24px; text-align: center; margin-left: 0; }
.home-slideshow-1 { margin-top: 131px; width: 90.07%; height: 400px; margin-left: 0; }
.home-slideshow-2 { margin-top: 1587px; width: 44.21%; height: 400px; margin-left: 45.8%; }
.home-text-belgique { margin-top: 597px; width: 35.41%; min-height: 158px; line-height: 24px; margin-left: 1.6%; }
.home-text-sorties { margin-top: 1590px; width: 42.69%; min-height: 110px; line-height: 24px; margin-left: 1.6%; }
.home-text-vous { margin-top: 2190px; width: 86.96%; min-height: 110px; line-height: 24px; margin-left: 1.6%; }
.home-band-cours { margin-top: 1146px; width: 90%; padding-top: 17px; padding-bottom: 18px; margin-left: 0.08%; }
.home-text-moniteurs { width: 96.55%; min-height: 82px; line-height: 24px; text-align: left; margin-left: 1.69%; }
.home-cards { margin-top: 43px; width: 96.64%; margin-left: 1.69%; }
.home-card-cours { width: 15.35%; margin-left: 0; }
.home-card-entrainements { width: 15.35%; margin-left: 20.41%; }
.home-card-brevets { width: 15.35%; margin-left: 40.72%; }
.home-text-piscine { margin-top: 18px; width: 40.72%; min-height: 110px; line-height: 24px; margin-left: 59.29%; }
.home-card-mers { margin-top: 563px; width: 13.35%; margin-left: 73.77%; }
.home-card-lacs { margin-top: 563px; width: 13.35%; margin-left: 56.03%; }
.home-card-carrieres { margin-top: 563px; width: 13.35%; margin-left: 38.37%; }
.home-card-cours .card-photo { width: 80.12%; border-radius: 50%; margin-left: 10.23%; }
.home-card-entrainements .card-photo { width: 80.12%; border-radius: 50%; margin-left: 10.23%; }
.home-card-brevets .card-photo { width: 80.12%; border-radius: 50%; margin-left: 10.23%; }
.home-card-mers .card-photo { width: 80.12%; border-radius: 50%; margin-left: 10.23%; }
.home-card-lacs .card-photo { width: 80.12%; border-radius: 50%; margin-left: 10.23%; }
.home-card-carrieres .card-photo { width: 80.12%; border-radius: 50%; margin-left: 10.23%; }
.home-card-cours .card-label { margin-top: 15px; width: 100%; min-height: 16px; line-height: 36px; font-size: 30px; text-align: center; margin-left: 0; }
.home-card-cours .card-more { margin-top: 16px; width: 50%; margin-left: 25%; }
.home-card-cours .card-more { aspect-ratio: 100 / 36.36363636363637; }
.home-card-entrainements .card-label { margin-top: 15px; width: 100%; min-height: 16px; line-height: 36px; font-size: 30px; text-align: center; margin-left: 0; }
.home-card-entrainements .card-more { margin-top: 16px; width: 50%; margin-left: 25%; }
.home-card-entrainements .card-more { aspect-ratio: 100 / 36.36363636363637; }
.home-card-brevets .card-label { margin-top: 15px; width: 100%; min-height: 16px; line-height: 36px; font-size: 30px; text-align: center; margin-left: 0; }
.home-card-brevets .card-more { margin-top: 16px; width: 50%; margin-left: 25%; }
.home-card-brevets .card-more { aspect-ratio: 100 / 36.36363636363637; }
.home-card-mers .card-label { margin-top: 15px; width: 100%; min-height: 16px; line-height: 36px; font-size: 30px; text-align: center; margin-left: 0; }
.home-card-mers .card-more { margin-top: 16px; width: 50%; margin-left: 25%; }
.home-card-mers .card-more { aspect-ratio: 100 / 36.36363636363637; }
.home-card-lacs .card-label { margin-top: 15px; width: 100%; min-height: 16px; line-height: 36px; font-size: 30px; text-align: center; margin-left: 0; }
.home-card-lacs .card-more { margin-top: 16px; width: 50%; margin-left: 25%; }
.home-card-lacs .card-more { aspect-ratio: 100 / 36.36363636363637; }
.home-card-carrieres .card-label { margin-top: 15px; width: 100%; min-height: 16px; line-height: 36px; font-size: 30px; text-align: center; margin-left: 0; }
.home-card-carrieres .card-more { margin-top: 16px; width: 50%; margin-left: 25%; }
.home-card-carrieres .card-more { aspect-ratio: 100 / 36.36363636363637; }
.home-diver-1 { margin-top: 821px; width: 547px; margin-left: 42.01%; }
.home-diver-2 { margin-top: 1899px; width: 517px; margin-left: 2.28%; }
.home-band-lifras { margin-top: 2334px; width: 90%; padding-bottom: 7px; margin-left: 0.08%; }
.home-text-lifras { margin-top: 30px; width: 47.44%; min-height: 80px; line-height: 24px; margin-left: 1.69%; }
.home-logo-lifras { margin-top: 30px; width: 202px; margin-left: 56.28%; }
.home-logo-cmas { margin-top: 14px; width: 95px; margin-left: 85.35%; }
.home-logo { margin-top: 79px; width: 210px; margin-left: calc(52.32% - 106px); }
.home-logo img { margin-bottom: 2px; margin-left: -1px; }
.home-title { margin-top: 23px; width: 480px; min-height: 50px; line-height: 58px; font-size: 48px; text-align: center; margin-left: calc(52.32% - 241px); }
.page-index .page-content { margin-top: 14px; width: 95.58%; padding-bottom: 0px; margin-left: 0; }
@media (min-width: 1031px) and (max-width: 1210px) {
    .home-collage { margin-top: 301px; margin-left: 0; }
    .home-veil { width: 99.62%; height: 2177px; margin-left: 8.14%; }
    .home-welcome { margin-top: 21px; width: 99.62%; min-height: 100px; line-height: 24px; font-size: 20px; margin-left: 8.04%; }
    .home-slideshow-1 { margin-top: 126px; width: 99.72%; margin-left: 8.04%; }
    .home-slideshow-2 { margin-top: 1467px; width: 48.9%; margin-left: 58.76%; }
    .home-text-belgique { margin-top: 591px; width: 39.14%; line-height: 22px; margin-left: 9.77%; }
    .home-text-sorties { margin-top: 1470px; width: 47.28%; line-height: 22px; margin-left: 9.77%; }
    .home-text-vous { margin-top: 1891px; width: 96.27%; line-height: 22px; margin-left: 9.67%; }
    .home-band-cours { margin-top: 1046px; width: 99.62%; padding-top: 11px; padding-bottom: 31px; margin-left: 8.14%; }
    .home-text-moniteurs { line-height: 22px; margin-left: 1.73%; }
    .home-cards { margin-top: 57px; width: 96.55%; margin-left: 1.73%; }
    .home-card-cours { width: 15.33%; }
    .home-card-entrainements { width: 15.33%; margin-left: 20.4%; }
    .home-card-brevets { width: 15.33%; margin-left: 40.8%; }
    .home-text-piscine { width: 40.7%; line-height: 22px; margin-left: 59.31%; }
    .home-card-mers { margin-top: 557px; width: 14.74%; margin-left: 89.67%; }
    .home-card-lacs { margin-top: 557px; width: 14.74%; margin-left: 70.05%; }
    .home-card-carrieres { margin-top: 557px; width: 14.74%; margin-left: 50.44%; }
    .home-card-cours .card-photo { width: 80.52%; margin-left: 9.75%; }
    .home-card-entrainements .card-photo { width: 80.52%; margin-left: 9.75%; }
    .home-card-brevets .card-photo { width: 80.52%; margin-left: 9.75%; }
    .home-card-mers .card-photo { width: 80.52%; margin-left: 9.75%; }
    .home-card-lacs .card-photo { width: 80.52%; margin-left: 9.75%; }
    .home-card-carrieres .card-photo { width: 80.52%; margin-left: 9.75%; }
    .home-card-cours .card-label { line-height: 29px; font-size: 24px; }
    .home-card-cours .card-more { margin-left: 25.33%; }
    .home-card-cours .card-more { aspect-ratio: 100 / 41.55844155844156; }
    .home-card-entrainements .card-label { line-height: 29px; font-size: 24px; }
    .home-card-entrainements .card-more { margin-left: 24.68%; }
    .home-card-entrainements .card-more { aspect-ratio: 100 / 41.55844155844156; }
    .home-card-brevets .card-label { line-height: 29px; font-size: 24px; }
    .home-card-brevets .card-more { margin-left: 25.33%; }
    .home-card-brevets .card-more { aspect-ratio: 100 / 41.55844155844156; }
    .home-card-mers .card-label { line-height: 29px; font-size: 24px; }
    .home-card-mers .card-more { margin-left: 25.33%; }
    .home-card-mers .card-more { aspect-ratio: 100 / 41.55844155844156; }
    .home-card-lacs .card-label { line-height: 29px; font-size: 24px; }
    .home-card-lacs .card-more { margin-left: 25.33%; }
    .home-card-lacs .card-more { aspect-ratio: 100 / 41.55844155844156; }
    .home-card-carrieres .card-label { line-height: 29px; font-size: 24px; }
    .home-card-carrieres .card-more { margin-left: 25.33%; }
    .home-card-carrieres .card-more { aspect-ratio: 100 / 41.55844155844156; }
    .home-diver-1 { margin-top: 794px; width: 410px; margin-left: 52.26%; }
    .home-diver-2 { margin-top: 1628px; width: 400px; margin-left: 11.49%; }
    .home-band-lifras { margin-top: 2032px; width: 99.62%; padding-bottom: 15px; margin-left: 8.04%; }
    .home-text-lifras { width: 47.46%; line-height: 22px; margin-left: 1.73%; }
    .home-logo-lifras { margin-left: 56.2%; }
    .home-logo-cmas { margin-left: 85.31%; }
    .home-logo { margin-left: calc(57.9% - 106px); }
    .home-logo img { margin-bottom: 20px; }
    .home-title { margin-top: 17px; margin-left: calc(57.9% - 247px); width: auto; min-height: 0; }
    .page-index .page-content { width: 86.37%; }
}
@media (min-width: 1001px) and (max-width: 1030px) {
    .home-collage { margin-top: 159px; margin-left: 0; }
    .home-veil { width: 99.44%; height: 1899px; margin-left: 8.09%; }
    .home-welcome { margin-top: 26px; width: 99.44%; min-height: 80px; line-height: 19px; font-size: 16px; margin-left: 8.09%; }
    .home-slideshow-1 { margin-top: 106px; width: 99.56%; margin-left: 8.09%; }
    .home-slideshow-2 { margin-top: 1306px; width: 48.83%; margin-left: 58.71%; }
    .home-text-belgique { margin-top: 572px; width: 39.17%; line-height: 17px; margin-left: 9.78%; }
    .home-text-sorties { margin-top: 1309px; width: 47.14%; line-height: 17px; margin-left: 9.78%; }
    .home-text-vous { margin-top: 1621px; width: 47.14%; line-height: 17px; margin-left: 9.78%; }
    .home-band-cours { margin-top: 966px; width: 99.44%; padding-top: 21px; padding-bottom: 21px; margin-left: 8.09%; }
    .home-text-moniteurs { width: 96.51%; line-height: 17px; margin-left: 1.7%; }
    .home-cards { margin-top: -1px; width: 96.51%; margin-left: 1.7%; }
    .home-card-cours { width: 15.33%; }
    .home-card-entrainements { width: 15.33%; margin-left: 20.36%; }
    .home-card-brevets { width: 15.33%; margin-left: 40.82%; }
    .home-text-piscine { margin-top: 39px; width: 40.82%; line-height: 17px; margin-left: 59.19%; }
    .home-card-mers { margin-top: 537px; width: 14.71%; margin-left: 89.58%; }
    .home-card-lacs { margin-top: 537px; width: 14.71%; margin-left: 70.05%; }
    .home-card-carrieres { margin-top: 537px; width: 14.71%; margin-left: 50.41%; }
    .home-card-cours .card-photo { width: 80.16%; margin-left: 9.93%; }
    .home-card-entrainements .card-photo { width: 80.16%; margin-left: 9.93%; }
    .home-card-brevets .card-photo { width: 80.16%; margin-left: 9.93%; }
    .home-card-mers .card-photo { width: 80.16%; margin-left: 9.93%; }
    .home-card-lacs .card-photo { width: 80.16%; margin-left: 9.93%; }
    .home-card-carrieres .card-photo { width: 80.16%; margin-left: 9.93%; }
    .home-card-cours .card-label { margin-top: 16px; line-height: 22px; font-size: 18px; }
    .home-card-cours .card-more { margin-top: 15px; width: 51.15%; margin-left: 25.96%; }
    .home-card-cours .card-more { aspect-ratio: 100 / 43.28358208955223; }
    .home-card-entrainements .card-label { margin-top: 16px; line-height: 22px; font-size: 18px; }
    .home-card-entrainements .card-more { margin-top: 15px; width: 51.15%; margin-left: 25.2%; }
    .home-card-entrainements .card-more { aspect-ratio: 100 / 43.28358208955223; }
    .home-card-brevets .card-label { margin-top: 16px; line-height: 22px; font-size: 18px; }
    .home-card-brevets .card-more { margin-top: 15px; width: 51.15%; margin-left: 25.2%; }
    .home-card-brevets .card-more { aspect-ratio: 100 / 43.28358208955223; }
    .home-card-mers .card-label { margin-top: 16px; line-height: 22px; font-size: 18px; }
    .home-card-mers .card-more { margin-top: 15px; width: 51.15%; margin-left: 26.72%; }
    .home-card-mers .card-more { aspect-ratio: 100 / 43.28358208955223; }
    .home-card-lacs .card-label { margin-top: 16px; line-height: 22px; font-size: 18px; }
    .home-card-lacs .card-more { margin-top: 15px; width: 51.15%; margin-left: 25.2%; }
    .home-card-lacs .card-more { aspect-ratio: 100 / 43.28358208955223; }
    .home-card-carrieres .card-label { margin-top: 16px; line-height: 22px; font-size: 18px; }
    .home-card-carrieres .card-more { margin-top: 15px; width: 51.15%; margin-left: 25.2%; }
    .home-card-carrieres .card-more { aspect-ratio: 100 / 43.28358208955223; }
    .home-diver-1 { margin-top: 750px; width: 339px; margin-left: 52.88%; }
    .home-diver-2 { margin-top: 1437px; width: 295px; margin-left: 11.69%; }
    .home-band-lifras { margin-top: 1757px; width: 99.44%; padding-bottom: 15px; margin-left: 8.09%; }
    .home-text-lifras { width: 47.41%; line-height: 17px; margin-left: 1.7%; }
    .home-logo-lifras { margin-left: 56.21%; }
    .home-logo-cmas { margin-left: 85.33%; }
    .home-logo { margin-left: calc(57.81% - 106px); }
    .home-logo img { margin-bottom: 20px; }
    .home-title { margin-top: 17px; margin-left: calc(57.81% - 257px); width: auto; min-height: 0; }
    .page-index .page-content { width: 86.51%; }
}
@media (min-width: 826px) and (max-width: 1000px) {
    .home-collage { margin-top: 217px; margin-left: 0; }
    .home-veil { width: 99.66%; height: 1899px; margin-left: 8.12%; }
    .home-welcome { margin-top: 26px; width: 99.66%; min-height: 80px; line-height: 19px; font-size: 16px; margin-left: 8.12%; }
    .home-slideshow-1 { margin-top: 106px; width: 99.77%; margin-left: 8.12%; }
    .home-slideshow-2 { margin-top: 1306px; width: 48.9%; margin-left: 58.88%; }
    .home-text-belgique { margin-top: 572px; width: 39.17%; line-height: 17px; margin-left: 9.86%; }
    .home-text-sorties { margin-top: 1309px; width: 47.28%; line-height: 17px; margin-left: 9.86%; }
    .home-text-vous { margin-top: 1621px; width: 47.28%; line-height: 17px; margin-left: 9.86%; }
    .home-band-cours { margin-top: 966px; width: 99.66%; padding-top: 21px; padding-bottom: 22px; margin-left: 8.12%; }
    .home-text-moniteurs { width: 96.52%; line-height: 17px; margin-left: 1.75%; }
    .home-cards { margin-top: -1px; width: 96.52%; margin-left: 1.63%; }
    .home-card-cours { width: 15.43%; }
    .home-card-entrainements { width: 15.43%; margin-left: 20.37%; }
    .home-card-brevets { width: 15.43%; margin-left: 40.73%; }
    .home-text-piscine { margin-top: 39px; width: 40.73%; line-height: 17px; margin-left: 59.16%; }
    .home-card-mers { margin-top: 537px; width: 14.84%; margin-left: 89.82%; }
    .home-card-lacs { margin-top: 537px; width: 14.84%; margin-left: 70.12%; }
    .home-card-carrieres { margin-top: 537px; width: 14.84%; margin-left: 50.54%; }
    .home-card-cours .card-photo { width: 79.69%; margin-left: 10.16%; }
    .home-card-entrainements .card-photo { width: 79.69%; margin-left: 10.16%; }
    .home-card-brevets .card-photo { width: 79.69%; margin-left: 10.16%; }
    .home-card-mers .card-photo { width: 79.69%; margin-left: 10.16%; }
    .home-card-lacs .card-photo { width: 79.69%; margin-left: 10.16%; }
    .home-card-carrieres .card-photo { width: 79.69%; margin-left: 10.16%; }
    .home-card-cours .card-label { margin-top: 16px; line-height: 22px; font-size: 18px; }
    .home-card-cours .card-more { margin-top: 15px; margin-left: 25.79%; }
    .home-card-cours .card-more { aspect-ratio: 100 / 50; }
    .home-card-entrainements .card-label { margin-top: 16px; line-height: 22px; font-size: 18px; }
    .home-card-entrainements .card-more { margin-top: 15px; }
    .home-card-entrainements .card-more { aspect-ratio: 100 / 50; }
    .home-card-brevets .card-label { margin-top: 16px; line-height: 22px; font-size: 18px; }
    .home-card-brevets .card-more { margin-top: 15px; }
    .home-card-brevets .card-more { aspect-ratio: 100 / 50; }
    .home-card-mers .card-label { margin-top: 16px; line-height: 22px; font-size: 18px; }
    .home-card-mers .card-more { margin-top: 15px; margin-left: 26.57%; }
    .home-card-mers .card-more { aspect-ratio: 100 / 50; }
    .home-card-lacs .card-label { margin-top: 16px; line-height: 22px; font-size: 18px; }
    .home-card-lacs .card-more { margin-top: 15px; }
    .home-card-lacs .card-more { aspect-ratio: 100 / 50; }
    .home-card-carrieres .card-label { margin-top: 16px; line-height: 22px; font-size: 18px; }
    .home-card-carrieres .card-more { margin-top: 15px; }
    .home-card-carrieres .card-more { aspect-ratio: 100 / 50; }
    .home-diver-1 { margin-top: 750px; width: 339px; margin-left: 53.08%; }
    .home-diver-2 { margin-top: 1437px; width: 295px; margin-left: 11.72%; }
    .home-band-lifras { margin-top: 1757px; width: 99.66%; padding-bottom: 15px; margin-left: 8.12%; }
    .home-text-lifras { width: 47.45%; line-height: 17px; margin-left: 1.75%; }
    .home-logo { margin-left: calc(57.94% - 106px); }
    .home-logo img { margin-bottom: 20px; }
    .home-title { margin-top: 17px; margin-left: calc(57.94% - 257px); width: auto; min-height: 0; }
    .page-index .page-content { width: 86.3%; }
}
@media (min-width: 811px) and (max-width: 825px) {
    .home-collage { margin-top: 265px; width: 92.75%; margin-left: 0; }
    .home-veil { width: 99.17%; height: 1833px; margin-left: 8.11%; }
    .home-welcome { margin-top: 25px; width: 99.17%; min-height: 77px; line-height: 19px; font-size: 16px; margin-left: 8.11%; }
    .home-slideshow-1 { margin-top: 107px; width: 99.17%; height: 200px; margin-left: 8.11%; }
    .home-slideshow-2 { margin-top: 1494px; width: 50.56%; height: 200px; margin-left: 7.97%; }
    .home-text-belgique { margin-top: 317px; width: 95.68%; min-height: 88px; line-height: 17px; text-align: left; margin-left: 9.79%; }
    .home-text-sorties { margin-top: 1214px; width: 95.68%; line-height: 17px; margin-left: 9.79%; }
    .home-text-vous { margin-top: 1494px; width: 45.54%; min-height: 196px; line-height: 17px; margin-left: 59.93%; }
    .home-band-cours { margin-top: 816px; width: 99.17%; padding-top: 10px; padding-bottom: 26.299999999999727px; margin-left: 7.69%; }
    .home-text-moniteurs { width: 96.48%; line-height: 17px; margin-left: 2.12%; }
    .home-cards { margin-top: 15px; width: 82.12%; margin-left: 9.3%; }
    .home-card-cours { width: 18.02%; }
    .home-card-entrainements { width: 34.31%; margin-left: 32.94%; }
    .home-card-brevets { width: 18.02%; margin-left: 81.99%; }
    .home-text-piscine { margin-top: 9px; width: 96.48%; min-height: 81px; line-height: 17px; margin-left: 2.12%; }
    .home-card-mers { margin-top: 441px; width: 27.94%; margin-left: 77.39%; }
    .home-card-lacs { margin-top: 441px; width: 20.95%; margin-left: 45.4%; }
    .home-card-carrieres { margin-top: 441px; width: 20.95%; margin-left: 9.79%; }
    .home-card-cours .card-photo { width: 80%; margin-left: 11.43%; }
    .home-card-entrainements .card-photo { width: 42%; margin-left: 27.51%; }
    .home-card-brevets .card-photo { width: 80%; margin-left: 7.62%; }
    .home-card-mers .card-photo { width: 56.5%; margin-left: 23%; }
    .home-card-lacs .card-photo { width: 75.34%; margin-left: 12.67%; }
    .home-card-carrieres .card-photo { width: 75.34%; margin-left: 12.67%; }
    .home-card-cours .card-label { margin-top: 9px; line-height: 22px; font-size: 18px; }
    .home-card-cours .card-more { margin-top: 9px; width: 71.43%; margin-left: 14.29%; }
    .home-card-cours .card-more { aspect-ratio: 100 / 41.333333333333336; }
    .home-card-entrainements .card-label { margin-top: 9px; line-height: 22px; font-size: 18px; }
    .home-card-entrainements .card-more { margin-top: 9px; width: 37.5%; margin-left: 29%; }
    .home-card-entrainements .card-more { aspect-ratio: 100 / 41.333333333333336; }
    .home-card-brevets .card-label { margin-top: 10px; line-height: 22px; font-size: 18px; }
    .home-card-brevets .card-more { margin-top: 9px; width: 71.43%; margin-left: 16.2%; }
    .home-card-brevets .card-more { aspect-ratio: 100 / 41.333333333333336; }
    .home-card-mers .card-label { margin-top: 12px; min-height: 21px; line-height: 22px; font-size: 18px; }
    .home-card-mers .card-more { margin-top: 11px; margin-left: 26%; }
    .home-card-mers .card-more { aspect-ratio: 100 / 31; }
    .home-card-lacs .card-label { margin-top: 12px; min-height: 23px; line-height: 22px; font-size: 18px; }
    .home-card-lacs .card-more { margin-top: 11px; width: 66.67%; margin-left: 17.34%; }
    .home-card-lacs .card-more { aspect-ratio: 100 / 31; }
    .home-card-carrieres .card-label { margin-top: 12px; min-height: 22px; line-height: 22px; font-size: 18px; }
    .home-card-carrieres .card-more { margin-top: 12px; width: 66.67%; margin-left: 16.67%; }
    .home-card-carrieres .card-more { aspect-ratio: 100 / 31; }
    .home-diver-1 { margin-top: 654px; width: 242px; margin-left: 54.06%; }
    .home-diver-2 { margin-top: 1342px; width: 238px; margin-left: 19.85%; }
    .home-band-lifras { margin-top: 1710px; width: 99.17%; padding-bottom: 5px; margin-left: 8.11%; }
    .home-text-lifras { width: 57.33%; line-height: 17px; margin-left: 1.7%; }
    .home-logo-lifras { width: 141px; margin-left: 61.27%; }
    .home-logo-cmas { margin-top: 21px; width: 66px; margin-left: 85.5%; }
    .home-logo { margin-top: 25px; width: 199px; margin-left: calc(80.57% - 99px); }
    .home-logo img { margin-bottom: 19px; }
    .home-title { margin-top: 22px; margin-left: calc(53.44% - 247px); width: auto; min-height: 0; }
    .page-index .page-content { width: 93.58%; }
}
@media (min-width: 601px) and (max-width: 810px) {
    .home-collage { margin-top: 265px; width: 92.74%; margin-left: 0; }
    .home-veil { width: 99.29%; height: 1833px; margin-left: 7.99%; }
    .home-welcome { margin-top: 25px; width: 99.29%; min-height: 77px; line-height: 19px; font-size: 16px; margin-left: 8.13%; }
    .home-slideshow-1 { margin-top: 107px; width: 99.29%; height: 200px; margin-left: 8.13%; }
    .home-slideshow-2 { margin-top: 1494px; width: 50.72%; height: 200px; margin-left: 7.99%; }
    .home-text-belgique { margin-top: 317px; width: 95.87%; min-height: 88px; line-height: 17px; text-align: left; margin-left: 9.84%; }
    .home-text-sorties { margin-top: 1214px; width: 95.87%; line-height: 17px; margin-left: 9.84%; }
    .home-text-vous { margin-top: 1494px; width: 45.59%; min-height: 196px; line-height: 17px; margin-left: 60.13%; }
    .home-band-cours { margin-top: 816px; width: 99.29%; padding-top: 10px; padding-bottom: 26px; margin-left: 7.7%; }
    .home-text-moniteurs { width: 96.56%; line-height: 17px; margin-left: 2.16%; }
    .home-cards { margin-top: 15px; width: 82.21%; margin-left: 9.19%; }
    .home-card-cours { width: 17.98%; }
    .home-card-entrainements { width: 34.21%; margin-left: 32.81%; }
    .home-card-brevets { width: 17.98%; margin-left: 81.85%; }
    .home-text-piscine { margin-top: 6px; width: 96.56%; min-height: 81px; line-height: 17px; margin-left: 2.16%; }
    .home-card-mers { margin-top: 441px; width: 27.93%; margin-left: 77.51%; }
    .home-card-lacs { margin-top: 441px; width: 21.09%; margin-left: 45.45%; }
    .home-card-carrieres { margin-top: 441px; width: 21.09%; margin-left: 9.84%; }
    .home-card-cours .card-photo { width: 80.59%; margin-left: 11.66%; }
    .home-card-entrainements .card-photo { width: 42.35%; margin-left: 27.56%; }
    .home-card-brevets .card-photo { width: 80.59%; margin-left: 7.77%; }
    .home-card-mers .card-photo { width: 56.64%; margin-left: 22.96%; }
    .home-card-lacs .card-photo { width: 75%; margin-left: 12.84%; }
    .home-card-carrieres .card-photo { width: 74.33%; margin-left: 12.84%; }
    .home-card-cours .card-label { margin-top: 8px; line-height: 22px; font-size: 18px; }
    .home-card-cours .card-more { margin-top: 9px; width: 71.85%; margin-left: 13.6%; }
    .home-card-cours .card-more { aspect-ratio: 100 / 43.24324324324324; }
    .home-card-entrainements .card-label { margin-top: 8px; line-height: 22px; font-size: 18px; }
    .home-card-entrainements .card-more { margin-top: 9px; width: 37.76%; margin-left: 29.09%; }
    .home-card-entrainements .card-more { aspect-ratio: 100 / 43.24324324324324; }
    .home-card-brevets .card-label { margin-top: 9px; line-height: 22px; font-size: 18px; }
    .home-card-brevets .card-more { margin-top: 9px; width: 71.85%; margin-left: 16.51%; }
    .home-card-brevets .card-more { aspect-ratio: 100 / 43.24324324324324; }
    .home-card-mers .card-label { margin-top: 12px; min-height: 21px; line-height: 22px; font-size: 18px; }
    .home-card-mers .card-more { margin-top: 11px; margin-left: 26.03%; }
    .home-card-mers .card-more { aspect-ratio: 100 / 32.6530612244898; }
    .home-card-lacs .card-label { margin-top: 12px; min-height: 23px; line-height: 22px; font-size: 18px; }
    .home-card-lacs .card-more { margin-top: 11px; width: 66.22%; margin-left: 16.9%; }
    .home-card-lacs .card-more { aspect-ratio: 100 / 32.6530612244898; }
    .home-card-carrieres .card-label { margin-top: 13px; min-height: 22px; line-height: 22px; font-size: 18px; }
    .home-card-carrieres .card-more { margin-top: 12px; width: 66.22%; margin-left: 16.9%; }
    .home-card-carrieres .card-more { aspect-ratio: 100 / 32.6530612244898; }
    .home-diver-1 { margin-top: 654px; width: 242px; margin-left: 54.14%; }
    .home-diver-2 { margin-top: 1342px; width: 238px; margin-left: 19.96%; }
    .home-band-lifras { margin-top: 1710px; width: 99.29%; padding-bottom: 5px; margin-left: 8.13%; }
    .home-text-lifras { width: 57.39%; line-height: 17px; margin-left: 1.73%; }
    .home-logo-lifras { width: 141px; margin-left: 61.27%; }
    .home-logo-cmas { margin-top: 21px; width: 66px; margin-left: 85.51%; }
    .home-logo { margin-top: 25px; width: 199px; margin-left: calc(80.36% - 101px); }
    .home-logo img { margin-bottom: 19px; }
    .home-title { margin-top: 22px; margin-left: calc(53.51% - 247px); width: auto; min-height: 0; }
    .page-index .page-content { width: 93.46%; }
}
@media (min-width: 591px) and (max-width: 600px) {
    .home-collage { margin-top: 265px; width: 94.19%; margin-left: 0; }
    .home-veil { width: 99.62%; height: 1833px; margin-left: 8.12%; }
    .home-welcome { margin-top: 25px; width: 99.62%; min-height: 77px; line-height: 19px; font-size: 16px; margin-left: 8.12%; }
    .home-slideshow-1 { margin-top: 107px; width: 99.62%; height: 200px; margin-left: 8.12%; }
    .home-slideshow-2 { margin-top: 1494px; width: 50.97%; height: 200px; margin-left: 7.93%; }
    .home-text-belgique { margin-top: 317px; width: 96.14%; min-height: 88px; line-height: 17px; text-align: left; margin-left: 9.86%; }
    .home-text-sorties { margin-top: 1214px; width: 96.14%; line-height: 17px; margin-left: 9.86%; }
    .home-text-vous { margin-top: 1494px; width: 45.76%; min-height: 196px; line-height: 17px; margin-left: 60.24%; }
    .home-band-cours { margin-top: 816px; width: 99.62%; padding-top: 10px; padding-bottom: 26.310869565217217px; margin-left: 7.73%; }
    .home-text-moniteurs { width: 96.52%; line-height: 17px; margin-left: 2.14%; }
    .home-cards { margin-top: 15px; width: 82.18%; margin-left: 9.31%; }
    .home-card-cours { width: 18.17%; }
    .home-card-entrainements { width: 34.2%; margin-left: 32.79%; }
    .home-card-brevets { width: 18.17%; margin-left: 82.08%; }
    .home-text-piscine { margin-top: 5px; width: 96.52%; min-height: 81px; line-height: 17px; margin-left: 2.14%; }
    .home-card-mers { margin-top: 441px; width: 28%; margin-left: 77.81%; }
    .home-card-lacs { margin-top: 441px; width: 21.05%; margin-left: 45.57%; }
    .home-card-carrieres { margin-top: 441px; width: 21.05%; margin-left: 9.86%; }
    .home-card-cours .card-photo { width: 79.23%; margin-left: 11.69%; }
    .home-card-entrainements .card-photo { width: 42.07%; margin-left: 27.59%; }
    .home-card-brevets .card-photo { width: 79.23%; margin-left: 7.8%; }
    .home-card-mers .card-photo { width: 56.56%; margin-left: 22.76%; }
    .home-card-lacs .card-photo { width: 75.23%; margin-left: 12.85%; }
    .home-card-carrieres .card-photo { width: 75.23%; margin-left: 12.85%; }
    .home-card-cours .card-label { margin-top: 9px; line-height: 22px; font-size: 18px; }
    .home-card-cours .card-more { margin-top: 9px; width: 71.43%; margin-left: 14.29%; }
    .home-card-cours .card-more { aspect-ratio: 100 / 58.18181818181818; }
    .home-card-entrainements .card-label { margin-top: 9px; line-height: 22px; font-size: 18px; }
    .home-card-entrainements .card-more { margin-top: 9px; width: 37.94%; margin-left: 29.66%; }
    .home-card-entrainements .card-more { aspect-ratio: 100 / 58.18181818181818; }
    .home-card-brevets .card-label { margin-top: 10px; line-height: 22px; font-size: 18px; }
    .home-card-brevets .card-more { margin-top: 9px; width: 71.43%; margin-left: 16.89%; }
    .home-card-brevets .card-more { aspect-ratio: 100 / 58.18181818181818; }
    .home-card-mers .card-label { margin-top: 12px; min-height: 21px; line-height: 22px; font-size: 18px; }
    .home-card-mers .card-more { margin-top: 11px; width: 51.04%; margin-left: 26.21%; }
    .home-card-mers .card-more { aspect-ratio: 100 / 43.24324324324324; }
    .home-card-lacs .card-label { margin-top: 12px; min-height: 23px; line-height: 22px; font-size: 18px; }
    .home-card-lacs .card-more { margin-top: 11px; width: 67.89%; margin-left: 17.44%; }
    .home-card-lacs .card-more { aspect-ratio: 100 / 43.24324324324324; }
    .home-card-carrieres .card-label { margin-top: 12px; min-height: 22px; line-height: 22px; font-size: 18px; }
    .home-card-carrieres .card-more { margin-top: 12px; width: 67.89%; margin-left: 16.52%; }
    .home-card-carrieres .card-more { aspect-ratio: 100 / 43.24324324324324; }
    .home-diver-1 { margin-top: 654px; width: 242px; margin-left: 54.45%; }
    .home-diver-2 { margin-top: 1342px; width: 238px; margin-left: 20.09%; }
    .home-band-lifras { margin-top: 1710px; width: 99.62%; padding-bottom: 5px; margin-left: 8.12%; }
    .home-text-lifras { width: 57.37%; line-height: 17px; margin-left: 1.75%; }
    .home-logo-lifras { margin-top: 9px; width: 141px; margin-left: 0; }
    .home-logo-cmas { width: 66px; margin-left: 65.45%; margin-top: 0; }
    .home-logo { margin-top: 51px; width: 199px; margin-left: calc(54.55% - 100px); }
    .home-logo img { margin-bottom: 19px; }
    .home-title { margin-top: 22px; margin-left: calc(54.55% - 246px); width: auto; min-height: 0; }
    .page-index .page-content { margin-top: 8px; width: 91.67%; }
}
@media (max-width: 590px) {
    .home-collage { margin-top: 459px; width: 96.23%; margin-left: 0; }
    .home-veil { width: 98.88%; height: 2445px; margin-left: 5.8%; }
    .home-welcome { margin-top: 27px; width: 94.96%; min-height: 98px; font-size: 14px; margin-left: 7.67%; }
    .home-slideshow-1 { margin-top: 137px; width: 98.88%; height: 200px; margin-left: 5.61%; }
    .home-slideshow-2 { margin-top: 1911px; width: 98.88%; height: 200px; margin-left: 5.61%; }
    .home-text-belgique { margin-top: 347px; width: 95.15%; min-height: 112px; line-height: 17px; text-align: left; margin-left: 7.3%; }
    .home-text-sorties { margin-top: 1762px; width: 95.15%; min-height: 121px; line-height: 17px; margin-left: 7.3%; }
    .home-text-vous { margin-top: 2127px; width: 95.15%; min-height: 102px; line-height: 17px; margin-left: 7.48%; }
    .home-band-cours { margin-top: 1037px; width: 98.88%; margin-left: 5.8%; padding-top: 0; padding-bottom: 0; }
    .home-text-moniteurs { width: 96.22%; line-height: 17px; margin-left: 1.71%; }
    .home-card-cours { margin-top: 17px; width: 95.66%; margin-left: 1.71%; }
    .home-card-entrainements { margin-top: 28px; width: 98.49%; margin-left: -0.76%; }
    .home-card-brevets { margin-top: 35px; width: 95.47%; margin-left: 2.08%; }
    .home-text-piscine { margin-top: 1511px; width: 95.15%; min-height: 131px; line-height: 17px; margin-left: 7.48%; }
    .home-card-mers { margin-top: 776px; width: 95.15%; margin-left: 7.3%; }
    .home-card-lacs { margin-top: 623px; width: 94.02%; margin-left: 8.79%; }
    .home-card-carrieres { margin-top: 474px; width: 94.21%; margin-left: 7.3%; }
    .home-card-cours .card-photo { width: 72.34%; height: 80px; background-image: url("../images/accueil_rond_cours-u26200-fr.jpg"); background-size: cover; background-position: center top; margin-left: 0; }
    .home-card-entrainements .card-photo { width: 64.69%; height: 80px; background-image: url("../images/accueil_rond_entraînements.jpg"); background-size: cover; background-position: center center; margin-left: 35.32%; }
    .home-card-brevets .card-photo { width: 72.48%; height: 80px; background-image: url("../images/accueil_rond_brevets.jpg"); background-size: cover; background-position: center center; margin-left: 0; }
    .home-card-mers .card-photo { width: 71.32%; height: 125px; background-image: url("../images/accueil_rond_mers-u25480-fr.jpg"); background-size: cover; background-position: center center; margin-left: 0; }
    .home-card-lacs .card-photo { width: 71.38%; height: 125px; background-image: url("../images/accueil_rond_lacs-u25473-fr.jpg"); background-size: cover; background-position: center center; margin-left: 28.63%; }
    .home-card-carrieres .card-photo { width: 72.03%; height: 125px; background-image: url("../images/accueil_rond_carrières-u24817-fr.jpg"); background-size: cover; background-position: center center; margin-left: 0; }
    .home-card-cours .card-text { margin-top: 11px; width: 24.91%; margin-left: 75.1%; }
    .home-card-entrainements .card-text { margin-top: 11px; width: 34.75%; }
    .home-card-brevets .card-text { margin-top: 11px; width: 25.35%; margin-left: 74.46%; }
    .home-card-mers .card-text { margin-top: 32px; width: 24.76%; margin-left: 75.25%; }
    .home-card-lacs .card-text { margin-top: 30px; width: 24.86%; }
    .home-card-carrieres .card-text { margin-top: 32px; width: 25%; margin-left: 75.2%; }
    .home-card-cours .card-label { line-height: 22px; font-size: 18px; margin-top: 0; }
    .home-card-cours .card-more { margin-top: 7px; width: 100%; margin-left: 0; }
    .home-card-cours .card-more { aspect-ratio: 100 / 25.396825396825395; }
    .home-card-entrainements .card-label { line-height: 22px; font-size: 18px; margin-top: 0; }
    .home-card-entrainements .card-more { margin-top: 7px; width: 69.62%; margin-left: 17.68%; }
    .home-card-entrainements .card-more { aspect-ratio: 100 / 25.396825396825395; }
    .home-card-brevets .card-label { width: 98.44%; line-height: 22px; font-size: 18px; margin-left: 1.57%; margin-top: 0; }
    .home-card-brevets .card-more { margin-top: 7px; width: 98.44%; margin-left: 0; }
    .home-card-brevets .card-more { aspect-ratio: 100 / 25.396825396825395; }
    .home-card-mers .card-label { min-height: 21px; line-height: 22px; font-size: 18px; margin-top: 0; }
    .home-card-mers .card-more { margin-top: 11px; width: 100%; margin-left: 0; }
    .home-card-mers .card-more { aspect-ratio: 100 / 25.396825396825395; }
    .home-card-lacs .card-label { min-height: 22px; line-height: 22px; font-size: 18px; margin-top: 0; }
    .home-card-lacs .card-more { margin-top: 10px; width: 100%; margin-left: 0; }
    .home-card-lacs .card-more { aspect-ratio: 100 / 25.6; }
    .home-card-carrieres .card-label { min-height: 22px; line-height: 22px; font-size: 18px; margin-top: 0; }
    .home-card-carrieres .card-more { margin-top: 11px; width: 100%; margin-left: 0; }
    .home-card-carrieres .card-more { aspect-ratio: 100 / 25.396825396825395; }
    .home-diver-1 { margin-top: 919px; width: 179px; margin-left: 41.13%; }
    .home-diver-2 { margin-top: 1655px; width: 169px; margin-left: 31.22%; }
    .home-band-lifras { margin-top: 2273px; width: 98.7%; padding-top: 16px; padding-bottom: 3px; margin-left: 5.8%; }
    .home-text-lifras { width: 92.24%; min-height: 88px; line-height: 17px; margin-left: 1.71%; margin-top: 0; }
    .home-logos { width: 66.1%; margin-left: 16.29%; }
    .home-logo-lifras { margin-top: 7px; width: 112px; margin-left: 0; }
    .home-logo-cmas { width: 54px; margin-left: 84.53%; margin-top: 0; }
    .home-logo { margin-top: 86px; width: 163px; margin-left: calc(53.06% - 82px); }
    .home-logo img { margin-bottom: 15px; }
    .home-title { margin-top: 20px; margin-left: calc(53.06% - 246px); width: auto; min-height: 0; }
    .page-index .page-content { margin-top: 8px; width: 94.24%; }
}

/* Ajustements par point de rupture qui ne se déduisent pas des règles Muse bloc par bloc */
@media (max-width: 1210px) {
    .home-logo img { width: 187px; height: 190px; }
    .home-title { display: flex; align-items: center; justify-content: center; width: 492px; min-height: 0; height: 186px; font-size: 48px; line-height: 58px; text-align: center; }
    .home-title-break { display: inline; }
}
@media (min-width: 1031px) and (max-width: 1210px) {
    .page-index .page { max-width: 1210px; }
    .page-index { --spacer-above: 2960px; }
    .home-text { font-size: 18px; }
}
@media (min-width: 1001px) and (max-width: 1030px) {
    .page-index .page { max-width: 1030px; }
    .page-index { --spacer-above: 0px; }
    .home-text { font-size: 14px; }
    .card-photo img { width: 100.96%; }
    .home-title { height: 70px; }
    .home-title-break { display: none; }
}
@media (min-width: 811px) and (max-width: 1000px) {
    .page-index .menu > li > a { padding: 2px 0 3px; font-size: 24px; line-height: 29px; }
}
@media (max-width: 1000px) {
    .home-text { font-size: 14px; }
}
@media (min-width: 826px) and (max-width: 1000px) {
    .page-index { --page-min-height: 752px; --spacer-above: 0px; }
    .card-photo img { width: 100.99%; }
    .home-card { margin-bottom: -3px; }
}
@media (max-width: 825px) {
    .home-title { height: 62px; }
    .home-title-break { display: none; }
    .home-logo img { width: 177px; height: 180px; }
    .home-logo-lifras img { width: 141px; height: 55px; }
    .home-logo-cmas img { width: 66px; height: 70px; }
    /* Le texte « piscine » quitte le groupe des cartes et suit dans le flux du bandeau ; ses marges et sa
       largeur Muse sont relatives au bandeau, d'où la division par la largeur du groupe des cartes */
    .home-text-piscine { grid-row: 2; }
}
@media (min-width: 811px) and (max-width: 825px) {
    .home-text-piscine { margin-left: calc((2.12% - 9.3%) / 0.8212); width: calc(96.48% / 0.8212); }
}
@media (min-width: 601px) and (max-width: 810px) {
    .home-text-piscine { margin-left: calc((2.16% - 9.19%) / 0.8221); width: calc(96.56% / 0.8221); }
}
@media (min-width: 591px) and (max-width: 600px) {
    .home-text-piscine { margin-left: calc((2.14% - 9.31%) / 0.8218); width: calc(96.52% / 0.8218); }
}
@media (min-width: 811px) and (max-width: 825px) {
    .page-index .page { max-width: 825px; }
    .page-index { --page-min-height: 752px; --spacer-above: 0px; }
    /* Logo centré sous le menu, à la même origine que le titre (colonne Muse plus étroite) */
    .home-logo { margin-top: 65px; margin-left: calc(53.44% - 99px); }
    .home-card { margin-bottom: -3px; }
    .home-card-cours .card-photo img, .home-card-entrainements .card-photo img { width: 101.2%; }
}
@media (min-width: 601px) and (max-width: 810px) {
    .page-index .page { max-width: 810px; }
    .page-index { --spacer-above: 0px; }
    /* Tout le menu en 18 px comme sur les autres pages (Muse n'y passait que l'entrée « Accueil ») */
    .page-index .menu > li > a { padding: 6px 0; font-size: 18px; line-height: 22px; }
    .home-logo { margin-top: 65px; margin-left: calc(53.51% - 101px); }
    .home-card { margin-bottom: -4px; }
    .home-card-carrieres .card-photo img { width: 100.91%; }
}
@media (max-width: 600px) {
    .page-index .site-header { height: var(--header-height); min-height: var(--header-height); }
}
@media (min-width: 591px) and (max-width: 600px) {
    .page-index .page { max-width: 600px; }
    .page-index { --spacer-above: 2502px; }
    .home-card { margin-bottom: -4px; }
    .home-card-cours .card-photo img, .home-card-entrainements .card-photo img { width: 101.64%; }
    .home-card-mers .card-photo img, .home-card-lacs .card-photo img { width: 101.22%; }
    /* Logos LIFRAS / CMAS regroupés à droite du texte (groupe Muse de 37,02 %) */
    .home-logos { margin-top: 21px; width: 37.02%; margin-left: 61.44%; }
}
@media (max-width: 590px) {
    .page-index .page { max-width: 590px; }
    /* Titre : 36 px (48 px déborderait), bloc à la largeur de la page, centré comme le logo sur 53,06 % */
    .home-title { width: auto; height: auto; min-height: 62px; margin-left: 6.12%; font-size: 36px; line-height: 44px; }
    .page-index { --page-min-height: 3135px; --spacer-above: 3297px; }
    .home-logo img { width: 145px; height: 148px; }
    .home-logo-lifras img { width: 112px; height: 44px; }
    .home-logo-cmas img { width: 54px; height: 57px; }
    /* Cartes : photo rectangulaire en fond (cadre Muse « museBGSize ») et texte à droite, empilés
       directement dans le bandeau (rembourrage 13 / 20 du conteneur Muse) */
    .home-cards { display: block; margin: 0; width: 100%; }
    .home-band-cours { padding: 13px 0 20px; }
    .home-card { display: grid; grid-template-columns: 100%; }
    .home-card > * { grid-area: 1 / 1; justify-self: start; align-self: start; }
    .card-photo picture { display: none; }
    .home-card .card-photo { border-radius: 0; }
    /* Texte « piscine » : sous le bandeau bleu, à 474 px de son haut (position Muse depuis le haut du collage) */
    .home-text-piscine { position: absolute; top: 474px; left: 1.7%; width: 96.23%; margin: 0; }
    /* Bandeau LIFRAS : texte puis logos dans le flux */
    .home-band-lifras { display: block; }
    .home-welcome { line-height: 17px; }
}