/* Template Maverick : styles de base. Les styles propres à un site vont dans css/user.css de son template enfant.
   Les réglages du style (polices, tailles, couleurs, hauteur du logo) arrivent en variables --mvk-*. */

:root {
    --mvk-font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --mvk-font-heading: inherit;
    --mvk-font-size: 16px;
    --mvk-line-height: 1.5;
    --mvk-heading-weight: 500;
    --mvk-heading-line-height: 1.3;
    --mvk-h1: 24px;
    --mvk-h2: 22px;
    --mvk-h3: 20px;
    --mvk-h4: 18px;
    --mvk-h5: 16px;
    --mvk-h6: 14px;
    --mvk-primary: #0a58ca;
    --mvk-body-bg: #fff;
    --mvk-body-color: #495057;
    --mvk-link: #0a58ca;
    --mvk-link-hover: #084298;
    --mvk-topbar-bg: #f8f9fa;
    --mvk-header-bg: #fff;
    --mvk-footer-bg: #fff;
    --mvk-footer-color: #495057;
    --mvk-logo-height: 100px;
    --mvk-border: #dee2e6;
}

[data-bs-theme="dark"] {
    --mvk-body-bg: #000;
    --mvk-body-color: #d5dae0;
    --mvk-link: #6ea8fe;
    --mvk-link-hover: #9ec5fe;
    --mvk-topbar-bg: #212529;
    --mvk-header-bg: #141b24;
    --mvk-footer-bg: #141b24;
    --mvk-footer-color: #d5dae0;
    --mvk-border: #323c48;
}

/* Mode sombre : Bootstrap déclare la page en « color-scheme: dark ». Une iframe dont le document reste clair (une
   publicité, par exemple) reçoit alors du navigateur un fond blanc opaque. Les iframes gardent le schéma par défaut :
   leur fond reste transparent, comme avec un template qui ne déclare rien. */
iframe {
    color-scheme: normal;
}

/* Bootstrap suit les réglages du style. */
body {
    --bs-body-font-family: var(--mvk-font-body);
    --bs-body-font-size: var(--mvk-font-size);
    --bs-body-line-height: var(--mvk-line-height);
    --bs-body-bg: var(--mvk-body-bg);
    --bs-body-color: var(--mvk-body-color);
    --bs-link-color: var(--mvk-link);
    --bs-link-hover-color: var(--mvk-link-hover);
    --bs-primary: var(--mvk-primary);
    font-family: var(--mvk-font-body);
    font-size: var(--mvk-font-size);
    line-height: var(--mvk-line-height);
    background: var(--mvk-body-bg);
    color: var(--mvk-body-color);
}

a {
    color: var(--mvk-link);
    text-decoration: none;
}

a:hover,
a:focus-visible {
    color: var(--mvk-link-hover);
}

:is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
    font-family: var(--mvk-font-heading);
    font-weight: var(--mvk-heading-weight);
    line-height: var(--mvk-heading-line-height);
}

/* Les grands titres gardent un espace au-dessus, comme dans les templates d'origine des sites. */
:is(h1, h2, h3, .h1, .h2, .h3) {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

:is(h1, .h1) { font-size: var(--mvk-h1); }
:is(h2, .h2) { font-size: var(--mvk-h2); }
:is(h3, .h3) { font-size: var(--mvk-h3); }
:is(h4, .h4) { font-size: var(--mvk-h4); }
:is(h5, .h5) { font-size: var(--mvk-h5); }
:is(h6, .h6) { font-size: var(--mvk-h6); }

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

/* Gouttière des colonnes : 16 px de chaque côté. */
:is(.container, .container-xxl, .container-fluid),
.row {
    --bs-gutter-x: var(--mvk-gutter, 2rem);
}

/* Fil d'Ariane */
/* Le module de Joomla pose des classes utilitaires (px-3 py-2), plus fortes qu'une règle simple. */
.mvk-section--breadcrumbs .breadcrumb {
    margin: 0 !important;
    padding: var(--mvk-breadcrumbs-padding, 16px) 0 !important;
    font-size: var(--mvk-breadcrumbs-font-size, 14px);
    line-height: 1.5;
}

/* Article : centré dans les largeurs d'un conteneur Bootstrap, avec 16 px de marge intérieure, comme dans les
   templates d'origine des sites (sensible sur tablette, quand le contenu prend toute la largeur de l'écran). */
.mvk-col.component > .com-content-article {
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--mvk-article-padding, 16px);
}

