/* ==========================================================================
   Template fw_5 - Design Premium Tech & IA (Joomla 5)
   Optimisé pour la lisibilité, la performance et la simplicité.
   ========================================================================== */

/* 0. FontAwesome (solid) - @font-face manquant du core Joomla
   Le style "fontawesome" fourni par Joomla ne contient que le mapping des
   icônes, pas le chargement de police. On sert la police "solid" en local
   (déjà présente dans media/vendor/fontawesome-free/webfonts/) plutôt que
   de recharger tout le pack via un CDN externe en doublon.
   -------------------------------------------------------------------------- */
@font-face {
    font-family: 'Font Awesome 6 Free';
    font-style: normal;
    font-weight: 900;
    font-display: block;
    src: url('../../../media/vendor/fontawesome-free/webfonts/fa-solid-900.woff2') format('woff2'),
         url('../../../media/vendor/fontawesome-free/webfonts/fa-solid-900.ttf') format('truetype');
}

.fa-solid,
.fas {
    font-weight: 900;
}

/* 1. Variables Globales
   -------------------------------------------------------------------------- */
:root {
    --primary-color: #3b82f6;
    --primary-dark: #2563eb;
    --accent-color: #8b5cf6;
    --bg-body: #ffffff;
    --bg-alt: #f8fafc;
    --bg-card: #ffffff;
    --text-main: #0f172a;
    --text-muted: #64748b;
    --border-color: #e2e8f0;
    --card-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.05);
    --card-shadow-hover: 0 20px 25px -5px rgb(0 0 0 / 0.05), 0 8px 10px -6px rgb(0 0 0 / 0.05);
    
    /* Unification sur Inter */
    --font-ui: 'Inter', system-ui, -apple-system, sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, sans-serif;
    
    --article-max-width: 760px;
    --header-height: 72px;
    --radius-lg: 20px;
    --radius-md: 12px;
}

/* 2. Mode Sombre (Forcé par attribut)
   -------------------------------------------------------------------------- */
[data-bs-theme="dark"] {
    --bg-body: #020617;
    --bg-alt: #0f172a;
    --bg-card: #0f172a;
    --text-main: #f8fafc;
    --text-muted: #94a3b8;
    --border-color: #1e293b;
}

/* 3. Base & Reset
   -------------------------------------------------------------------------- */
body {
    font-family: var(--font-ui);
    color: var(--text-main);
    background-color: var(--bg-body);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    transition: background-color 0.3s ease, color 0.3s ease;
}

body, header, footer, aside, .card-module, .blog-item-inner-wrap, .featured-item-inner-wrap, .form-control, a, button {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
}

.bg-light { background-color: var(--bg-alt) !important; }

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: all 0.2s ease;
}

a:hover { color: var(--primary-dark); }

/* 4. Typographie
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-ui);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.2;
}

h1 { font-size: 3.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }

/* 5. Header & Navigation (Glassmorphism)
   -------------------------------------------------------------------------- */
.header {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border-color);
    height: var(--header-height);
    display: flex;
    align-items: center;
    z-index: 1050;
    transition: background-color 0.3s ease;
}

[data-bs-theme="dark"] .header {
    background: rgba(2, 6, 23, 0.85);
}

.navbar-brand, .logo h1 {
    font-weight: 900;
    font-size: 1.4rem;
    margin: 0;
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.logo img {
    max-height: 45px;
    width: auto;
}

/* Gestion du logo mode clair / mode sombre */
.logo-dark {
    display: none !important;
}

.logo-light {
    display: block !important;
}

[data-bs-theme="dark"] .logo-light {
    display: none !important;
}

[data-bs-theme="dark"] .logo-dark {
    display: block !important;
}

.nav-link {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-main) !important;
    padding: 0.5rem 1.25rem !important;
    border-radius: 10px;
}

.nav-link:hover, .nav-link.active {
    background: var(--bg-alt);
    color: var(--primary-color) !important;
}

/* Header Search - Ultra Minimalist */
.search-header {
    width: 200px;
    transition: width 0.3s ease;
    display: flex;
    align-items: center;
}

.search-header:focus-within {
    width: 280px;
}

/* Masquer de force tout ce qui n'est pas le champ de saisie */
.search-header label, 
.search-header button:not(.btn-link), 
.search-header .search-button,
.search-header .btn-primary {
    display: none !important;
}

.search-header .finder, 
.search-header .search {
    width: 100%;
}

