/* ==========================================================
   POLICES DU BANDEAU

   - Barlow : petit titre
   - Alumni Sans SC : CTT MINEROIS et L323
   - Barlow Condensed : adresse
   ========================================================== */

@import url("https://fonts.googleapis.com/css2?family=Alumni+Sans+SC:ital,wght@1,500;1,600;1,700;1,800&family=Barlow+Condensed:ital,wght@1,300&family=Barlow:wght@300;400&display=swap");

/* =====================================================================
   user.css — Charte graphique CTT Minerois
   Cassiopeia Extended / Joomla 6
   Version nettoyée : code mort (sélecteurs d'articles qui ne matchaient
   pas le HTML réel) supprimé. Section articles calée sur la structure
   réelle : .blog-item > .item-content > h2.item-title.
   BLANC fond = #f6f8fb et pas #fff
   ===================================================================== */

:root {
    /* Couleurs principales inspirées du bandeau */
    --brand-950: #061f4a;
    --brand-900: #0a3475;
    --brand-800: #10478f;
    --brand-700: #1761ad;
    --brand-500: #428bc8;
    --brand-150: #dce9f5;
    --brand-100: #edf4fa;

    /* Gris et fonds */
    --grey-950: #17202b;
    --grey-700: #4d5967;
    --grey-400: #b8c2cd;
    --grey-300: #d4dce4;
    --grey-200: #e8edf2;
    --grey-100: #f4f6f8;

    /* Accent rouge du bandeau */
    --accent-red: #ef3340;
    --accent-red-dark: #c9202d;

    /* Accent orange secondaire */
    --accent-orange: #e8730c;

    /* Ombres */
    --shadow-soft: 0 3px 12px rgba(6, 31, 74, 0.12);
    --shadow-header: 0 2px 7px rgba(6, 31, 74, 0.28);
}


/* =====================================================================
   FOND GÉNÉRAL
   ===================================================================== */

body {
    background:
        linear-gradient(
            180deg,
            #edf2f6 0,
            var(--grey-100) 280px,
            var(--grey-100) 100%
        );
    color: var(--grey-950);
}


/* =====================================================================
   MODULES : Challenge, Menu principal, Connexion...
   ===================================================================== */

.card,
.moduletable {
    overflow: hidden;
    border: 1px solid rgba(10, 52, 117, 0.16);
    border-radius: 5px;
    background: #fff;
    box-shadow: var(--shadow-soft);
}

/* Titres des modules */
.card > .card-header,
.moduletable > h3,
.moduletable > .header,
h3.title {
    position: relative;
    margin: 0;
    padding: 0.65rem 0.85rem;
    background:
        linear-gradient(
            115deg,
            var(--brand-950) 0%,
            var(--brand-900) 48%,
            var(--brand-800) 100%
        );
    color: #fff;
    border: 0;
    border-radius: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.01em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    box-shadow: var(--shadow-header);
}

/* Fine ligne rouge rappelant le bandeau */
.card > .card-header::after,
.moduletable > h3::after,
.moduletable > .header::after,
h3.title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 150px;
    height: 2px;
    background: var(--accent-red);
}

/* Léger reflet dans le titre */
.card > .card-header::before,
.moduletable > h3::before,
.moduletable > .header::before,
h3.title::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.10),
            transparent 55%
        );
    pointer-events: none;
}

/* Corps des cartes */
.card-body {
    padding: 0.85rem;
    background: #f6f8fb;
}


/* =====================================================================
   LIENS
   ===================================================================== */

a {
    color: var(--brand-700);
}

a:hover,
a:focus {
    color: var(--brand-900);
}


/* =====================================================================
   BOUTONS
   ===================================================================== */

.btn-primary,
.btn-accent {
    border: 0;
    background:
        linear-gradient(
            135deg,
            var(--brand-800),
            var(--brand-900)
        );
    color: #fff;
    box-shadow: 0 2px 6px rgba(6, 31, 74, 0.2);
    transition:
        background-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-accent:hover,
.btn-accent:focus {
    background:
        linear-gradient(
            135deg,
            var(--brand-700),
            var(--brand-800)
        );
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(6, 31, 74, 0.25);
}

/* Bouton rouge, par exemple Connexion */
.btn-danger {
    border: 0;
    background:
        linear-gradient(
            135deg,
            var(--accent-red),
            var(--accent-red-dark)
        );
    color: #fff;
}

.btn-danger:hover,
.btn-danger:focus {
    background: var(--accent-red-dark);
    color: #fff;
}

/* Badges */
.badge-alerte {
    display: inline-block;
    padding: 0.15rem 0.45rem;
    background: var(--accent-red);
    color: #fff;
    border-radius: 3px;
}


/* =====================================================================
   TABLEAUX CHALLENGE
   ===================================================================== */

.ctt-challenge {
    margin: 0 0 0.8rem;
    color: var(--grey-950);
}

.ctt-challenge__title {
    margin: 0.6rem 0 0.35rem;
    color: var(--brand-900);
    font-size: 0.74rem;
    font-style: italic;
    font-weight: 700;
    text-align: center;
}

.ctt-challenge__table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 0.68rem;
    line-height: 1.2;
}

.ctt-challenge__table th {
    padding: 0.24rem 0.3rem;
    background:
        linear-gradient(
            180deg,
            var(--brand-800),
            var(--brand-950)
        );
    color: #fff;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.15px;
}

.ctt-challenge__table th.c-name {
    text-align: left;
}

.ctt-challenge__table td {
    padding: 0.19rem 0.3rem;
    border-bottom: 1px solid var(--grey-300);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ctt-challenge__table td.c-name {
    text-align: left;
}

.ctt-challenge__table tbody tr:nth-child(odd) {
    background: var(--brand-100);
}

.ctt-challenge__table tbody tr:nth-child(even) {
    background: #fff;
}

.ctt-challenge__table tbody tr:hover {
    background: var(--brand-150);
}

.ctt-challenge__table td.c-pts {
    color: var(--brand-900);
    font-weight: 800;
}

.ctt-challenge__table a {
    color: inherit;
    text-decoration: none;
}

.ctt-challenge__table a:hover {
    color: var(--brand-700);
    text-decoration: underline;
}

/* Largeurs des colonnes */
.ctt-challenge__table .c-num  { width: 9%; }
.ctt-challenge__table .c-name { width: 55%; }
.ctt-challenge__table .c-cls  { width: 13%; }
.ctt-challenge__table .c-ma   { width: 9%; }
.ctt-challenge__table .c-pts  { width: 14%; }


/* =====================================================================
   LARGEUR GÉNÉRALE DU SITE
   ===================================================================== */

@media (min-width: 992px) {
    body.has-sidebar-left .site-grid,
    body.has-sidebar-right .site-grid {
        width: calc(100% - 20px) !important;
        max-width: 1700px !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }
}
	
	    body.has-sidebar-left.has-sidebar-right .container-component {
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        margin-right: 1rem !important;
        margin-left: 1rem !important;
        padding: 0 !important;
        box-sizing: border-box;
    }
	
}

body .site-grid {
    grid-gap: 0 0 !important;
}

/* =====================================================================
   GRILLE À TROIS COLONNES — GRANDS ÉCRANS
   ===================================================================== */

@media (min-width: 1102px) {

    /* La grille : colonnes latérales FIXES, centre flexible (prend tout le reste). */
    body.has-sidebar-left.has-sidebar-right .site-grid {
        display: grid !important;
        grid-template-columns: 320px minmax(0, 1fr) 320px !important;
        grid-template-areas: none !important;   /* on neutralise les zones nommées de Cassiopeia */
        column-gap: 1rem !important;
        row-gap: 0 !important;
    }

    /* Les 3 colonnes se placent dans l'ordre du DOM (gauche, centre, droite)  */
    /* et remplissent EXACTEMENT leur piste : fini les 25% surdimensionnés.     */
    body.has-sidebar-left.has-sidebar-right .site-grid > .grid-child {
        grid-area: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        box-sizing: border-box;
    }

    body.has-sidebar-left.has-sidebar-right .container-component > * {
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }
}


/* =====================================================================
   AFFICHAGE MOBILE (grille + bandeau)
   ===================================================================== */

@media (max-width: 1101px) {

    body.wrapper-fluid .site-grid {
        width: 100% !important;
        margin-inline: 0 !important;
        gap: 0 !important;
        grid-gap: 0 !important;
    }

    .container-sidebar-left,
    .container-component,
    .container-sidebar-right {
        width: 100% !important;
        max-width: none !important;
    }

    .card,
    .moduletable {
        border-radius: 3px;
    }
}

/* Image du bandeau 
header.header {
    width: 100%;
    aspect-ratio: 1981 / 322;
    background-image: url("https://joomla.cttminerois.be/cttm/images/bandeau2.webp") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
    min-height: 0 !important;
    padding: 0 !important;
}*/

