@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&family=Lato:wght@400;700&display=swap');


/*
 Theme Name: Collège Louis-Pergaud – Thème Enfant
 Template: astra
 Version: 1.0
*/


:root {

    /* === Couleurs primaires === */
    --pergaud-vert-foret: #2B3A1A;
    --pergaud-ocre-velours: #B38A3E;
    --pergaud-marron-velours: #6B4E2E;

    /* === Neutres naturels === */
    --pergaud-foret-clair: #EEF2E7;
    --pergaud-creme: #F7F1E1;
    --pergaud-beige-naturel: #F4EBD0;
    --pergaud-vert-mousse-clair: #E4EDD9;

    /* === Interactions === */
    --pergaud-lien: #B38A3E;
    --pergaud-lien-hover: #8BAB74;
    --pergaud-btn-hover: #6B7D5E;
    --pergaud-hover-soft: #DDE7D0;

    /* === Typographie === */
    --pergaud-texte: #2B3A1A;
    --pergaud-titre-secondaire: #6B4E2E;
    --pergaud-texte-clair: #F7E8C7;
    --pergaud-lettrine: #B38A3E;
}

/* =============================================
   1 — FIX GLOBAL ANTI-CUT
============================================= */

.sidebar-rubans,
.sidebar-rubans * {
    overflow: visible !important;
    line-height: normal !important;
}



/* =============================================
   2 — SIDEBAR LATERALE DESKTOP
============================================= */

.sidebar-rubans {
    position: absolute;
    top: calc(var(--ast-main-header-height, 120px));
    left: 0;
    width: 300px;
    background-color: #2B3A1A;
    padding-top: 28px;
    padding-inline: 12px;
    z-index: 20;
    margin-top: 170px;
}

.sidebar-rubans::-webkit-scrollbar {
    display: none;
}

.menu-rubans ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ruban-item {
    margin-bottom: 18px;
}


/* =============================================
   3 — RUBANS VELOURS (DESKTOP)
============================================= */

.ruban-link {
    position: relative;
    width: 100%;
    height: 82px;

    display: flex;
    justify-content: center;
    align-items: center;

    padding-left: 24px;
    padding-right: 90px;

    /* font-family: 'Open Sans', sans-serif; */
    font-weight: 600;
    text-decoration: none;
    color: #F7E8C7 !important;

    border-radius: 32px;
    overflow: visible !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    transition: transform .25s ease, filter .25s ease;
}

.ruban-vert .ruban-link {
    background-image: url('/wp-content/uploads/rubans-boutons/ruban-vert-velours.png');
}

.ruban-ocre .ruban-link {
    background-image: url('/wp-content/uploads/rubans-boutons/ruban-ocre-velours.png');
}

.ruban-marron .ruban-link {
    background-image: url('/wp-content/uploads/rubans-boutons/ruban-marron-velours.png');
}

.ruban-label {
    width: 100%;
    text-align: center;
    z-index: 2;
}

.ruban-bouton {
    position: absolute;
    right: 5px; 
    top: 50%;
    width: 88px;
    transform: translateY(-50%);
    pointer-events: none;
    transition: transform .3s ease-out;
}

.ruban-link:hover {
    transform: translateX(6px);
    filter: brightness(1.07);
}

.ruban-link:hover .ruban-bouton {
    transform: translateY(-50%) rotate(8deg) translateX(8px);
}


/* =============================================
   4 — CONTENU PRINCIPAL
============================================= */

@media (min-width: 960px) {
    #main-content-wrapper {
        margin-left: 300px;
        padding-left: 0;
    }

    #main-content-wrapper .ast-container {
        max-width: none !important;
        width: 100% !important;
        padding: 0 !important;
    }
}


/* =============================================
   5 — RESPONSIVE
============================================= */

@media (max-width: 960px) {
    .sidebar-rubans {
        display: none;
    }

    #main-content-wrapper {
        margin-left: 0;
        padding-left: 0;
    }
}


/* =============================================
   6 — BURGER (mobile)
============================================= */

.burger-btn {
    display: none !important;
}

@media (max-width: 960px) {

    .burger-btn {
        display: flex !important;
        position: fixed;
        top: 18px;
        right: 18px;
        width: 48px;
        height: 48px;
        border: none;
        background: #506446;
        border-radius: 10px;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        z-index: 100000;
    }

    .burger-line {
        position: absolute;
        width: 26px;
        height: 3px;
        background: #F7E8C7;
        border-radius: 4px;
        transition: .35s ease;
    }

    .burger-line:nth-child(1) { transform: translateY(-8px); }
    .burger-line:nth-child(2) { transform: translateY(0); }
    .burger-line:nth-child(3) { transform: translateY(8px); }

    .burger-btn.active { background: #6B7D5E; }
    .burger-btn.active .burger-line:nth-child(1) { transform: rotate(45deg); }
    .burger-btn.active .burger-line:nth-child(2) { opacity: 0; }
    .burger-btn.active .burger-line:nth-child(3) { transform: rotate(-45deg); }
}


/* =============================================
   7 — MENU FULLSCREEN MOBILE (PROPRE)
============================================= */

.burger-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100vh;
    background-color: #8BAB74;
    transition: right .35s ease;
    z-index: 99999;
    padding: 3rem 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: auto;
}

.burger-menu.active {
    right: 0;
}

.burger-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    opacity: 0;
    visibility: hidden;
    transition: .35s ease;
    z-index: 99998;
}

.burger-overlay.active {
    opacity: 1;
    visibility: visible;
}


/* =============================================
   8 — RUBANS VELOURS MOBILE (IDENTIQUES SIDEBAR)
============================================= */

.rubans-mobile {
    list-style: none;
    padding: 0;
    margin: 2rem auto 0;
    width: 88%;
    max-width: 380px;
}

.ruban-mobile-item {
    position: relative;
    margin-bottom: 18px;
}

.ruban-mobile-link {
    position: relative;
    width: 100%;
    height: 82px;

    display: flex;
    justify-content: center;
    align-items: center;

    padding-left: 24px;
    padding-right: 90px;

   /*  font-family: 'Open Sans', sans-serif; */
    font-weight: 600;
    color: #F7E8C7 !important;
    text-decoration: none;

    border-radius: 32px;
    overflow: visible !important;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    transition: transform .25s ease, filter .25s ease;
}

.ruban-mobile-vert .ruban-mobile-link {
    background-image: url('/wp-content/uploads/rubans-boutons/ruban-vert-velours.png');
}
.ruban-mobile-ocre .ruban-mobile-link {
    background-image: url('/wp-content/uploads/rubans-boutons/ruban-ocre-velours.png');
}
.ruban-mobile-marron .ruban-mobile-link {
    background-image: url('/wp-content/uploads/rubans-boutons/ruban-marron-velours.png');
}

.ruban-mobile-label {
    width: 100%;
    text-align: center;
    z-index: 2;
}

.ruban-mobile-bouton {
    position: absolute;
    right: -14px;
    top: 50%;
    width: 88px;
    transform: translateY(-50%);
    pointer-events: none;
    transition: transform .3s ease-out;
}

.ruban-mobile-link:hover {
    transform: translateX(6px);
    filter: brightness(1.07);
}

.ruban-mobile-link:hover .ruban-mobile-bouton {
    transform: translateY(-50%) rotate(8deg) translateX(8px);
}


/* =============================================
   9 — EMPÊCHER SCROLL
============================================= */

.no-scroll {
    overflow: hidden;
}

/* =============================================
   RÉDUCTION LÉGÈRE DES RUBANS + BOUTONS
============================================= */

/* --- Sidebar Desktop --- */
.ruban-link {
    height: 50px;              /* au lieu de 82px */
    padding-left: 20px;        /* au lieu de 24px */
    padding-right: 70px;       /* au lieu de 90px */
    border-radius: 15px;       /* au lieu de 32px (cohérent) */
}

.ruban-bouton {
    width: 50px;               /* au lieu de 88px */
    right: 5px;              /* légère correction */
}

/* --- Fullscreen Mobile --- */
.ruban-mobile-link {
    height: 50px;              /* cohérent avec desktop */
    padding-left: 20px;
    padding-right: 70px;
    border-radius: 28px;
}

