/*
Theme Name:   Lourdes Natation (Divi)
Theme URI:    https://lourdes-natation.fr/
Description:  Thème enfant de Divi pour le club de Lourdes Natation. Conserve le menu latéral gauche du site d'origine, modernise cartes, icônes et espacements.
Author:       E-TASKFORCE LTD
Template:     Divi
Version:      1.1.0
Text Domain:  divi-child
*/

/* =========================================================================
   SOMMAIRE
     1.  Charte
     2.  Base
     3.  En-tête
     4.  Menu mobile
     5.  Bandeau de titre
     6.  Mise en page : contenu + menu latéral
     7.  Le menu latéral (les 5 blocs)
     8.  Les sections Divi dans la colonne de contenu
     9.  Le héros
     10. Les cartes
     11. Les actualités
     12. Les archives
     13. Le tableau des horaires
     14. Les partenaires
     15. Encarts et coordonnées
     16. Le formulaire
     17. Une actualité (page seule)
     18. La galerie
     19. Le pied de page
     20. Accessibilité
   ========================================================================= */


/* =========================================================================
   1. CHARTE — dérivée du logo (hippocampe bleu sur vagues)
   ========================================================================= */
:root {
    --ln-bleu:        #0B4F8A;
    --ln-bleu-sombre: #073A66;
    --ln-turquoise:   #12A0C8;
    --ln-eau:         #EAF4FA;
    --ln-eau-bord:    #D3E7F2;
    --ln-ambre:       #F5A623;
    --ln-ambre-fonce: #E09410;
    --ln-encre:       #17293B;
    --ln-encre-doux:  #4A6076;
    --ln-nuit:        #0A3A66;
    --ln-nuit-fonce:  #08304F;

    --ln-rayon:       14px;
    --ln-rayon-s:     9px;
    --ln-ombre:       0 6px 28px rgba(11, 79, 138, 0.10);
    --ln-ombre-forte: 0 12px 36px rgba(11, 79, 138, 0.18);

    /* Rythme vertical. Une seule échelle, partout. */
    --ln-gap:         26px;
    --ln-section:     56px;
}


/* =========================================================================
   2. BASE
   ========================================================================= */
body {
    color: var(--ln-encre);
    font-size: 16px;
    line-height: 1.75;
}

a { color: var(--ln-bleu); }
a:hover { color: var(--ln-bleu-sombre); }

h1, h2, h3, h4, h5, h6 {
    color: var(--ln-bleu);
    text-wrap: balance;
}

/* Le corps ne doit JAMAIS défiler de côté. */
html, body { overflow-x: clip; }


/* =========================================================================
   3. EN-TÊTE

   🔴 Divi construit son en-tête avec des FLOTTANTS et des décalages en dur :
      - `.logo_container` est en position absolue, `#logo` en `max-height: 54%` ;
      - `#et_search_icon` est positionné avec `top: 8px` et une hauteur de 20 px.
      Résultat : la loupe ne tombe jamais sur la ligne du menu, et le logo « flotte ».

   On repasse l'en-tête entier en FLEX : tout est centré verticalement, une fois pour
   toutes, quelle que soit la hauteur du logo.
   ========================================================================= */
#main-header {
    box-shadow: 0 2px 14px rgba(11, 79, 138, 0.08);
    padding: 0;
}

#main-header .container.et_menu_container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 84px;
    padding-top: 0;
    padding-bottom: 0;
}

/**
 * 🔴 `.logo_container` est en POSITION ABSOLUE chez Divi, et occupe tout l'en-tête.
 *
 * Conséquence : il sort du flux. Le conteneur flex n'a plus qu'un seul enfant en flux
 * (la navigation), et le `justify-content: space-between` n'a plus rien à espacer :
 * le menu remontait se coller à GAUCHE, PAR-DESSUS le logo.
 *
 * La règle de Divi (`#main-header .logo_container`) est plus spécifique qu'un simple
 * `.logo_container` : il faut au moins autant de poids pour la défaire.
 */
#main-header .container.et_menu_container .logo_container {
    position: static;
    float: none;
    height: auto;
    width: auto;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}
/* Le « helper » de Divi ne sert qu'à son centrage vertical d'origine. */
#main-header .logo_helper { display: none; }

#main-header .container.et_menu_container #et-top-navigation { flex: 0 0 auto; }

/**
 * ⚠️ Divi bride le logo avec `max-width: 50%` ET `max-height: 54%` — deux pourcentages
 * dont les références changent selon le point de rupture. Sur téléphone, le logo
 * ressortait à 51×21 px : illisible.
 * On impose une HAUTEUR en pixels et on libère la largeur. Le logo mesure 578×240 :
 * à 56 px de haut il est réduit, jamais agrandi.
 */
/**
 * 🔴 Le `!important` n'est pas de la paresse : Divi pose `#logo { max-width: 50% }` dans
 * une requête média sous 980 px. Le logo (578×240) ressortait alors en 58×48 — ÉCRASÉ de
 * moitié en largeur, illisible. Une simple redéclaration ne suffit pas à la défaire.
 */
#logo {
    height: 56px;
    width: auto !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0;
    object-fit: contain;
}
.et-fixed-header #logo { height: 46px; }

/* 🔴 En flex à TOUTES les largeurs : sous 980 px, Divi le repasse en `block`, et la loupe
   se décalait de 10 px par rapport au burger. Ils doivent tomber sur la même ligne. */
#et-top-navigation {
    display: flex !important;
    align-items: center;
    float: none;
    padding: 0 !important;
    margin: 0;
}

/* La loupe, centrée, à toutes les largeurs. */
#et_top_search {
    display: flex;
    align-items: center;
    float: none;
    margin: 0 0 0 16px;
    padding: 0;
}

/**
 * ⚠️ Le burger : on ne touche PAS à son `display`.
 *
 * Divi le masque au-dessus de 980 px (`display: none`) et le montre en dessous. Un
 * `display: flex` non borné le faisait réapparaître sur les grands écrans, à côté de la
 * loupe, alors que le menu complet était déjà là. On se contente de le recentrer.
 */
#et_mobile_nav_menu {
    float: none;
    margin: 0 0 0 8px;
    padding: 0;
    align-self: center;
}
/**
 * 🔴 Divi pose `padding-bottom: 24px` sur `.mobile_menu_bar`.
 *
 * Le CADRE du burger était donc parfaitement centré — toutes les mesures le disaient —
 * mais le GLYPHE, lui, se retrouvait tassé dans le tiers supérieur de cette boîte de
 * 40 px. À l'œil, le burger flottait au-dessus de la ligne du logo et de la loupe.
 * C'est le genre de décalage qu'un contrôle sur les boîtes ne voit jamais.
 */
#et_mobile_nav_menu .mobile_menu_bar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0 !important;
    margin: 0;
    border-radius: 50%;
    color: var(--ln-bleu);
    transition: background 0.15s ease;
}
#et_mobile_nav_menu .mobile_menu_bar:hover { background: var(--ln-eau); }
#et_mobile_nav_menu .mobile_menu_bar::before {
    position: static;
    top: auto;
    margin: 0;
    padding: 0;
    line-height: 1;
    font-size: 28px;
}

/**
 * 🔴 Le menu de bureau, UNIQUEMENT au-dessus de 980 px.
 *
 * Divi masque `#top-menu-nav` et `#et_top_search` en dessous (le burger prend le relais).
 * Un `display: flex` non borné les REMETTAIT à l'écran, derrière le burger : 444 px de
 * menu dans une fenêtre de 390 — la page débordait sur la droite, sans qu'on voie quoi.
 */
@media (min-width: 981px) {
    #top-menu-nav,
    #top-menu {
        display: flex;
        align-items: center;
        float: none;
        margin: 0;
        padding: 0;
    }

    #top-menu > li {
        display: flex;
        align-items: center;
        padding-right: 22px;
        margin: 0;
    }
    #top-menu > li:last-child { padding-right: 0; }
}

/**
 * ⚠️ Divi pose `padding-bottom: 33px` sur chaque lien du menu — c'est la place qu'il
 * réserve à SON trait de survol. Le lien mesurait donc 47 px de haut pour 14 px de texte,
 * le bouton d'appel à l'action s'étirait sur toute la hauteur de l'en-tête, et notre
 * souligné tombait 33 px sous le mot. La règle résiste à une simple redéclaration.
 */
#top-menu > li > a {
    display: flex;
    align-items: center;
    padding: 0 !important;
    line-height: 1.4;
    font-weight: 600;
    letter-spacing: 0.2px;
    color: var(--ln-encre);
    opacity: 1;
}
#top-menu > li > a:hover { color: var(--ln-bleu); opacity: 1; }
#top-menu > li.current-menu-item > a,
#top-menu > li.current_page_item > a { color: var(--ln-bleu); }

/* Le trait de survol de Divi, remplacé par un souligné net, collé sous le mot. */
#top-menu > li > a::after { display: none !important; }
#top-menu > li:not(.ln-cta) > a::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -7px;
    width: 0;
    height: 2px;
    background: var(--ln-turquoise);
    transition: width 0.18s ease;
}
#top-menu > li { position: relative; }
#top-menu > li:not(.ln-cta) > a:hover::before,
#top-menu > li:not(.ln-cta).current-menu-item > a::before { width: 100%; }

/* L'appel à l'action : un bouton, pas un lien de menu. */
#top-menu > li.ln-cta > a {
    background: var(--ln-ambre);
    color: #3A2600;
    border-radius: var(--ln-rayon-s);
    padding: 12px 20px !important;
    font-weight: 700;
    line-height: 1.1;
    box-shadow: 0 3px 12px rgba(245, 166, 35, 0.32);
}
#top-menu > li.ln-cta > a:hover {
    background: var(--ln-ambre-fonce);
    color: #3A2600;
}
#top-menu > li.ln-cta > a::before { display: none; }

/* 🔴 La loupe. Divi la cale avec `top: 8px` sur une boîte de 20 px de haut : elle ne
   tombe jamais sur la ligne du menu. On la remet dans le flux, centrée.
   (Son `display: flex` est dans le bloc ≥ 981 px ci-dessus : en dessous, Divi la masque.) */
#et_search_icon {
    float: none;
    position: static;
    top: auto;
    margin: 0;
    flex: 0 0 34px;      /* Divi le fige à 20 px de large : il s'écrasait */
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--ln-encre-doux);
    transition: background 0.15s ease, color 0.15s ease;
}
#et_search_icon:hover { background: var(--ln-eau); color: var(--ln-bleu); }
#et_search_icon::before {
    position: static;
    font-size: 18px;
    line-height: 1;
}

/**
 * 🔴 `.et_search_outer` RECOUVRE L'EN-TÊTE EN PERMANENCE.
 *
 * Divi le pose en `position: absolute`, plein cadre sur l'en-tête, et le laisse là —
 * visible, mais TRANSPARENT. Ce n'est pas lui qu'il ouvre et ferme, c'est le formulaire
 * à l'intérieur (classe `et_pb_search_visible` / `et_pb_search_form_hidden`).
 *
 * Lui donner une couleur de fond revient donc à repeindre l'en-tête POUR TOUJOURS :
 * on cliquait sur la loupe, l'en-tête devenait bleu… et le restait, logo et menu noyés
 * dedans, illisibles.
 *
 * On ne le peint donc QUE pendant que la recherche est ouverte.
 */
.et_search_outer { background: transparent; }

.et_search_outer:has(.et_pb_search_visible) {
    background: #fff;
    border-bottom: 2px solid var(--ln-turquoise);
    box-shadow: 0 6px 18px rgba(11, 79, 138, 0.10);
}

.et-search-form input,
.et_search_outer #searchinput {
    color: var(--ln-encre) !important;
    font-size: 1.05rem;
    border-bottom: 2px solid var(--ln-eau-bord);
}
.et-search-form input::placeholder { color: #9AAEBF; }
.et_search_outer .et_close_search_field::after { color: var(--ln-bleu); }
.et_search_outer .et_close_search_field:hover::after { color: var(--ln-bleu-sombre); }


/* =========================================================================
   4. MENU MOBILE (le « burger »)
   ========================================================================= */
.mobile_menu_bar::before {
    color: var(--ln-bleu);
    font-size: 30px;
}

.et_mobile_menu {
    border-top: 3px solid var(--ln-turquoise);
    border-radius: 0 0 var(--ln-rayon) var(--ln-rayon);
    box-shadow: var(--ln-ombre-forte);
    padding: 8px 0;
}
.et_mobile_menu li a {
    padding: 14px 22px;
    color: var(--ln-encre);
    font-weight: 600;
    border-bottom: 1px solid var(--ln-eau);
}
.et_mobile_menu li:last-child a { border-bottom: none; }
.et_mobile_menu li a:hover {
    background: var(--ln-eau);
    color: var(--ln-bleu);
    opacity: 1;
}
.et_mobile_menu li.current-menu-item > a { color: var(--ln-bleu); }

/* L'appel à l'action reste un bouton, même dans le menu déroulant. */
.et_mobile_menu li.ln-cta > a {
    margin: 10px 18px;
    background: var(--ln-ambre);
    color: #3A2600;
    border-radius: var(--ln-rayon-s);
    text-align: center;
    font-weight: 700;
    border-bottom: none;
}


/* =========================================================================
   5. BANDEAU DE TITRE
   ========================================================================= */
.ln-bandeau {
    background: linear-gradient(122deg, var(--ln-bleu) 0%, var(--ln-turquoise) 100%);
    color: #fff;
    padding: 48px 0 46px;
}
.ln-bandeau .et_pb_row {
    width: 90%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0;
}
.ln-bandeau h1 {
    color: #fff;
    margin: 0;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    line-height: 1.22;
}
.ln-bandeau .ln-fil {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.88rem;
    margin-bottom: 10px;
}
.ln-bandeau .ln-fil a { color: #fff; text-decoration: underline; }
.ln-bandeau .ln-fil a:hover { color: #fff; }


/* =========================================================================
   6. MISE EN PAGE : contenu + menu latéral

   🔴 Ces règles ne viennent PAS de Divi, et c'est voulu.

   Divi range la mise en page à deux colonnes dans `css/dynamic-assets/sidebar.css`,
   qu'il ne charge que s'il détecte le MODULE « Sidebar » du constructeur. Nous utilisons
   la barre latérale du THÈME (des widgets) : Divi conclut qu'il n'y en a pas, la feuille
   n'arrive jamais, et la colonne s'étale sur toute la largeur.

   Et on ne peut pas l'enfiler soi-même : le « Dynamic CSS » de Divi écarte les handles
   qu'il ne connaît pas. Dix lignes, écrites une fois, qui ne dépendent de rien.
   ========================================================================= */
/* ⚠️ Le bas compte autant que le haut : sans `padding-bottom`, la dernière section de la
   page (l'appel à l'action bleu de l'accueil) venait TOUCHER le pied de page, sans un
   pixel entre les deux. */
#main-content .container {
    padding-top: 46px;
    padding-bottom: 72px;
}

#content-area::after {
    content: "";
    display: table;
    clear: both;
}

@media (min-width: 981px) {
    #sidebar {
        float: left;
        width: 23%;
        padding: 0 34px 0 0;
        margin: 0;
    }
    .et_left_sidebar #left-area {
        float: right;
        width: 77%;
        padding: 0;
    }
}

