/* ===================================================================
   Light theme: only the landing section stays dark
   -------------------------------------------------------------------
   Colors follow the 2026 brand guide (variables in custom-styles.css):
     page background    white #ffffff
     boxes              Blanc vert   #e8efec
     text               Vert profond #0f261e
     icons, card titles Vert moyen   #368e75

   Vert moyen reaches about 3.3:1 on Blanc vert, enough for icons and large
   type but not for small text, so small text stays in Vert profond.

   !important appears where main.css and custom-styles.css already use it, and
   on section titles because the pages also set their color inline.
   =================================================================== */

/* The animated page background sat behind the sections. Every section is
   opaque now, so it would only cost repaints. */
body::before {
    display: none !important;
}

body {
    background: #ffffff;
}

/* ---- Sections ---------------------------------------------------------- */
/* Two levels of specificity above custom-styles.css's section:not(#home). */
main section:not(#home) {
    background: #ffffff !important;
    color: var(--eutropy-vert-profond);
}

main section:not(#home) .section-title {
    color: var(--eutropy-vert-profond) !important;
    /* main.css gives titles a dark glow meant for dark backgrounds. */
    text-shadow: none !important;
}

main section:not(#home) .section-title::after {
    background: var(--eutropy-vert-moyen);
}

/* main.css left-aligns this one underline, from when the title was left-aligned. */
#about .section-title::after {
    margin: 10px auto 0;
}

main section:not(#home) .row p,
.product-subtitle,
.join-text,
.vision-text,
.product-feature-title,
.product-feature-text p,
.demo-intro,
.supporters-tagline,
.demo-alt-contact {
    color: var(--eutropy-vert-profond) !important;
}

.demo-alt-contact a {
    color: var(--eutropy-vert-profond);
    text-decoration: underline;
}

/* ---- Boxes ------------------------------------------------------------- */
main section:not(#home) .eutropy-card,
.demo-form-card {
    background: var(--eutropy-blanc-vert);
    border-color: transparent;
}

main section:not(#home) .eutropy-card .card-icon,
main section:not(#home) .eutropy-card h3,
main section:not(#home) .eutropy-card h4 {
    color: var(--eutropy-vert-moyen);
}

main section:not(#home) .eutropy-card p {
    color: var(--eutropy-vert-profond);
}

.eutropy-card .card-tag {
    background: rgba(54, 142, 117, 0.15);
    color: var(--eutropy-vert-profond);
}

/* ---- Demo form --------------------------------------------------------- */
#demo-form label {
    color: var(--eutropy-vert-profond) !important;
}

.form-optional {
    color: var(--eutropy-vert-profond);
}

#demo-form .form-control,
#demo-form .form-control:focus {
    background: #ffffff !important;
    color: var(--eutropy-vert-profond) !important;
    box-shadow: none !important;
}

#demo-form .form-control {
    border: 1.5px solid rgba(54, 142, 117, 0.45) !important;
}

#demo-form .form-control:focus {
    border-color: var(--eutropy-vert-moyen) !important;
    box-shadow: 0 0 0 3px rgba(54, 142, 117, 0.2) !important;
}

/* !important: main.css forces white placeholders on phones. */
#demo-form .form-control::placeholder {
    color: rgba(15, 38, 30, 0.65) !important;
    opacity: 1;
}

/* Bootstrap fixes single-line fields at 34px, which leaves no room for the
   text once main.css adds its 12px of padding on phones. */
@media (max-width: 991px) {
    #demo-form input.form-control {
        height: auto !important;
    }
}

/* The guide uses Vert moyen for buttons on light backgrounds and Vert on hover. */
#demo-form .btn-demo,
#demo-form .btn-demo:visited,
#demo-form .btn-demo:active {
    background: var(--eutropy-vert-moyen) !important;
    color: #ffffff !important;
    box-shadow: none !important;
    /* Outfit Medium, by choice. White on Vert moyen is about 4:1, which meets the
       accessibility minimum only as large bold text or from 24px at this weight. */
    font-size: max(19px, 1.328vw) !important;
    font-weight: 500 !important;
    /* The same corners as the form's fields. */
    border-radius: 8px !important;
    /* main.css caps this at 90% on phones, which left it off-centre in the box. */
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
}

#demo-form .btn-demo:hover,
#demo-form .btn-demo:focus {
    background: var(--eutropy-accent) !important;
    color: var(--eutropy-noir-vert) !important;
    box-shadow: none !important;
}

/* ---- Supporters -------------------------------------------------------- */
/* The brightness lift in custom-styles.css keeps dark logos legible on a dark
   background. On white it would only wash them out. */
.partners-grid img,
.partners-grid img:hover {
    filter: none;
    opacity: 1;
}

/* ---- Header past the hero (class set by js/header-theme.js) ------------ */
#navigation.nav-light,
#navigation.nav-light.scrolled,
#navigation.nav-light.animated-header {
    background: #ffffff !important;
    box-shadow: 0 1px 0 var(--eutropy-blanc-vert) !important;
    border-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Every part of the header has to change color in the same frame. main.css
   fades the bar over 0.4s and the links have their own fade, while the logo
   image can only swap instantly, so the parts drifted apart mid-switch. */
#navigation,
#navigation a,
#navigation .navbar-toggle,
#navigation .icon-bar {
    transition: none !important;
}

/* Only the phone dropdown needs its own background. On desktop the menu sits
   directly on the bar, so there is no second box to switch. */
