.container {
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: 1.5rem;
}

.section-header {
    text-align: center;
    max-width: 760px;
    margin-inline: auto;
    margin-bottom: 3rem;
}

.section-header__title {
    font-family: var(--font-primary);
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 0.75rem;
}

.section-header__subtitle {
    font-family: var(--font-secondary);
    font-size: 1.05rem;
    color: var(--color-text-primary);
    opacity: 0.85;
    line-height: 1.6;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-secondary);
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.85rem 1.75rem;
    border-radius: 0.5rem;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn--primary {
    background: var(--color-primary);
    color: #fff;
}

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

.btn--dark {
    background: var(--color-chrome-dark);
    color: #fff;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(18, 47, 107, 0.18);
}

/* ---------- SECTION 1 — HERO ---------- */
.home-hero {
    background: var(--color-bg-primary);
    padding-block: 4rem 3rem;
}

.home-hero__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: stretch;
}

.home-hero__title {
    font-family: var(--font-primary);
    font-size: clamp(2rem, 5vw, 3.25rem);
    font-weight: 800;
    color: var(--color-primary);
    line-height: 1.15;
    margin-bottom: 1.25rem;
}

.home-hero__subtitle {
    font-family: var(--font-secondary);
    font-size: 1.1rem;
    color: var(--color-text-primary);
    line-height: 1.65;
    margin-bottom: 2rem;
    max-width: 42ch;
}

.home-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.home-hero__media {
    display: flex;
    min-height: 280px;
}

.home-hero__image {
    width: 100%;
    height: 100%;
    min-height: 280px;
    border-radius: 1rem;
    overflow: hidden;
}

.home-hero__image svg {
    width: 100% !important;
    height: 100% !important;
}

/* ---------- SECTION 1bis — QUI ACCOMPAGNONS-NOUS (proposition 16/09/2026) ----------
   Réutilise .why-card (cartes "Pourquoi choisir", section 4) via ses modificateurs
   --solid/--tag plutôt qu'un nouveau système de carte. */
.home-who-we-serve {
    background: var(--color-bg-secondary);
    padding-block: 4rem;
}

.who-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

.who-grid .why-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.who-grid .why-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(18, 47, 107, 0.12);
}

.why-card__icon--solid {
    background: var(--color-bg-secondary);
    color: var(--color-secondary);
}

.why-card__icon--solid.why-card__icon--primary {
    background: var(--color-bg-secondary);
    color: var(--color-primary);
}

.why-card__tag {
    display: inline-block;
    margin-top: 0.6rem;
    background: color-mix(in srgb, var(--color-accent) 18%, transparent);
    color: var(--color-secondary);
    font-family: var(--font-secondary);
    font-weight: 600;
    font-size: 0.78rem;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
}

/* ---------- SECTION 2 — EXPERTISE (3 piliers) ---------- */
.home-expertise {
    background: var(--color-bg-secondary);
    padding-block: 4rem;
}

.expertise-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.75rem;
}

.expertise-card {
    display: block;
    position: relative;
    background: var(--color-surface);
    border-radius: 1.25rem;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(18, 47, 107, 0.06);
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.expertise-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(18, 47, 107, 0.12);
}

.expertise-card__media {
    position: relative;
}

.expertise-card__media .media-placeholder {
    aspect-ratio: 16 / 10;
    border-radius: 0;
    border: none;
}

.expertise-card__icon {
    position: absolute;
    left: 1.5rem;
    bottom: -1.75rem;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: var(--color-bg-secondary);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    border: 4px solid var(--color-surface);
    box-shadow: 0 4px 14px rgba(18, 47, 107, 0.14);
}

.expertise-card__body {
    padding: 2.5rem 1.75rem 1.75rem;
}

.expertise-card__divider {
    display: block;
    width: 2.5rem;
    height: 3px;
    background: var(--color-secondary);
    border-radius: 999px;
    margin-bottom: 1rem;
}

.expertise-card__title {
    font-family: var(--font-primary);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 0.6rem;
    line-height: 1.35;
}

.expertise-card__text {
    font-family: var(--font-secondary);
    font-size: 0.95rem;
    color: var(--color-text-primary);
    opacity: 0.85;
    line-height: 1.6;
}

/* ---------- SECTION 3 — À PROPOS (mission / différence) ---------- */
.home-about {
    background: var(--color-bg-primary);
    padding-block: 4rem;
}

.about-banners {
    display: grid;
    gap: 1.5rem;
}

.about-banner {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    background: var(--color-bg-secondary);
    border-radius: 0.75rem;
    padding: 1.75rem;
}

.about-banner--left { border-left: 4px solid var(--color-primary); }
.about-banner--right {
    border-right: 4px solid var(--color-secondary);
    text-align: right;
}

.about-banner__icon {
    flex-shrink: 0;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}

.about-banner--right .about-banner__icon {
    background: var(--color-secondary);
}

.about-banner__content h3 {
    font-family: var(--font-primary);
    font-size: 1.1rem;
    color: var(--color-primary);
    margin-bottom: 0.4rem;
}

.about-banner--right .about-banner__content h3 {
    color: var(--color-secondary);
}

.about-banner__content p {
    font-family: var(--font-secondary);
    font-size: 0.95rem;
    color: var(--color-text-primary);
    line-height: 1.6;
    opacity: 0.9;
}

/* Mobile — icône au-dessus du texte plutôt qu'à côté */
@media (max-width: 640px) {
    .about-banner {
        flex-direction: column;
        text-align: center;
    }

    .about-banner--right {
        text-align: center;
    }

    .about-banner__icon {
        order: -1;
    }
}

/* ---------- SECTION 4 — POURQUOI CHOISIR ---------- */
.home-why {
    background: var(--color-bg-secondary);
    padding-block: 4rem;
}

.why-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.why-card {
    background: var(--color-surface);
    border-radius: 0.75rem;
    padding: 1.5rem;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    box-shadow: 0 4px 16px rgba(18, 47, 107, 0.05);
}

.why-card__icon {
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--color-bg-secondary);
    color: var(--color-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.why-card__title {
    font-family: var(--font-primary);
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 0.35rem;
}

.why-card__text {
    font-family: var(--font-secondary);
    font-size: 0.9rem;
    color: var(--color-text-primary);
    opacity: 0.85;
    line-height: 1.5;
}

.why-card--link {
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.why-card--link:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 26px rgba(18, 47, 107, 0.1);
}

.why-card__link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.6rem;
    font-family: var(--font-secondary);
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--color-secondary);
}

/* Mobile — icône au-dessus du titre plutôt qu'à côté */
@media (max-width: 640px) {
    .why-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

.about-page {
    position: relative;
    overflow: hidden;
    background: var(--color-bg-primary);
    padding-block: 4rem;
}

/* Photo d'équipe en fond de page, assombrie par un voile noir, sur toute la hauteur de la section */
.about-page::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),
        url('/assets/images/equipe.avif') center / cover no-repeat;
    opacity: 0.4;
    pointer-events: none;
    z-index: 0;
}

.about-page > .container {
    position: relative;
    z-index: 1;
}

.about-intro {
    max-width: 760px;
    margin-inline: auto;
    margin-bottom: 2.5rem;
    text-align: center;
}

.about-intro p {
    font-family: var(--font-secondary);
    font-size: 1.08rem;
    line-height: 1.8;
    color: var(--color-text-primary);
    opacity: 0.9;
}