@media (min-width: 576px) { .mvk-article-contained .mvk-col.component > .com-content-article { max-width: 540px; } }
@media (min-width: 768px) { .mvk-article-contained .mvk-col.component > .com-content-article { max-width: 720px; } }
@media (min-width: 992px) { .mvk-article-contained .mvk-col.component > .com-content-article { max-width: 960px; } }
@media (min-width: 1200px) { .mvk-article-contained .mvk-col.component > .com-content-article { max-width: 1140px; } }
@media (min-width: 1400px) { .mvk-article-contained .mvk-col.component > .com-content-article { max-width: 1320px; } }

/* Description d'une catégorie : un encadré. */
.category-desc {
    margin: var(--mvk-category-desc-margin, 32px) 0;
}

.mvk-category-desc-framed .category-desc {
    padding: var(--mvk-category-desc-padding, 16px);
    border: 1px solid var(--mvk-border-light, #e9ecef);
    border-radius: 4px;
}

[data-bs-theme="dark"] .category-desc {
    --mvk-border-light: var(--mvk-border);
}

/* Colonnes empilées (sous 992 px) : une marge en haut et en bas de chacune. */
@media (max-width: 991.98px) {
    .mvk-section--main-body .mvk-col {
        padding-block: var(--mvk-stacked-column-padding, 16px);
    }

    /* La rangée compense la marge de la première et de la dernière colonne : seul l'espace entre elles s'ajoute. */
    .mvk-section--main-body .row {
        margin-block: calc(-1 * var(--mvk-stacked-column-padding, 16px));
    }
}

/* Article sur téléphone : un espace sous son dernier bloc (le cartouche auteur, par exemple), avant les colonnes. */
@media (max-width: 767.98px) {
    .mvk-col.component > .com-content-article {
        padding-bottom: var(--mvk-article-bottom-mobile, 24px);
    }
}

/* Colonnes latérales empilées sous le contenu (sous 768 px) : un espace sous chacune. */
@media (max-width: 767.98px) {
    .mvk-section--main-body .mvk-col:not(.component) {
        margin-bottom: var(--mvk-stacked-sidebar-gap, 32px);
    }
}

/* Informations de l'article (date…) : pas de marge de liste, souvent vide quand une signature les remplace. */
.com-content-article > .article-info {
    margin-bottom: 0;
}

/* Contenu principal : un espace au-dessus et en dessous, 32 px sur téléphone, 48 px à partir de 768 px (la feuille du
   site l'annule au-dessus quand le fil d'Ariane précède). Par les variables, que la règle des sections applique. */
.mvk-section--main-body {
    --mvk-section-padding-default: 32px 0;
    --mvk-section-padding-md-default: 48px 0;
}

/* Menus des modules (gabarits « metismenu » de Joomla dans les colonnes) : arborescence toujours dépliée,
   présentation de T4. La rubrique de premier niveau garde la puce de sa liste, la rubrique en cours est en gras,
   chaque sous-rubrique a un chevron. */
.mvk-col .metismenu {
    margin: 0;
}

.mvk-col .metismenu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Menus repliables des colonnes : sans la marge de la barre de navigation de Bootstrap. */
.mvk-col:not(.mvk-block-header) .navbar {
    padding: 0;
}

.mvk-col .metismenu .mm-collapse {
    display: block;
    height: auto !important;
}

.mvk-col .metismenu .mm-toggler {
    display: none;
}

.mvk-module .nav li {
    display: block;
    padding: 0;
    margin: 0;
}

.mvk-module .nav li .separator {
    display: block;
    padding: 0.25rem;
}

.mvk-module .nav li a {
    position: relative;
    display: block;
    padding: 0.25rem 0;
    color: var(--mvk-body-color);
}

.mvk-module .nav > li.active > a {
    font-weight: 700;
}

.mvk-module .nav li ul ul {
    padding-left: 1rem;
}

/* Le gabarit de Joomla met les sous-rubriques en petit texte : même taille que les rubriques. */
.mvk-module .nav li ul.small {
    font-size: 1rem;
}

.mvk-module .nav li ul > li > a {
    padding-left: 1rem;
}

.mvk-module .nav li ul > li > a::before {
    position: absolute;
    top: 50%;
    left: 2px;
    width: 6px;
    height: 10px;
    margin-top: -5px;
    background: currentColor;
    content: "";
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 10'%3E%3Cpath d='M1 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 10'%3E%3Cpath d='M1 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.mvk-module .nav li ul > li.active > a {
    color: #212529;
    font-weight: 700;
}

[data-bs-theme="dark"] .mvk-module .nav li a {
    color: rgba(255, 255, 255, 0.8);
}

[data-bs-theme="dark"] .mvk-module .nav li ul > li.active > a {
    color: #fff;
}

/* Sections du constructeur de mise en page */
.mvk-section {
    position: relative;
    padding: var(--mvk-section-padding, var(--mvk-section-padding-default, 0));
    margin: var(--mvk-section-margin, 0);
    background-color: var(--mvk-section-bg, transparent);
}

@media (min-width: 768px) {
    .mvk-section { padding: var(--mvk-section-padding-md, var(--mvk-section-padding, var(--mvk-section-padding-md-default, var(--mvk-section-padding-default, 0)))); }
}

@media (min-width: 992px) {
    .mvk-section { padding: var(--mvk-section-padding-lg, var(--mvk-section-padding-md, var(--mvk-section-padding, var(--mvk-section-padding-md-default, var(--mvk-section-padding-default, 0))))); }
}

.mvk-section.mvk-has-bg {
    background-image: var(--mvk-section-bg-image);
    background-size: var(--mvk-section-bg-size, cover);
    background-position: var(--mvk-section-bg-position, center);
    background-repeat: var(--mvk-section-bg-repeat, no-repeat);
    background-attachment: var(--mvk-section-bg-attachment, scroll);
}

.mvk-section.mvk-has-overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--mvk-section-overlay);
    opacity: var(--mvk-section-overlay-opacity, 0.5);
    pointer-events: none;
}

