/*
* Starter Theme - Main Styles
* Uses CSS variables from _variables.css for theming
*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

@charset "UTF-8";

/* ==========================================
 * ANCHOR SCROLLING
 * Smooth in-page scrolling for nav/CTA anchors (#contact, #faq, #a-propos),
 * with a top offset so the target clears the fixed 72px header.
 * ========================================== */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
}

/* ==========================================
 * COMMENT ÇA SE PASSE - step cards (one title + bullets)
 * reset.css sets list-style:none, so restore discs inside the step copy.
 * ========================================== */
.steps-section__step-copy strong {
    display: block;
    margin-bottom: var(--space-2);
}
.steps-section__step-copy ul {
    list-style: disc;
    padding-left: 1.1em;
    margin: 0;
}

/* ==========================================
 * SERVICE PAGES - "Les solutions" subtitle centered (plain-text subtitle
 * isn't centered by title-section-center, which only centers child elements).
 * ========================================== */
.service-solutions .title-section__sous-titre {
    text-align: center;
}

/* ==========================================
 * FONT FACES
 * WAPI PREV: Raleway, self-hosted (no Google hotlinking - RGPD).
 * Raleway is the real font of satelliteam.com, one of Yves's two
 * reference sites, and is the font of the approved Direction A.
 *
 * Google now ships Raleway only as a VARIABLE font, so all five faces
 * below share one 48KB file and each CLAMPS the weight axis to a single
 * value (`font-weight: 300 300`). That keeps the theme's convention
 * intact - weight is encoded in the family name, so every existing
 * token maps to the right weight with no per-component changes - while
 * downloading a fifth of what five static files would cost.
 * Verified in Chromium: 300/400/600 render at 185/186/195px for the
 * same string, identical to setting the axis on the element.
 *
 * Inter faces are kept below; nothing references them any more.
 * See _variables.css BRAND fonts and sop/dev/starter-theme-component-library.md Rule 4.
 * ========================================== */

@font-face {
    font-family: "RalewayLight";
    src: url(../fonts/Raleway-Variable.woff2) format("woff2");
    font-weight: 300 300;
    font-display: swap;
}

@font-face {
    font-family: "RalewayRegular";
    src: url(../fonts/Raleway-Variable.woff2) format("woff2");
    font-weight: 400 400;
    font-display: swap;
}

@font-face {
    font-family: "RalewayMedium";
    src: url(../fonts/Raleway-Variable.woff2) format("woff2");
    font-weight: 500 500;
    font-display: swap;
}

@font-face {
    font-family: "RalewaySemiBold";
    src: url(../fonts/Raleway-Variable.woff2) format("woff2");
    font-weight: 600 600;
    font-display: swap;
}

@font-face {
    font-family: "RalewayBold";
    src: url(../fonts/Raleway-Variable.woff2) format("woff2");
    font-weight: 700 700;
    font-display: swap;
}

@font-face {
    font-family: "InterRegular";
    src: url(../fonts/Inter-Regular.woff2) format("woff2");
    font-display: swap;
}

@font-face {
    font-family: "InterMedium";
    src: url(../fonts/Inter-Medium.woff2) format("woff2");
    font-display: swap;
}

@font-face {
    font-family: "InterSemiBold";
    src: url(../fonts/Inter-SemiBold.woff2) format("woff2");
    font-display: swap;
}

@font-face {
    font-family: "InterBold";
    src: url(../fonts/Inter-Bold.woff2) format("woff2");
    font-display: swap;
}

@font-face {
    font-family: "InterExtraBold";
    src: url(../fonts/Inter-ExtraBold.woff2) format("woff2");
    font-display: swap;
}


/* ==========================================
 * BASE STYLES
 * ========================================== */

* {
    font-family: var(--font-body);
}

/* Raw headings (e.g. on legal pages) get the heading weight even without
   component CSS - components set their own font via --font-heading. */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
}

body {
    color: var(--color-text-primary);
    background-color: var(--color-bg-white);
    /* The starter never set a body font-family, so any text not inside a
       component that sets its own fell back to the browser serif. Direction
       A puts Raleway 400 / 1.65 on the body, so set it here. */
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
}


/* ==========================================
 * LAYOUT
 * ========================================== */

.container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--container-padding) !important;
}

.container-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.section {
    padding: var(--section-padding) 0;
}

/* WAPI PREV: sections alternate background, top to bottom. The alternate
   class is stamped at render time by ksw_alternate_sections() (see
   includes/theme-functions.php), NOT by :nth-of-type - nth-of-type counts
   per parent, so nav-anchor wrappers (<div id="a-propos">) break it. */
.section:not(.section--alt) {
    background-color: var(--color-bg-white);
}

.section.section--alt {
    background-color: var(--color-section-alt);
}

@media all and (max-width: 550px) {
    .section {
        padding: var(--section-padding-mobile) 0;
    }
}