@media (max-width: 980px) {
    #sidebar,
    #left-area {
        float: none;
        width: 100%;
        padding: 0;
    }
    /* Sur tablette et mobile, le menu passe SOUS le contenu : on ne fait pas descendre
       le visiteur sur cinq blocs de navigation avant de lui montrer la page. */
    #sidebar { margin-top: 52px; }
}


/* =========================================================================
   7. LE MENU LATÉRAL — les 5 blocs
      (art. 2.3 du contrat : « maintien du menu latéral existant »)

   ⚠️ Divi laisse ses widgets en `float: left; width: auto` : les cinq blocs prenaient
      chacun la largeur de leur plus long libellé — 188, 198, 187, 198 et 149 px.
      Un escalier. La largeur doit être imposée.
   ========================================================================= */
#sidebar .et_pb_widget {
    float: none !important;
    width: 100% !important;
    margin: 0 0 var(--ln-gap) !important;

    background: #fff;
    border: 1px solid var(--ln-eau-bord);
    border-radius: var(--ln-rayon);
    padding: 20px 18px 14px;
    box-shadow: var(--ln-ombre);
}
#sidebar .et_pb_widget:last-child { margin-bottom: 0 !important; }

#sidebar .et_pb_widget .widgettitle {
    color: var(--ln-bleu);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    margin: 0 0 12px;
    padding: 0 0 10px;
    border-bottom: 2px solid var(--ln-eau);
}

#sidebar .et_pb_widget ul { margin: 0; padding: 0; list-style: none; }
#sidebar .et_pb_widget ul li { margin: 0; padding: 0; border: none; }
#sidebar .et_pb_widget ul li::before { display: none; }

#sidebar .et_pb_widget ul li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    margin: 2px 0;
    border-radius: var(--ln-rayon-s);
    color: var(--ln-encre);
    font-weight: 500;
    line-height: 1.4;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

/* Une goutte devant chaque entrée, pas une puce. */
#sidebar .et_pb_widget ul li a::before {
    content: "";
    display: block;
    flex: 0 0 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ln-turquoise);
    opacity: 0.55;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

#sidebar .et_pb_widget ul li a:hover {
    background: var(--ln-eau);
    color: var(--ln-bleu);
}
#sidebar .et_pb_widget ul li a:hover::before { opacity: 1; transform: scale(1.3); }

#sidebar .et_pb_widget ul li.current-menu-item > a {
    background: var(--ln-bleu);
    color: #fff;
    font-weight: 700;
}
#sidebar .et_pb_widget ul li.current-menu-item > a::before {
    background: #fff;
    opacity: 1;
}

/* Sur tablette, les cinq blocs se rangent en grille au lieu de s'empiler. */
@media (max-width: 980px) {
    #sidebar {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
        gap: var(--ln-gap);
        align-items: start;
    }
    #sidebar .et_pb_widget { margin: 0 !important; }
    #sidebar .et_pb_widget:last-child { margin: 0 !important; }
}


/* =========================================================================
   8. LES SECTIONS DIVI, DANS LA COLONNE DE CONTENU

   🔴 Les sections Divi vivent ici DANS `#left-area`, pas en pleine page. Leurs marges
      par défaut, calculées pour une pleine largeur, y creusent des trous.

   ⚠️ Mais un `padding: 0` aveugle sur `.et_pb_section` écrase AUSSI le `custom_padding`
      du héros et de l'appel à l'action — leur texte se collait au bord.
      On ne remet donc à zéro que les sections SANS fond.
   ========================================================================= */
#left-area .et_pb_section {
    padding: 0;
    margin: 0 0 var(--ln-section);
}
#left-area .et_pb_section:last-child { margin-bottom: 0; }

/* Les sections qui portent un fond gardent leur marge intérieure. */
#left-area .et_pb_section.ln-hero,
#left-area .et_pb_section.ln-cta-bas {
    padding: 52px 46px;
    border-radius: var(--ln-rayon);
}

.ln-cta-bas h2,
.ln-cta-bas p { color: #fff; }
.ln-cta-bas h2 { margin-top: 0; }
.ln-cta-bas .et_pb_text { margin-bottom: 8px; }

#left-area .et_pb_row {
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0 0 var(--ln-gap);
}
#left-area .et_pb_row:last-child { margin-bottom: 0; }

#left-area .et_pb_column { margin-right: 4%; }
#left-area .et_pb_column:last-child { margin-right: 0; }
#left-area .et_pb_column.et_pb_column_4_4 { margin-right: 0; width: 100%; }

#left-area h2 { font-size: 1.55rem; margin: 0 0 0.7em; }
#left-area h3 { font-size: 1.2rem; margin: 1.4em 0 0.5em; }
#left-area ul li { margin-bottom: 0.4em; }

.ln-chapeau {
    font-size: 1.06rem;
    color: var(--ln-encre-doux);
    margin-bottom: 1.5em;
}
.ln-titre-section { font-size: 1.7rem; margin: 0 0 6px; }
.ln-sous-titre { color: var(--ln-encre-doux); margin: 0 0 6px; }

/* Les photos dans le corps d'un article.

   ⚠️ Le plafond de HAUTEUR n'est pas décoratif : les photos du club sont des originaux de
   téléphone, souvent en portrait. À la largeur de la colonne (≈ 715 px), une photo 3:4
   ressortait à 950 px de haut — elle mangeait tout l'écran et poussait le texte hors de vue. */
.ln-photo,
#left-area .entry-content img {
    display: block;
    max-width: 100%;
    max-height: 560px;
    width: auto;
    height: auto;
    margin: 20px auto;
    border-radius: 12px;
    box-shadow: var(--ln-ombre);
}

@media (max-width: 767px) {
    .ln-photo,
    #left-area .entry-content img { max-height: 420px; }
}


/* =========================================================================
   9. LE HÉROS
   ========================================================================= */
.ln-hero {
    position: relative;
    overflow: hidden;
    border-radius: var(--ln-rayon);
}

/* Un voile en dégradé : la photo reste visible, le texte reste lisible. */
.ln-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        100deg,
        rgba(8, 43, 76, 0.94) 0%,
        rgba(10, 58, 102, 0.86) 42%,
        rgba(18, 160, 200, 0.42) 100%
    );
    z-index: 0;
}
.ln-hero > .et_pb_row { position: relative; z-index: 1; }

