/* GM Concept brand overrides — loaded after the Carpenter theme CSS.
   The accent colour is refined from the company logo during content import. */

:root {
    --gmc-accent: #A8843A;      /* brand ochre. Previous values: #9C7830, #8F6B29, #99821d */
    --gmc-accent-dark: #85682d; /* darker shade of --gmc-accent (hover). Prev: #7a5e25 */
    --gmc-charcoal: #2b2b2b;    /* brand charcoal */
}

/* Accent colour helpers used by the theme */
.id-color,
a.id-color,
.text-primary { color: var(--gmc-accent) !important; }

.bg-color,
.btn-custom,
#call-to-action.bg-color,
.di-box-2 .id-color { }

.bg-color { background-color: var(--gmc-accent) !important; }

.btn-custom {
    background: var(--gmc-accent) !important;
    border-color: var(--gmc-accent) !important;
}
.btn-custom:hover { background: var(--gmc-accent-dark) !important; }

.btn-line-white:hover { color: var(--gmc-accent) !important; }

/* Timer / counters */
.de_count .id-color,
.timer.id-color { color: var(--gmc-accent) !important; }

/* Links hover */
a:hover { color: var(--gmc-accent); }

/* Bigger logo, closer to the original site (but contained in the header) */
#logo { display: flex; align-items: center; }
#logo .logo { max-height: 78px; width: auto; }

/* Header must stay solid white and tall enough for the bigger logo + the two
   phone numbers — in the normal AND the scrolled (.smaller) state, otherwise
   the logo/second number spill onto the page below. */
header.header-light { background: #fff !important; height: auto !important; min-height: 104px; }
header .container > .row > .col-md-12 > .md-flex { min-height: 96px; align-items: center; }
header.header-light.smaller:not(.header-bottom):not(.side-header):not(.force-header-mobile):not(.header-s2) {
    height: auto !important; min-height: 104px; background: #fff !important;
}
header.smaller:not(.header-bottom):not(.side-header):not(.force-header-mobile):not(.header-s2) div#logo {
    height: auto !important;
}

/* Imported content (services, about, projects): the theme zeroes h2/h3
   margins — give headings generous space BELOW (small above). */
.text-content h2, .text-content h3, .text-content h4 {
    margin-top: 10px !important;
    margin-bottom: 26px !important;
}
.text-content p { margin-bottom: 16px; }
.text-content ul, .text-content ol { margin-bottom: 22px; }
.text-content li { margin-bottom: 6px; }

/* Standalone page titles (e.g. the h2 on the About page, outside
   .text-content) also need air below */
.gmc-page-title { margin-bottom: 24px !important; }

/* About page: image floated right — the text sits on its left and then
   flows back to full width below the image. */
.gmc-about-img {
    float: right; width: 42%; max-width: 460px;
    margin: 6px 0 22px 30px;
}
@media (max-width: 767px) {
    .gmc-about-img { float: none; width: 100%; max-width: none; margin: 0 0 20px 0; }
}

/* Service detail sidebar: stable menu with the current service highlighted */
.gmc-service-menu li.active > a {
    color: var(--gmc-accent); font-weight: 700;
}
.gmc-service-menu li.active > a::before { content: "› "; }

/* Subheader title is an <h1> for SEO but keeps the theme's <h2> look
   (#subheader h1 needed to beat the theme's uppercase #subheader rules) */
#subheader h1.gmc-subheader-title {
    font-size: 40px; letter-spacing: -1.15px; text-transform: none;
    margin: 0 !important;   /* reset the browser's default h1 margins */
}
@media (max-width: 767px) { #subheader h1.gmc-subheader-title { font-size: 28px; } }

/* Interior pages: push the coloured subheader clear of the (taller) header */
#subheader { margin-top: 128px; }
@media (max-width: 991px) { #subheader { margin-top: 40px; } }

/* Ensure uploaded service / project images crop nicely */
.gmc-cover { width: 100%; height: 240px; object-fit: cover; }
.gmc-service-icon { width: 80px; height: 80px; object-fit: contain; }

/* Never let scroll-animation (WOW.js) leave content permanently hidden —
   content stays visible even without JS / before the element scrolls in. */
.wow { visibility: visible !important; }

/* On phones/tablets the fade-in animation causes each image to flash as it
   scrolls into view — disable the animation there (content just appears). */
@media (max-width: 991px) {
    .wow {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        visibility: visible !important;
    }
}

/* Prev/next project nav — use only the explicit chevrons, hide the
   theme's automatic ::after arrow to avoid double arrows. */
.gmc-project-nav .btn-line:after { content: none !important; }

/* Project cards */
.gmc-project-card { background: #F2EEE9; color: inherit; }
.gmc-project-card h4 { transition: color .2s; }
.gmc-project-card:hover h4 { color: var(--gmc-accent); }

/* Hero: dark overlay so the text stays readable over any background photo.
   Darker on the left (headline) but still dark enough on the right for the
   intro paragraph. */
#section-hero .overlay-bg,
#section-hero .overlay-bg.t2 {
    background: linear-gradient(100deg,
        rgba(15,22,26,.86) 0%,
        rgba(15,22,26,.70) 45%,
        rgba(15,22,26,.58) 100%) !important;
    opacity: 1 !important;
}
#section-hero .jarallax-img { object-fit: cover; }
#section-hero h1,
#section-hero .subtitle,
#section-hero .lead { text-shadow: 0 2px 14px rgba(0,0,0,.45); }

/* Outline buttons: use the brand teal instead of the theme's brown.
   On the (dark) hero, use a white outline for maximum contrast. */
.btn-line {
    border-color: var(--gmc-accent) !important;
    color: var(--gmc-accent) !important;
}
.btn-line:hover {
    background: var(--gmc-accent) !important;
    border-color: var(--gmc-accent) !important;
    color: #fff !important;
}
#section-hero .btn-line {
    border-color: #fff !important;
    color: #fff !important;
}
#section-hero .btn-line:hover {
    background: #fff !important;
    color: var(--gmc-charcoal) !important;
}