.ruban-mobile-bouton {
    width: 50px;
    right: 5px;
}
h3.elementor-heading-title, h3.elementor-size-default {
	font-size: 1.2rem!important;
}
span.burger-line {
	background: #B38A3E;
}
button#burgerBtn.burger-btn {
	background: none;
}
nav#burgerMenu.burger-menu.active {
	background: #2B3A1A;
}
/* =============================================
   PRESENTATION DU TEXTE - STYLE FORET / PERGAUD
============================================= */

/* Bloc global enveloppant le texte */
/* .page-content-wrapper {
    background: #F7F1E1;            
    padding: 45px 55px;
    border-radius: 16px;
    max-width: 96%;
    margin: 1rem auto;
    box-shadow: 0 4px 18px rgba(0,0,0,0.10);
    line-height: 1.7;
    font-size: .9rem;
    color: #2B3A1A;                   
} */

/* TITRE principal */
.page-content-wrapper h1 {
    text-align: center;
    font-size: 2.6rem;
    margin-bottom: 2.4rem;
    font-weight: 700;
    color: #2B3A1A;
    position: relative;
}


.page-content-wrapper h1::after {
    content: "";
    display: block;
    width: 100px;
    height: 4px;
    background: #8BAB74;             /* vert mousse */
    margin: 14px auto 0;
    border-radius: 4px;
}

/* Intertitres h2 */
.page-content-wrapper h2 {
    color: #2B3A1A;
    font-size: 1.4rem;
    margin-top: 2.6rem;
    margin-bottom: 1rem;
    position: relative;
}

.page-content-wrapper h2::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 70px;
    height: 3px;
    background: #B38A3E;             /* ocre des boutons */
    border-radius: 3px;
}

/* Paragraphes */
.page-content-wrapper p {
    margin-top: 1rem;
    margin-bottom: 0rem;
    padding: 0;
    border: none !important;          /* suppression totale */
}

/* Listes */
.page-content-wrapper ul li,
.page-content-wrapper ol li {
    margin-bottom: 0rem;
}
.site {
    background: transparent !important;
}
.entry-content {
 background-color: #f7f1e1;
}

.page-content-wrapper .with-lettrine:first-letter {
    font-size: 3.4rem;
    float: left;
    line-height: 0.85;
    padding-right: 14px;
    padding-top: 4px;
    /* color: #B38A3E; */ /* ocre doux → couleur bouton */
    font-weight: 700;
    /* font-family: 'Open Sans', serif; */
}

.page-content-wrapper a {
	color: var(--pergaud-creme); /* beige clair */
    font-weight: 600;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: .25s ease;
}

.page-content-wrapper a:hover {
    color: #8BAB74;            /* vert mousse */
}
/* ---------------------------------------------------------
   CITATION FLOTTEE — BEIGE + BOUTON MIS EN VALEUR
---------------------------------------------------------- */

.citation-beige-ocre {
    float: right;
    width: 50%;
    max-width: 430px;

    background: #B38A3E; /* Ocre velours */
    padding: 22px;
    margin: 0 0 1.8rem 2rem;

    border-radius: 18px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);

    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* Bloc citation + auteur */
.citation-contenu {
    background: #F7F1E1; /* beige doux */
    padding: 20px 22px;
    border-radius: 14px;
}

.citation-contenu blockquote {
    margin: 0 0 12px;
    font-size: 1.14rem;
    line-height: 1.65;
    color: #2B3A1A;
    font-style: italic;
}

.citation-auteur {
    margin: 0;
    font-size: 0.95rem;
    text-align: right;
    color: #6B4E2E;
}

.citation-btn {
	
    display: block;
    text-align: center;

    padding: 12px 20px;
    margin: 0 auto;

    background: #6B7D5E;  /* vert forêt */
    border-color: #6B7D5E;
    color: var(--pergaud-creme); /* beige clair */
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.3px;

    box-shadow: 0 2px 5px rgba(0,0,0,0.18);
    transition: .25s ease;
	
	border-radius: 10px;
}

.citation-btn:hover {
    background: #6B7D5E;  /* vert forêt */
    border-color: #6B7D5E;
    color: var(--pergaud-creme); /* beige clair */
    box-shadow: 0 3px 7px rgba(0,0,0,0.18);
}



/* Responsive */
@media (max-width: 768px) {
    .citation-beige-ocre {
        float: none;
        width: 100%;
        max-width: none;
        margin: 1.5rem 0;
    }
}

/* ================================
   STYLE PAGE ÉVÉNEMENT PERGAUD
================================ */

.pergaud-event-wrapper {
    background: var(--pergaud-creme);
    padding: 40px 50px;
    margin: 2rem auto;
    border-radius: 16px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.12);
    max-width: 1100px;
}

.pergaud-event-wrapper .event-title {
    text-align: center;
    font-size: 2.5rem;
    color: var(--pergaud-vert-foret);
    margin-bottom: 10px;
}

.pergaud-event-wrapper .event-date {
    text-align: center;
    color: var(--pergaud-ocre-velours);
    font-weight: 700;
    margin-bottom: 2rem;
}

/* Image principale */
.event-main-image img {
    display: block;
    max-width: 70%;
    margin: 0 auto 2.2rem;
    border-radius: 14px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.15);
}

/* Galerie */
.event-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 18px;
    margin-bottom: 2.4rem;
}

.event-gallery-item img {
    width: 100%;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.10);
    transition: transform .25s ease;
}

.event-gallery-item img:hover {
    transform: scale(1.04);
}

/* Contenu */
.event-content {
    background: var(--pergaud-foret-clair);
    padding: 30px;
    border-radius: 12px;
    color: var(--pergaud-texte);
    line-height: 1.7;
}

/* ================================
   CONTENEUR GLOBAL
================================ */
.pergaud-event-wrapper {
    background: var(--pergaud-creme);
    padding: 40px 50px;
    margin: 2rem auto;
    border-radius: 16px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.12);
    max-width: 1100px;
}

/* ================================
   TITRE + DATE
================================ */
.pergaud-event-title {
    text-align: center;
    font-size: 2.5rem;
    color: var(--pergaud-vert-foret);
    margin-bottom: 0.6rem;
}

.pergaud-event-date {
    text-align: center;
    color: var(--pergaud-ocre-velours);
    font-weight: 600;
    margin-bottom: 2rem;
}

/* ================================
   IMAGE PRINCIPALE
================================ */
.pergaud-event-main-image img {
    display: block;
    max-width: 70%;
    margin: 0.5rem auto 2.2rem;
    border-radius: 14px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.15);
}

/* ================================
   GALERIE AUTOMATIQUE
================================ */
.pergaud-event-gallery {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    margin-bottom: 2.4rem;
}

.pergaud-event-gallery-item img {
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.10);
    transition: transform .25s ease;
}

.pergaud-event-gallery-item img:hover {
    transform: scale(1.05);
}

/* ================================
   CONTENU TEXTE
================================ */
.pergaud-event-content {
    background: var(--pergaud-foret-clair);
    padding: 30px;
    border-radius: 12px;
    color: var(--pergaud-texte);
    line-height: 1.7;
    font-size: 1rem;
}

/* Centrer images dans le contenu */
.pergaud-event-content img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* =====================================================
   SLIDER SWIPER – VERSION SÛRE (SANS LIGHTBOX)
   Compatible Block View – The Events Calendar
===================================================== */

/* Conteneur du slider */
.pergaud-swiper {
    width: 100%;
    max-width: 800px;
    margin: 2rem auto;
    border-radius: 16px;
    overflow: hidden;
    background-color: #f5f0dc; /* beige Pergaud */
}

/* Slides */
.pergaud-swiper swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Images */
.pergaud-swiper img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    border-radius: 16px;
}

/* Flèches Swiper */
.pergaud-swiper::part(button-prev),
.pergaud-swiper::part(button-next) {
    color: #1f3d1f;           /* vert foncé */
    background: rgba(255,255,255,0.8);
    border-radius: 50%;
    width: 42px;
    height: 42px;
}

/* Pagination (points) */
.pergaud-swiper::part(pagination-bullet) {
    background-color: #b6b6b6;
    opacity: 1;
}

.pergaud-swiper::part(pagination-bullet-active) {
    background-color: #1f3d1f;
}

