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

/* =========================================================
   1. DESIGN TOKENS
   Modifier d'abord ces variables pour appliquer un changement
   de façon uniforme sur tout le site.
   ========================================================= */

:root {
    /* Couleurs globales */
    --c-navy: #0b0d16;
    --c-navy-soft: #171c3a;
    --c-orange: #ed6d29;
    --c-orange-light: #f4f4f4;
    --c-dark: #0b0d16;
    --c-text: #0b0d16;
    --c-white: #ffffff;
    --c-border: #dedede;

    /* Typographie globale */
    --ff-heading: 'Anton', sans-serif;
    --ff-body: 'Inter', Arial, sans-serif;
    --fs-h1: clamp(3.25rem, 3.75vw, 4.5rem);
    --fs-h2: clamp(2.85rem, 3.23vw, 3.875rem);
    --fs-h3: clamp(1.05rem, 1.05vw, 1.25rem);
    --fs-body: clamp(1rem, 0.94vw, 1.125rem);
    --fs-lead: clamp(1.125rem, 1.3vw, 1.5625rem);
    --fs-small: clamp(0.82rem, 0.82vw, 1rem);
    --fs-stat: clamp(4.5rem, 5.8vw, 7rem);
    --lh-heading: 1.2;
    --lh-body: 1.56;

    /* Mise en page globale */
    --container: 1740px;
    --gutter: clamp(20px, 4.6vw, 88px);
    --frame: clamp(12px, 1.875vw, 36px);

    /* Échelle d'espacement commune */
    --space-xs: clamp(8px, 0.6vw, 12px);
    --space-sm: clamp(12px, 0.9vw, 18px);
    --space-md: clamp(18px, 1.25vw, 24px);
    --space-lg: clamp(24px, 1.65vw, 32px);
    --space-xl: clamp(32px, 2.2vw, 44px);
    --space-2xl: clamp(42px, 3vw, 58px);
    --space-3xl: clamp(54px, 4.2vw, 82px);

    /* Composants partagés */
    --control-height: clamp(52px, 3vw, 58px);
    --button-padding: clamp(24px, 2.1vw, 40px);
    --radius: 0;
    --shadow: 0 10px 28px rgba(6, 11, 26, 0.08);
    --icon-size: clamp(46px, 3vw, 58px);

    /* Animations partagées */
    --ease-reveal: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-wipe: cubic-bezier(0.2, 0.75, 0.2, 1);
    --duration-reveal: 0.85s;
    --duration-wipe: 0.78s;
}


/* =========================================================
   2. BASE ET TYPOGRAPHIE
   ========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
    border-radius: 0 !important;
}

html {
    overflow-x: hidden;
}

html,
body {
    margin: 0;
    padding: 0;
    background: var(--c-white);
}

body {
    color: var(--c-text);
    font-family: var(--ff-body);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    overflow-x: clip;
}

body.menu-open {
    overflow: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    font-family: var(--ff-heading);
    font-weight: 400;
    line-height: var(--lh-heading);
    letter-spacing: 0;
}

h1 {
    font-size: var(--fs-h1);
}

h2 {
    font-size: var(--fs-h2);
}

h3 {
    font-size: var(--fs-h3);
}

p {
    margin-block: 0;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

button,
input {
    font: inherit;
}

/* =========================================================
   3. CLASSES GÉNÉRALES RÉUTILISABLES
   ========================================================= */

.container {
    width: min(calc(100% - (var(--gutter) * 2)), var(--container));
    margin-inline: auto;
}

.section {
    position: relative;
    isolation: isolate;
}

.section--dark {
    background: var(--c-dark);
    color: var(--c-white);
}

.section--padded {
    padding-block: clamp(72px, 6.4vw, 124px);
}

/*
 * Crée une marge blanche continue sur le côté gauche d'une section.
 * Réutilisable sur les prochaines sections qui doivent suivre le même cadre.
 */
.section--framed-left {
    margin-left: var(--frame);
}

/*
 * Crée une marge blanche identique à gauche et à droite.
 * Utile pour les sections centrées qui doivent suivre le même cadre
 * visuel que la bannière et garder une respiration symétrique.
 */
.section--framed-both {
    margin-inline: var(--frame);
}

/*
 * Conserve le contenu et les médias pleine largeur, mais commence seulement
 * l'arrière-plan coloré après la marge blanche de gauche.
 */
.section--background-framed-left {
    --section-background: var(--c-navy-soft);
    background:
        linear-gradient(
            to right,
            var(--c-white) 0 var(--frame),
            var(--section-background) var(--frame) 100%
        );
}

.text-lead {
    font-size: var(--fs-lead);
    line-height: 1.35;
}

.display-copy {
    font-family: var(--ff-heading);
    font-size: var(--fs-h3);
    font-weight: 400;
    line-height: 1.45;
}

/* La balise <mark> colore progressivement son texte au défilement. */
mark {
    --mark-progress: 0%;
    --mark-color: var(--c-orange);
    display: inline;
    padding: 0;
    background: linear-gradient(
        90deg,
        var(--mark-color) 0 var(--mark-progress),
        currentColor var(--mark-progress) 100%
    );
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    color: inherit;
    -webkit-text-fill-color: transparent;
}

/*
 * Sur plusieurs lignes, chaque mot reçoit sa propre progression. Le remplissage
 * suit donc réellement la lecture de la phrase au lieu de recommencer au même
 * endroit sur chaque fragment de ligne.
 */
mark.is-segmented {
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    color: inherit;
    -webkit-text-fill-color: currentColor;
}

.mark__segment {
    --mark-segment-progress: 0%;
    display: inline-block;
    background: linear-gradient(
        90deg,
        var(--mark-color, var(--c-orange)) 0 var(--mark-segment-progress),
        currentColor var(--mark-segment-progress) 100%
    );
    background-clip: text;
    -webkit-background-clip: text;
    color: inherit;
    -webkit-text-fill-color: transparent;
}


/*
 * Toute balise <u> devient un trait orange piloté par le défilement.
 * Le même composant fonctionne dans les titres et dans les textes courants.
 * Les sélecteurs de <span style="text-decoration"> assurent la compatibilité
 * avec d'anciens contenus TinyMCE.
 */
u,
.scroll-underline,
.rich-text span[style*="text-decoration: underline"],
.rich-text span[style*="text-decoration-line: underline"] {
    --underline-progress: 0;
    --underline-height: clamp(2px, 0.16vw, 3px);
    --underline-offset: -0.02em;
    position: relative;
    z-index: 0;
    display: inline-block;
    padding-bottom: 0.08em;
    text-decoration: none !important;
}

:is(h1, h2, h3, .display-heading, .display-copy) u,
:is(h1, h2, h3, .display-heading, .display-copy) .scroll-underline {
    --underline-height: clamp(5px, 0.42vw, 8px);
    --underline-offset: 0.03em;
}

u::after,
.scroll-underline::after,
.rich-text span[style*="text-decoration: underline"]::after,
.rich-text span[style*="text-decoration-line: underline"]::after {
    position: absolute;
    z-index: -1;
    right: 0;
    bottom: var(--underline-offset);
    left: 0;
    height: var(--underline-height);
    background: var(--c-orange);
    content: '';
    transform: scaleX(var(--underline-progress));
    transform-origin: left center;
    will-change: transform;
}

.two-column-copy {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3xl);
}

.media-wide {
    margin: 0;
    overflow: hidden;
}

.media-wide__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.media-wide__picture {
    display: block;
    width: 100%;
    height: 100%;
}

.media-wide--placeholder {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
}