/* ==========================================
 * ANIMATIONS
 * ========================================== */

.reveal-item {
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
    -webkit-transition: opacity var(--transition-slow), visibility var(--transition-slow), -webkit-transform var(--transition-slow);
    transition: opacity var(--transition-slow), visibility var(--transition-slow), -webkit-transform var(--transition-slow);
    -o-transition: opacity var(--transition-slow), transform var(--transition-slow), visibility var(--transition-slow);
    transition: opacity var(--transition-slow), transform var(--transition-slow), visibility var(--transition-slow);
    transition: opacity var(--transition-slow), transform var(--transition-slow), visibility var(--transition-slow), -webkit-transform var(--transition-slow);
}

.reveal-item.active {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
}


/* ==========================================
 * BACKGROUND UTILITIES
 * ========================================== */

.light-blue-bg,
.light_blue_bg {
    background-color: var(--color-bg-light);
}

.bg-white {
    background-color: var(--color-bg-white);
}

.bg-dark {
    background-color: var(--color-bg-dark);
}

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


/* ==========================================
 * TEXT UTILITIES
 * ========================================== */

.text-primary {
    color: var(--color-primary);
}

.text-secondary {
    color: var(--color-secondary);
}

.text-muted {
    color: var(--color-text-muted);
}

.text-inverse {
    color: var(--color-text-inverse);
}


/* ==========================================
 * TYPOGRAPHY
 * ========================================== */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-heading);
    color: var(--color-text-secondary);
    line-height: var(--line-height-tight);
}

/* Direction A gives H1 a LIGHT weight with a slight negative tracking -
   the big thin headline is the signature of the look Yves approved
   (`h1{font-weight:300;letter-spacing:-.01em}` in the accent mock).
   Emphasis inside an H1 steps up to semi-bold, as in the mock. */
h1, .h1 {
    font-family: var(--font-heading-light);
    letter-spacing: -0.01em;
}

h1 strong, .h1 strong,
h1 b, .h1 b {
    font-family: var(--font-heading);
    font-weight: inherit;
}

/* Keep page titles readable on phones across the whole site. Component-level
   H1 rules are intentionally overridden here so every template is consistent. */
@media (max-width: 550px) {
    h1, .h1 {
        font-size: var(--text-3xl) !important;
    }
}

a {
    color: var(--color-primary);
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-primary-light);
}


/* ==========================================
 * BUTTONS (Base)
 * ========================================== */

.btn,
button {
    border-radius: var(--border-radius-md);
    transition: all var(--transition-base);
}

.btn-primary {
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
    border: none;
}

.btn-primary:hover {
    background-color: var(--color-primary-light);
}

.btn-secondary {
    background-color: var(--color-secondary);
    color: var(--color-text-inverse);
    border: none;
}

.btn-secondary:hover {
    background-color: var(--color-secondary-light);
}

.btn-outline {
    background-color: transparent;
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
}

.btn-outline:hover {
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
}


/* ==========================================
 * CARDS
 * ========================================== */

.card {
    background-color: var(--color-bg-white);
    border-radius: var(--border-radius-md);
}


/* ==========================================
 * SHADOWS
 * ========================================== */

/* Shadows removed site-wide (flat design) */
.shadow-sm,
.shadow-md,
.shadow-lg {
    box-shadow: none;
}

/* Homepage hero (two-cols-image-right) overrides - scoped to the front page */
body.home .two-cols-image-right__content {
    /* Image column smaller than the default 1fr 1fr; text takes the freed space */
    grid-template-columns: 1fr 0.64fr;
}

/* The homepage rule above is loaded after the component stylesheet, so without
   this matching override it wins over the component's mobile one-column layout.
   That squeezed the hero copy into ~200px and reduced the portrait to a thumbnail. */
@media (max-width: 880px) {
    body.home .two-cols-image-right__content {
        grid-template-columns: 1fr;
    }
}

body.home .two-cols-image-right__cta {
    /* Keep the CTA left-aligned at its natural width (the flex stack otherwise stretches it full-width) */
    align-self: flex-start;
}

/* Hero badge (the title-section label rendered as a pill above the H1).
   Carries a touch of the accent on its border. */
body.home .two-cols-image-right .title-section__label {
    display: inline-block;
    padding: var(--space-2) var(--space-3);
    background: var(--color-bg-light);
    border: 1px solid var(--color-accent);
    border-radius: var(--border-radius-pill);
    font-size: var(--text-sm);
    color: var(--color-text);
}

