/* ==========================================================================
   1. IMPORT POLICE
   Beva et Poppins retirées (non utilisées). Inter 300 retirée (graisses
   relevées). Lora : droit 400/600/700 + italique 600 (slogan).
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Lora:ital,wght@0,400;0,600;0,700;1,600&display=swap');


/* ==========================================================================
   2. VARIABLES (THEME CLAIR)
   Palette :
   - Fond page        #faf7f0  (crème)
   - Surface / cartes #ffffff
   - Bordures         #e0d3b0
   - Texte            #1f1a10  (brun quasi noir)   contraste ~16:1
   - Lien / accent    #6b4a00  (or bronze foncé)   contraste ~7:1
   - Survol           #0b3d91  (bleu profond)      contraste ~9:1
   ========================================================================== */
:root {
    /* --- Polices du site : règle unique ---
       Lora  = titres, slogan, titres de pistes
       Inter = tout le reste (menus, liens, métadonnées, boutons) */
    --font-heading: 'Lora', Georgia, 'Times New Roman', serif;
    --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

    /* --- Échelle de tailles fluides (mobile -> PC) ---
       clamp(minimum, valeur fluide, maximum) */
    --fs-body: clamp(0.95rem, 0.9rem + 0.25vw, 1.0625rem);   /* 15 -> 17 px */
    --fs-h1: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);            /* 24 -> 32 px */
    --fs-h2: clamp(1.3rem, 1.1rem + 0.9vw, 1.6rem);          /* 21 -> 26 px */
    --fs-h3: clamp(1.15rem, 1rem + 0.6vw, 1.35rem);          /* 18 -> 22 px */
    --fs-title-page: clamp(1.25rem, 1rem + 1.2vw, 1.75rem); /* 20 -> 28 px */
    --fs-title-module: clamp(1.1rem, 0.95rem + 0.8vw, 1.4rem); /* 18 -> 22 px */
    --fs-slogan: clamp(1.1rem, 0.8rem + 1.2vw, 1.6rem);      /* 18 -> 26 px */

    /* --- Couleurs de texte : 3 seulement, pour rester cohérent --- */
    --text-main: #1f1a10;       /* titres, texte principal */
    --text-secondary: #5c4a20;  /* artiste, durée, numéro, fil d'Ariane (≈ 8:1 sur blanc) */
    --text-link: #6b4a00;       /* liens */

    /* Couleurs Cassiopeia */
    --cassiopeia-color-primary: #6b4a00;
    --cassiopeia-color-link: #6b4a00;
    --cassiopeia-color-hover: #0b3d91;

    /* Typographie Cassiopeia */
    --cassiopeia-font-family-body: var(--font-body);
    --cassiopeia-font-family-headings: var(--font-heading);
    --cassiopeia-font-weight-headings: 600;
    --cassiopeia-font-weight-normal: 400;

    /* Orange "catégorie / sous-titre", repris de la maquette */
    --cassiopeia-color-category: #dd6b20;

    /* Palette Bootstrap */
    --blue: #0d6efd;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #d63384;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #198754;
    --teal: #20c997;
    --cyan: #0dcaf0;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --gray-100: #f8f9fa;
    --gray-200: #e9ecef;
    --gray-300: #dee2e6;
    --gray-400: #ced4da;
    --gray-500: #adb5bd;
    --gray-600: #6c757d;
    --gray-700: #495057;
    --gray-800: #343a40;
    --gray-900: #212529;
    --primary: #6b4a00;
    --secondary: #6c757d;
    --success: #198754;
    --info: #0dcaf0;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #f8f9fa;
    --dark: #212529;
    --primary-rgb: 107, 74, 0;
    --secondary-rgb: 108, 117, 125;
    --success-rgb: 25, 135, 84;
    --info-rgb: 13, 202, 240;
    --warning-rgb: 255, 193, 7;
    --danger-rgb: 220, 53, 69;
    --light-rgb: 248, 249, 250;
    --dark-rgb: 33, 37, 41;
    --white-rgb: 255, 255, 255;
    --black-rgb: 0, 0, 0;
    --body-color-rgb: 31, 26, 16;
    --body-bg-rgb: 250, 247, 240;

    /* Polices système / fallback */
    --font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --gradient: none;

    /* Corps du site (mode clair) */
    --body-font-family: var(--font-body);
    --body-font-size: var(--fs-body);
    --body-font-weight: 400;
    --body-line-height: 1.55;
    --body-color: #1f1a10;
    --body-bg: #faf7f0;

    /* Couleur des chevrons de menu */
    --menu-arrow-color: #3b2a05;

    /* Menus (section 21) */
    --menu-bg: rgba(250, 247, 240, 0.55);
    --submenu-bg: rgba(250, 247, 240, 0.94);   /* sous-menus : quasi opaque */
    --menu-bg-hover: rgba(239, 224, 184, 0.95);
    --menu-border: rgba(216, 201, 163, 0.8);

    /* ★ Arrondi du menu PC (même valeur que les sous-menus et les modules).
       6px = plus carré | 10px = actuel | 14px = plus doux. */
    --menu-radius: 10px;

    /* Header MOBILE (section 13)
       --menu-bg-mobile : fond translucide COMMUN au panneau du menu mobile
                          ET au bouton hamburger (même transparence).
                          Dernier chiffre : 1 = opaque, 0 = transparent.
       --logo-mobile-size : taille du logo sur mobile (ancien rendu ≈ 40 px). */
    --menu-bg-mobile: rgba(250, 247, 240, 0.56);
    --logo-mobile-size: 76px;
    /* Réglage fin de la hauteur du hamburger par rapport au logo :
       valeur négative = monte, positive = descend (ex. -6px, 0px, 3px). */
    --hamburger-nudge-y: -4px;
}


