/* 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: #CDB489;       /* brand champagne — fills/borders + accents on dark bg. Prev ochre: #A8843A */
    --gmc-accent-ink: #8C6E2C;   /* deeper champagne — accent TEXT on light bg (kept readable) */
    --gmc-accent-dark: #B89A62;  /* champagne fill hover */
    --gmc-btn-text: #241C0C;     /* dark text sitting on champagne fills */
    --gmc-charcoal: #2b2b2b;     /* brand charcoal */
    --gmc-header: #20242C;       /* dark header (matches the footer) */
}

/* Accent colour helpers used by the theme */
/* Accent as TEXT on light backgrounds uses the deeper champagne (readable) */
.id-color,
a.id-color,
.text-primary { color: var(--gmc-accent-ink) !important; }

/* Accent as FILL: champagne background with dark text (champagne is light) */
.bg-color { background-color: var(--gmc-accent) !important; }
.bg-color, .bg-color h1, .bg-color h2, .bg-color h3, .bg-color h4, .bg-color h5,
.bg-color p, .bg-color.text-light, .bg-color.text-light h3,
.bg-color.text-light p { color: var(--gmc-btn-text) !important; }

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

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

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

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

/* 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; }

/* Dark header (charcoal, matches the footer) so it can carry the white logo.
   Tall enough for the bigger logo + two phone numbers, in the normal AND the
   scrolled (.smaller) state. */
header.header-light { background: var(--gmc-header) !important; height: auto !important; min-height: 104px; }
header .container > .row > .col-md-12 > .md-flex { min-height: 96px; align-items: center; }
/* Desktop: the menu is centred on the "GM concept" wordmark, but the tagline
   under it makes the whole logo bottom-heavy — nudge the menu down a touch so
   it reads as centred on the full logo block. */
@media (min-width: 992px) { #mainmenu { position: relative; top: 8px; } }
header.header-light.smaller:not(.header-bottom):not(.side-header):not(.force-header-mobile):not(.header-s2) {
    height: auto !important; min-height: 104px; background: var(--gmc-header) !important;
}

/* Dark-header text: light nav + phone, champagne accents */
header.header-light #mainmenu > li > a { color: #fff !important; }
header.header-light #mainmenu > li > a:hover,
header.header-light #mainmenu > li.current-menu-item > a { color: var(--gmc-accent) !important; }
header.header-light .id-color,
header.header-light .gmc-callus,
header.header-light .gmc-phone-icon { color: var(--gmc-accent) !important; }
header.header-light .gmc-contact-block .d-num { color: #fff !important; }
header.header-light .gmc-contact-block .d-num:hover { color: var(--gmc-accent) !important; }
header.header-light .info,
header.header-light .info a,
header.header-light .info strong { color: #cfd3d8 !important; }
/* Footer link hovers use the light champagne (footer is dark) */
footer a:hover { color: var(--gmc-accent) !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-ink); 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-ink); }

/* 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-ink) !important;
    color: var(--gmc-accent-ink) !important;
}
.btn-line:hover {
    background: var(--gmc-accent-ink) !important;
    border-color: var(--gmc-accent-ink) !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: var(--gmc-btn-text) !important; }
a.btn-line:after, .btn-line:after { color: var(--gmc-accent-ink) !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; }

/* Hero buttons: make the filled ("Nos services") and outline ("Demander un
   devis") buttons a symmetric pair — same height, padding, radius, type scale.
   The filled one gets a transparent 2px border so both end up the same height. */
#section-hero .btn-custom,
#section-hero .btn-line {
    font-size: 13px !important;
    letter-spacing: 2px !important;
    line-height: 1.5 !important;
    padding: 12px 30px !important;
    border-radius: 6px !important;
    border-width: 2px !important;
    border-style: solid !important;
    vertical-align: top;
}
#section-hero .btn-custom { border-color: transparent !important; }

/* Hero sizing. The hero deliberately does NOT carry the theme's .full-height
   class: designesia.js does `$('.full-height').css('height', windowHeight)`, and
   fighting that inline height with !important desynced jarallax — its image
   container kept the old height and spilled over the cards on first paint.
   Without the class the height is pure CSS, so jarallax measures the real box.
   These two rules replace what .full-height(.vertical-center) provided. */
#section-hero.gmc-hero {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
@media (min-width: 992px) {
    #section-hero {
        /* Calibrated against a real browser screenshot (instrumented probes here
           read ~75px off, so trust the screenshot). The reserve is the space
           left below the hero: at 177px the cards land exactly on the fold, so
           200px has them just touching it with a small margin against clipping.
           The hero grows to fill everything else. */
        min-height: max(520px, calc(100vh - 200px));
    }
    /* The beige band's bottom padding now supplies the gap, so keep this at the
       normal section rhythm rather than doubling the empty space. */
    #section-highlight { padding-top: 45px; }
    /* The "why us" row carries mt-50, but .no-top zeroes the section's
       padding-top, so that margin collapses out and the cards overflow their
       beige band — leaving the "Nos services" heading level with the cards.
       flow-root contains the margin; the padding restores a clean gap below. */
    #section-services {
        display: flow-root;
        /* Normal rhythm: the cards now end on the fold, so this padding sits
           below it and only matters once you scroll. */
        padding-bottom: 60px !important;
    }
}

/* Hero type: slightly smaller headline, bigger keyword line */
#section-hero h1 { font-size: 52px !important; }
#section-hero .subtitle {
    font-size: 20px !important;
    font-weight: 600 !important;
    letter-spacing: .3px !important;
    color: var(--gmc-accent) !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) {
    /* Compact header: the theme forces a 96px row + 30px padding, leaving a huge
       blank band below the logo. Collapse it so the header hugs the logo. */
    header.header-light { min-height: 0 !important; padding-top: 6px !important; padding-bottom: 6px !important; }
    /* flow-root so the row actually contains the floated logo/burger — otherwise
       it collapses to 0 and the header can't size itself to the logo. */
    header .container > .row > .col-md-12 > .md-flex { min-height: 0 !important; display: flow-root; }
    header .container .col-md-12 { margin-bottom: 0 !important; }
    /* The theme pulls #logo up by -15px (sized for the old 157px header); with
       the compact header that clipped the top of the logo off the page. */
    header.header-light #logo { margin-top: 0 !important; }
    /* Bigger logo on mobile */
    #logo .logo { max-height: 82px; }
    header.header-light #logo { padding: 2px 0; }
    /* Bigger, always-visible dark burger, vertically centred against the logo */
    #menu-btn {
        display: block !important;
        width: 48px !important; height: 48px !important;
        margin-top: 16px !important;
    }
    #menu-btn:before,
    .header-light #menu-btn:before { color: #fff !important; font-size: 34px !important; }
    /* Phone block is redundant next to the menu on small screens */
    .col-extra { display: none !important; }
    #subheader { margin-top: 24px; }

    /* Hero: the theme's two .spacer-double blocks (84px each) push the text far
       below the header and shove the CTAs under the fold. Drop them and tighten
       the padding so both buttons stay visible on a phone
       (iPhone 15/16 = 393x852 CSS px, minus ~110-160px of Safari chrome). */
    #section-hero { padding-top: 32px !important; padding-bottom: 36px !important; }
    #section-hero .spacer-double { display: none !important; }
}

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

    /* Smaller hero title on phones; keep the keyword line readable but compact */
    #section-hero h1 { font-size: 38px !important; line-height: 1.14 !important; }
    #section-hero .subtitle { white-space: normal !important; font-size: 16px !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; }
}