.partner-lockup {
    display: grid;
    grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
    align-items: center;
    gap: var(--space-xl);
}

.partner-lockup__logo-image {
    width: 100%;
    max-height: 84px;
    object-fit: contain;
}

.partner-lockup__logo-fallback {
    display: inline-flex;
    flex-direction: column;
    color: var(--c-white);
    font-family: var(--ff-body);
    line-height: 0.85;
    text-align: center;
}

.partner-lockup__logo-fallback strong {
    font-size: clamp(1.5rem, 2.1vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -0.05em;
}

.partner-lockup__logo-fallback span {
    font-size: clamp(0.72rem, 0.85vw, 1rem);
    font-weight: 800;
    letter-spacing: 0.09em;
}

.rich-text {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}

.rich-text > :first-child {
    margin-top: 0;
}

.rich-text > :last-child {
    margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
    .reveal-bottom-to-top {
        clip-path: inset(0) !important;
        animation: none !important;
    }

    mark {
        --mark-progress: 100%;
    }

    .mark__segment {
        --mark-segment-progress: 100%;
    }
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--control-height);
    border: 0;
    padding: 14px var(--button-padding);
    cursor: pointer;
    font-family: var(--ff-body);
    font-size: var(--fs-small);
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
    transition: transform 220ms ease, background-color 220ms ease;
}

.button:hover,
.button:focus-visible {
    transform: translateY(-2px);
}

.button--orange {
    background: var(--c-orange);
    color: var(--c-navy);
}

.button--orange:hover,
.button--orange:focus-visible {
    background: var(--c-navy);
    color: var(--c-white);
}

.button--dark {
    background: var(--c-dark);
    color: var(--c-white);
}

.form-control {
    min-width: 0;
    min-height: var(--control-height);
    border: 0;
    padding-inline: var(--space-md);
    color: var(--c-dark);
    font-size: clamp(0.875rem, 0.8vw, 0.9375rem);
}

.reveal-from-right {
    clip-path: inset(0 0 0 100%);
    will-change: clip-path;
}

.is-visible .reveal-from-right {
    animation: reveal-from-right 1s var(--ease-reveal) forwards;
}

.reveal-from-left {
    clip-path: inset(0 100% 0 0);
    will-change: clip-path;
}

.is-visible .reveal-from-left {
    animation: reveal-from-left 1s var(--ease-reveal) forwards;
}

.reveal-bottom-to-top {
    clip-path: inset(100% 0 0 0);
    will-change: clip-path;
}

.is-visible.reveal-bottom-to-top,
.is-visible .reveal-bottom-to-top {
    animation: reveal-bottom-to-top 1s var(--ease-reveal) forwards;
}

.icon-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
}

.icon-grid__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    text-align: center;
}

.icon-grid__item:nth-child(odd) {
    border-right: 1px solid var(--c-border);
}

.icon-grid__item:nth-child(-n + 2) {
    border-bottom: 1px solid var(--c-border);
}

.icon-grid__icon {
    display: grid;
    place-items: center;
    width: clamp(56px, 3.5vw, 68px);
    height: clamp(56px, 3.5vw, 68px);
}

.icon-grid__image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.icon-grid__icon svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    fill: none;
    stroke: var(--c-orange);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.icon-grid__placeholder {
    display: block;
    width: 42px;
    height: 42px;
    border: 2px solid var(--c-orange);
}

.icon-grid__label {
    color: var(--c-dark);
    font-size: var(--fs-small);
    font-weight: 700;
    line-height: 1.25;
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-lg);
}

.content-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--c-border);
    border-radius: 0;
    background: var(--c-white);
    box-shadow: var(--shadow);
    transition: transform 220ms ease, box-shadow 220ms ease;
}

.content-card:hover,
.content-card:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 16px 38px rgba(6, 11, 26, 0.13);
}

.content-card__media {
    aspect-ratio: 1.45 / 1;
    overflow: hidden;
    background: #edf0f5;
}

.content-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 350ms ease;
}

.content-card:hover .content-card__media img,
.content-card:focus-visible .content-card__media img {
    transform: scale(1.035);
}

.content-card__media--placeholder {
    background:
        linear-gradient(135deg, rgba(9, 19, 58, 0.08), rgba(237, 109, 41, 0.12)),
        #eef0f4;
}

.content-card__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: var(--space-md);
    min-height: clamp(112px, 7.5vw, 144px);
    padding: var(--space-lg);
}

.content-card__body h3 {
    max-width: 230px;
    font-family: var(--ff-body);
    font-weight: 700;
    line-height: 1.35;
}

.content-card__action {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.55rem;
}

.content-card__link-label {
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.035em;
    text-transform: uppercase;
}

.content-card__arrow {
    color: var(--c-orange);
    font-size: 1.5rem;
    line-height: 1;
}

.feature-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
}

.feature-list__item {
    display: grid;
    grid-template-columns: var(--icon-size) minmax(0, 1fr);
    align-items: center;
    gap: var(--space-md);
}

.feature-list__icon {
    display: grid;
    place-items: center;
    width: var(--icon-size);
    height: var(--icon-size);
}

.feature-list__icon img,
.feature-list__icon svg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.feature-list__icon svg {
    overflow: visible;
    fill: none;
    stroke: var(--c-orange);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.feature-list__placeholder {
    display: block;
    width: 70%;
    height: 70%;
    border: 2px solid var(--c-orange);
    border-radius: 0;
}

.feature-list__label {
    max-width: 210px;
    font-size: var(--fs-small);
    font-weight: 700;
    line-height: 1.35;
}

.display-heading {
    font-family: var(--ff-heading);
    font-size: var(--fs-h2);
    font-weight: 400;
    line-height: var(--lh-heading);
}

.section-tagline {
    margin: 0;
}

.accent-shape {
    background: var(--c-orange);
    clip-path: polygon(12% 0, 100% 0, 88% 100%, 0 100%);
}

.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* =========================================================
   4. HEADER
   ========================================================= */

.site-header {
    --header-logo-width: clamp(200px, 17vw, 320px);
    --header-logo-max-height: clamp(54px, 5vw, 88px);
}

.site-header--hero {
    position: absolute;
    z-index: 100;
    top: var(--frame);
    right: var(--frame);
    left: var(--frame);
    padding-top: var(--space-lg);
    color: var(--c-white);
    opacity: 0;
    transform: translateY(-8px);
}

.admin-bar .site-header--hero {
    top: calc(var(--frame) + 32px);
}

@media (max-width: 782px) {
    .admin-bar .site-header--hero {
        top: calc(var(--frame) + 46px);
    }
}

.site-header--light {
    --header-logo-width: clamp(240px, 17vw, 320px);
    --header-logo-max-height: clamp(52px, 4vw, 68px);
    position: relative;
    z-index: 50;
    padding-block: clamp(6px, 0.45vw, 9px);
    background: var(--c-white);
    color: var(--c-dark);
}

.site-header--light .site-branding__sub {
    color: var(--c-orange);
}

.site-header--light .menu-toggle {
    color: var(--c-dark);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2xl);
}

.site-branding {
    position: relative;
    z-index: 50;
    flex: 0 0 auto;
    max-width: calc(100% - 64px);
}