.about-story {
    display: grid;
    grid-template-columns: 1.5fr 0.8fr;
    gap: 2rem;
    align-items: center;
    background: var(--color-surface);
    border-radius: 1rem;
    box-shadow: 0 8px 28px rgba(18, 47, 107, 0.06);
    padding: 2rem;
    margin-bottom: 4rem;
}

.about-story__content h3 {
    font-family: var(--font-primary);
    font-size: clamp(1.4rem, 2vw, 2rem);
    color: var(--color-primary);
    margin-bottom: 1rem;
}

.about-story__content p {
    font-family: var(--font-secondary);
    line-height: 1.8;
    color: var(--color-text-primary);
    opacity: 0.9;
}

.about-story__badge {
    border-radius: 1rem;
    min-height: 180px;
    overflow: hidden;
}

.about-story__badge img {
    width: 100%;
    height: 100%;
    min-height: 180px;
    object-fit: cover;
    display: block;
}

.about-direction {
    margin-bottom: 4rem;
}

.leader-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

.leader-card {
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(18, 47, 107, 0.05);
}

.leader-card__photo {
    width: 100%;
}

.leader-card__photo .media-placeholder {
    border-radius: 0;
    border: none;
}

/* Filet de sécurité pour une future photo qui ne serait pas exactement au format 3/4 :
   recadrage centré vers le haut plutôt qu'au centre, pour ne jamais couper le visage. */
.leader-card__photo .media-placeholder__image {
    object-position: center 15%;
}

.leader-card__body {
    padding: 1.75rem;
}

.leader-card__name {
    font-family: var(--font-primary);
    font-size: 1.2rem;
    color: var(--color-primary);
    margin-bottom: 0.3rem;
}