.search-header input {
    border-radius: 24px !important;
    background: var(--bg-alt) !important;
    border: 1px solid var(--border-color) !important;
    padding: 0.5rem 1.25rem !important;
    font-size: 0.85rem !important;
    width: 100%;
    transition: all 0.3s ease;
    color: var(--text-main) !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.02);
}

.search-header input:focus {
    border-color: var(--primary-color) !important;
    background: var(--bg-body) !important;
    box-shadow: 0 0 0 4px rgba(var(--primary-color-rgb), 0.15) !important;
    outline: none;
}

/* Dark Mode Switcher Premium - Bouton Rond avec Icones Rotatives */
#dark-mode-toggle {
    background: transparent !important;
    border: none !important;
    color: var(--text-main);
    padding: 0;
    font-size: 1.25rem !important;
    cursor: pointer;
    border-radius: 50% !important;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: none !important;
    flex-shrink: 0;
}

#dark-mode-toggle:hover {
    background: rgba(var(--primary-color-rgb), 0.1) !important;
    transform: scale(1.1) !important;
    color: var(--primary-color) !important;
}

/* Chevauchement des icones */
#dark-mode-toggle .icon-sun,
#dark-mode-toggle .icon-moon {
    position: absolute;
    transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.3s ease !important;
    display: inline-block !important;
}

/* Mode Clair : Affiche la Lune, masque le Soleil */
[data-bs-theme="light"] #dark-mode-toggle .icon-sun {
    opacity: 0 !important;
    transform: rotate(90deg) scale(0) !important;
}

[data-bs-theme="light"] #dark-mode-toggle .icon-moon {
    opacity: 1 !important;
    transform: rotate(0deg) scale(1) !important;
    color: #475569 !important;
}

/* Mode Sombre : Affiche le Soleil, masque la Lune */
[data-bs-theme="dark"] #dark-mode-toggle .icon-sun {
    opacity: 1 !important;
    transform: rotate(0deg) scale(1) !important;
    color: #fbbf24 !important; /* Soleil doré en mode sombre */
}

[data-bs-theme="dark"] #dark-mode-toggle .icon-moon {
    opacity: 0 !important;
    transform: rotate(-90deg) scale(0) !important;
}

/* 6. Layout des Articles (Format Horizontal Forcé)
   -------------------------------------------------------------------------- */
.com-content-category-blog, .com-content-featured {
    padding-top: 0;
    padding-bottom: 4rem;
}

/* Conteneur principal de la carte */
.blog-item-inner-wrap, 
.featured-item-inner-wrap {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex !important;
    flex-direction: row !important;
    box-shadow: var(--card-shadow);
    margin-bottom: 2rem;
    transition: all 0.4s ease;
    height: 260px; /* Réduit pour plus de densité */
}

.blog-item-inner-wrap:hover, 
.featured-item-inner-wrap:hover {
    transform: translateX(8px);
    box-shadow: 0 10px 30px -5px rgba(var(--primary-color-rgb), 0.15) !important;
    border-color: var(--primary-color) !important;
}

/* Zone Image - Force Proportions */
.article-visual-container {
    flex: 0 0 30% !important; /* Force l'image à 30% exactement */
    width: 30% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    background: var(--bg-alt);
}

