/* =========================================================
   Menuiserie Richard - Chrome global (header/menu + footer)
   Fichier : assets/css/theme-chrome.css
   Charge EN DERNIER dans header.php -> override l'ancien theme.
   AUTONOME : definit ses propres variables + @import polices,
   pour fonctionner aussi sur les pages NON-refonte.
   Stack : vanilla CSS, override Bootstrap / theme Sabujcha / meanmenu.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600;700&family=Inter:wght@400;500;600&display=swap');

/* ---------- Variables (autonomes, prefixees -tc pour ne pas
     entrer en conflit avec celles de refonte.css) ---------- */
:root {
    --tc-primary: #519f10;
    --tc-primary-dark: #3d7a0c;
    --tc-wood-light: #e8dcc4;
    --tc-wood-mid: #c9a878;
    --tc-wood-dark: #6b4423;
    --tc-text: #2d2419;
    --tc-text-light: #6b5d4a;
    --tc-bg: #faf6ef;
    --tc-white: #ffffff;
    --tc-cream: #faf6ef;
    --tc-font-serif: 'Cormorant Garamond', Georgia, serif;
    --tc-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --tc-shadow-soft: 0 4px 20px rgba(45, 36, 25, 0.08);
    --tc-shadow-hover: 0 8px 30px rgba(45, 36, 25, 0.15);
    --tc-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* =========================================================
   HEADER / MENU (desktop >= 992px)
   ========================================================= */
.header-area {
    background: var(--tc-cream) !important;
    box-shadow: var(--tc-shadow-soft);
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid rgba(107, 68, 35, 0.08);
}
.header-area .header-bottom {
    padding: 0;
}
.header-area .container {
    max-width: 1200px;
}

/* Logo */
.header-area .logo {
    display: flex;
    align-items: center;
    min-height: 50px;
}
.header-area .logo a {
    display: inline-block;
    line-height: 0;
}
.header-area .logo img {
    height: 44px !important;
    width: auto;
    transition: transform 0.3s var(--tc-ease);
}
.header-area .logo a:hover img {
    transform: scale(1.03);
}
/* annule le padding-left inline excessif de navigation.php sur grand ecran */
.header-area .header-bottom .row > [class*="col-"]:first-child {
    padding-left: 15px !important;
}

/* Barre menu desktop */
.header-area .header-bottom-right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-height: 50px;
}
.header-area .main-menu nav > ul {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}
.header-area .main-menu nav > ul > li {
    position: relative;
    margin: 0;
    flex-shrink: 0;
}
.header-area .main-menu nav > ul > li > a {
    display: block;
    padding: 14px 15px;
    line-height: 1.2;
    font-family: var(--tc-font-sans);
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--tc-text);
    text-transform: capitalize;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.25s var(--tc-ease);
    position: relative;
}
/* soulignement anime au survol */
.header-area .main-menu nav > ul > li > a::after {
    content: "";
    position: absolute;
    left: 15px;
    right: 15px;
    bottom: 8px;
    height: 2px;
    background: var(--tc-primary);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.3s var(--tc-ease);
}
.header-area .main-menu nav > ul > li:hover > a,
.header-area .main-menu nav > ul > li > a:hover {
    color: var(--tc-primary);
}
.header-area .main-menu nav > ul > li:hover > a::after {
    transform: scaleX(1);
}

/* Sous-menus deroulants */
.header-area .main-menu nav ul li .submenu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: var(--tc-white);
    list-style: none;
    margin: 0;
    padding: 8px 0;
    border-radius: 8px;
    box-shadow: var(--tc-shadow-hover);
    border-top: 3px solid var(--tc-primary);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.25s var(--tc-ease), transform 0.25s var(--tc-ease), visibility 0.25s;
    z-index: 1001;
}
.header-area .main-menu nav ul li:hover > .submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.header-area .main-menu nav ul li .submenu li {
    width: 100%;
    margin: 0;
}
.header-area .main-menu nav ul li .submenu li a {
    display: block;
    padding: 10px 22px;
    font-family: var(--tc-font-sans);
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--tc-text-light);
    text-transform: capitalize;
    text-decoration: none;
    transition: background 0.2s var(--tc-ease), color 0.2s var(--tc-ease), padding-left 0.2s var(--tc-ease);
}
.header-area .main-menu nav ul li .submenu li a:hover {
    background: var(--tc-bg);
    color: var(--tc-primary);
    padding-left: 28px;
}

/* CTA "Demander un devis" injecte dans le menu desktop */
.header-area .main-menu nav > ul > li.menu-cta {
    margin-left: 14px;
}
.header-area .main-menu nav > ul > li.menu-cta {
    align-self: center;
}
.header-area .main-menu nav > ul > li.menu-cta > a,
.header-area .main-menu nav > ul > li.menu-cta > a:hover {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--tc-primary);
    color: var(--tc-white);
    padding: 8px 17px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.2;
    box-shadow: 0 3px 10px rgba(81, 159, 16, 0.28);
    transition: background 0.25s var(--tc-ease), transform 0.25s var(--tc-ease);
}
.header-area .main-menu nav > ul > li.menu-cta > a svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}
.header-area .main-menu nav > ul > li.menu-cta > a::after {
    display: none;
}
.header-area .main-menu nav > ul > li.menu-cta:hover > a {
    background: var(--tc-primary-dark);
    transform: translateY(-2px);
    color: var(--tc-white);
}