.leader-card__role {
    font-family: var(--font-secondary);
    color: var(--color-secondary);
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.leader-card__bio {
    font-family: var(--font-secondary);
    line-height: 1.7;
    color: var(--color-text-primary);
    opacity: 0.85;
    margin-bottom: 1.25rem;
}

.leader-card__quote {
    font-family: var(--font-secondary);
    font-style: italic;
    line-height: 1.6;
    color: var(--color-text-primary);
    opacity: 0.9;
    border-left: 3px solid var(--color-secondary);
    padding-left: 1rem;
    margin: 0;
}

@media (min-width: 768px) {
    .leader-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.about-team {
    margin-bottom: 4rem;
}

.about-team-rotator {
    max-width: 100%;
    overflow: hidden;
    position: relative;
}

.about-team-track {
    display: flex;
    flex-flow: row;
    transition: transform 0.5s ease;
}

.about-team-page {
    flex: 0 0 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    width: 100%;
    box-sizing: border-box;
}

.about-team-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.6rem;
    padding: 10px 0 0;
}

.about-team-dots button {
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 100%;
    border: 1.5px solid var(--color-primary);
    background: var(--color-surface);
    cursor: pointer;
    padding: 0;
    margin: 0;
    outline: none;
    box-shadow: none;
    flex-shrink: 0;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.about-team-dots button:hover {
    border-color: var(--color-secondary);
}

.about-team-dots button.is-active {
    background: var(--color-secondary);
    border-color: var(--color-secondary);
    transform: scale(1.15);
}

.about-team-card {
    background: var(--color-surface);
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(18, 47, 107, 0.05);
    text-align: center;
}

.about-team-card .media-placeholder {
    border-radius: 0;
}

/* Les photos d'équipe sont très majoritairement au format portrait (ratios réels
   0.56 à 1.0 sur les fichiers fournis) — un cadre carré (1/1) rognait fortement les
   plus hautes, et repasser en "contain" laissait un bandeau de fond disgracieux sur
   les côtés. Le cadre est donc en 3/4 (proche du format moyen des photos), en cover
   pour remplir tout l'espace, avec un recadrage centré vers le haut pour ne jamais
   couper les visages. */
.about-team-card .media-placeholder__image {
    object-position: center 15%;
}

.about-team-card__body {
    padding: 1.5rem;
}

.about-team-card h3 {
    font-family: var(--font-primary);
    font-size: 1.2rem;
    color: var(--color-primary);
    margin-bottom: 0.4rem;
}

.about-team-card__role {
    font-family: var(--font-secondary);
    color: var(--color-secondary);
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.about-team-card__body p:last-child {
    font-family: var(--font-secondary);
    line-height: 1.7;
    color: var(--color-text-primary);
    opacity: 0.85;
}

.about-values {
    margin-top: 2rem;
}

@media (min-width: 768px) {
    .about-team-page {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .about-story {
        grid-template-columns: 1fr;
    }
}

.why-cta {
    background: linear-gradient(135deg, rgba(18, 47, 107, 0.06), rgba(18, 47, 107, 0.02));
    border-radius: 1rem;
    padding: 1.75rem 2rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.why-cta__icon {
    flex: 0 0 auto;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    box-shadow: 0 4px 14px rgba(18, 47, 107, 0.1);
}

.why-cta__body {
    flex: 1 1 auto;
    min-width: 0;
}

.why-cta__title {
    font-family: var(--font-primary);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 0.25rem;
}

.why-cta__text {
    font-family: var(--font-secondary);
    color: var(--color-text-primary);
    font-size: 0.95rem;
    opacity: 0.75;
}

.why-cta__button {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-secondary);
    font-weight: 600;
    font-size: 0.95rem;
    color: #fff;
    background: var(--color-primary);
    padding: 0.85rem 1.5rem;
    border-radius: 3rem;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.why-cta__button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(18, 47, 107, 0.25);
}

/* Mobile — empilé et centré */
@media (max-width: 640px) {
    .why-cta {
        flex-direction: column;
        text-align: center;
    }

    .why-cta__button {
        width: 100%;
        justify-content: center;
    }
}

/* ---------- SECTION 5 — PROBLÈME / SOLUTION ---------- */
.home-solution {
    background: var(--color-bg-primary);
    padding-block: 4rem 5rem;
}

.solution-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: start;
}

.solution-col__label {
    font-family: var(--font-primary);
    font-size: 1.1rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 0.85rem;
}

.solution-col--problem .solution-col__label { color: #C0392B; }
.solution-col--answer .solution-col__label { color: var(--color-secondary); }

.solution-card {
    box-sizing: border-box;
    position: relative;
    border-radius: 1.1rem;
    padding: 1.35rem 1.25rem;
    overflow: hidden;
}

.solution-col--problem .solution-card {
    background: linear-gradient(160deg, rgba(192, 57, 43, 0.12), rgba(192, 57, 43, 0.04));
}

.solution-card--highlight {
    background: linear-gradient(160deg, rgba(30, 140, 69, 0.12), rgba(30, 140, 69, 0.04));
}

.solution-card__icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-size: 1.15rem;
    margin-bottom: 0.75rem;
    background: var(--color-surface);
    color: var(--color-primary);
    box-shadow: 0 4px 12px rgba(18, 47, 107, 0.08);
}

.solution-card__icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.solution-card h4 {
    font-family: var(--font-primary);
    font-size: 1rem;
    color: var(--color-text-primary);
    margin-bottom: 0.4rem;
}

.solution-card p {
    font-family: var(--font-secondary);
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--color-text-primary);
    margin-bottom: 0.75rem;
    opacity: 0.85;
}

.solution-card__row {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.solution-col--answer .solution-card__row {
    flex-direction: row-reverse;
}

.solution-card ul {
    flex: 1 1 auto;
    min-width: 0;
    list-style: none;
    padding: 0;
    margin: 0 0 0.75rem;
    display: grid;
    gap: 0.45rem;
}

.solution-card li {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    font-family: var(--font-secondary);
    font-size: 0.85rem;
    line-height: 1.35;
    color: var(--color-text-primary);
}

.solution-col--problem .solution-card li i { color: #C0392B; margin-top: 0.2rem; }
.solution-col--answer .solution-card li i { color: var(--color-secondary); margin-top: 0.2rem; }

.solution-card__benefit {
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--color-text-primary);
    border-top: 1px solid rgba(18, 47, 107, 0.12);
    padding-top: 0.75rem;
}

/* Illustration : visuel placé à gauche du bloc "problème", à droite du bloc "solution",
   comme sur le visuel de référence. */
.solution-card__illustration {
    flex: 0 0 auto;
    width: 38%;
    max-width: 150px;
    height: 120px;
    pointer-events: none;
}

.solution-card__illustration img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
    display: block;
}

@media (max-width: 480px) {
    .solution-card__illustration {
        width: 30%;
        max-width: 100px;
        height: 90px;
    }
}

/* Flèche décorative entre les deux panneaux (desktop uniquement) */
.solution-arrow {
    display: none;
}

@media (min-width: 768px) {
    .solution-arrow {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 3.25rem;
        height: 3.25rem;
        border-radius: 50%;
        background: var(--color-surface);
        color: var(--color-secondary);
        font-size: 1.1rem;
        box-shadow: 0 6px 16px rgba(18, 47, 107, 0.15);
        z-index: 3;
    }
}

/* --- Onglets par solution (M-Files, Sage, ZKTeco, ImprimeCheque) --- */
/* Les onglets se placent sous les cartes problème/solution */
.solution-tabs__panel {
    margin-bottom: 2rem;
}

.solution-tabs__nav {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.solution-tab {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    text-align: left;
    padding: 1rem 1.1rem;
    border: 1px solid var(--color-border);
    border-radius: 0.9rem;
    background: var(--color-surface);
    color: var(--color-text-primary);
    cursor: pointer;
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.solution-tab:hover {
    border-color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(18, 47, 107, 0.12);
}

.solution-tab:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
}

.solution-tab__icon {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    background: var(--color-bg-secondary);
    color: var(--color-primary);
    transition: background-color 0.25s ease, color 0.25s ease;
}

.solution-tab__text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.solution-tab__label {
    font-family: var(--font-primary);
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.3;
}

.solution-tab__product {
    font-family: var(--font-secondary);
    font-size: 0.82rem;
    color: var(--color-secondary);
    font-weight: 600;
}

/* État actif — la case de la solution sélectionnée s'assombrit */
.solution-tab.is-active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
    box-shadow: 0 10px 24px rgba(18, 47, 107, 0.22);
}

.solution-tab.is-active .solution-tab__icon {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.solution-tab.is-active .solution-tab__product {
    color: var(--color-accent);
}

.solution-tabs__panel[hidden] {
    display: none;
}

/* ---------- RESPONSIVE ---------- */
@media (min-width: 768px) {
    .who-grid { grid-template-columns: repeat(2, 1fr); }
    .expertise-grid { grid-template-columns: repeat(3, 1fr); }
    .why-grid { grid-template-columns: repeat(2, 1fr); }
    .solution-grid { grid-template-columns: repeat(2, 1fr); }
    .solution-tabs__nav { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 992px) {
    .home-hero__grid { grid-template-columns: 1fr 1fr; }
    .why-grid { grid-template-columns: repeat(3, 1fr); }
    .solution-tabs__nav { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- SECTION 7 — RÉFÉRENCES / CLIENTS ---------- */
.home-references {
    background: var(--color-bg-secondary);
    padding-block: 4rem;
    overflow: hidden;
}

.logo-cloud {
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
    margin-bottom: 3rem;
}

.logo-cloud__track {
    display: flex;
    width: max-content;
    gap: 2.5rem;
    animation: logo-scroll 28s linear infinite;
}

.logo-cloud__item {
    flex-shrink: 0;
    min-width: 140px;
    height: 70px;
    background: var(--color-surface);
    border-radius: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-primary);
    font-weight: 600;
    color: var(--color-primary);
    opacity: 0.6;
    padding: 0.75rem 1.25rem;
}

.logo-cloud__item img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

@keyframes logo-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

.testimonial-rotator {
    max-width: 100%;
    margin: 0 auto 1.5rem;
    overflow: hidden;
    position: relative;
}

.testimonial-track {
    display: flex;
    flex-flow: row;
    justify-content: flex-start;
    transition: transform 0.5s ease;
}

.testimonial-page {
    flex: 0 0 100%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    gap: 1.5rem;
    padding: 0.5rem 1rem 1.5rem;
    width: 100%;
    box-sizing: border-box;
}

.testimonial-card {
    flex-shrink: 0;
    width: 6cm;
    height: 6cm;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    padding: 1.4rem;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    margin: 0;
}

.testimonial-card__mark {
    font-size: 1.3rem;
    color: var(--color-secondary);
    opacity: 0.85;
    margin-bottom: 0.5rem;
}

.testimonial-card__quote {
    font-family: var(--font-primary);
    font-size: 0.82rem;
    font-style: italic;
    color: var(--color-text-primary);
    line-height: 1.4;
    margin-bottom: 0.75rem;
    flex-grow: 1;
    overflow: hidden;
    display: -webkit-box;
    /* -webkit-line-clamp: 5; */
    -webkit-box-orient: vertical;
}

.testimonial-card__footer {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: auto;
}

.testimonial-card__logo {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--color-secondary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: 0.85rem;
}

.testimonial-card__meta {
    display: flex;
    flex-direction: column;
    font-family: var(--font-secondary);
    font-size: 0.68rem;
    line-height: 1.3;
}

.testimonial-card__meta strong {
    color: var(--color-primary);
    font-size: 0.76rem;
}

.testimonial-card__meta span {
    color: var(--color-text-secondary, #666);
}

.testimonial-rotator__dots {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
    gap: 0.6rem;
    margin: 0.75rem auto 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0 20px;
}

.testimonial-rotator__dots button {
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 100%;
    border: 1.5px solid var(--color-primary);
    background: var(--color-surface);
    cursor: pointer;
    padding: 0;
    margin: 0;
    outline: none;
    box-shadow: none;
    flex-shrink: 0;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.testimonial-rotator__dots button:hover {
    border-color: var(--color-secondary);
}

.testimonial-rotator__dots button.is-active {
    background: var(--color-secondary) !important;
    border-color: var(--color-secondary) !important;
    transform: scale(1.15);
}


/* Fallback responsive — 6cm fixe déborde sur petit écran */
@media (max-width: 640px) {
    .testimonial-card {
        width: 80vw;
        height: 80vw;
        max-width: 6cm;
        max-height: 6cm;
    }
}

/* ---------- SECTION 8 — ACTUALITÉS / INSIGHTS ---------- */
.home-insights {
    background: var(--color-bg-primary);
    padding-block: 4rem;
}

.insights-cta {
    margin-top: 2.5rem;
    text-align: center;
}

/* ---------- SECTION 9 — CTA FINAL ---------- */
.home-cta-final {
    position: relative;
    background: var(--color-primary) url('/assets/images/images.png') center/cover no-repeat;
    padding-block: 5rem;
    isolation: isolate;
}

.home-cta-final__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(8, 18, 46, 0.83), rgba(6, 14, 38, 0.87));
    z-index: -1;
}

.home-cta-final__content {
    text-align: center;
    max-width: 640px;
    margin-inline: auto;
}

/* Variante accueil (cta-final-contact.blade.php) : plus large pour la grille de coordonnées 3 colonnes. */
.home-cta-final__content--wide {
    max-width: 800px;
}

.home-cta-final__title {
    font-family: var(--font-primary);
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 800;
    color: #fff;
    margin-bottom: 1rem;
}

.home-cta-final__text {
    font-family: var(--font-secondary);
    font-size: 1.05rem;
    color: #fff;
    opacity: 0.9;
    line-height: 1.6;
    margin-bottom: 2rem;
}

.home-cta-final__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

.btn--on-dark {
    color: #fff;
    border-color: #fff;
}

.quick-contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

.quick-contact__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.75rem;
    width: 100%;
}

.quick-contact__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--font-secondary);
}

.quick-contact__icon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(6px);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    margin-bottom: 0.4rem;
}

.quick-contact__label {
    font-family: var(--font-primary);
    font-weight: 700;
    color: #fff;
}

.quick-contact__item a,
.quick-contact__item span:not(.quick-contact__label) {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-size: 0.95rem;
}

.quick-contact__item a:hover {
    color: var(--color-accent);
}

.quick-contact__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* ---------- RESPONSIVE (ajouts sections 7-9) ---------- */
@media (min-width: 768px) {
    .quick-contact__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    .logo-cloud__track { animation: none; }
}

/* ---------- PAGE SERVICES (sommaire + détail par pôle, Option B) ---------- */
.services-page {
    background: var(--color-bg-primary);
    padding-block: 4rem;
}

.services-intro {
    max-width: 760px;
    margin-inline: auto;
    margin-bottom: 2.5rem;
    text-align: center;
}

.services-intro p {
    font-family: var(--font-secondary);
    font-size: 1.08rem;
    line-height: 1.8;
    color: var(--color-text-primary);
    opacity: 0.9;
}

.services-pole-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.75rem;
}