.ln-hero,
.ln-hero h1,
.ln-hero p { color: #fff; }

.ln-hero .ln-sur-titre {
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: #8FD4EC;
    margin: 0 0 14px;
}
.ln-hero .ln-hero-titre {
    font-size: clamp(1.8rem, 3.2vw, 2.6rem);
    line-height: 1.14;
    font-weight: 800;
    margin: 0 0 16px;
}
.ln-hero .ln-hero-texte {
    font-size: 1.04rem;
    max-width: 48ch;
    color: rgba(255, 255, 255, 0.92);
    margin: 0;
}
.ln-hero .et_pb_text { margin-bottom: 0; }

/* Les deux boutons sont deux modules empilés dans la même colonne : une LIGNE Divi ne
   peut pas vivre dans une COLONNE. C'est ici qu'on les met côte à côte. */
.ln-hero .et_pb_button_module_wrapper {
    display: inline-block;
    margin: 22px 14px 0 0;
}
.ln-hero .et_pb_button_module_wrapper:last-of-type { margin-right: 0; }


/* =========================================================================
   10. LES CARTES (module Blurb de Divi)

   ⚠️ Deux pièges superposés :
      a) les colonnes Divi FLOTTENT — des flottants ne s'égalisent jamais en hauteur.
         C'est la LIGNE qui doit passer en flex.
      b) mettre la carte en flex ne suffit pas : il faut dérouler toute la chaîne
         (blurb > content > container > description) pour que le lien « → » se cale en bas.
         Sans ça, les trois liens ne tombent pas à la même hauteur.
   ========================================================================= */
.et_pb_blurb {
    background: #fff;
    border: 1px solid var(--ln-eau-bord);
    border-radius: var(--ln-rayon);
    padding: 28px 20px;      /* resserré : chaque pixel rendu au texte compte ici */
    box-shadow: var(--ln-ombre);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.et_pb_blurb:hover {
    transform: translateY(-3px);
    box-shadow: var(--ln-ombre-forte);
}

/**
 * 🔴 Les icônes restaient INVISIBLES.
 *
 * Divi les fait apparaître au défilement (« waypoint ») : tant que la carte n'est pas
 * entrée dans l'écran, l'icône est à `opacity: 0`. Deux conséquences :
 *   - une carte déjà visible au chargement, ou hors de portée du déclencheur, reste vide ;
 *   - et surtout, un visiteur qui a demandé « moins d'animations » (prefers-reduced-motion)
 *     coupe les animations… et l'icône ne s'affiche JAMAIS.
 *
 * Une icône ne doit pas dépendre d'une animation pour exister.
 */
.et_pb_blurb .et-waypoint:not(.et-animated),
.et_pb_blurb .et-waypoint {
    opacity: 1 !important;
    animation: none !important;
}

.et_pb_blurb .et_pb_main_blurb_image { margin-bottom: 18px; }
.et_pb_blurb .et_pb_module_header {
    font-size: 1.18rem;
    margin: 0 0 8px;
}
/**
 * Texte justifié dans les cartes.
 *
 * ⚠️ La justification n'est PAS gratuite dans une colonne étroite.
 *
 * Le texte d'une carte ne fait que ~205 px de large. Justifié, il creuse d'énormes
 * « rivières » (« École     de     natation ») dès qu'un mot long ne rentre pas.
 * Trois garde-fous, dans cet ordre :
 *
 *   1. `hyphens: auto` — le navigateur coupe les mots. Il a besoin de `lang="fr-FR"`
 *      sur la page (WordPress le pose) pour connaître les règles du français.
 *   2. `text-wrap: pretty` — même sans césure, il évite qu'un mot reste seul sur la
 *      dernière ligne, et répartit mieux les coupures.
 *   3. Des textes COURTS. C'est le vrai remède : aucune règle CSS ne sauve une phrase
 *      trop longue pour sa colonne.
 */
.et_pb_blurb .et_pb_blurb_description {
    color: var(--ln-encre-doux);
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    -webkit-hyphens: auto;
    text-wrap: pretty;
    /* Une rivière apparaît quand un espace doit trop s'étirer. On borne l'étirement :
       au-delà, le navigateur préfère renvoyer le mot à la ligne suivante. */
    word-spacing: -0.02em;
}
.et_pb_blurb .et_pb_blurb_description a {
    font-weight: 700;
    text-align: left;
    display: inline-block;
}
.et_pb_blurb .et_pb_blurb_description p:last-child {
    margin-bottom: 0;
    text-align: left;      /* le lien « → » ne se justifie pas */
}

@media (min-width: 981px) {
    /**
     * ⚠️ La gouttière vaut 5,5 % — la MÊME que celle de la grille d'actualités de Divi.
     *
     * Sans ça, les trois cartes d'activité s'arrêtaient 25 px avant le bord droit, alors
     * que les cartes d'actualité, juste en dessous, allaient au bout. Deux rangées qui ne
     * se terminent pas au même endroit : c'est ce qui se voit, et ça se voit tout de suite.
     *
     * `flex: 1 1 0` répartit l'espace restant à parts égales : les colonnes remplissent la
     * ligne, quoi qu'en dise la largeur en pourcentage que Divi leur a posée.
     */
    .ln-section-activites .et_pb_row,
    .ln-cartes.et_pb_row {
        display: flex;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 5.5%;
    }

    /**
     * 🔴 Le clearfix de Divi devient une COLONNE FANTÔME.
     *
     * Divi pose `.et_pb_row::after { content: ""; display: table; clear: both; }` pour
     * refermer ses flottants. Mais dans un conteneur FLEX, un pseudo-élément avec du
     * `content` devient un ÉLÉMENT FLEX à part entière.
     *
     * La ligne avait donc QUATRE éléments, et donc TROIS gouttières au lieu de deux.
     * Les trois cartes se partageaient 694 px au lieu de 740, et la rangée s'arrêtait
     * 46 px avant le bord — exactement la largeur d'une gouttière.
     */
    .ln-section-activites .et_pb_row::before,
    .ln-section-activites .et_pb_row::after,
    .ln-cartes.et_pb_row::before,
    .ln-cartes.et_pb_row::after {
        display: none !important;
        content: none !important;
    }

    .ln-section-activites .et_pb_row > .et_pb_column,
    .ln-cartes.et_pb_row > .et_pb_column {
        float: none;
        display: flex;
        flex: 1 1 0;
        width: auto !important;
        min-width: 0;
        margin: 0 !important;
    }
    /* La chaîne complète, jusqu'au dernier paragraphe. */
    .ln-section-activites .et_pb_blurb,
    .ln-cartes.et_pb_row .et_pb_blurb,
    .ln-section-activites .et_pb_blurb_content,
    .ln-cartes.et_pb_row .et_pb_blurb_content,
    .ln-section-activites .et_pb_blurb_container,
    .ln-cartes.et_pb_row .et_pb_blurb_container,
    .ln-section-activites .et_pb_blurb_description,
    .ln-cartes.et_pb_row .et_pb_blurb_description {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        width: 100%;
    }
    /* Le lien « → » se cale en bas : les trois s'alignent. */
    .ln-section-activites .et_pb_blurb_description > p:last-child,
    .ln-cartes.et_pb_row .et_pb_blurb_description > p:last-child {
        margin-top: auto;
        padding-top: 12px;
    }
}

@media (max-width: 980px) {
    .ln-section-activites .et_pb_column,
    .ln-cartes .et_pb_column {
        display: block;
        width: 100% !important;
        margin: 0 0 var(--ln-gap) !important;
    }
    .ln-section-activites .et_pb_column:last-child,
    .ln-cartes .et_pb_column:last-child { margin-bottom: 0 !important; }
}


/* =========================================================================
   11. LES ACTUALITÉS (module Blog de Divi)

   ⚠️ Divi dispose sa grille avec Salvattore : une vraie maçonnerie, qui empile les
      cartes en escalier dès qu'elles n'ont pas la même hauteur. On ne la combat pas —
      on rend toutes les cartes RIGOUREUSEMENT de la même hauteur. Une maçonnerie de
      cartes égales est une grille.
   ========================================================================= */
.et_pb_blog_grid .et_pb_post,
.ln-blog-accueil .et_pb_post {
    background: #fff;
    border: 1px solid var(--ln-eau-bord);
    border-radius: var(--ln-rayon);
    overflow: hidden;
    box-shadow: var(--ln-ombre);
    padding: 0 0 22px;
    margin-bottom: var(--ln-gap);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.et_pb_blog_grid .et_pb_post:hover,
.ln-blog-accueil .et_pb_post:hover {
    transform: translateY(-3px);
    box-shadow: var(--ln-ombre-forte);
}

.et_pb_blog_grid .et_pb_image_container,
.ln-blog-accueil .et_pb_image_container { margin: 0 0 16px; }

.et_pb_blog_grid .entry-featured-image-url,
.ln-blog-accueil .entry-featured-image-url {
    display: block;
    margin: 0;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}
.et_pb_blog_grid .entry-featured-image-url img,
.ln-blog-accueil .entry-featured-image-url img {
    width: 100%;
    height: 100%;
    object-fit: cover;      /* on recadre, on ne déforme pas */
    border-radius: 0;
    box-shadow: none;
    margin: 0;
}

.et_pb_blog_grid .entry-title,
.et_pb_blog_grid .post-meta,
.et_pb_blog_grid .post-content,
.ln-blog-accueil .entry-title,
.ln-blog-accueil .post-meta,
.ln-blog-accueil .post-content { padding: 0 22px; }

/* ⚠️ `min-height` ne clippe pas : la boîte s'agrandit pour son contenu, et la 3e ligne
   du titre vient chevaucher la date. Il faut une HAUTEUR FIXE. */
/* Trois lignes, pas deux : dans une carte de 247 px, « MEETING REGIONAL PRINTEMPS
   TOULOUSE » se faisait couper au milieu du deuxième mot. */
.et_pb_blog_grid .entry-title,
.ln-blog-accueil .entry-title {
    font-size: 1.05rem;
    line-height: 1.35;
    margin: 0 0 8px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden !important;
    height: 4.05em;             /* exactement trois lignes */
    padding-top: 0;
    padding-bottom: 0;
}
.et_pb_blog_grid .entry-title a,
.ln-blog-accueil .entry-title a { color: var(--ln-bleu); }

/* ⚠️ La date doit tenir sur UNE ligne, toujours.
   Dans une carte étroite, « 24 NOVEMBRE 2025 » passait à la ligne quand « 4 MAI 2026 »
   tenait : deux cartes voisines se retrouvaient avec 28 px d'écart, sans autre raison. */
.et_pb_blog_grid .post-meta,
.ln-blog-accueil .post-meta {
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--ln-turquoise);
    margin: 0 0 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/**
 * 🔴 Le nombre de colonnes de la grille.
 *
 * Divi la dispose avec Salvattore, qui lit le nombre de colonnes dans le `content` d'un
 * pseudo-élément — un mécanisme inhabituel, mais qui a l'avantage d'être pilotable au CSS.
 *
 * Divi garde TROIS colonnes jusqu'à 980 px. Mais chez nous, le contenu ne fait que 77 %
 * de la page (le menu latéral prend le reste) : à 1024 px de fenêtre, chaque carte tombait
 * à 177 px de large. Illisible.
 *
 * On repasse donc à deux colonnes tant que la zone de contenu est étroite.
 */
@media (min-width: 981px) and (max-width: 1279px) {
    .et_pb_blog_grid .et_pb_salvattore_content[data-columns]::before {
        content: '2 .column.size-1of2' !important;
    }
    /* ⚠️ Et il faut poser la largeur soi-même : Divi ne définit `.size-1of2` QUE sous
       980 px. Au-dessus, les deux colonnes prenaient 100 % chacune — elles s'empilaient,
       et la grille redevenait une liste d'articles pleine largeur. */
    .et_pb_blog_grid .column.size-1of2 {
        width: 48%;
        float: left;
        margin-right: 4%;
    }
    .et_pb_blog_grid .column.size-1of2:nth-child(2n) { margin-right: 0; }
}

.et_pb_blog_grid .post-content p,
.ln-blog-accueil .post-content p {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 7em;
    margin: 0 0 10px;
    color: var(--ln-encre-doux);
    font-size: 0.95rem;
    line-height: 1.75;
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
}

.et_pb_blog_grid .more-link,
.ln-blog-accueil .more-link {
    display: inline-block;
    font-weight: 700;
}

/* La pagination */
.pagination {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    margin-top: 8px;
}
.pagination a {
    display: inline-block;
    padding: 11px 20px;
    background: #fff;
    border: 1px solid var(--ln-eau-bord);
    border-radius: var(--ln-rayon-s);
    font-weight: 700;
}
.pagination a:hover { background: var(--ln-eau); }


/* =========================================================================
   12. LES ARCHIVES
   ========================================================================= */
.ln-archives .ln-annee { margin-bottom: 36px; }
.ln-archives .ln-annee:last-child { margin-bottom: 0; }
.ln-archives .ln-annee h2 {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin: 0 0 12px;
    padding-bottom: 10px;
    border-bottom: 3px solid var(--ln-eau);
    font-size: 1.6rem;
}
.ln-archives .ln-compte {
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--ln-encre-doux);
}
/* ⚠️ Divi dessine ses puces avec un `::before`, pas avec `list-style` :
   un `list-style: none` ne les enlève pas. Il faut viser le pseudo-élément. */
.ln-archives ul,
.ln-coordonnees { list-style: none; margin: 0; padding: 0; }
.ln-archives li::before,
.ln-coordonnees li::before,
.ln-partenaires li::before,
#sidebar .et_pb_widget ul li::marker,
.ln-archives li::marker,
.ln-coordonnees li::marker { display: none; content: none; }

.ln-archives li { margin: 0; }
.ln-archives li a {
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding: 11px 12px;
    border-radius: var(--ln-rayon-s);
    color: var(--ln-encre);
    text-decoration: none;
    transition: background 0.15s ease;
}
.ln-archives li a:hover { background: var(--ln-eau); color: var(--ln-bleu); }
.ln-archives time {
    flex: 0 0 72px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--ln-turquoise);
}
.ln-archives .ln-titre { font-weight: 500; line-height: 1.45; }


/* =========================================================================
   13. LE TABLEAU DES HORAIRES
        L'original alignait ses colonnes avec des espaces insécables : illisible au
        lecteur d'écran, cassé sur téléphone.
   ========================================================================= */
.ln-horaires {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 32px;
    font-size: 0.97rem;
}
.ln-horaires:last-child { margin-bottom: 0; }
.ln-horaires caption {
    caption-side: top;
    text-align: left;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    font-size: 0.85rem;
    color: var(--ln-bleu);
    background: var(--ln-eau);
    padding: 13px 16px;
    border: 1px solid var(--ln-eau-bord);
    border-bottom: none;
    border-radius: var(--ln-rayon-s) var(--ln-rayon-s) 0 0;
}
.ln-horaires th,
.ln-horaires td {
    padding: 13px 16px;
    border: 1px solid var(--ln-eau-bord);
    vertical-align: top;
    text-align: left;
}
.ln-horaires th {
    width: 34%;
    background: #FBFDFE;
    color: var(--ln-bleu);
    font-weight: 700;
}
.ln-horaires td { background: #fff; }
.ln-horaires .ln-creneau { display: block; }
.ln-horaires .ln-note {
    color: var(--ln-encre-doux);
    font-size: 0.88em;
    font-weight: 400;
}

/* Sur un téléphone, le tableau devient des fiches empilées. */
@media (max-width: 640px) {
    .ln-horaires,
    .ln-horaires tbody,
    .ln-horaires tr,
    .ln-horaires th,
    .ln-horaires td { display: block; width: 100%; }

    /* ⚠️ Le `caption` reste en `table-caption` même quand le tableau passe en `block` :
       il se ratatinait sur son texte, comme un onglet perdu en haut à gauche. */
    .ln-horaires caption {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    .ln-horaires th {
        border-radius: var(--ln-rayon-s) var(--ln-rayon-s) 0 0;
        border-bottom: none;
    }
    .ln-horaires td {
        border-radius: 0 0 var(--ln-rayon-s) var(--ln-rayon-s);
        margin-bottom: 14px;
    }
}


/* =========================================================================
   14. LES PARTENAIRES
   ========================================================================= */
.ln-partenaires {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: var(--ln-gap);
}
.ln-partenaires a {
    flex: 1 1 190px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 130px;
    padding: 22px 26px;
    background: #fff;
    border: 1px solid var(--ln-eau-bord);
    border-radius: var(--ln-rayon);
    box-shadow: var(--ln-ombre);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ln-partenaires a:hover {
    transform: translateY(-3px);
    box-shadow: var(--ln-ombre-forte);
}
.ln-partenaires img {
    max-width: 100%;
    max-height: 78px;
    width: auto;
    height: auto;
    box-shadow: none;
    border-radius: 0;
    margin: 0;
}


/* =========================================================================
   15. ENCARTS ET COORDONNÉES
   ========================================================================= */
.ln-encart {
    display: flex;
    gap: 16px;
    padding: 20px 22px;
    background: var(--ln-eau);
    border: 1px solid var(--ln-eau-bord);
    border-left: 5px solid var(--ln-turquoise);
    border-radius: var(--ln-rayon-s);
    margin: 0 0 var(--ln-gap);
}
.ln-encart p:last-child { margin-bottom: 0; }
.ln-encart strong { color: var(--ln-bleu); }

.ln-coordonnees { list-style: none; margin: 0 0 var(--ln-gap); padding: 0; }
.ln-coordonnees li {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-start;
    padding: 13px 0;
    border-bottom: 1px solid var(--ln-eau-bord);
    margin: 0;
}
.ln-coordonnees li:last-child { border-bottom: none; }
.ln-coordonnees .ln-etiquette {
    flex: 0 0 118px;
    font-weight: 700;
    color: var(--ln-bleu);
}


/* =========================================================================
   16. LE FORMULAIRE (Forminator)

   🔴 La CARTE est portée par le module Divi (`.ln-formulaire`), pas par le <form>.

   Forminator verrouille le style de son propre conteneur : un `padding` posé sur
   `.forminator-custom-form` est purement ignoré (il reste à 0), et les champs se
   retrouvent collés au bord de la page, sans encadré, sans respiration.
   On habille donc le conteneur qu'on maîtrise — celui du constructeur.
   ========================================================================= */
.ln-formulaire {
    background: #fff;
    border: 1px solid var(--ln-eau-bord);
    border-radius: var(--ln-rayon);
    padding: 34px 32px;
    box-shadow: var(--ln-ombre);
}

/* --- Les rangées --- */
.forminator-ui .forminator-row { margin-bottom: 22px !important; }
.forminator-ui .forminator-row:last-child { margin-bottom: 0 !important; }

/* --- Les libellés --- */
.forminator-ui .forminator-label {
    display: block;
    margin-bottom: 8px !important;
    color: var(--ln-bleu) !important;
    font-size: 0.78rem !important;
    font-weight: 800 !important;
    letter-spacing: 1.1px !important;
    text-transform: uppercase;
    line-height: 1.3 !important;
}
.forminator-ui .forminator-required { color: #C0392B !important; }

/* --- Les champs --- */
.forminator-ui .forminator-input,
.forminator-ui .forminator-textarea {
    width: 100% !important;
    padding: 14px 16px !important;
    background: #FBFDFE !important;
    border: 1.5px solid var(--ln-eau-bord) !important;
    border-radius: var(--ln-rayon-s) !important;
    color: var(--ln-encre) !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.forminator-ui .forminator-input { height: auto !important; }
.forminator-ui .forminator-textarea {
    min-height: 170px !important;
    resize: vertical;
}
.forminator-ui .forminator-input::placeholder,
.forminator-ui .forminator-textarea::placeholder {
    color: #9AAEBF !important;
}
.forminator-ui .forminator-input:hover,
.forminator-ui .forminator-textarea:hover { border-color: #B9D8EA !important; }

.forminator-ui .forminator-input:focus,
.forminator-ui .forminator-textarea:focus {
    outline: none !important;
    background: #fff !important;
    border-color: var(--ln-turquoise) !important;
    box-shadow: 0 0 0 4px rgba(18, 160, 200, 0.16) !important;
}

/* Le compteur de caractères */
.forminator-ui .forminator-description {
    color: var(--ln-encre-doux) !important;
    font-size: 0.82rem !important;
    margin-top: 6px !important;
}

/* --- Le consentement ---
 *
 * 🔴 Le texte n'est PAS dans le <label> : c'est son FRÈRE.
 *
 * Forminator produit :
 *     div.forminator-checkbox__wrapper
 *       label.forminator-checkbox.forminator-consent   ← la case seule
 *         input                                        ← masqué, 1×1 px
 *         span.forminator-checkbox-box                 ← la case DESSINÉE, celle qu'on clique
 *       div.forminator-consent__label                  ← le texte, À CÔTÉ du label
 *
 * Habiller le <label> revenait donc à dessiner un cadre bleu autour de la case SEULE,
 * et le texte débordait par-dessus. C'est le WRAPPER qu'il faut habiller.
 */
.forminator-ui .forminator-field-consent .forminator-label { display: none; }
.forminator-ui .forminator-field-consent { margin-top: 6px; }

.forminator-ui .forminator-field-consent .forminator-checkbox__wrapper {
    display: flex !important;
    align-items: flex-start;
    gap: 16px;
    margin: 0;
    padding: 20px 22px;
    background: var(--ln-eau);
    border: 1px solid var(--ln-eau-bord);
    border-radius: var(--ln-rayon-s);
    transition: border-color 0.15s ease;
}
.forminator-ui .forminator-field-consent .forminator-checkbox__wrapper:hover {
    border-color: #B9D8EA;
}

/* Le <label> ne porte plus que la case : ni fond, ni cadre, ni marge. */
.forminator-ui .forminator-checkbox.forminator-consent {
    display: flex !important;
    align-items: center;
    flex: 0 0 auto;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    cursor: pointer;
}

/* La case DESSINÉE — c'est elle que le visiteur clique, pas l'<input>. */
.forminator-ui .forminator-checkbox.forminator-consent .forminator-checkbox-box {
    flex: 0 0 22px;
    width: 22px !important;
    height: 22px !important;
    margin: 1px 0 0 !important;
    border: 2px solid #B9D8EA !important;
    border-radius: 6px !important;
    background: #fff !important;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.forminator-ui .forminator-checkbox.forminator-consent input:checked + .forminator-checkbox-box {
    background: var(--ln-bleu) !important;
    border-color: var(--ln-bleu) !important;
}
/* Le focus au clavier doit se voir sur la case, pas sur l'input invisible. */
.forminator-ui .forminator-checkbox.forminator-consent input:focus-visible + .forminator-checkbox-box {
    outline: 3px solid var(--ln-turquoise);
    outline-offset: 2px;
}

.forminator-ui .forminator-consent__label,
.forminator-ui .forminator-checkbox__label {
    flex: 1 1 auto;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--ln-encre) !important;
    font-size: 0.92rem !important;
    line-height: 1.6 !important;
    text-align: left;
}

/* --- Le bouton --- */
.forminator-ui .forminator-row-last { margin-top: 28px !important; }
.forminator-ui .forminator-button-submit {
    width: 100%;
    padding: 16px 30px !important;
    background: var(--ln-bleu) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--ln-rayon-s) !important;
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase;
    box-shadow: 0 4px 16px rgba(11, 79, 138, 0.26);
    transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
    cursor: pointer;
}
.forminator-ui .forminator-button-submit:hover {
    background: var(--ln-bleu-sombre) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(11, 79, 138, 0.32);
}
.forminator-ui .forminator-button-submit:focus-visible {
    outline: 3px solid var(--ln-turquoise);
    outline-offset: 3px;
}

@media (min-width: 640px) {
    .forminator-ui .forminator-button-submit { width: auto; min-width: 260px; }
}

/* --- Les messages --- */
.forminator-ui .forminator-response-message {
    padding: 16px 18px !important;
    border-radius: var(--ln-rayon-s) !important;
    margin-bottom: 20px !important;
    font-weight: 600;
}
.forminator-ui .forminator-error-message,
.forminator-ui .forminator-error .forminator-input,
.forminator-ui .forminator-error .forminator-textarea {
    border-color: #C0392B !important;
}
.forminator-ui .forminator-error-message {
    color: #C0392B !important;
    font-size: 0.86rem !important;
    margin-top: 6px !important;
}


/* =========================================================================
   17. UNE ACTUALITÉ (page seule)
   ========================================================================= */
.ln-date {
    color: var(--ln-turquoise);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    margin: 0 0 1.6em;
}

.ln-nav-articles {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 46px;
    padding-top: 26px;
    border-top: 2px solid var(--ln-eau);
}
.ln-nav-articles a {
    flex: 1 1 240px;
    padding: 16px 18px;
    background: #fff;
    border: 1px solid var(--ln-eau-bord);
    border-radius: var(--ln-rayon-s);
    font-weight: 600;
    line-height: 1.4;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.ln-nav-articles a:hover { box-shadow: var(--ln-ombre); transform: translateY(-2px); }
.ln-nav-articles a span {
    display: block;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--ln-encre-doux);
    margin-bottom: 5px;
}
.ln-nav-articles .ln-suiv { text-align: right; }


/* =========================================================================
   18. LA GALERIE

   Divi produit des vignettes de rapports d'image variables : une photo en portrait
   ressortait avec des bandes blanches, et les légendes, de longueurs différentes,
   décalaient les cartes d'une même rangée.
   ========================================================================= */
.et_pb_gallery_item {
    background: #fff;
    border: 1px solid var(--ln-eau-bord);
    border-radius: var(--ln-rayon);
    overflow: hidden;
    box-shadow: var(--ln-ombre);
    padding: 0 0 16px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.et_pb_gallery_item:hover {
    transform: translateY(-3px);
    box-shadow: var(--ln-ombre-forte);
}

.et_pb_gallery_image {
    display: block;
    aspect-ratio: 4 / 3;      /* toutes les vignettes au même format */
    overflow: hidden;
}
.et_pb_gallery_image img {
    width: 100%;
    height: 100%;
    object-fit: cover;        /* on recadre, on ne laisse pas de bandes blanches */
    border-radius: 0;
    box-shadow: none;
    margin: 0;
}

.et_pb_gallery_title {
    font-size: 0.92rem;
    line-height: 1.4;
    padding: 14px 16px 0;
    margin: 0;
    color: var(--ln-encre);
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: calc(2 * 1.4em + 14px);   /* deux lignes, toujours */
}
.et_pb_gallery_caption { display: none; }


/* =========================================================================
   19. LE PIED DE PAGE

   ⚠️ Trois structures distinctes, qui héritaient chacune de la mauvaise couleur :
      les widgets, le menu `ul.bottom-nav`, et la mention `#footer-info`.
      Les liens sortaient en #17293B (presque noir) sur le bleu nuit : 1,09:1.
   ========================================================================= */
#main-footer { background: var(--ln-nuit-fonce); }

#footer-widgets {
    padding: 54px 0 30px;
}
#footer-widgets .footer-widget { margin-bottom: 26px; }

#footer-widgets .footer-widget h4,
#footer-widgets .footer-widget .title,
#footer-widgets .footer-widget .widgettitle {
    color: #fff;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    margin-bottom: 16px;
    padding-bottom: 0;
}

#footer-widgets .footer-widget,
#footer-widgets .footer-widget p,
#footer-widgets .footer-widget li,
#footer-widgets .footer-widget a,
#footer-widgets .footer-widget li a,
#footer-widgets .footer-widget ul li a {
    color: #D6E6F2;                 /* 9,4:1 sur #08304F */
    font-size: 0.95rem;
}
#footer-widgets .footer-widget a:hover,
#footer-widgets .footer-widget li a:hover { color: #fff; }

#footer-widgets .footer-widget ul { list-style: none; margin: 0; padding: 0; }
#footer-widgets .footer-widget ul li {
    padding: 6px 0;
    border: none;
    margin: 0;
}
#footer-widgets .footer-widget ul li::before { display: none; }

/* Le menu de bas de page : une TROISIÈME structure. */
#main-footer .bottom-nav,
#main-footer .bottom-nav li,
#main-footer .bottom-nav li a {
    color: #D6E6F2;
    padding-top: 0;
    padding-bottom: 0;
}
#main-footer .bottom-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    padding: 20px 0;
    float: none;
}
#main-footer .bottom-nav li { padding: 0; }
#main-footer .bottom-nav li a { font-weight: 600; }
#main-footer .bottom-nav li a:hover { color: #fff; }
#main-footer .bottom-nav li.current-menu-item > a { color: #fff; font-weight: 700; }