/* Responsive */
@media (max-width: 768px) {
    .pergaud-swiper {
        max-width: 90%;
        margin: 1.5rem auto;
    }
}

/* =====================================================
   SLIDER SWIPER – COLLÈGE LOUIS PERGAUD
   Version STABLE – Sans lightbox
   Compatible Astra + Block View
===================================================== */

/* Conteneur principal */
.pergaud-swiper {
    width: 100%;
    max-width: 800px;
    margin: 2rem auto;
    border-radius: 16px;
    overflow: hidden;
    background-color: #f5f0dc;
}

/* Slides */
.pergaud-swiper swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Images */
.pergaud-swiper img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    border-radius: 16px;
}

/* Flèches */
.pergaud-swiper::part(button-prev),
.pergaud-swiper::part(button-next) {
    color: #1f3d1f;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 50%;
    width: 42px;
    height: 42px;
}

/* Pagination */
.pergaud-swiper::part(pagination-bullet) {
    background-color: #cfcfcf;
    opacity: 1;
}

.pergaud-swiper::part(pagination-bullet-active) {
    background-color: #1f3d1f;
}

/* Responsive */
@media (max-width: 768px) {
    .pergaud-swiper {
        max-width: 90%;
        margin: 1.5rem auto;
    }
}

/* =====================================================
   LIGHTBOX IMAGE – VERSION SÛRE
   (créée dynamiquement en JS)
===================================================== */

.pergaud-lightbox-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.pergaud-lightbox-inner {
    max-width: 90vw;
    max-height: 90vh;
    aspect-ratio: 16 / 9;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pergaud-lightbox-inner img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.pergaud-lightbox-close {
    position: absolute;
    top: 20px;
    right: 25px;
    font-size: 2.5rem;
    color: #fff;
    background: none;
    border: none;
    cursor: pointer;
}

/* Image à la une */

img.attachment-full.size-full.wp-post-image {
	width: 20vw;
	margin-right: auto;
	margin-left: auto;
}


/* =====================================================
   SMART SLIDER — FORCER L’AFFICHAGE DES FLÈCHES SUR MOBILE
===================================================== */

/* Forcer l'affichage des flèches */
.n2-ss-arrow {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.tribe-common, .tribe-common-c-btn-border, .tribe-common, a.tribe-common-c-btn-border, .tribe-common-c-btn, .tribe-events-c-search__button {
	color: black;
	border-color: black;
}

.tribe-common:hover .tribe-common-c-btn-border:hover, .tribe-common:hover a.tribe-common-c-btn-border:hover, button.tribe-common-c-btn:hover, .tribe-events-c-search__button:hover {
	background-color: black;
}	

p, div.n2-ss-layer {
	max-width: 60vw!important;
	margin-right: auto!important;
	margin-left: auto!important;
}

/* Mode Liste – afficher plus de texte */
.tribe-events-list-event-description {
    display: -webkit-box;
    -webkit-line-clamp: 15;   /* nombre de lignes */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Lien "Lire la suite" en mode Liste */
.tribe-events-list-event-description .tribe-read-more {
    font-weight: 600;
    text-decoration: underline!important;
    margin-left: 0.25em;
}

/* =========================================================
   ARTICLE ELEMENTOR — CHARTE GRAPHIQUE PERGAUD
   À coller EN FIN de style.css
========================================================= */

/* === CONTENEUR GLOBAL === */
.pergaud-article {
    background: var(--pergaud-creme);
    max-width: 1100px;
    margin: 2rem auto 3rem;
    padding: 45px 55px;

    border-radius: 16px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.12);

    /* font-family: 'Open Sans', sans-serif; */
    line-height: 1.7;
    font-size: 0.95rem;
    color: var(--pergaud-texte);
}

/* === RESPONSIVE CONTENEUR === */
@media (max-width: 768px) {
    .pergaud-article {
        padding: 28px 22px;
        margin: 1.5rem auto;
    }
}

/* === TITRE PRINCIPAL (H1 Elementor) === */
.pergaud-article h1.elementor-heading-title {
    text-align: center;
    font-size: 2.6rem;
    font-weight: 700;
    color: var(--pergaud-vert-foret);
    margin-bottom: 2rem;
    position: relative;
}

.pergaud-article h1.elementor-heading-title::after {
    content: "";
    display: block;
    width: 100px;
    height: 4px;
    background: #8BAB74;
    margin: 14px auto 0;
    border-radius: 4px;
}

/* === INTERTITRES (H2 Elementor) === */
.pergaud-article h2.elementor-heading-title {
    color: var(--pergaud-vert-foret);
    font-size: 1.4rem;
    margin-top: 2.6rem;
    margin-bottom: 1rem;
    position: relative;
}

.pergaud-article h2.elementor-heading-title::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 70px;
    height: 3px;
    background: var(--pergaud-ocre-velours);
    border-radius: 3px;
}

/* === TEXTE === */
.pergaud-article p {
    margin-bottom: 1.4rem;
}

/* === LISTES === */
.pergaud-article ul,
.pergaud-article ol {
    margin: 1.2rem 0 1.6rem;
    padding-left: 1.4rem;
}

.pergaud-article li {
    margin-bottom: 0.6rem;
}

/* === IMAGES ELEMENTOR === */
.pergaud-article img {
    display: block;
    max-width: 75%;
    margin: 2rem auto;

    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

/* Responsive images */
@media (max-width: 768px) {
    .pergaud-article img {
        max-width: 100%;
        margin: 1.5rem auto;
    }
}

/* === LIENS === */
.pergaud-article a {
    color: var(--pergaud-ocre-velours);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: .25s ease;
}

.pergaud-article a:hover {
    color: var(--pergaud-lien-hover);
    border-bottom-color: var(--pergaud-lien-hover);
}

/* === BLOCS SPECIAUX (citation, encadrés Elementor) === */
.pergaud-article blockquote {
    background: var(--pergaud-foret-clair);
    padding: 20px 24px;
    margin: 2rem auto;
    border-left: 5px solid var(--pergaud-ocre-velours);
    border-radius: 12px;

    font-style: italic;
    color: var(--pergaud-texte);
}

/* === ESPACEMENT DES WIDGETS ELEMENTOR === */
.pergaud-article .elementor-widget {
    margin-bottom: 1.8rem;
}

/* =====================================================
   LIGHTBOX PDF — PERGAUD (Elementor FREE)
===================================================== */

#pergaud-pdf-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.92);
    display: none;
    z-index: 100000;
}

#pergaud-pdf-lightbox.active {
    display: flex;
}

#pergaud-pdf-viewer {
    margin: auto;
    width: 92vw;
    height: 92vh;
    background: #1e1e1e;
    border-radius: 16px;
    overflow: hidden;
}

.pergaud-pdf-close {
    position: absolute;
    top: 18px;
    right: 26px;
    font-size: 2.6rem;
    background: none;
    border: none;
    color: #F7E8C7;
    cursor: pointer;
}

/* =====================================================
   LIGHTBOX PDF — PLEIN ÉCRAN
===================================================== */

.pergaud-pdf-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
    z-index: 999999;

    display: flex;
    align-items: center;
    justify-content: center;
}

.pergaud-pdf-viewer {
    width: 92vw;
    height: 92vh;
    background: #1e1e1e;
    border-radius: 16px;
    overflow: hidden;
}

/* Bouton fermeture */
.pergaud-pdf-close {
    position: absolute;
    top: 18px;
    right: 26px;

    font-size: 2.6rem;
    background: none;
    border: none;
    color: #F7E8C7;
    cursor: pointer;
    z-index: 1000000;
}

.pergaud-pdf-viewer iframe {
    overscroll-behavior: none;
}

/* =====================================================
   HOME — ACTUALITÉS
===================================================== */

.home-actus {
    max-width: 1200px;
    margin: 4rem auto 5rem;
    padding: 0 1.5rem;
}

.home-actus h2 {
    font-size: 2rem;
    margin-bottom: 2rem;
    color: #1f4f3a; /* vert charte */
    position: relative;
}

.home-actus h2::after {
    content: "";
    display: block;
    width: 100px;
    height: 4px;
    background-color: #c9a23f;
    margin-top: 0.5rem;
} 