.services-pole-card {
    display: block;
    background: var(--color-surface);
    border-radius: 1rem;
    padding: 2rem 1.75rem;
    box-shadow: 0 4px 20px rgba(18, 47, 107, 0.06);
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.services-pole-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(18, 47, 107, 0.1);
}

.services-pole-card__icon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: var(--color-bg-secondary);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-bottom: 1.25rem;
}

.services-pole-card h3 {
    font-family: var(--font-primary);
    font-size: 1.2rem;
    color: var(--color-primary);
    margin-bottom: 0.6rem;
}

.services-pole-card p {
    font-family: var(--font-secondary);
    color: var(--color-text-primary);
    opacity: 0.85;
    line-height: 1.6;
    margin-bottom: 1.25rem;
}

.services-pole-card__link {
    font-family: var(--font-secondary);
    font-weight: 600;
    color: var(--color-secondary);
    font-size: 0.95rem;
}

.service-other-poles__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.service-other-pole-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    font-family: var(--font-secondary);
    font-weight: 600;
    color: var(--color-text-primary);
    text-decoration: none;
    transition: transform 0.15s ease;
}

.service-other-pole-link:hover {
    transform: translateY(-2px);
}

.service-other-pole-link__icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--color-bg-secondary);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.service-other-pole-link span:nth-child(2) {
    flex-grow: 1;
}

@media (min-width: 768px) {
    .services-pole-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .service-other-poles__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    /* 3 colonnes : confortable pour les 5 "autres produits" de la page Produits,
       sans casser la mise en page à 2 éléments de la page Services (reste 2 colonnes utilisées). */
    .service-other-poles__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ---------- PAGE PRODUITS — sommaire (6 fiches solution, cliquables vers page détail) ---------- */
.produits-page {
    background: var(--color-bg-primary);
    padding-block: 4rem;
}

.produits-intro {
    max-width: 760px;
    margin-inline: auto;
    margin-bottom: 2.5rem;
    text-align: center;
}

.produits-intro p {
    font-family: var(--font-secondary);
    font-size: 1.08rem;
    line-height: 1.8;
    color: var(--color-text-primary);
    opacity: 0.9;
}

.produits-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.75rem;
}

.produit-card {
    display: block;
    background: var(--color-surface);
    border-radius: 1rem;
    padding: 2rem 1.75rem;
    box-shadow: 0 4px 20px rgba(18, 47, 107, 0.06);
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.produit-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(18, 47, 107, 0.12);
}

.produit-card__icon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: var(--color-bg-secondary);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-bottom: 1.25rem;
    transition: background 0.2s ease, color 0.2s ease;
}

.produit-card:hover .produit-card__icon {
    background: var(--color-primary);
    color: #fff;
}

.produit-card h3 {
    font-family: var(--font-primary);
    font-size: 1.2rem;
    color: var(--color-primary);
    margin-bottom: 0.6rem;
}

.produit-card p {
    font-family: var(--font-secondary);
    color: var(--color-text-primary);
    opacity: 0.85;
    line-height: 1.6;
    margin-bottom: 1.25rem;
}

.produit-card__link {
    font-family: var(--font-secondary);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--color-secondary);
}

.produit-card__link i {
    margin-left: 0.3rem;
    transition: transform 0.2s ease;
}

.produit-card:hover .produit-card__link i {
    transform: translateX(4px);
}

@media (min-width: 768px) {
    .produits-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ---------- PAGE ACTUALITÉS — sommaire (à la une + grille) et détail d'une publication ---------- */
.actualites-page {
    background: var(--color-bg-primary);
    padding-block: 4rem;
}

.actualites-intro {
    max-width: 760px;
    margin-inline: auto;
    margin-bottom: 2.5rem;
    text-align: center;
}

.actualites-intro p {
    font-family: var(--font-secondary);
    font-size: 1.08rem;
    line-height: 1.8;
    color: var(--color-text-primary);
    opacity: 0.9;
}

.actualite-featured {
    display: grid;
    grid-template-columns: 1fr;
    background: var(--color-surface);
    border-radius: 1.25rem;
    box-shadow: 0 4px 24px rgba(18, 47, 107, 0.08);
    overflow: hidden;
    text-decoration: none;
    margin-bottom: 3rem;
    transition: box-shadow 0.2s ease;
}

.actualite-featured:hover {
    box-shadow: 0 14px 34px rgba(18, 47, 107, 0.14);
}

.actualite-featured__media img,
.actualite-featured__media .media-placeholder {
    width: 100%;
    display: block;
    border-radius: 0;
}

.actualite-featured__body {
    padding: 1.75rem 2rem 2.25rem;
    display: flex;
    flex-direction: column;
}

.actualite-featured__badge {
    display: inline-block;
    align-self: flex-start;
    background: var(--color-secondary);
    color: #fff;
    font-family: var(--font-secondary);
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    margin-bottom: 0.9rem;
}

.actualite-featured__title {
    font-family: var(--font-primary);
    font-size: clamp(1.4rem, 2.5vw, 1.85rem);
    color: var(--color-primary);
    margin: 0.4rem 0 0.75rem;
    line-height: 1.3;
}

.actualite-featured__excerpt {
    font-family: var(--font-secondary);
    color: var(--color-text-primary);
    opacity: 0.85;
    line-height: 1.7;
    margin-bottom: 1.25rem;
    flex-grow: 1;
}

.actualite-featured__link {
    font-family: var(--font-secondary);
    font-weight: 600;
    color: var(--color-secondary);
    font-size: 0.95rem;
}

.actualites-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.75rem;
}

