/* ============================================================
   template.css — klb2026-v1
   Signature CSS de base — Karinelab
   
   SOMMAIRE
   ─────────────────────────────────────────────────────────────
   01. Variables & Thèmes (dark / light)
   02. Reset & Base
   03. Typographie — Titres
   04. Typographie — Corps de texte
   05. Liens
   06. Boutons
   07. Formulaires
   08. Images & Médias
   09. Tableaux
   10. Listes
   11. Citations (blockquote)
   12. Utilitaires génériques
   13. Structure du template (header, footer, sections)
   14. Lienstop & Flashinfo
   15. Header sticky
   16. Hero (slideshow)
   17. Footer & Copyright
   18. Joomla — Classes natives (articles, blog, pagination)
   19. Responsive (mobile-first)
   ─────────────────────────────────────────────────────────────
   Convention : préfixe klb- pour les classes du template.
   Les classes Joomla natives sont stylées sans préfixe.
============================================================ */


/* ============================================================
   01. VARIABLES & THÈMES
============================================================ */

:root {
    /* Couleurs — injectées depuis le backend via index.php
       Ces valeurs sont les fallbacks si le backend ne répond pas */
    --primary:          #e0007e;
    --primary-hover:    #ff1a99;
    --accent:           #becf00;
    --accent-dark:      #a0af00;

    /* Mode sombre (défaut) */
    --bg-color:         #1a1a1a;
    --bg-lighter:       #252525;
    --bg-darker:        #0b0b0b;
    --text-color:       #ffffff;
    --text-muted:       #d4d4d4;
    --text-subtle:      #999999;
    --border-color:     rgba(255, 255, 255, 0.08);
    --border-hover:     rgba(255, 255, 255, 0.20);

    /* Typographie */
    --font-title:       'Federo', Georgia, serif;
    --font-text:        'Montserrat', system-ui, sans-serif;
    --font-size-base:   1rem;        /* 16px */
    --line-height-base: 1.75;
    --line-height-title:1.2;
    --letter-spacing-title: 0.01em;

    /* Espacements */
    --section-padding:  0;        /* surchargé par index.php */
    --header-padding:   15px;        /* surchargé par index.php */
    --logo-height:      100px;       /* surchargé par index.php */
    --container-max:    1600px;
    --gap-base:         1.5rem;
    --gap-lg:           3rem;

    /* Bordures — Karinelab : angles droits ou très légèrement arrondis */
    --radius:           4px;
    --radius-sm:        2px;
    /* Pas de --radius-lg : on évite les grands arrondis */

    /* Ombres */
    --shadow-sm:        0 2px 8px rgba(0, 0, 0, 0.25);
    --shadow-md:        0 8px 32px rgba(0, 0, 0, 0.40);
    --shadow-primary:   0 4px 20px rgba(224, 0, 126, 0.25);

    /* Transitions */
    --transition:       0.25s ease;
    --transition-slow:  0.4s ease;

    /* Z-index */
    --z-header:         1000;
    --z-overlay:        900;
    --z-tooltip:        1100;
}

/* ── Mode clair ────────────────────────────────────────────── */
[data-theme="light"] {
    --bg-color:         #f8f9fa;
    --bg-lighter:       #ffffff;
    --bg-darker:        #ebebeb;
    --text-color:       #111111;
    --text-muted:       #444444;
    --text-subtle:      #777777;
    --border-color:     rgba(0, 0, 0, 0.08);
    --border-hover:     rgba(0, 0, 0, 0.20);
    --shadow-sm:        0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md:        0 8px 32px rgba(0, 0, 0, 0.12);
}


/* ============================================================
   02. RESET & BASE
============================================================ */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family:      var(--font-text);
    font-size:        var(--font-size-base);
    line-height:      var(--line-height-base);
    color:            var(--text-color);
    background-color: var(--bg-color);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color var(--transition-slow), color var(--transition-slow);
}

/* Conteneur générique */
.container {
    width:          100%;
    max-width:      var(--container-max) !important;
    margin-inline:  auto;
    padding-inline: 1.5rem;
}

/* Section-padding : appliqué aux sections sans padding custom */
.section-padding {
    padding-block: var(--section-padding);
}