@media (max-width: 767px) {
    body.wrapper-fluid .site-grid {
        gap: 0 4px !important;
        grid-gap: 0 4px !important;
    }
	
	.contentpane {
		padding: 2px !important;
	}
}


/* =====================================================================
   ARTICLES DU CONTENU CENTRAL
   Structure réelle (vue "à la une" / blog) :
   .blog-featured > .blog-items.items-leading > .blog-item
        > .item-content > h2.item-title > a
   ===================================================================== */

/* Espacement entre les articles */
.blog-items {
    gap: 1.4rem;
}

/* Carte d'un article */
.blog-item {
    min-width: 0;
    overflow: hidden;
    padding: 0 0 1.4rem;   /* plus de padding horizontal ici */
    background: #f6f8fb;
    border: 1px solid var(--grey-300);
    border-radius: 6px;
    box-shadow: var(--shadow-soft);
}

/* Titre de l'article = même bandeau dégradé que les modules */
.blog-item .item-content { width: 100%; }

.blog-item .item-title {
    position: relative;
    overflow: hidden;
    margin: 0 0 1.1rem;   /* plus de négatif */
    padding: 0.62rem 1.35rem 0.72rem;
    background: linear-gradient(115deg, var(--brand-950) 0%, var(--brand-900) 48%, var(--brand-800) 100%);
    box-shadow: var(--shadow-header);
    font-size: clamp(1.15rem, 1.7vw, 1.45rem);
    font-weight: 700;
    line-height: 1.25;
}

/* Filet rouge cohérent avec les titres de modules */
.blog-item .item-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50%;
    height: 2px;
    background: var(--accent-red);
}

/* Texte du titre blanc, y compris le lien */
.blog-item .item-title,
.blog-item .item-title a {
    color: #fff !important;
    text-decoration: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.blog-item .item-title a:hover,
.blog-item .item-title a:focus {
    color: #fff !important;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Ligne d'info (date de publication) */
.blog-item .article-info {
    margin: 0 0 0.8rem;
    color: var(--grey-700);
    font-size: 0.82rem;
}

/* Corps de l'article */
.blog-item p {
    line-height: 1.65;
}

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


/* =====================================================================
   ARTICLE COMPLET (vue d'un article seul : .item-page)
   Structure réelle : .item-page > .page-header > h1
   ===================================================================== */

.item-page {
    min-width: 0;
    overflow: hidden;
    padding: 0 0 1.6rem;          /* pas de padding horizontal : bandeau bord à bord */
    background: #fff;
    border: 1px solid var(--grey-300);
    border-radius: 7px;
    box-shadow: var(--shadow-soft);
}

/* Bandeau de titre bord à bord */
.item-page .page-header {
    position: relative;
    overflow: hidden;
    margin: 0 0 1.1rem;
    padding: 0.7rem 1.5rem 0.8rem;
    background:
        linear-gradient(
            115deg,
            var(--brand-950) 0%,
            var(--brand-900) 48%,
            var(--brand-800) 100%
        );
    box-shadow: var(--shadow-header);
}

.item-page .page-header h1,
.item-page .page-header h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.3rem, 2vw, 1.7rem);
    font-weight: 700;
    line-height: 1.25;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.item-page .page-header a {
    color: #fff;
    text-decoration: none;
}

/* Filet rouge, comme les modules */
.item-page .page-header::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50%;
    height: 2px;
    background: var(--accent-red);
}