.actualite-card {
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border-radius: 1rem;
    box-shadow: 0 4px 20px rgba(18, 47, 107, 0.06);
    overflow: hidden;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.actualite-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(18, 47, 107, 0.1);
}

.actualite-card__media img,
.actualite-card__media .media-placeholder {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    border-radius: 0;
}

.actualite-card__body {
    padding: 1.5rem 1.5rem 1.75rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.actualite-card__category {
    display: inline-block;
    align-self: flex-start;
    background: var(--color-bg-secondary);
    color: var(--color-secondary);
    font-family: var(--font-secondary);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.28rem 0.65rem;
    border-radius: 999px;
    margin-bottom: 0.6rem;
}

.actualite-card__date {
    display: block;
    font-family: var(--font-secondary);
    font-size: 0.8rem;
    color: var(--color-text-primary);
    opacity: 0.6;
    margin-bottom: 0.5rem;
}

.actualite-card__title {
    font-family: var(--font-primary);
    font-size: 1.1rem;
    color: var(--color-primary);
    line-height: 1.35;
    margin-bottom: 0.6rem;
}

.actualite-card__excerpt {
    font-family: var(--font-secondary);
    font-size: 0.92rem;
    color: var(--color-text-primary);
    opacity: 0.85;
    line-height: 1.6;
    margin-bottom: 1.1rem;
    flex-grow: 1;
}

.actualite-card__link {
    font-family: var(--font-secondary);
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--color-secondary);
}

.actualites-empty {
    text-align: center;
    max-width: 420px;
    margin-inline: auto;
    padding-block: 3rem;
}

.actualites-empty i {
    display: block;
    font-size: 2.5rem;
    color: var(--color-primary);
    opacity: 0.4;
    margin-bottom: 1rem;
}

.actualites-empty h3 {
    font-family: var(--font-primary);
    color: var(--color-primary);
    margin-bottom: 0.5rem;
}

.actualites-empty p {
    font-family: var(--font-secondary);
    color: var(--color-text-primary);
    opacity: 0.75;
}

/* Page détail d'une actualité */
.actualite-hero {
    background: var(--color-bg-secondary);
    padding-block: 3.5rem 2.5rem;
}

.actualite-hero__inner {
    max-width: 760px;
    margin-inline: auto;
}

.actualite-hero__breadcrumb {
    margin-bottom: 1.5rem;
}

.actualite-hero__breadcrumb a {
    color: var(--color-text-primary);
    opacity: 0.65;
}

.actualite-hero__breadcrumb a:hover {
    opacity: 1;
    color: var(--color-secondary);
}

.actualite-hero__breadcrumb span[aria-current] {
    color: var(--color-primary);
}

.actualite-hero__breadcrumb i {
    color: var(--color-border);
}

.actualite-hero__title {
    font-family: var(--font-primary);
    font-size: clamp(1.6rem, 3.5vw, 2.4rem);
    color: var(--color-primary);
    line-height: 1.25;
    margin: 0.75rem 0 1rem;
}

.actualite-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    font-family: var(--font-secondary);
    font-size: 0.9rem;
    color: var(--color-text-primary);
    opacity: 0.75;
}

.actualite-hero__meta i {
    margin-right: 0.4rem;
    color: var(--color-secondary);
}

.actualite-detail {
    background: var(--color-bg-primary);
    padding-block: 3rem;
}

.actualite-detail__layout {
    max-width: 760px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.actualite-detail__media img,
.actualite-detail__media .media-placeholder {
    width: 100%;
    border-radius: 1rem;
}

.actualite-detail__body p {
    font-family: var(--font-secondary);
    font-size: 1.05rem;
    line-height: 1.85;
    color: var(--color-text-primary);
    margin-bottom: 1.25rem;
}

.actualite-detail__body p:last-child {
    margin-bottom: 0;
}

@media (min-width: 768px) {
    .actualites-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .actualite-featured {
        grid-template-columns: 1.1fr 1fr;
        align-items: stretch;
    }

    .actualite-featured__media {
        height: 100%;
    }

    .actualite-featured__media img,
    .actualite-featured__media .media-placeholder {
        height: 100%;
        object-fit: cover;
    }

    .actualite-featured__body {
        justify-content: center;
    }
}

@media (min-width: 1200px) {
    .actualites-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ---------- PAGE RÉFÉRENCES/CLIENTS ---------- */
.references-page {
    background: var(--color-bg-primary);
    padding-block: 4rem;
}

.references-intro {
    max-width: 760px;
    margin-inline: auto;
    margin-bottom: 2.5rem;
    text-align: center;
}

.references-intro p {
    font-family: var(--font-secondary);
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--color-text-primary);
    opacity: 0.85;
    font-style: italic;
}

.case-studies {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.case-study {
    background: var(--color-surface);
    border-radius: 1.25rem;
    padding: 1.25rem;
    box-shadow: 0 4px 20px rgba(18, 47, 107, 0.06);
    text-align: center;
}

.case-study__media {
    margin: 0.75rem 0 1rem;
}

.case-study__media-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-height: 140px;
    padding: 1.25rem;
    border: 2px dashed rgba(18, 47, 107, 0.25);
    border-radius: 1rem;
    background: var(--color-bg-secondary);
    color: var(--color-primary);
    text-align: center;
}

.case-study__media-placeholder i {
    font-size: 1.8rem;
    opacity: 0.6;
}

.case-study__media-placeholder span {
    font-family: var(--font-secondary);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    opacity: 0.6;
}

.case-study__media img {
    display: block;
    width: 100%;
    max-width: 480px;
    height: auto;
    margin: 0 auto;
    background: var(--color-bg-secondary);
    border: 1px solid rgba(18, 47, 107, 0.08);
    border-radius: 1rem;
    padding: 0.5rem;
    box-sizing: border-box;
}

.case-study__testimonial {
    margin: 1.25rem auto 0;
    max-width: 640px;
    padding: 1.25rem 1.5rem;
    background: var(--color-bg-secondary);
    border-top: 3px solid var(--color-secondary);
    border-radius: 0.6rem;
}

.case-study__testimonial i {
    display: block;
    margin: 0 auto 0.5rem;
    color: var(--color-secondary);
    opacity: 0.5;
    font-size: 1rem;
}

.case-study__testimonial p {
    font-family: var(--font-secondary);
    font-style: italic;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--color-text-primary);
    opacity: 0.9;
    margin: 0 0 0.4rem;
}

.case-study__testimonial cite {
    display: block;
    font-family: var(--font-secondary);
    font-style: normal;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-primary);
}


.case-study__sector {
    display: inline-block;
    font-family: var(--font-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-secondary);
    margin-bottom: 0.5rem;
}

.case-study__name {
    font-family: var(--font-primary);
    font-size: 1.3rem;
    color: var(--color-primary);
    margin-bottom: 1.25rem;
}

.case-study__block {
    margin-bottom: 1.25rem;
}

.case-study__block:last-child {
    margin-bottom: 0;
}

.case-study__label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--font-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.4rem;
}

.case-study__block--challenge .case-study__label {
    color: #B8621B;
}

.case-study__block--solution .case-study__label {
    color: var(--color-secondary);
}

.case-study__block p {
    font-family: var(--font-secondary);
    font-size: 0.95rem;
    color: var(--color-text-primary);
    opacity: 0.85;
    line-height: 1.7;
}

@media (min-width: 768px) {
    .case-study {
        padding: 1.75rem 2rem;
    }

    .case-study__media-placeholder i {
        font-size: 2.2rem;
    }
}