/* Évite le cumul de padding si des modules imbriquent leurs propres sections */
.section-padding .section-padding {
    padding-block: 0;
}


/* ============================================================
   03. TYPOGRAPHIE — TITRES
   Federo pour H1–H3, Montserrat semi-bold pour H4–H6
============================================================ */

h1, h2, h3,
.titre-federo {
    font-family:    var(--font-title);
    font-weight:    400; /* Federo est naturellement fin et élégant */
    line-height:    var(--line-height-title);
    letter-spacing: var(--letter-spacing-title);
    color:          var(--text-color);
}

h4, h5, h6 {
    font-family:    var(--font-text);
    font-weight:    600;
    line-height:    1.3;
    color:          var(--primary);
}

h1 { font-size: clamp(2.2rem, 5vw, 4rem);   margin-bottom: 1.25rem; }
h2 { font-size: clamp(1.8rem, 3.5vw, 3rem); margin-bottom: 1rem; }
h3 { font-size: clamp(1.4rem, 2.5vw, 2rem); margin-bottom: 0.875rem; }
h4 { font-size: 1.25rem;                     margin-bottom: 0.75rem; }
h5 { font-size: 1.05rem;                     margin-bottom: 0.5rem; }
h6 { font-size: 0.9rem;  text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.5rem; }

/* Surtitre — petit label coloré au-dessus d'un H2 */
.klb-surtitre {
    display: block;
    font-family:    var(--font-text);
    font-size:      0.8rem;
    font-weight:    600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color:          var(--primary);
    margin-bottom:  0.5rem;
}

/* Mode clair : titres H1–H3 en couleur foncée */
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] .titre-federo {
    color: var(--text-color);
}


/* ============================================================
   04. TYPOGRAPHIE — CORPS DE TEXTE
============================================================ */

p {
    margin-bottom:  1.25rem;
    color:          var(--text-muted);
    font-weight:    400;
    max-width:      72ch; /* Lisibilité optimale */
}

/* Dans les sections pleine largeur, on lève la limite */
.klb-hero p,
.klb-section p {
    max-width: none;
}

/* Texte d'introduction mis en avant */
.klb-intro {
    font-size:   1.15rem;
    font-weight: 400;
    color:       var(--text-color);
}

/* Texte secondaire discret */
.klb-muted {
    color:       var(--text-subtle);
    font-size:   0.875rem;
    font-weight: 400;
}

strong, b {
    font-weight: 600;
    color:       var(--text-color);
}

em, i {
    font-style: italic;
}

small {
    font-size:   0.8rem;
    color:       var(--text-subtle);
}

/* Texte en couleur primaire */
.text-primary   { color: var(--primary) !important; }
.text-accent    { color: var(--accent) !important; }
.text-muted     { color: var(--text-muted) !important; }
.text-subtle    { color: var(--text-subtle) !important; }
.text-white     { color: #ffffff !important; }

/* Alignements */
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }


/* ============================================================
   05. LIENS
============================================================ */

a {
    color:           var(--primary);
    text-decoration: none;
    transition:      color var(--transition), opacity var(--transition);
}

a:hover, a:focus-visible {
    color:      var(--primary-hover);
    opacity:    0.9;
}

a:focus-visible {
    outline:        2px solid var(--primary);
    outline-offset: 3px;
    border-radius:  var(--radius-sm);
}

/* Lien discret (texte courant) */
.klb-link-subtle {
    color:           var(--text-muted);
    text-decoration: underline;
    text-decoration-color: transparent;
    transition: text-decoration-color var(--transition), color var(--transition);
}
.klb-link-subtle:hover {
    color:                  var(--text-color);
    text-decoration-color:  var(--primary);
}


/* ============================================================
   06. BOUTONS
   Karinelab : angles à 4px, pas de pill, pas de full-rounded
============================================================ */