.site-branding .custom-logo-link,
.site-branding__text {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.site-branding .custom-logo-link {
    width: auto;
    max-width: 100%;
    height: auto;
    overflow: visible;
    line-height: 0;
}

.site-branding .site-header__menu-logo {
    display: none;
}

.site-branding .custom-logo-link > .custom-logo,
.site-branding .custom-logo-link > .site-header__logo-image {
    display: block;
    width: var(--header-logo-width) !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: var(--header-logo-max-height) !important;
    object-fit: contain;
    object-position: left center;
}

.site-branding .custom-logo-link > .site-header__logo-svg {
    flex: 0 0 auto;
    height: auto !important;
    max-height: none !important;
    overflow: visible;
}

.site-branding__main {
    font-size: clamp(1.75rem, 2vw, 2.35rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.06em;
}

.site-branding__sub {
    color: var(--c-orange);
    font-size: clamp(0.58rem, 0.65vw, 0.76rem);
    font-weight: 700;
    letter-spacing: 0.56em;
}

.site-nav .menu {
    display: flex;
    align-items: center;
    gap: clamp(18px, 2vw, 42px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-nav .menu > li > a {
    position: relative;
    display: block;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    white-space: nowrap;
}

.site-nav .menu > li > a::after {
    position: absolute;
    right: 0;
    bottom: -7px;
    left: 0;
    height: 2px;
    background: var(--c-orange);
    content: '';
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 280ms var(--ease-reveal);
}

.site-nav .menu > li > a:hover::after,
.site-nav .menu > li > a:focus-visible::after {
    transform: scaleX(1);
}

.menu-toggle {
    position: relative;
    z-index: 50;
    display: none;
    width: 48px;
    height: 48px;
    border: 0;
    padding: 10px;
    background: transparent;
    color: var(--c-white);
    cursor: pointer;
}

.menu-toggle__line {
    position: absolute;
    left: 10px;
    width: 28px;
    height: 2px;
    background: currentColor;
    transition: transform 250ms ease, opacity 200ms ease, top 250ms ease;
}

.menu-toggle__line:nth-of-type(2) { top: 15px; }
.menu-toggle__line:nth-of-type(3) { top: 23px; }
.menu-toggle__line:nth-of-type(4) { top: 31px; }

.menu-toggle.is-active .menu-toggle__line:nth-of-type(2) {
    top: 23px;
    transform: rotate(45deg);
}

.menu-toggle.is-active .menu-toggle__line:nth-of-type(3) {
    opacity: 0;
}

.menu-toggle.is-active .menu-toggle__line:nth-of-type(4) {
    top: 23px;
    transform: rotate(-45deg);
}

/* =========================================================
   5. HERO
   ========================================================= */

.hero {
    --panel-shape: polygon(14% 0, 100% 0, 100% 100%, 0 100%);
    position: relative;
    min-height: calc(100svh - (var(--frame) * 2));
    margin: var(--frame);
    background: var(--c-white);
    color: var(--c-white);
    overflow: visible;
    isolation: isolate;
}

.hero__media,
.hero__overlay {
    position: absolute;
    inset: 0;
    clip-path: inset(100% 0 0 0);
    will-change: clip-path;
}

.hero__media {
    z-index: -2;
    margin: 0;
    overflow: hidden;
}

.hero__picture,
.hero__media-image {
    display: block;
    width: 100%;
    height: 100%;
}

.hero__media-image {
    object-fit: cover;
    object-position: center;
}

.hero__overlay {
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(4, 9, 26, 0.68) 0%, rgba(5, 10, 26, 0.38) 48%, rgba(5, 10, 26, 0.18) 100%),
        linear-gradient(180deg, rgba(8, 16, 43, 0.12) 0%, rgba(8, 16, 43, 0.5) 100%);
}

.hero__inner {
    position: relative;
    z-index: 4;
    min-height: calc(100svh - clamp(120px, 9vw, 170px));
    padding-block: clamp(72px, 6vw, 118px) clamp(300px, 18vw, 360px);
}

.site-header--hero + .hero .hero__inner {
    padding-top: calc(clamp(72px, 6vw, 118px) + clamp(90px, 7vw, 130px));
}

.hero__content {
    width: 100%;
}

.hero__content h1 {
    max-width: 50%;
    opacity: 0;
    transform: translateY(16px);
    text-wrap: balance;
}

.hero__subtitle {
    max-width: 760px;
    margin-top: var(--space-lg);
    opacity: 0;
    transform: translateY(14px);
    text-wrap: balance;
}

.hero__panel-wrap {
    position: absolute;
    z-index: 6;
    right: calc(var(--frame) * -1);
    bottom: calc(var(--frame) * -1);
    width: clamp(700px, 49vw, 820px);
    min-height: clamp(250px, 15vw, 286px);
    overflow: hidden;
}

.hero__panel-white-shape,
.hero__panel-orange-mask,
.hero__panel-content {
    position: absolute;
    inset: 0;
}

.hero__panel-white-shape {
    z-index: 0;
    background: var(--c-white);
    clip-path: polygon(14% 0, 100% 0, 100% 100%, 14% 100%);
    transform: scaleX(0.13);
    transform-origin: right center;
    opacity: 0;
}

.hero__panel-orange-mask {
    z-index: 1;
    overflow: hidden;
    clip-path: var(--panel-shape);
    visibility: hidden;
}

.hero__panel-orange-wipe {
    position: absolute;
    inset: 0;
    background: var(--c-orange);
    transform: scaleX(0);
    transform-origin: left center;
}

.hero__panel-content {
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(20px, 1.4vw, 26px);
    padding: clamp(36px, 2.5vw, 48px) var(--space-2xl) clamp(30px, 2.1vw, 40px) clamp(118px, 9.1vw, 174px);
    color: var(--c-white);
    clip-path: inset(0 100% 0 0);
}

.hero__panel-text {
    max-width: 560px;
    font-size: 24px;
    line-height: 1.35;
}

.hero__panel-form {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(132px, 0.52fr) clamp(170px, 10vw, 190px);
    gap: 8px;
    width: 100%;
    max-width: 600px;
}

.hero__panel-form .button,
.hero__panel-form .form-control {
    min-height: clamp(46px, 2.6vw, 50px);
}

.hero__panel-form .form-control {
    padding-inline: 16px;
    font-size: clamp(0.78rem, 0.72vw, 0.875rem);
}

.hero__panel-form .button {
    padding-inline: clamp(18px, 1.5vw, 28px);
    font-size: 16px;
    font-weight: 500;
    text-transform: none;
}

/* =========================================================
   6. SECTION PROTECTION
   ========================================================= */

.home-protection,
.home-services {
    --rail-width: clamp(120px, 15vw, 290px);
}

.home-protection {
    min-height: clamp(720px, 43vw, 830px);
    margin-top: clamp(48px, 4.2vw, 80px);
    overflow: hidden;
    background: var(--c-navy-soft);
}

.home-protection__card {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(330px, 0.8fr);
    align-items: center;
    gap: clamp(28px, 3vw, 56px);
    width: calc(100% - var(--rail-width));
    min-height: clamp(560px, 33vw, 640px);
    margin-top: clamp(96px, 8.5vw, 165px);
    padding: var(--space-3xl) clamp(44px, 5.5vw, 105px) clamp(64px, 4.7vw, 90px);
    background: var(--c-white);
    color: var(--c-dark);
}

.home-protection__content {
    max-width: 660px;
}

.home-protection__title {
    max-width: 720px;
    color: var(--c-dark);
    text-wrap: balance;
}

.home-protection__text {
    max-width: 610px;
    margin-top: clamp(40px, 4.6vw, 88px);
}

.home-protection__button {
    margin-top: clamp(42px, 4vw, 76px);
}

.home-protection__grid {
    max-width: 460px;
    justify-self: center;
}

.home-protection__item {
    min-height: clamp(145px, 9vw, 178px);
}

.home-protection__accent {
    position: absolute;
    z-index: 3;
    right: clamp(28px, 4vw, 76px);
    bottom: 0;
    width: clamp(290px, 23vw, 445px);
    height: clamp(92px, 7.4vw, 142px);
}

/* =========================================================
   7. CHIFFRES CLÉS
   Composants généraux réutilisables : .stats-grid et .stat
   ========================================================= */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: clamp(36px, 5vw, 96px);
}

.stat {
    min-width: 0;
    text-align: center;
}

.stat__value {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: clamp(8px, 0.8vw, 16px);
    font-family: var(--ff-heading);
    font-size: var(--fs-stat);
    font-weight: 400;
    line-height: 0.95;
    white-space: nowrap;
}

.stat__number {
    color: var(--c-orange);
    font-variant-numeric: tabular-nums;
}

.stat__suffix {
    color: var(--c-white);
    font-size: 0.7em;
}

.stat__label {
    margin-top: var(--space-md);
    color: var(--c-white);
    font-size: var(--fs-lead);
    line-height: 1.4;
}

.stats-section {
    --counter-duration: 1.8s;
    overflow: hidden;
}

/* =========================================================
   8. NOS SERVICES
   ========================================================= */

.home-services {
    --panel-offset: clamp(300px, 27vw, 520px);
    --panel-top-space: clamp(88px, 6vw, 122px);
    --bottom-band: clamp(180px, 14vw, 280px);
    --accent-height: clamp(78px, 6vw, 116px);
    overflow: hidden;
    padding-top: var(--panel-top-space);
}

/*
 * L'image reste décorative dans la composition, mais la hauteur globale de
 * la section est désormais déterminée uniquement par le contenu du panneau.
 * Le bandeau bleu inférieur conserve une profondeur constante grâce à une
 * variable globale plutôt qu'à une hauteur imposée sur la section.
 */
.home-services__media {
    position: absolute;
    z-index: 0;
    inset:
        0
        var(--rail-width)
        var(--bottom-band)
        0;
    margin: 0;
    overflow: hidden;
}

.home-services__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.home-services__picture {
    display: block;
    width: 100%;
    height: 100%;
}

.home-services__panel {
    position: relative;
    z-index: 2;
    width: calc(100% - var(--panel-offset));
    margin-left: var(--panel-offset);
    display: flex;
    flex-direction: column;
    padding:
        clamp(56px, 4vw, 78px)
        clamp(54px, 5vw, 96px)
        clamp(48px, 4vw, 78px)
        clamp(72px, 7vw, 136px);
    background: var(--c-white);
    color: var(--c-text);
}

.home-services__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.72fr);
    align-items: start;
    gap: clamp(42px, 4.5vw, 82px);
}