/* ---------- PAGE CONTACT ---------- */
.contact-page {
    background: var(--color-bg-primary);
    padding-block: 4rem;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: stretch;
}

.contact-map {
    display: flex;
    flex-direction: column;
}

.contact-map .contact-map-placeholder {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.contact-info h2,
.contact-form-wrap h2 {
    font-family: var(--font-primary);
    font-size: 1.3rem;
    color: var(--color-primary);
    margin-bottom: 1.25rem;
}

.contact-info__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1.5rem;
}

.contact-info__list li {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.contact-info__list > li > i {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--color-bg-secondary);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    flex-shrink: 0;
}

.contact-info__list > li > div {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-family: var(--font-secondary);
    font-size: 0.95rem;
}

.contact-info__list a {
    color: var(--color-text-primary);
    text-decoration: none;
}

.contact-info__list a:hover {
    color: var(--color-secondary);
}

.contact-info__label {
    font-weight: 600;
    color: var(--color-primary);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.contact-map-placeholder {
    background: var(--color-bg-secondary);
    border-radius: 0.75rem;
    padding: 2rem;
    text-align: center;
    color: var(--color-text-primary);
}

.contact-map-placeholder i {
    font-size: 1.75rem;
    color: var(--color-primary);
    margin-bottom: 0.75rem;
    display: block;
}

.contact-map-placeholder strong {
    display: block;
    font-family: var(--font-primary);
    margin-bottom: 0.4rem;
}

.contact-map-placeholder p {
    font-family: var(--font-secondary);
    font-size: 0.88rem;
    opacity: 0.75;
}

.contact-form-wrap,
.contact-info,
.contact-map {
    background: var(--color-surface);
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(18, 47, 107, 0.06);
}

.contact-form-wrap {
    margin-bottom: 2.5rem;
}

.hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.contact-form__success {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    background: rgba(30, 140, 69, 0.1);
    border: 1px solid var(--color-secondary);
    border-radius: 0.6rem;
    padding: 0.85rem 1rem;
    font-family: var(--font-secondary);
    font-size: 0.9rem;
    color: var(--color-text-primary);
    margin-bottom: 1.25rem;
}

.contact-form__success i {
    color: var(--color-secondary);
    margin-top: 0.15rem;
}

.contact-form__error {
    font-family: var(--font-secondary);
    font-weight: 400;
    font-size: 0.8rem;
    color: #C0392B;
}

.contact-form__disclaimer {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    background: var(--color-bg-secondary);
    border-radius: 0.6rem;
    padding: 0.85rem 1rem;
    font-family: var(--font-secondary);
    font-size: 0.85rem;
    color: var(--color-text-primary);
    opacity: 0.9;
    margin-bottom: 1.5rem;
}

.contact-form__disclaimer i {
    color: var(--color-primary);
    margin-top: 0.15rem;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.contact-form__type {
    border: none;
    padding: 0;
    margin: 0;
}

.contact-form__type legend {
    font-family: var(--font-secondary);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--color-text-primary);
    margin-bottom: 0.6rem;
    padding: 0;
}

.contact-form__type-options {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.contact-form__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-secondary);
    font-size: 0.9rem;
    color: var(--color-text-primary);
    cursor: pointer;
}

.contact-form__toggle input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.contact-form__toggle-track {
    flex-shrink: 0;
    width: 2.4rem;
    height: 1.3rem;
    border-radius: 999px;
    background: var(--color-border);
    padding: 0.15rem;
    transition: background-color 0.2s ease;
}

.contact-form__toggle-thumb {
    display: block;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: var(--color-surface);
    transition: transform 0.2s ease;
}

.contact-form__toggle input:checked + .contact-form__toggle-track {
    background: var(--color-primary);
}

.contact-form__toggle input:checked + .contact-form__toggle-track .contact-form__toggle-thumb {
    transform: translateX(1.1rem);
}

.contact-form__toggle input:focus-visible + .contact-form__toggle-track {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.contact-form__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

.contact-form label {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-family: var(--font-secondary);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.contact-form input,
.contact-form textarea {
    font-family: var(--font-secondary);
    font-weight: 400;
    font-size: 0.95rem;
    color: var(--color-text-primary);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    padding: 0.7rem 0.9rem;
}

.contact-form textarea {
    resize: vertical;
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--color-primary);
}

.contact-form input:user-invalid,
.contact-form textarea:user-invalid,
.contact-form input.is-invalid,
.contact-form textarea.is-invalid {
    border-color: #C0392B;
}

.contact-form button {
    align-self: flex-start;
}

@media (min-width: 640px) {
    .contact-form__row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    .contact-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ---------- PAGE PRODUIT — détail (hero + fonctionnalités + bénéfices + cas d'usage) ---------- */
.detail-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    /* Toujours sombre, comme le bandeau CTA final — pas de var() ici volontairement :
       un hero produit doit garder son impact visuel identique en mode clair et sombre. */
    background: linear-gradient(135deg, #163a7a 0%, #0b2148 100%);
    padding-block: 4.5rem 4rem;
}

.detail-hero__decor {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.08), transparent 45%),
        radial-gradient(circle at 88% 82%, rgba(95, 203, 132, 0.22), transparent 50%);
}

.detail-hero__inner {
    max-width: 720px;
    margin-inline: auto;
}

.detail-hero__breadcrumb {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-secondary);
    font-weight: 600;
    font-size: 0.8rem;
    margin-bottom: 2.25rem;
}

.detail-hero__breadcrumb a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color 0.15s ease;
}

.detail-hero__breadcrumb a:hover {
    color: #fff;
}

.detail-hero__breadcrumb span[aria-current] {
    color: #fff;
}

.detail-hero__breadcrumb i {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.4);
}

.detail-hero__icon {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-size: 2rem;
    color: #fff;
    margin-bottom: 1.5rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.detail-hero__icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.detail-hero__title {
    font-family: var(--font-primary);
    font-size: clamp(2.25rem, 4.5vw, 3.5rem);
    font-weight: 800;
    color: #fff;
    margin-bottom: 0.6rem;
}

.detail-hero__tagline {
    font-family: var(--font-primary);
    font-size: clamp(1.2rem, 2.3vw, 1.55rem);
    font-weight: 500;
    color: var(--color-accent);
    margin-bottom: 1.25rem;
}

.detail-hero__intro {
    font-family: var(--font-secondary);
    font-size: clamp(1.05rem, 1.3vw, 1.2rem);
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 2rem;
}

.btn--on-detail-hero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-secondary);
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.9rem 2rem;
    border-radius: 0.6rem;
    /* Fixe (pas var(--color-surface)) : le hero est toujours sombre, le bouton doit
       rester blanc avec un texte marine dans les deux thèmes pour rester lisible. */
    background: #fff;
    color: #122F6B;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn--on-detail-hero:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.22);
}

.detail-section-title {
    font-family: var(--font-primary);
    font-size: clamp(1.4rem, 2.5vw, 1.85rem);
    color: var(--color-primary);
    text-align: center;
    margin-bottom: 2.25rem;
}

.detail-section-title--left {
    text-align: left;
    margin-bottom: 1.5rem;
}

.detail-features {
    background: var(--color-bg-primary);
    padding-block: 4.5rem;
}

.detail-features__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

.detail-benefits {
    background: var(--color-bg-secondary);
    padding-block: 4.5rem;
}

.detail-benefits__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: center;
}

.detail-benefits__list ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1rem;
}