.btn,
button.btn,
a.btn,
input[type="submit"],
input[type="button"],
input[type="reset"] {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             0.5rem;
    padding:         0.75rem 2rem;
    font-family:     var(--font-text);
    font-size:       0.875rem;
    font-weight:     600;
    letter-spacing:  0.08em;
    text-transform:  uppercase;
    text-decoration: none;
    border:          1px solid transparent;
    border-radius:   var(--radius);
    cursor:          pointer;
    transition:      background-color var(--transition),
                     color            var(--transition),
                     border-color     var(--transition),
                     box-shadow       var(--transition);
    white-space:     nowrap;
    line-height:     1;
}

/* Bouton primaire — fuchsia plein */
.btn-primary {
    background-color: var(--primary);
    border-color:     var(--primary);
    color:            #ffffff;
}
.btn-primary:hover, .btn-primary:focus-visible {
    background-color: #ffffff;
    border-color:     #ffffff;
    color:            var(--primary);
    box-shadow:       var(--shadow-primary);
}

/* Bouton outline — bordure fuchsia */
.btn-outline {
    background-color: transparent;
    border-color:     var(--primary);
    color:            var(--primary);
}
.btn-outline:hover, .btn-outline:focus-visible {
    background-color: var(--primary);
    color:            #ffffff;
}

/* Bouton outline blanc — sur fonds sombres */
.btn-outline-white {
    background-color: transparent;
    border-color:     rgba(255, 255, 255, 0.6);
    color:            #ffffff;
}
.btn-outline-white:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color:     #ffffff;
}

/* Bouton ghost discret */
.btn-ghost {
    background-color: transparent;
    border-color:     var(--border-color);
    color:            var(--text-muted);
}
.btn-ghost:hover {
    border-color:     var(--border-hover);
    color:            var(--text-color);
}

/* Tailles */
.btn-sm { padding: 0.5rem 1.25rem; font-size: 0.8rem; }
.btn-lg { padding: 1rem 2.5rem;    font-size: 1rem; }
.btn-full { width: 100%; }

/* État désactivé */
.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: 0.45;
    cursor:  not-allowed;
    pointer-events: none;
}


/* ============================================================
   07. FORMULAIRES
   Sobres, angulaires, lisibles — Convert Forms & natifs Joomla
============================================================ */

fieldset {
    border:        1px solid var(--border-color);
    border-radius: var(--radius);
    padding:       1.5rem;
    margin-bottom: 1.5rem;
}

legend {
    font-family:  var(--font-text);
    font-weight:  600;
    font-size:    0.9rem;
    color:        var(--primary);
    padding:      0 0.5rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

label {
    display:       block;
    font-size:     0.85rem;
    font-weight:   500;
    color:         var(--text-muted);
    margin-bottom: 0.4rem;
    letter-spacing: 0.02em;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="date"],
textarea,
select {
    display:          block;
    width:            100%;
    padding:          0.75rem 1rem;
    font-family:      var(--font-text);
    font-size:        0.9rem;
    font-weight:      400;
    color:            var(--text-color);
    background-color: var(--bg-lighter);
    border:           1px solid var(--border-color);
    border-radius:    var(--radius);
    transition:       border-color var(--transition), box-shadow var(--transition);
    outline:          none;
    appearance:       none;
    -webkit-appearance: none;
}

input::placeholder,
textarea::placeholder {
    color:       var(--text-subtle);
    font-weight: 400;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--primary);
    box-shadow:   0 0 0 3px rgba(224, 0, 126, 0.15);
}

textarea {
    resize:     vertical;
    min-height: 120px;
}

select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23999' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat:   no-repeat;
    background-position: right 1rem center;
    padding-right:       2.5rem;
}

/* Groupe champ + bouton inline */
.klb-input-group {
    display:   flex;
    gap:       0;
}
.klb-input-group input {
    border-radius: var(--radius) 0 0 var(--radius);
    flex:          1;
}
.klb-input-group .btn {
    border-radius: 0 var(--radius) var(--radius) 0;
    flex-shrink:   0;
}

/* Message d'erreur champ */
.klb-field-error {
    font-size:    0.8rem;
    color:        #ff4d6a;
    margin-top:   0.3rem;
    display:      block;
}

/* Mode clair — formulaires */
[data-theme="light"] input[type="text"],
[data-theme="light"] input[type="email"],
[data-theme="light"] input[type="tel"],
[data-theme="light"] textarea,
[data-theme="light"] select {
    background-color: #ffffff;
    border-color:     rgba(0, 0, 0, 0.15);
    color:            var(--text-color);
}