/* GRID */
.home-actus-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

/* CARTES */
.home-actu-card {
    background-color: #ffffff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.home-actu-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

/* IMAGE */
.home-actu-thumb img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

/* CONTENU */
.home-actu-content {
    padding: 1.2rem 1.3rem 1.5rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.home-actu-title {
    font-size: 1.05rem;
    margin-bottom: 0.6rem;
    line-height: 1.4;
}

.home-actu-title a {
    color: #1f4f3a;
    text-decoration: none;
}

.home-actu-title a:hover {
    color: #c9a23f;
}

.home-actu-excerpt {
    font-size: 0.9rem;
    color: #444;
    line-height: 1.6;
    margin-top: auto;
}

/* LIEN TOUTES LES ACTUS */
.home-actus-link {
    display: inline-block;
    margin-top: 2.5rem;
    padding: 0.6rem 1.4rem;
    background-color: #1f4f3a;
    color: #ffffff;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 500;
    transition: background-color 0.3s ease;
}

.home-actus-link:hover {
    background-color: #c9a23f;
    color: #ffffff;
}

/* RESPONSIVE */
@media (max-width: 1024px) {
    .home-actus-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .home-actus-grid {
        grid-template-columns: 1fr;
    }

    .home-actu-thumb img {
        height: 180px;
    }
}

/* ================================
   PAGE ACTUALITÉS (blog)
================================ */

/* Grille spécifique à la page des articles */
body.blog .home-actus-grid,
body.archive .home-actus-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 2rem;
    align-items: stretch;
}

/* Cartes plus larges */
body.blog .home-actu-card,
body.archive .home-actu-card {
    max-width: none;
}

/* Image en haut, largeur complète */
body.blog .home-actu-thumb img,
body.archive .home-actu-thumb img {
    width: 100%;
    height: auto;
    display: block;
}

/* Texte plus confortable */
body.blog .home-actu-content,
body.archive .home-actu-content {
    padding: 1rem 1.2rem;
}

/* Page blog – titre */
body.blog .page-title,
body.archive .page-title {
    margin-bottom: 2rem;
    font-size: 3rem;
    font-weight: 700;
    color: #1f3d2b; /* vert de ta charte */
}

/* ============================
   ACTUALITÉS – CARTES
============================ */

.home-actu-card {
    position: relative;
    background: #ffffff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.home-actu-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12);
}

.home-actu-card:hover {
    cursor: pointer;
}

.home-actu-thumb img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
}

.home-actu-content {
    padding: 1.2rem 1.4rem 1.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.home-actu-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1f3f2b;
    margin: 0.4rem 0;
}

.event-badge {
    display: inline-block;
    width: fit-content;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 0.4rem;
}

.event-badge.a-venir {
    background: #0f666f;
    color: #ffffff;
}

.event-badge.passe {
    background: #e6e6e6;
    color: #555;
}

.home-actu-category {
    display: inline-block;
    background: #eaf3ef;
    color: #0f666f;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.home-actu-date {
    font-size: 0.75rem;
    color: #777;
}

/* ===== ÉVÉNEMENT — DATE ===== */
.event-meta {
    margin: 1rem 0;
}

.event-date {
    display: inline-block;
    background: #e9f3ef;           /* vert très clair */
    color: #0f666f;                /* vert charte */
    padding: 0.4rem 0.8rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.9rem;
}

/* ===== ARTICLE — CONTENU ===== */
.single-post .entry-content {
    background: #f4f7f2;      /* fond très clair */
    border-radius: 20px;
    padding: 2rem;
    max-width: 900px;
    margin: 2rem auto;
    line-height: 1.7;
}

/* Image mise en valeur */
.single-post .entry-content img {
    border-radius: 16px;
    margin-bottom: 1.5rem;
}

/* ===== TITRE ARTICLE ===== */
.single-post h1 {
    color: #0f666f;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    margin-bottom: 0.5rem;
}

/* Auteur / date publication */
.single-post .entry-meta {
    color: #6b7c6f;
    font-size: 0.85rem;
    margin-bottom: 1.5rem;
}

.single-post .post-navigation a {
    background: #0f666f;
    color: #fff;
    padding: 0.6rem 1.2rem;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 600;
}

.single-post .post-navigation a:hover {
    background: #0c555c;
}

.event-info-box {
    background: #eef4ea; /* vert clair */
    border-left: 5px solid #3b6f4a;
    padding: 1rem 1.2rem;
    margin: 1.5rem 0;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.event-info-label {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #3b6f4a;
    font-weight: 600;
}

.event-info-date {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1f3d2b;
}

/* =====================================
   HOME — ACTUALITÉS (CHARTE PERGAUD)
===================================== */

/* Carte */
.home-actu-card {
    background: var(--pergaud-creme);
    border-radius: 18px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    transition: transform .25s ease, box-shadow .25s ease;
}

.home-actu-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.14);
}

/* Image */
.home-actu-thumb img {
    height: 220px;
    object-fit: cover;
    border-bottom: 4px solid var(--pergaud-ocre-velours);
}

/* Contenu */
.home-actu-content {
    padding: 1.4rem 1.5rem 1.6rem;
    color: var(--pergaud-texte);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

/* Catégorie */
.home-actu-category {
    background: var(--pergaud-foret-clair);
    color: var(--pergaud-vert-foret);
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Date publication */
.home-actu-date {
    font-size: 0.75rem;
    color: var(--pergaud-marron-velours);
    font-style: italic;
}

/* Date événement */
.home-actu-event-date {
    display: inline-block;
    background: var(--pergaud-vert-mousse-clair);
    color: var(--pergaud-vert-foret);
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
}

/* Titre */
.home-actu-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--pergaud-vert-foret);
    line-height: 1.35;
}

.home-actu-title a {
    color: inherit;
    text-decoration: none;
}

.home-actu-title a:hover {
    color: var(--pergaud-ocre-velours);
}

/* Extrait */
.home-actu-excerpt {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--pergaud-texte);
}

/* Badge événement */
.event-badge {
    align-self: flex-start;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.event-badge.a-venir {
    background: var(--pergaud-vert-foret);
    color: var(--pergaud-texte-clair);
}

.event-badge.passe {
    background: var(--pergaud-hover-soft);
    color: var(--pergaud-marron-velours);
}

.home-actu-card {
    cursor: pointer;
}

/* =====================================================
   IMAGE FLOTTANTE — ARTICLES WORDPRESS
===================================================== */

.single-post .image-float-left {
    float: left;
    width: 35%;
    max-width: 280px;

    margin: 0.3rem 2rem 1.2rem 0;

    border-radius: 14px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.15);
}

/* Nettoyage du flux */
.single-post .entry-content::after {
    content: "";
    display: block;
    clear: both;
}

/* Responsive */
@media (max-width: 768px) {
    .single-post .image-float-left {
        float: none;
        width: 100%;
        max-width: 100%;
        margin: 1.5rem auto;
        display: block;
    }
}

/* =====================================================
   DÉSACTIVER L’AFFICHAGE DES COMMENTAIRES
===================================================== */

/* Formulaire */
#respond,
.comment-respond,
.comments-area {
    display: none !important;
}

/* Lien "Ajouter un commentaire" */
.entry-meta .comments-link,
.comments-link {
    display: none !important;
}

.single-post .post-navigation a {
	background: #2B3A1A;
	color: #E4EDD9!important;
}

.page-links .page-link:hover, .single .post-navigation a:hover {
	background: #6B4E2E;
	color: #F7F1E1;
}

h1.entry-title {
	color: #2B3A1A;
}

span.author-name, span.published {
	color: #B38A3E;
}

span.author-name:hover, span.published:hover {
	color: #6B4E2E!important;
}

.entry-content p {
	color: #6B4E2E;
	background: #fff;
}

/* =====================================================
   IMAGE FLOTTANTE — TEXTE CENTRÉ VISUELLEMENT
   (éditeur WordPress restreint)
===================================================== */

.single-post .image-float-left.align-middle {
    float: left;
    width: 35%;
    max-width: 280px;
    margin: 0 2rem 1.2rem 0;

    border-radius: 14px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.15);
}