/* Le corps de l'article récupère le retrait latéral */
.item-page > *:not(.page-header) {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.item-page p {
    color: var(--grey-950);
    line-height: 1.65;
}

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


/* =====================================================================
   ARTICLES — TABLETTE ET GSM
   ===================================================================== */

@media (max-width: 1101.98px) {
    /* Empêche un article large de faire déborder la colonne */
    .container-component,
    .container-component > *,
    .blog-items {
        min-width: 0 !important;
        max-width: 100% !important;
    }
}

@media (max-width: 767.98px) {

    .blog-item {
        padding: 0 1rem 1.15rem;
        border-radius: 4px;
    }

    .blog-item .item-title {
        padding: 0.58rem 0.8rem 0.68rem;
        font-size: 1.15rem;
        border-radius: 4px;
    }

    .item-page {
        padding: 0 0 1.2rem;
        border-radius: 4px;
    }

    .item-page .page-header {
        padding: 0.62rem 1rem 0.74rem;
    }

    .item-page .page-header h1,
    .item-page .page-header h2 {
        font-size: 1.25rem;
    }

    .item-page > *:not(.page-header) {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* =====================================================================
   NEWS / ARTICLES DE CONTENU — habillage léger
   ===================================================================== */
.ctt-news {
	max-width: 720px;
	margin-inline: auto;
	text-align: center;
}
.ctt-news p { line-height: 1.65; }

/* Accroche */
.ctt-news__lead {
	margin: 0 0 1.2rem;
	color: var(--brand-900);
	font-size: 1.2rem;
}

/* Petite icône dans le texte */
.ctt-news__icon { vertical-align: middle; }

/* Bouton d'action (reprend le dégradé .btn-primary de la charte) */
.ctt-news__cta { margin: 1.6rem 0; }
.ctt-news__cta .btn {
	display: inline-block;
	padding: 0.6rem 1.3rem;
	font-weight: 600;
	border-radius: 6px;
	text-decoration: none;
}

/* Image encadrée, cohérente avec les cartes */
.ctt-news__figure { margin: 1.6rem 0 0; }
.ctt-news__figure img {
	max-width: 100%;
	height: auto;
	border: 1px solid var(--grey-300);
	border-radius: 8px;
	box-shadow: var(--shadow-soft);
}

/* Espace latéral sur le CORPS de l'article, sans toucher au bandeau de titre */
.blog-item .item-content > *:not(.item-title) {
    padding-left: 1.35rem;
    padding-right: 1.35rem;
}

/* =====================================================================
   ARTICLE "Notre club — Présentation"
   ===================================================================== */
.club-presentation { line-height: 1.65; }
.club-intro { display: grid; grid-template-columns: 1fr; gap: 1.2rem; align-items: start; }
@media (min-width: 640px) { .club-intro { grid-template-columns: 2fr 1fr; } }
.club-intro__figure { margin: 0; }
.club-intro__figure img { width: 100%; height: auto; border: 1px solid var(--grey-300); border-radius: 8px; box-shadow: var(--shadow-soft); }
.club-h { position: relative; margin: 1.7rem 0 .8rem; padding-bottom: .3rem; color: var(--brand-900); font-weight: 700; border-bottom: 2px solid var(--grey-200); }
.club-h::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 60px; height: 2px; background: var(--accent-red); }
.club-note { padding: .7rem .9rem; background: var(--brand-100); border-left: 3px solid var(--brand-700); border-radius: 4px; }
.club-cards { display: grid; grid-template-columns: 1fr; gap: 1rem; margin: .6rem 0; }
@media (min-width: 640px) { .club-cards { grid-template-columns: 1fr 1fr; } }
.club-card { padding: .9rem 1.1rem; background: #f6f8fb; border: 1px solid var(--grey-300); border-radius: 8px; box-shadow: var(--shadow-soft); }
.club-card h4 { margin: 0 0 .5rem; color: var(--brand-900); }
.club-card ul { margin: 0; padding-left: 1.1rem; }
.club-fee {
    margin: 1.3rem 0;
    padding: 1.1rem 1.3rem;
    background: linear-gradient(115deg, var(--brand-950), var(--brand-900));
    color: #fff;
    border-radius: 8px;
    box-shadow: var(--shadow-header);
}
.club-fee p { margin: .25rem 0; color: #fff; }
.club-fee__amount { font-size: 1.15rem; }
.club-fee__amount strong { font-size: 1.35rem; }
.club-fee strong { color: #fff; }
.club-fee .lbl { text-decoration: underline; }
.stats-embed iframe { width: 100%; height: 520px; border: 1px solid var(--grey-300); border-radius: 8px; background: #fff; }

/* =====================================================================
   BANDEAU + MENU — bloc COMPLET (remplace tout l'ancien CSS bandeau + menu)
   ===================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@1,300;1,400;1,500;1,600;1,700&family=Barlow:wght@300;400&display=swap");
body { background: var(--brand-950); color: var(--grey-950); }

header.header {
    display: block !important;
    position: relative;
    width: 100%;
    aspect-ratio: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    background: var(--brand-950) !important;
}
/*
header.header::before {
    content: "";
    display: block;
    width: 1700px;
    max-width: 100%;
    margin-inline: auto;
    aspect-ratio: 1981 / 322;
    background-image: url("https://joomla.cttminerois.be/cttm/images/bandeau2.webp");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
*/
header.header .container-nav {
    display: block;
    width: 1700px;
    max-width: 100%;
    margin-inline: auto;
    padding: 0;
    background: linear-gradient(180deg, var(--brand-800), var(--brand-950));
    border-top: 2px solid var(--brand-500);
    border-radius: 0 0 6px 6px;
    box-shadow: var(--shadow-header);
}
header.header .container-nav .navbar,
header.header .container-nav .navbar-collapse { width: 100%; padding: 0; }

header.header .container-nav ul.mod-menu.metismenu {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
    margin: 0;
    padding: 0 .4rem;
    list-style: none;
    background: transparent;
    border: 0;
    font-family: system-ui, "Segoe UI", Arial, sans-serif;
}

header.header .container-nav nav {
        margin-top: 1px;
    }

/* Items de premier niveau — liens ET en-têtes (span) */
ul.mod-menu.metismenu > li.level-1 { position: relative; display: flex; }
ul.mod-menu.metismenu > li.level-1 > a,
ul.mod-menu.metismenu > li.level-1 > span,
ul.mod-menu.metismenu > li.level-1 > .mm-toggler-wrapper > a,
ul.mod-menu.metismenu > li.level-1 > .mm-toggler-wrapper > span {
    display: flex;
    align-items: center;
    padding: .6rem 1.15rem;
    color: #fff;
    font-weight: 600;
    font-size: .95rem;
    text-decoration: none;
    border-bottom: 3px solid transparent;
    transition: background-color .15s ease, border-color .15s ease;
    cursor: pointer;
}
ul.mod-menu.metismenu > li.level-1:hover > a,
ul.mod-menu.metismenu > li.level-1:hover > span,
ul.mod-menu.metismenu > li.level-1:hover > .mm-toggler-wrapper > a,
ul.mod-menu.metismenu > li.level-1:hover > .mm-toggler-wrapper > span,
ul.mod-menu.metismenu > li.level-1.active > a,
ul.mod-menu.metismenu > li.level-1.current > a {
    background: rgba(255, 255, 255, .12);
    border-bottom-color: var(--brand-500);
    color: #fff;
}

/* Plus aucun contour de focus au clic (cadre blanc/noir supprimé) */
ul.mod-menu.metismenu a:focus,
ul.mod-menu.metismenu a:focus-visible,
ul.mod-menu.metismenu span:focus,
ul.mod-menu.metismenu .mm-toggler:focus { outline: none !important; box-shadow: none !important; }

header.header .container-nav .navbar-toggler {
    color: #fff;
    border-color: rgba(255, 255, 255, .45);
    margin: .35rem .5rem;
}

/* Sous-menus déroulants — design soigné */
/* Sous-menus déroulants — version compacte et foncée */
ul.mod-menu.metismenu li.level-1 > ul {
    margin: 0;
    padding: .25rem 0;
    min-width: 15rem;
    list-style: none;

    background: linear-gradient(
        180deg,
        var(--brand-900),
        var(--brand-950)
    );

    border: 1px solid rgba(255, 255, 255, .14);
    border-top: 3px solid #d93636;
    border-radius: 0 0 7px 7px;

    box-shadow:
        0 12px 28px rgba(6, 31, 74, .35),
        inset 0 1px 0 rgba(255, 255, 255, .08);

    overflow: hidden;
}

/* Petite séparation entre les liens */
ul.mod-menu.metismenu li.level-1 > ul > li + li {
    border-top: 1px solid rgba(255, 255, 255, .07);
}

/* Liens du sous-menu */
ul.mod-menu.metismenu li.level-1 > ul > li > a {
    display: block;
    padding: .43rem .9rem;

    color: rgba(255, 255, 255, .88);
    font-size: .86rem;
    font-weight: 500;
    line-height: 1.35;
    text-decoration: none;

    border-left: 3px solid transparent;

    transition:
        background-color .12s ease,
        color .12s ease,
        border-color .12s ease,
        padding-left .12s ease;
}

/* Survol et navigation au clavier */
ul.mod-menu.metismenu li.level-1 > ul > li > a:hover,
ul.mod-menu.metismenu li.level-1 > ul > li > a:focus {
    padding-left: 1.05rem;
    color: #ffffff;
    background: rgba(255, 255, 255, .11);
    border-left-color: #d93636;
}

/* Page actuellement sélectionnée */
ul.mod-menu.metismenu li.level-1 > ul > li.active > a,
ul.mod-menu.metismenu li.level-1 > ul > li.current > a {
    color: #ffffff;
    font-weight: 700;
    background: rgba(255, 255, 255, .14);
    border-left-color: var(--brand-500);
}

/* ===== ORDINATEUR (≥ 1102px) : flèche masquée + ouverture au survol ===== */
@media (min-width: 1102px) {
    ul.mod-menu.metismenu .mm-toggler { display: none !important; }

    ul.mod-menu.metismenu li.level-1 > ul {
        position: absolute;
        left: 0;
        top: 100%;
        z-index: 200;
        display: none;
        height: auto !important;
    }
    ul.mod-menu.metismenu > li.level-1:hover > ul { display: block; }
}

/* ===== MOBILE / TABLETTE (≤ 1101px) : appui sur l'item ouvre le sous-menu ===== */
@media (max-width: 1101px) {
    ul.mod-menu.metismenu > li.parent,
    ul.mod-menu.metismenu > li.deeper { position: relative; }

    ul.mod-menu.metismenu > li.parent > .mm-toggler,
    ul.mod-menu.metismenu > li.deeper > .mm-toggler {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        border: 0;
        background: transparent;
        opacity: 0;
        z-index: 3;
    }
}

/* Bouton hamburger (menu mobile) aligné à droite */
@media (max-width: 1101px) {
  .container-nav { position: relative; }
  .container-nav .navbar-toggler {
    position: absolute !important;
    right: 0px;
    top: 22px;
    margin: 0 !important;
    z-index: 5;
  }
}

/* Petite flèche blanche discrète sur les entrées de menu ayant un sous-menu (bureau) */
/* Petite flèche blanche sur les entrées ayant un sous-menu (bureau ET mobile) */
@media (min-width: 1102px) {
	.metismenu.mod-menu .metismenu-item.parent.level-1 > a::after {
	  content: "";
	  display: inline-block;
	  width: 0;
	  height: 0;
	  /*margin-left: .4em; */
	  vertical-align: middle;
	  border-left: 4px solid transparent;
	  border-right: 4px solid transparent;
	  border-top: 5px solid rgba(255, 255, 255, .75);
	  transition: transform .15s ease, opacity .15s ease;
	  opacity: .85;
	}
	/* La flèche pivote quand le sous-menu est ouvert */
	.metismenu.mod-menu .metismenu-item.parent.level-1.active > a::after,
	.metismenu.mod-menu .metismenu-item.parent.level-1:hover > a::after {
	  transform: rotate(180deg);
	  opacity: 1;
	  display: none !important;
	}
}

@media (max-width: 1101px) {
	.metismenu.mod-menu .metismenu-item.parent.level-1 > a::after {
	  content: "";
	  display: inline-block;
	  width: 0;
	  height: 0;
	  margin-left: .4em;
	  vertical-align: middle;
	  border-left: 4px solid transparent;
	  border-right: 4px solid transparent;
	  border-top: 5px solid rgba(255, 255, 255, .75);
	  transition: transform .15s ease, opacity .15s ease;
	  opacity: .85;
	}
	/* La flèche pivote quand le sous-menu est ouvert */
	.metismenu.mod-menu .metismenu-item.parent.level-1.active > a::after,
	.metismenu.mod-menu .metismenu-item.parent.level-1:hover > a::after {
	  transform: rotate(180deg);
	  opacity: 1;
	}
}

/* Swap image bandeau GSM (2:1) — téléphone uniquement 
@media (max-width: 600px) {
    header.header::before {
        background-image: url("https://joomla.cttminerois.be/cttm/images/bandeau_gsm.webp");
        aspect-ratio: 2 / 1;
    }
}*/

/* Burger : MÊME position (haut-droite du bandeau) partout où il est présent,
   càd dès que le menu passe en hamburger (≤1101px). */
@media (max-width: 1101px) {
    header.header { position: relative; }
    header.header .container-nav,
    header.header .container-nav nav,
    header.header .container-nav .navbar,
    header.header .container-nav .navbar-collapse { position: static; }

    header.header .container-nav .navbar-toggler {
        position: absolute !important;
        top: 10px;
        right: 10px;
        margin: 0 !important;
        z-index: 5;
        filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .55));
    }
}


/* =========================================================
   PERMET DE METTRE LES RESULTATS EN 1er SUR GSM
   Accueil uniquement (Itemid 101) — VÉRIFIE le numéro, cf. plus bas
   ========================================================= 
@media (max-width: 600px) {

-
    body.itemid-101 .site-grid {
        display: flex !important;
        flex-direction: column;
    }
    body.itemid-101 .container-sidebar-right { display: contents; }

    body.itemid-101 .site-grid .sidebar-right.card.cttm-auto       { order: 1; }
    body.itemid-101 .site-grid > .container-component              { order: 2; }
    body.itemid-101 .site-grid > .container-sidebar-left           { order: 3; }
    body.itemid-101 .site-grid .sidebar-right.card:not(.cttm-auto) { order: 4; }
}*/

/* =========================================================
   CONNEXION DISCRÈTE — CTT MINEROIS
   Classe CSS du module : cttm-login
   ========================================================= */

.cttm-login {
    width: 100%;
    /*max-width: 320px;*/
    margin: 18px auto 0;
    padding: 18px;
    overflow: hidden;

    background: #f6f8fb;
    border: 1px solid rgba(11, 46, 111, 0.12);
    border-radius: 9px;
    box-shadow: 0 3px 12px rgba(11, 46, 111, 0.08);
}

/* ---------------------------------------------------------
   Titre éventuel du module
   --------------------------------------------------------- */

.cttm-login .card-header,
.cttm-login > h3,
.cttm-login .moduletable-title {
    margin: -18px -18px 16px;
    padding: 10px 14px;

    color: #ffffff;
    background: #0b2e6f;
    border: 0;

    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.3;
}

/* Supprime les espacements ajoutés par le template */
.cttm-login .card-body,
.cttm-login .mod-login {
    padding: 0;
}

/* ---------------------------------------------------------
   Groupes des champs
   --------------------------------------------------------- */

.cttm-login .mod-login__username,
.cttm-login .mod-login__password {
    margin-bottom: 10px;
}

/* Champ et icône sur la même ligne */
.cttm-login .input-group {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100%;
}

/* Champs utilisateur et mot de passe */
.cttm-login .form-control,
.cttm-login input[type="text"],
.cttm-login input[type="password"] {
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
    height: 40px;
    min-height: 40px;
    padding: 8px 11px;

    color: #1f2937;
    background: #f7f9fc;
    border: 1px solid #ccd5e1;
    border-radius: 6px 0 0 6px;

    font-size: 0.9rem;
    line-height: 1.2;

    box-shadow: none;
    outline: none;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

/* Focus des champs */
.cttm-login .form-control:focus,
.cttm-login input[type="text"]:focus,
.cttm-login input[type="password"]:focus {
    color: #111827;
    background: #ffffff;
    border-color: #6e8fbd;
    box-shadow: 0 0 0 2px rgba(30, 79, 163, 0.1);
    outline: none;
}

/* ---------------------------------------------------------
   Icône utilisateur et œil du mot de passe
   --------------------------------------------------------- */

.cttm-login .input-group-text,
.cttm-login .input-password-toggle {
    display: inline-flex !important;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;

    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 40px;
    min-height: 40px;
    padding: 0 !important;

    color: #0b2e6f;
    background: #ffffff;
    border: 1px solid #ccd5e1;
    border-left: 0;
    border-radius: 0 6px 6px 0;

    box-shadow: none;
}

/* Bouton de visibilité du mot de passe */
.cttm-login button.input-password-toggle {
    position: static;
    margin: 0;
    line-height: 1;
    cursor: pointer;
}

/* Survol discret de l’œil */
.cttm-login button.input-password-toggle:hover,
.cttm-login button.input-password-toggle:focus {
    color: #e25b26;
    background: #f7f9fc;
    border-color: #ccd5e1;
    border-left: 0;
    box-shadow: none;
}

/* Taille identique des deux icônes */
.cttm-login .input-group-text .icon-user,
.cttm-login .input-password-toggle .icon-eye,
.cttm-login .input-group-text svg,
.cttm-login .input-password-toggle svg {
    width: 16px;
    height: 16px;
    font-size: 16px;
}

/* ---------------------------------------------------------
   Maintenir la connexion
   --------------------------------------------------------- */

.cttm-login .mod-login__remember {
    margin: 11px 0 13px;
}

.cttm-login .form-check {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 0;
}

.cttm-login .form-check-input {
    position: static;
    flex: 0 0 auto;

    width: 15px;
    height: 15px;
    margin: 0;

    border: 1px solid #aeb9c8;
    border-radius: 4px;
    box-shadow: none;
}

.cttm-login .form-check-input:checked {
    background-color: #0b2e6f;
    border-color: #0b2e6f;
}

.cttm-login .form-check-label,
.cttm-login label {
    margin: 0;
    color: #334155;
    font-size: 0.82rem;
    font-weight: 400;
    line-height: 1.3;
}

/* ---------------------------------------------------------
   Bouton Connexion
   --------------------------------------------------------- */

.cttm-login .mod-login__submit {
    margin: 0;
}

.cttm-login .btn-primary {
    display: block;
    width: 100%;
    min-height: 40px;
    margin: 0;
    padding: 8px 14px;

    color: #ffffff;
    background: #0b2e6f;
    border: 1px solid #0b2e6f;
    border-radius: 6px;

    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.3;

    box-shadow: none;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease;
}

.cttm-login .btn-primary:hover,
.cttm-login .btn-primary:focus {
    color: #ffffff;
    background: #16458d;
    border-color: #16458d;
    box-shadow: none;
    transform: none;
}

/* ---------------------------------------------------------
   Éléments masqués
   --------------------------------------------------------- */

/*
 * Connexion avec une clé d’accès.
 * Ne pas masquer tous les .btn-secondary :
 * le bouton de l’œil utilise également cette classe.
 */
.cttm-login .mod-login__submit:has(.btn-secondary),
.cttm-login .form-group:has([class*="webauthn"]),
.cttm-login [class*="webauthn"]:not(.input-password-toggle) {
    display: none !important;
}

/* Mot de passe perdu et identifiant perdu */
.cttm-login .mod-login__options {
    display: none !important;
}

.cttm-login ul.mod-login__options {
    margin: 0 !important;
    padding: 0 !important;
}

/* ---------------------------------------------------------
   Config Iframe Menu
   --------------------------------------------------------- */
/* La zone iframe prend l'allure d'une carte article */
/* Titre d'en-tête de page (iframe/contenu externe) = bandeau comme les articles */
.container-component .page-header {
    position: relative;
    overflow: hidden;
    margin: 0 0 1.1rem;
    padding: 0.7rem 1.5rem 0.8rem;
    background: linear-gradient(115deg, var(--brand-950) 0%, var(--brand-900) 48%, var(--brand-800) 100%);
    box-shadow: var(--shadow-header);
    border-radius: 7px 7px 0 0;
}
.container-component .page-header h1,
.container-component .page-header h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.3rem, 2vw, 1.7rem);
    font-weight: 700;
    line-height: 1.25;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.container-component .page-header::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 50%; height: 2px;
    background: var(--accent-red);
}

/* Masquer les liens de modification des articles sur tout le site public */
body.com_content .icons .float-end {
    display: none !important;
}







/* ==========================================================
   BANDEAU ANIMÉ DU CTT MINEROIS
   ========================================================== */

.container-banner {
    width: 100%;
    margin: 0;
    padding: 0;
}

.container-banner .mod-custom {
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Conteneur général du bandeau */
.cttm-banner {
    position: relative;

    width: min(100%, 1700px);
    margin-inline: auto;

    overflow: hidden;
    container-type: inline-size;

    background: #0b2e6f;
}

/* Image responsive */
.cttm-banner__picture,
.cttm-banner__image {
    display: block;
    width: 100%;
}

.cttm-banner__image {
    height: auto;
}

/* Conteneur superposé des textes */
.cttm-banner__desktop {
    position: absolute;
    z-index: 2;

    inset: 0;

    display: block;
    overflow: hidden;

    color: #fff;

    opacity: 1;
    visibility: visible;

    pointer-events: none;
}


/* ==========================================================
   PETIT TITRE : CLUB DE TENNIS DE TABLE
   ========================================================== */

.cttm-banner__intro {
    position: absolute;
    z-index: 5;

    top: 3.8%;
    left: 2.8%;

    display: block;

    color: #fff;

    font-family:
        "Barlow",
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 2.05cqw;
    font-style: normal;
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: 0;

    white-space: nowrap;

    text-shadow:
        0 1px 3px rgba(0, 20, 55, 0.3);

    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;

    opacity: 1;
    visibility: visible;

    animation:
        cttmIntroAppear 0.65s
        ease-out
        0.8s
        both;
}

/* Trait rouge sous le petit titre */
.cttm-banner__intro::after {
    content: "";

    display: block;

    width: 43%;
    height: max(2px, 0.13cqw);
    margin-top: 0.65cqw;

    background: #ef3340;

    transform-origin: left center;

    animation:
        cttmIntroLineAppear 0.5s
        ease-out
        1.15s
        both;
}


/* ==========================================================
   NOM DU CLUB : CTT MINEROIS
   ========================================================== */

.cttm-banner__name {
    position: absolute;
    z-index: 4;

    top: 13.5%;
    left: 51.4%;

    color: #fff;

    font-family:
        "Alumni Sans SC",
        "Arial Narrow",
        sans-serif;

    /*
     * Taille et graisse augmentées pour se rapprocher
     * du texte présent dans le bandeau original.
     */
    font-size: 8.25cqw;
    font-style: italic;
    font-weight: 700;
    font-synthesis: none;

    line-height: 0.82;
    letter-spacing: -0.025em;

    white-space: nowrap;
    text-transform: uppercase;

    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;

    text-shadow:
        0 0.09cqw 0.11cqw rgba(0, 20, 55, 0.32),
        0 0.25cqw 0.42cqw rgba(0, 20, 55, 0.18);

    opacity: 1;

    transform-origin: left center;

    animation:
        cttmNameAppear 0.75s
        cubic-bezier(0.2, 0.8, 0.25, 1)
        0.15s
        both;
}


/* ==========================================================
   NUMÉRO D’AFFILIATION : L323
   ========================================================== */

.cttm-banner__number {
    position: absolute;
    z-index: 4;

    top: 59%;
    left: 68.4%;

    color: #fff;

    font-family:
        "Alumni Sans SC",
        "Arial Narrow",
        sans-serif;

    font-size: 5.25cqw;
    font-style: italic;
    font-weight: 700;
    font-synthesis: none;

    line-height: 0.82;
    letter-spacing: -0.025em;

    white-space: nowrap;

    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;

    text-shadow:
        0 0.09cqw 0.11cqw rgba(0, 20, 55, 0.29),
        0 0.2cqw 0.34cqw rgba(0, 20, 55, 0.15);

    opacity: 1;

    transform-origin: left center;

    animation:
        cttmNumberAppear 0.55s
        ease-out
        0.65s
        both;
}


/* ==========================================================
   SÉPARATEUR ROUGE VERTICAL
   ========================================================== */

.cttm-banner__separator {
    position: absolute;
    z-index: 3;

    top: 66%;
    left: 78.15%;

    width: max(3px, 0.17cqw);
    height: 27%;

    background: #ef3340;

    transform-origin: center top;

    animation:
        cttmSeparatorAppear 0.45s
        ease-out
        0.9s
        both;
}


/* ==========================================================
   ADRESSE DU CLUB
   ========================================================== */

.cttm-banner__address {
    position: absolute;
    z-index: 4;

    top: 65%;
    left: 79.65%;

    color: rgba(255, 255, 255, 0.92);

    font-family:
        "Barlow Condensed",
        "Arial Narrow",
        sans-serif;

    font-size: 1.34cqw;
    font-style: italic;
    font-weight: 300;
    font-synthesis: none;

    line-height: 1.28;
    letter-spacing: 0.02em;

    white-space: nowrap;
    text-transform: uppercase;

    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;

    text-shadow:
        0 1px 2px rgba(0, 20, 55, 0.28);

    opacity: 1;

    transform-origin: left center;

    animation:
        cttmAddressAppear 0.6s
        ease-out
        1.05s
        both;
}


/* ==========================================================
   ANIMATIONS DU BANDEAU
   ========================================================== */

/* Apparition du petit titre */
@keyframes cttmIntroAppear {
    0% {
        opacity: 0;
        transform: translateY(-1cqw);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Dessin du trait rouge horizontal */
@keyframes cttmIntroLineAppear {
    0% {
        transform: scaleX(0);
    }

    100% {
        transform: scaleX(1);
    }
}

/* Apparition de CTT MINEROIS */
@keyframes cttmNameAppear {
    0% {
        opacity: 0;
        filter: blur(4px);

        transform:
            scaleX(0.97)
            translateX(6cqw);
    }

    100% {
        opacity: 1;
        filter: blur(0);

        transform:
            scaleX(0.97)
            translateX(0);
    }
}

/* Apparition de L323 */
@keyframes cttmNumberAppear {
    0% {
        opacity: 0;

        transform:
            scaleX(0.95)
            translateY(1.8cqw);
    }

    100% {
        opacity: 1;

        transform:
            scaleX(0.95)
            translateY(0);
    }
}

/* Apparition de l’adresse */
@keyframes cttmAddressAppear {
    0% {
        opacity: 0;

        transform:
            scaleX(0.93)
            translateX(2cqw);
    }

    100% {
        opacity: 1;

        transform:
            scaleX(0.93)
            translateX(0);
    }
}

/* Dessin du séparateur vertical */
@keyframes cttmSeparatorAppear {
    0% {
        transform: scaleY(0);
    }

    100% {
        transform: scaleY(1);
    }
}


/* ==========================================================
   VERSION GSM
   Image : bandeau-gsm-sans-texte.webp
   Format original : 1290 × 645
   ========================================================== */

@media (max-width: 767px) and (orientation: portrait) {

    /*
     * Empêche une ancienne règle de masquer
     * les textes sur téléphone.
     */
    .cttm-banner__desktop {
        position: absolute;
        z-index: 2;

        inset: 0;

        display: block !important;
        overflow: hidden;

        opacity: 1;
        visibility: visible;
    }

    /* ------------------------------------------------------
       Petit titre sur GSM
       ------------------------------------------------------ */

    .cttm-banner__intro {
        top: 6.0%;
        left: 4.3%;

        display: block !important;

        max-width: 68%;

        font-size: 4.15cqw;
        line-height: 1.1;

        white-space: nowrap;

        opacity: 1;
        visibility: visible;
    }

    .cttm-banner__intro::after {
        width: 43%;
        height: max(2px, 0.28cqw);
        margin-top: 1.25cqw;
    }

    /* ------------------------------------------------------
       CTT MINEROIS sur GSM
       ------------------------------------------------------ */

    .cttm-banner__name {
        top: 22%;
        left: 4%;

        font-size: 17.6cqw;
        font-weight: 700;
        line-height: 0.78;
        letter-spacing: -0.03em;

        transform-origin: left center;
    }

    /* ------------------------------------------------------
       L323 sur GSM
       ------------------------------------------------------ */

    .cttm-banner__number {
        top: 51%;
        left: 60.5%;

        font-size: 10.8cqw;
        font-weight: 700;
        line-height: 0.8;
        letter-spacing: -0.025em;

        transform-origin: left center;
    }

    /* ------------------------------------------------------
       Séparateur rouge sur GSM
       ------------------------------------------------------ */

    .cttm-banner__separator {
        top: 69%;
        left: 63.4%;

        width: max(3px, 0.35cqw);
        height: 21%;
    }

    /* ------------------------------------------------------
       Adresse sur GSM
       ------------------------------------------------------ */

    .cttm-banner__address {
        top: 69%;
        left: 65.7%;

        font-size: 2.55cqw;
        line-height: 1.34;
        letter-spacing: 0.015em;

        transform-origin: left center;
    }
}


/* ==========================================================
   MENU BURGER AVEC ARRIVÉE EN REBONDS
   ========================================================== */

@media (max-width: 991.98px) {

    .container-header .navbar-toggler {
        position: absolute;
        z-index: 20;

        top: clamp(10px, 3vw, 22px);
        right: clamp(10px, 3vw, 22px);
    }

    .container-header .navbar-toggler.cttm-burger-bounce {
        transform-origin: center;

        animation:
            cttmBurgerBounce 0.9s
            cubic-bezier(0.22, 0.8, 0.3, 1)
            both;
    }
}

/* Rebond du burger */
@keyframes cttmBurgerBounce {
    0% {
        opacity: 0;

        transform:
            translateY(-65px)
            scale(0.75)
            rotate(-8deg);
    }

    48% {
        opacity: 1;

        transform:
            translateY(8px)
            scale(1.06)
            rotate(3deg);
    }

    65% {
        transform:
            translateY(-5px)
            scale(0.97)
            rotate(-2deg);
    }

    80% {
        transform:
            translateY(3px)
            scale(1.02)
            rotate(1deg);
    }

    92% {
        transform:
            translateY(-1px)
            scale(0.99)
            rotate(0);
    }

    100% {
        opacity: 1;

        transform:
            translateY(0)
            scale(1)
            rotate(0);
    }
}


/* ==========================================================
   ACCESSIBILITÉ
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    .cttm-banner__intro,
    .cttm-banner__intro::after,
    .cttm-banner__name,
    .cttm-banner__number,
    .cttm-banner__separator,
    .cttm-banner__address,
    .container-header .navbar-toggler.cttm-burger-bounce {
        animation: none !important;

        opacity: 1 !important;
        filter: none !important;
    }

    .cttm-banner__intro,
    .cttm-banner__intro::after,
    .cttm-banner__separator {
        transform: none !important;
    }

    .cttm-banner__name {
        transform:
            scaleX(0.97) !important;
    }

    .cttm-banner__number {
        transform:
            scaleX(0.95) !important;
    }

    .cttm-banner__address {
        transform:
            scaleX(0.93) !important;
    }

    .container-header .navbar-toggler.cttm-burger-bounce {
        transform: none !important;
    }
}

/* ==========================================================
   VOILE LUMINEUX MOBILE SUR L’ENSEMBLE DU BANDEAU

   Le voile traverse l’image de gauche à droite, puis attend
   plusieurs secondes avant de recommencer.
   ========================================================== */

/*
 * Le bandeau possède déjà position: relative et overflow: hidden.
 * Le pseudo-élément est placé entre l’image et les textes.
 */
.cttm-banner::after {
    content: "";

    position: absolute;
    z-index: 1;

    /*
     * Le voile est volontairement plus large et plus haut
     * que le bandeau pour éviter de voir ses limites.
     */
    top: -45%;
    bottom: -45%;
    left: -45%;

    width: 30%;

    /*
     * Dégradé lumineux incliné.
     * Les bords très transparents donnent un passage doux.
     */
    background:
        linear-gradient(
            105deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.025) 20%,
            rgba(255, 255, 255, 0.08) 38%,
            rgba(255, 255, 255, 0.22) 50%,
            rgba(255, 255, 255, 0.08) 62%,
            rgba(255, 255, 255, 0.025) 80%,
            rgba(255, 255, 255, 0) 100%
        );

    /*
     * Le flou évite l’apparence d’une barre blanche nette.
     */
    filter: blur(10px);

    opacity: 0;

    transform:
        translateX(0)
        skewX(-12deg);

    pointer-events: none;

    /*
     * Cycle complet de 9 secondes :
     * environ 1,5 seconde de passage lumineux,
     * puis une longue pause.
     */
    animation:
        cttmBannerLightSweep 9s
        ease-in-out
        -6.5s
        infinite;
}


/* ==========================================================
   ANIMATION DU VOILE

   De 0 à 74 % : invisible pendant la pause.
   De 75 à 94 % : passage de gauche à droite.
   De 95 à 100 % : nouvelle pause.
   ========================================================== */

@keyframes cttmBannerLightSweep {
    0%,
    74% {
        left: -45%;
        opacity: 0;
    }

    76% {
        left: -45%;
        opacity: 0.15;
    }

    80% {
        opacity: 0.65;
    }

    90% {
        opacity: 0.65;
    }

    94% {
        left: 120%;
        opacity: 0;
    }

    100% {
        left: 120%;
        opacity: 0;
    }
}


/* ==========================================================
   VERSION GSM

   Le voile est légèrement plus large et moins lumineux
   afin de rester discret sur le petit bandeau.
   ========================================================== */

@media (max-width: 767px) {
    .cttm-banner::after {
        top: -30%;
        bottom: -30%;
        left: -60%;

        width: 42%;

        background:
            linear-gradient(
                105deg,
                rgba(255, 255, 255, 0) 0%,
                rgba(255, 255, 255, 0.02) 20%,
                rgba(255, 255, 255, 0.07) 38%,
                rgba(255, 255, 255, 0.17) 50%,
                rgba(255, 255, 255, 0.07) 62%,
                rgba(255, 255, 255, 0.02) 80%,
                rgba(255, 255, 255, 0) 100%
            );

        filter: blur(7px);

        animation-duration: 9s;
    }

    @keyframes cttmBannerLightSweep {
        0%,
        74% {
            left: -60%;
            opacity: 0;
        }

        76% {
            left: -60%;
            opacity: 0.1;
        }

        80% {
            opacity: 0.55;
        }

        90% {
            opacity: 0.55;
        }

        94% {
            left: 125%;
            opacity: 0;
        }

        100% {
            left: 125%;
            opacity: 0;
        }
    }
}


/* ==========================================================
   ACCESSIBILITÉ

   Le voile est supprimé si le visiteur préfère limiter
   les animations.
   ========================================================== */

@media (prefers-reduced-motion: reduce) {
    .cttm-banner::after {
        display: none;
        animation: none !important;
    }
}

/* ==========================================================
   COLONNE GAUCHE et DROITE Sticky pour descendre avec l'ascenseur
   ========================================================== */
@media (min-width: 992px) {
    .container-sidebar-left > *:last-child,
    .container-sidebar-right > *:last-child {
        position: sticky;
        top: 20px;
        align-self: start;
    }
}

/* ==========================================================
   PAGE AVEC COLONNE GAUCHE, SANS COLONNE DROITE
   Alignement exact sur le bandeau de 1700 px
   ========================================================== */

@media (min-width: 992px) {

    body.has-sidebar-left:not(.has-sidebar-right) .site-grid {
        width: 100%;
        max-width: 1700px;
        margin-right: auto;
        margin-left: auto;
        padding-right: 0 !important;
        padding-left: 0 !important;

        grid-template-columns:
            320px
            minmax(0, 1fr);

        grid-template-areas:
            "banner banner"
            "top-a top-a"
            "top-b top-b"
            "side-l comp"
            "bot-a bot-a"
            "bot-b bot-b";

        column-gap: 1rem;
    }

    body.has-sidebar-left:not(.has-sidebar-right)
    .container-sidebar-left {
        grid-area: side-l;

        width: 100%;
        min-width: 0;
        max-width: none;

        margin: 0;
        padding: 0;
    }

    body.has-sidebar-left:not(.has-sidebar-right)
    .container-sidebar-left > * {
        width: 100%;
        max-width: 100%;

        margin-right: 0;
        margin-left: 0;
    }

    body.has-sidebar-left:not(.has-sidebar-right)
    .container-component {
        grid-area: comp;

        width: 100%;
        min-width: 0;
        max-width: none;

        margin: 0;
        padding-right: 0;
        padding-left: 0;
    }
}



/* ==========================================================
   PAGE D’ACCÈS À L’ADMINISTRATION
   ========================================================== */

.cttm-admin-intro,
.cttm-admin-login {
    box-sizing: border-box;
}


/* Bloc de présentation */

.cttm-admin-intro {
    width: min(100%, 620px);
    margin: 30px auto 22px;
    padding: clamp(24px, 5vw, 40px);

    border: 1px solid #d9e3ef;
    border-radius: 14px;

    color: #243247;
    text-align: center;

    background: #ffffff;

    box-shadow:
        0 12px 35px rgba(6, 31, 74, 0.12);
}


/* Icône cadenas */

.cttm-admin-intro__icon {
    display: flex !important;
    align-items: center;
    justify-content: center;

    width: 64px !important;
    height: 64px !important;
    margin: 0 auto 20px !important;
    padding: 0 !important;

    border-radius: 18px;

    color: #ffffff;

    background:
        linear-gradient(145deg, #12478d, #061f4a);

    box-shadow:
        0 8px 20px rgba(11, 46, 111, 0.24);
}


/* Force la taille du SVG pour neutraliser les règles Joomla */

.cttm-admin-intro__icon svg {
    display: block !important;

    width: 30px !important;
    height: 30px !important;
    max-width: 30px !important;
    max-height: 30px !important;

    margin: 0 !important;

    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* Titre */

.cttm-admin-intro h2 {
    margin: 0 0 14px;

    color: #0b2e6f;

    font-size: clamp(25px, 4vw, 34px);
    font-weight: 750;
    line-height: 1.2;
}


.cttm-admin-intro h2::after {
    content: "";

    display: block;

    width: 56px;
    height: 3px;
    margin: 13px auto 0;

    border-radius: 3px;

    background: #ef3340;
}


/* Textes */

.cttm-admin-intro p {
    max-width: 520px;
    margin: 8px auto;

    color: #627087;

    font-size: 16px;
    line-height: 1.65;
}


/* ==========================================================
   FORMULAIRE DE CONNEXION
   ========================================================== */

.cttm-admin-login {
    box-sizing: border-box;

    width: min(100%, 620px);
    margin: 0 auto 40px;
    padding: clamp(24px, 5vw, 36px);

    border: 1px solid #d9e3ef;
    border-radius: 14px;

    background: #ffffff;

    box-shadow:
        0 12px 35px rgba(6, 31, 74, 0.12);
}


/* Module de connexion Joomla */

.cttm-admin-login .mod-login {
    margin: 0;
    padding: 0;
}


/* Cadre intérieur éventuellement généré par Joomla */

.cttm-admin-login .mod-login,
.cttm-admin-login .mod-login__form,
.cttm-admin-login fieldset {
    width: 100%;
    box-sizing: border-box;
}


/* Groupes de champs */

.cttm-admin-login .control-group {
    width: 100%;
    margin-bottom: 15px;
}


/* ==========================================================
   CHAMPS ET GROUPES D’ICÔNES
   ========================================================== */

.cttm-admin-login .input-group {
    display: flex;
    align-items: stretch;

    width: 100%;
    min-height: 44px;
}


/* Champs utilisateur et mot de passe */

.cttm-admin-login input[type="text"],
.cttm-admin-login input[type="password"],
.cttm-admin-login .form-control {
    box-sizing: border-box;

    width: 100%;
    height: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0 13px;

    border: 1px solid #cbd7e6;
    border-radius: 7px;

    color: #243247;
    background: #f5f8fc;

    font-size: 15px;
    line-height: 42px;
}


/* Champ placé dans un groupe avec une icône */

.cttm-admin-login .input-group > .form-control {
    position: relative;
    z-index: 1;

    flex: 1 1 auto;

    width: 1%;
    min-width: 0;

    border-radius: 7px 0 0 7px;
}


/* Zone située à droite du champ */

.cttm-admin-login .input-group-text,
.cttm-admin-login .input-password-toggle,
.cttm-admin-login .input-group > button {
    box-sizing: border-box;

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

    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;

    flex: 0 0 44px;

    margin: 0;
    padding: 0;

    border: 1px solid #cbd7e6;
    border-left: 0;
    border-radius: 0 7px 7px 0;

    color: #0b2e6f;
    background: #ffffff;

    line-height: 1;

    box-shadow: none;
}


/* Icônes utilisateur et affichage du mot de passe */

.cttm-admin-login .input-group-text svg,
.cttm-admin-login .input-password-toggle svg,
.cttm-admin-login .input-group > button svg,
.cttm-admin-login .icon-user,
.cttm-admin-login .icon-eye,
.cttm-admin-login .icon-eye-slash {
    display: block;

    width: 18px;
    height: 18px;

    margin: 0;
    padding: 0;

    line-height: 1;

    fill: currentColor;
}


/* Neutralise un éventuel décalage des icônes Joomla */

.cttm-admin-login .input-group-text span,
.cttm-admin-login .input-password-toggle span,
.cttm-admin-login .input-group > button span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 18px;
    height: 18px;

    margin: 0;
    padding: 0;

    line-height: 1;
}


/* ==========================================================
   ÉTAT ACTIF DES CHAMPS
   ========================================================== */

.cttm-admin-login input:focus,
.cttm-admin-login .form-control:focus {
    position: relative;
    z-index: 2;

    border-color: #12478d;

    outline: 0;

    box-shadow:
        0 0 0 3px rgba(18, 71, 141, 0.14);
}


/*
 * Harmonise aussi la bordure de l’icône lorsque
 * le champ correspondant reçoit le focus.
 */
.cttm-admin-login .input-group:focus-within .form-control,
.cttm-admin-login .input-group:focus-within .input-group-text,
.cttm-admin-login .input-group:focus-within .input-password-toggle,
.cttm-admin-login .input-group:focus-within > button {
    border-color: #12478d;
}


/* Évite que l’ombre du champ passe sous l’icône */

.cttm-admin-login .input-group:focus-within {
    border-radius: 7px;

    box-shadow:
        0 0 0 3px rgba(18, 71, 141, 0.14);
}

.cttm-admin-login .input-group:focus-within .form-control {
    box-shadow: none;
}


/* ==========================================================
   CASE « MAINTENIR LA CONNEXION »
   ========================================================== */

.cttm-admin-login input[type="checkbox"] {
    width: 16px;
    height: 16px;
    min-height: 0;

    margin: 0 7px 0 0;

    vertical-align: middle;

    accent-color: #0b2e6f;
}

.cttm-admin-login .form-check {
    display: flex;
    align-items: center;

    min-height: 24px;
}

.cttm-admin-login .form-check-label {
    margin: 0;

    color: #243247;

    line-height: 1.4;
}


/* ==========================================================
   BOUTON DE CONNEXION
   ========================================================== */

.cttm-admin-login .btn-primary {
    width: 100%;
    min-height: 44px;
    padding: 10px 20px;

    border: 1px solid #0b2e6f;
    border-radius: 8px;

    color: #ffffff;

    background: #0b2e6f;

    font-weight: 650;
    line-height: 1.4;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


.cttm-admin-login .btn-primary:hover,
.cttm-admin-login .btn-primary:focus-visible {
    border-color: #12478d;
    background: #12478d;
}


.cttm-admin-login .btn-primary:focus-visible {
    outline: 0;

    box-shadow:
        0 0 0 3px rgba(18, 71, 141, 0.18);
}


/* ==========================================================
   VERSION GSM
   ========================================================== */

@media (max-width: 600px) {

    .cttm-admin-intro,
    .cttm-admin-login {
        width: 100%;
    }

    .cttm-admin-intro {
        margin-top: 15px;
        padding: 24px 18px;
    }

    .cttm-admin-login {
        padding: 22px 18px;
    }

    .cttm-admin-intro__icon {
        width: 58px !important;
        height: 58px !important;
    }

    .cttm-admin-intro__icon svg {
        width: 27px !important;
        height: 27px !important;
        max-width: 27px !important;
        max-height: 27px !important;
    }

    .cttm-admin-login input[type="text"],
    .cttm-admin-login input[type="password"],
    .cttm-admin-login .form-control,
    .cttm-admin-login .input-group-text,
    .cttm-admin-login .input-password-toggle,
    .cttm-admin-login .input-group > button {
        height: 44px;
        min-height: 44px;
    }
}

/* Placer « Envie d'essayer ? » complètement à droite du menu */
@media (min-width: 992px) {

    .container-header .mod-menu > li:has(> a.cttm-menu-essai) {
        margin-left: auto !important;
    }
}

/* ==========================================================
   BOUTON « ENVIE D’ESSAYER ? » DANS LE MENU PRINCIPAL
   ========================================================== */

.container-header .mod-menu > li > a.cttm-menu-essai {
    margin: 5px 10px;
    padding: 10px 18px;

    color: #ffffff !important;
    background: #d93636;

    border: 1px solid #ee5960;
    border-radius: 7px;

    font-weight: 800;
    line-height: 1.2;

    box-shadow: 0 4px 12px rgba(217, 54, 54, 0.25);

    transition:
        background 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.container-header .mod-menu > li:hover > a.cttm-menu-essai,
.container-header .mod-menu > li > a.cttm-menu-essai:hover,
.container-header .mod-menu > li > a.cttm-menu-essai:focus-visible,
.container-header .mod-menu > li.active > a.cttm-menu-essai {
    color: #ffffff !important;
    background: #ef4650 !important;
    border-color: #ff6b73 !important;

    transform: translateY(-2px);

    box-shadow:
        0 7px 18px rgba(217, 54, 54, 0.35),
        0 0 0 3px rgba(255, 255, 255, 0.08);
}


/* ==========================================================
   PC — POUSSER « ENVIE D’ESSAYER ? » À L’EXTRÊME DROITE
   ========================================================== */

@media (min-width: 1102px) {

    /* Le nav et le menu doivent utiliser toute la largeur disponible */
    .container-header .container-nav nav {
        width: 100% !important;
        flex: 1 1 100% !important;
    }

    .container-header .container-nav .mod-menu {
        display: flex !important;
        width: 100% !important;
        max-width: none !important;
        flex: 1 1 100% !important;
    }

    /* Le dernier bouton absorbe tout l'espace libre avant lui */
    .container-header .mod-menu > li:has(> a.cttm-menu-essai) {
        margin-left: auto !important;
    }
}


/* Version mobile */
@media (max-width: 991.98px) {

    .container-header .mod-menu > li > a.cttm-menu-essai {
        display: flex;
        justify-content: center;

        width: calc(100% - 20px);
        margin: 10px;

        text-align: center;
    }
}

/* ==========================================================
   BOUTON « LIENS UTILES » EN HAUT À DROITE DU BANDEAU
   ========================================================== */

@media (min-width: 992px) {

    /* Le header devient le repère de positionnement */
    .container-header {
        position: relative !important;
    }

    /* Les conteneurs intermédiaires ne doivent pas servir de repère */
    .container-header .container-nav,
    .container-header .mod-menu {
        position: static !important;
    }

    /* Déplacement de l’élément de menu complet */
.container-header .mod-menu > li:has(> a.cttm-liens-utiles) {
    position: absolute !important;
    z-index: 50;

    top: calc(14px - min(16.25vw, 276px));
    right: 18px;

    display: block !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

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

        display: block !important;

        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;

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

    /* Présentation du bouton */
    .container-header .mod-menu > li > a.cttm-liens-utiles {
        position: static !important;

        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        gap: 7px;

        width: auto !important;
        min-width: max-content !important;
        min-height: 36px;

        margin: 0 !important;
        padding: 7px 14px !important;

        color: rgba(255, 255, 255, 0.94) !important;
        background: rgba(6, 31, 74, 0.76) !important;

        border: 1px solid rgba(255, 255, 255, 0.4) !important;
        border-radius: 18px !important;

        font-size: 12px;
        font-weight: 800;
        line-height: 1;
        letter-spacing: 0.04em;
        white-space: nowrap;
        text-decoration: none;
        text-transform: uppercase;

        box-shadow: 0 4px 13px rgba(0, 16, 46, 0.25);

        backdrop-filter: blur(7px);
        -webkit-backdrop-filter: blur(7px);

        transform: none;

        transition:
            background 0.2s ease,
            border-color 0.2s ease,
            transform 0.2s ease,
            box-shadow 0.2s ease;
    }

    /* Petite icône */
    .container-header .mod-menu > li > a.cttm-liens-utiles::before {
        content: "↗";

        color: #ff5963;
        font-size: 15px;
        font-weight: 900;
        line-height: 1;
    }

    /* Survol */
    .container-header .mod-menu > li:hover > a.cttm-liens-utiles,
    .container-header .mod-menu > li > a.cttm-liens-utiles:hover,
    .container-header .mod-menu > li > a.cttm-liens-utiles:focus-visible {
        color: #ffffff !important;
        background: rgba(11, 46, 111, 0.96) !important;
        border-color: rgba(255, 255, 255, 0.75) !important;

        transform: translateY(-2px);

        box-shadow: 0 7px 17px rgba(0, 16, 46, 0.32);
    }

    /* Position du sous-menu éventuel */
    .container-header .mod-menu > li:has(> a.cttm-liens-utiles)
    > .mod-menu__sub {
        right: 0 !important;
        left: auto !important;
    }
}


/* ==========================================================
   VERSION GSM : LIEN NORMAL DANS LE MENU BURGER
   ========================================================== */

@media (max-width: 991.98px) {

    .container-header .mod-menu > li:has(> a.cttm-liens-utiles) {
        position: static !important;

        display: list-item !important;

        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .container-header .mod-menu > li > a.cttm-liens-utiles {
        position: static !important;

        display: flex !important;
        align-items: center;
        justify-content: flex-start;

        width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 10px 15px !important;

        color: #ffffff !important;
        background: transparent !important;

        border: 0 !important;
        border-radius: 0 !important;

        box-shadow: none !important;

        font-size: inherit;
        font-weight: inherit;
        letter-spacing: normal;
        white-space: normal;
        text-transform: none;

        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .container-header .mod-menu > li > a.cttm-liens-utiles::before {
        content: "↗";

        margin-right: 7px;

        color: #ff5963;
        font-weight: 900;
    }
}

/* =========================================================
   GSM : masquer les colonnes gauche et droite
   sauf sur la page d'accueil
   ========================================================= */
@media (max-width: 768px) {

    body:not(.home-page) .container-sidebar-left,
    body:not(.home-page) .container-sidebar-right {
        display: none !important;
    }

}

/* ==========================================================
   MASQUER LE LOGO CASSIOPEIA DU TEMPLATE
   Le véritable bandeau CTT Minerois est géré séparément.
   ========================================================== */

.container-header .navbar-brand {
    display: none !important;
}

/* Supprimer l'espace laissé par le bloc logo Cassiopeia */
.container-header > .grid-child:has(.navbar-brand) {
    display: none !important;
}

/* ==========================================================
   PAGE SANS COLONNE GAUCHE NI DROITE
   Le contenu central utilise toute la largeur disponible
   ========================================================== */

@media (min-width: 992px) {

    body:not(.has-sidebar-left):not(.has-sidebar-right) .site-grid {
        display: grid !important;

        width: calc(100% - 20px) !important;
        max-width: 1700px !important;

        margin-right: auto !important;
        margin-left: auto !important;

        /* Neutralise la grille 6 colonnes native de Cassiopeia */
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-areas: none !important;

        column-gap: 0 !important;
        row-gap: 0 !important;
    }

    body:not(.has-sidebar-left):not(.has-sidebar-right)
    .site-grid > .grid-child {
        grid-area: auto !important;
        grid-column: 1 / -1 !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;

        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    body:not(.has-sidebar-left):not(.has-sidebar-right)
    .container-component {
        grid-area: auto !important;
        grid-column: 1 / -1 !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;

        margin: 0 !important;
    }
}

/* ==========================================================
   GSM — CONTENU PRINCIPAL BORD À BORD
   ========================================================== */

@media (max-width: 767.98px) {

    html body#top .site-grid > .container-component {
        grid-area: auto !important;
        grid-column: 1 / -1 !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;

        margin: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}


/* ==========================================================
   ==========================================================
   MENU — ESPACE JOUEURS
   ==========================================================
   ========================================================== */


/* Position lorsque la classe est placée sur le <li> */

.container-header .mod-menu li.menu-espace-joueurs {
    margin-left: 10px;
}


/* ==========================================================
   BOUTON — STYLE COMMUN PC ET GSM
   ========================================================== */

.container-header .mod-menu a.menu-espace-joueurs,
.container-header .mod-menu li.menu-espace-joueurs > a {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;

    box-sizing: border-box !important;

    width: 100px !important;
    min-width: 100px !important;
    min-height: 42px !important;

    margin-left: 10px !important;
    padding: 5px 8px !important;

    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 6px !important;

    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.08) !important;

    font-size: 0 !important;
    line-height: 1 !important;

    text-align: center !important;
    text-decoration: none !important;
    white-space: normal !important;

    overflow: hidden !important;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease !important;
}


/* Masque le texte original éventuellement placé dans un span */

.container-header .mod-menu a.menu-espace-joueurs > span,
.container-header .mod-menu li.menu-espace-joueurs > a > span {
    display: none !important;
}


/* ==========================================================
   ICÔNE UTILISATEUR
   ========================================================== */

.container-header .mod-menu a.menu-espace-joueurs::before,
.container-header .mod-menu li.menu-espace-joueurs > a::before {
    content: "" !important;

    display: block !important;

    width: 15px !important;
    height: 15px !important;

    flex: 0 0 15px !important;

    border: 0 !important;
    background-color: transparent !important;

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E") !important;

    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 15px 15px !important;
}


/* ==========================================================
   TEXTE SUR DEUX LIGNES
   ========================================================== */

.container-header .mod-menu a.menu-espace-joueurs::after,
.container-header .mod-menu li.menu-espace-joueurs > a::after {
    content: "Espace\A joueurs" !important;

    position: static !important;
    inset: auto !important;

    display: block !important;

    width: auto !important;
    height: auto !important;
    min-width: 0 !important;

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

    border: 0 !important;
    background: none !important;
    box-shadow: none !important;

    color: #ffffff !important;

    font-family: inherit !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.05 !important;

    text-align: center !important;
    white-space: pre-line !important;

    opacity: 1 !important;
    visibility: visible !important;

    transform: none !important;
}


/* ==========================================================
   SURVOL
   ========================================================== */

.container-header .mod-menu a.menu-espace-joueurs:hover,
.container-header .mod-menu a.menu-espace-joueurs:focus-visible,
.container-header .mod-menu li.menu-espace-joueurs > a:hover,
.container-header .mod-menu li.menu-espace-joueurs > a:focus-visible {
    color: #ffffff !important;

    border-color: rgba(255, 255, 255, 0.7) !important;
    background: rgba(255, 255, 255, 0.16) !important;

    text-decoration: none !important;
}


/* ==========================================================
   MENU MOBILE
   ACCUEIL À GAUCHE — ESPACE JOUEURS À DROITE
   ========================================================== */

@media (max-width: 991.98px) {

    /* Menu organisé sur deux colonnes */
    .container-header .mod-menu {
        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            auto !important;

        grid-auto-flow: row !important;
        align-items: center !important;

        width: 100% !important;
    }


    /* Tous les éléments occupent normalement toute la largeur */
    .container-header .mod-menu > li {
        grid-column: 1 / -1;
    }


    /* ACCUEIL : première colonne de la première ligne */
    .container-header .mod-menu > li:first-child {
        grid-column: 1 !important;
        grid-row: 1 !important;

        justify-self: start !important;
        align-self: center !important;
    }


    /* Espace joueurs : deuxième colonne de la première ligne */
    .container-header .mod-menu > li.menu-espace-joueurs,
    .container-header .mod-menu > li:has(> a.menu-espace-joueurs) {
        grid-column: 2 !important;
        grid-row: 1 !important;

        justify-self: end !important;
        align-self: center !important;

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


    /* Bouton identique à celui du PC */
    .container-header .mod-menu a.menu-espace-joueurs,
    .container-header .mod-menu li.menu-espace-joueurs > a {
        width: 100px !important;
        min-width: 100px !important;
        min-height: 42px !important;

        margin: 0 !important;
        padding: 5px 8px !important;

        white-space: normal !important;
        overflow: hidden !important;
    }


    /* Texte toujours sur deux lignes */
    .container-header .mod-menu a.menu-espace-joueurs::after,
    .container-header .mod-menu li.menu-espace-joueurs > a::after {
        content: "Espace\A joueurs" !important;

        font-size: 11px !important;
        line-height: 1.05 !important;

        text-align: center !important;
        white-space: pre-line !important;
    }
}