.home-services__main {
    max-width: 720px;
}

.home-services__text {
    max-width: 650px;
    margin-top: var(--space-lg);
}

.home-services__cards {
    max-width: 640px;
    margin-top: var(--space-2xl);
}

.home-services__features {
    --icon-size: clamp(64px, 4.2vw, 78px);
    gap: var(--space-xl);
    padding-top: clamp(84px, 6vw, 116px);
}

.home-services__features .feature-list__icon {
    width: var(--icon-size);
    height: var(--icon-size);
    color: var(--c-orange);
}

.home-services__features .feature-list__item {
    grid-template-columns: var(--icon-size) minmax(0, 1fr);
    gap: var(--space-md);
}

.home-services__features .feature-list__label {
    font-size: var(--fs-small);
    line-height: 1.35;
}

.home-services__tagline {
    align-self: flex-end;
    max-width: 650px;
    margin-top: clamp(96px, 8.5vw, 165px);
    color: var(--c-dark);
    text-align: right;
    text-wrap: balance;
}

.home-services__accent {
    position: absolute;
    z-index: 1;
    bottom: calc(var(--bottom-band) - var(--accent-height));
    left: clamp(72px, 8vw, 155px);
    width: clamp(270px, 22vw, 425px);
    height: var(--accent-height);
}

/* =========================================================
   9. ANIMATIONS
   ========================================================= */

.hero.is-ready .hero__media,
.hero.is-ready .hero__overlay {
    animation: reveal-bottom-to-top 1s var(--ease-reveal) forwards 0.1s;
}

.site-header--hero.is-ready {
    animation: fade-down 0.55s ease forwards 0.35s;
}

.hero.is-ready .hero__content h1 {
    animation: fade-up 0.65s ease forwards 0.5s;
}

.hero.is-ready .hero__subtitle {
    animation: fade-up 0.65s ease forwards 0.68s;
}

.hero.is-ready .hero__panel-white-shape {
    animation: rectangle-to-shape var(--duration-reveal) var(--ease-reveal) forwards 1.1s;
}

.hero.is-ready .hero__panel-orange-mask {
    visibility: visible;
    animation: show-mask 0s linear forwards 1.95s;
}

.hero.is-ready .hero__panel-orange-wipe {
    animation: wipe-left-to-right var(--duration-wipe) var(--ease-wipe) forwards 1.95s;
}

.hero.is-ready .hero__panel-content {
    animation: reveal-content-left-to-right var(--duration-wipe) var(--ease-wipe) forwards 1.95s;
}

@keyframes reveal-bottom-to-top {
    from { clip-path: inset(100% 0 0 0); }
    to { clip-path: inset(0); }
}

@keyframes reveal-from-right {
    from { clip-path: inset(0 0 0 100%); }
    to { clip-path: inset(0); }
}

@keyframes reveal-from-left {
    from { clip-path: inset(0 100% 0 0); }
    to { clip-path: inset(0); }
}