/* Small arrow (::after) inside buttons — was the theme's brown */
a.btn-custom:after, .btn-custom:after { color: #fff !important; }
a.btn-line:after, .btn-line:after { color: var(--gmc-accent) !important; }
a.btn-line:hover:after, .btn-line:hover:after { color: #fff !important; }
#section-hero a.btn-line:after, #section-hero .btn-line:after { color: #fff !important; }
#section-hero a.btn-line:hover:after, #section-hero .btn-line:hover:after { color: var(--gmc-charcoal) !important; }

/* "Appelez-nous" block: larger icon aligned with the two numbers */
.gmc-contact-block { display: flex; align-items: center; gap: 12px; }
.gmc-phone-icon { font-size: 34px; line-height: 1; }
.gmc-phone-text { display: flex; flex-direction: column; line-height: 1.25; }
.gmc-callus { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; }
.gmc-contact-block .d-num { display: block; color: inherit; font-weight: 700; font-size: 17px; }
.gmc-contact-block .d-num:hover { color: var(--gmc-accent); }

/* WhatsApp inline link under "Appelez-nous" */
.gmc-wa-link {
    display: inline-flex; align-items: center; gap: 5px;
    margin-top: 4px; font-size: 13px; font-weight: 600; color: #25D366;
}
.gmc-wa-link:hover { color: #128C7E; }
.gmc-wa-link i { font-size: 15px; }

/* Header actions: phone block + WhatsApp button side by side */
.gmc-header-actions { display: flex; align-items: center; gap: 18px; }
.gmc-wa-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 54px; height: 54px; border-radius: 50%; flex: 0 0 auto;
    background: #25D366; color: #fff; transition: background .2s, transform .2s;
}
.gmc-wa-btn:hover { background: #128C7E; color: #fff; transform: scale(1.06); }
.gmc-wa-btn i { font-size: 30px; }

/* Contact page: WhatsApp call-to-action next to the numbers */
.gmc-wa-inline-btn {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 6px;
    background: #25D366; color: #fff; padding: 10px 18px; border-radius: 8px;
    font-weight: 600;
}
.gmc-wa-inline-btn:hover { background: #128C7E; color: #fff; }
.gmc-wa-inline-btn i { font-size: 20px; }

/* Home "Nos réalisations" carousel cards */
.gmc-projects-carousel .dcg-item { height: 320px; }
.gmc-projects-carousel .dcg-image { width: 100%; height: 100%; object-fit: cover; }

/* On touch devices the hover overlay flickers while swiping — replace it with
   a permanent caption at the bottom of each card (no hover, no flicker). */
@media (max-width: 991px) {
    .gmc-projects-carousel .dcg-one .dcg-overlay,
    .gmc-projects-carousel .dcg-one .dcg-text,
    .gmc-projects-carousel .dcg-one .dcg-line { display: none !important; }
    .gmc-projects-carousel .dcg-one .dcg-title {
        position: absolute !important; left: 0 !important; right: 0 !important;
        top: auto !important; bottom: 0 !important;
        opacity: 1 !important; transform: none !important;
        width: 100%; height: auto; padding: 30px 16px 14px;
        color: #fff; font-size: 16px; line-height: 1.25; text-align: left;
        background: linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,0));
        border-radius: 0 0 5px 5px;
    }
}
.gmc-projects-carousel .owl-dots { text-align: center; margin-top: 18px; }
.gmc-projects-carousel .owl-dot span { background: #ccc; }
.gmc-projects-carousel .owl-dot.active span { background: var(--gmc-accent); }

/* Floating WhatsApp button (bottom-right) */
.gmc-wa-float {
    position: fixed; right: 24px; bottom: 24px; z-index: 1100;
    width: 68px; height: 68px; border-radius: 50%;
    background: #25D366; color: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 24px rgba(0,0,0,.28);
    transition: transform .2s, background .2s;
}
.gmc-wa-float:hover { background: #128C7E; color: #fff; transform: scale(1.08); }
.gmc-wa-float i { font-size: 38px; }
@media (max-width: 575px) {
    .gmc-wa-float { right: 16px; bottom: 16px; width: 60px; height: 60px; }
    .gmc-wa-float i { font-size: 33px; }
}

/* WhatsApp icon/text in full black (a theme rule was greying it out) */
.gmc-wa-float, .gmc-wa-float i,
.gmc-wa-float:hover, .gmc-wa-float:hover i,
.gmc-wa-btn, .gmc-wa-btn i,
.gmc-wa-btn:hover, .gmc-wa-btn:hover i,
.gmc-wa-inline-btn, .gmc-wa-inline-btn i,
.gmc-wa-inline-btn:hover, .gmc-wa-inline-btn:hover i {
    color: #000 !important;
}

/* Soft beige panel (same as the service cards) — used for the breadcrumb and
   the CTA bands so the accent colour isn't over-used on large areas.
   Text on it is always #222. */
.gmc-soft-bg { background: #F2EEE9 !important; }
.gmc-soft-bg,
.gmc-soft-bg h1, .gmc-soft-bg h2, .gmc-soft-bg h3, .gmc-soft-bg h4,
.gmc-soft-bg p, .gmc-soft-bg span,
.gmc-soft-bg .crumb, .gmc-soft-bg .crumb li, .gmc-soft-bg .crumb a {
    color: #222 !important;
}

/* Tighter vertical rhythm: halve the theme's 90px section padding */
section { padding: 45px 0 45px 0; }

/* Imported content headings (services / about / projects) render too big at
   the theme's 26px h2 — scale them down to read as in-content subheadings */
.text-content h2 { font-size: 20px; margin-bottom: 14px; }
.text-content h3 { font-size: 18px; margin-bottom: 12px; }
.text-content h4 { font-size: 16px; margin-bottom: 10px; }

/* Footer logo — smaller (theme leaves it at natural size), even smaller on phones */
footer .logo-small { max-width: 150px; height: auto; }
@media (max-width: 767px) { footer .logo-small { max-width: 115px; } }

/* Footer background */
footer { background: #20242C !important; }
.subfooter { background: #1a1d23 !important; }

/* Footer "Demander un devis" — full width of its column, centered, spaced
   (same treatment on desktop and mobile). */
.gmc-footer-cta {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 22px;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
}

/* Django messages */
.gmc-messages { margin-bottom: 0; }
.gmc-alert {
    padding: 14px 20px; border-radius: 6px; margin-bottom: 12px;
    border: 1px solid transparent;
}
.gmc-alert.success { background: #e7f6ec; border-color: #b7e0c4; color: #146b34; }
.gmc-alert.error   { background: #fdeaea; border-color: #f2b8b8; color: #a12020; }

/* =========================================================
   Mobile friendliness
   ========================================================= */
/* Never allow a stray element to cause horizontal scrolling */
html, body { overflow-x: hidden; max-width: 100%; }

@media (max-width: 991px) {
    /* Header: smaller logo, always-visible dark burger */
    #logo .logo { max-height: 64px; }
    header.header-light #logo { padding: 4px 0; }
    #menu-btn { display: block !important; }
    #menu-btn:before,
    .header-light #menu-btn:before { color: var(--gmc-charcoal) !important; }
    /* Phone block is redundant next to the menu on small screens */
    .col-extra { display: none !important; }
    #subheader { margin-top: 24px; }
}

@media (max-width: 767px) {
    /* Separate the "why us" section from the hero (theme sets no-top on it) */
    #section-services { padding-top: 45px !important; }

    /* Slightly smaller hero title on phones (theme default is 64px) */
    #section-hero h1 { font-size: 42px !important; line-height: 1.14 !important; }
    #section-hero .subtitle { white-space: normal !important; }
    #section-hero .btn-custom,
    #section-hero .btn-line {
        display: block; width: 100%; text-align: center; margin: 10px 0 0 0 !important;
    }

    /* Comfortable section spacing / headings on phones */
    h1 { font-size: 34px; }
    h2 { font-size: 26px; }
    .subfooter { text-align: center; }
    .subfooter .text-right { text-align: center !important; margin-top: 8px; }

    /* CTA bands: stack text and button, center them */
    #call-to-action .text-right { text-align: center !important; margin-top: 14px; }
    #call-to-action h3 { text-align: center; }

    /* Project prev/next: allow wrap, keep tap targets full width-ish */
    .gmc-project-nav { justify-content: center; }
}