/* ===================================================================
   Charte graphique Mathemathieu — surcouche de Cassiopeia Extended
   Reconstruite à partir de l'analyse du template JoomSpirit original

   CE FICHIER HABILLE LA PAGE : en-tête, menu, largeurs, colonnes,
   fil d'Ariane, pied de page, pages de connexion et d'erreur.

   Ce qui habille le TEXTE des articles — paragraphes, listes,
   citations, classes couleur (.bg-orange, .text-blue…) — est dans
   content.css, à côté. Il en est séparé parce que l'éditeur de
   l'administration l'importe lui aussi, via editor.css : c'est ce qui
   donne à TinyMCE le même rendu qu'au site. Une règle ajoutée ici ne
   se verra donc pas pendant la rédaction ; si elle concerne le corps
   d'un article, sa place est dans content.css.

   Ordre de chargement (mathemathieu-assets.php) : content.css puis
   custom.css, qui garde ainsi le dernier mot.
   =================================================================== */

/* --- Logo / titre du site : police Arizonia, centré --- */
.navbar-brand {
    display: block;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.brand-logo {
    font-family: 'Arizonia', cursive;
    font-size: 52px;
    line-height: 1.2;
}

/* --- Menu principal : police Quicksand, centré --- */
.mod-menu {
    font-family: 'Quicksand', sans-serif;
    justify-content: center;
    /* Trait fin au-dessus de la barre de menu (valeur exacte de
       l'original : template.css ligne 480-484, .drop-down > ul) */
    border-top: 1px solid rgba(255, 255, 255, 0.35);
}

/* Les entrées "Classes/Divers/Articles" sont des séparateurs Joomla
   (pas de vrais liens) : le module de menu leur ajoute automatiquement
   un bouton + chevron pour l'ouverture au clic. L'ancien template
   n'avait pas ce chevron (menu ouvert au survol uniquement) */
.container-header .mod-menu > li.parent > button .icon-chevron-down {
    display: none;
}

/* Liens du menu principal.
   Les onglets sans lien ("Classes", "Divers", "Articles") sont des
   séparateurs Joomla rendus dans un <button>, d'où sa présence dans
   chaque sélecteur à côté de <a>.
   Espacements repris de l'ancien : .drop-down li{padding:0 15px} et
   .drop-down li a{padding:12px 4px 12px 6px} (template.css l.486-567) */
.container-header .mod-menu > li {
    padding: 0 15px;
}

.container-header .mod-menu > li + li {
    margin-left: 0;
}

.container-header .mod-menu > li > a,
.container-header .mod-menu > li > button,
.container-header .mod-menu > li > span {
    display: block;
    padding: 12px 4px 12px 6px;
    color: #CCCCCC;
    font-weight: normal;
    text-decoration: none;
    border-top: 1px solid transparent;
    transition: all 0.3s ease-in-out;
}

/* Onglet actif ou survolé : trait fin AU-DESSUS de l'entrée, sous le
   trait du bandeau. Cassiopeia place au contraire un trait en dessous
   via ::after, qu'on neutralise. */
.container-header .mod-menu > li::after {
    content: none;
}

.container-header .mod-menu > li.active > a,
.container-header .mod-menu > li.active > button,
.container-header .mod-menu > li.active > span,
.container-header .mod-menu > li:hover > a,
.container-header .mod-menu > li:hover > button,
.container-header .mod-menu > li:hover > span {
    color: #E0E0E0;
    border-top-color: #E0E0E0;
}

/* Sous-menus déroulants — uniquement en desktop, où le panneau est
   blanc. En mobile le menu s'affiche sur fond noir et Cassiopeia met
   déjà le texte en blanc ; il ne faut surtout pas le forcer en noir.
   Spécificité alignée sur .container-header .mod-menu a de Cassiopeia
   (color: currentColor), sans quoi la règle reste sans effet. */
@media (min-width: 992px) {
    .container-header .mod-menu .mod-menu__sub a,
    .container-header .mod-menu .mod-menu__sub span.mod-menu__separator {
        color: #000000;
    }
}

.mod-menu__sub li.active > a,
.mod-menu__sub li:hover > a,
.mod-menu__sub li:hover > span.mod-menu__separator {
    color: #0B7CBD;
}

/* --- En-tête fixe uniquement sur le menu (pas le logo), comme l'original --- */
.container-nav {
    position: sticky;
    top: 0;
    z-index: 1030;
    background-color: #030100;
}

/* --- Ombre sous tout le bandeau (valeur exacte de l'original : dark-shadow) --- */
.container-header {
    box-shadow: 0 0 8px 7px rgba(0, 0, 0, 0.85);
    position: relative;
    z-index: 1031;
}

/* --- Police générale du contenu --- */
body {
    font-family: 'Open Sans', sans-serif;
}

/* --- Largeurs de page, mesurées sur l'ancien site ---
   wrapper 1200px = colonne latérale 200px + gouttière 40px + contenu 960px.
   Cassiopeia part sur 4 colonnes de 19.875rem (~1308px au total, colonne
   latérale à 318px), d'où une page nettement plus large et une colonne
   latérale surdimensionnée. On réaligne sur les valeurs d'origine.
   Uniquement au-delà de 992px : en dessous, la grille Cassiopeia empile
   les zones et des colonnes fixes déborderaient. */
.grid-child {
    max-width: 1200px;
}

@media (min-width: 992px) {
    .site-grid {
        grid-column-gap: 40px;
        grid-template-columns:
            [full-start] minmax(0, 1fr)
            [main-start] 200px repeat(3, minmax(0, 293.33px))
            [main-end] minmax(0, 1fr) [full-end];
    }
}

/* --- Titres d'articles (H1) ---
   Filet pointillé sous le titre, marges et interlettrage repris de
   template.css l.831-841 */
h1 {
    color: #196BBD;
    font-family: 'Quicksand', sans-serif;
    margin: 0 0 25px;
    padding: 0 0 14px 0;
    line-height: 1.4;
    letter-spacing: -0.3px;
    border-bottom: 1px dotted #bbb;
}

/* --- Titres H2 (contenu uniquement : les titres de modules restent neutres) --- */
h2 {
    color: #663D26;
    font-family: 'Quicksand', sans-serif;
}

/* --- Sous-menus déroulants au survol de la souris, comme l'original ---
   :focus-within reproduit le comportement clavier (Tab) de l'ancien
   template (.drop-down li:hover > ul, .drop-down li:focus > ul) */
@media (min-width: 992px) {
    .mod-menu > li.parent:hover > ul,
    .mod-menu > li.parent:focus-within > ul {
        display: block !important;
    }
}

/* --- Sous-menus de niveau 2 et 3, en cascade vers la droite ---
   Équivalent de .drop-down li ul ul (template.css l.519-523) de l'ancien.

   Attention : menu.js (l.192-207) pose aria-hidden="false" sur TOUS les
   <ul> descendants d'un seul coup quand on clique sur un onglet. Si on
   laissait cet attribut piloter l'affichage, un clic ouvrirait toutes les
   cascades superposées. Sur desktop on force donc les niveaux imbriqués à
   rester fermés, et on les ouvre uniquement au survol / focus clavier.
   Sous 992px, rien n'est touché : le comportement Joomla au clic reste. */
@media (min-width: 992px) {
    .container-header .mod-menu .mod-menu__sub li {
        position: relative;
    }

    .container-header .mod-menu .mod-menu__sub .mod-menu__sub {
        display: none !important;
        position: absolute;
        top: 0;
        left: 100%;
        z-index: 1002;
    }

    .container-header .mod-menu .mod-menu__sub li.parent:hover > .mod-menu__sub,
    .container-header .mod-menu .mod-menu__sub li.parent:focus-within > .mod-menu__sub {
        display: block !important;
    }

    /* Boîte du sous-menu : valeurs de .drop-down li ul
       (template.css l.502-517). Uniquement en desktop : sous 992px
       l'ancien remettait tout à plat (media_queries.css l.221-236)
       et Cassiopeia affiche déjà un accordéon simple. */
    .container-header .mod-menu .mod-menu__sub {
        width: 180px;
        min-width: 0;
        padding: 7px;
        border: 1px solid #ccc;
        border-radius: 6px;
        background: rgba(255, 255, 255, 0.85);
        box-shadow: 0 0 0 5px rgba(190, 190, 190, 0.35);
        font-size: 85%;
        transition: all 0.3s ease-in-out;
    }

    /* la cascade ne rétrécit pas davantage le texte à chaque niveau */
    .container-header .mod-menu .mod-menu__sub .mod-menu__sub {
        font-size: 100%;
    }

    .container-header .mod-menu .mod-menu__sub:hover {
        background: rgba(255, 255, 255, 0.95);
        box-shadow: 0 2px 4px 5px rgba(130, 130, 130, 0.30);
    }

    /* Entrées du sous-menu, séparées par un pointillé */
    .container-header .mod-menu .mod-menu__sub li > a,
    .container-header .mod-menu .mod-menu__sub li > span.mod-menu__separator {
        display: block;
        margin: 0 3px;
        padding: 9px 12px 8px 12px;
        border-top: 1px dashed #ddd;
        text-align: left;
    }

    .container-header .mod-menu .mod-menu__sub li:first-child > a,
    .container-header .mod-menu .mod-menu__sub li:first-child > span.mod-menu__separator {
        border-top: none;
    }
}

/* --- Respiration entre le bandeau et le début du contenu --- */
.container-header {
    padding-bottom: 0.5rem;
}

/* ===================================================================
   Contenu : conventions de l'ancien template
   =================================================================== */

/* Graisse des titres : l'ancien avait h1..h6 en normal, seul h3 en gras
   (template.css l.824-829 et l.872-876). Cassiopeia les met à 700. */
h1, h2, h4, h5, h6 {
    font-weight: normal;
}

h3 {
    font-weight: bold;
}

/* Respiration verticale sous le bandeau, mesurée sur l'ancien :
   25px entre le bandeau et le premier élément, puis 39px entre le fil
   d'Ariane et le titre. Cassiopeia n'en laissait que 12px dans les deux
   cas. .container-component étant en flex, les marges ne fusionnent pas :
   les 27px ci-dessous s'ajoutent aux 12px déjà appliqués entre frères. */
.container-component > *:first-child,
.container-sidebar-left > *:first-child,
.container-sidebar-left .sidebar-left:first-child,
.container-sidebar-right > *:first-child,
.container-sidebar-right .sidebar-right:first-child {
    margin-top: 25px;
}

.mod-breadcrumbs__wrapper {
    margin-bottom: 27px;
}

/* Tailles de titres à toutes les largeurs.
   fonts.css ne les applique qu'au-delà de 1200px : entre 992 et 1200px
   les titres retombaient sur les valeurs Bootstrap (h1 à 2.5rem au lieu
   de 1.05rem), d'où un saut visuel sur les écrans intermédiaires.
   Corrigé ici plutôt que dans fonts.css car Joomla charge en réalité
   fonts.min.css, qu'une modification de la source ne régénère pas. */
h1, .h1 { font-size: var(--h1size); }
h2, .h2 { font-size: var(--h2size); }
h3, .h3 { font-size: var(--h3size); }

/* Liens non soulignés, soulignés seulement au survol
   (template.css l.927-944). Cassiopeia fait l'inverse et souligne en
   permanence via a:not([class]), d'où ce sélecteur dans la surcharge. */
a,
a:not([class]) {
    text-decoration: none;
}

a:hover,
a:not([class]):hover {
    text-decoration: underline;
}

/* Fil d'Ariane : discret et sans fond, comme l'ancien
   (template.css : .breadcrumb{background:transparent;font-size:90%}).
   Cassiopeia ajoute .breadcrumb{background-color:#00000008} et le
   module pose les utilitaires px-3/py-2, qui sont en !important. */
.mod-breadcrumbs.breadcrumb {
    padding: 0 !important;
    background-color: transparent;
    font-size: 90%;
}

.mod-breadcrumbs.breadcrumb,
.mod-breadcrumbs .breadcrumb-item,
.mod-breadcrumbs .breadcrumb-item.active,
.mod-breadcrumbs a {
    color: #999;
}


/* Paragraphes et listes : déplacés dans content.css, partagé avec
   l'éditeur de l'administration (voir l'en-tête de ce fichier). */

/* Informations d'article (auteur, date, catégorie, clics).
   .text-muted est une classe utilitaire Bootstrap déclarée ainsi :
   .text-muted{color:var(--secondary-color)!important} — d'où le
   !important ici, sans lequel aucune surcharge ne passe, quelle que
   soit la spécificité. La couleur se transmet aux enfants par
   héritage, inutile de les cibler un par un.
   Taille : 90%, la valeur qu'avait l'ancien site (10,8px). */
.article-info.text-muted {
    color: #999 !important;
    font-size: 90%;
}

/* Citations : déplacées dans content.css, partagé avec l'éditeur. */

/* ===================================================================
   Menu mobile : bouton hamburger et panneau plein écran

   PRÉREQUIS CÔTÉ ADMINISTRATION : le module de menu doit utiliser le
   gabarit "collapse-default" (Module → Avancé → Autre modèle
   d'affichage). C'est lui qui fournit le <button class="navbar-toggler">
   et le conteneur .navbar-collapse. Tant qu'il n'est pas activé, tout
   ce bloc reste sans effet : il ne cible que des éléments absents.

   Aucun JavaScript ajouté : l'ouverture/fermeture est gérée par
   Bootstrap (livré avec Joomla) et les sous-menus par le script natif
   du module, celui-là même qu'on neutralise en desktop au profit du
   survol.
   =================================================================== */

/* Le gabarit enveloppe le menu dans <nav class="navbar">, qui se
   dimensionne sur son contenu (flex: 0 1 auto) : le menu ne faisait plus
   que 453px au lieu de 1188 et se retrouvait décalé à gauche, avec un
   trait de séparation raccourci. On lui rend toute la largeur, ce qui
   redonne au passage son sens au centrage de .mod-menu. */
.container-header .container-nav .navbar {
    flex: 1 1 auto;
    padding: 0;
}

/* Le gabarit fige le seuil à 768px (navbar-expand-md) alors que le menu
   de bureau démarre à 992px. On prolonge le hamburger jusqu'à 992px
   pour n'avoir qu'un seul seuil dans tout le template. */
@media (min-width: 768px) and (max-width: 991.98px) {
    .container-header .navbar-expand-md .navbar-toggler {
        display: block;
    }

    .container-header .navbar-expand-md .navbar-collapse:not(.show):not(.collapsing) {
        display: none !important;
    }
}

@media (max-width: 991.98px) {
    /* Logo et bouton sur une même ligne : le logo occupe un .grid-child,
       le menu un autre. On passe le bandeau en flex pour les mettre côte
       à côte, au lieu de les empiler comme en desktop. */
    .container-header {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    .container-header > .grid-child:not(.container-nav) {
        flex: 1 1 auto;
        width: auto;
        margin: 0;
        padding-left: 24px;
    }

    .container-header > .grid-child.container-nav {
        flex: 0 0 auto;
        width: auto;
        margin: 0;
        padding-right: 24px;
    }

    /* Le logo est centré en desktop ; ici il s'aligne à gauche */
    .container-header .navbar-brand {
        width: auto;
        margin: 0;
    }

    .container-header .brand-logo {
        font-size: 34px;
    }

    .container-header .navbar {
        justify-content: flex-end;
        padding: 0;
    }

    .container-header .navbar-toggler {
        padding: 10px;
        color: #CCCCCC;
        background: none;
        border: 1px solid rgba(255, 255, 255, 0.35);
        border-radius: 4px;
    }

    /* Icône dessinée en CSS plutôt qu'en glyphe FontAwesome : celui-ci
       est chargé en lazy-stylesheet, or ce bouton est la seule façon
       d'accéder à la navigation sur mobile. Le <span> devient la barre
       du milieu, ses deux pseudo-éléments les barres du haut et du bas. */
    .container-header .navbar-toggler .icon-menu {
        display: block;
        position: relative;
        width: 22px;
        height: 2px;
        background: currentColor;
    }

    .container-header .navbar-toggler .icon-menu::before,
    .container-header .navbar-toggler .icon-menu::after {
        content: "";
        position: absolute;
        left: 0;
        width: 22px;
        height: 2px;
        background: currentColor;
        transition: transform 0.25s ease;
    }

    .container-header .navbar-toggler .icon-menu::before {
        top: -7px;
    }

    .container-header .navbar-toggler .icon-menu::after {
        top: 7px;
    }

    /* Menu ouvert : la barre centrale s'efface, les deux autres se
       croisent. aria-expanded est posé par Bootstrap sur le bouton. */
    .container-header .navbar-toggler[aria-expanded="true"] .icon-menu {
        background: transparent;
    }

    .container-header .navbar-toggler[aria-expanded="true"] .icon-menu::before {
        transform: translateY(7px) rotate(45deg);
    }

    .container-header .navbar-toggler[aria-expanded="true"] .icon-menu::after {
        transform: translateY(-7px) rotate(-45deg);
    }

    /* Le bouton se fixe au-dessus du panneau pour pouvoir refermer.
       Cible le bouton directement via aria-expanded, ce qui évite de
       dépendre de :has(). */
    .container-header .navbar-toggler[aria-expanded="true"] {
        position: fixed;
        top: 14px;
        right: 16px;
        z-index: 2001;
        border-color: rgba(255, 255, 255, 0.5);
    }

    /* Panneau plein écran, logo compris : z-index supérieur à celui du
       bandeau (1031) et du menu collant (1030). */
    .container-header .navbar-collapse.show,
    .container-header .navbar-collapse.collapsing {
        position: fixed;
        inset: 0;
        z-index: 2000;
        display: block;
        height: auto;
        padding: 72px 24px 40px;
        overflow-y: auto;
        background: #030100;
        transition: none;
    }

    /* Entrées dimensionnées pour le doigt */
    .container-header .navbar-collapse .mod-menu > li {
        padding: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    }

    .container-header .navbar-collapse .mod-menu > li > a,
    .container-header .navbar-collapse .mod-menu > li > span,
    .container-header .navbar-collapse .mod-menu > li > button {
        padding: 15px 2px;
        font-size: 17px;
        border-top: none;
    }

    /* Les entrées qui ouvrent un sous-menu sont des <button>, centrés par
       défaut. La règle générale leur impose display:block, ce qui rendait
       justify-content inopérant : d'où le texte au milieu. On repasse en
       flex et on aligne tout à gauche, comme les autres entrées. */
    .container-header .navbar-collapse .mod-menu li.parent > button,
    .container-header .navbar-collapse .mod-menu__sub li.parent > .mod-menu__separator {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        text-align: left;
    }

    /* Flèche d'état, dessinée en CSS (le chevron de Joomla est un glyphe
       FontAwesome chargé en différé, et il n'en existe aucun au-delà du
       premier niveau). Pointe vers le bas si replié, vers le haut si
       déplié : aria-expanded est tenu à jour par menu.js au niveau 1 et
       par le script du template aux niveaux inférieurs. */
    .container-header .navbar-collapse .mod-menu li.parent > button::after,
    .container-header .navbar-collapse .mod-menu__sub li.parent > .mod-menu__separator::after {
        content: "";
        flex: 0 0 auto;
        width: 8px;
        height: 8px;
        margin-left: 12px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: translateY(-2px) rotate(45deg);
        transition: transform 0.2s ease;
    }

    .container-header .navbar-collapse .mod-menu li.parent > [aria-expanded="true"]::after {
        transform: translateY(2px) rotate(-135deg);
    }

    .container-header .navbar-collapse .mod-menu__sub a,
    .container-header .navbar-collapse .mod-menu__sub span.mod-menu__separator {
        padding: 11px 2px 11px 20px;
        font-size: 15px;
    }

    /* Fige le défilement de la page derrière le panneau ouvert.
       Sans effet sur les navigateurs sans :has(), ce qui est acceptable
       pour un simple confort de défilement. */
    body:has(.container-header .navbar-collapse.show) {
        overflow: hidden;
    }
}

/* ===================================================================
   Pied de page : modules centrés
   Le conteneur .grid-child est déjà en flex ; c'est Cassiopeia qui
   écarte les modules aux deux extrémités via
   .footer .grid-child{justify-content:space-between}. On recentre.
   Inutile de cibler .row : cette classe n'existe pas dans le markup.
   =================================================================== */
/* Même ombre que le bandeau d'en-tête. position + z-index sont
   nécessaires : sans eux l'ombre serait recouverte par le contenu
   qui précède le pied de page. Valeur inférieure à celle de l'en-tête
   (1031) pour que le menu collant reste au-dessus. */
.container-footer {
    position: relative;
    z-index: 10;
    box-shadow: 0 0 8px 7px rgba(0, 0, 0, 0.85);
}

/* Champ de recherche du pied de page.
   Bootstrap le rend à 16px de police pour 45px de haut : très voyant
   à côté d'un corps de texte à 12px, et un bloc blanc plein sur fond
   noir. On l'aligne sur la taille du site et on remplace le fond blanc
   par un voile clair translucide, qui se fond dans le bandeau. */
.container-footer .mod-finder .form-control {
    width: 180px;
    padding: 5px 10px;
    font-size: 12px;
    color: #ccc;
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 3px;
}

.container-footer .mod-finder .form-control::placeholder {
    color: rgba(255, 255, 255, 0.45);
}

.container-footer .mod-finder .form-control:focus {
    background-color: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.4);
}

.container-footer.footer .grid-child {
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
    text-align: center;
    /* Cassiopeia applique padding: 2.5rem .5em sur ce conteneur.
       On réduit le haut et on supprime le bas ; les côtés restent
       à .5em, hérités de sa déclaration raccourcie. */
    padding-top: 0.5rem;
    padding-bottom: 0;
}

/* ===================================================================
   Page de connexion (composant com_users, vue "login")
   Sans colonne latérale, le formulaire occupait les 1200px de la zone
   de contenu. On le ramène à une largeur de lecture et on retire
   l'encadrement Bootstrap des deux liens du bas (.list-group-item).
   =================================================================== */
.com-users-login {
    max-width: 420px;
    margin-inline: auto;
}

.com-users-login__form {
    padding: 22px 24px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    background: #fcfcfc;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.com-users-login__form fieldset {
    margin: 0;
    padding: 0;
    border: none;
}

.com-users-login .control-group + .control-group {
    margin-top: 14px;
}

.com-users-login .control-label label {
    margin-bottom: 4px;
}

/* L'astérisque rouge des champs obligatoires est superflu ici :
   les deux champs le sont. */
.com-users-login .control-label .star {
    display: none;
}

.com-users-login__submit {
    margin-top: 20px;
}

.com-users-login__submit .btn {
    width: 100%;
}

/* Liens "mot de passe perdu" / "identifiant perdu" : Joomla les rend
   sous forme de liste encadrée, on les remet en simples liens. */
.com-users-login__options.list-group {
    flex-direction: row;
    justify-content: center;
    gap: 22px;
    margin-top: 16px;
    border-radius: 0;
}

.com-users-login__options .list-group-item {
    width: auto;
    padding: 0;
    border: none;
    background: none;
    font-size: 90%;
}

/* Classes couleur (.bg-orange, .text-blue…) : déplacées dans
   content.css, partagé avec l'éditeur de l'administration. Elles y
   sont intactes, commentaire compris. Ne pas les redéclarer ici. */

/* ###################################################################
   #                                                                 #
   #   CODE MORT POUR L'INSTANT — AUCUN EFFET SUR LE SITE ACTUEL     #
   #                                                                 #
   #   Règles écrites pour les modules en colonne latérale. Depuis    #
   #   la suppression du module "Connexion", plus aucun module n'est  #
   #   placé en colonne : rien ici ne s'applique.                     #
   #                                                                 #
   #   À REACTIVER si vous remettez un module en colonne latérale     #
   #   (ou en position top-a/top-b/bottom-a/bottom-b) : il n'y a      #
   #   rien à modifier, ces règles reprendront effet toutes seules.   #
   #                                                                 #
   #   À SUPPRIMER si vous décidez de ne plus jamais utiliser de      #
   #   modules dans ces positions.                                    #
   #                                                                 #
   #   Note : deux règles supposent un suffixe de classe côté         #
   #   administration — "connexion" pour le cadenas, "mon-compte"     #
   #   pour le liseré bleu.                                           #
   #                                                                 #
   ################################################################### */

/* --- En-têtes de modules latéraux ---
   Reproduction du bandeau "glossy" que produisait mod_beautifulck sur
   l'ancien site (module tiers abandonné : il ne sera pas réinstallé).
   Valeurs relevées sur les images d'origine décodées pixel par pixel :
   dégradé HORIZONTAL #b4b4b4 (gauche) vers #dcdcdc (droite), hauteur
   utile 35px, ombre portée douce, titre serif 14px #f7f7f7 espacé de
   0.5px. Reconstruit en CSS : ni image ni dépendance au module. */
.container-sidebar-left .card-header,
.container-sidebar-right .card-header,
.container-top-a .card-header,
.container-top-b .card-header,
.container-bottom-a .card-header,
.container-bottom-b .card-header {
    /* min-height et non height : un titre long doit pouvoir s'étendre
       plutôt que d'être tronqué */
    min-height: 35px;
    /* le bandeau déborde du cadre de part et d'autre, comme l'original */
    margin: 0 -8px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    border: none;
    /* !important pour passer devant .card-header:first-child de Bootstrap,
       qui n'arrondit que les deux coins supérieurs */
    border-radius: 18px !important;
    background: linear-gradient(to right, #bdbdbd 0%, #c6c6c6 25%, #d5d5d5 62%, #dcdcdc 90%, #d2d2d2 100%);
    box-shadow: 0 3px 4px rgba(0, 0, 0, 0.22);
    color: #f7f7f7;
    font-family: 'Crimson Text', Georgia, serif;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Cadenas du module de connexion (SVG en ligne : pas de requête
   supplémentaire ni d'image tierce). Suffixe de classe "connexion". */
.connexion .card-header::before {
    content: "";
    flex: 0 0 auto;
    width: 14px;
    height: 16px;
    margin-right: 7px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16'%3E%3Cpath fill='%23f7f7f7' d='M11 7V5A4 4 0 0 0 3 5v2H2v8h10V7zM5 5a2 2 0 0 1 4 0v2H5zm2 5.5a1.2 1.2 0 0 1 .6 2.2V14h-1.2v-1.3A1.2 1.2 0 0 1 7 10.5z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Accent bleu pour le module "Mon compte" (suffixe "mon-compte") */
.mon-compte .card-header {
    border-bottom: 3px solid #0B7CBD;
}

/* Corps du module : compact comme l'ancien (.moduletable > div
   avait padding 12px 18px, colonne de 200px) */
.container-sidebar-left .card-body,
.container-sidebar-right .card-body {
    padding: 12px 10px;
}

/* Module de connexion resserré : la colonne fait 200px comme sur
   l'ancien site, mais le module de Joomla 6 est bien plus volumineux
   (champs hauts, bouton clé d'accès) et débordait.
   Ne concerne QUE le module mod_login en colonne, pas la page de
   connexion du composant com_users (voir plus haut dans ce fichier). */
.container-sidebar-left .mod-login .form-control,
.container-sidebar-left .mod-login .input-group-text,
.container-sidebar-left .mod-login .btn {
    padding: 4px 8px;
    font-size: 12px;
}

.container-sidebar-left .mod-login .form-group {
    margin-bottom: 8px;
}

.container-sidebar-left .mod-login__options {
    margin-bottom: 0;
    font-size: 12px;
}