.detail-benefits__list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-family: var(--font-secondary);
    font-size: 1rem;
    color: var(--color-text-primary);
    line-height: 1.5;
}

.detail-benefits__list li i {
    color: var(--color-secondary);
    margin-top: 0.2rem;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.detail-benefits__quote {
    background: var(--color-primary);
    border-radius: 1.25rem;
    padding: 2.5rem 2rem;
    color: #fff;
    text-align: center;
}

.detail-benefits__quote i {
    font-size: 2rem;
    opacity: 0.35;
    margin-bottom: 1rem;
    display: block;
}

.detail-benefits__quote p {
    font-family: var(--font-primary);
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.4;
}

/* Bandeau "Bénéfice" — page détail d'un domaine d'intervention (sous-page d'un pôle) */
.domaine-benefit {
    background: var(--color-bg-secondary);
    padding-block: 3rem;
}

.domaine-benefit__inner {
    max-width: 760px;
    margin-inline: auto;
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    background: var(--color-surface);
    border-radius: 1rem;
    padding: 1.75rem 2rem;
    box-shadow: 0 4px 20px rgba(18, 47, 107, 0.06);
}

.domaine-benefit__inner > i {
    flex-shrink: 0;
    margin-top: 0.15rem;
    font-size: 1.75rem;
    color: var(--color-secondary);
}

.domaine-benefit__label {
    display: block;
    font-family: var(--font-secondary);
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-secondary);
    margin-bottom: 0.35rem;
}

.domaine-benefit__inner p {
    font-family: var(--font-primary);
    font-size: 1.1rem;
    color: var(--color-primary);
    line-height: 1.5;
    margin: 0;
}

.detail-usecases {
    background: var(--color-bg-primary);
    padding-block: 4rem;
}

.detail-usecases__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}

.detail-usecase-tag {
    font-family: var(--font-secondary);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--color-primary);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 0.6rem 1.25rem;
}

.detail-others {
    background: var(--color-bg-secondary);
    padding-block: 4rem;
}

@media (min-width: 768px) {
    .detail-features__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    .detail-benefits__layout {
        grid-template-columns: 1.2fr 1fr;
    }
}

@media (min-width: 1200px) {
    .detail-features__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Reste en 2 colonnes même à partir de 1200px (au lieu de 3) — utilisé sur la page
       "Conseil, Audit & accompagnement Stratégique" pour garder un bloc 2x2. */
    .detail-features__grid--two-col {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ---------- ESPACES VISUELS (placeholders images en attente des visuels définitifs) ---------- */
.media-placeholder {
    position: relative;
    overflow: hidden;
    aspect-ratio: var(--media-ratio, 4 / 3);
    width: 100%;
    border-radius: 1.25rem;
    border: 2px dashed var(--color-border);
    background: var(--color-bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.media-placeholder--has-image {
    border: none;
    background: none;
}

.media-placeholder__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.media-placeholder__inner {
    text-align: center;
    color: var(--color-text-primary);
    opacity: 0.55;
    padding: 1.5rem;
}

.media-placeholder__inner i {
    display: block;
    font-size: 2rem;
    color: var(--color-primary);
    margin-bottom: 0.6rem;
}

.media-placeholder__label {
    font-family: var(--font-secondary);
    font-weight: 600;
    font-size: 0.9rem;
}

.media-placeholder__context {
    font-family: var(--font-secondary);
    font-size: 0.8rem;
    margin-top: 0.25rem;
}

/* Hero détail (pôle service / produit) — bascule en 2 colonnes texte + visuel à partir de 992px */
.detail-hero__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
}

.detail-hero__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.detail-hero__media {
    max-width: 420px;
    margin-inline: auto;
    width: 100%;
}

.detail-hero__media .media-placeholder {
    border-color: rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.08);
}

.detail-hero__media .media-placeholder__inner i,
.detail-hero__media .media-placeholder__label {
    color: #fff;
}

.detail-hero__media .media-placeholder__context {
    color: rgba(255, 255, 255, 0.8);
}

@media (min-width: 992px) {
    .detail-hero__inner {
        max-width: 1200px;
        grid-template-columns: 1.1fr 0.9fr;
        align-items: center;
    }

    .detail-hero__content {
        align-items: flex-start;
        text-align: left;
    }

    .detail-hero__media {
        max-width: none;
    }
}

/* Variante "image en fond" (sous-pages de domaine, Nos services) — la photo occupe tout le
   cadre du hero et le dégradé marine devient un overlay par-dessus, au lieu de rester dans
   un encart séparé à côté du texte. Activée via :background-image sur <x-detail-hero>. */
.detail-hero--bg-image {
    background: none;
}

.detail-hero--overlay-blue .detail-hero__decor,
.detail-hero--overlay-green .detail-hero__decor {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.82) 100%);
}

.detail-hero--bg-image .detail-hero__media {
    position: absolute;
    inset: 0;
    z-index: -2;
    max-width: none;
    width: auto;
    height: auto;
    margin: 0;
}

.detail-hero--bg-image .detail-hero__media .media-placeholder,
.detail-hero--bg-image .detail-hero__media img {
    width: 100%;
    height: 100%;
}

.detail-hero--bg-image .detail-hero__media .media-placeholder {
    border: none;
    background: none;
}

.detail-hero--bg-image .detail-hero__inner {
    grid-template-columns: 1fr;
    max-width: 960px;
}

.detail-hero--bg-image .detail-hero__content {
    align-items: center;
    text-align: center;
}

/* Overlay plus transparent que sur les autres bandeaux sombres du site (CTA final...) :
   la photo doit rester visible, donc on renforce la lisibilité du texte avec une ombre
   plutôt qu'en assombrissant l'image. */
.detail-hero--bg-image .detail-hero__title,
.detail-hero--bg-image .detail-hero__tagline,
.detail-hero--bg-image .detail-hero__intro {
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

/* Bannière visuelle — pages sommaire (Nos services / Nos produits), cas sans photo (repli) */
.page-banner {
    max-width: 960px;
    margin-inline: auto;
    margin-bottom: 3rem;
}

/* En-tête des pages sommaire (Nos services / Nos produits) — quand une vraie photo est
   renseignée (site.services.banner_image / site.produits.banner_image), elle occupe tout le
   fond de l'en-tête et un overlay noir passe par-dessus pour que titre/texte restent lisibles,
   même traitement que sur les hero de détail (.detail-hero--bg-image). */
.page-hero--bg-image {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    padding-block: 4.5rem 3.5rem;
}

.page-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.82) 100%);
}

.page-hero__inner {
    position: relative;
}