#footer-bottom { background: #062741; }
#footer-info,
#footer-info a { color: #C8DCEC; }      /* 8,6:1 sur #062741 */
#footer-info { float: none; padding: 14px 0; }
#footer-info a { text-decoration: underline; }
#footer-info a:hover { color: #fff; }


/* =========================================================================
   20. ACCESSIBILITÉ

   ⚠️ Le contour de focus ne peut pas être SUPPRIMÉ : sans lui, un visiteur qui navigue
   au clavier (ou au lecteur d'écran) ne sait plus où il se trouve dans la page. C'est le
   plancher, non négociable.

   En revanche il peut être DISCRET, et il peut ne se montrer QU'AU CLAVIER :
     - `:focus-visible` (et non `:focus`) ne se déclenche pas au clic de souris ;
     - le gros liseré orange est remplacé par un anneau bleu fin, aux couleurs du site.
   ========================================================================= */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
#sidebar .et_pb_widget ul li a:focus-visible {
    outline: 2px solid var(--ln-turquoise);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Le champ de recherche : pas de halo. Le trait sous le champ suffit à dire où l'on est. */
.et-search-form input:focus,
.et-search-form input:focus-visible,
#searchinput:focus {
    outline: none;
    border-bottom: 2px solid var(--ln-turquoise);
    box-shadow: none;
}

.ln-lien-evitement {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 9999;
    padding: 12px 20px;
    background: var(--ln-bleu);
    color: #fff;
    border-radius: 0 0 var(--ln-rayon-s) 0;
}
.ln-lien-evitement:focus { left: 0; color: #fff; }

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}


/* =========================================================================
   RESPONSIVE — les points de rupture, en un seul endroit
   ========================================================================= */

/* --- Tablette large et petit portable (981 → 1279) ---
   Le conteneur de Divi est à 80 % : sur un écran de 1024, il ne restait que 807 px de
   contenu, dont 210 pour le menu latéral. On lui rend de la place. */
@media (min-width: 981px) and (max-width: 1279px) {
    #main-content .container,
    .ln-bandeau .et_pb_row,
    #footer-widgets .container,
    #footer-bottom .container {
        width: 94%;
        max-width: none;
    }
}

@media (min-width: 981px) and (max-width: 1150px) {
    #top-menu > li { padding-right: 14px; }
    #top-menu > li > a { font-size: 0.9rem; }
    #logo { height: 46px; }
    #sidebar { width: 25%; padding-right: 26px; }
    .et_left_sidebar #left-area { width: 75%; }
}

/* --- Tablette (768 → 980) : Divi passe au menu déroulant --- */
@media (max-width: 980px) {
    #main-header .container.et_menu_container { min-height: 74px; }
    #logo { height: 48px; }

    #main-content .container { padding-top: 34px; }

    #left-area .et_pb_section.ln-hero,
    #left-area .et_pb_section.ln-cta-bas { padding: 42px 34px; }

    #left-area .et_pb_section { margin-bottom: 44px; }

    .ln-bandeau { padding: 36px 0 34px; }

    #footer-widgets .footer-widget {
        width: 46% !important;
        margin: 0 4% 30px 0 !important;
    }
    #footer-widgets .footer-widget:nth-child(2n) { margin-right: 0 !important; }
}

/* --- Téléphone (< 768) --- */
@media (max-width: 767px) {
    body { font-size: 15.5px; }

    #main-header .container.et_menu_container { min-height: 66px; }
    #logo { height: 42px; }

    #main-content .container { padding-top: 26px; }

    .ln-bandeau { padding: 28px 0 26px; }
    .ln-bandeau h1 { font-size: 1.5rem; }

    #left-area .et_pb_section.ln-hero,
    #left-area .et_pb_section.ln-cta-bas { padding: 32px 22px; }
    #left-area .et_pb_section { margin-bottom: 38px; }

    .ln-hero .et_pb_button_module_wrapper {
        display: block;
        margin: 14px 0 0;
    }
    .ln-hero .et_pb_button {
        display: block;
        width: 100%;
        text-align: center;
    }

    .ln-coordonnees .ln-etiquette { flex: 0 0 100%; }

    .ln-nav-articles a { flex: 1 1 100%; }
    .ln-nav-articles .ln-suiv { text-align: left; }

    #sidebar { grid-template-columns: 1fr; }

    #footer-widgets .footer-widget {
        width: 100% !important;
        margin: 0 0 30px !important;
    }
    #main-footer .bottom-nav { gap: 6px 18px; }

    .et_pb_blurb { padding: 24px 20px; }
}/*
Theme Name:   Lourdes Natation (Divi)
Theme URI:    https://lourdes-natation.fr/
Description:  Thème enfant de Divi pour le club de Lourdes Natation. Conserve le menu latéral gauche du site d'origine, modernise cartes, icônes et espacements.
Author:       E-TASKFORCE LTD
Template:     Divi
Version:      1.1.0
Text Domain:  divi-child
*/