/* ============================================================
   08. IMAGES & MÉDIAS
============================================================ */

img, video, iframe {
    max-width:    100%;
    height:       auto;
    display:      block;
    border-radius: var(--radius);
}

/* Image pleine largeur */
.klb-img-full {
    width:         100%;
    object-fit:    cover;
    border-radius: var(--radius);
}

/* Image avec effet hover subtil */
.klb-img-hover {
    transition: transform var(--transition-slow), filter var(--transition-slow);
}
.klb-img-hover:hover {
    transform: scale(1.02);
    filter:    brightness(1.08);
}

/* Ratio fixe (utile pour les cards) */
.klb-ratio-16-9  { aspect-ratio: 16 / 9;  overflow: hidden; }
.klb-ratio-4-3   { aspect-ratio: 4  / 3;  overflow: hidden; }
.klb-ratio-1-1   { aspect-ratio: 1  / 1;  overflow: hidden; }
.klb-ratio-16-9 img,
.klb-ratio-4-3  img,
.klb-ratio-1-1  img { width: 100%; height: 100%; object-fit: cover; }

/* Légende image */
figcaption {
    font-size:  0.8rem;
    color:      var(--text-subtle);
    text-align: center;
    margin-top: 0.5rem;
}

/* Dégradé obsolète retiré à la demande du client */


/* ============================================================
   09. TABLEAUX
============================================================ */

table {
    width:           100%;
    border-collapse: collapse;
    font-size:       0.9rem;
    margin-bottom:   1.5rem;
}

thead th {
    font-family:    var(--font-text);
    font-weight:    600;
    font-size:      0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:          var(--primary);
    padding:        0.75rem 1rem;
    border-bottom:  2px solid var(--primary);
    text-align:     left;
}

tbody td {
    padding:       0.7rem 1rem;
    border-bottom: 1px solid var(--border-color);
    color:         var(--text-muted);
    vertical-align: middle;
}

tbody tr:hover {
    background-color: var(--bg-lighter);
}

tbody tr:last-child td {
    border-bottom: none;
}


/* ============================================================
   10. LISTES
============================================================ */

ul, ol {
    padding-left:  1.5rem;
    margin-bottom: 1.25rem;
    color:         var(--text-muted);
}

li {
    margin-bottom: 0.4rem;
    line-height:   var(--line-height-base);
}

/* Liste sans puce (utile pour les menus et listes de features) */
.list-none {
    list-style:  none;
    padding-left: 0;
}

/* Liste avec check Karinelab (accent vert citron) */
.klb-checklist {
    list-style: none;
    padding-left: 0;
}
.klb-checklist li {
    padding:        0.5rem 0;
    padding-left:   1.75rem;
    position:       relative;
    border-bottom:  1px solid var(--border-color);
    color:          var(--text-muted);
}
.klb-checklist li:last-child {
    border-bottom: none;
}
.klb-checklist li::before {
    content:   '\2713'; /* ✓ */
    position:  absolute;
    left:      0;
    color:     var(--accent);
    font-weight: 700;
    font-size: 1rem;
}


/* ============================================================
   11. CITATIONS (blockquote)
============================================================ */

blockquote {
    margin:        2rem 0;
    padding:       1.5rem 1.5rem 1.5rem 2rem;
    border-left:   3px solid var(--primary);
    background:    var(--bg-lighter);
    border-radius: 0 var(--radius) var(--radius) 0;
}

blockquote p {
    font-size:   1.1rem;
    font-style:  italic;
    color:       var(--text-color);
    font-weight: 400;
    margin-bottom: 0;
}

blockquote cite {
    display:     block;
    margin-top:  0.75rem;
    font-size:   0.8rem;
    font-style:  normal;
    font-weight: 600;
    color:       var(--primary);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}


/* ============================================================
   12. UTILITAIRES GÉNÉRIQUES
============================================================ */

/* Backgrounds */
.bg-primary     { background-color: var(--primary) !important; }
.bg-accent      { background-color: var(--accent) !important; }
.bg-lighter     { background-color: var(--bg-lighter) !important; }
.bg-darker      { background-color: var(--bg-darker) !important; }
.bg-transparent { background-color: transparent !important; }