/* Astuce : padding top calculé pour centrer visuellement le texte */
/* .post-id-9968 .entry-content p:first-of-type {
    padding-top: 3.2rem;
} */

/* Mobile : on annule */
@media (max-width: 768px) {
    .single-post .image-float-left.align-middle {
        float: none;
        width: 100%;
        max-width: 100%;
        margin: 1.5rem auto;
        display: block;
    }

    .single-post .entry-content p:first-of-type {
        padding-top: 0;
    }
}

/* =====================================================
   NAVIGATION ARTICLE — BOUTON "SUIVANT" (ESPACEMENT PRO)
===================================================== */

.single .post-navigation .nav-next a {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: fit-content;      /* 🔑 le bouton s’adapte au contenu */
    max-width: 420px;        /* longueur max plus courte */
    margin-left: auto;

    padding: 0.9rem 1.4rem;  /* bouton plus ramassé */
    border-radius: 999px;

    text-decoration: none;
}


/* "SUIVANT →" */
.single .post-navigation .nav-next .ast-post-nav {
    flex-shrink: 0;           /* ne se compresse jamais */
    font-weight: 600;
}

/* Titre de l’article */
.single .post-navigation .nav-next p {
    margin: 0;

    flex-grow: 1;             /* 🔑 occupe l’espace restant */
    text-align: right;

    padding-left: 1.5rem;     /* respiration visuelle */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* =====================================================
   NAVIGATION ARTICLE — ESPACEMENT VERTICAL
===================================================== */

.single article + nav.post-navigation {
    margin-top: 0.8rem;
}

/* =====================================================
   NAVIGATION ARTICLE — BOUTON "PRÉCÉDENT"
===================================================== */

.single .post-navigation .nav-previous a {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: fit-content;
    max-width: 420px;
    margin-right: auto;

    padding: 0.9rem 1.4rem;
    border-radius: 999px;

    gap: 1.2rem;   /* ← AJOUT ICI */

    text-decoration: none;
}


/* Titre de l’article précédent */
.single .post-navigation .nav-previous p {
    margin: 0;

    flex-grow: 1;
    text-align: left;

    padding-right: 1.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Texte "← PRÉCÉDENT" */
.single .post-navigation .nav-previous .ast-post-nav {
    flex-shrink: 0;
    font-weight: 600;
    white-space: nowrap;
}

/* =====================================================
   PAGE ACTUALITÉS — TITRE
===================================================== */

body.blog .page-header,
body.blog .page-title {
    margin-bottom: 1.5rem;
}

body.blog .page-title {
    position: relative;
    display: inline-block;
    padding-bottom: 0.5rem;
}

/* petit trait décoratif comme sur la home */
body.blog .page-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100px;
    height: 3px;
    background-color: var(--pergaud-ocre-velours);
}

/* =====================================================
   PAGE ACTUALITÉS — ESPACEMENTS
===================================================== */

body.blog .home-actus {
    margin-top: 0;
}

body.blog .ast-container {
    padding-top: 0;
}

/* =====================================================
   PAGE ACTUALITÉS — ALIGNEMENT AVEC LA HOME
===================================================== */

body.blog .ast-container {
    max-width: none;          /* supprime la largeur Astra */
    padding-left: 0;
    padding-right: 0;
}

body.blog .home-actus {
    padding-left: 2rem;       /* même respiration que la home */
    padding-right: 2rem;
}

/* =====================================================
   PAGE ACTUALITÉS — ALIGNEMENT COMME LA HOME (ASTRA)
===================================================== */

/* 1. Débloquer la largeur Astra */
body.blog #primary {
    max-width: none;
}

/* 2. Supprimer le centrage interne */
body.blog #primary .ast-container {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

/* 3. Recréer la même respiration que sur la home */
body.blog .home-actus,
body.blog .page-header {
    padding-left: 2rem;
    padding-right: 2rem;
}

/* =====================================================
   PAGE ACTUALITÉS — TITRE EN HAUT DE PAGE
===================================================== */

/* 1. Remonter le titre juste sous le header */
body.blog .page-header {
    margin-top: 0;
    padding-top: 2rem;
    margin-bottom: 2rem;
}

/* 2. Forcer l’alignement gauche cohérent */
body.blog .page-title {
    margin: 0;
    text-align: left;
}

/* 3. Éviter que le contenu ne "repousse" le titre */
body.blog .home-actus {
    margin-top: 0;
}

/* =====================================================
   PAGE ACTUALITÉS — TITRE AU-DESSUS DU CONTENU
===================================================== */

/* 1. Forcer l’organisation verticale du contenu */
body.blog #primary .ast-container {
    display: flex;
    flex-direction: column;
}

/* 2. Mettre le titre AVANT la grille */
body.blog .page-header {
    order: -1;
    width: 100%;
    margin-bottom: 2rem;
}

/* 3. Assurer que la grille reste en dessous */
body.blog .home-actus {
    order: 0;
}

/* =====================================================
   PAGE ACTUALITÉS — TITRE ALIGNÉ SUR LA GRILLE
===================================================== */

/* Le conteneur principal reste vertical */
body.blog #primary .ast-container {
    display: flex;
    flex-direction: column;
}

/* Le titre prend EXACTEMENT la même largeur que la grille */
body.blog .page-header {
    order: -1;
    width: 100%;
    max-width: 1200px;     /* 🔑 même logique que la grille */
    margin: 0 auto 2rem;  /* centré comme la grille */
}

/* Texte aligné à gauche dans ce cadre */
body.blog .page-title {
    margin: 0;
    text-align: left;
}

/* =====================================================
   CARTES ACTUALITÉS — CATÉGORIE + DATE SUR 2 LIGNES
===================================================== */

.home-actu-meta {
    display: flex;
    flex-direction: column; /* 🔑 passage à la ligne */
    gap: 0.25rem;           /* espace fin entre catégorie et date */
}

/* =====================================================
   CARTES ACTUALITÉS — ESPACE TITRE / TEXTE
===================================================== */

.home-actu-title {
    margin-bottom: 0.1rem; /* réduit l’espace sous le titre */
}

.home-actu-excerpt {
    margin-top: 0;         /* supprime l’espace au-dessus du texte */
}

/* =====================================================
   ACTUALITÉS — STYLE UNIFIÉ HOME + PAGE ACTUALITÉS
===================================================== */

/* Cartes */
.home .home-actu-card,
body.blog .home-actu-card {
    background-color: var(--pergaud-creme);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Image */
.home .home-actu-thumb img,
body.blog .home-actu-thumb img {
    width: 100%;
    height: auto;
    display: block;
}

/* Contenu */
.home .home-actu-content,
body.blog .home-actu-content {
    padding: 1.2rem 1.4rem;
}

/* Meta (catégorie + date) */
.home .home-actu-meta,
body.blog .home-actu-meta {
    margin-bottom: 0.6rem;
}

/* Catégorie */
.home .home-actu-category,
body.blog .home-actu-category {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--pergaud-ocre-velours);
}

/* Date */
.home .home-actu-date,
body.blog .home-actu-date {
    font-size: 0.85rem;
    color: var(--pergaud-vert-foret);
}

/* Titre */
.home .home-actu-title,
body.blog .home-actu-title {
    margin: 0.4rem 0;
}

/* Extrait */
.home .home-actu-excerpt,
body.blog .home-actu-excerpt {
    margin-top: 0;
    line-height: 1.5;
}

/* Hover (si présent sur la home) */
.home .home-actu-card:hover,
body.blog .home-actu-card:hover {
    transform: translateY(-2px);
}

/* =====================================================
   PAGE ACTUALITÉS — DATE EN ROMAIN (NON ITALIQUE) + BADGE
===================================================== */

body.blog .home-actu-date {
    font-style: normal; /* 🔑 romain, pas italique */

    background: var(--pergaud-foret-clair);
    color: var(--pergaud-vert-foret);

    padding: 4px 12px;
    border-radius: 999px;

    font-size: 0.75rem;
    font-weight: 600;

    width: fit-content;
}

/* =====================================================
   PAGE ACTUALITÉS — DATE EN ROMAIN (FORCÉ)
===================================================== */

body.blog .home-actu-meta .home-actu-date {
    font-style: normal;
}

.page-content-wrapper .actus-club {
margin-top: 2rem;
}