/* Neutralise TOUS les styles de figure/item-image natifs de Joomla */
.article-visual-container figure,
.article-visual-container .item-image,
.article-visual-container .pull-left, 
.article-visual-container .pull-none {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

.article-visual-container a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

.article-visual-container img {
    width: 100% !important;
    max-width: none !important; /* Supprime toute limite max */
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 0 !important;
    display: block !important;
}

/* Zone Texte - S'adapte au reste */
.blog-item-inner, 
.article-intro {
    flex: 1 !important; /* Prend tout l'espace restant */
    width: 70% !important;
    padding: 2rem 2.5rem !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    overflow: hidden;
}

.blog-item-inner h2, 
.article-intro h2 {
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
    line-height: 1.3;
    font-weight: 700;
}

.blog-item-inner h2 a, 
.article-intro h2 a {
    color: var(--text-main);
}

/* Meta info */
.article-info {
    display: flex;
    gap: 1rem;
    font-size: 0.65rem; /* Réduit de 0.75rem */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em; /* Légèrement plus espacé pour la lisibilité en petit */
    color: var(--text-muted);
    margin-bottom: 1rem;
    list-style: none;
    padding: 0;
    opacity: 0.8;
}

.article-info dd { margin: 0; }
.article-info dt { display: none; }

@media (max-width: 991px) {
    .blog-item-inner-wrap, .featured-item-inner-wrap { flex-direction: column !important; height: auto; }
    .item-image, .article-visual-container { width: 100% !important; height: 200px !important; }
    .blog-item-inner, .article-intro { width: 100% !important; padding: 1.5rem !important; }
}

/* 6.1 Styles spécifiques pour la Grille (Articles > 4) */
.featured-item-compact .featured-item-inner-wrap {
    flex-direction: column !important; /* Image en haut */
    height: auto !important; /* Hauteur dynamique */
    min-height: 420px;
}

.featured-item-compact .article-visual-container {
    width: 100% !important;
    flex: 0 0 200px !important; /* Hauteur d'image fixe en grille */
}

.featured-item-compact .article-intro {
    width: 100% !important;
    padding: 1.5rem !important;
    justify-content: flex-start !important;
}

.featured-item-compact h2 {
    font-size: 1.2rem !important;
}

/* 7. Lecture Long-Form (Article Complet) */
.com-content-article {
    padding-top: 0;
    padding-bottom: 6rem;
}

.article-header {
    text-align: left;
    margin-bottom: 3rem;
    max-width: var(--article-max-width);
    margin-left: auto;
    margin-right: auto;
}

.article-header h1 {
    font-size: 2.8rem;
    margin-bottom: 1.5rem;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}

.com-content-article__body {
    font-family: var(--font-body);
    font-size: 1.15rem;
    line-height: 1.8;
    max-width: var(--article-max-width);
    margin: 0 auto;
}

/* 8. Sidebar & Modules (Premium Design)
   -------------------------------------------------------------------------- */
.card-module {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: var(--card-shadow);
    transition: box-shadow 0.3s ease;
}

.card-module:hover {
    box-shadow: var(--card-shadow-hover);
}

/* Forçage de l'affichage des titres pour tous les modules de la sidebar */
aside .card-module h3,
aside .card-module .module-title,
aside .module-title {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--primary-color) !important;
    margin-bottom: 1.5rem !important;
    line-height: 1;
}

aside .card-module h3::after,
aside .card-module .module-title::after,
aside .module-title::after {
    content: "";
    height: 1px;
    flex-grow: 1;
    background: var(--primary-color);
    opacity: 0.2;
    display: block !important;
    margin-left: 12px;
}

/* Masquer uniquement les bruits textuels inutiles dans la sidebar */
aside .card-module .module-content > p:not(:has(a)),
aside .card-module .module-content .article-introtext,
aside .card-module .module-content .category-desc,
aside .card-module .module-content .readmore {
    display: none !important;
}