/* Flexbox rapide */
.d-flex          { display: flex; }
.align-center    { align-items: center; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.flex-wrap       { flex-wrap: wrap; }
.gap-1           { gap: 0.5rem; }
.gap-2           { gap: 1rem; }
.gap-3           { gap: 1.5rem; }
.gap-4           { gap: 2rem; }

/* Grid responsive automatique */
.klb-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap:                   var(--gap-base);
}

/* Séparateur */
hr {
    border:          none;
    border-top:      1px solid var(--border-color);
    margin-block:    2rem;
}

/* Visibilité */
.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Carte de base — neutre, angulaire, premium */
.klb-card {
    background:    var(--bg-lighter);
    border:        1px solid var(--border-color);
    border-radius: var(--radius);
    padding:       2rem;
    transition:    border-color var(--transition), box-shadow var(--transition);
}
.klb-card:hover {
    border-color: rgba(224, 0, 126, 0.3);
    box-shadow:   var(--shadow-md);
}


/* ============================================================
   13. STRUCTURE DU TEMPLATE
============================================================ */

.klb-body {
    display:        flex;
    flex-direction: column;
    min-height:     100vh;
}

#klb-main {
    flex: 1;
}

/* Sections user — suppression totale si vide */
.klb-section:empty {
    display: none;
    padding: 0;
    margin:  0;
}


/* ============================================================
   14. LIENSTOP & FLASHINFO
============================================================ */

/* Lienstop — barre très fine tout en haut */
.klb-lienstop {
    background-color: var(--bg-darker);
    padding:          0.4rem 1.5rem;
    font-size:        0.8rem;
    display:          flex;
    align-items:      center;
    justify-content:  space-between;
    flex-wrap:        wrap;
    gap:              0.5rem;
    color:            var(--text-subtle);
}
.klb-lienstop a {
    color:      var(--text-subtle);
    transition: color var(--transition);
}
.klb-lienstop a:hover { color: var(--primary); }

/* Icônes réseaux sociaux dans lienstop */
.klb-lienstop .klb-socials {
    display:     flex;
    align-items: center;
    gap:         0.75rem;
}
.klb-lienstop .klb-socials a {
    font-size:  1rem;
    line-height: 1;
}

[data-theme="light"] .klb-lienstop {
    background-color: var(--bg-darker);
}

/* Flashinfo — barre ticker */
.klb-flashinfo {
    background-color: #0d0d0d;
    padding:          0.5rem 1.5rem;
    font-size:        0.85rem;
    border-bottom:    1px solid var(--border-color);
    overflow:         hidden;
}
[data-theme="light"] .klb-flashinfo {
    background-color: #111111;
}

/* Badge FLASH INFO */
.klb-flash-badge {
    display:          inline-block;
    background-color: var(--primary);
    color:            #ffffff;
    font-size:        0.7rem;
    font-weight:      700;
    letter-spacing:   0.1em;
    text-transform:   uppercase;
    padding:          0.2rem 0.6rem;
    border-radius:    var(--radius-sm);
    margin-right:     0.75rem;
    vertical-align:   middle;
    flex-shrink:      0;
}


/* ============================================================
   15. HEADER STICKY
============================================================ */

.klb-header {
    position:         sticky;
    top:              0;
    z-index:          var(--z-header);
    background-color: var(--bg-darker);
    border-bottom:    1px solid var(--border-color);
    backdrop-filter:  blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition:       background-color var(--transition-slow),
                      box-shadow var(--transition);
}

.klb-header.scrolled {
    position: fixed;
    width: 100%;
    left: 0;
    box-shadow: var(--shadow-md);
    background-color: rgba(10, 10, 10, 0.65); /* Header transparent au scroll (Dark) */
}

[data-theme="light"] .klb-header {
    background-color: rgba(248, 249, 250, 0.75); /* Transparence initiale (Light) */
    border-bottom-color: var(--border-color);
}
[data-theme="light"] .klb-header.scrolled {
    background-color: rgba(255, 255, 255, 0.65); /* Transparence au scroll (Light) */
}