/* =========================================================================
   SOMMAIRE
     1.  Charte
     2.  Base
     3.  En-tête
     4.  Menu mobile
     5.  Bandeau de titre
     6.  Mise en page : contenu + menu latéral
     7.  Le menu latéral (les 5 blocs)
     8.  Les sections Divi dans la colonne de contenu
     9.  Le héros
     10. Les cartes
     11. Les actualités
     12. Les archives
     13. Le tableau des horaires
     14. Les partenaires
     15. Encarts et coordonnées
     16. Le formulaire
     17. Une actualité (page seule)
     18. La galerie
     19. Le pied de page
     20. Accessibilité
   ========================================================================= */


/* =========================================================================
   1. CHARTE — dérivée du logo (hippocampe bleu sur vagues)
   ========================================================================= */
:root {
    --ln-bleu:        #0B4F8A;
    --ln-bleu-sombre: #073A66;
    --ln-turquoise:   #12A0C8;
    --ln-eau:         #EAF4FA;
    --ln-eau-bord:    #D3E7F2;
    --ln-ambre:       #F5A623;
    --ln-ambre-fonce: #E09410;
    --ln-encre:       #17293B;
    --ln-encre-doux:  #4A6076;
    --ln-nuit:        #0A3A66;
    --ln-nuit-fonce:  #08304F;

    --ln-rayon:       14px;
    --ln-rayon-s:     9px;
    --ln-ombre:       0 6px 28px rgba(11, 79, 138, 0.10);
    --ln-ombre-forte: 0 12px 36px rgba(11, 79, 138, 0.18);

    /* Rythme vertical. Une seule échelle, partout. */
    --ln-gap:         26px;
    --ln-section:     56px;
}


/* =========================================================================
   2. BASE
   ========================================================================= */
body {
    color: var(--ln-encre);
    font-size: 16px;
    line-height: 1.75;
}

a { color: var(--ln-bleu); }
a:hover { color: var(--ln-bleu-sombre); }

h1, h2, h3, h4, h5, h6 {
    color: var(--ln-bleu);
    text-wrap: balance;
}

/* Le corps ne doit JAMAIS défiler de côté. */
html, body { overflow-x: clip; }


/* =========================================================================
   3. EN-TÊTE

   🔴 Divi construit son en-tête avec des FLOTTANTS et des décalages en dur :
      - `.logo_container` est en position absolue, `#logo` en `max-height: 54%` ;
      - `#et_search_icon` est positionné avec `top: 8px` et une hauteur de 20 px.
      Résultat : la loupe ne tombe jamais sur la ligne du menu, et le logo « flotte ».

   On repasse l'en-tête entier en FLEX : tout est centré verticalement, une fois pour
   toutes, quelle que soit la hauteur du logo.
   ========================================================================= */
#main-header {
    box-shadow: 0 2px 14px rgba(11, 79, 138, 0.08);
    padding: 0;
}

#main-header .container.et_menu_container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 84px;
    padding-top: 0;
    padding-bottom: 0;
}

/**
 * 🔴 `.logo_container` est en POSITION ABSOLUE chez Divi, et occupe tout l'en-tête.
 *
 * Conséquence : il sort du flux. Le conteneur flex n'a plus qu'un seul enfant en flux
 * (la navigation), et le `justify-content: space-between` n'a plus rien à espacer :
 * le menu remontait se coller à GAUCHE, PAR-DESSUS le logo.
 *
 * La règle de Divi (`#main-header .logo_container`) est plus spécifique qu'un simple
 * `.logo_container` : il faut au moins autant de poids pour la défaire.
 */
#main-header .container.et_menu_container .logo_container {
    position: static;
    float: none;
    height: auto;
    width: auto;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}
/* Le « helper » de Divi ne sert qu'à son centrage vertical d'origine. */
#main-header .logo_helper { display: none; }

#main-header .container.et_menu_container #et-top-navigation { flex: 0 0 auto; }

/**
 * ⚠️ Divi bride le logo avec `max-width: 50%` ET `max-height: 54%` — deux pourcentages
 * dont les références changent selon le point de rupture. Sur téléphone, le logo
 * ressortait à 51×21 px : illisible.
 * On impose une HAUTEUR en pixels et on libère la largeur. Le logo mesure 578×240 :
 * à 56 px de haut il est réduit, jamais agrandi.
 */
/**
 * 🔴 Le `!important` n'est pas de la paresse : Divi pose `#logo { max-width: 50% }` dans
 * une requête média sous 980 px. Le logo (578×240) ressortait alors en 58×48 — ÉCRASÉ de
 * moitié en largeur, illisible. Une simple redéclaration ne suffit pas à la défaire.
 */
#logo {
    height: 56px;
    width: auto !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0;
    object-fit: contain;
}
.et-fixed-header #logo { height: 46px; }

/* 🔴 En flex à TOUTES les largeurs : sous 980 px, Divi le repasse en `block`, et la loupe
   se décalait de 10 px par rapport au burger. Ils doivent tomber sur la même ligne. */
#et-top-navigation {
    display: flex !important;
    align-items: center;
    float: none;
    padding: 0 !important;
    margin: 0;
}

/* La loupe, centrée, à toutes les largeurs. */
#et_top_search {
    display: flex;
    align-items: center;
    float: none;
    margin: 0 0 0 16px;
    padding: 0;
}

/**
 * ⚠️ Le burger : on ne touche PAS à son `display`.
 *
 * Divi le masque au-dessus de 980 px (`display: none`) et le montre en dessous. Un
 * `display: flex` non borné le faisait réapparaître sur les grands écrans, à côté de la
 * loupe, alors que le menu complet était déjà là. On se contente de le recentrer.
 */
#et_mobile_nav_menu {
    float: none;
    margin: 0 0 0 8px;
    padding: 0;
    align-self: center;
}
/**
 * 🔴 Divi pose `padding-bottom: 24px` sur `.mobile_menu_bar`.
 *
 * Le CADRE du burger était donc parfaitement centré — toutes les mesures le disaient —
 * mais le GLYPHE, lui, se retrouvait tassé dans le tiers supérieur de cette boîte de
 * 40 px. À l'œil, le burger flottait au-dessus de la ligne du logo et de la loupe.
 * C'est le genre de décalage qu'un contrôle sur les boîtes ne voit jamais.
 */
#et_mobile_nav_menu .mobile_menu_bar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0 !important;
    margin: 0;
    border-radius: 50%;
    color: var(--ln-bleu);
    transition: background 0.15s ease;
}
#et_mobile_nav_menu .mobile_menu_bar:hover { background: var(--ln-eau); }
#et_mobile_nav_menu .mobile_menu_bar::before {
    position: static;
    top: auto;
    margin: 0;
    padding: 0;
    line-height: 1;
    font-size: 28px;
}

/**
 * 🔴 Le menu de bureau, UNIQUEMENT au-dessus de 980 px.
 *
 * Divi masque `#top-menu-nav` et `#et_top_search` en dessous (le burger prend le relais).
 * Un `display: flex` non borné les REMETTAIT à l'écran, derrière le burger : 444 px de
 * menu dans une fenêtre de 390 — la page débordait sur la droite, sans qu'on voie quoi.
 */
@media (min-width: 981px) {
    #top-menu-nav,
    #top-menu {
        display: flex;
        align-items: center;
        float: none;
        margin: 0;
        padding: 0;
    }

    #top-menu > li {
        display: flex;
        align-items: center;
        padding-right: 22px;
        margin: 0;
    }
    #top-menu > li:last-child { padding-right: 0; }
}

/**
 * ⚠️ Divi pose `padding-bottom: 33px` sur chaque lien du menu — c'est la place qu'il
 * réserve à SON trait de survol. Le lien mesurait donc 47 px de haut pour 14 px de texte,
 * le bouton d'appel à l'action s'étirait sur toute la hauteur de l'en-tête, et notre
 * souligné tombait 33 px sous le mot. La règle résiste à une simple redéclaration.
 */
#top-menu > li > a {
    display: flex;
    align-items: center;
    padding: 0 !important;
    line-height: 1.4;
    font-weight: 600;
    letter-spacing: 0.2px;
    color: var(--ln-encre);
    opacity: 1;
}
#top-menu > li > a:hover { color: var(--ln-bleu); opacity: 1; }
#top-menu > li.current-menu-item > a,
#top-menu > li.current_page_item > a { color: var(--ln-bleu); }

/* Le trait de survol de Divi, remplacé par un souligné net, collé sous le mot. */
#top-menu > li > a::after { display: none !important; }
#top-menu > li:not(.ln-cta) > a::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -7px;
    width: 0;
    height: 2px;
    background: var(--ln-turquoise);
    transition: width 0.18s ease;
}
#top-menu > li { position: relative; }
#top-menu > li:not(.ln-cta) > a:hover::before,
#top-menu > li:not(.ln-cta).current-menu-item > a::before { width: 100%; }

/* L'appel à l'action : un bouton, pas un lien de menu. */
#top-menu > li.ln-cta > a {
    background: var(--ln-ambre);
    color: #3A2600;
    border-radius: var(--ln-rayon-s);
    padding: 12px 20px !important;
    font-weight: 700;
    line-height: 1.1;
    box-shadow: 0 3px 12px rgba(245, 166, 35, 0.32);
}
#top-menu > li.ln-cta > a:hover {
    background: var(--ln-ambre-fonce);
    color: #3A2600;
}
#top-menu > li.ln-cta > a::before { display: none; }

/* 🔴 La loupe. Divi la cale avec `top: 8px` sur une boîte de 20 px de haut : elle ne
   tombe jamais sur la ligne du menu. On la remet dans le flux, centrée.
   (Son `display: flex` est dans le bloc ≥ 981 px ci-dessus : en dessous, Divi la masque.) */
#et_search_icon {
    float: none;
    position: static;
    top: auto;
    margin: 0;
    flex: 0 0 34px;      /* Divi le fige à 20 px de large : il s'écrasait */
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--ln-encre-doux);
    transition: background 0.15s ease, color 0.15s ease;
}
#et_search_icon:hover { background: var(--ln-eau); color: var(--ln-bleu); }
#et_search_icon::before {
    position: static;
    font-size: 18px;
    line-height: 1;
}

/**
 * 🔴 `.et_search_outer` RECOUVRE L'EN-TÊTE EN PERMANENCE.
 *
 * Divi le pose en `position: absolute`, plein cadre sur l'en-tête, et le laisse là —
 * visible, mais TRANSPARENT. Ce n'est pas lui qu'il ouvre et ferme, c'est le formulaire
 * à l'intérieur (classe `et_pb_search_visible` / `et_pb_search_form_hidden`).
 *
 * Lui donner une couleur de fond revient donc à repeindre l'en-tête POUR TOUJOURS :
 * on cliquait sur la loupe, l'en-tête devenait bleu… et le restait, logo et menu noyés
 * dedans, illisibles.
 *
 * On ne le peint donc QUE pendant que la recherche est ouverte.
 */
.et_search_outer { background: transparent; }

.et_search_outer:has(.et_pb_search_visible) {
    background: #fff;
    border-bottom: 2px solid var(--ln-turquoise);
    box-shadow: 0 6px 18px rgba(11, 79, 138, 0.10);
}

.et-search-form input,
.et_search_outer #searchinput {
    color: var(--ln-encre) !important;
    font-size: 1.05rem;
    border-bottom: 2px solid var(--ln-eau-bord);
}
.et-search-form input::placeholder { color: #9AAEBF; }
.et_search_outer .et_close_search_field::after { color: var(--ln-bleu); }
.et_search_outer .et_close_search_field:hover::after { color: var(--ln-bleu-sombre); }


/* =========================================================================
   4. MENU MOBILE (le « burger »)
   ========================================================================= */
.mobile_menu_bar::before {
    color: var(--ln-bleu);
    font-size: 30px;
}

.et_mobile_menu {
    border-top: 3px solid var(--ln-turquoise);
    border-radius: 0 0 var(--ln-rayon) var(--ln-rayon);
    box-shadow: var(--ln-ombre-forte);
    padding: 8px 0;
}
.et_mobile_menu li a {
    padding: 14px 22px;
    color: var(--ln-encre);
    font-weight: 600;
    border-bottom: 1px solid var(--ln-eau);
}
.et_mobile_menu li:last-child a { border-bottom: none; }
.et_mobile_menu li a:hover {
    background: var(--ln-eau);
    color: var(--ln-bleu);
    opacity: 1;
}
.et_mobile_menu li.current-menu-item > a { color: var(--ln-bleu); }

/* L'appel à l'action reste un bouton, même dans le menu déroulant. */
.et_mobile_menu li.ln-cta > a {
    margin: 10px 18px;
    background: var(--ln-ambre);
    color: #3A2600;
    border-radius: var(--ln-rayon-s);
    text-align: center;
    font-weight: 700;
    border-bottom: none;
}


/* =========================================================================
   5. BANDEAU DE TITRE
   ========================================================================= */
.ln-bandeau {
    background: linear-gradient(122deg, var(--ln-bleu) 0%, var(--ln-turquoise) 100%);
    color: #fff;
    padding: 48px 0 46px;
}
.ln-bandeau .et_pb_row {
    width: 90%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0;
}
.ln-bandeau h1 {
    color: #fff;
    margin: 0;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    line-height: 1.22;
}
.ln-bandeau .ln-fil {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.88rem;
    margin-bottom: 10px;
}
.ln-bandeau .ln-fil a { color: #fff; text-decoration: underline; }
.ln-bandeau .ln-fil a:hover { color: #fff; }


/* =========================================================================
   6. MISE EN PAGE : contenu + menu latéral

   🔴 Ces règles ne viennent PAS de Divi, et c'est voulu.

   Divi range la mise en page à deux colonnes dans `css/dynamic-assets/sidebar.css`,
   qu'il ne charge que s'il détecte le MODULE « Sidebar » du constructeur. Nous utilisons
   la barre latérale du THÈME (des widgets) : Divi conclut qu'il n'y en a pas, la feuille
   n'arrive jamais, et la colonne s'étale sur toute la largeur.

   Et on ne peut pas l'enfiler soi-même : le « Dynamic CSS » de Divi écarte les handles
   qu'il ne connaît pas. Dix lignes, écrites une fois, qui ne dépendent de rien.
   ========================================================================= */
/* ⚠️ Le bas compte autant que le haut : sans `padding-bottom`, la dernière section de la
   page (l'appel à l'action bleu de l'accueil) venait TOUCHER le pied de page, sans un
   pixel entre les deux. */
#main-content .container {
    padding-top: 46px;
    padding-bottom: 72px;
}

#content-area::after {
    content: "";
    display: table;
    clear: both;
}

@media (min-width: 981px) {
    #sidebar {
        float: left;
        width: 23%;
        padding: 0 34px 0 0;
        margin: 0;
    }
    .et_left_sidebar #left-area {
        float: right;
        width: 77%;
        padding: 0;
    }
}