/* ==========================================================================
   3. TYPOGRAPHIE GÉNÉRALE
   ========================================================================== */
body {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--fs-body);
    line-height: 1.55;
    color: #1f1a10;
    background-color: #faf7f0;
}

h1, h2, h3, h4, h5, h6 {
    color: #1f1a10;
    font-family: var(--font-heading);
    font-weight: 600;
    line-height: 1.25;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

/* Fil d'Ariane : la page courante prend le brun secondaire (plus de gris) */
.breadcrumb-item.active,
.mod-breadcrumbs__item.active,
.breadcrumb {
    color: var(--text-secondary) !important;
}

/* ==========================================================================
   3bis. CATÉGORIES / SOUS-TITRES (orange, majuscules espacées)
   Ajoutez la classe .eyebrow (champ "Classe CSS" de Joomla) à tout module,
   catégorie ou sur-titre qui doit reprendre ce style.
   ========================================================================== */
.eyebrow,
.category,
.tag,
.badge,
.item-category,
.article-category,
.com-content-category-blog__category,
.com-content-info__category,
.page-header .category,
span.label-info,
.label-category {
    display: inline-block;
    color: var(--cassiopeia-color-category) !important;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.78em;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    background: transparent !important;
}

/* Liens : pas de soulignement, soulignement uniquement au survol */
a {
    color: #6b4a00 !important;
    text-decoration: none !important;
}

a:hover,
a:focus {
    color: #0b3d91 !important;
    text-decoration: underline !important;
}

/* Menus : pas de soulignement, même au survol */
.mod-menu a:hover,
.mod-menu a:focus,
.mod-menu__sub a:hover,
.mod-menu__sub a:focus {
    text-decoration: none !important;
}


/* ==========================================================================
   4. HEADER & FOOTER
   ========================================================================== */
.header {
    background: #f4e9c9;
    background: linear-gradient(90deg, #f7eed4 1%, #ecd9a2 91%, #e3cc8a 100%);
}

/* Header fixe en haut pendant le défilement */
.header.container-header {
    position: sticky !important;
    top: 0;
    z-index: 1030;
    border-bottom: 1px solid #d8c68f;
}

/* Textes et liens du header : brun très foncé pour un contraste maximal */
.header,
.header a,
.container-header a {
    color: #2b2005 !important;
}

.footer {
    background: #efe3c3;
    background: linear-gradient(90deg, #f7eed4 0%, #efe0b0 50%, #e6d3a0 100%);
    color: #1f1a10;
}

.container-footer {
    /* Voile minimal : juste de quoi garantir la lisibilité du texte */
    background-image:
        linear-gradient(rgba(250, 247, 240, 0.12), rgba(250, 247, 240, 0.12)),
        url('/images/logo/fond_banniere.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 350px;
}

/* Le texte du footer garde un fort contraste même sur l'image */
.container-footer,
.container-footer p,
.container-footer a,
.container-footer h1,
.container-footer h2,
.container-footer h3 {
    color: #1f1a10 !important;
}

.footer .grid-child {
    justify-content: center;
}

/* Bannière réduite (mode non-fluide) */
.container-banner .banner-overlay {
    height: 10vh;
}

/* --- Titres de page / d'article : centrés, Lora, taille fluide --- */
.page-header,
.page-header h1,
.page-header h2,
.item-title,
.com-content-article .page-header h1,
.com-content-article .page-header h2,
.item-page .page-header h1,
.item-page .page-header h2 {
    text-align: center;
}

.page-header h1,
.page-header h2,
.item-title {
    font-family: var(--font-heading) !important;
    font-size: var(--fs-title-page) !important;
    font-weight: 600 !important;
    line-height: 1.25;
    margin-bottom: 16px;
    color: #1f1a10;
}

/* --- Titres des modules de la sidebar (ex. « Podcasts ») ---
   À VÉRIFIER avec l'inspecteur : si le titre n'est pas concerné,
   ajoutez ici son sélecteur exact. */
.card-header,
.moduletable > h3,
.sidebar-left h3 {
    font-family: var(--font-heading) !important;
    font-size: var(--fs-title-module) !important;
    font-weight: 600 !important;
    line-height: 1.25;
}


/* ==========================================================================
   5. MENU PRINCIPAL & SOUS-MENUS
   ========================================================================== */

/* Affiche le sous-menu au survol / focus — DESKTOP UNIQUEMENT */
@media (hover: hover) and (pointer: fine) {
    .mod-menu .nav-item.parent:hover > .mod-menu__sub,
    .mod-menu .nav-item.parent:focus-within > .mod-menu__sub,
    .metismenu-item:hover > .mm-collapse,
    .metismenu-item:focus-within > .mm-collapse {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
    }

    /* Le chevron se retourne quand le sous-menu s'ouvre au survol */
    .nav-item.parent:hover > .mod-menu__toggle-sub::after,
    .metismenu-item:hover > .mm-toggler::after {
        transform: rotate(180deg) !important;
    }
}

/* Cadre + fond du sous-menu (dropdown mod_menu classique) */
.mod-menu__sub {
    border: 1px solid #d8c9a3 !important;
    background-color: #fffaf0 !important;
    border-radius: 10px;
}

.mod-menu__sub a {
    color: #2b2005 !important;
}

.mod-menu__sub a:hover {
    color: #0b2a66 !important;
    background-color: #efe0b8 !important;
}

.mod-menu a:hover {
    color: #0b2a66 !important;
    background-color: rgba(255, 255, 255, 0.55);
}

/* Fond du dropdown MetisMenu */
.metismenu.mod-menu .mm-collapse {
    background: #fffaf0;
    border-radius: 10px;
}

.metismenu.mod-menu .mm-collapse .metismenu-item a {
    color: #2b2005 !important;
}

/* Chevron unique et maîtrisé pour menu + sous-menus (CSS pur) */

/* 1. On masque les icônes natives */
.mod-menu__toggle-sub [class*="icon-"],
.mm-toggler [class*="icon-"] {
    display: none !important;
}

/* 2. Reset des styles natifs du template */
.mod-menu__toggle-sub::before,
.mm-toggler::before {
    display: none !important;
    content: none !important;
}

.mod-menu__toggle-sub::after,
.mm-toggler::after {
    content: "" !important;
    display: inline-block !important;
    position: static !important;
    box-sizing: border-box !important;
    width: 0.8em !important;
    height: 0.8em !important;
    margin: 0 0 0 0.4em !important;
    padding: 0 !important;
    border: 0 !important;
    /* Chevron SVG (couleur #3b2a05, trait épais, bouts arrondis) */
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3e%3cpath d='M2 4.2 L6 8.2 L10 4.2' fill='none' stroke='%233b2a05' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e") center / contain no-repeat !important;
    transform: none !important;
    transition: transform 0.2s ease;
    vertical-align: middle;
}

/* 3. Chevron vers le haut quand le sous-menu est ouvert */
.mod-menu__toggle-sub[aria-expanded="true"]::after,
.mm-toggler[aria-expanded="true"]::after {
    margin-top: 0 !important;
    transform: rotate(180deg) !important;
}

/* Interligne réduit dans le menu (mobile/tablette uniquement)
   Le style du texte (graisse, taille, couleur) est dans la section 13. */
@media (max-width: 991px) {
    .mod-menu.metismenu,
    .mm-collapse {
        margin: 0 !important;
        padding: 0 !important;
        gap: 2px !important;
    }

    .metismenu-item {
        align-items: center !important;
    }

    .metismenu-item > a {
        display: block !important;
        padding: 4px 0 !important;
        line-height: 1 !important;
        letter-spacing: 0.2px;
    }

    .mm-toggler {
        padding: 4px 6px !important;
        margin: 0 !important;
    }
}


/* ==========================================================================
   6. ICÔNES
   ========================================================================== */
.icon-user {
    color: #403678;
}

.fa, .fas, [class*=" icon-"], [class^="icon-"] {
    color: #403678;
}


/* ==========================================================================
   7. BOUTONS
   ========================================================================== */
.btn-primary {
    background: #6b4a00;
    border-color: #6b4a00;
    color: #ffffff !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background: #0b3d91;
    border-color: #0b3d91;
    color: #ffffff !important;
    text-decoration: none !important;
}


/* ==========================================================================
   8. ARTICLES / BLOG (mode clair)
   ========================================================================== */
.item-content {
    padding: 10px;
    border-radius: 10px;
    border: 1px solid #e0d3b0;
    background: #ffffff;
    color: #1f1a10;
}

/* Cartes de blog uniformes : classe "boxed" en Article Class
   + arrangement "Across" (CSS Grid) dans le menu item Joomla */
.boxed {
    padding: 10px !important;
    border-radius: 6px;
    border: 1px solid #e0d3b0;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #ffffff;
}

.boxed .item-image {
    height: 200px;
    overflow: hidden;
    flex: 0 0 auto;
}

.boxed .item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.boxed .item-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    height: 100%;
}

/* Texte d'intro tronqué à 4 lignes */
.boxed .item-content > p {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1 1 auto;
}

.boxed .item-content .readmore {
    margin-top: auto;
}

.item-page {
    padding: 20px;
    border-radius: 10px;
    border: 1px solid #e0d3b0;
    background: #ffffff;
    color: #1f1a10;
}

/* Article individuel */
.com-content-article__body,
article.com-content-article {
    border: 0 solid transparent !important;
}

/* Image d'article : centrée, responsive, sans bordure */
.item-image {
    display: table !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 100%;
    border: 2px solid transparent;
}

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

/* Classe réutilisable "img-mini" : à saisir dans le champ "Classe de
   l'image" de n'importe quel article. Fonctionne que Joomla place la classe
   directement sur la balise <img>, ou sur son conteneur (div/span/a). */
img.img-mini,
.item-image img.img-mini,
.img-mini img,
.item-image.img-mini img {
    max-width: 110px !important;
    width: 110px !important;
    height: auto !important;
    margin: 0 auto 6px !important;
    display: block;
}

.item-image:has(img.img-mini),
.item-image.img-mini,
.img-mini {
    display: table !important;
    margin-bottom: 6px !important;
}

/* Cible l'image par son nom de fichier. Dupliquez ce bloc (en changeant le
   nom de fichier dans src*="...") pour chaque logo à réduire. */
.item-image img[src*="Dieu_est_tlgr_tim_3.png"] {
    max-width: 110px !important;
    width: 110px !important;
    height: auto !important;
    margin: 0 auto 6px !important;
    display: block;
}

.item-image:has(img[src*="Dieu_est_tlgr_tim_3.png"]) {
    display: table !important;
    margin-bottom: 6px !important;
}


/* ==========================================================================
   9. MODULES (personnalisé)
   ========================================================================== */
.ma-banniere {
    background-image:
        linear-gradient(rgba(250, 247, 240, 0.12), rgba(250, 247, 240, 0.12)),
        url('/images/logo/fond_banniere.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 350px;
}

/* Modules centrés, largeur max 400px (lecteur audiofly) */
.moduletable {
    max-width: 400px;
    margin-left: auto !important;
    margin-right: auto !important;
}


/* ==========================================================================
   10. MODULES (cards Cassiopeia)
   ========================================================================== */
.card {
    border-color: transparent !important;
    color: #1f1a10;
}

.moduletable {
    border: 1px solid #e0d3b0 !important;
}

/* Exception : pas de bordure autour du module lecteur audio Audiofly,
   quel que soit le style de module choisi (Inherited, Card...) */
.moduletable.mod_sj_add_audiofly_playlist,
.moduletable:has(.mod_sj_add_audiofly_playlist),
.mod_sj_add_audiofly_playlist.moduletable,
.mod_sj_add_audiofly_playlist .moduletable {
    border: none !important;
}

/* Modules en position main-top */
.main-top.card {
    background: #e1e9f5;
}

.card-body {
    border-color: transparent !important;
}


/* ==========================================================================
   11. FOND DES MODULES GÉNÉRIQUES (blanc translucide)
   ========================================================================== */
.moduletable,
.card {
    background: rgba(255, 255, 255, 0.88) !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}


/* ==========================================================================
   12. LECTEUR AUDIO (module audiofly / .songplay)
   ========================================================================== */
.songplay {
    width: 450px !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    font-size: 10px !important;
    position: relative;
    z-index: 3;
}

/* Lecteur Audiofly : le module colore tout via des variables --afs-* écrites
   en inline sur #audiofly-source-XXX. Le !important est donc indispensable
   pour les remplacer par la palette du site. */
.audiofly {
    --afs-text: var(--text-main) !important;       /* titres de pistes (était #a3a196) */
    --afs-muted: var(--text-secondary) !important; /* artiste, numéro, durée (était #687382) */
    --afs-border: #e0d3b0 !important;              /* liseré aligné sur les bordures du site */
}

/* Numéro et durée */
.audiofly-playlist__index,
.audiofly-playlist__duration {
    font-family: var(--font-body);
    font-weight: 600;
    color: var(--text-secondary) !important;
}

/* Titre de la piste (dans le bouton) */
.audiofly-playlist__track {
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--text-main);
    cursor: pointer;
    text-decoration: underline transparent;   /* évite le saut de mise en page au survol */
    text-underline-offset: 3px;
    text-decoration-thickness: 1.5px;
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

/* Survol souris + focus clavier : soulignement + bleu de survol du site */
.audiofly-playlist__track:hover,
.audiofly-playlist__track:focus-visible {
    color: #0b3d91;
    text-decoration-color: currentColor;
}


/* ==========================================================================
   13. HEADER MOBILE : LOGO (GAUCHE) + HAMBURGER (DROITE) + FOND
   Disposition mobile/tablette (≤ 991 px) :
     - le LOGO passe à GAUCHE, plus gros, et reste cliquable (lien accueil) ;
     - le HAMBURGER passe à DROITE, avec le même fond translucide que le menu ;
     - le hamburger devient une CROIX (X) quand le menu est ouvert.
   Réglages rapides : variables --logo-mobile-size et --menu-bg-mobile
   (section 2).
   ========================================================================== */

/* Image de fond du header (mobile et PC), sans voile : le menu porte déjà
   le contraste.
   NB : chemin relatif, résolu depuis l'emplacement de user.css. Pour ne plus
   en dépendre : url('/images/logo/fond_menu.png') après avoir déplacé l'image. */
.header.container-header {
    background-image: url('../images/fond_menu.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

@media (max-width: 991px) {

    /* --- Conteneur du header ---
       min-height adapté à la taille du logo pour qu'il ne déborde pas. */
    .header.container-header {
        display: flex !important;
        align-items: flex-start;
        position: relative;
        padding: 8px 12px !important;
        min-height: calc(var(--logo-mobile-size) + 16px);
    }

    /* --- LOGO : en haut à GAUCHE ---
       z-index 3 : le logo passe au-dessus de la zone du menu (z-index 2),
       sinon cette zone, large de 100 %, bloquerait le clic sur le logo. */
    .header .grid-child:not(.container-nav) {
        position: absolute !important;
        left: 12px;
        right: auto;
        top: 8px;
        margin: 0 !important;
        width: var(--logo-mobile-size);
        max-width: var(--logo-mobile-size);
        overflow: visible;
        z-index: 3;
    }

    /* Le logo est un lien : bien cliquable, jamais souligné */
    .header .brand-logo,
    .header .navbar-brand a {
        display: block;
        cursor: pointer;
    }

    .header .brand-logo:hover,
    .header .brand-logo:focus,
    .header .navbar-brand a:hover,
    .header .navbar-brand a:focus {
        text-decoration: none !important;
    }

    /* Logo agrandi (ancien rendu ≈ 40 px) */
    .header .brand-logo img {
        width: var(--logo-mobile-size) !important;
        max-width: 100% !important;
        max-height: none !important;
        height: auto !important;
    }

    .header .site-description {
        display: none !important;
    }

    /* --- ZONE DU MENU : pleine largeur, sans marge parasite ---
       .container-nav et son <nav> sont des éléments flex : sans largeur
       explicite le <nav> se réduit à la taille du bouton. On les force à
       100 % et on retire le positionnement propre de .container-nav, pour
       que le logo ET le hamburger (tous deux en position absolue) se
       repèrent sur le même élément : le header. */
    .header .container-nav {
        position: static;
        flex: 1 1 100%;
        width: 100%;
        padding: 0 !important;
        margin: 0 !important;
    }

    .header .container-nav .navbar {
        flex: 1 1 100%;
        width: 100%;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Menu ouvert : le panneau s'affiche SOUS le logo pour ne pas le
       recouvrir (hauteur du logo + 6 px de respiration). */
    .header .container-nav .navbar-collapse.show,
    .header .container-nav .navbar-collapse.collapsing {
        margin-top: calc(var(--logo-mobile-size) + 6px);
    }

    /* --- BOUTON HAMBURGER : à droite, fond translucide identique au menu ---
       Les anciennes icônes (police d'icônes / .navbar-toggler-icon) sont
       masquées : le dessin (3 traits ou croix) est fait en SVG ci-dessous. */
    .container-header .navbar-toggler,
    .container-header .navbar-toggler:focus,
    .container-header .navbar-toggler:active {
        /* Positionné par rapport au header, comme le logo :
           à DROITE, centré verticalement sur le logo (alignement). */
        position: absolute;
        right: 12px;
        left: auto;
        top: calc(8px + (var(--logo-mobile-size) - 44px) / 2 + var(--hamburger-nudge-y));
        z-index: 4;
        display: block;
        width: 44px;
        height: 44px;
        padding: 0;
        margin: 0;
        border: none !important;
        outline: none !important;
        border-radius: 8px;
        /* même transparence que le panneau du menu (variable commune) */
        background-color: var(--menu-bg-mobile) !important;
        /* icône hamburger (3 traits) */
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%233b2a05' stroke-linecap='round' stroke-width='3' d='M5 7h20M5 15h20M5 23h20'/%3e%3c/svg%3e") !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size: 28px 28px !important;
    }

    /* Masque l'ancienne icône (glyphe, <i>, <svg>, .navbar-toggler-icon) */
    .container-header .navbar-toggler > *,
    .container-header .navbar-toggler [class*="icon-"],
    .container-header .navbar-toggler-icon {
        display: none !important;
    }

    /* MENU OUVERT : les 3 traits deviennent une croix (X)
       Bootstrap passe aria-expanded="true" sur le bouton à l'ouverture. */
    .container-header .navbar-toggler[aria-expanded="true"],
    .container-header .navbar-toggler[aria-expanded="true"]:focus,
    .container-header .navbar-toggler[aria-expanded="true"]:active {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%233b2a05' stroke-linecap='round' stroke-width='3' d='M7 7L23 23M23 7L7 23'/%3e%3c/svg%3e") !important;
    }

    /* Panneau du menu mobile : fond translucide
       (réglé par --menu-bg-mobile, identique au bouton hamburger) */
    .header .mod-menu.metismenu {
        background: var(--menu-bg-mobile);
        border-radius: 10px;
        padding: 6px 4px !important;
    }

    /* Menu mobile aligné à DROITE (sous le hamburger, cohérent avec sa
       position). Les liens, les chevrons et les sous-menus suivent. */
    .header .mod-menu.metismenu {
        text-align: right;
        padding-right: 12px !important;
    }

    .header .mod-menu.metismenu .metismenu-item {
        justify-content: flex-end;      /* lien + chevron collés à droite */
    }

    .header .mod-menu.metismenu .metismenu-item > a {
        text-align: right;
    }

    /* Chevrons à GAUCHE du texte (mobile) :
       dans le HTML le bouton chevron vient après le lien ; « order: -1 » le
       fait passer avant, sans toucher au HTML.
       Variante : ajoutez « margin-right: auto !important; » à .mm-toggler
       pour coller les chevrons tout à gauche du panneau. */
    .header .mod-menu.metismenu .mm-toggler {
        order: -1;
    }

    /* Espace du chevron : du côté du texte (à droite du chevron) */
    .header .mod-menu.metismenu .mm-toggler::after {
        margin: 0 0.4em 0 0 !important;
    }

    /* Sous-menus : retrait côté droit au lieu du côté gauche */
    .header .mod-menu.metismenu .mm-collapse {
        text-align: right;
        padding: 0 1em 0 0 !important;
    }

    /* Texte du menu mobile plus lisible (halo clair + graisse) */
    .header .mod-menu.metismenu .metismenu-item > a {
        font-weight: 700 !important;
        font-size: 0.95em !important;
        color: #1a1305 !important;
        text-shadow: 0 0 6px rgba(250, 247, 240, 0.95) !important;
    }
}


/* ==========================================================================
   14. HEADER ÉCRAN / PC (≥ 992 px)
   ★ SECTION MODIFIÉE
     - le LOGO est tout à DROITE (grille 3 colonnes : vide | slogan | logo) ;
     - le SLOGAN n'a plus de fond : texte blanc + légère ombre ;
     - le MENU a des bords arrondis moins prononcés (--menu-radius).
   Le mobile n'est pas concerné (voir section 13).
   ========================================================================== */
@media (min-width: 992px) {
    .header .grid-child:not(.container-nav) {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        text-align: center !important;
    }

    /* Grille : colonne 1 vide, colonne 2 = slogan (centré), colonne 3 = logo.
       Le logo reste dans le flux : la hauteur du header ne change pas. */
    .header .navbar-brand {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        align-items: center !important;
        width: 100% !important;
        margin: 0 !important;
        text-align: center !important;
    }

    .header .brand-logo {
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
    }

    .header .brand-logo img {
        max-height: 130px !important;
        width: auto !important;
        display: inline-block !important;
    }

    /* Slogan : Lora italique, SANS fond, blanc avec légère ombre.
       Le text-shadow est en !important car la section 19 l'annule partout ;
       le sélecteur plus précis le fait passer devant.
       Si le texte manque de contraste sur les nuages, renforcer l'ombre :
       0 1px 2px rgba(0,0,0,0.85), 0 0 14px rgba(0,0,0,0.6) */
    .header .site-description {
        grid-column: 2;
        grid-row: 1;
        font-family: var(--font-heading) !important;
        font-style: italic;
        font-weight: 600;
        font-size: var(--fs-slogan) !important;
        line-height: 1.3;
        color: #ffffff !important;
        background: transparent;
        padding: 0;
        border-radius: 0;
        display: inline-block;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7),
                     0 0 10px rgba(0, 0, 0, 0.45) !important;
    }

    /* Bande translucide derrière le menu horizontal : son fond est défini
       en section 21 (variable --menu-bg). Arrondi : variable --menu-radius. */
    .header .mod-menu.metismenu {
        display: inline-flex !important;
        border-radius: var(--menu-radius);
        padding: 6px 22px;
        gap: 4px;
    }

    .header .container-nav {
        display: flex;
        justify-content: center;
    }

    /* Texte plus gras pour rester net sur la photo */
    .header .mod-menu.metismenu > .metismenu-item > a,
    .header .mod-menu.metismenu > .nav-item > a {
        font-weight: 700 !important;
    }
}


/* ==========================================================================
   15. FILIGRANE FIXE (fond de tout le site)
   ========================================================================== */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-image: url('/images/logo/capmedia_logo_11.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 45vw auto;
    opacity: 0.10; /* plus discret en mode clair */
    pointer-events: none;
    z-index: 0;
}

#top {
    position: relative;
    z-index: 1;
}


/* ==========================================================================
   16. LARGEUR MAXIMALE DU SITE (contenu centré à 1200px, fonds full-width)
   ========================================================================== */
.container-header .grid,
.container-main .grid,
.container-bottom .grid,
.container-footer .grid,
.container-banner .grid {
    max-width: 1200px;
    margin-left: auto !important;
    margin-right: auto !important;
}


/* ==========================================================================
   17. FLOU DES BORDS AU-DELÀ DE 1340PX
   ========================================================================== */
@media (min-width: 1340px) {
    html::before,
    html::after {
        content: "";
        position: fixed;
        top: 25vh;
        height: 50vh;
        width: calc((100vw - 1370px) / 2);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        pointer-events: none;
        z-index: 1031;
    }
    html::before { left: 0; }
    html::after { right: 0; }
}


/* ==========================================================================
   18. CARDS BLOG — CARD ENTIÈRE CLIQUABLE
   ========================================================================== */
.com-content-category-blog__item {
    position: relative;
    background: #ffffff;
    border: 1px solid #e0d3b0 !important;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform 0.25s ease, border-color 0.25s ease;
}

/* Au survol : léger décalage + bordure accentuée (remplace l'ombre) */
.com-content-category-blog__item:hover {
    transform: translateY(-6px);
    border-color: #6b4a00 !important;
    cursor: pointer;
}

.com-content-category-blog__item .item-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.com-content-category-blog__item .page-header,
.com-content-category-blog__item .page-header h2 {
    display: block;
    text-align: center;
}

.com-content-category-blog__item .page-header h2 a {
    display: inline-block;
    text-align: center;
    font-weight: 600;
    font-size: var(--fs-title-module);   /* 18 -> 22 px, fluide */
    color: #5c4000 !important;
    z-index: 2;
}

/* Lien étiré sur le titre : couvre toute la card */
.com-content-category-blog__item .page-header h2 a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* Texte d'intro tronqué à 4 lignes */
.com-content-category-blog__item .item-content > p {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1 1 auto;
}


/* ==========================================================================
   19. FILET DE SÉCURITÉ : AUCUNE OMBRE, NULLE PART
   (garde aussi Bootstrap / Joomla / extensions sans ombre)
   Les text-shadow volontaires (menu mobile, slogan PC) passent devant grâce
   à leur sélecteur plus spécifique + !important.
   ========================================================================== */
*,
*::before,
*::after {
    box-shadow: none !important;
    text-shadow: none !important;
}

/* Accessibilité : Bootstrap dessine le focus clavier avec une ombre,
   on le remplace par un contour visible */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible {
    outline: 2px solid #0b3d91 !important;
    outline-offset: 2px;
}


/* ==========================================================================
   20. CARTES : NE PAS RÉSERVER DE PLACE POUR UN MODULE/IMAGE SUPPRIMÉ
   1) carte en colonne flexible avec espacement uniforme (gap),
   2) disparition de tout conteneur devenu vide.
   NB : le CSS ne peut pas lire le texte d'un paragraphe ; un "&nbsp;" doit
   être supprimé à la source, dans l'éditeur Joomla.
   ========================================================================== */
.card,
.boxed,
.com-content-category-blog__item .item-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.card > *:empty,
.boxed > *:empty,
.card .moduletable:empty,
.boxed .moduletable:empty,
.card div:empty,
.boxed div:empty,
.card a:empty,
.boxed a:empty,
.card p:empty,
.boxed p:empty,
.card img[src=""],
.item-content > *:empty,
.item-content p:empty,
.item-content div:empty,
.item-content a:empty {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
}


/* ==========================================================================
   21. MENU TRANSPARENT + SOUS-MENUS (DESKTOP)
   - menu principal : transparent (--menu-bg, défini en section 2)
   - sous-menus : quasi opaques (--submenu-bg)
   - arrondi du menu principal : --menu-radius (section 2)
   ========================================================================== */
@media (min-width: 992px) {

    /* Menu principal */
    .header .mod-menu.metismenu {
        background: var(--menu-bg);
        border-radius: var(--menu-radius);
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
    }

    /* Niveau 2 : liste déroulante sous l'élément parent, ouverte au survol */
    .header .mod-menu.metismenu > .metismenu-item {
        position: relative;
    }

    .header .mod-menu.metismenu > .metismenu-item > .mm-collapse {
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 220px;
        margin: 0;
        padding: 6px 4px;
        z-index: 1040;
        background: var(--submenu-bg) !important;
        border: 1px solid var(--menu-border);
        border-radius: 10px;
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
    }

    .header .mod-menu.metismenu > .metismenu-item:hover > .mm-collapse,
    .header .mod-menu.metismenu > .metismenu-item:focus-within > .mm-collapse {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
    }

    /* Niveau 3 : déplié d'office dans le niveau 2, avec un léger retrait */
    .header .mod-menu.metismenu .mm-collapse .mm-collapse {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        position: static;
        background: transparent !important;
        border: 0;
        padding: 0 0 0 1em;
        min-width: 0;
    }

    /* Pas de chevron sur les niveaux déjà dépliés */
    .header .mod-menu.metismenu .mm-collapse .mm-collapse .mm-toggler {
        display: none !important;
    }

    /* Survol d'un lien de sous-menu */
    .header .mod-menu.metismenu .mm-collapse a:hover {
        background-color: var(--menu-bg-hover) !important;
        color: #0b2a66 !important;
    }
}


/* ==========================================================================
   22. IMAGE DE TITRE + TITRE CÔTE À CÔTE (article seul)
   ========================================================================== */
.title-image {
    display: inline-block;
    vertical-align: middle;
    margin-right: 12px;
}

.title-image img {
    width: 60px !important;
    max-width: 60px !important;
    height: auto !important;
    display: inline-block;
    vertical-align: middle;
}



/* ==========================================================================
   23. BANNIÈRES TEXTE + IMAGE (module Bannières, type Personnalisé)
   .banniere-fond  = style commun à TOUTES les bannières
   .banniere--xxx  = une règle par bannière, pour changer l'image
   ========================================================================== */
.banniere-fond {
    /* RÉGLAGE DU VOILE CLAIR (de 0 à 1), commun à toutes les bannières.
       0 = aucun voile | 0.45 = léger | 0.6 = moyen | 0.85 = très clair.
       Pour une seule bannière, redéfinissez --banniere-voile dans sa
       règle .banniere--xxx. */
    --banniere-voile: 0.45;

    /* Image par défaut, utilisée si aucune variante n'est indiquée */
    --banniere-image: url('/images/img-banniere.jpg');

    background-image:
        linear-gradient(rgba(250, 247, 240, var(--banniere-voile)),
                        rgba(250, 247, 240, var(--banniere-voile))),
        var(--banniere-image);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;

    min-height: 55px;               /* hauteur de la bannière */
    display: flex;
    align-items: center;             /* centrage vertical du texte */
    justify-content: center;         /* centrage horizontal du texte */
}

/* --- Variantes : seule l'image change (une règle par bannière) --- */
.banniere--sermons {
    --banniere-image: url('/images/img-banniere.jpg');
}

.banniere--podcasts {
    --banniere-image: url('/images/img-banniere-podcasts.jpg');
}

.banniere--temoignages {
    --banniere-image: url('/images/img-banniere-temoignages.jpg');
    --banniere-voile: 0.6;           /* exemple : voile plus fort pour cette image seule */
}

/* --- Titre : grand, italique, police Lora du site --- */
.banniere-titre {
    font-family: var(--font-heading);
    font-style: italic;
    font-weight: 600;
    font-size: clamp(1.6rem, 1.2rem + 2vw, 2.6rem);  /* 26 -> 42 px selon l'écran */
    letter-spacing: 0.04em;
    text-align: center;
    color: var(--text-main);
    margin: 0;
    padding: 12px 16px;
}

/* ==========================================================================
   24. SUPPRESSION DE L'ESPACE SOUS LA BANNIÈRE
   Retire la marge (bande orange dans l'inspecteur) ; la hauteur de la
   partie bleue reste celle que vous avez réglée.
   ========================================================================== */
.container-banner {
    margin-bottom: 0 !important;
}

/* Marge éventuelle du dernier module de la bannière */
.container-banner > *:last-child,
.container-banner .moduletable:last-child {
    margin-bottom: 0 !important;
}

/* ============================================================================
   25. BOUTON VISUEL EN BAS DE CHAQUE CARTE
   Couvre : blog de catégorie (.com-content-category-blog__item)
            ET articles en vedette / épinglés (.blog-featured .blog-item).
   Le libellé est une variable (--btn-label) : par défaut « Découvrir → ».
   Pour changer le texte d'UNE carte, saisissez une des classes de la
   liste 25.2 dans le champ « Classe de l'article » (ou « Classe du blog »
   du menu pour changer toutes les cartes d'une page d'un coup).
   ============================================================================ */


/* --- 25.1 Libellé par défaut + structure de la carte ---------------------- */
.com-content-category-blog__item,
.blog-item {
    --btn-label: "Découvrir →";
}

/* Cartes "Articles en vedette" : même comportement que le blog de catégorie */
.blog-featured .blog-item {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #e0d3b0 !important;
    border-radius: 12px;
    overflow: hidden;
    height: 100%;
    transition: transform 0.25s ease, border-color 0.25s ease;
}

.blog-featured .blog-item:hover {
    transform: translateY(-6px);
    border-color: #6b4a00 !important;
    cursor: pointer;
}

.blog-featured .blog-item .item-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 10px;
    border: 0;
    background: transparent;
}

/* Lien étiré sur le titre : toute la carte en vedette devient cliquable */
.blog-featured .blog-item .page-header h2 a {
    position: static;
    z-index: 2;
}

.blog-featured .blog-item .page-header h2 a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}


/* --- 25.2 LIBELLÉS AU CHOIX (une ligne par variante) ----------------------
   Modifiez les textes entre guillemets, ajoutez-en autant que nécessaire.
   Le sélecteur :has() permet que la classe fonctionne même si Joomla la
   place sur un élément à l'intérieur de la carte. */
.btn-decouvrir, .blog-item:has(.btn-decouvrir) { --btn-label: "Découvrir →"; }
.btn-ecouter,   .blog-item:has(.btn-ecouter)   { --btn-label: "Écouter →"; }
.btn-lire,      .blog-item:has(.btn-lire)      { --btn-label: "Lire →"; }
.btn-voir,      .blog-item:has(.btn-voir)      { --btn-label: "Voir la série →"; }
.btn-regarder,  .blog-item:has(.btn-regarder)  { --btn-label: "Regarder →"; }
.btn-sermon,    .blog-item:has(.btn-sermon)    { --btn-label: "Écouter le sermon →"; }
.btn-podcast,   .blog-item:has(.btn-podcast)   { --btn-label: "Écouter le podcast →"; }


/* --- 25.3 Le bouton lui-même ---------------------------------------------- */
.com-content-category-blog__item .item-content::after,
.blog-item .item-content::after {
    content: var(--btn-label);
    display: block;
    align-self: center;
    margin-top: auto;
    padding: 6px 18px;
    border-radius: 8px;
    background: #6b4a00;
    color: #ffffff;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.8rem;
    text-align: center;
    transition: background 0.2s ease;
}

.com-content-category-blog__item:hover .item-content::after,
.blog-item:hover .item-content::after {
    background: #0b3d91;
}