.page-hero--bg-image .section-header__title,
.page-hero--bg-image .section-header__subtitle,
.page-hero--bg-image .services-intro p,
.page-hero--bg-image .produits-intro p {
    color: #fff;
    opacity: 1;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

/* Galerie — visuel de contexte entre les fonctionnalités et les bénéfices (pages détail) */
.detail-gallery {
    background: var(--color-bg-primary);
    padding-bottom: 1rem;
}

.detail-gallery .media-placeholder {
    max-width: 960px;
    margin-inline: auto;
}

/* ---------- ACCESSIBILITÉ ---------- */
.btn:focus-visible,
a:focus-visible {
    outline: 3px solid var(--color-secondary);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .btn { transition: none; }
    .btn:hover { transform: none; }
}

/* ---------- ESPACE CLIENTS — Connexion / Inscription (cadrage §6.2) ----------
   Réutilise volontairement les styles .contact-form-wrap/.contact-form (carte +
   champs) déjà définis plus haut, dans un conteneur centré et plus étroit. */
.auth-page {
    padding-block: 3rem 5rem;
}

.auth-page .container {
    max-width: 480px;
}

.auth-page .contact-form-wrap {
    text-align: left;
}

.auth-page__footer {
    margin-top: 1.5rem;
    text-align: center;
    font-family: var(--font-secondary);
    font-size: 0.9rem;
    color: var(--color-text-primary);
}

.auth-page__footer a {
    color: var(--color-primary);
    font-weight: 600;
}

.auth-page .contact-form button {
    align-self: stretch;
    text-align: center;
}

.auth-form__checkbox {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 0.5rem;
    font-weight: 400 !important;
}

.auth-form__checkbox input {
    width: auto;
}

.client-dashboard {
    padding-block: 3rem 5rem;
}

.client-dashboard .container {
    max-width: 640px;
    text-align: center;
}

.client-dashboard__coming-soon {
    background: var(--color-bg-secondary);
    border-radius: 1rem;
    padding: 2.5rem 2rem;
    margin-top: 2rem;
}

.client-dashboard__coming-soon i {
    font-size: 2rem;
    color: var(--color-primary);
    margin-bottom: 1rem;
}

/* ---------- RECHERCHE ---------- */
.search-page {
    padding-block: 2rem 5rem;
}

.search-page .container {
    max-width: 760px;
}

.search-page__hint {
    text-align: center;
    color: var(--color-text-primary);
    opacity: 0.75;
    font-family: var(--font-secondary);
}

.search-page__count {
    font-family: var(--font-secondary);
    font-size: 0.85rem;
    color: var(--color-text-primary);
    opacity: 0.7;
    margin-bottom: 1rem;
}

.search-results {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.search-results__item a {
    display: block;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    padding: 1.1rem 1.35rem;
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.search-results__item a:hover {
    border-color: var(--color-primary);
    box-shadow: 0 6px 20px rgba(18, 47, 107, 0.08);
}

.search-results__type {
    display: inline-block;
    font-family: var(--font-secondary);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-secondary);
    margin-bottom: 0.35rem;
}

.search-results__title {
    display: block;
    font-family: var(--font-primary);
    font-size: 1.05rem;
    color: var(--color-primary);
    margin-bottom: 0.3rem;
}

.search-results__excerpt {
    display: block;
    font-family: var(--font-secondary);
    font-size: 0.88rem;
    color: var(--color-text-primary);
    opacity: 0.75;
    line-height: 1.5;
}

/* ============================================================
   DÉFILEMENT SECTION PAR SECTION + NAVIGATION LATÉRALE (desktop)
   Page d'accueil uniquement — chaque bloc (.home-scroll-section) occupe
   exactement un écran (desktop ≥992px) : hauteur fixe = viewport - header,
   contenu centré et réduit (transform: scale, voir le script en bas de
   home.blade.php) quand il dépasse la hauteur disponible. Comme chaque
   section tient toujours dans un seul écran, le scroll-snap CSS natif
   suffit à empêcher tout état "à cheval" entre deux sections, quel que
   soit le moyen de défilement (molette, ascenseur, tactile, clavier) —
   contrairement à une tentative précédente, purement JS, qui ne gérait
   que la molette et laissait l'ascenseur mélanger deux sections à l'écran.
   scroll-margin-top reste nécessaire pour que scrollIntoView() (clic sur
   un point de la nav latérale) aligne bien sous le header sticky.
   ============================================================ */
.home-scroll-section {
    scroll-margin-top: var(--header-height, 0px);
}

@media (min-width: 992px) {
    /* "mandatory" (plutôt que "proximity") force TOUJOURS le scroll à retomber sur
       un point de snap valide — au-delà du dernier (juste avant le CTA final/footer,
       volontairement hors snap, cf. plus bas), ça n'a plus nulle part où "retomber"
       et ça bloquait complètement le scroll, rendant le footer inatteignable.
       "proximity" garde l'effet d'aimant tant qu'on est près d'une section, sans
       jamais retenir le scroll de force au-delà de la dernière. */
    html {
        scroll-snap-type: y proximity;
    }

    .home-scroll-section {
        box-sizing: border-box;
        height: calc(100vh - var(--header-height, 0px));
        overflow: hidden;
        display: flex;
        align-items: stretch;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    /* stretch (plutôt que centrer) l'enfant direct sur toute la hauteur de la
       section : certaines sections (ex. CTA final) portent leur propre fond sur
       cet enfant — le centrer sans l'étirer laissait apparaître le fond de la
       page (transparent) au-dessus/en dessous quand le contenu était plus court
       que l'écran. On centre son propre contenu à l'intérieur à la place. */
    .home-scroll-section > * {
        width: 100%;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    /* Ses propres enfants (titre de section, grille de cartes, bandeau de logos,
       carrousel de témoignages...) ne doivent PAS pouvoir rétrécir : par défaut
       flex-shrink vaut 1, donc quand le contenu dépasse l'écran, ce flex column
       les écrasait silencieusement (ex. carte témoignage à hauteur fixe coupée,
       logos réduits à quelques pixels) au lieu de laisser tout déborder pour que
       le script de mise à l'échelle (transform: scale) le réduise proprement. */
    .home-scroll-section > * > * {
        flex-shrink: 0;
    }

    /* Le bandeau CTA final ne doit pas occuper un écran entier à lui seul : on
       veut qu'il s'affiche avec le footer juste en dessous, sans écran vide à
       combler avant d'y arriver. Il garde donc sa hauteur naturelle au lieu
       d'être forcé à 100vh. Il sort aussi du système de snap : comme c'est le
       dernier point de snap de la page et qu'il ne remplit plus un écran entier,
       "mandatory" retombait dessus après chaque tentative de scroll et bloquait
       complètement l'accès au footer juste en dessous. La nav latérale peut
       toujours y sauter (scrollIntoView en JS, indépendant du snap CSS). */
    #section-cta-final {
        height: auto;
        overflow: visible;
        scroll-snap-align: none;
        scroll-snap-stop: normal;
    }
}

.scroll-dots {
    display: none;
    position: fixed;
    top: 50%;
    right: 1.5rem;
    transform: translateY(-50%);
    z-index: 40;
    flex-direction: column;
    gap: 0.85rem;
}

@media (min-width: 992px) {
    .scroll-dots {
        display: flex;
    }
}

.scroll-dots__dot {
    position: relative;
    width: 0.65rem;
    height: 0.65rem;
    padding: 0;
    border-radius: 50%;
    border: 2px solid var(--color-primary);
    background: transparent;
    cursor: pointer;
    transition: background-color 0.25s ease, transform 0.25s ease;
}

.scroll-dots__dot:hover,
.scroll-dots__dot:focus-visible {
    transform: scale(1.2);
}

.scroll-dots__dot.is-active {
    background: var(--color-primary);
    transform: scale(1.15);
}

.scroll-dots__tooltip {
    position: absolute;
    top: 50%;
    right: calc(100% + 0.75rem);
    transform: translateY(-50%) translateX(4px);
    background: var(--color-primary);
    color: #fff;
    font-family: var(--font-secondary);
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    padding: 0.35rem 0.75rem;
    border-radius: 0.4rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.scroll-dots__dot:hover .scroll-dots__tooltip,
.scroll-dots__dot:focus-visible .scroll-dots__tooltip {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

.link-btn {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-family: var(--font-secondary);
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: underline;
    cursor: pointer;
}