.mvk-section.mvk-has-overlay > * {
    position: relative;
}

.mvk-sticky {
    position: sticky;
    top: 0;
    z-index: 1020;
}

.mvk-palette-light { --mvk-section-bg: #f8f9fa; }
.mvk-palette-dark { --mvk-section-bg: #15181a; color: #fff; }
.mvk-palette-dark a { color: #fff; }
.mvk-palette-primary { --mvk-section-bg: var(--mvk-primary); color: #fff; }
.mvk-palette-primary a { color: #fff; }

/* Section sans conteneur : la rangée ne déborde pas de la page. */
.mvk-section > .row {
    margin-left: 0;
    margin-right: 0;
}

/* Barre du haut */
.mvk-section--topbar {
    padding-block: var(--mvk-topbar-padding, 0.667rem);
    line-height: 1;
    background: var(--mvk-topbar-bg);
}

/* Le bouton du mode sombre, seul dans sa colonne, sans la ligne de texte qui la grandirait d'un pixel. */
.mvk-col.mvk-block-theme-toggle {
    display: flex;
    align-items: center;
}

.mvk-section--topbar .row {
    align-items: center;
}

/* En-tête */
.mvk-section--header {
    background: var(--mvk-header-bg);
}

.mvk-header {
    padding-block: var(--mvk-header-padding, 16px);
}

.mvk-header__wrap {
    gap: 16px;
    min-height: 64px;
}

.mvk-logo a {
    gap: 12px;
    text-decoration: none;
    color: inherit;
}

.mvk-logo .logo-img {
    height: var(--mvk-logo-height);
    width: auto;
}

.mvk-logo__name {
    font-family: var(--mvk-font-heading);
    font-weight: 700;
    font-size: 1.25rem;
}

.mvk-logo__slogan {
    margin: 0;
    font-size: 0.85rem;
}

/* Logo clair ou sombre selon le mode */
.d-dark,
[data-bs-theme="dark"] .d-light {
    display: none;
}

[data-bs-theme="dark"] .d-dark {
    display: inline;
}

/* Menu principal */
.mvk-mainnav .navbar-nav {
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mvk-menu > .nav-item {
    position: relative;
    display: flex;
    align-items: center;
}

/* Bootstrap fixe la marge horizontale des liens d'une barre de navigation dépliée par une règle plus forte
   (.navbar-expand-lg .navbar-nav .nav-link) : elle passe par sa variable. */
.mvk-mainnav {
    --bs-navbar-nav-link-padding-x: var(--mvk-menu-link-padding-x, 16px);
}

.mvk-menu .nav-link {
    display: block;
    padding: var(--mvk-menu-link-padding-y, 20px) var(--mvk-menu-link-padding-x, 16px);
    line-height: 40px;
    font-weight: 500;
    text-transform: uppercase;
    color: inherit;
    text-decoration: none;
}

.mvk-menu .dropdown-menu {
    margin-top: 0;
}

.mvk-submenu-toggle {
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
}

.mvk-submenu-toggle::after {
    content: "";
    display: inline-block;
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-left: 0.3em solid transparent;
}

.mvk-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border: 0;
    background: transparent;
    color: inherit;
}

/* Les trois barres à la place de celles de l'icône de police de JA Purity IV, un pixel au-dessus du centre. */
.mvk-menu-toggle svg {
    margin-top: -2px;
}

/* Sous le point de rupture : le menu se déplie sous l'en-tête, sur toute la largeur de la section, par-dessus la page. */
.mvk-mainnav.navbar {
    position: static;
    padding: 0;
}

.mvk-mainnav .navbar-collapse:is(.collapse.show, .collapsing) {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1030;
    background: var(--mvk-header-bg);
}

.mvk-mainnav .navbar-collapse:is(.show, .collapsing) .mvk-menu {
    flex-direction: column;
    gap: 0;
}

.mvk-mainnav .navbar-collapse:is(.show, .collapsing) .mvk-menu > .nav-item {
    flex-wrap: wrap;
}

.mvk-mainnav .navbar-collapse:is(.show, .collapsing) .mvk-menu .nav-link {
    flex: 1;
    line-height: 1.5;
}

.mvk-mainnav .navbar-collapse:is(.show, .collapsing) .dropdown-menu {
    position: static;
    width: 100%;
    border: 0;
    box-shadow: none;
}

/* Bouton du mode sombre */
.mvk-theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 18px;
    padding: 0;
    line-height: 1;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.mvk-theme-toggle__track {
    position: relative;
    top: 1px;
    width: 32px;
    height: 16px;
    border-radius: 32px;
    background: #dee2e6;
}

.mvk-theme-toggle__track > span {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #6c757d;
    transition: transform 0.2s;
}

[data-bs-theme="dark"] .mvk-theme-toggle__track {
    background: #495057;
}

[data-bs-theme="dark"] .mvk-theme-toggle__track > span {
    background: #adb5bd;
    transform: translateX(16px);
}

/* Modules des colonnes */
/* Modules : 32 px entre deux modules d'une même colonne. */
.mvk-module + .mvk-module {
    margin-top: var(--mvk-module-gap, 32px);
}

.mvk-module .module-title {
    margin-bottom: var(--mvk-module-title-gap, 12px);
}

/* Pied de page */
.mvk-section--footer,
.mvk-section--footnav {
    background: var(--mvk-footer-bg);
    color: var(--mvk-footer-color);
}

.mvk-section--footer {
    font-size: var(--mvk-footer-font-size, 14px);
}

/* Lignes du pied de page (copyright, liens légaux) : l'une sous l'autre, liens de la couleur du texte. */
.mvk-section--footer .mvk-module + .mvk-module {
    margin-top: 0;
}

.mvk-section--footer a {
    color: inherit;
}

.mvk-section--footer a:hover {
    text-decoration: underline;
}

/* Retour en haut */
.mvk-back-to-top {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 1030;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 0;
    background: #000;
    color: #fff;
}

.mvk-back-to-top:hover,
.mvk-back-to-top:focus-visible {
    color: #fff;
    background: var(--mvk-primary);
}

/* Page d'erreur */
.mvk-error {
    max-width: 720px;
    padding-block: 48px 64px;
    margin-inline: auto;
    text-align: center;
}

.mvk-error__code {
    margin-bottom: 0;
    font-size: 4.5rem;
    font-weight: 700;
    line-height: 1;
    color: var(--mvk-primary, var(--bs-primary));
}

.mvk-error__title {
    margin-top: 0.5rem;
}

.mvk-error__sections-title {
    margin-top: 2rem;
    font-weight: 600;
}

.mvk-error__sections {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    padding: 0;
    list-style: none;
}

.mvk-error__sections a {
    display: inline-block;
    padding: 0.375rem 0.875rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 2rem;
}

.mvk-error .backtrace,
.mvk-error table {
    text-align: start;
}

/* Site hors ligne */
.mvk-offline {
    display: flex;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
}

.mvk-offline__card {
    width: 100%;
    max-width: 420px;
    text-align: center;
}

.mvk-offline__card .logo-img {
    max-height: var(--mvk-logo-height, 100px);
    width: auto;
}

.mvk-offline form {
    margin-top: 2rem;
    text-align: start;
}

/* Nom du site à côté du logo : sa couleur vient de --maverick-name-color, que chaque style d'en-tête peut redéfinir. */
.mvk-logo__name {
    color: var(--maverick-name-color, inherit);
}