.page-content-wrapper .actus-item {
border-bottom: 1px solid #ddd;
    padding: 1rem 0;
}

.page-content-wrapper h3 {
font-size: 1.1rem;
    margin-bottom: 0.3rem;
}


.page-content-wrapper .actus-club {
margin-top: 2rem;
}

.page-content-wrapper .actus-item {
padding: 1.2rem 0;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

.page-content-wrapper .actus-item h3 {
margin: 0 0 0.3rem;
    font-size: 1.1rem;
}

.page-content-wrapper .actus-item time {
font-size: 0.8rem;
    color: #666;
    display: block;
    margin-bottom: 0.5rem;
}

.page-content-wrapper .actus-item p {
margin: 0 0 0.5rem;
}

.page-content-wrapper .actus-item a.read-more {
font-size: 0.9rem;
    color: #0f666f;
    text-decoration: none;
}

.page-content-wrapper a {
	color: #2B3A1A!important;
}

/* =====================================
   CLUB — ACTUALITÉS (CARTES)
   VERSION ROBUSTE
===================================== */

/* Conteneur des actus */
.page-content-wrapper .actus-club {
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 2px solid var(--pergaud-foret-clair);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Carte d’actualité */
.page-content-wrapper .actus-club .actus-item {
    background: var(--pergaud-creme);
    padding: 1.4rem 1.6rem;
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}

/* Titre */
.page-content-wrapper .actus-club .actus-item h3 {
    margin: 0 0 0.4rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--pergaud-vert-foret);
}

/* Lien du titre */
.page-content-wrapper .actus-club .actus-item h3 a {
    color: inherit;
    text-decoration: none;
}

.page-content-wrapper .actus-club .actus-item h3 a:hover {
    color: var(--pergaud-ocre-velours);
}

/* Date événement (badge) */
.page-content-wrapper .actus-club .actus-item time {
    display: inline-block;
    margin-bottom: 0.6rem;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--pergaud-vert-mousse-clair);
    color: var(--pergaud-vert-foret);
    padding: 4px 12px;
    border-radius: 999px;
}

/* Extrait */
.page-content-wrapper .actus-club .actus-item p {
    margin: 0 0 0.6rem;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--pergaud-marron-velours);
}

/* Lien "Lire la suite" */
.page-content-wrapper .actus-club .actus-item a.read-more {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--pergaud-ocre-velours);
    text-decoration: none;
}

.page-content-wrapper .actus-club .actus-item a.read-more:hover {
    text-decoration: underline;
}

/* =====================================================
   ACTUALITÉS — TITRE H3 (CARTES)
   Charte Collège Louis-Pergaud
===================================================== */

.home-actu-title,
.home-actu-title h3 {
    /* font-family: 'Open Sans', sans-serif; */
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.35;

    color: var(--pergaud-vert-foret);

    margin: 0.4rem 0 0.3rem;
}

/* Lien du titre */
.home-actu-title a {
    color: inherit;
    text-decoration: none;
    transition: color .25s ease;
}

/* Hover doux */
.home-actu-title a:hover {
    color: var(--pergaud-ocre-velours);
}

/* Petit accent visuel sous le titre (discret) */
.home-actu-title::after {
    content: "";
    display: block;
    width: 100px;
    height: 3px;
    margin-top: 6px;

    background: var(--pergaud-ocre-velours);
    border-radius: 3px;
}

/* =============================================
   H3 — Ruban fin (charte Pergaud)
============================================= */
.page-content-wrapper h3 {
  margin: 2rem 0 0.9rem;
  padding: 0.55rem 0.9rem;

  /* font-family: 'Open Sans', sans-serif; */
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.35;

  color: var(--pergaud-vert-foret);
  background: var(--pergaud-vert-mousse-clair);

  border-left: 6px solid var(--pergaud-ocre-velours);
  border-radius: 12px;

  box-shadow: 0 3px 10px rgba(0,0,0,0.06);
}


.page-content-wrapper h3 + ul {
  margin-top: 0.1rem;
}

/* Wrapper page */
.page-content-wrapper.equipe h1 {
  margin-bottom: 1.5rem;
}

/* Grille responsive */
.cards-services {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* PC */
  gap: 1.5rem;
  margin-top: 1rem;
}

/* Carte */
.card-service {
  background: #fff;
  border-radius: 12px;
  padding: 1.25rem 1.25rem 1rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(15, 102, 111, 0.12);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.card-service:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12);
}

/* Titres dans les cartes */
.card-service h2 {
  margin: 0 0 0.75rem;
  font-size: 1.1rem;
  color: #2B3A1A;
}

/* Listes */
.card-service ul {
  margin: 0;
  padding-left: 1.1rem;
}

.card-service li {
  margin: 0.35rem 0;
  line-height: 1.45;
  color: #333;
}

/* Tablette: 2 colonnes */
@media (max-width: 1024px) {
  .cards-services {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Smartphone: 1 colonne */
@media (max-width: 640px) {
  .cards-services {
    grid-template-columns: 1fr;
  }
}

/* =====================================================
   PAGE "DISPOSITIF ULIS" — CHARTE PERGAUD (REFACTO)
   Objectif : moins de répétitions, règles regroupées
===================================================== */

.page-content-wrapper.ulis{
  background: var(--pergaud-creme);
  color: var(--pergaud-texte);
 /*  font-family: 'Open Sans', sans-serif; */
  line-height: 1.7;

  max-width: 1100px;
  margin: 2rem auto 3rem;
  padding: 15px 25px;

  /* border-radius: 16px; */
  /* box-shadow: 0 4px 18px rgba(0,0,0,0.12); */

  display: block;
}

/* @media (max-width: 768px){
  .page-content-wrapper.ulis{
    padding: 28px 22px;
    margin: 1.5rem auto;
  }
} */

/* Titre de page */
.page-content-wrapper.ulis > h1{
  text-align: center;
  font-size: clamp(2rem, 4vw, 2.6rem);
  font-weight: 700;
  color: var(--pergaud-vert-foret);
  margin: 0 0 2.2rem;
}

.page-content-wrapper.ulis > h1::after{
  content: "";
  display: block;
  width: 100px;
  height: 4px;
  background: var(--pergaud-lien-hover);
  margin: 14px auto 0;
  border-radius: 4px;
}

/* Sections */
.page-content-wrapper.ulis > section{
  margin: 0 0 1.6rem;
}

/* Cartes ULIS (Fonctionnement, profil, inclusions, etc.) */
.page-content-wrapper.ulis .card-service{
  background: var(--pergaud-foret-clair);
  border-radius: 16px;
  padding: 1rem 1rem;

  border: 1px solid rgba(179,138,62,.22);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  transform: none !important; /* aucune animation */
}

.page-content-wrapper.ulis .card-service:hover{
  transform: none !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

/* Titres de cartes */
.page-content-wrapper.ulis .card-service h2{
  margin: 0 0 .9rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--pergaud-vert-foret);
  position: relative;
}

/* On conserve ton ::before global, et on neutralise uniquement le ::after ULIS */
.page-content-wrapper.ulis .card-service h2::after{
  content: none !important;
}

/* H3 internes */
.page-content-wrapper.ulis .card-service h3{
  margin: 1.2rem 0 .6rem;
  padding: .45rem .75rem;

  font-size: 1.05rem;
  font-weight: 700;

  color: var(--pergaud-vert-foret);
  background: var(--pergaud-vert-mousse-clair);
  border-left: 6px solid var(--pergaud-ocre-velours);
  border-radius: 12px;
}

/* Texte + listes */
.page-content-wrapper.ulis :is(p, li){
  color: var(--pergaud-marron-velours);
}

.page-content-wrapper.ulis p{
  margin: 0 0 1rem;
  background: transparent !important;
  max-width: none !important;
}

.page-content-wrapper.ulis :is(ul, ol){
  margin: .6rem 0 1rem;
  padding-left: 1.2rem;
}

.page-content-wrapper.ulis li{
  margin: .35rem 0;
}

/* =====================================================
   SCHÉMA — PARTENAIRES DE L’ULIS (PROPRE + SANS DOUBLONS)
   → on scope sur .ulis-partenaires-wrapper (moins verbeux)
===================================================== */

.page-content-wrapper.ulis.ulis-partenaires-wrapper{
  background: var(--pergaud-vert-mousse-clair);
  border: 2px dashed rgba(179,138,62,.35);
  padding: 40px 45px;
  border-radius: 18px;
  box-shadow: 0 4px 18px rgba(0,0,0,.10);
  margin-top: 2.5rem;
}

@media (max-width: 768px){
  .page-content-wrapper.ulis.ulis-partenaires-wrapper{
    padding: 26px 20px;
  }
}

/* Grille des cartes */
/* .ulis-partenaires-wrapper .ulis-cards-centered{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.2rem;
  align-items: stretch;
} */

@media (max-width: 900px){
  .ulis-partenaires-wrapper .ulis-cards-centered{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px){
  .ulis-partenaires-wrapper .ulis-cards-centered{
    grid-template-columns: 1fr;
  }
}

/* Cartes */
.ulis-partenaires-wrapper .ulis-card{
  background: var(--pergaud-creme);
  border-radius: 18px;
  padding: 1.2rem 1.25rem;
  border: 1px solid rgba(43,58,26,.15);
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
  transform: none !important; /* aucune animation */
}

.ulis-partenaires-wrapper .ulis-card:hover{
  transform: none !important;
}

/* Titres */
.ulis-partenaires-wrapper .ulis-card h2{
  margin: 0 0 .6rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--pergaud-vert-foret);
}

/* On supprime tous les soulignements UNIQUEMENT dans le schéma */
.ulis-partenaires-wrapper .ulis-card h2::before,
.ulis-partenaires-wrapper .ulis-card h2::after{
  content: none !important;
}

/* Texte */
.ulis-partenaires-wrapper .ulis-card p{
  margin: 0;
  line-height: 1.6;
  color: var(--pergaud-marron-velours);
  background: transparent !important;
  max-width: none !important;
}

/* Carte centrale */
.ulis-partenaires-wrapper .ulis-card-center{
  grid-column: 2;
  grid-row: 2;

  background: var(--pergaud-vert-foret);
  border: none;
  box-shadow: 0 12px 30px rgba(0,0,0,.22);

  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  padding: 1.6rem 1.4rem;
  position: relative;
}

.ulis-partenaires-wrapper .ulis-card-center h2{
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--pergaud-texte-clair);
}

.ulis-partenaires-wrapper .ulis-card-center::after{
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 14px;
  border: 2px solid rgba(247,241,225,.35);
  pointer-events: none;
}

@media (max-width: 900px){
  .ulis-partenaires-wrapper .ulis-card-center{
    grid-column: 1 / -1;
    grid-row: auto;
  }
}

/* =====================================================
   IMAGES ULIS — zoom léger au hover (SANS faire bouger les blocs)
===================================================== */

.page-content-wrapper.ulis img{
  transition: transform .25s ease, box-shadow .25s ease;
  cursor: zoom-in;
  max-width: 100%;
  height: auto;
}

.page-content-wrapper.ulis img:hover{
  transform: scale(1.08);
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
}


/* =====================================================
   LIGHTBOX IMAGE — plein écran “réel” (image dans la limite du viewport)
===================================================== */

.pergaud-lightbox-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.90);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px; /* marge pour ne pas coller aux bords */
}