.klb-header-inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             1.5rem;
    max-width:       var(--container-max);
    margin-inline:   auto;
    padding:         var(--header-padding) 1.5rem;
}

/* Logo */
.klb-logo a { display: block; line-height: 0; }
.klb-logo img {
    height:     var(--logo-height);
    width:      auto;
    transition: opacity var(--transition);
    border-radius: 0; /* Pas d'arrondi sur le logo */
}
.klb-logo a:hover img { opacity: 0.85; }

/* Commutation logo selon le thème */
.logo-dark-version  { display: none; }
.logo-light-version { display: block; }

[data-theme="light"] .logo-light-version { display: none; }
[data-theme="light"] .logo-dark-version  { display: block; }

/* Navigation */
.klb-nav { flex: 1; display: flex; justify-content: flex-end; }

/* Bouton toggle thème */
.klb-theme-toggle {
    display:         flex;
    align-items:     center;
    gap:             0.4rem;
    background:      transparent;
    border:          1px solid var(--border-color);
    border-radius:   var(--radius);
    color:           var(--text-muted);
    font-family:     var(--font-text);
    font-size:       0.78rem;
    font-weight:     500;
    padding:         0.4rem 0.8rem;
    cursor:          pointer;
    white-space:     nowrap;
    transition:      border-color var(--transition), color var(--transition);
    flex-shrink:     0;
}
.klb-theme-toggle:hover {
    border-color: var(--primary);
    color:        var(--primary);
}

/* Hamburger mobile */
.klb-hamburger {
    display:         none;
    flex-direction:  column;
    justify-content: space-between;
    width:           24px;
    height:          18px;
    background:      transparent;
    border:          none;
    cursor:          pointer;
    padding:         0;
    flex-shrink:     0;
}
.klb-hamburger span {
    display:          block;
    width:            100%;
    height:           2px;
    background-color: var(--text-color);
    border-radius:    var(--radius-sm);
    transition:       transform var(--transition), opacity var(--transition);
}
.klb-hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.klb-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.klb-hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }


/* ============================================================
   16. HERO (slideshow)
============================================================ */

.klb-hero {
    position:        relative;
    width:           100%;
    min-height:      85vh;
    display:         flex;
    align-items:     center;
    overflow:        hidden;
    background-color: var(--bg-darker);
}


/* ============================================================
   17. FOOTER & COPYRIGHT
============================================================ */

.klb-footer {
    background-color: var(--bg-darker);
    border-top:       1px solid var(--border-color);
    padding-block:    var(--section-padding);
}

.klb-footer-grid {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   var(--gap-lg);
    max-width:             var(--container-max);
    margin-inline:         auto;
    padding-inline:        1.5rem;
}

.klb-footer-col h4 {
    font-family:   var(--font-title);
    font-size:     1.1rem;
    font-weight:   400;
    color:         #ffffff;
    margin-bottom: 1.25rem;
}
.klb-footer-col p,
.klb-footer-col li,
.klb-footer-col a {
    font-size:   0.875rem;
    color:       var(--text-muted);
    line-height: 2;
}
.klb-footer-col a:hover { color: var(--primary); }

/* Copyright */
.klb-copyright {
    background-color: #080808;
    border-top:       1px solid var(--border-color);
    padding:          1rem 1.5rem;
    text-align:       center;
}
.klb-copyright-text {
    font-size:   0.78rem;
    color:       var(--text-subtle);
    margin:      0;
    max-width:   none;
    font-weight: 400;
}
.klb-copyright-text a {
    color:      var(--primary);
    font-weight: 600;
}
.klb-copyright-text a:hover { color: var(--primary-hover); }


/* ============================================================
   18. JOOMLA — CLASSES NATIVES
   Articles, blog, catégories, pagination, modules
============================================================ */

/* ── Blog / liste d'articles ── */
.blog, .blog-featured {
    max-width: var(--container-max);
    margin:    0 auto;
    padding:   var(--section-padding) 1.5rem;
}

.items-row {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap:                   var(--gap-base);
    margin-bottom:         var(--gap-base);
}