/* Styles pour les listes de modules */
.card-module ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.card-module ul li {
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-module ul li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.card-module ul li a {
    color: var(--text-main);
    font-weight: 500;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.2s ease;
    flex-grow: 1;
    line-height: 1.4;
}

.card-module ul li a:hover {
    color: var(--primary-color);
    padding-left: 5px;
}

/* Badges pour les compteurs */
.card-module .badge, 
.card-module ul li span {
    font-size: 0.75rem;
    background: var(--bg-alt);
    color: var(--text-muted);
    padding: 2px 8px;
    border-radius: 20px;
    font-weight: 600;
}

/* 9. Footer - Design Premium & Ultra Lisible */
.footer {
    background: #0b1329 !important; /* Couleur bleu marine nuit premium */
    color: #e2e8f0 !important; /* Gris très clair, très lisible */
    border-top: 1px solid #1e293b !important;
}

.footer h3,
.footer .module-title {
    color: var(--primary-color) !important; /* Devient bleu primaire pour s'accorder avec la charte graphique */
    font-size: 0.85rem !important; /* Réduit pour être plus discret et élégant */
    font-weight: 700 !important;
    margin-bottom: 1.2rem !important;
    text-transform: uppercase;
    letter-spacing: 0.1em; /* Léger espacement pour compenser la taille réduite */
}

/* Styles pour toutes les listes du footer */
.footer ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.footer ul li {
    padding: 0.2rem 0 !important;
    border-bottom: none !important;
}

/* Assurer une lisibilité parfaite de TOUS les liens du footer (paragraphes, etc.) */
.footer a {
    color: #38bdf8 !important; /* Bleu ciel lumineux par défaut */
    text-decoration: none !important;
    transition: all 0.2s ease-in-out !important;
    font-size: 0.9rem !important;
}

.footer a:hover {
    color: #ffffff !important;
    text-decoration: underline !important;
}

/* Rendu uniforme premium pour les liens de navigation (Colonnes 2, 3 et 4) avec effet "pilule" au survol */
.footer ul.latestnews li a,
.footer .navbar-nav li a,
.footer .syndicate-module {
    display: block !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    color: #e2e8f0 !important; /* Couleur gris clair très lisible */
    padding: 0.5rem 1rem !important;
    border-radius: 8px !important;
    transition: all 0.2s ease-in-out !important;
    text-decoration: none !important;
    width: fit-content;
    margin-left: -1rem !important; /* Annule le décalage pour aligner le texte avec le titre */
}

.footer ul.latestnews li a:hover,
.footer .navbar-nav li a:hover,
.footer .navbar-nav li a.active,
.footer .syndicate-module:hover {
    background: rgba(var(--primary-color-rgb), 0.15) !important; /* Effet de bloc au survol avec un ombrage de la couleur primaire */
    color: var(--primary-color) !important; /* Devient la couleur principale au survol */
    text-decoration: none !important;
}

/* Textes de paragraphe */
.footer p {
    color: #94a3b8 !important; /* Gris doux mais bien lisible */
    font-size: 0.9rem !important;
    line-height: 1.6 !important;
    margin-bottom: 0.8rem !important;
}

/* Copyright */
.footer .opacity-50 {
    opacity: 0.75 !important; /* Augmenté pour la lisibilité */
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 2rem;
}

/* 10. Mode Sombre Automatique géré par data-bs-theme */

/* 11. Custom Button Colors (Using configuration variables) */
.btn-outline-primary {
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    background-color: transparent !important;
}

.btn-outline-primary:hover, 
.btn-outline-primary:focus, 
.btn-outline-primary:active {
    color: #ffffff !important;
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

.btn-primary {
    color: #ffffff !important;
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

.btn-primary:hover, 
.btn-primary:focus, 
.btn-primary:active {
    background-color: var(--primary-dark) !important;
    border-color: var(--primary-dark) !important;
    color: #ffffff !important;
}

/* 12. Main Image inside Full Article (Single Article View) */
.com-content-article .full-image,
.com-content-article .item-image,
.com-content-article figure.image-left,
.com-content-article figure.image-right,
.com-content-article .pull-none {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 auto 2rem auto !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Uniquement pour l'image principale de l'article (Bannière) */
.com-content-article .full-image img,
.com-content-article .item-image img {
    width: 100% !important;
    max-width: var(--article-max-width) !important;
    height: 400px !important;    /* Fixed height specified by the user */
    object-fit: cover !important; /* Scale and crop nicely */
    border-radius: var(--radius-md) !important;
    display: block !important;
    margin: 0 auto 2rem auto !important;
}

/* Pour les illustrations insérées dans le texte */
.com-content-article [itemprop="articleBody"] img,
.com-content-article figure img,
.com-content-article .pull-none img {
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    border-radius: var(--radius-md) !important;
    display: block !important;
    margin: 1.5rem auto !important;
}

/* 13. Surcharge spécifique pour le module RSS / Flux de nouvelles */
.newsfeed,
.feed,
ul.newsfeed,
div.feed {
    direction: ltr !important;
    text-align: left !important;
    padding-left: 0 !important; /* Réinitialise le padding global */
    margin: 0 !important;
    list-style: none !important;
}

.newsfeed li,
.feed li,
ul.newsfeed li {
    direction: ltr !important;
    text-align: left !important;
    position: relative !important;
    padding-left: 12px !important; /* Espace précis et réduit entre la puce et le texte */
    margin-left: 0 !important;
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
    border-bottom: none !important;
    list-style: none !important; /* Désactive les puces par défaut */
}

.newsfeed li::before,
.feed li::before,
ul.newsfeed li::before {
    content: "•" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0.2rem !important; /* Ajuste la hauteur de la puce par rapport au texte */
    color: var(--primary-color) !important; /* Colore la puce avec le bleu du site */
    font-size: 1.1rem !important;
    line-height: 1.2 !important;
}

.newsfeed li a,
.feed li a {
    display: inline !important;
    text-align: left !important;
}

/* Surcharge de la taille du titre du flux RSS dans le module */
.feed h2 {
    font-size: 1.3rem !important;
    font-weight: 700 !important;
    margin-top: 0 !important;
    margin-bottom: 1rem !important;
    line-height: 1.3 !important;
    text-align: left !important;
    direction: ltr !important;
}

.feed h2 a {
    color: var(--text-main) !important;
    text-decoration: none !important;
}

.feed h2 a:hover {
    color: var(--primary-color) !important;
}

/* 14. Page Contact - Design Premium & Sobre */
.com-contact.contact {
    max-width: var(--article-max-width);
    margin: 0 auto;
}

/* Cache le titre avec le nom du contact (ex: "Pierre") qui n'est pas sobre */
.com-contact.contact .page-header {
    display: none !important;
}

.com-contact.contact h1,
.com-contact.contact h2 {
    text-align: left;
    color: var(--text-main);
    font-weight: 800;
}

.com-contact.contact h1 {
    font-size: 2.2rem;
    margin-bottom: 0.5rem;
}

.com-contact.contact h2 {
    font-size: 1.4rem;
    color: var(--primary-color);
    margin-top: 1rem;
    margin-bottom: 2rem;
    font-weight: 700;
}

/* Le formulaire dans un conteneur style carte premium */
.com-contact__form.contact-form {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 2.5rem;
    box-shadow: var(--card-shadow);
    margin-bottom: 3rem;
}

/* On masque la légende legacy de Joomla et le spacer requis facultatif */
.com-contact__form.contact-form legend,
.contact-form legend {
    display: none !important;
}

.com-contact__form.contact-form .field-spacer,
.contact-form .field-spacer {
    display: none !important;
}

/* Espacement des groupes de champs */
.control-group {
    margin-bottom: 1.5rem;
}

/* Libellés de champs (Labels) */
.control-label {
    margin-bottom: 0.5rem;
}

.control-label label {
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: var(--text-main) !important;
    display: inline-block;
}

.control-label label span.star {
    color: #ef4444 !important; /* Astérisque rouge de champ requis */
    margin-left: 4px;
}

/* Personnalisation GLOBALE des champs de saisie (Inputs & Textarea) */
.form-control,
.form-select,
.inputbox {
    background-color: var(--bg-body) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-main) !important;
    border-radius: 8px !important;
    padding: 0.75rem 1rem !important;
    font-size: 0.95rem !important;
    transition: all 0.2s ease-in-out !important;
    width: 100% !important;
    box-shadow: none !important;
}

/* Effets Focus sur les champs */
.form-control:focus,
.form-select:focus,
.inputbox:focus {
    border-color: var(--primary-color) !important;
    background-color: var(--bg-card) !important;
    box-shadow: 0 0 0 4px rgba(var(--primary-color-rgb), 0.15) !important;
}

/* Textarea spécifique */
textarea.form-control {
    min-height: 150px;
    resize: vertical;
}

/* Checkbox alignement */
.form-check {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-left: 0;
}

.form-check-input {
    width: 1.1rem;
    height: 1.1rem;
    margin-top: 0;
    cursor: pointer;
    border: 1px solid var(--border-color);
    background-color: var(--bg-body);
}

.form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

/* Le bouton de soumission global et boutons d'envoi */
button[type="submit"],
.btn-primary.validate,
.contact-form button[type="submit"] {
    background: var(--primary-color) !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 0.8rem 2rem !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 6px -1px rgba(var(--primary-color-rgb), 0.1), 0 2px 4px -1px rgba(var(--primary-color-rgb), 0.06) !important;
}

button[type="submit"]:hover,
.btn-primary.validate:hover,
.contact-form button[type="submit"]:hover {
    background: var(--primary-dark) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 15px -3px rgba(var(--primary-color-rgb), 0.2), 0 4px 6px -2px rgba(var(--primary-color-rgb), 0.1) !important;
}

button[type="submit"]:active,
.btn-primary.validate:active,
.contact-form button[type="submit"]:active {
    transform: translateY(0) !important;
}

/* 15. Correction Responsive - Superposition et volet du Menu Mobile */
@media (max-width: 991px) {
    .header {
        height: auto !important;
        min-height: var(--header-height) !important;
        padding: 0.75rem 0 !important;
    }
    
    .navbar-collapse {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        width: 100% !important;
        background: var(--bg-card) !important;
        border-bottom: 1px solid var(--border-color) !important;
        padding: 1rem 1.5rem !important;
        z-index: 1000 !important;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
    }
}

/* 16. Page Tags (com_tags) - Design Premium & Sobre */
.com-tags-tag.tag-category {
    max-width: var(--article-max-width);
    margin: 0 auto;
}

/* Filtre et sélecteur de limite dans un bandeau moderne */
.com-tags__items form {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-md) !important;
    padding: 1.5rem !important;
    margin-bottom: 2.5rem !important;
    box-shadow: var(--card-shadow) !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 1rem !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* Redimensionnement et flexibilité du champ filtre */
.com-tags-tags__filter {
    display: flex !important;
    gap: 8px !important;
    flex-grow: 1 !important;
    max-width: 500px !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
}

.com-tags-tags__filter .inputbox {
    flex-grow: 1 !important;
    width: auto !important;
    max-width: 280px !important;
    margin: 0 !important;
}

.com-tags-tags__filter button {
    padding: 0.5rem 1.25rem !important;
    border-radius: 8px !important;
    font-size: 0.9rem !important;
    margin: 0 !important;
}

.com-tags__items form .float-end {
    float: none !important;
    margin-left: auto !important;
}

.com-tags__items form select.form-select {
    width: auto !important;
    min-width: 100px !important;
    padding: 0.5rem 2rem 0.5rem 1rem !important;
    font-size: 0.9rem !important;
    border-radius: 8px !important;
    background-color: var(--bg-body) !important;
}

/* Liste des articles associés au tag */
.com-tags-tag__category.list-group {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1.25rem !important;
}

/* Éléments de liste déguisés en cartes premium */
.com-tags-tag__category .list-group-item {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-md) !important;
    padding: 1.5rem 2rem !important;
    margin-bottom: 0 !important;
    transition: all 0.3s ease !important;
    box-shadow: var(--card-shadow) !important;
    display: block !important;
}

.com-tags-tag__category .list-group-item:hover {
    transform: translateX(8px) !important;
    border-color: var(--primary-color) !important;
    box-shadow: var(--card-shadow-hover) !important;
    background: var(--bg-card) !important;
}

.com-tags-tag__category .list-group-item h3 {
    margin: 0 !important;
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
}

.com-tags-tag__category .list-group-item h3 a {
    color: var(--text-main) !important;
    transition: color 0.2s ease !important;
    text-decoration: none !important;
}

.com-tags-tag__category .list-group-item h3 a:hover {
    color: var(--primary-color) !important;
    text-decoration: none !important;
}

/* 17. Alignement et style des tags à la fin des articles */
.article-tags {
    max-width: var(--article-max-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 !important;
}

.article-tags ul,
.article-tags .tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.article-tags ul li,
.article-tags a {
    display: inline-block !important;
}

.article-tags a {
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    color: var(--text-muted) !important;
    background-color: var(--bg-body) !important;
    border: 1px solid var(--border-color) !important;
    padding: 0.35rem 0.85rem !important;
    border-radius: 20px !important;
    transition: all 0.2s ease-in-out !important;
}

.article-tags a:hover {
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    background-color: rgba(var(--primary-color-rgb), 0.1) !important;
    transform: translateY(-1px) !important;
    text-decoration: none !important;
}

/* 18. Barre de progression de lecture (Reading Progress Bar) */
#reading-progress-bar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 0%;
    height: 3px !important;
    background-color: var(--primary-color) !important;
    z-index: 2000 !important; /* Reste par-dessus le header */
    transition: width 0.1s ease !important;
}

/* 19. Bouton Retour en Haut (Back to Top) Flottant */
#back-to-top {
    position: fixed !important;
    bottom: 2rem !important;
    right: 2rem !important;
    width: 46px !important;
    height: 46px !important;
    border-radius: 50% !important;
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-main) !important;
    box-shadow: var(--card-shadow) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 1040 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(10px) !important;
    transition: all 0.3s ease !important;
    outline: none !important;
    padding: 0 !important;
}

#back-to-top.show {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

#back-to-top:hover {
    background-color: var(--primary-color) !important;
    color: #ffffff !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 5px 15px rgba(var(--primary-color-rgb), 0.3) !important;
    transform: translateY(-3px) !important;
}

#back-to-top:active {
    transform: translateY(0) !important;
}

/* 20. Citations de texte (Blockquotes) Premium */
.com-content-article__body blockquote,
.article-body blockquote,
[itemprop="articleBody"] blockquote {
    border-left: 4px solid var(--primary-color) !important;
    background-color: var(--bg-alt) !important;
    padding: 1.25rem 1.75rem !important;
    margin: 2rem 0 !important;
    border-radius: 0 var(--radius-md) var(--radius-md) 0 !important;
    font-style: italic !important;
    color: var(--text-main) !important;
    font-size: 1.15rem !important;
    line-height: 1.7 !important;
}

.com-content-article__body blockquote p,
.article-body blockquote p,
[itemprop="articleBody"] blockquote p {
    margin: 0 !important;
}