@media (max-width: 980px) {
    #sidebar,
    #left-area {
        float: none;
        width: 100%;
        padding: 0;
    }
    /* Sur tablette et mobile, le menu passe SOUS le contenu : on ne fait pas descendre
       le visiteur sur cinq blocs de navigation avant de lui montrer la page. */
    #sidebar { margin-top: 52px; }
}


/* =========================================================================
   7. LE MENU LATÉRAL — les 5 blocs
      (art. 2.3 du contrat : « maintien du menu latéral existant »)

   ⚠️ Divi laisse ses widgets en `float: left; width: auto` : les cinq blocs prenaient
      chacun la largeur de leur plus long libellé — 188, 198, 187, 198 et 149 px.
      Un escalier. La largeur doit être imposée.
   ========================================================================= */
#sidebar .et_pb_widget {
    float: none !important;
    width: 100% !important;
    margin: 0 0 var(--ln-gap) !important;

    background: #fff;
    border: 1px solid var(--ln-eau-bord);
    border-radius: var(--ln-rayon);
    padding: 20px 18px 14px;
    box-shadow: var(--ln-ombre);
}
#sidebar .et_pb_widget:last-child { margin-bottom: 0 !important; }

#sidebar .et_pb_widget .widgettitle {
    color: var(--ln-bleu);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    margin: 0 0 12px;
    padding: 0 0 10px;
    border-bottom: 2px solid var(--ln-eau);
}

#sidebar .et_pb_widget ul { margin: 0; padding: 0; list-style: none; }
#sidebar .et_pb_widget ul li { margin: 0; padding: 0; border: none; }
#sidebar .et_pb_widget ul li::before { display: none; }

#sidebar .et_pb_widget ul li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    margin: 2px 0;
    border-radius: var(--ln-rayon-s);
    color: var(--ln-encre);
    font-weight: 500;
    line-height: 1.4;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

/* Une goutte devant chaque entrée, pas une puce. */
#sidebar .et_pb_widget ul li a::before {
    content: "";
    display: block;
    flex: 0 0 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ln-turquoise);
    opacity: 0.55;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

#sidebar .et_pb_widget ul li a:hover {
    background: var(--ln-eau);
    color: var(--ln-bleu);
}
#sidebar .et_pb_widget ul li a:hover::before { opacity: 1; transform: scale(1.3); }

#sidebar .et_pb_widget ul li.current-menu-item > a {
    background: var(--ln-bleu);
    color: #fff;
    font-weight: 700;
}
#sidebar .et_pb_widget ul li.current-menu-item > a::before {
    background: #fff;
    opacity: 1;
}

/* Sur tablette, les cinq blocs se rangent en grille au lieu de s'empiler. */
@media (max-width: 980px) {
    #sidebar {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
        gap: var(--ln-gap);
        align-items: start;
    }
    #sidebar .et_pb_widget { margin: 0 !important; }
    #sidebar .et_pb_widget:last-child { margin: 0 !important; }
}


/* =========================================================================
   8. LES SECTIONS DIVI, DANS LA COLONNE DE CONTENU

   🔴 Les sections Divi vivent ici DANS `#left-area`, pas en pleine page. Leurs marges
      par défaut, calculées pour une pleine largeur, y creusent des trous.

   ⚠️ Mais un `padding: 0` aveugle sur `.et_pb_section` écrase AUSSI le `custom_padding`
      du héros et de l'appel à l'action — leur texte se collait au bord.
      On ne remet donc à zéro que les sections SANS fond.
   ========================================================================= */
#left-area .et_pb_section {
    padding: 0;
    margin: 0 0 var(--ln-section);
}
#left-area .et_pb_section:last-child { margin-bottom: 0; }

/* Les sections qui portent un fond gardent leur marge intérieure. */
#left-area .et_pb_section.ln-hero,
#left-area .et_pb_section.ln-cta-bas {
    padding: 52px 46px;
    border-radius: var(--ln-rayon);
}

.ln-cta-bas h2,
.ln-cta-bas p { color: #fff; }
.ln-cta-bas h2 { margin-top: 0; }
.ln-cta-bas .et_pb_text { margin-bottom: 8px; }

#left-area .et_pb_row {
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0 0 var(--ln-gap);
}
#left-area .et_pb_row:last-child { margin-bottom: 0; }

#left-area .et_pb_column { margin-right: 4%; }
#left-area .et_pb_column:last-child { margin-right: 0; }
#left-area .et_pb_column.et_pb_column_4_4 { margin-right: 0; width: 100%; }

#left-area h2 { font-size: 1.55rem; margin: 0 0 0.7em; }
#left-area h3 { font-size: 1.2rem; margin: 1.4em 0 0.5em; }
#left-area ul li { margin-bottom: 0.4em; }

.ln-chapeau {
    font-size: 1.06rem;
    color: var(--ln-encre-doux);
    margin-bottom: 1.5em;
}
.ln-titre-section { font-size: 1.7rem; margin: 0 0 6px; }
.ln-sous-titre { color: var(--ln-encre-doux); margin: 0 0 6px; }

/* Les photos dans le corps d'un article.

   ⚠️ Le plafond de HAUTEUR n'est pas décoratif : les photos du club sont des originaux de
   téléphone, souvent en portrait. À la largeur de la colonne (≈ 715 px), une photo 3:4
   ressortait à 950 px de haut — elle mangeait tout l'écran et poussait le texte hors de vue. */
.ln-photo,
#left-area .entry-content img {
    display: block;
    max-width: 100%;
    max-height: 560px;
    width: auto;
    height: auto;
    margin: 20px auto;
    border-radius: 12px;
    box-shadow: var(--ln-ombre);
}

@media (max-width: 767px) {
    .ln-photo,
    #left-area .entry-content img { max-height: 420px; }
}


/* =========================================================================
   9. LE HÉROS
   ========================================================================= */
.ln-hero {
    position: relative;
    overflow: hidden;
    border-radius: var(--ln-rayon);
}

/* Un voile en dégradé : la photo reste visible, le texte reste lisible. */
.ln-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        100deg,
        rgba(8, 43, 76, 0.94) 0%,
        rgba(10, 58, 102, 0.86) 42%,
        rgba(18, 160, 200, 0.42) 100%
    );
    z-index: 0;
}
.ln-hero > .et_pb_row { position: relative; z-index: 1; }