/* Article card en mode blog */
.item.column-1,
.item.column-2,
.item.column-3 {
    background:    var(--bg-lighter);
    border:        1px solid var(--border-color);
    border-radius: var(--radius);
    overflow:      hidden;
    transition:    border-color var(--transition), box-shadow var(--transition);
}
.item.column-1:hover,
.item.column-2:hover,
.item.column-3:hover {
    border-color: rgba(224, 0, 126, 0.3);
    box-shadow:   var(--shadow-md);
}

/* Image article */
.item-image {
    width:         100%;
    aspect-ratio:  16 / 9;
    overflow:      hidden;
}
.item-image img {
    width:       100%;
    height:      100%;
    object-fit:  cover;
    border-radius: 0;
    transition:  transform var(--transition-slow);
}
.item.column-1:hover .item-image img,
.item.column-2:hover .item-image img {
    transform: scale(1.03);
}

/* Contenu article card */
.item-content-wrapper,
.page-header ~ .item-content {
    padding: 1.5rem;
}

/* Catégorie au-dessus du titre */
.item-category,
.article-info-term {
    font-size:      0.75rem;
    font-weight:    700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--primary);
    display:        inline-block;
    margin-bottom:  0.5rem;
}

/* Titre article */
.item-title,
.page-header h2,
.article-header h2 {
    font-family:   var(--font-title);
    font-weight:   400;
    font-size:     clamp(1.2rem, 2vw, 1.6rem);
    line-height:   var(--line-height-title);
    color:         var(--text-color);
    margin-bottom: 0.75rem;
}
.item-title a,
.page-header h2 a {
    color:      var(--text-color);
    transition: color var(--transition);
}
.item-title a:hover,
.page-header h2 a:hover { color: var(--primary); }

/* Infos article (date, auteur) */
.article-info,
.com-content-article__info {
    font-size:     0.78rem;
    color:         var(--text-subtle);
    margin-bottom: 0.75rem;
    display:       flex;
    flex-wrap:     wrap;
    gap:           0.5rem;
    align-items:   center;
}
.article-info dd,
.article-info dt { margin: 0; }

/* Intro texte */
.item-intro-text p,
.article-intro-text p {
    font-size:   0.9rem;
    line-height: 1.7;
    color:       var(--text-muted);
}

/* Lire la suite */
.readmore a,
.com-content-article__readmore a {
    display:        inline-flex;
    align-items:    center;
    gap:            0.4rem;
    font-size:      0.8rem;
    font-weight:    600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:          var(--primary);
    margin-top:     1rem;
    transition:     gap var(--transition), color var(--transition);
}
.readmore a::after {
    content:     '→';
    transition:  transform var(--transition);
}
.readmore a:hover::after { transform: translateX(4px); }

/* Article vedette (introtext) */
.leading-0 {
    margin-bottom: var(--gap-base);
}

/* ── Article complet (vue single) ── */
.com-content-article {
    max-width:      780px;
    margin-inline:  auto;
    padding:        var(--section-padding) 1.5rem;
}

.com-content-article h1,
.page-header h1 {
    margin-bottom: 0.5rem;
}

.com-content-article .article-info {
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.com-content-article .article-fulltext p {
    max-width: 72ch;
}

/* ── Pagination Joomla ── */
.pagination,
.com-content-category__pagination {
    display:         flex;
    justify-content: center;
    align-items:     center;
    gap:             0.35rem;
    flex-wrap:       wrap;
    margin-top:      2.5rem;
    padding-top:     1.5rem;
    border-top:      1px solid var(--border-color);
}

.pagination .page-item .page-link,
.pagination li a,
.pagination li span {
    display:          inline-flex;
    align-items:      center;
    justify-content:  center;
    min-width:        2.2rem;
    height:           2.2rem;
    padding:          0 0.6rem;
    font-family:      var(--font-text);
    font-size:        0.85rem;
    font-weight:      500;
    color:            var(--text-muted);
    background:       var(--bg-lighter);
    border:           1px solid var(--border-color);
    border-radius:    var(--radius);
    text-decoration:  none;
    transition:       background var(--transition),
                      border-color var(--transition),
                      color var(--transition);
}
.pagination .page-item.active .page-link,
.pagination li.active a,
.pagination li.active span {
    background:   var(--primary);
    border-color: var(--primary);
    color:        #ffffff;
}
.pagination .page-item .page-link:hover,
.pagination li a:hover {
    border-color: var(--primary);
    color:        var(--primary);
}

/* ── Fil d'Ariane ── */
.breadcrumb,
#system-message + .breadcrumb {
    display:     flex;
    flex-wrap:   wrap;
    gap:         0.4rem;
    font-size:   0.8rem;
    color:       var(--text-subtle);
    padding:     0.75rem 0;
    margin:      0;
    list-style:  none;
}
.breadcrumb-item + .breadcrumb-item::before {
    content: '/';
    margin-right: 0.4rem;
    color: var(--text-subtle);
}
.breadcrumb-item a { color: var(--text-subtle); }
.breadcrumb-item a:hover { color: var(--primary); }
.breadcrumb-item.active { color: var(--text-muted); }