.pergaud-lightbox-inner{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pergaud-lightbox-inner img{
  width: auto !important;
  height: auto !important;
  max-width: calc(100vw - 48px) !important;
  max-height: calc(100vh - 48px) !important;
  object-fit: contain;
}

/* Bouton fermer (si ton JS l’injecte) */
.pergaud-lightbox-close{
  position: fixed;
  top: 18px;
  right: 18px;
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  color: #fff;
  font-size: 34px;
  line-height: 1;
  cursor: pointer;
}


/* =====================================================
   ULIS – Fonctionnement : texte à gauche + image à droite
   (ROBUSTE et SANS :has() / sans doublons)
   ⚠️ suppose que l'image est enfant direct de .card-service
===================================================== */

/* .page-content-wrapper.ulis .ulis-fonctionnement > article.card-service,
.page-content-wrapper.ulis .ulis-fonctionnement .card-service{
  display: grid !important;
  grid-template-columns: minmax(0,1fr) minmax(260px, 38%);
  gap: 1.6rem;
  align-items: start;
} */

/* Tout le contenu texte en colonne 1 */
.page-content-wrapper.ulis .ulis-fonctionnement .card-service > :not(img){
  grid-column: 1;
}

/* Image en colonne 2, et on neutralise les floats WP */
.page-content-wrapper.ulis .ulis-fonctionnement .card-service > img{
  grid-column: 2;
  grid-row: 1 / span 999;
  justify-self: end;
  align-self: start;

  float: none !important;
  clear: none !important;

  margin: 0 !important;
  width: 100%;
  max-width: 520px; /* augmente si tu veux plus grand à droite */
  height: auto;
  display: block;
  border-radius: 12px;
}

/* Mobile : retour en 1 colonne */
@media (max-width: 900px){
  .page-content-wrapper.ulis .ulis-fonctionnement .card-service{
    grid-template-columns: 1fr;
  }

  .page-content-wrapper.ulis .ulis-fonctionnement .card-service > img{
    grid-column: 1;
    grid-row: auto;
    justify-self: center;
    max-width: 100%;
    margin-top: 1rem !important;
  }
}

/* ULIS – Fonctionnement : image contenue dans un <p> */

.page-content-wrapper.ulis
.ulis-fonctionnement
.card-service > p:has(img){
  grid-column: 2;
  grid-row: 1 / span 999;
  align-self: start;
  justify-self: end;

  margin: 0 !important;
  padding: 0 !important;
}

/* neutralise les alignright / aligncenter de WordPress */

.page-content-wrapper.ulis
.ulis-fonctionnement
.card-service > p:has(img) img{
  float: none !important;
  margin: 0 !important;
  display: block;

  width: 100%;
  max-width: 520px;
  height: auto;
}

/* =====================================================
   ULIS – Fonctionnement : SUPPRIMER la GRID
   -> float right pour éviter le grand blanc sous l'image
===================================================== */

/* 1) On annule tout ce qui met ce bloc en grid */
.page-content-wrapper.ulis .ulis-fonctionnement .card-service{
  display: block !important;
}

/* 2) Le <p> qui contient l'image : pas de marge parasite */
.page-content-wrapper.ulis .ulis-fonctionnement .card-service > p:has(img){
  margin: 0 !important;
  padding: 0 !important;
}

/* 3) Image à droite (float) */
.page-content-wrapper.ulis .ulis-fonctionnement .card-service img{
  float: right !important;
  clear: none !important;

  width: min(520px, 38%);
  height: auto;

  margin: 0 0 1rem 1.6rem !important; /* espace à gauche + sous l'image */
  display: block;

  /* au cas où WP met des styles d'alignement */
  max-width: 100%;
}

/* 4) Sécurité : on neutralise les classes WP qui peuvent gêner */
.page-content-wrapper.ulis .ulis-fonctionnement .card-service img.alignright,
.page-content-wrapper.ulis .ulis-fonctionnement .card-service img.aligncenter,
.page-content-wrapper.ulis .ulis-fonctionnement .card-service img.alignleft{
  float: right !important;
  margin: 0 0 1rem 1.6rem !important;
}

/* 5) Clearfix : pour que la carte "contienne" bien le float */
.page-content-wrapper.ulis .ulis-fonctionnement .card-service::after{
  content: "";
  display: block;
  clear: both;
}

/* 6) Mobile : image en dessous */
@media (max-width: 900px){
  .page-content-wrapper.ulis .ulis-fonctionnement .card-service img{
    float: none !important;
    width: 100%;
    max-width: 520px;
    margin: 1rem auto 0 !important;
  }
}

/* ===============================
   TITRES → Poppins
=============================== */

h1,
h2,
h3,
h4,
h5,
h6,
.elementor-heading-title,
.entry-title,
.page-title {
    font-family: 'Poppins', sans-serif !important;
}

/* h2::after {
    content: "";
    display: block;
    width: 100px!important;
    height: 4px;
    background-color: #c9a23f;
    margin-top: 0.5rem;
} */

/* ===============================
   CORPS DE TEXTE → LATO
=============================== */

body,
.entry-content,
.page-content-wrapper,
.pergaud-article,
.pergaud-event-wrapper,
.pergaud-event-content,
.single-post .entry-content,
p,
li {
    font-family: 'Lato', sans-serif;
}

/* ===========================
   ULIS – resserrer les espaces
=========================== */

.page-content-wrapper.ulis{
  padding: 32px 40px!important;
}

/* ULIS – l’espace est porté par le paragraphe, pas par la liste */

.page-content-wrapper.ulis p {
  margin-bottom: 0.8rem!important;
}

/* si un paragraphe est suivi d’une liste → on colle la liste au paragraphe */

.page-content-wrapper.ulis p + ul,
.page-content-wrapper.ulis p + ol {
  margin-top: 0!important;
}

/* la liste garde uniquement un petit espace après */

.page-content-wrapper.ulis ul,
.page-content-wrapper.ulis ol {
  margin-bottom: 0.6rem!important;
}

/* ARCHIVE : si un seul article → on le centre et on lui donne une largeur lisible */
body.archive .ast-row > article:only-child{
  flex: 0 0 100% !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Important : Astra met souvent des marges négatives sur la row */
body.archive .ast-blog-layout-4-grid .ast-row,
body.archive .ast-blog-layout-3-grid .ast-row{
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ULIS – inversion des retraits sur mobile / tablette */

@media (max-width: 900px){

  /* on enlève le retrait sur les paragraphes */
  .page-content-wrapper.ulis p{
    padding-left: 0!important;
    margin-left: 0!important;
  }

  /* on remet le retrait sur les listes */
  .page-content-wrapper.ulis ul,
  .page-content-wrapper.ulis ol{
    padding-left: 1.2rem!important;
    margin-left: 0!important;
  }

}

/* ==========================================
   ULIS – Fonctionnement : texte à gauche,
   image à droite (desktop), puis dessous (mobile)
========================================== */

/* Desktop */
@media (min-width: 901px){

  .page-content-wrapper.ulis .ulis-fonctionnement .card-service{
    display: grid !important;
    grid-template-columns: 1fr 1fr; /* moitié / moitié */
    column-gap: 2rem;
    align-items: start;
  }

  /* Tous les éléments SAUF l'image vont dans la colonne 1 */
  .page-content-wrapper.ulis .ulis-fonctionnement .card-service > :not(img){
    grid-column: 1;
  }

  /* L'image va dans la colonne 2 et prend toute la hauteur disponible */
  .page-content-wrapper.ulis .ulis-fonctionnement .card-service > img{
    grid-column: 2;
    width: 100% !important;
    max-width: 100% !important; /* annule les max-width type 520px */
    height: auto !important;
    margin: 0 !important;
    display: block !important;
    justify-self: stretch;
    align-self: start;
  }
}

/* Tablette + mobile */
@media (max-width: 900px){

  .page-content-wrapper.ulis .ulis-fonctionnement .card-service{
    display: grid !important;
    grid-template-columns: 1fr;
    row-gap: 1rem;
  }

  .page-content-wrapper.ulis .ulis-fonctionnement .card-service > img{
    grid-column: 1;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
}


/* =========================
   PAGE "LES CLUBS" – Layout
========================= */

/* Conteneur : largeur de lecture + centrage propre */
.clubs-page{
  max-width: 1100px;
  margin: 0 auto;
}

/* Intro sous le titre : style "chapeau" */
.clubs-page > p,
.clubs-page .elementor-widget-text-editor > .elementor-widget-container > p:first-child{
  max-width: 70ch;
  margin: .5rem 0 1.2rem;
  padding: .9rem 1.1rem;
  background: rgba(255,255,255,.55);
  border-radius: 12px;
  line-height: 1.6;
}

/* Bandeau "Les actualités ..." : mieux aligné et moins massif */
.clubs-page .actus-club{
  margin: 1.2rem 0 1.2rem;
  padding: .9rem 1.1rem;
  border-radius: 14px;
}

/* Grille des cartes d’actu : 2 colonnes desktop */
.clubs-page .actus-items,
.clubs-page .ast-row{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.6rem;
  align-items: start;
}

/* Carte : hauteur cohérente + respiration */
.clubs-page .actus-item,
.clubs-page article.post{
  height: 100%;
  border-radius: 16px;
  overflow: hidden;
}

/* Image : même rendu, pas de “trou”, recadrage propre */
.clubs-page .actus-item img,
.clubs-page article.post .post-thumb-img-content img{
  display: block;
  width: 100%;
  height: 220px;
  object-fit: cover;
}

/* Date : pill plus discret et aligné */
.clubs-page .actus-date{
  margin: .9rem 1rem 0;
  padding: .35rem .75rem;
  border-radius: 999px;
  width: fit-content;
}

/* Titre carte */
.clubs-page .actus-item h3,
.clubs-page article.post .entry-title{
  margin: .6rem 1rem .3rem;
  line-height: 1.25;
}

/* Extrait */
.clubs-page .actus-item p,
.clubs-page article.post .entry-content p{
  margin: 0 1rem 1rem;
}

/* Mobile : 1 colonne + images moins hautes */
@media (max-width: 900px){
  .clubs-page .actus-items,
  .clubs-page .ast-row{
    grid-template-columns: 1fr;
    gap: 1.1rem;
  }

  .clubs-page .actus-item img,
  .clubs-page article.post .post-thumb-img-content img{
    height: 180px;
  }
}

/* ============================
   PAGE "LES CLUBS" – amélioration layout
   (sans classe ajoutée)
============================ */

/* 1) Intro : paragraphe juste après le H2 (le titre du club) */
.page-content-wrapper h2 + p{
  max-width: 70ch;
  margin: .6rem 0 1.2rem;
  padding: .9rem 1.1rem;
  background: rgba(255,255,255,.55);
  border-radius: 12px;
  line-height: 1.6;
}

/* 2) Bandeau "Les actualités..." : respiration */
.page-content-wrapper .actus-club{
  margin: 1.2rem 0 1.2rem;
  padding: .9rem 1.1rem;
  border-radius: 14px;
}

/* 3) Grille des cartes (si ton conteneur existe) */
.page-content-wrapper .actus-items{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.6rem;
  align-items: start;
}

/* 4) Cartes : hauteur cohérente */
.page-content-wrapper .actus-item{
  height: 100%;
  border-radius: 16px;
  overflow: hidden;
}

/* 5) Image de carte : même hauteur + recadrage propre */
.page-content-wrapper .actus-item img{
  display: block;
  width: 100%;
  height: 220px;
  object-fit: cover;
}

/* 6) Mobile : 1 colonne */
@media (max-width: 900px){
  .page-content-wrapper .actus-items{
    grid-template-columns: 1fr;
    gap: 1.1rem;
  }

  .page-content-wrapper .actus-item img{
    height: 180px;
  }
}

/* =========================
   ACTUALITÉS – pages d’articles (single post)
========================= */

/* Conteneur : largeur de lecture confortable */
.single-post #primary .ast-container,
.single-post .entry-content {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

/* Typo : lisibilité */
.single-post .entry-content {
  line-height: 1.75;
  font-size: 1.05rem;
}

/* Enlever l’effet "blocs blancs" sur les paragraphes */
.single-post .entry-content p {
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  margin: 0 0 1rem !important;
  max-width: none !important;
}

/* Espaces propres avant/après listes */
.single-post .entry-content p + ul,
.single-post .entry-content p + ol {
  margin-top: 0 !important;
}
.single-post .entry-content ul,
.single-post .entry-content ol {
  margin: .4rem 0 1.1rem !important;
  padding-left: 1.2rem;
}

/* Images : style "carte" + responsive */
.single-post .entry-content img,
.single-post .entry-content figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
}

/* Espace autour des images */
.single-post .entry-content figure,
.single-post .entry-content .wp-block-image,
.single-post .entry-content p:has(img) {
  margin: 1.2rem 0 !important;
}

/* Légendes (si présentes) */
.single-post figcaption {
  font-size: .95rem;
  opacity: .85;
  margin-top: .5rem;
  text-align: center;
}

/* Titre : respiration */
.single-post .entry-title {
  margin-bottom: .8rem;
}