.ln-hero,
.ln-hero h1,
.ln-hero p { color: #fff; }

.ln-hero .ln-sur-titre {
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: #8FD4EC;
    margin: 0 0 14px;
}
.ln-hero .ln-hero-titre {
    font-size: clamp(1.8rem, 3.2vw, 2.6rem);
    line-height: 1.14;
    font-weight: 800;
    margin: 0 0 16px;
}
.ln-hero .ln-hero-texte {
    font-size: 1.04rem;
    max-width: 48ch;
    color: rgba(255, 255, 255, 0.92);
    margin: 0;
}
.ln-hero .et_pb_text { margin-bottom: 0; }

/* Les deux boutons sont deux modules empilés dans la même colonne : une LIGNE Divi ne
   peut pas vivre dans une COLONNE. C'est ici qu'on les met côte à côte. */
.ln-hero .et_pb_button_module_wrapper {
    display: inline-block;
    margin: 22px 14px 0 0;
}
.ln-hero .et_pb_button_module_wrapper:last-of-type { margin-right: 0; }


/* =========================================================================
   10. LES CARTES (module Blurb de Divi)

   ⚠️ Deux pièges superposés :
      a) les colonnes Divi FLOTTENT — des flottants ne s'égalisent jamais en hauteur.
         C'est la LIGNE qui doit passer en flex.
      b) mettre la carte en flex ne suffit pas : il faut dérouler toute la chaîne
         (blurb > content > container > description) pour que le lien « → » se cale en bas.
         Sans ça, les trois liens ne tombent pas à la même hauteur.
   ========================================================================= */
.et_pb_blurb {
    background: #fff;
    border: 1px solid var(--ln-eau-bord);
    border-radius: var(--ln-rayon);
    padding: 28px 20px;      /* resserré : chaque pixel rendu au texte compte ici */
    box-shadow: var(--ln-ombre);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.et_pb_blurb:hover {
    transform: translateY(-3px);
    box-shadow: var(--ln-ombre-forte);
}

/**
 * 🔴 Les icônes restaient INVISIBLES.
 *
 * Divi les fait apparaître au défilement (« waypoint ») : tant que la carte n'est pas
 * entrée dans l'écran, l'icône est à `opacity: 0`. Deux conséquences :
 *   - une carte déjà visible au chargement, ou hors de portée du déclencheur, reste vide ;
 *   - et surtout, un visiteur qui a demandé « moins d'animations » (prefers-reduced-motion)
 *     coupe les animations… et l'icône ne s'affiche JAMAIS.
 *
 * Une icône ne doit pas dépendre d'une animation pour exister.
 */
.et_pb_blurb .et-waypoint:not(.et-animated),
.et_pb_blurb .et-waypoint {
    opacity: 1 !important;
    animation: none !important;
}

.et_pb_blurb .et_pb_main_blurb_image { margin-bottom: 18px; }
.et_pb_blurb .et_pb_module_header {
    font-size: 1.18rem;
    margin: 0 0 8px;
}
/**
 * Texte justifié dans les cartes.
 *
 * ⚠️ La justification n'est PAS gratuite dans une colonne étroite.
 *
 * Le texte d'une carte ne fait que ~205 px de large. Justifié, il creuse d'énormes
 * « rivières » (« École     de     natation ») dès qu'un mot long ne rentre pas.
 * Trois garde-fous, dans cet ordre :
 *
 *   1. `hyphens: auto` — le navigateur coupe les mots. Il a besoin de `lang="fr-FR"`
 *      sur la page (WordPress le pose) pour connaître les règles du français.
 *   2. `text-wrap: pretty` — même sans césure, il évite qu'un mot reste seul sur la
 *      dernière ligne, et répartit mieux les coupures.
 *   3. Des textes COURTS. C'est le vrai remède : aucune règle CSS ne sauve une phrase
 *      trop longue pour sa colonne.
 */
.et_pb_blurb .et_pb_blurb_description {
    color: var(--ln-encre-doux);
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    -webkit-hyphens: auto;
    text-wrap: pretty;
    /* Une rivière apparaît quand un espace doit trop s'étirer. On borne l'étirement :
       au-delà, le navigateur préfère renvoyer le mot à la ligne suivante. */
    word-spacing: -0.02em;
}
.et_pb_blurb .et_pb_blurb_description a {
    font-weight: 700;
    text-align: left;
    display: inline-block;
}
.et_pb_blurb .et_pb_blurb_description p:last-child {
    margin-bottom: 0;
    text-align: left;      /* le lien « → » ne se justifie pas */
}

@media (min-width: 981px) {
    /**
     * ⚠️ La gouttière vaut 5,5 % — la MÊME que celle de la grille d'actualités de Divi.
     *
     * Sans ça, les trois cartes d'activité s'arrêtaient 25 px avant le bord droit, alors
     * que les cartes d'actualité, juste en dessous, allaient au bout. Deux rangées qui ne
     * se terminent pas au même endroit : c'est ce qui se voit, et ça se voit tout de suite.
     *
     * `flex: 1 1 0` répartit l'espace restant à parts égales : les colonnes remplissent la
     * ligne, quoi qu'en dise la largeur en pourcentage que Divi leur a posée.
     */
    .ln-section-activites .et_pb_row,
    .ln-cartes.et_pb_row {
        display: flex;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 5.5%;
    }

    /**
     * 🔴 Le clearfix de Divi devient une COLONNE FANTÔME.
     *
     * Divi pose `.et_pb_row::after { content: ""; display: table; clear: both; }` pour
     * refermer ses flottants. Mais dans un conteneur FLEX, un pseudo-élément avec du
     * `content` devient un ÉLÉMENT FLEX à part entière.
     *
     * La ligne avait donc QUATRE éléments, et donc TROIS gouttières au lieu de deux.
     * Les trois cartes se partageaient 694 px au lieu de 740, et la rangée s'arrêtait
     * 46 px avant le bord — exactement la largeur d'une gouttière.
     */
    .ln-section-activites .et_pb_row::before,
    .ln-section-activites .et_pb_row::after,
    .ln-cartes.et_pb_row::before,
    .ln-cartes.et_pb_row::after {
        display: none !important;
        content: none !important;
    }

    .ln-section-activites .et_pb_row > .et_pb_column,
    .ln-cartes.et_pb_row > .et_pb_column {
        float: none;
        display: flex;
        flex: 1 1 0;
        width: auto !important;
        min-width: 0;
        margin: 0 !important;
    }
    /* La chaîne complète, jusqu'au dernier paragraphe. */
    .ln-section-activites .et_pb_blurb,
    .ln-cartes.et_pb_row .et_pb_blurb,
    .ln-section-activites .et_pb_blurb_content,
    .ln-cartes.et_pb_row .et_pb_blurb_content,
    .ln-section-activites .et_pb_blurb_container,
    .ln-cartes.et_pb_row .et_pb_blurb_container,
    .ln-section-activites .et_pb_blurb_description,
    .ln-cartes.et_pb_row .et_pb_blurb_description {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        width: 100%;
    }
    /* Le lien « → » se cale en bas : les trois s'alignent. */
    .ln-section-activites .et_pb_blurb_description > p:last-child,
    .ln-cartes.et_pb_row .et_pb_blurb_description > p:last-child {
        margin-top: auto;
        padding-top: 12px;
    }
}

@media (max-width: 980px) {
    .ln-section-activites .et_pb_column,
    .ln-cartes .et_pb_column {
        display: block;
        width: 100% !important;
        margin: 0 0 var(--ln-gap) !important;
    }
    .ln-section-activites .et_pb_column:last-child,
    .ln-cartes .et_pb_column:last-child { margin-bottom: 0 !important; }
}


/* =========================================================================
   11. LES ACTUALITÉS (module Blog de Divi)

   ⚠️ Divi dispose sa grille avec Salvattore : une vraie maçonnerie, qui empile les
      cartes en escalier dès qu'elles n'ont pas la même hauteur. On ne la combat pas —
      on rend toutes les cartes RIGOUREUSEMENT de la même hauteur. Une maçonnerie de
      cartes égales est une grille.
   ========================================================================= */
.et_pb_blog_grid .et_pb_post,
.ln-blog-accueil .et_pb_post {
    background: #fff;
    border: 1px solid var(--ln-eau-bord);
    border-radius: var(--ln-rayon);
    overflow: hidden;
    box-shadow: var(--ln-ombre);
    padding: 0 0 22px;
    margin-bottom: var(--ln-gap);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.et_pb_blog_grid .et_pb_post:hover,
.ln-blog-accueil .et_pb_post:hover {
    transform: translateY(-3px);
    box-shadow: var(--ln-ombre-forte);
}

.et_pb_blog_grid .et_pb_image_container,
.ln-blog-accueil .et_pb_image_container { margin: 0 0 16px; }

.et_pb_blog_grid .entry-featured-image-url,
.ln-blog-accueil .entry-featured-image-url {
    display: block;
    margin: 0;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}
.et_pb_blog_grid .entry-featured-image-url img,
.ln-blog-accueil .entry-featured-image-url img {
    width: 100%;
    height: 100%;
    object-fit: cover;      /* on recadre, on ne déforme pas */
    border-radius: 0;
    box-shadow: none;
    margin: 0;
}

.et_pb_blog_grid .entry-title,
.et_pb_blog_grid .post-meta,
.et_pb_blog_grid .post-content,
.ln-blog-accueil .entry-title,
.ln-blog-accueil .post-meta,
.ln-blog-accueil .post-content { padding: 0 22px; }

/* ⚠️ `min-height` ne clippe pas : la boîte s'agrandit pour son contenu, et la 3e ligne
   du titre vient chevaucher la date. Il faut une HAUTEUR FIXE. */
/* Trois lignes, pas deux : dans une carte de 247 px, « MEETING REGIONAL PRINTEMPS
   TOULOUSE » se faisait couper au milieu du deuxième mot. */
.et_pb_blog_grid .entry-title,
.ln-blog-accueil .entry-title {
    font-size: 1.05rem;
    line-height: 1.35;
    margin: 0 0 8px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden !important;
    height: 4.05em;             /* exactement trois lignes */
    padding-top: 0;
    padding-bottom: 0;
}
.et_pb_blog_grid .entry-title a,
.ln-blog-accueil .entry-title a { color: var(--ln-bleu); }

/* ⚠️ La date doit tenir sur UNE ligne, toujours.
   Dans une carte étroite, « 24 NOVEMBRE 2025 » passait à la ligne quand « 4 MAI 2026 »
   tenait : deux cartes voisines se retrouvaient avec 28 px d'écart, sans autre raison. */
.et_pb_blog_grid .post-meta,
.ln-blog-accueil .post-meta {
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--ln-turquoise);
    margin: 0 0 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/**
 * 🔴 Le nombre de colonnes de la grille.
 *
 * Divi la dispose avec Salvattore, qui lit le nombre de colonnes dans le `content` d'un
 * pseudo-élément — un mécanisme inhabituel, mais qui a l'avantage d'être pilotable au CSS.
 *
 * Divi garde TROIS colonnes jusqu'à 980 px. Mais chez nous, le contenu ne fait que 77 %
 * de la page (le menu latéral prend le reste) : à 1024 px de fenêtre, chaque carte tombait
 * à 177 px de large. Illisible.
 *
 * On repasse donc à deux colonnes tant que la zone de contenu est étroite.
 */
@media (min-width: 981px) and (max-width: 1279px) {
    .et_pb_blog_grid .et_pb_salvattore_content[data-columns]::before {
        content: '2 .column.size-1of2' !important;
    }
    /* ⚠️ Et il faut poser la largeur soi-même : Divi ne définit `.size-1of2` QUE sous
       980 px. Au-dessus, les deux colonnes prenaient 100 % chacune — elles s'empilaient,
       et la grille redevenait une liste d'articles pleine largeur. */
    .et_pb_blog_grid .column.size-1of2 {
        width: 48%;
        float: left;
        margin-right: 4%;
    }
    .et_pb_blog_grid .column.size-1of2:nth-child(2n) { margin-right: 0; }
}

.et_pb_blog_grid .post-content p,
.ln-blog-accueil .post-content p {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 7em;
    margin: 0 0 10px;
    color: var(--ln-encre-doux);
    font-size: 0.95rem;
    line-height: 1.75;
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
}

.et_pb_blog_grid .more-link,
.ln-blog-accueil .more-link {
    display: inline-block;
    font-weight: 700;
}

/* La pagination */
.pagination {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    margin-top: 8px;
}
.pagination a {
    display: inline-block;
    padding: 11px 20px;
    background: #fff;
    border: 1px solid var(--ln-eau-bord);
    border-radius: var(--ln-rayon-s);
    font-weight: 700;
}
.pagination a:hover { background: var(--ln-eau); }


/* =========================================================================
   12. LES ARCHIVES
   ========================================================================= */
.ln-archives .ln-annee { margin-bottom: 36px; }
.ln-archives .ln-annee:last-child { margin-bottom: 0; }
.ln-archives .ln-annee h2 {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin: 0 0 12px;
    padding-bottom: 10px;
    border-bottom: 3px solid var(--ln-eau);
    font-size: 1.6rem;
}
.ln-archives .ln-compte {
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--ln-encre-doux);
}
/* ⚠️ Divi dessine ses puces avec un `::before`, pas avec `list-style` :
   un `list-style: none` ne les enlève pas. Il faut viser le pseudo-élément. */
.ln-archives ul,
.ln-coordonnees { list-style: none; margin: 0; padding: 0; }
.ln-archives li::before,
.ln-coordonnees li::before,
.ln-partenaires li::before,
#sidebar .et_pb_widget ul li::marker,
.ln-archives li::marker,
.ln-coordonnees li::marker { display: none; content: none; }

.ln-archives li { margin: 0; }
.ln-archives li a {
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding: 11px 12px;
    border-radius: var(--ln-rayon-s);
    color: var(--ln-encre);
    text-decoration: none;
    transition: background 0.15s ease;
}
.ln-archives li a:hover { background: var(--ln-eau); color: var(--ln-bleu); }
.ln-archives time {
    flex: 0 0 72px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--ln-turquoise);
}
.ln-archives .ln-titre { font-weight: 500; line-height: 1.45; }


/* =========================================================================
   13. LE TABLEAU DES HORAIRES
        L'original alignait ses colonnes avec des espaces insécables : illisible au
        lecteur d'écran, cassé sur téléphone.
   ========================================================================= */
.ln-horaires {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 32px;
    font-size: 0.97rem;
}
.ln-horaires:last-child { margin-bottom: 0; }
.ln-horaires caption {
    caption-side: top;
    text-align: left;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    font-size: 0.85rem;
    color: var(--ln-bleu);
    background: var(--ln-eau);
    padding: 13px 16px;
    border: 1px solid var(--ln-eau-bord);
    border-bottom: none;
    border-radius: var(--ln-rayon-s) var(--ln-rayon-s) 0 0;
}
.ln-horaires th,
.ln-horaires td {
    padding: 13px 16px;
    border: 1px solid var(--ln-eau-bord);
    vertical-align: top;
    text-align: left;
}
.ln-horaires th {
    width: 34%;
    background: #FBFDFE;
    color: var(--ln-bleu);
    font-weight: 700;
}
.ln-horaires td { background: #fff; }
.ln-horaires .ln-creneau { display: block; }
.ln-horaires .ln-note {
    color: var(--ln-encre-doux);
    font-size: 0.88em;
    font-weight: 400;
}

/* Sur un téléphone, le tableau devient des fiches empilées. */
@media (max-width: 640px) {
    .ln-horaires,
    .ln-horaires tbody,
    .ln-horaires tr,
    .ln-horaires th,
    .ln-horaires td { display: block; width: 100%; }

    /* ⚠️ Le `caption` reste en `table-caption` même quand le tableau passe en `block` :
       il se ratatinait sur son texte, comme un onglet perdu en haut à gauche. */
    .ln-horaires caption {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    .ln-horaires th {
        border-radius: var(--ln-rayon-s) var(--ln-rayon-s) 0 0;
        border-bottom: none;
    }
    .ln-horaires td {
        border-radius: 0 0 var(--ln-rayon-s) var(--ln-rayon-s);
        margin-bottom: 14px;
    }
}


/* =========================================================================
   14. LES PARTENAIRES
   ========================================================================= */
.ln-partenaires {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: var(--ln-gap);
}
.ln-partenaires a {
    flex: 1 1 190px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 130px;
    padding: 22px 26px;
    background: #fff;
    border: 1px solid var(--ln-eau-bord);
    border-radius: var(--ln-rayon);
    box-shadow: var(--ln-ombre);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ln-partenaires a:hover {
    transform: translateY(-3px);
    box-shadow: var(--ln-ombre-forte);
}
.ln-partenaires img {
    max-width: 100%;
    max-height: 78px;
    width: auto;
    height: auto;
    box-shadow: none;
    border-radius: 0;
    margin: 0;
}


/* =========================================================================
   15. ENCARTS ET COORDONNÉES
   ========================================================================= */
.ln-encart {
    display: flex;
    gap: 16px;
    padding: 20px 22px;
    background: var(--ln-eau);
    border: 1px solid var(--ln-eau-bord);
    border-left: 5px solid var(--ln-turquoise);
    border-radius: var(--ln-rayon-s);
    margin: 0 0 var(--ln-gap);
}
.ln-encart p:last-child { margin-bottom: 0; }
.ln-encart strong { color: var(--ln-bleu); }

.ln-coordonnees { list-style: none; margin: 0 0 var(--ln-gap); padding: 0; }
.ln-coordonnees li {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-start;
    padding: 13px 0;
    border-bottom: 1px solid var(--ln-eau-bord);
    margin: 0;
}
.ln-coordonnees li:last-child { border-bottom: none; }
.ln-coordonnees .ln-etiquette {
    flex: 0 0 118px;
    font-weight: 700;
    color: var(--ln-bleu);
}


/* =========================================================================
   16. LE FORMULAIRE (Forminator)

   🔴 La CARTE est portée par le module Divi (`.ln-formulaire`), pas par le <form>.

   Forminator verrouille le style de son propre conteneur : un `padding` posé sur
   `.forminator-custom-form` est purement ignoré (il reste à 0), et les champs se
   retrouvent collés au bord de la page, sans encadré, sans respiration.
   On habille donc le conteneur qu'on maîtrise — celui du constructeur.
   ========================================================================= */
.ln-formulaire {
    background: #fff;
    border: 1px solid var(--ln-eau-bord);
    border-radius: var(--ln-rayon);
    padding: 34px 32px;
    box-shadow: var(--ln-ombre);
}

/* --- Les rangées --- */
.forminator-ui .forminator-row { margin-bottom: 22px !important; }
.forminator-ui .forminator-row:last-child { margin-bottom: 0 !important; }

/* --- Les libellés --- */
.forminator-ui .forminator-label {
    display: block;
    margin-bottom: 8px !important;
    color: var(--ln-bleu) !important;
    font-size: 0.78rem !important;
    font-weight: 800 !important;
    letter-spacing: 1.1px !important;
    text-transform: uppercase;
    line-height: 1.3 !important;
}
.forminator-ui .forminator-required { color: #C0392B !important; }

/* --- Les champs --- */
.forminator-ui .forminator-input,
.forminator-ui .forminator-textarea {
    width: 100% !important;
    padding: 14px 16px !important;
    background: #FBFDFE !important;
    border: 1.5px solid var(--ln-eau-bord) !important;
    border-radius: var(--ln-rayon-s) !important;
    color: var(--ln-encre) !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.forminator-ui .forminator-input { height: auto !important; }
.forminator-ui .forminator-textarea {
    min-height: 170px !important;
    resize: vertical;
}
.forminator-ui .forminator-input::placeholder,
.forminator-ui .forminator-textarea::placeholder {
    color: #9AAEBF !important;
}
.forminator-ui .forminator-input:hover,
.forminator-ui .forminator-textarea:hover { border-color: #B9D8EA !important; }

.forminator-ui .forminator-input:focus,
.forminator-ui .forminator-textarea:focus {
    outline: none !important;
    background: #fff !important;
    border-color: var(--ln-turquoise) !important;
    box-shadow: 0 0 0 4px rgba(18, 160, 200, 0.16) !important;
}

/* Le compteur de caractères */
.forminator-ui .forminator-description {
    color: var(--ln-encre-doux) !important;
    font-size: 0.82rem !important;
    margin-top: 6px !important;
}

/* --- Le consentement ---
 *
 * 🔴 Le texte n'est PAS dans le <label> : c'est son FRÈRE.
 *
 * Forminator produit :
 *     div.forminator-checkbox__wrapper
 *       label.forminator-checkbox.forminator-consent   ← la case seule
 *         input                                        ← masqué, 1×1 px
 *         span.forminator-checkbox-box                 ← la case DESSINÉE, celle qu'on clique
 *       div.forminator-consent__label                  ← le texte, À CÔTÉ du label
 *
 * Habiller le <label> revenait donc à dessiner un cadre bleu autour de la case SEULE,
 * et le texte débordait par-dessus. C'est le WRAPPER qu'il faut habiller.
 */
.forminator-ui .forminator-field-consent .forminator-label { display: none; }
.forminator-ui .forminator-field-consent { margin-top: 6px; }

.forminator-ui .forminator-field-consent .forminator-checkbox__wrapper {
    display: flex !important;
    align-items: flex-start;
    gap: 16px;
    margin: 0;
    padding: 20px 22px;
    background: var(--ln-eau);
    border: 1px solid var(--ln-eau-bord);
    border-radius: var(--ln-rayon-s);
    transition: border-color 0.15s ease;
}
.forminator-ui .forminator-field-consent .forminator-checkbox__wrapper:hover {
    border-color: #B9D8EA;
}

/* Le <label> ne porte plus que la case : ni fond, ni cadre, ni marge. */
.forminator-ui .forminator-checkbox.forminator-consent {
    display: flex !important;
    align-items: center;
    flex: 0 0 auto;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    cursor: pointer;
}

/* La case DESSINÉE — c'est elle que le visiteur clique, pas l'<input>. */
.forminator-ui .forminator-checkbox.forminator-consent .forminator-checkbox-box {
    flex: 0 0 22px;
    width: 22px !important;
    height: 22px !important;
    margin: 1px 0 0 !important;
    border: 2px solid #B9D8EA !important;
    border-radius: 6px !important;
    background: #fff !important;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.forminator-ui .forminator-checkbox.forminator-consent input:checked + .forminator-checkbox-box {
    background: var(--ln-bleu) !important;
    border-color: var(--ln-bleu) !important;
}
/* Le focus au clavier doit se voir sur la case, pas sur l'input invisible. */
.forminator-ui .forminator-checkbox.forminator-consent input:focus-visible + .forminator-checkbox-box {
    outline: 3px solid var(--ln-turquoise);
    outline-offset: 2px;
}

.forminator-ui .forminator-consent__label,
.forminator-ui .forminator-checkbox__label {
    flex: 1 1 auto;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--ln-encre) !important;
    font-size: 0.92rem !important;
    line-height: 1.6 !important;
    text-align: left;
}

/* --- Le bouton --- */
.forminator-ui .forminator-row-last { margin-top: 28px !important; }
.forminator-ui .forminator-button-submit {
    width: 100%;
    padding: 16px 30px !important;
    background: var(--ln-bleu) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--ln-rayon-s) !important;
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase;
    box-shadow: 0 4px 16px rgba(11, 79, 138, 0.26);
    transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
    cursor: pointer;
}
.forminator-ui .forminator-button-submit:hover {
    background: var(--ln-bleu-sombre) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(11, 79, 138, 0.32);
}
.forminator-ui .forminator-button-submit:focus-visible {
    outline: 3px solid var(--ln-turquoise);
    outline-offset: 3px;
}

@media (min-width: 640px) {
    .forminator-ui .forminator-button-submit { width: auto; min-width: 260px; }
}

/* --- Les messages --- */
.forminator-ui .forminator-response-message {
    padding: 16px 18px !important;
    border-radius: var(--ln-rayon-s) !important;
    margin-bottom: 20px !important;
    font-weight: 600;
}
.forminator-ui .forminator-error-message,
.forminator-ui .forminator-error .forminator-input,
.forminator-ui .forminator-error .forminator-textarea {
    border-color: #C0392B !important;
}
.forminator-ui .forminator-error-message {
    color: #C0392B !important;
    font-size: 0.86rem !important;
    margin-top: 6px !important;
}


/* =========================================================================
   17. UNE ACTUALITÉ (page seule)
   ========================================================================= */
.ln-date {
    color: var(--ln-turquoise);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    margin: 0 0 1.6em;
}

.ln-nav-articles {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 46px;
    padding-top: 26px;
    border-top: 2px solid var(--ln-eau);
}
.ln-nav-articles a {
    flex: 1 1 240px;
    padding: 16px 18px;
    background: #fff;
    border: 1px solid var(--ln-eau-bord);
    border-radius: var(--ln-rayon-s);
    font-weight: 600;
    line-height: 1.4;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.ln-nav-articles a:hover { box-shadow: var(--ln-ombre); transform: translateY(-2px); }
.ln-nav-articles a span {
    display: block;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--ln-encre-doux);
    margin-bottom: 5px;
}
.ln-nav-articles .ln-suiv { text-align: right; }


/* =========================================================================
   18. LA GALERIE

   Divi produit des vignettes de rapports d'image variables : une photo en portrait
   ressortait avec des bandes blanches, et les légendes, de longueurs différentes,
   décalaient les cartes d'une même rangée.
   ========================================================================= */
.et_pb_gallery_item {
    background: #fff;
    border: 1px solid var(--ln-eau-bord);
    border-radius: var(--ln-rayon);
    overflow: hidden;
    box-shadow: var(--ln-ombre);
    padding: 0 0 16px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.et_pb_gallery_item:hover {
    transform: translateY(-3px);
    box-shadow: var(--ln-ombre-forte);
}

.et_pb_gallery_image {
    display: block;
    aspect-ratio: 4 / 3;      /* toutes les vignettes au même format */
    overflow: hidden;
}
.et_pb_gallery_image img {
    width: 100%;
    height: 100%;
    object-fit: cover;        /* on recadre, on ne laisse pas de bandes blanches */
    border-radius: 0;
    box-shadow: none;
    margin: 0;
}

.et_pb_gallery_title {
    font-size: 0.92rem;
    line-height: 1.4;
    padding: 14px 16px 0;
    margin: 0;
    color: var(--ln-encre);
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: calc(2 * 1.4em + 14px);   /* deux lignes, toujours */
}
.et_pb_gallery_caption { display: none; }


/* =========================================================================
   19. LE PIED DE PAGE

   ⚠️ Trois structures distinctes, qui héritaient chacune de la mauvaise couleur :
      les widgets, le menu `ul.bottom-nav`, et la mention `#footer-info`.
      Les liens sortaient en #17293B (presque noir) sur le bleu nuit : 1,09:1.
   ========================================================================= */
#main-footer { background: var(--ln-nuit-fonce); }

#footer-widgets {
    padding: 54px 0 30px;
}
#footer-widgets .footer-widget { margin-bottom: 26px; }

#footer-widgets .footer-widget h4,
#footer-widgets .footer-widget .title,
#footer-widgets .footer-widget .widgettitle {
    color: #fff;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    margin-bottom: 16px;
    padding-bottom: 0;
}

#footer-widgets .footer-widget,
#footer-widgets .footer-widget p,
#footer-widgets .footer-widget li,
#footer-widgets .footer-widget a,
#footer-widgets .footer-widget li a,
#footer-widgets .footer-widget ul li a {
    color: #D6E6F2;                 /* 9,4:1 sur #08304F */
    font-size: 0.95rem;
}
#footer-widgets .footer-widget a:hover,
#footer-widgets .footer-widget li a:hover { color: #fff; }

#footer-widgets .footer-widget ul { list-style: none; margin: 0; padding: 0; }
#footer-widgets .footer-widget ul li {
    padding: 6px 0;
    border: none;
    margin: 0;
}
#footer-widgets .footer-widget ul li::before { display: none; }

/* Le menu de bas de page : une TROISIÈME structure. */
#main-footer .bottom-nav,
#main-footer .bottom-nav li,
#main-footer .bottom-nav li a {
    color: #D6E6F2;
    padding-top: 0;
    padding-bottom: 0;
}
#main-footer .bottom-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    padding: 20px 0;
    float: none;
}
#main-footer .bottom-nav li { padding: 0; }
#main-footer .bottom-nav li a { font-weight: 600; }
#main-footer .bottom-nav li a:hover { color: #fff; }
#main-footer .bottom-nav li.current-menu-item > a { color: #fff; font-weight: 700; }