@media (max-width: 991px) {
    #navigation.nav-light .navbar-collapse {
        background: #ffffff !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

#navigation.nav-light .navbar-nav > li > a.nav-link {
    color: var(--eutropy-vert-profond) !important;
}

/* The section being read, set by js/header-theme.js: Vert on the dark header,
   Vert moyen on the light one. */
#navigation .navbar-nav > li > a.nav-link.is-active {
    color: var(--eutropy-accent) !important;
}

#navigation.nav-light .navbar-nav > li > a.nav-link:hover,
#navigation.nav-light .navbar-nav > li > a.nav-link:focus,
#navigation.nav-light .navbar-nav > li > a.nav-link.is-active {
    color: var(--eutropy-vert-moyen) !important;
    background: transparent !important;
}

#navigation.nav-light .navbar-toggle {
    background: transparent !important;
    border-color: var(--eutropy-vert-profond) !important;
}

#navigation.nav-light .navbar-toggle .icon-bar {
    background: var(--eutropy-vert-profond) !important;
}

/* ---- Typography (brand guide, page 3) ---------------------------------- */
/* Titles: Outfit. H1-H3 Medium; all-caps labels Light.
   Body: Inter, in Light where the contrast allows it. */

/* main.css forces section titles to 700. */
.section-title,
.section-title h2 {
    font-weight: 500 !important;
}

/* A sitewide rule sets every <span> to Inter, which caught this one. */
#home .caption-content .hero-headline {
    font-family: var(--font-heading) !important;
    /* Always the two lines set by the <br> in the markup, on every screen. */
    white-space: nowrap;
    /* main.css gives the first <span> of the caption a 100px top and 20px
       left margin, from the old slider. The headline is that span now. */
    margin-top: 0 !important;
    margin-left: 0 !important;
}

/* nowrap means the longer line has to fit the copy column, so below 992px
   the size follows that column (100cqw, see custom-styles.css). In Outfit
   Light the longer line ("Gardez le contrôle") is about 7.8x its font-size
   wide; dividing by 8 leaves a little to spare. */
@media (max-width: 991px) and (orientation: portrait) {
    #home .caption-content .hero-headline {
        font-size: min(calc(100cqw / 8), 64px) !important;
    }
}

@media (max-width: 700px) and (orientation: portrait) {
    #home .caption-content .hero-headline {
        font-size: min(calc(100cqw / 8), 52px) !important;
    }
}

/* Under the headline, a subtitle in Inter Light, Blanc vert, then the button.
   !important: main.css sizes every `.caption-content p` for the old slider,
   several times with !important. */
#home .caption-content .hero-title {
    margin-bottom: clamp(14px, 1.2vw, 36px);
}

#home .caption-content .hero-subtitle {
    font-family: var(--font-body) !important;
    font-weight: 300 !important;
    color: var(--eutropy-blanc-vert) !important;
    font-size: clamp(17px, 1.25vw, 40px) !important;
    line-height: 1.5 !important;
    /* Ends before the headline does, well clear of the gear. */
    max-width: 32em;
    margin: 0 0 clamp(26px, 2.5vw, 64px) 0 !important;
    text-wrap: balance;
}

@media (max-width: 991px) {
    #home .caption-content .hero-subtitle {
        font-size: clamp(16px, 4.3vw, 22px) !important;
    }
}

/* A window under 992px that is wider than tall (a narrowed browser on a
   computer, a tablet held sideways) has little room below the text, so it
   takes the computer arrangement instead: smaller, narrower text on the left
   and the gear beside it (js/landing-gears.js). */
@media (max-width: 991px) and (orientation: landscape) {
    /* About 40px at 991px, meeting the computer size just above it. */
    #home .caption-content .hero-headline {
        font-size: clamp(30px, 4.2vw, 44px) !important;
    }

    #home .caption-content .hero-subtitle {
        font-size: clamp(15px, 1.75vw, 17px) !important;
        max-width: 24em;
    }
}

.eutropy-card .card-tag {
    font-family: var(--font-heading) !important;
    font-weight: 300;
}

/* main.css asks for Poppins here, which the site does not load. */
#demo-form .form-control {
    font-family: var(--font-body) !important;
}

main section:not(#home) p {
    font-weight: 300;
}

/* Outfit Medium: a benefit reads as a short title, not as body text. */
main section:not(#home) .eutropy-card p.card-benefit {
    font-weight: 500;
}

/* Keeps a single word from ending up alone on the paragraph's last line. */
.vision-text {
    text-wrap: pretty;
}

/* ---- Section titles ---------------------------------------------------- */
main section:not(#home) .section-title {
    font-size: clamp(28px, 2.5vw, 96px) !important;
    line-height: 1.2;
    margin-bottom: clamp(28px, 2.222vw, 84px) !important;
    text-wrap: balance;
}

/* Sub-sections of Produit, scaled to stay clearly under the section title and
   level with the row titles beside them. */
.product-subtitle {
    font-size: clamp(24px, 1.875vw, 72px);
}

/* ---- Telling consecutive sections apart -------------------------------- */
/* The brand guide's own use of Blanc vert: "sections à distinguer sur une page
   au fond blanc". Every other section takes it, with more room to read as a
   band. Boxes turn white inside those sections, or they would disappear. */
main section:not(#home) {
    padding-top: clamp(56px, 4.444vw, 170px) !important;
    padding-bottom: clamp(56px, 4.444vw, 170px) !important;
}

main section#product,
main section#join {
    background: var(--eutropy-blanc-vert) !important;
}

main section#product .eutropy-card {
    background: #ffffff;
}