@keyframes fade-up {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fade-down {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes rectangle-to-shape {
    from {
        opacity: 1;
        transform: scaleX(0.13);
        clip-path: polygon(14% 0, 100% 0, 100% 100%, 14% 100%);
    }
    to {
        opacity: 1;
        transform: scaleX(1);
        clip-path: var(--panel-shape);
    }
}

@keyframes show-mask {
    to { visibility: visible; }
}

@keyframes wipe-left-to-right {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

@keyframes reveal-content-left-to-right {
    from { clip-path: inset(0 100% 0 0); }
    to { clip-path: inset(0); }
}

/* =========================================================
   10. RESPONSIVE
   Les tailles typographiques globales se modifient dans :root.
   ========================================================= */

@media (max-width: 1380px) {
    .hero__content {
        width: 100%;
    }

    .hero__panel-wrap {
        width: clamp(700px, 49vw, 820px);
    }
}

@media (max-width: 1180px) {
    .home-protection {
        min-height: auto;
        padding-bottom: 80px;
    }

    .home-protection__card {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
        width: calc(100% - clamp(44px, 7vw, 84px));
        min-height: 0;
        padding: var(--space-3xl) clamp(42px, 7vw, 84px) clamp(100px, 12vw, 140px);
    }

    .home-protection__content {
        max-width: 760px;
    }

    .home-protection__text,
    .home-protection__button {
        margin-top: var(--space-xl);
    }

    .home-protection__grid {
        max-width: 620px;
        justify-self: start;
    }
}

@media (max-width: 1280px) {
    .home-services__panel {
        width: calc(100% - clamp(250px, 24vw, 390px));
        margin-left: clamp(250px, 24vw, 390px);
        padding-left: clamp(54px, 5vw, 90px);
    }

    .home-services__layout {
        gap: var(--space-3xl);
    }
}

@media (max-width: 980px) {
    .home-services {
        padding-top: 0;
        padding-bottom: 0;
    }

    .home-services__media {
        position: relative;
        width: calc(100% - clamp(28px, 7vw, 70px));
        height: clamp(390px, 62vw, 610px);
    }

    .home-services__panel {
        position: relative;
        width: calc(100% - clamp(20px, 5vw, 54px));
        margin-top: clamp(-82px, -7vw, -56px);
        margin-left: auto;
        padding: var(--space-3xl) clamp(28px, 6vw, 64px) clamp(72px, 6vw, 118px);
    }

    .home-services__layout {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }

    .home-services__main {
        max-width: 760px;
    }

    .home-services__features {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-lg);
        padding-top: 0;
    }

    .feature-list__item {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    .home-services__features .feature-list__item {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    .feature-list__label {
        max-width: 190px;
    }

    .home-services__tagline {
        margin-top: var(--space-3xl);
    }

    .home-services__accent {
        top: clamp(330px, 56vw, 550px);
        bottom: auto;
        left: clamp(34px, 8vw, 82px);
    }
}

@media (min-width: 1101px) and (max-width: 1280px) {
    .site-header,
    .site-header--light {
        --header-logo-width: clamp(150px, 14vw, 180px);
        --header-logo-max-height: 58px;
    }

    .site-header__inner {
        gap: clamp(14px, 2vw, 24px);
    }

    .site-nav .menu {
        gap: clamp(10px, 1.25vw, 16px);
    }

    .site-nav .menu > li > a {
        font-size: 11px;
        letter-spacing: 0;
    }
}

@media (max-width: 1100px) {
    :root {
        --gutter: clamp(20px, 4vw, 44px);
        --fs-h1: clamp(3.15rem, 7vw, 4.5rem);
    }

    .menu-toggle {
        display: block;
    }

    .site-nav {
        position: fixed;
        z-index: 9998;
        inset: 0;
        display: grid;
        place-items: center;
        padding: clamp(96px, 18vh, 150px) var(--gutter) 50px;
        background: rgba(11, 13, 22, 0.98);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-16px);
        transition: opacity 250ms ease, visibility 250ms ease, transform 250ms ease;
    }

    .site-nav.is-open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .site-nav .menu {
        flex-direction: column;
        align-items: flex-start;
        gap: clamp(22px, 4vh, 38px);
        width: min(100%, 650px);
    }

    .site-nav .menu > li > a {
        font-size: clamp(1.1rem, 2.4vw, 1.5rem);
        white-space: normal;
    }

    body.menu-open .site-header {
        z-index: 10000;
        color: var(--c-white);
    }

    body.menu-open .site-header--hero {
        opacity: 1;
        transform: none;
        animation: none !important;
    }

    body.menu-open .site-header--light {
        background: transparent;
    }

    body.menu-open .site-branding,
    body.menu-open .menu-toggle {
        z-index: 9999;
    }

    body.menu-open .site-header__primary-logo {
        display: none;
    }

    body.menu-open .site-branding .site-header__menu-logo {
        display: inline-flex;
    }

    body.menu-open .menu-toggle {
        color: var(--c-white);
    }

    .site-header--light .site-nav {
        color: var(--c-white);
    }

    .hero__media-image {
        object-position: 58% center;
    }

    .hero__inner {
        min-height: max(760px, calc(100svh - 100px));
        padding-block: clamp(58px, 8vw, 90px) clamp(300px, 34vw, 360px);
    }

    .site-header--hero + .hero .hero__inner {
        padding-top: calc(clamp(58px, 8vw, 90px) + clamp(84px, 10vw, 118px));
    }

    .hero__content {
        width: min(70vw, 650px);
        padding-top: clamp(50px, 10vw, 100px);
    }

    .hero__content h1 {
        max-width: 650px;
    }

    .hero__panel-wrap {
        width: min(76vw, 700px);
    }
}

@media (min-width: 761px) and (max-width: 900px) {
    .hero__panel-wrap {
        min-height: 306px;
    }

    .hero__panel-content {
        padding-left: clamp(104px, 14vw, 126px);
    }

    .hero__panel-form {
        grid-template-columns: minmax(0, 1fr) minmax(132px, 0.52fr);
    }

    .hero__panel-form .button {
        width: 100%;
        grid-column: 1 / -1;
    }
}

@media (max-width: 680px) {
    .site-header--light {
        padding-block: 9px;
    }
}

@media (max-width: 760px) {
    :root {
        --fs-h1: clamp(2.8rem, 11vw, 4.25rem);
        --fs-h2: clamp(2.35rem, 10vw, 3.2rem);
        --fs-h3: clamp(0.95rem, 3.6vw, 1.15rem);
        --fs-body: clamp(0.98rem, 4vw, 1.08rem);
        --fs-lead: clamp(1rem, 4.2vw, 1.35rem);
    }

    .hero {
        --panel-shape: inset(0);
        min-height: 0;
    }

    .hero__media-image {
        object-position: 62% center;
    }

    .site-header {
        --header-logo-width: clamp(165px, 44vw, 220px);
        --header-logo-max-height: clamp(44px, 11vw, 60px);
    }

    .site-header--light {
        --header-logo-width: clamp(150px, 42vw, 205px);
        --header-logo-max-height: clamp(36px, 9vw, 46px);
    }

    .hero__inner {
        min-height: 0;
        padding-top: clamp(34px, 7vw, 54px);
        padding-bottom: clamp(54px, 12vw, 76px);
    }

    .site-header--hero + .hero .hero__inner {
        padding-top: calc(clamp(34px, 7vw, 54px) + clamp(88px, 19vw, 118px));
    }

    .hero__content {
        width: 100%;
        padding-top: clamp(24px, 6vw, 42px);
    }

    .hero__content h1 {
        max-width: 580px;
        line-height: 1.2;
        text-wrap: initial;
    }

    .hero__subtitle {
        max-width: 560px;
    }

    .hero__panel-wrap {
        position: relative;
        right: auto;
        bottom: auto;
        width: 100%;
        min-height: 0;
        overflow: hidden;
        background: var(--c-orange);
    }

    .hero__panel-white-shape {
        display: none;
    }

    .hero__panel-orange-mask {
        clip-path: none;
        visibility: visible;
    }

    .hero__panel-orange-wipe {
        transform: none;
    }

    .hero__panel-content {
        position: relative;
        inset: auto;
        gap: 18px;
        padding: clamp(28px, 7vw, 40px) clamp(20px, 5.5vw, 30px);
        clip-path: none;
    }

    .hero.is-ready .hero__panel-orange-mask,
    .hero.is-ready .hero__panel-orange-wipe,
    .hero.is-ready .hero__panel-content {
        animation: none;
    }

    .hero__panel-text {
        max-width: none;
    }

    .hero__panel-form {
        grid-template-columns: 1fr;
        gap: 10px;
        max-width: none;
    }

    .hero__panel-form .button,
    .hero__panel-form .form-control {
        width: 100%;
        min-height: 50px;
    }

    .home-protection {
        padding-bottom: 62px;
        margin-top: 36px;
    }

    .home-protection__card {
        width: calc(100% - 20px);
        margin-top: clamp(78px, 20vw, 105px);
        padding: 42px 24px 110px;
    }

    .home-protection__title {
        line-height: 1.14;
        text-wrap: initial;
    }

    .home-protection__text {
        margin-top: 30px;
    }

    .home-protection__button {
        margin-top: 34px;
    }

    .home-protection__item {
        min-height: 130px;
        padding: 16px 10px;
    }

    .home-protection__accent {
        right: 14px;
        width: min(72vw, 360px);
        height: 94px;
    }
}

@media (max-width: 680px) {
    .home-services__media {
        width: calc(100% - 20px);
        height: clamp(320px, 76vw, 470px);
    }

    .home-services__panel {
        width: calc(100% - 12px);
        margin-top: -42px;
        padding: 42px 22px 64px;
    }

    .home-services__cards,
    .card-grid {
        grid-template-columns: 1fr;
    }

    .home-services__features {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .feature-list__item {
        grid-template-columns: var(--icon-size) minmax(0, 1fr);
        justify-items: initial;
        text-align: left;
    }

    .home-services__features .feature-list__item {
        grid-template-columns: var(--icon-size) minmax(0, 1fr);
        gap: var(--space-lg);
    }

    .feature-list__label {
        max-width: none;
    }

    .home-services__tagline {
        max-width: 100%;
        text-align: left;
    }

    .home-services__accent {
        top: clamp(280px, 69vw, 430px);
        left: 28px;
        width: min(62vw, 290px);
        height: 72px;
    }
}

@media (max-width: 480px) {
    :root {
        --frame: 12px;
        --gutter: 18px;
        --fs-h1: clamp(2.45rem, 12vw, 3.3rem);
        --fs-h3: clamp(0.9rem, 4vw, 1rem);
        --fs-lead: clamp(0.96rem, 4.5vw, 1.12rem);
        --fs-small: 0.84rem;
    }

    .hero {
        --panel-shape: inset(0);
        min-height: 0;
    }

    .hero__media {
        background-position: 66% center;
    }

    .hero__inner {
        min-height: 0;
        padding-top: 28px;
        padding-bottom: 48px;
    }

    .site-header--hero + .hero .hero__inner {
        padding-top: 116px;
    }

    .hero__content {
        padding-top: 20px;
    }

    .hero__subtitle {
        margin-top: var(--space-md);
    }

    .hero__panel-wrap {
        min-height: 0;
    }

    .hero__panel-content {
        padding: 26px 18px 22px;
    }

    .hero__panel-text {
        line-height: 1.38;
    }

    .site-nav .menu > li > a {
        font-size: clamp(1.05rem, 5vw, 1.35rem);
    }

    .home-protection__card {
        padding-inline: 20px;
    }

    .home-protection__button {
        width: 100%;
    }

    .home-protection__accent {
        width: min(78vw, 320px);
        height: 78px;
    }
}

@media (max-width: 760px) {
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .stat {
        padding-block: var(--space-xl);
    }

    .stat:first-child {
        padding-top: 0;
    }

    .stat:last-child {
        padding-bottom: 0;
    }

    .stat + .stat {
        border-top: 1px solid rgba(255, 255, 255, 0.14);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
    }

    .hero__media,
    .hero__overlay,
    .hero__panel-content,
    .reveal-from-right,
    .reveal-from-left {
        clip-path: inset(0) !important;
        animation: none !important;
    }

    .hero__header,
    .hero__content h1,
    .hero__subtitle {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }

    .hero__panel-white-shape {
        opacity: 1 !important;
        transform: scaleX(1) !important;
        clip-path: var(--panel-shape) !important;
        animation: none !important;
    }

    .hero__panel-orange-mask {
        visibility: visible !important;
        animation: none !important;
    }

    .hero__panel-orange-wipe {
        transform: scaleX(1) !important;
        animation: none !important;
    }

    u,
    .scroll-underline,
    .rich-text span[style*="text-decoration: underline"],
    .rich-text span[style*="text-decoration-line: underline"] {
        --underline-progress: 1 !important;
    }
}


/* =========================================================
   SECTION — PRÉSENTATION ARMADAM
   ========================================================= */

.home-about {
    --about-content-width: min(76vw, 1120px);
    background: var(--c-navy-soft);
}

.home-about__container {
    width: min(calc(100% - (var(--gutter) * 2)), 1320px);
}

.home-about__title {
    max-width: 1160px;
    margin-inline: auto;
    color: var(--c-white);
    text-align: center;
    text-wrap: balance;
}

.home-about__copy {
    width: var(--about-content-width);
    margin: clamp(72px, 6vw, 118px) auto 0;
    color: var(--c-white);
}

.home-about__media {
    width: var(--about-content-width);
    aspect-ratio: 3 / 1;
    margin: var(--space-3xl) auto 0;
}

.home-about__partner {
    width: min(68vw, 820px);
    margin: var(--space-xl) auto 0;
    color: var(--c-white);
}

.home-about__partner .rich-text {
    font-size: var(--fs-small);
}


@media (max-width: 900px) {
    .home-about {
        --about-content-width: 100%;
    }

    .home-about__copy {
        gap: var(--space-xl);
    }

    .home-about__partner {
        width: min(100%, 760px);
    }
}

@media (max-width: 680px) {
    .two-column-copy,
    .home-about__copy {
        grid-template-columns: 1fr;
    }

    .home-about__title {
        text-align: left;
        text-wrap: initial;
    }

    .home-about__copy {
        margin-top: var(--space-2xl);
    }

    .home-about__media {
        aspect-ratio: 4 / 3;
        margin-top: var(--space-2xl);
    }

    .partner-lockup,
    .home-about__partner {
        grid-template-columns: 1fr;
        justify-items: start;
    }

    .partner-lockup__logo-image {
        width: min(220px, 62vw);
    }
}

/* =========================================================
   SECTION — PROJETS / GALERIE SLIDER
   ========================================================= */

.home-projects {
    --slider-gap: clamp(16px, 1.25vw, 24px);
    --slider-button-size: clamp(42px, 3vw, 54px);
    --slider-arrow-size: clamp(20px, 1.45vw, 26px);
    --project-card-cut: clamp(34px, 3.2vw, 58px);
    --project-card-ratio: 0.8;
    --project-title-accent-width: clamp(132px, 12vw, 190px);
    --project-title-accent-height: clamp(100px, 10vw, 150px);
}

.section-intro-title {
    margin: 0;
    font-family: var(--ff-heading);
    font-size: clamp(1.7rem, 2vw, 2.5rem);
    font-weight: 400;
    line-height: 1.12;
}

.heading-accent {
    position: relative;
    z-index: 0;
    display: inline-block;
    text-transform: uppercase;
}

.heading-accent::before {
    position: absolute;
    z-index: -1;
    top: 50%;
    right: -0.15em;
    width: var(--project-title-accent-width);
    height: var(--project-title-accent-height);
    background: var(--c-orange);
    content: '';
    transform: translateY(-50%) skewX(-26deg);
}

.slider {
    --slides-per-view: 3;
    position: relative;
    min-width: 0;
}

.slider__viewport {
    overflow: hidden;
    outline: none;
}

.slider__viewport:focus-visible {
    outline: 2px solid var(--c-orange);
    outline-offset: 5px;
}

.slider__track {
    display: flex;
    gap: var(--slider-gap);
    transform: translate3d(0, 0, 0);
    transition: transform 520ms var(--ease-reveal);
    will-change: transform;
}

.slider__slide {
    flex: 0 0 calc(
        (100% - ((var(--slides-per-view) - 1) * var(--slider-gap))) /
        var(--slides-per-view)
    );
    min-width: 0;
}

.slider__button {
    position: absolute;
    z-index: 4;
    top: 50%;
    display: grid;
    place-items: center;
    width: var(--slider-button-size);
    height: var(--slider-button-size);
    border: 1px solid var(--c-border);
    border-radius: 50% !important;
    padding: 0;
    background: var(--c-white);
    color: var(--c-text);
    cursor: pointer;
    transform: translateY(-50%);
    transition: background-color 220ms ease, color 220ms ease, opacity 220ms ease;
}

.slider__button:hover,
.slider__button:focus-visible {
    background: var(--c-orange);
    color: var(--c-white);
}

.slider__button:disabled {
    opacity: 0.35;
    cursor: default;
}

.slider__button svg {
    width: var(--slider-arrow-size);
    height: var(--slider-arrow-size);
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.5;
}

.slider__button--prev {
    left: calc(var(--slider-button-size) * -0.5);
}

.slider__button--next {
    right: calc(var(--slider-button-size) * -0.5);
}

.home-projects {
    overflow: hidden;
    background: var(--c-white);
}

.home-projects__container {
    display: grid;
    grid-template-columns: minmax(300px, 0.34fr) minmax(0, 1fr);
    grid-template-areas:
        "intro-title project-title"
        "intro-body gallery";
    align-items: start;
    column-gap: clamp(72px, 6vw, 118px);
    row-gap: clamp(40px, 4.2vw, 74px);
}

.home-projects__intro-title {
    grid-area: intro-title;
    align-self: center;
}

.home-projects__intro {
    grid-area: intro-body;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xl);
    align-self: center;
    margin-bottom: 0;
    padding-bottom: 0;
}

.home-projects__text {
    max-width: 320px;
}

.home-projects__gallery {
    grid-area: gallery;
    min-width: 0;
}

.home-projects__title {
    grid-area: project-title;
    align-self: center;
    justify-self: end;
    display: block;
    width: max-content;
    margin: 0;
    font-size: clamp(4.25rem, 6.4vw, 7.5rem);
    text-align: right;
}

.project-slide {
    position: relative;
    aspect-ratio: var(--project-card-ratio);
    margin: 0;
    overflow: hidden;
    background: #edf0f4;
    clip-path: polygon(
        0 0,
        100% 0,
        100% calc(100% - var(--project-card-cut)),
        calc(100% - var(--project-card-cut)) 100%,
        0 100%
    );
}

.project-slide__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 450ms ease;
}

.project-slide__picture {
    display: block;
    width: 100%;
    height: 100%;
}

.project-slide:hover .project-slide__image {
    transform: scale(1.035);
}

.project-slide--placeholder {
    display: grid;
    place-items: center;
    background:
        linear-gradient(135deg, rgba(9, 19, 58, 0.08), rgba(237, 109, 41, 0.14)),
        #eef0f4;
    color: var(--c-navy);
    font-family: var(--ff-heading);
    font-size: clamp(1.4rem, 2vw, 2.2rem);
}

@media (max-width: 1100px) {
    .slider {
        --slides-per-view: 2;
    }

    .home-projects__container {
        grid-template-columns: minmax(220px, 0.42fr) minmax(0, 1fr);
        gap: var(--space-2xl);
    }

    .home-projects__title {
        font-size: clamp(3.75rem, 7.5vw, 5.5rem);
    }
}

@media (max-width: 760px) {
    .home-projects__container {
        grid-template-columns: 1fr;
        grid-template-areas:
            "project-title"
            "intro-title"
            "intro-body"
            "gallery";
        align-items: start;
        gap: var(--space-xl);
    }

    .home-projects__intro {
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .home-projects__text {
        max-width: 580px;
    }

    .home-projects__title {
        justify-self: start;
        margin-left: 0;
        text-align: left;
    }

    .slider__button--prev {
        left: 8px;
    }

    .slider__button--next {
        right: 8px;
    }
}

@media (max-width: 560px) {
    .slider {
        --slides-per-view: 1;
    }

    .project-slide {
        aspect-ratio: 0.82;
    }
}

@media (prefers-reduced-motion: reduce) {
    .slider__track,
    .project-slide__image {
        transition: none !important;
    }
}

/* =========================================================
   SECTION — INSTALLATION RAPIDE
   ========================================================= */

.home-installation {
    --section-media-overlay: rgba(5, 14, 38, 0.84);
    --feature-column-gap: clamp(28px, 4.2vw, 82px);
    --feature-column-icon-size: clamp(78px, 4.7vw, 86px);
    --feature-column-divider-height: clamp(190px, 12vw, 230px);
    --feature-column-divider-color: rgba(255, 255, 255, 0.76);
}

.section--media {
    overflow: hidden;
    background: var(--c-navy);
}

.section-media__layer {
    position: absolute;
    z-index: 0;
    inset: 0;
    margin: 0;
    overflow: hidden;
}

.section-media__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.section-media__picture {
    display: block;
    width: 100%;
    height: 100%;
}

.section-media__overlay {
    position: absolute;
    inset: 0;
    background: var(--section-media-overlay);
}

.section-eyebrow {
    margin: 0;
    font-size: var(--fs-small);
    line-height: 1.3;
}

.feature-columns {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--feature-column-gap);
}

.feature-columns__item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
    text-align: center;
}

.feature-columns__item + .feature-columns__item::before {
    position: absolute;
    top: 50%;
    left: calc(var(--feature-column-gap) / -2);
    width: 2px;
    height: var(--feature-column-divider-height);
    background: var(--feature-column-divider-color);
    content: '';
    transform: translate(-50%, -50%);
}

.feature-columns__icon {
    display: grid;
    width: var(--feature-column-icon-size);
    height: var(--feature-column-icon-size);
    place-items: center;
    margin-bottom: var(--space-md);
    color: var(--c-orange);
}

.feature-columns__icon svg,
.feature-columns__icon-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.feature-columns__icon svg {
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.feature-columns__text {
    max-width: 430px;
    margin-top: var(--space-xs);
}

.home-installation {
    color: var(--c-white);
}

.home-installation__background-image {
    object-position: center 48%;
}

.home-installation__overlay {
    z-index: 1;
    background: rgba(4, 13, 36, 0.08);
}

.home-installation__container {
    position: relative;
    z-index: 2;
    padding-block: clamp(54px, 4.6vw, 88px) clamp(72px, 6.2vw, 120px);
    text-align: center;
}

.home-installation__eyebrow {
    color: var(--c-white);
}

.home-installation__title {
    max-width: 780px;
    margin: var(--space-md) auto 0;
    color: var(--c-white);
    text-wrap: balance;
}

.home-installation__features {
    margin-top: clamp(58px, 5.8vw, 112px);
}

.home-installation__feature h3 {
    color: var(--c-white);
}

.home-installation__feature .rich-text {
    color: var(--c-white);
}

@media (max-width: 900px) {
    .home-installation {
        --feature-column-gap: clamp(22px, 4vw, 42px);
        --feature-column-divider-height: clamp(140px, 18vw, 190px);
    }

    .home-installation__title {
        max-width: 680px;
    }
}

@media (max-width: 700px) {
    .feature-columns {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .feature-columns__item {
        padding-block: var(--space-xl);
    }

    .feature-columns__item:first-child {
        padding-top: 0;
    }

    .feature-columns__item + .feature-columns__item::before {
        top: 0;
        left: 50%;
        width: min(72%, 360px);
        height: 1px;
        transform: translateX(-50%);
    }

    .home-installation__features {
        margin-top: var(--space-2xl);
    }

    .home-installation__background-image {
        object-position: 62% center;
    }
}

/* =========================================================
   PIED DE PAGE
   ========================================================= */

.site-footer {
    --footer-background: #0b0d16;
    --footer-border-color: rgba(255, 255, 255, 0.12);
    --footer-top-padding: clamp(54px, 4.8vw, 92px);
    --footer-bottom-padding: clamp(32px, 3vw, 54px);
    --footer-column-gap: clamp(42px, 6vw, 116px);
    --footer-logo-width: clamp(260px, 31vw, 500px);
    --footer-heading-size: clamp(1.08rem, 1.25vw, 1.5rem);
    --footer-copy-size: clamp(0.88rem, 0.88vw, 1rem);
}

.site-footer {
    background: var(--footer-background);
    color: var(--c-white);
}

.site-footer__top {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    padding-block: var(--footer-top-padding) clamp(42px, 4vw, 76px);
}

.site-footer__top::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: var(--footer-border-color);
    content: '';
    transform: translateX(-0.5px);
}

.site-footer__cta {
    grid-column: 1 / 3;
    padding-right: clamp(28px, 5vw, 96px);
}

.site-footer__cta-title {
    max-width: 660px;
    font-size: clamp(1.25rem, 1.3vw, 1.5625rem);
    line-height: 1.4;
    color: var(--c-white);
    text-wrap: balance;
}

.site-footer a.button.site-footer__cta-button {
    /*
     * Règle volontairement autonome et plus spécifique que
     * `.woocommerce a.button`. WooCommerce ne peut donc plus remplacer le CTA
     * du pied de page par son bouton gris sur les fiches produits.
     */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: clamp(46px, 2.6vw, 52px);
    margin-top: clamp(28px, 1.9vw, 36px);
    border: 0;
    border-radius: 0;
    padding: 12px clamp(22px, 1.7vw, 32px);
    background: var(--c-orange);
    color: var(--c-navy);
    cursor: pointer;
    font-family: var(--ff-body);
    font-size: clamp(0.75rem, 0.74vw, 0.875rem);
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    transition: transform 220ms ease, background-color 220ms ease;
}

.site-footer a.button.site-footer__cta-button:hover,
.site-footer a.button.site-footer__cta-button:focus-visible {
    background: var(--c-navy-soft);
    color: var(--c-white);
    transform: translateY(-2px);
}

.site-footer__nav:first-of-type {
    grid-column: 3;
    padding-left: clamp(34px, 4.7vw, 90px);
}

.site-footer__nav:last-child {
    grid-column: 4;
    padding-left: clamp(24px, 3vw, 58px);
}

.site-footer__heading {
    margin-bottom: var(--space-md);
    color: var(--c-white);
    font-size: var(--footer-heading-size);
}

.footer-menu {
    display: grid;
    gap: var(--space-sm);
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-menu a {
    color: var(--c-white);
    font-size: var(--footer-copy-size);
    line-height: 1.45;
    transition: color 180ms ease;
}

.footer-menu a:hover,
.footer-menu a:focus-visible {
    color: var(--c-orange);
}

.site-footer__divider {
    width: min(calc(100% - (var(--gutter) * 2)), var(--container));
    height: 1px;
    margin-inline: auto;
    background: var(--footer-border-color);
}

.site-footer__bottom {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(520px, 1.1fr);
    grid-template-areas:
        'brand contact'
        'legal legal';
    gap: clamp(20px, 2vw, 32px) var(--footer-column-gap);
    align-items: center;
    padding-block: var(--footer-bottom-padding) clamp(18px, 1.5vw, 28px);
}

.site-footer__brand {
    grid-area: brand;
    align-self: center;
}

.site-footer__logo-link {
    display: inline-block;
    max-width: 100%;
}

.site-footer__logo-link:focus-visible {
    outline: 2px solid var(--c-orange);
    outline-offset: 8px;
}

.site-footer__logo-image {
    display: block;
    width: var(--footer-logo-width);
    max-width: 100%;
    height: auto;
    max-height: clamp(105px, 9vw, 155px);
    object-fit: contain;
    object-position: left center;
}

.site-footer__logo-link > svg.site-footer__logo-image {
    overflow: visible;
}

.site-footer__logo-fallback {
    display: inline-flex;
    flex-direction: column;
    color: var(--c-white);
}

.site-footer__logo-fallback strong {
    font-size: clamp(3rem, 6vw, 7rem);
    font-weight: 800;
    line-height: 0.9;
    letter-spacing: 0.05em;
}

.site-footer__logo-fallback span {
    margin-top: var(--space-sm);
    color: var(--c-orange);
    font-size: clamp(0.8rem, 1.2vw, 1.35rem);
    font-weight: 700;
    letter-spacing: 0.62em;
}

.site-footer__contact {
    grid-area: contact;
    align-self: start;
    margin: 0;
    color: var(--c-white);
    font-style: normal;
    text-align: right;
}

.site-footer__contact p {
    margin: 0;
    font-size: var(--footer-copy-size);
    line-height: 1.55;
}

.site-footer__address {
    margin-bottom: var(--space-sm) !important;
    font-weight: 700;
    white-space: nowrap;
}

.site-footer__contact strong {
    margin-right: 0.3em;
}

.site-footer__contact a {
    color: inherit;
}

.site-footer__contact a:hover,
.site-footer__contact a:focus-visible {
    color: var(--c-orange);
}

.site-footer__person + .site-footer__person {
    margin-top: clamp(14px, 1.4vw, 22px);
    padding-top: clamp(14px, 1.4vw, 22px);
    border-top: 1px solid var(--footer-border-color);
}

.site-footer__contact .site-footer__person-role {
    margin-bottom: 3px;
    color: var(--c-orange);
    font-size: clamp(0.68rem, 0.62vw, 0.78rem);
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.site-footer__contact .site-footer__person-name {
    margin-bottom: 5px;
    font-weight: 700;
}

.site-footer__person-detail strong {
    color: var(--c-orange);
}

.site-footer__legal {
    grid-area: legal;
    align-self: end;
    margin-top: 0;
    color: var(--c-white);
    font-size: clamp(0.72rem, 0.72vw, 0.84rem);
    line-height: 1.45;
    text-align: right;
}

@media (min-width: 981px) {
    .site-footer__contact--people {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: clamp(28px, 3vw, 54px);
        width: 100%;
    }

    .site-footer__contact--people .site-footer__person + .site-footer__person {
        margin-top: 0;
        padding-top: 0;
        padding-left: clamp(28px, 3vw, 54px);
        border-top: 0;
        border-left: 1px solid var(--footer-border-color);
    }
}

.site-footer__legal strong,
.site-footer__legal span,
.site-footer__legal a {
    display: inline;
}

.site-footer__legal a,
.site-footer__legal span {
    margin-left: 0.3em;
}

@media (max-width: 980px) {
    .site-footer__top {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-2xl);
    }

    .site-footer__top::before {
        display: none;
    }

    .site-footer__cta {
        grid-column: 1 / -1;
        padding-right: 0;
    }

    .site-footer__nav:first-of-type,
    .site-footer__nav:last-child {
        grid-column: auto;
        padding-left: 0;
    }

    .site-footer__bottom {
        grid-template-columns: minmax(0, 1fr) minmax(280px, 0.8fr);
        grid-template-areas:
            'brand contact'
            'legal legal';
    }
}

@media (max-width: 700px) {
    .site-footer__top,
    .site-footer__bottom {
        grid-template-columns: 1fr;
    }

    .site-footer__top {
        gap: var(--space-2xl);
    }

    .site-footer__bottom {
        grid-template-areas:
            'brand'
            'contact'
            'legal';
        gap: var(--space-2xl);
    }

    .site-footer__logo-image {
        width: min(82vw, 520px);
    }

    .site-footer__contact,
    .site-footer__legal {
        text-align: left;
    }

    .site-footer__address {
        white-space: normal;
    }

    .site-footer__legal {
        margin-top: 0;
    }
}


/* Les paragraphes générés par les WYSIWYG conservent le layout existant. */
.hero__panel-text > :first-child,
.rich-text > :first-child {
    margin-top: 0;
}

.hero__panel-text > :last-child,
.rich-text > :last-child {
    margin-bottom: 0;
}