@media (max-width: 550px) {
    /* Mobile hero sequence requested by the client: badge, portrait, H1, copy.
       display: contents lets the portrait sit between the two title elements
       without duplicating content or changing the desktop markup. */
    body.home .two-cols-image-right__text,
    body.home .two-cols-image-right .title-section {
        display: contents;
    }

    body.home .two-cols-image-right .title-section__label {
        order: 1;
        justify-self: center;
        max-width: 100%;
        margin-bottom: 0;
        text-align: center;
    }

    body.home .two-cols-image-right__image {
        order: 2;
    }

    body.home .two-cols-image-right .title-section__titre {
        order: 3;
    }

    body.home .two-cols-image-right__text__content {
        order: 4;
    }

    body.home .two-cols-image-right__cta {
        order: 5;
        margin-top: 0;
    }
}

/* Cards read as cards on ANY section background (white cards were invisible on
   white sections). Applies to the routing/services cards and the benefit/proof
   cards alike. */
.simple-cards-section__card,
.avantage-card {
    border: 1px solid var(--color-bg-accent);
    transition: border-color var(--transition-base);
}

/* A touch of the accent on hover: the card border warms to the yellow.
   Border-only, so nothing depends on it being perceived (the card is
   already legible at rest). */
.simple-cards-section__card:hover,
.avantage-card:hover {
    border-color: var(--color-accent);
}

/* ==========================================
 * ACCENT DETAILS
 * Direction A puts the accent on the small details as well as the button
 * (mock: `ul.bul li::before{background:var(--detail)}`). Bullets are the
 * main one. Never accent TEXT: #FFC107 is 1.63:1 on the page background,
 * so the mock's yellow `.eyebrow` label is deliberately NOT reproduced.
 * ========================================== */

/* Native disc markers: accent-coloured and sized up. A ::marker only takes
   font-size, so the dot grows with it - roughly 9px at 1em, so 1.55em lands
   near the 14px painted dot used in the services grid. */
li::marker {
    color: var(--color-accent);
    font-size: 1.55em;
}

/* Per-card CTA = small arrow link (Electrocom style), not a big pill button.
   The section-level button (e.g. "Voir le détail des services") is unchanged. */
.simple-cards-section .simple-cards-section__card-cta {
    background: none !important;
    border: none !important; /* override dev-naked.css "all CTAs outlined" !important rule */
    box-shadow: none;
    color: var(--color-primary);
    padding: 0;
    height: auto;
    min-height: 0;
    text-decoration: none;
}

.simple-cards-section .simple-cards-section__card-cta:hover {
    background: none !important;
    border: none !important;
    text-decoration: underline;
}

/* --- Site-wide design rules (home + service pages share the same look) --- */

/* Section-level CTAs (incl. the recurring "Me contacter"): centered + spaced */
.simple-cards-section__cta-wrapper,
.steps-section__cta-wrapper {
    text-align: center;
    margin-top: 40px;
}

.section-avantages-clients__cta {
    margin-top: 40px;
}

/* "Comment ça se passe": steps laid out horizontally as a row of step cards.
   Scoped via .steps-section to out-specify the component's own .steps-section__steps
   (same specificity would lose on load order). */
.steps-section .steps-section__steps {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
    max-width: none;
}

.steps-section .steps-section__step {
    flex: 1 1 0;
    min-width: 200px;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Avantages/proof cards: gap between cards + breathing room under the title */
.section-avantages-clients__cards {
    gap: 24px;
}

.section-avantages-clients .title-section {
    margin-bottom: 24px;
}

/* Benefit cards use fixed thirds on desktop. On phones those thirds still fit
   on one flex row, but become unreadably narrow and overflow once the gap is
   included, so stack every instance of this shared section. */
@media (max-width: 700px) {
    .section-avantages-clients .avantage-card {
        width: 100%;
    }
}

/* Proof block ("Pourquoi travailler avec WAPI PREV"): 2 cards per row */
.why-section .section-avantages-clients__cards {
    gap: 24px;
}

.why-section .avantage-card {
    width: calc(50% - 12px);
}

@media (max-width: 700px) {
    .why-section .avantage-card {
        width: 100%;
    }
}

/* Centre-cap a title-and-copy intro paragraph */
.title-and-copy-section__copy {
    margin-left: auto;
    margin-right: auto;
}

/* FAQ -> footer spacing: keep the FAQ section's own bottom padding (so its
   content is not glued to the section edge) and drop the footer's top margin
   (which added an empty gap above the footer). */
.site-footer {
    margin-top: 0;
}

/* Readability for the Problems prose: looser line-height. */
.section-problemes__text__text * {
    line-height: 1.7;
}

/* Problems section: 2-column (text left, image/placeholder right) */
.section-problemes__content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
    align-items: center;
}

.section-problemes__image {
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--border-radius);
}

.section-problemes__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--border-radius);
}

.section-problemes__image--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-light, #f5f5f5);
    color: var(--color-text-muted, #666);
}

.section-problemes__image--placeholder svg {
    width: clamp(56px, 10vw, 96px);
    height: auto;
}

@media (max-width: 880px) {
    .section-problemes__content {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }
}

.simple-cards-section .simple-cards-section__card-cta::after {
    content: " \2192"; /* arrow */
}