/* ============================================================
   THEME : DARK
   En-tête sombre 2 colonnes + footer sombre (sans newsletter)
   ------------------------------------------------------------
   Palette de base :
     primary    : #F3F3F3  (texte clair)
     fond       : #1e2535  (fond principal sombre)
     decor/icon : #a72750  (accent)
     variantes  : #1C1B1B / #252525 / #D6D6D6
     headings   : Racing Sans One
     texte      : Work Sans
   ============================================================ */


/* ============================================================
   1. VARIABLES (racine)
   Regroupées par catégorie pour une meilleure hiérarchie.
   ============================================================ */
:root {
    /* --- Couleurs de texte --- */
    --dark-primary: #F3F3F3;        /* texte clair */
    --dark-muted: #D6D6D6;          /* texte secondaire */
    --dark-muted-soft: rgba(214, 214, 214, 0.7); /* texte secondaire atténué */
    --dark-white: #ffffff;          /* blanc pur (fonds clairs / inversion) */

    /* --- Fonds --- */
    --dark-bg: #1e2535;             /* fond principal sombre */
    --dark-bg-2: #252525;           /* variante de fond */
    --dark-bg-3: #1C1B1B;           /* variante de fond la plus profonde */

    /* --- Couleur d'accent (decor / icônes) --- */
    --dark-decor: #a72750;          /* accent principal */
    --dark-decor-dark: #8d1f42;     /* accent foncé */
    --dark-decor-light: #c5325f;    /* accent clair (survol) */

    /* --- Transparences accent (dérivées de --dark-decor) --- */
    --dark-decor-08: rgba(167, 39, 80, 0.08);
    --dark-decor-12: rgba(167, 39, 80, 0.12);
    --dark-decor-20: rgba(167, 39, 80, 0.20);

    /* --- Transparences blanc (dérivées de --dark-white) --- */
    --dark-white-08: rgba(255, 255, 255, 0.08);
    --dark-white-10: rgba(255, 255, 255, 0.10);
    --dark-white-15: rgba(255, 255, 255, 0.15);

    /* --- Ombres (dérivées du noir) --- */
    --dark-shadow-sm: rgba(0, 0, 0, 0.18);
    --dark-shadow-md: rgba(0, 0, 0, 0.35);
    --dark-shadow-lg: rgba(0, 0, 0, 0.45);
    --dark-shadow-xl: rgba(0, 0, 0, 0.50);

    /* --- Typographie --- */
    --dark-heading-font: 'Racing Sans One', 'Work Sans', sans-serif;
    --dark-body-font: 'Work Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}


/* ============================================================
   2. BASE
   ============================================================ */
body {
    font-family: var(--dark-body-font);
    color: var(--dark-primary);
    background: var(--dark-bg-3);
}

.header-dark h1,
.header-dark h2,
.header-dark h3,
.header-dark h4,
.header-dark h5,
.header-dark h6,
.footer-dark h1,
.footer-dark h2,
.footer-dark h3,
.footer-dark h4,
.footer-dark h5,
.footer-dark h6 {
    font-family: var(--dark-heading-font);
    font-weight: 400;
    letter-spacing: 0.5px;
}

a {
    color: var(--dark-decor);
}


/* ============================================================
   3. HEADER DARK
   ============================================================ */
.header-dark {
    position: relative;
    z-index: 100;
}

.header-dark .row.header-dark-row {
    align-items: stretch;
}

/* --- Logo --- */
.header-dark-logo {
    border-bottom-right-radius: 10px;
    background: var(--dark-bg);
    padding: 18px 10px;
}

.header-dark-logo img {
    max-width: 100%;
    height: auto;
    transition: transform 0.3s ease;
	width:100%;
}

.header-dark-logo img:hover {
    transform: scale(1.03);
}

.header-dark-right {
    padding: 0;
}

/* --- Barre info supérieure --- */
.header-dark-top {
    background: transparent;
    border-bottom: 1px solid var(--dark-white-08);
    padding: 10px 0;
    font-size: 0.85rem;
}

.header-dark-top .coords {
    font-size: 13px;
    line-height: 1.5;
    color: var(--dark-primary);
}

.header-dark-top .coords .address,
.header-dark-top .coords .phone,
.header-dark-top .coords .email,
.header-dark-top .coords .hours {
    color: var(--dark-primary);
}

.header-dark-top .coords a {
    color: var(--dark-primary);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.header-dark-top .coords a:hover {
    color: var(--dark-decor-light);
}

/* --- Icônes décor sur fond sombre --- */
.header-dark-top .coords i,
.header-dark .coords i {
    background: var(--dark-decor);
    color: var(--dark-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    width: 32px;
    min-width: 32px;
    font-size: 14px;
    transition: all 0.3s ease;
}

.header-dark-top .coords i:hover,
.header-dark .coords a:hover i,
.header-dark .coords .address:hover i {
    background: var(--dark-decor-light);
    transform: translateY(-2px) scale(1.05);
}

/* --- Réseaux sociaux --- */
.header-dark .social .cta-social,
.header-dark-top-actions .social .cta-social {
    background: var(--dark-white-10);
    border-radius: 50%;
    color: var(--dark-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    width: 34px;
    min-width: 34px;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.header-dark .social .cta-social:hover,
.header-dark-top-actions .social .cta-social:hover {
    background: var(--dark-decor);
    color: var(--dark-primary);
    transform: translateY(-2px);
}

/* --- Bouton devis (pastille ronde >= 1024px, pilule avec texte sinon) --- */
.btn-devis-top {
    background: var(--dark-decor);
    color: var(--dark-primary);
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 34px;
    min-height: 34px;
    padding: 0 16px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    white-space: nowrap;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px var(--dark-decor-20);
}

.btn-devis-top i {
    font-size: 15px;
}

.btn-devis-top:hover {
    background: var(--dark-decor-light);
    color: var(--dark-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 14px var(--dark-decor-20);
}

/* --- Navigation inférieure (fond blanc) --- */
.header-dark-nav {
    background: var(--dark-white);
    padding: 12px 0;
}

.header-dark-nav .top-menu .main-navigation {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

.header-dark-nav .top-menu .main-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.header-dark-nav .top-menu .main-navigation li {
    position: relative;
}

.header-dark-nav .top-menu .main-navigation a {
    color: var(--dark-bg);
    font-family: var(--dark-body-font);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.3px;
    padding: 10px 16px;
    border-radius: 4px;
    position: relative;
    display: block;
    text-transform: uppercase;
    transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Soulignement animé qui grandit depuis le centre */
.header-dark-nav .top-menu .main-navigation a::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 4px;
    width: 0;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--dark-decor), var(--dark-decor-light));
    transform: translateX(-50%);
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.header-dark-nav .top-menu .main-navigation a:hover {
    color: var(--dark-decor);
}

.header-dark-nav .top-menu .main-navigation a:hover::after {
    width: calc(100% - 32px);
}

.header-dark-nav .top-menu .main-navigation .current-menu-item > a,
.header-dark-nav .top-menu .main-navigation .current-menu-ancestor > a {
    color: var(--dark-decor);
    font-weight: 600;
}

.header-dark-nav .top-menu .main-navigation .current-menu-item > a::after,
.header-dark-nav .top-menu .main-navigation .current-menu-ancestor > a::after {
    width: calc(100% - 32px);
}

/* --- Sous-menu (panneau sombre inversé, entrées en cascade) --- */
.header-dark-nav .top-menu .main-navigation .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 250px;
    background: var(--dark-bg);
    border: 1px solid var(--dark-white-10);
    border-radius: 14px;
    box-shadow: 0 20px 48px var(--dark-shadow-lg);
    padding: 10px;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-12px) scale(0.96);
    transform-origin: top left;
    transition: opacity 0.32s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.38s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0.32s;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Petit chevron décoratif en haut du panneau */
.header-dark-nav .top-menu .main-navigation .sub-menu::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 24px;
    width: 12px;
    height: 12px;
    background: var(--dark-bg);
    border-left: 1px solid var(--dark-white-10);
    border-top: 1px solid var(--dark-white-10);
    transform: rotate(45deg);
    border-radius: 2px 0 0 0;
}

.header-dark-nav .top-menu .main-navigation .menu-item-has-children:hover > .sub-menu,
.header-dark-nav .top-menu .main-navigation .menu-item-has-children:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

/* Entrées en cascade */
.header-dark-nav .top-menu .main-navigation .sub-menu li {
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.header-dark-nav .top-menu .main-navigation .menu-item-has-children:hover > .sub-menu li,
.header-dark-nav .top-menu .main-navigation .menu-item-has-children:focus-within > .sub-menu li {
    opacity: 1;
    transform: translateX(0);
}

.header-dark-nav .top-menu .main-navigation .menu-item-has-children:hover > .sub-menu li:nth-child(1),
.header-dark-nav .top-menu .main-navigation .menu-item-has-children:focus-within > .sub-menu li:nth-child(1) { transition-delay: 0.04s; }
.header-dark-nav .top-menu .main-navigation .menu-item-has-children:hover > .sub-menu li:nth-child(2),
.header-dark-nav .top-menu .main-navigation .menu-item-has-children:focus-within > .sub-menu li:nth-child(2) { transition-delay: 0.08s; }
.header-dark-nav .top-menu .main-navigation .menu-item-has-children:hover > .sub-menu li:nth-child(3),
.header-dark-nav .top-menu .main-navigation .menu-item-has-children:focus-within > .sub-menu li:nth-child(3) { transition-delay: 0.12s; }
.header-dark-nav .top-menu .main-navigation .menu-item-has-children:hover > .sub-menu li:nth-child(4),
.header-dark-nav .top-menu .main-navigation .menu-item-has-children:focus-within > .sub-menu li:nth-child(4) { transition-delay: 0.16s; }
.header-dark-nav .top-menu .main-navigation .menu-item-has-children:hover > .sub-menu li:nth-child(5),
.header-dark-nav .top-menu .main-navigation .menu-item-has-children:focus-within > .sub-menu li:nth-child(5) { transition-delay: 0.20s; }
.header-dark-nav .top-menu .main-navigation .menu-item-has-children:hover > .sub-menu li:nth-child(n+6),
.header-dark-nav .top-menu .main-navigation .menu-item-has-children:focus-within > .sub-menu li:nth-child(n+6) { transition-delay: 0.24s; }

.header-dark-nav .top-menu .main-navigation .sub-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--dark-muted);
    border-radius: 9px;
    transition: color 0.3s ease, background 0.3s ease, padding-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    white-space: nowrap;
}

/* Puce décorative qui se remplit au survol */
.header-dark-nav .top-menu .main-navigation .sub-menu a::before {
    content: '';
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--dark-decor);
    box-shadow: 0 0 0 0 var(--dark-decor-20);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.header-dark-nav .top-menu .main-navigation .sub-menu a:hover {
    background: var(--dark-white-08);
    color: var(--dark-primary);
    padding-left: 18px;
}

.header-dark-nav .top-menu .main-navigation .sub-menu a:hover::before {
    transform: scale(1.4);
    box-shadow: 0 0 0 4px var(--dark-decor-12);
}

/* --- CTA téléphone (sur fond blanc) --- */
.header-dark .header-phone {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
    font-size: 14px;
    padding: 8px 16px;
    background: var(--dark-decor-08);
    border: 1px solid var(--dark-decor-20);
    border-radius: 30px;
    transition: all 0.3s ease;
    min-width: 184px;
    justify-content: flex-start;
}

.header-dark .header-phone:hover {
    background: var(--dark-decor-12);
    border-color: var(--dark-decor);
    transform: translateY(-2px);
}

.header-dark .header-phone i {
    background: var(--dark-decor);
    color: var(--dark-primary);
    border-radius: 50%;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.header-dark .header-phone:hover i {
    background: var(--dark-bg);
    color: var(--dark-primary);
    transform: scale(1.1);
}

.header-dark .header-phone span {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.header-dark .header-phone span strong {
    color: var(--dark-bg);
    font-size: 15px;
    font-weight: 700;
}

.header-dark .header-phone span em {
    color: var(--dark-decor);
    font-size: 11px;
    font-weight: 500;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* --- Bouton offcanvas (dans le header) --- */
.header-dark .offcanvas-toggle {
    background: var(--dark-decor-08);
    border-radius: 8px;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.header-dark .offcanvas-toggle:hover {
    background: var(--dark-decor);
}

.header-dark .offcanvas-toggle i {
    color: var(--dark-decor);
    font-size: 20px;
    transition: all 0.3s ease;
}

.header-dark .offcanvas-toggle:hover i {
    color: var(--dark-primary);
}


/* ============================================================
   4. OFFCANVAS (menu mobile) - thème sombre normalisé
   ============================================================ */
.header-dark .offcanvas {
    background: var(--dark-bg-3);
    box-shadow: -2px 0 24px var(--dark-shadow-xl);
    padding: 0;
}

.header-dark .offcanvas-content {
    padding: 28px 24px;
}

.header-dark .offcanvas-close {
    color: var(--dark-muted);
    background: var(--dark-white-08);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    top: 14px;
    right: 14px;
    transition: all 0.3s ease;
}

.header-dark .offcanvas-close:hover {
    background: var(--dark-decor);
    color: var(--dark-primary);
}

/* Logo dans l'offcanvas */
.header-dark .offcanvas .logo img {
    max-height: 56px;
    width: auto;
    opacity: 0.95;
}

/* Navigation */
.header-dark .offcanvas-nav {
    margin: 24px 0;
}

.header-dark .offcanvas-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.header-dark .offcanvas-nav li {
    margin-bottom: 4px;
}

.header-dark .offcanvas-nav a {
    color: var(--dark-muted);
    text-decoration: none;
    font-family: var(--dark-body-font);
    font-weight: 500;
    font-size: 15px;
    display: block;
    padding: 12px 0;
    border-bottom: 1px solid var(--dark-white-08);
    transition: color 0.3s ease, padding-left 0.3s ease;
}

.header-dark .offcanvas-nav a:hover,
.header-dark .offcanvas-nav .current-menu-item > a,
.header-dark .offcanvas-nav .current-menu-ancestor > a {
    color: var(--dark-decor-light);
    padding-left: 8px;
}

/* Sous-menu */
.header-dark .offcanvas-nav .sub-menu {
    list-style: none;
    margin: 0;
    padding: 0 0 6px 14px;
}

.header-dark .offcanvas-nav .sub-menu a {
    font-size: 14px;
    border-bottom: 1px solid var(--dark-white-08);
    padding: 9px 0;
}

/* Coordonnées */
.header-dark .offcanvas-contact {
    margin-bottom: 22px;
}

.header-dark .offcanvas-contact .coords {
    gap: 14px !important;
}

.header-dark .offcanvas-contact .coords .address,
.header-dark .offcanvas-contact .coords .phone,
.header-dark .offcanvas-contact .coords .email,
.header-dark .offcanvas-contact .coords .hours {
    color: var(--dark-muted);
}

.header-dark .offcanvas-contact .coords i {
    background: var(--dark-decor);
    color: var(--dark-primary);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    width: 40px;
    min-width: 40px;
    font-size: 16px;
    transition: all 0.3s ease;
}

.header-dark .offcanvas-contact .coords a {
    color: var(--dark-muted);
    text-decoration: none;
    transition: color 0.3s ease;
}

.header-dark .offcanvas-contact .coords a:hover {
    color: var(--dark-decor-light);
}

.header-dark .offcanvas-contact .coords a:hover i {
    background: var(--dark-decor-light);
    transform: translateY(-2px);
    box-shadow: 0 4px 14px var(--dark-decor-20);
}

.header-dark .offcanvas-contact .coords span {
    color: var(--dark-muted);
    font-size: 14px;
    line-height: 1.5;
}

/* Réseaux sociaux */
.header-dark .offcanvas-social {
    margin-top: 10px;
}

.header-dark .offcanvas-social a {
    background: var(--dark-white-10);
    color: var(--dark-decor-light);
    border-radius: 50%;
    width: 42px;
    height: 42px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.header-dark .offcanvas-social a:hover {
    background: var(--dark-decor);
    color: var(--dark-primary);
    transform: translateY(-2px);
}


/* ============================================================
   5. HEADER FIXED (apparaît au scroll)
   ============================================================ */
.header-dark .header-dark-row {
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
}

.header-dark .header-dark-row.hide {
    transform: translateY(-120%);
    opacity: 0;
    pointer-events: none;
}

.header-dark .header-fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: var(--dark-bg);
    border-bottom: 2px solid var(--dark-decor);
    box-shadow: 0 4px 30px var(--dark-shadow-lg);
    transform: translateY(-120%);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
    z-index: 1001;
    padding: 0;
}

.header-dark .header-fixed.active {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

.header-dark .header-fixed .header-dark-logo img {
    max-height: 46px;
}


/* ============================================================
   6. FOOTER DARK
   ============================================================ */
.footer-dark {
    background: var(--dark-bg-3);
    position: relative;
    color: var(--dark-muted);
}

/* --- Barre d'accroche --- */
.footer-dark-cta {
    background: var(--dark-decor);
    padding: 22px 0;
}

.footer-dark-cta-text {
    color: var(--dark-primary);
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.footer-dark-cta-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.85;
}

.footer-dark-cta-text strong {
    font-family: var(--dark-heading-font);
    font-size: 22px;
}

.footer-dark-cta-phone a {
    color: var(--dark-primary);
    font-weight: 700;
    font-size: 18px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.footer-dark-cta-phone i {
    background: var(--dark-primary);
    color: var(--dark-decor);
    border-radius: 50%;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

.footer-dark-cta .social .cta-social {
    background: var(--dark-white-15);
    border-radius: 50%;
    color: var(--dark-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    width: 38px;
    min-width: 38px;
    font-size: 16px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.footer-dark-cta .social .cta-social:hover {
    background: var(--dark-primary);
    color: var(--dark-decor);
    transform: translateY(-3px);
}

/* --- Contenu principal --- */
.footer-dark-main {
    padding: 70px 0 40px;
}

.footer-dark-brand img {
    max-width: 100%;
    height: auto;
    opacity: 0.95;
    transition: all 0.3s ease;
}

.footer-dark-brand img:hover {
    opacity: 1;
    transform: translateX(5px);
}

.footer-dark-brand p {
    color: var(--dark-muted-soft);
    font-size: 13px;
    line-height: 1.6;
}

.footer-dark-title {
    color: var(--dark-primary);
    font-size: 18px;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 12px;
    text-transform: uppercase;
}

.footer-dark-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 35px;
    height: 2px;
    background: var(--dark-decor);
    border-radius: 2px;
}

.footer-dark-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-dark-nav ul li {
    margin-bottom: 10px;
}

.footer-dark-nav ul li a {
    color: var(--dark-muted);
    text-decoration: none;
    transition: all 0.3s ease;
    display: block;
    padding: 4px 0;
    position: relative;
    padding-left: 18px !important;
    font-size: 13px;
}

.footer-dark-nav ul li a::before {
    content: '\203A';
    position: absolute;
    left: 0;
    color: var(--dark-decor);
    opacity: 0;
    transform: translateX(-8px);
    transition: all 0.3s ease;
    font-weight: bold;
}

.footer-dark-nav ul li a:hover,
.footer-dark-nav ul li.current_page_item a {
    color: var(--dark-primary);
    padding-left: 24px !important;
}

.footer-dark-nav ul li a:hover::before,
.footer-dark-nav ul li.current_page_item a::before {
    opacity: 1;
    transform: translateX(0);
}

/* --- Colonne contact --- */
.footer-dark-contact ul li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
    color: var(--dark-muted);
    font-size: 13px;
    line-height: 1.5;
}

.footer-dark-contact ul li i {
    background: var(--dark-decor);
    color: var(--dark-primary);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    width: 34px;
    min-width: 34px;
    font-size: 14px;
    transition: all 0.3s ease;
}

.footer-dark-contact ul li a {
    color: var(--dark-muted);
    text-decoration: none;
    transition: all 0.3s ease;
}

.footer-dark-contact ul li a:hover {
    color: var(--dark-primary);
}

.footer-dark-contact ul li:hover i {
    background: var(--dark-decor-light);
    transform: translateY(-2px);
}

/* --- Copyright --- */
.footer-dark-copyright {
    padding: 22px 0 18px;
    position: relative;
    margin-top: 10px;
}

.footer-dark-copyright::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--dark-white-15), transparent);
}

.footer-dark-copyright .row {
    padding-top: 10px;
}

.footer-dark-copyright .copyright-text ul,
.footer-dark .copyright-text small {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--dark-muted-soft);
    font-size: 13px;
}

.footer-dark-copyright .copyright-text a {
    color: var(--dark-decor-light);
    text-decoration: none;
    transition: all 0.3s ease;
}

.footer-dark-copyright .copyright-text a:hover {
    color: var(--dark-primary);
}

.footer-dark-copyright .copyright-figure {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 15px;
}

.footer-dark-copyright .copyright-figure img {
    height: auto;
    max-width: 150px;
    width: 100%;
    opacity: 0.7;
    transition: all 0.3s ease;
}

.footer-dark-copyright .copyright-figure img:hover {
    opacity: 1;
}


/* ============================================================
   7. FLOATING CONTACT BAR (override sombre)
   dark.css n'est chargé que sur les pages utilisant le template Dark,
   on peut donc surcharger .floating-contact-bar globalement.
   ============================================================ */
.floating-contact-bar {
    --floating-bar-bg: var(--dark-decor-dark);
    --floating-bar-color: var(--dark-primary);
    --floating-bar-accent: var(--dark-decor);
    --floating-bar-accent-hover: var(--dark-decor-light);
}

/* Bouton Accueil */
.floating-contact-bar .floating-btn.home {
    background: var(--dark-decor-dark);
    color: var(--dark-primary);
    border-color: var(--dark-decor-dark);
}

.floating-contact-bar .floating-btn.home:hover {
    background: var(--dark-decor);
    color: var(--dark-primary);
    border-color: var(--dark-decor);
}

/* Tooltips des boutons flottants -> palette sombre */
.floating-contact-bar .floating-btn::after {
    background: var(--dark-bg-3);
    color: var(--dark-primary);
    border: 1px solid var(--dark-white-10);
    box-shadow: 0 6px 18px var(--dark-shadow-lg);
}

.floating-contact-bar .floating-btn:hover::after {
    opacity: 1;
    visibility: visible;
}


/* ============================================================
   8. RESPONSIVE
   ============================================================ */
/* De 1024px à 1199px (menu principal masqué sous lg) : on masque l'adresse
   du bandeau supérieur, on garde icône + téléphone + email, le CTA téléphone
   n'est jamais masqué, et le CTA tel + bouton offcanvas sont en space-between. */
@media (max-width: 1199px) {
    .header-dark-top .coords .address {
        display: none !important;
    }
    .header-dark-top .coords .phone a span,
    .header-dark-top .coords .email a span {
        display: none !important;
    }

    .header-dark .header-phone,
    .header-dark .header-phone span {
        display: flex !important;
    }
}

@media (max-width: 991px) {
    .header-dark-right {
        padding-bottom: 0;
    }

    .header-dark-top {
        text-align: center;
    }

    .header-dark-top .row {
        justify-content: center !important;
    }

    .header-dark-top .coords,
    .header-dark-top-actions {
        justify-content: center;
    }

    .header-dark .header-phone {
        padding: 8px;
        min-width: auto;
    }

    /* Quand le menu principal est masqué (<= lg), on étale le CTA tel
       et le bouton offcanvas sur toute la largeur */
    .header-dark-nav .cta-col {
        width: 100%;
        justify-content: space-between !important;
    }

    .footer-dark-main {
        padding: 50px 0 30px;
    }
}

/* Sous 1024px : bouton devis en pastille ronde sans texte */
@media (max-width: 1023px) {
    .btn-devis-top {
        width: 34px;
        min-width: 34px;
        padding: 0;
        border-radius: 50%;
    }

    .btn-devis-top span {
        display: none;
    }
}

@media (max-width: 767px) {
    .btn-devis-top {
        padding: 6px;
    }

    .footer-dark-cta-text strong {
        font-size: 18px;
    }

    .footer-dark-copyright .copyright-figure {
        justify-content: center;
        margin-top: 15px;
    }
}

@media (max-width: 480px) {
    .header-dark-top .container {
        display: none;
    }

    .footer-dark .row > div {
        margin-bottom: 25px;
    }

    .footer-dark-title {
        font-size: 16px;
    }
}

/* Sous 475px : header-fixed ne garde que l'icône du header-phone */
@media (max-width: 475px) {
    .header-dark .header-fixed .header-phone {
        min-width: auto;
        padding: 8px;
        justify-content: center;
    }

    .header-dark .header-fixed .header-phone span {
        display: none!important;
    }

    .header-dark .header-fixed .header-phone i {
        margin: 0;
    }
}


/* ============================================================
   9. SINGLE POST CONTENT (override du main.css clair)
   Le partial single-post-content.php utilise les couleurs claires
   de main.css (texte sombre sur fonds clairs). On remappe tout
   sur la palette sombre quand le template Dark est actif.
   dark.css est chargé APRÈS main.css, donc ces règles priment.
   ============================================================ */
.single-post-wrapper {
    color: var(--dark-primary);
}

/* --- Méta + temps de lecture --- */
.single-post-wrapper .post-meta {
    color: var(--dark-muted);
}

.single-post-wrapper .post-reading-time {
    color: var(--dark-muted);
    background: var(--dark-white-08);
    padding: 2px 10px;
    border-radius: 20px;
    display: inline-block;
}

/* --- Contenu de l'article (the_content) --- */
.single-post-wrapper .post-full-content {
    color: var(--dark-primary);
    font-family: var(--dark-body-font);
    line-height: 1.7;
}

.single-post-wrapper .post-full-content h1,
.single-post-wrapper .post-full-content h2,
.single-post-wrapper .post-full-content h3,
.single-post-wrapper .post-full-content h4,
.single-post-wrapper .post-full-content h5,
.single-post-wrapper .post-full-content h6 {
    font-family: var(--dark-heading-font);
    color: var(--dark-primary);
    font-weight: 400;
    letter-spacing: 0.5px;
}

.single-post-wrapper .post-full-content p {
    color: var(--dark-muted);
}

.single-post-wrapper .post-full-content a {
    color: var(--dark-decor-light);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.3s ease;
}

.single-post-wrapper .post-full-content a:hover {
    color: var(--dark-decor);
}

.single-post-wrapper .post-full-content blockquote {
    border-left: 4px solid var(--dark-decor);
    background: var(--dark-white-08);
    color: var(--dark-muted);
    padding: 16px 20px;
    margin: 20px 0;
    border-radius: 0 8px 8px 0;
}

.single-post-wrapper .post-full-content img {
    border-radius: 8px;
    max-width: 100%;
    height: auto;
}

.single-post-wrapper .post-full-content hr {
    border: 0;
    border-top: 1px solid var(--dark-white-10);
    margin: 28px 0;
}

/* --- Tags --- */
.single-post-wrapper .post-tags,
.single-post-wrapper .tags-label {
    color: var(--dark-muted);
}

.single-post-wrapper .post-tags a {
    color: var(--dark-decor-light);
    background: var(--dark-white-08);
    padding: 2px 10px;
    border-radius: 20px;
    display: inline-block;
    margin: 2px 0;
    text-decoration: none;
    transition: all 0.3s ease;
}

.single-post-wrapper .post-tags a:hover {
    background: var(--dark-decor);
    color: var(--dark-primary);
}

/* --- Hashtags --- */
.single-post-wrapper .post-hashtags,
.single-post-wrapper .hashtags-label {
    color: var(--dark-muted);
}

.single-post-wrapper .post-hashtags .hashtag {
    color: var(--dark-decor-light);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.single-post-wrapper .post-hashtags .hashtag:hover {
    color: var(--dark-decor);
}

/* --- Vues + like --- */
.single-post-wrapper .view-count {
    color: var(--dark-muted);
}

.single-post-wrapper .view-count .view-number {
    color: var(--dark-primary);
    font-weight: 700;
}

/* Bouton like : état "non aimé" -> neutre sur fond sombre */
.single-post-wrapper .hbcta-like-btn.not-liked {
    border-color: var(--dark-white-15);
    color: var(--dark-muted);
    background: transparent;
}

.single-post-wrapper .hbcta-like-btn.not-liked:hover {
    background: var(--dark-white-10);
    border-color: var(--dark-decor);
    color: var(--dark-primary);
}

.single-post-wrapper .hbcta-like-btn.not-liked i {
    color: var(--dark-muted);
}

/* Bouton like : état "aimé" -> accent sombre */
.single-post-wrapper .hbcta-like-btn.liked {
    border-color: var(--dark-decor);
    color: var(--dark-decor-light);
    background: var(--dark-decor-12);
}

.single-post-wrapper .hbcta-like-btn.liked:hover {
    background: var(--dark-decor);
    border-color: var(--dark-decor);
    color: var(--dark-primary);
}

.single-post-wrapper .hbcta-like-btn.liked i {
    color: var(--dark-decor-light);
}

.single-post-wrapper .hbcta-like-btn.liked:hover i {
    color: var(--dark-primary);
}

/* --- Social sharing --- */
.single-post-wrapper .social-sharing {
    border-top: 1px solid var(--dark-white-10);
    color: var(--dark-muted);
}

.single-post-wrapper .social-sharing > span {
    color: var(--dark-muted);
}

.single-post-wrapper .social-sharing .social-link {
    background: var(--dark-white-10);
    color: var(--dark-primary);
    border: 2px solid var(--dark-white-15);
}

.single-post-wrapper .social-sharing .social-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--dark-shadow-md);
    border-color: var(--dark-decor);
}

.single-post-wrapper .social-sharing .social-link.facebook:hover,
.single-post-wrapper .social-sharing .social-link.twitter:hover,
.single-post-wrapper .social-sharing .social-link.linkedin:hover,
.single-post-wrapper .social-sharing .social-link.whatsapp:hover,
.single-post-wrapper .social-sharing .social-link.pinterest:hover {
    background: var(--dark-decor);
    color: var(--dark-primary);
    border-color: var(--dark-decor);
}

/* --- Sidebar : recent news / articles / events --- */
.single-post-wrapper .recent-news h3,
.single-post-wrapper .recent-articles h3,
.single-post-wrapper .recent-events h3 {
    border-bottom: 1px solid var(--dark-white-10);
    color: var(--dark-primary);
    font-family: var(--dark-heading-font);
    font-weight: 400;
    letter-spacing: 0.5px;
}

.single-post-wrapper .recent-item {
    margin-bottom: 15px;
}

.single-post-wrapper .recent-thumbnail img {
    border-radius: 8px;
    transition: transform 0.3s ease;
}

.single-post-wrapper .recent-thumbnail:hover img {
    transform: scale(1.05);
}

.single-post-wrapper .recent-text h4 a {
    color: var(--dark-muted);
    font-size: 16px;
    line-height: 18px;
    text-decoration: none;
    transition: color 0.3s ease;
}

.single-post-wrapper .recent-text h4 a:hover {
    color: var(--dark-decor-light);
}


/* ============================================================
   10. BREADCRUMB (override Bootstrap clair sur fond sombre)
   partial breadcrumb.php -> .breadcrumb / .breadcrumb-item.active
   / .breadcrumb-separator. Aucun style dans main.css, donc on
   fournit un design sombre cohérent avec la palette du template.
   ============================================================ */
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    padding: 16px 0 0;
    margin: 0;
    background: transparent;
    font-family: var(--dark-body-font);
    font-size: 13px;
    line-height: 1.5;
    color: var(--dark-muted);
}

.breadcrumb a {
    color: var(--dark-muted);
    text-decoration: none;
    padding: 4px 8px;
    border-radius: 6px;
    transition: color 0.3s ease, background 0.3s ease;
}

.breadcrumb a:hover {
    color: var(--dark-primary);
    background: var(--dark-white-08);
}

.breadcrumb .breadcrumb-item.active {
    color: var(--dark-decor-light);
    font-weight: 600;
    padding: 4px 8px;
}

.breadcrumb .breadcrumb-separator {
    color: var(--dark-white-15);
    user-select: none;
}

.breadcrumb .breadcrumb-home {
    font-size: 12px;
    margin-right: 6px;
    color: var(--dark-decor);
}

.breadcrumb a:hover .breadcrumb-home {
    color: var(--dark-decor-light);
}


/* ============================================================
   11. COMPOSANTS PARTAGÉS (archives / listings / boutons)
   Surcharges des blocs de main.css non encore traités et qui
   apparaissent sur les pages utilisant le template Dark
   (catégories, listes d'articles, pagination, boutons).
   ============================================================ */

/* --- Bannière catégorie --- */
.category-header {
    background-color: var(--dark-bg);
}

.category-title {
    color: var(--dark-primary);
    font-family: var(--dark-heading-font);
    font-weight: 400;
}

.category-title span {
    color: var(--dark-decor-light);
}

/* --- Listes de catégories --- */
.section-cat-list h2 {
    border-bottom: 2px solid var(--dark-decor);
    color: var(--dark-primary);
}

.section-cat-list h3 {
    color: var(--dark-primary);
    font-family: var(--dark-heading-font);
    font-weight: 400;
}

.section-cat-list a {
    color: var(--dark-decor-light);
    text-decoration: none;
    transition: color 0.3s ease;
}

.section-cat-list a:hover {
    color: var(--dark-decor);
}

/* --- Cartes d'articles (post-item) --- */
.post-item h3,
.post-item .post-title {
    color: var(--dark-primary);
    font-family: var(--dark-heading-font);
    font-weight: 400;
}

/* Résumé / extrait des cartes : texte secondaire lisible sur fond sombre */
.post-item .post-excerpt {
    color: var(--dark-muted);
    font-family: var(--dark-body-font);
    line-height: 1.6;
}

.post-item a {
    color: var(--dark-decor-light);
    text-decoration: none;
    transition: color 0.3s ease;
}

.post-item a:hover {
    color: var(--dark-decor);
}

/* --- Pagination (archives / listings) --- */
.pagination {
    text-align: center;
}

.pagination .page-numbers {
    background: var(--dark-white-08);
    color: var(--dark-muted);
    border: 1px solid var(--dark-white-15);
}

.pagination .page-numbers:hover,
.pagination .page-numbers.current {
    background: var(--dark-decor);
    color: var(--dark-primary);
    border-color: var(--dark-decor);
}

/* --- Pagination blocs événements --- */
.td-pagination-wrap .btn {
    border: 1px solid var(--dark-white-15);
    color: var(--dark-muted);
    background: var(--dark-white-08);
}

.td-pagination-wrap .btn:hover {
    background: var(--dark-decor);
    color: var(--dark-primary);
    border-color: var(--dark-decor);
}

.td-pagination-wrap .btn.disabled,
.td-pagination-wrap .btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* --- Aucun article --- */
.no-posts h2 {
    color: var(--dark-primary);
}

.no-posts p,
.no-posts .text-muted {
    color: var(--dark-muted);
}

/* --- Conteneurs de liste (fond sombre cohérent avec le template) --- */
.section-post-list,
.section-cat-list {
    background-color: var(--dark-bg-3);
    color: var(--dark-muted);
}

.section-cat-list .title-cat h2,
.section-cat-list .title-cat .has- > span {
    color: var(--dark-primary);
    font-family: var(--dark-heading-font);
    font-weight: 400;
}

/* --- Boutons de pagination secondaires (blocs événements / référencement) --- */
.btn-outline-secondary,
button.btn-outline-secondary,
a.btn-outline-secondary,
.btn.btn-outline-secondary,
.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary.active,
.btn-outline-secondary.disabled,
.btn-outline-secondary[aria-disabled="true"] {
    color: var(--dark-muted) !important;
    border-color: var(--dark-white-15) !important;
    background-color: var(--dark-white-08) !important;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    color: var(--dark-primary) !important;
    border-color: var(--dark-decor) !important;
    background-color: var(--dark-decor) !important;
}

.btn-outline-secondary.disabled,
.btn-outline-secondary[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* --- Filtres (article-ref-list) --- */
.posts-filter .filter-btn {
    color: var(--dark-muted);
    border-color: var(--dark-white-15);
    background-color: var(--dark-white-08);
}

.posts-filter .filter-btn:hover,
.posts-filter .filter-btn.active {
    color: var(--dark-primary);
    border-color: var(--dark-decor);
    background-color: var(--dark-decor);
}

/* --- Spinners / chargement AJAX (sur fond sombre) --- */
.spinner-border.text-primary {
    color: var(--dark-decor-light) !important;
}

p.text-primary {
    color: var(--dark-muted) !important;
}

/* --- Descriptions de bannière / catégorie --- */
.category-description,
.category-description p {
    color: var(--dark-primary);
}

/* --- Texte "Aucun résultat" générique --- */
.text-muted {
    color: var(--dark-muted) !important;
}

/* --- Boutons Bootstrap (main.css utilise !important => on égalise) --- */
button.btn-primary,
input[type="submit"].btn-primary,
a.btn-primary,
.btn.btn-primary,
button.btn-primary:hover,
button.btn-primary:focus,
input[type="submit"].btn-primary:hover,
input[type="submit"].btn-primary:focus,
a.btn-primary:hover,
a.btn-primary:focus,
.btn.btn-primary:hover,
.btn.btn-primary:focus {
    background-color: var(--dark-decor) !important;
    border-color: var(--dark-decor) !important;
    color: var(--dark-primary) !important;
}

button.btn-outline-primary,
input[type="submit"].btn-outline-primary,
a.btn-outline-primary,
.btn.btn-outline-primary,
button.btn-outline-primary:hover,
button.btn-outline-primary:focus,
button.btn-outline-primary.active,
input[type="submit"].btn-outline-primary:hover,
input[type="submit"].btn-outline-primary:focus,
input[type="submit"].btn-outline-primary.active,
a.btn-outline-primary:hover,
a.btn-outline-primary:focus,
a.btn-outline-primary.active,
.btn.btn-outline-primary:hover,
.btn.btn-outline-primary:focus,
.btn.btn-outline-primary.active {
    color: var(--dark-decor-light) !important;
    border-color: var(--dark-decor) !important;
    background-color: transparent !important;
}


/* ============================================================
   12. SIMILAR CONTENT CAROUSEL (override main.css clair)
   partial similar-content.php -> .similar-articles-carousel /
   .similar-slider / .similar-item / .similar-thumbnail / slick-dots
   ============================================================ */
.post-sidebar-column h3,
.similar-articles-carousel h3 {
    border-bottom: 1px solid var(--dark-white-10);
    color: var(--dark-primary);
    font-family: var(--dark-heading-font);
    font-weight: 400;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.similar-slider {
    width: 100%;
    margin: 20px auto;
}

.similar-item {
    text-align: center;
    padding: 0 10px;
}

.similar-item h4 {
    font-size: 14px;
    margin-top: 8px;
    line-height: 1.3;
}

.similar-item h4 a {
    color: var(--dark-muted);
    text-decoration: none;
    transition: color 0.3s ease;
}

.similar-item h4 a:hover {
    color: var(--dark-decor-light);
}

.similar-thumbnail img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    transition: transform 0.3s ease;
}

.similar-thumbnail:hover img {
    transform: scale(1.05);
}

/* --- Galerie carousel (même slider, contenu spécifique) --- */
.galerie-carousel-container .galerie-title a {
    color: var(--dark-muted);
    text-decoration: none;
    transition: color 0.3s ease;
}

.galerie-carousel-container .galerie-title a:hover {
    color: var(--dark-decor-light);
}

.galerie-carousel-container .galerie-excerpt,
.galerie-carousel-container .galerie-meta {
    color: var(--dark-muted);
}

/* Slick dots -> accent sombre */
.similar-slider .slick-dots li button {
    background: var(--dark-white-15);
    height: 2px;
    margin: 0;
    padding: 0;
    width: 20px;
}

.similar-slider .slick-dots li button:hover {
    background: var(--dark-decor-light);
}

.similar-slider .slick-dots li.slick-active button {
    background: var(--dark-decor);
    border-radius: 100%;
    height: 15px;
    width: 15px;
}

.similar-slider .slick-dots li button:before,
.similar-slider .slick-dots li.slick-active button:before {
    display: none;
    color: var(--dark-decor);
}


/* ============================================================
   13. OFFCANVAS (suite — toggle + global main.css)
   Complète la section 4 en surchargeant les sélecteurs offcanvas
   de main.css non préfixés .header-dark (bouton toggle, hamburger,
   icônes de contact globales) pour suivre la palette sombre.
   ============================================================ */

/* --- Bouton toggle (hamburger) : design animé et visible --- */
.header-dark .offcanvas-toggle {
    position: relative;
    background: var(--dark-decor-12);
    border: 1px solid var(--dark-decor-20);
    border-radius: 12px;
    cursor: pointer;
    margin: 0;
    padding: 0;
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: background 0.35s ease, border-color 0.35s ease,
                transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.35s ease;
}

/* Halo qui balaye le bouton au survol */
.header-dark .offcanvas-toggle::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, var(--dark-decor-light), transparent 70%);
    opacity: 0;
    transform: scale(0.4);
    transition: opacity 0.4s ease, transform 0.4s ease;
    pointer-events: none;
}

/* Pulse d'attention permanente et discrète */
@keyframes hbcta-toggle-pulse {
    0%   { box-shadow: 0 0 0 0 var(--dark-decor-20); }
    70%  { box-shadow: 0 0 0 10px rgba(167, 39, 80, 0); }
    100% { box-shadow: 0 0 0 0 rgba(167, 39, 80, 0); }
}

.header-dark .offcanvas-toggle {
    animation: hbcta-toggle-pulse 2.6s ease-out infinite;
}

.header-dark .offcanvas-toggle:hover,
.header-dark .offcanvas-toggle:focus {
    background: var(--dark-decor);
    border-color: var(--dark-decor);
    transform: translateY(-2px) scale(1.06);
    box-shadow: 0 8px 22px var(--dark-decor-20);
    animation-play-state: paused;
}

.header-dark .offcanvas-toggle:hover::before,
.header-dark .offcanvas-toggle:focus::before {
    opacity: 0.35;
    transform: scale(1);
}

.header-dark .offcanvas-toggle:hover i,
.header-dark .offcanvas-toggle:focus i {
    color: var(--dark-primary);
}

.header-dark .offcanvas-toggle i {
    position: relative;
    z-index: 1;
    color: var(--dark-decor-light);
    font-size: 20px;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.35s ease;
}

.header-dark .offcanvas-toggle:hover i {
    transform: rotate(90deg) scale(1.12);
}

.header-dark .offcanvas-toggle .fa-xmark {
    font-size: 1.2rem;
}

/* État ouvert : le bouton devient une croix animée */
body.offcanvas-open .header-dark .offcanvas-toggle {
    background: var(--dark-decor);
    border-color: var(--dark-decor);
    animation-play-state: paused;
}

body.offcanvas-open .header-dark .offcanvas-toggle i {
    color: var(--dark-primary);
    transform: rotate(180deg) scale(1.1);
}

body.offcanvas-open .header-dark .offcanvas-toggle:hover {
    transform: translateY(-2px) scale(1.04);
}

/* --- Hamburger -> X (unified JS) : accent sombre --- */
.header-dark .menu-toggle-btn .hamburger-line {
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform-origin: center;
}

body.offcanvas-open .header-dark .menu-toggle-btn {
    border-color: var(--dark-decor);
}

body.offcanvas-open .header-dark .menu-toggle-btn .hamburger-line {
    background: var(--dark-decor);
}

body.offcanvas-open .header-dark .menu-toggle-btn .hamburger-line:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

body.offcanvas-open .header-dark .menu-toggle-btn .hamburger-line:nth-child(2) {
    opacity: 0;
}

body.offcanvas-open .header-dark .menu-toggle-btn .hamburger-line:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

/* --- Icônes de contact globales (cohérence sombre) --- */
.header-dark .contact-info i,
.header-dark .footer-contact-info i,
.header-dark .offcanvas-contact i {
    margin-right: 8px;
    color: var(--dark-primary);
}