/* =========================================================
   MENU MOBILE (meanmenu re-style, < 992px)
   On conserve le mecanisme meanmenu (deja fiable, init dans main.js)
   et on l'habille au gout du theme.
   ========================================================= */

/* Desktop : la zone mobile est masquee, meanmenu la revele < 991px */
.mobile-menu-area {
    display: none;
}
/* meanmenu s'active <= 991px (meanScreenWidth dans main.js). On revele alors
   la zone mobile qui contient le hamburger genere par meanmenu. NB : la classe
   .mean-container est posee par meanmenu sur .mobile-menu (enfant), pas sur
   .mobile-menu-area -> on passe donc par une media query fiable. */
@media (max-width: 991px) {
    .mobile-menu-area {
        display: block;
    }
}

/* Barre mobile (contient le bouton hamburger injecte par meanmenu) */
.mean-container .mean-bar {
    background: transparent;
    padding: 0;
    min-height: 0;
    position: static;   /* le hamburger (reveal) s'ancre au .header-area (relatif en mobile) */
    width: 100%;
    float: none;
    z-index: 1002;
}

/* Bouton hamburger */
.mean-container a.meanmenu-reveal {
    position: absolute;
    top: 13px;
    right: 14px;
    width: 44px;
    height: 38px;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: var(--tc-primary);
    border-radius: 9px;
    box-shadow: 0 3px 10px rgba(81, 159, 16, 0.3);
    color: var(--tc-white);
    text-indent: 0;
    line-height: 1;
    z-index: 1003;
}
.mean-container a.meanmenu-reveal span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--tc-white) !important;
    border-radius: 2px;
    margin: 0 !important;
    transition: background 0.2s var(--tc-ease);
}

/* Panneau de navigation mobile.
   height:auto + overflow:visible : meanmenu figeait une hauteur trop courte
   (calculee trop tot), ce qui rognait les derniers items (Contact). */
.mean-container .mean-nav {
    background: var(--tc-cream);
    margin-top: 14px;
    border-radius: 10px;
    overflow: visible !important;
    height: auto !important;
    box-shadow: var(--tc-shadow-hover);
}
.mean-container .mean-nav > ul {
    width: 100%;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}
.mean-container .mean-nav ul li {
    background: transparent;
    border-top: 1px solid rgba(107, 68, 35, 0.1);
}
.mean-container .mean-nav ul li a {
    background: transparent;
    color: var(--tc-text);
    font-family: var(--tc-font-sans);
    font-size: 0.95rem;
    font-weight: 500;
    text-transform: capitalize;
    padding: 0.9em 6%;
    width: 88%;
}
/* sous-niveaux */
.mean-container .mean-nav ul li li a {
    color: var(--tc-text-light);
    font-weight: 400;
    opacity: 1;
    border-top: 1px solid rgba(107, 68, 35, 0.08);
    text-transform: capitalize;
}
.mean-container .mean-nav ul li a:hover {
    background: rgba(81, 159, 16, 0.08);
    color: var(--tc-primary);
}
/* bouton +/- d'expansion des sous-menus */
.mean-container .mean-nav ul li a.mean-expand {
    background: transparent;
    color: var(--tc-text-light);
    font-weight: 700;
    height: auto;
    line-height: 1;
    padding: 14px 18px !important;
    border-left: 1px solid rgba(107, 68, 35, 0.1) !important;
}
.mean-container .mean-nav ul li a.mean-expand:hover {
    background: rgba(81, 159, 16, 0.08);
    color: var(--tc-primary);
}

/* =========================================================
   FOOTER
   ========================================================= */
.footer-area {
    background: var(--tc-wood-dark) !important;
    background-image: linear-gradient(135deg, #4a2f17 0%, #6b4423 100%) !important;
    color: var(--tc-wood-light);
    font-family: var(--tc-font-sans);
}
.footer-area .footer-top {
    background: transparent !important;
    padding-top: 70px;
    padding-bottom: 30px;
}
.footer-area .container {
    max-width: 1200px;
}
.footer-area .footer-title h4 {
    font-family: var(--tc-font-serif);
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--tc-white);
    margin-bottom: 22px;
    position: relative;
    padding-bottom: 14px;
}
.footer-area .footer-title h4::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 46px;
    height: 3px;
    background: var(--tc-primary);
    border-radius: 2px;
}
.footer-area .footer-content p,
.footer-area .footer-contact li {
    color: var(--tc-wood-light);
    font-size: 0.95rem;
    line-height: 1.7;
}
.footer-area .footer-content img {
    margin-top: 10px;
    height: 92px;
    width: auto;
}