#footer-bottom { background: #062741; }
#footer-info,
#footer-info a { color: #C8DCEC; }      /* 8,6:1 sur #062741 */
#footer-info { float: none; padding: 14px 0; }
#footer-info a { text-decoration: underline; }
#footer-info a:hover { color: #fff; }


/* =========================================================================
   20. ACCESSIBILITÉ

   ⚠️ Le contour de focus ne peut pas être SUPPRIMÉ : sans lui, un visiteur qui navigue
   au clavier (ou au lecteur d'écran) ne sait plus où il se trouve dans la page. C'est le
   plancher, non négociable.

   En revanche il peut être DISCRET, et il peut ne se montrer QU'AU CLAVIER :
     - `:focus-visible` (et non `:focus`) ne se déclenche pas au clic de souris ;
     - le gros liseré orange est remplacé par un anneau bleu fin, aux couleurs du site.
   ========================================================================= */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
#sidebar .et_pb_widget ul li a:focus-visible {
    outline: 2px solid var(--ln-turquoise);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Le champ de recherche : pas de halo. Le trait sous le champ suffit à dire où l'on est. */
.et-search-form input:focus,
.et-search-form input:focus-visible,
#searchinput:focus {
    outline: none;
    border-bottom: 2px solid var(--ln-turquoise);
    box-shadow: none;
}

.ln-lien-evitement {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 9999;
    padding: 12px 20px;
    background: var(--ln-bleu);
    color: #fff;
    border-radius: 0 0 var(--ln-rayon-s) 0;
}
.ln-lien-evitement:focus { left: 0; color: #fff; }

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}


/* =========================================================================
   RESPONSIVE — les points de rupture, en un seul endroit
   ========================================================================= */

/* --- Tablette large et petit portable (981 → 1279) ---
   Le conteneur de Divi est à 80 % : sur un écran de 1024, il ne restait que 807 px de
   contenu, dont 210 pour le menu latéral. On lui rend de la place. */
@media (min-width: 981px) and (max-width: 1279px) {
    #main-content .container,
    .ln-bandeau .et_pb_row,
    #footer-widgets .container,
    #footer-bottom .container {
        width: 94%;
        max-width: none;
    }
}

@media (min-width: 981px) and (max-width: 1150px) {
    #top-menu > li { padding-right: 14px; }
    #top-menu > li > a { font-size: 0.9rem; }
    #logo { height: 46px; }
    #sidebar { width: 25%; padding-right: 26px; }
    .et_left_sidebar #left-area { width: 75%; }
}

/* --- Tablette (768 → 980) : Divi passe au menu déroulant --- */
@media (max-width: 980px) {
    #main-header .container.et_menu_container { min-height: 74px; }
    #logo { height: 48px; }

    #main-content .container { padding-top: 34px; }

    #left-area .et_pb_section.ln-hero,
    #left-area .et_pb_section.ln-cta-bas { padding: 42px 34px; }

    #left-area .et_pb_section { margin-bottom: 44px; }

    .ln-bandeau { padding: 36px 0 34px; }

    #footer-widgets .footer-widget {
        width: 46% !important;
        margin: 0 4% 30px 0 !important;
    }
    #footer-widgets .footer-widget:nth-child(2n) { margin-right: 0 !important; }
}

/* --- Téléphone (< 768) --- */
@media (max-width: 767px) {
    body { font-size: 15.5px; }

    #main-header .container.et_menu_container { min-height: 66px; }
    #logo { height: 42px; }

    #main-content .container { padding-top: 26px; }

    .ln-bandeau { padding: 28px 0 26px; }
    .ln-bandeau h1 { font-size: 1.5rem; }

    #left-area .et_pb_section.ln-hero,
    #left-area .et_pb_section.ln-cta-bas { padding: 32px 22px; }
    #left-area .et_pb_section { margin-bottom: 38px; }

    .ln-hero .et_pb_button_module_wrapper {
        display: block;
        margin: 14px 0 0;
    }
    .ln-hero .et_pb_button {
        display: block;
        width: 100%;
        text-align: center;
    }

    .ln-coordonnees .ln-etiquette { flex: 0 0 100%; }

    .ln-nav-articles a { flex: 1 1 100%; }
    .ln-nav-articles .ln-suiv { text-align: left; }

    #sidebar { grid-template-columns: 1fr; }

    #footer-widgets .footer-widget {
        width: 100% !important;
        margin: 0 0 30px !important;
    }
    #main-footer .bottom-nav { gap: 6px 18px; }

    .et_pb_blurb { padding: 24px 20px; }
}