/* ── Messages système Joomla ── */
#system-message-container { max-width: var(--container-max); margin: 1rem auto; padding-inline: 1.5rem; }
.alert {
    padding:       1rem 1.25rem;
    border-radius: var(--radius);
    border-left:   3px solid transparent;
    font-size:     0.9rem;
    margin-bottom: 1rem;
}
.alert-success { background: rgba(190, 207, 0, 0.1);  border-color: var(--accent);  color: var(--accent); }
.alert-warning { background: rgba(255, 193, 7, 0.1);  border-color: #ffc107;        color: #ffc107; }
.alert-error,
.alert-danger  { background: rgba(255, 77, 106, 0.1); border-color: #ff4d6a;        color: #ff4d6a; }
.alert-info    { background: rgba(224, 0, 126, 0.1);  border-color: var(--primary); color: var(--primary); }

/* ── Modules Joomla (style par défaut) ── */
.moduletable {
    margin-bottom: 0;
}
.moduletable h3,
.moduletable .module-title {
    font-family:   var(--font-text);
    font-size:     0.8rem;
    font-weight:   700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:         var(--primary);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
}


/* ============================================================
   19. RESPONSIVE — Mobile-first
   Breakpoints : sm 480 / md 768 / lg 1024 / xl 1280
============================================================ */

/* ── md : tablette ── */
@media (max-width: 1024px) {
    .klb-footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap:                   var(--gap-base);
    }
    .items-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ── sm : mobile ── */
@media (max-width: 768px) {

    /* Typography */
    h1 { font-size: 2rem; }
    h2 { font-size: 1.6rem; }
    h3 { font-size: 1.3rem; }

    /* Sections — supprime les min-height plein écran */
    .klb-section[style*="min-height:100vh"],
    .klb-section[style*="min-height: 100vh"] {
        min-height:     auto !important;
        display:        block !important;
        align-items:    initial !important;
        padding-block:  var(--section-padding) !important;
    }

    /* Header */
    .klb-hamburger    { display: flex; }
    .klb-nav          { display: none; position: absolute; top: 100%; left: 0; right: 0;
                        background: var(--bg-darker); border-top: 1px solid var(--border-color);
                        padding: 1rem 1.5rem; z-index: var(--z-overlay); }
    .klb-nav.is-open  { display: block; }
    .klb-toggle-label { display: none; }

    /* Lienstop simplifié */
    .klb-lienstop     { flex-direction: column; text-align: center; gap: 0.25rem; }

    /* Footer */
    .klb-footer-grid  { grid-template-columns: 1fr; gap: var(--gap-base); }

    /* Blog */
    .items-row        { grid-template-columns: 1fr; }

    /* Boutons pleine largeur sur mobile si classe présente */
    .btn-mobile-full  { width: 100%; }

    /* Input group empilé */
    .klb-input-group  { flex-direction: column; }
    .klb-input-group input,
    .klb-input-group .btn { border-radius: var(--radius); }

    /* Hero */
    .klb-hero         { min-height: 60vh; }

    /* Container */
    .container        { padding-inline: 1rem; }
}

/* ── xs : très petit mobile ── */
@media (max-width: 480px) {
    :root { --section-padding: 0; }
    h1    { font-size: 1.75rem; }
}