/* Liens utiles */
.footer-area .footer-content ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.footer-area .footer-content ul li {
    margin-bottom: 9px;
}
.footer-area .footer-content ul li a {
    color: var(--tc-wood-light);
    font-size: 0.95rem;
    text-decoration: none;
    transition: color 0.2s var(--tc-ease), padding-left 0.2s var(--tc-ease);
    display: inline-block;
}
.footer-area .footer-content ul li a:hover {
    color: var(--tc-white);
    padding-left: 6px;
}
.footer-area .footer-content ul li a::before {
    content: "›";
    color: var(--tc-primary);
    margin-right: 8px;
    font-weight: 700;
}

/* Colonne contact */
.footer-area .footer-contact ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.footer-area .footer-contact a {
    color: var(--tc-wood-light);
    text-decoration: none;
    transition: color 0.2s var(--tc-ease);
}
.footer-area .footer-contact a:hover {
    color: var(--tc-white);
}
/* bouton telephone : style pilule verte cohesif */
.footer-area .footer-contact .submit {
    background: var(--tc-primary);
    border: none;
    border-radius: 999px;
    padding: 8px 18px;
    margin-top: 4px;
    transition: background 0.25s var(--tc-ease), transform 0.25s var(--tc-ease);
}
.footer-area .footer-contact .submit:hover {
    background: var(--tc-primary-dark);
    transform: translateY(-2px);
}
.footer-area .footer-contact .submit a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--tc-white) !important;
    font-weight: 600;
    text-decoration: none;
}
.footer-area .footer-contact .submit a svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

/* Bas de footer (credit Lagrume + annee) */
.footer-area .footer-bottom {
    background: rgba(0, 0, 0, 0.18) !important;
    padding-top: 22px;
    padding-bottom: 22px;
}
.footer-area .footer-bottom .copy-text,
.footer-area .footer-bottom .copyright p {
    color: var(--tc-wood-light);
    font-size: 0.85rem;
    text-align: center;
    margin: 0;
    line-height: 1.7;
}
.footer-area .footer-bottom .copyright {
    text-align: center;
}
.footer-area .footer-bottom a {
    color: var(--tc-wood-light);
    text-decoration: none;
}
.footer-area .footer-bottom a:hover {
    color: var(--tc-white);
}
.footer-area .footer-bottom img {
    margin-bottom: 8px;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 991px) {
    /* =========================================================
       Bandeau mobile compact (~57px), logo + hamburger alignes.
       Le markup Bootstrap d'origine + le centrage flex ne se laissent
       pas faire (la colonne logo gonfle, le centrage echoue), donc on
       cape les hauteurs et on positionne le logo en absolu. Le hamburger
       (meanmenu) reste a son top:13 ; on aligne le logo dessus (top:13).
       ========================================================= */
    .header-area {
        position: relative;       /* sticky moins critique en mobile + ancre le logo absolu */
        height: 62px;
        min-height: 0;
        padding: 0;
    }
    .header-area .header-bottom {
        position: relative;
        height: 62px;
        min-height: 0;
        padding: 0;
        margin: 0;
        overflow: visible;
    }
    .header-area .header-bottom > .container {
        height: 62px;
        min-height: 0;
        padding-top: 0;
        padding-bottom: 0;
    }
    .header-area .header-bottom .row {
        height: 62px;
        min-height: 0;
        margin: 0;
    }
    .header-area .header-bottom .row > div {
        height: 62px;
        min-height: 0;
        padding-top: 0;
        padding-bottom: 0;
    }
    /* le menu desktop est masque par meanmenu (.mean-remove), mais on
       neutralise aussi le markup au cas ou */
    .header-area .main-menu nav > ul {
        display: none;
    }
    .header-area .header-bottom-right,
    .header-area .main-menu,
    .header-area .main-menu nav {
        min-height: 0 !important;
        height: auto !important;
    }
    /* Logo centre verticalement via position absolue (le flex Bootstrap
       ne le centrait pas) ; top:13 + hauteur 40 => meme axe que le hamburger. */
    .header-area .logo img {
        position: absolute;
        left: 30px;
        top: 12px;
        /* max-height (et non height : une regle !important du theme d'origine
           fixe height:54px et gagne) cape la taille du logo dans la bande. */
        max-height: 38px !important;
        width: auto !important;
    }
    .header-area .header-bottom .row > [class*="col-"]:first-child {
        padding-left: 15px !important;
    }
    /* La zone du menu mobile ne reserve pas de hauteur quand le menu est
       ferme ; le panneau deroulant overflow par-dessus le contenu. */
    .header-area .mobile-menu-area {
        position: static;
        height: 0;
        overflow: visible;
    }
}

@media (max-width: 768px) {
    .footer-area .footer-top {
        padding-top: 55px;
    }
    .footer-area .footer-title h4 {
        font-size: 1.4rem;
    }
    .footer-area .footer-widget {
        text-align: left;
    }
}

@media (max-width: 480px) {
    .header-area .logo img {
        height: 52px !important;
    }
    .footer-area .footer-title h4::after {
        left: 0;
    }
    .footer-area .footer-content,
    .footer-area .footer-about {
        font-size: 0.92rem;
    }
}