/* =========================================================
   Hoplite Cybersécurité — feuille de style principale
   ========================================================= */

:root {
    --color-navy: #0F2436;
    --color-accent: #CA814D;
    /* Brun sombre chaud : prolonge la photo orangée de la page Services */
    --color-services-bg: #261A15;
    --color-white: #FFFFFF;
    --color-text: #666666;
    --color-heading: #333333;
    --font-heading: 'Cabin', Helvetica, Arial, sans-serif;
    --font-body: 'Cabin', Helvetica, Arial, sans-serif;
    --container-width: 1080px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-text);
    background: var(--color-white);
}

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

a {
    color: var(--color-accent);
    text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--color-heading);
    font-weight: 600;
    line-height: 1.2;
    margin: 0 0 16px;
}

h6 {
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 14px;
    color: var(--color-accent);
}

p {
    margin: 0 0 1em;
}

.container {
    width: 90%;
    max-width: var(--container-width);
    margin: 0 auto;
}

.btn {
    display: inline-block;
    padding: 0.6em 1.6em;
    border: 2px solid var(--color-accent);
    border-radius: 3px;
    color: var(--color-accent);
    font-weight: 600;
    transition: all 0.2s ease;
}

.btn:hover {
    background-color: var(--color-accent);
    color: var(--color-white);
}

/* ---------- Header ---------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 999;
}

.site-header-bar {
    background-color: var(--color-navy);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}

.site-header--boxed {
    background: var(--color-white);
    padding: 24px 24px 0;
}

.site-header--boxed .site-header-bar {
    border-radius: 12px;
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
}

/* Le logo est un PNG de 1081 px de large, affiché à 300 px : la mention
   « CYBERSÉCURITÉ » reste lisible, et la définition de la source (3,6 fois la
   taille d'affichage) garantit un rendu net sur les écrans haute densité.
   Le plafond en vw évite qu'il ne vienne toucher le bouton du menu sur les
   téléphones étroits, où 300 px ne laisseraient aucun espace entre les deux. */
.site-logo img {
    display: block;
    width: min(300px, 72vw);
    height: auto;
}

.site-nav {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

.nav-menu {
    list-style: none;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    gap: 22px;
}

.nav-menu > li {
    position: relative;
}

.nav-menu > li > a {
    display: block;
    padding: 31px 0;
    color: var(--color-white);
    font-size: 16px;
    white-space: nowrap;
}

/* Sur grand écran, le menu gagne en présence. */
@media (min-width: 981px) {
    .nav-menu {
        gap: 26px;
    }

    .nav-menu > li > a {
        font-size: 18px;
    }

    .nav-menu .sub-menu li a {
        font-size: 16px;
    }
}

.nav-menu > li.current > a,
.nav-menu > li > a:hover {
    color: var(--color-accent);
}

.nav-menu .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 220px;
    background: var(--color-navy);
    border-top: 3px solid var(--color-accent);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    list-style: none;
    margin: 0;
    padding: 12px 0;
    z-index: 10;
}

.nav-menu li.has-children:hover .sub-menu {
    display: block;
}

.nav-menu .sub-menu li a {
    display: block;
    padding: 8px 20px;
    color: var(--color-white);
    font-size: 14px;
}

.nav-menu .sub-menu li a:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--color-accent);
}

.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: 0;
    cursor: pointer;
    padding: 8px;
}

.mobile-menu-toggle span {
    width: 26px;
    height: 2px;
    background: var(--color-white);
}

.mobile-menu {
    display: none;
    background: var(--color-navy);
    border-top: 3px solid var(--color-accent);
}

.mobile-menu.is-open {
    display: block;
    /* Le header est collant : un menu plus haut que l'écran ne pourrait
       jamais être atteint en faisant défiler la page. Il défile donc
       lui-même, dans la hauteur restant sous le header (calculée en JS,
       avec une valeur de repli). */
    max-height: var(--mobile-menu-max, 75vh);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.mobile-menu ul {
    list-style: none;
    margin: 0;
    padding: 16px 5%;
}

.mobile-menu li a {
    display: block;
    padding: 10px 0;
    color: var(--color-white);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.mobile-menu ul ul {
    padding-left: 16px;
}

@media (max-width: 980px) {
    .site-nav {
        display: none;
    }

    .mobile-menu-toggle {
        display: flex;
    }
}

/* ---------- Hero ---------- */

.hero-frame {
    background: var(--color-white);
    padding: 40px 24px;
}

.hero {
    color: var(--color-white);
}

.hero-panel {
    position: relative;
    display: flex;
    align-items: center;
    padding: 8vw 4vw 8vw 7vw;
    min-height: 480px;
    border-radius: 12px;
    background-color: var(--color-navy);
    background-size: cover;
    background-position: center;
}

.hero-panel-inner {
    position: relative;
    z-index: 2;
    max-width: 600px;
}

.hero-panel h1 {
    color: var(--color-white);
    font-size: 40px;
    margin-bottom: 16px;
}

.hero-panel-text {
    font-weight: 300;
    font-size: 18px;
    margin-bottom: 30px;
    opacity: 0.9;
}

.hero-helmet {
    display: block;
    position: absolute;
    top: -40px;
    right: 0;
    height: calc(100% + 80px);
    width: auto;
    z-index: 1;
    pointer-events: none;
}

@media (max-width: 980px) {
    .hero-helmet {
        opacity: 0.35;
    }
}

@media (max-width: 767px) {
    .hero-frame {
        padding: 20px 12px;
    }

    .hero-panel {
        padding-left: 5vw;
    }

    .hero-panel h1 {
        font-size: 28px;
    }

    .hero-panel-text {
        font-size: 16px;
    }

    .hero-helmet {
        display: none;
    }
}

/* ---------- Strip ---------- */

.strip {
    background-color: var(--color-navy);
    padding: 20px 0;
}

.strip-text {
    color: var(--color-white);
    text-align: center;
    margin: 0;
}

/* ---------- Services ---------- */

.services {
    padding: 60px 0;
}

.services-intro {
    max-width: 640px;
    margin-bottom: 40px;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.service-card {
    display: block;
    background: var(--color-navy);
    color: var(--color-white);
    padding: 30px;
    border-radius: 4px;
    transition: transform 0.2s ease;
}

.service-card:hover {
    transform: translateY(-4px);
}

.service-card img {
    margin-bottom: 16px;
}

.service-card h4 {
    color: var(--color-white);
}

.service-card p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
}

.service-card .more {
    color: var(--color-accent);
    font-weight: 600;
    font-size: 14px;
}

@media (max-width: 980px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .services-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------- About split ---------- */

.about-split {
    padding: 60px 0;
    background: #F6F6F6;
    color: var(--color-text);
}

.about-split-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}

.about-map {
    display: flex;
    gap: 20px;
    align-items: center;
    margin-top: 30px;
    padding-top: 30px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.about-map img {
    max-width: 160px;
}

.about-map .accent {
    color: var(--color-accent);
}

.about-split--dark {
    background: var(--color-navy);
    color: var(--color-white);
}

.about-split--dark h6,
.about-split--dark h4 {
    color: var(--color-white);
}

.about-split--dark p {
    color: rgba(255, 255, 255, 0.9);
}

.about-split--dark .about-map {
    border-top-color: rgba(255, 255, 255, 0.15);
}

@media (max-width: 980px) {
    .about-split-inner {
        grid-template-columns: 1fr;
    }
}

/* ---------- Page hero (pages secondaires) ---------- */

.page-hero {
    background-color: var(--color-navy);
    background-size: cover;
    background-position: center;
    padding: 90px 0;
    text-align: center;
}

.page-hero h1 {
    color: var(--color-white);
    margin: 0;
}

/* ---------- Values (société) ---------- */

.values {
    padding: 60px 0;
    text-align: center;
}

.values-intro .eyebrow {
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    margin-bottom: 4px;
}

.values-intro .section-title {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 29px;
    color: var(--color-heading);
    margin-bottom: 40px;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    text-align: left;
}

.value-card {
    background: var(--color-navy);
    color: var(--color-white);
    padding: 30px;
    border-radius: 4px;
}

.value-card h4 {
    color: var(--color-white);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.value-card p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
}

@media (max-width: 980px) {
    .values-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------- Stats bar (société) ---------- */

.stats-bar {
    background: var(--color-navy);
    padding: 50px 0;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    text-align: center;
}

.stat-number {
    display: block;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 42px;
    color: var(--color-accent);
}

.stat-label {
    display: block;
    color: var(--color-white);
    font-size: 14px;
}

@media (max-width: 767px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
}

/* ---------- Logo showcase (société) ---------- */

.logo-showcase {
    padding: 60px 0;
    text-align: center;
}

.logo-showcase .eyebrow {
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    margin-bottom: 4px;
}

.logo-showcase .section-title {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 29px;
    color: var(--color-heading);
    margin-bottom: 30px;
}

.logo-showcase img {
    margin: 0 auto;
    max-width: 480px;
}

/* ---------- CTA ---------- */

.cta {
    background: var(--color-navy);
    padding: 60px 0;
    text-align: center;
}

.cta p {
    color: var(--color-white);
    font-size: 22px;
    margin-bottom: 24px;
}

.btn--light {
    border-color: var(--color-white);
    color: var(--color-white);
}

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

/* ---------- Mission ---------- */

.mission {
    padding: 60px 0;
    text-align: center;
}

.mission h2 {
    color: var(--color-navy);
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
}

.mission-text {
    max-width: 720px;
    margin: 0 auto 24px;
    color: var(--color-text);
}

/* ---------- Testimonials ---------- */

.testimonials {
    padding: 60px 0;
    background-color: var(--color-navy);
    background-size: cover;
    background-position: center;
    color: var(--color-white);
}

.testimonials h2 {
    color: var(--color-white);
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 30px;
}

.testimonial-card {
    margin: 0;
    background: rgba(255, 255, 255, 0.06);
    padding: 24px;
    border-radius: 4px;
}

.testimonial-card p {
    color: rgba(255, 255, 255, 0.9);
}

.testimonial-card cite {
    display: block;
    margin-top: 12px;
    font-style: normal;
    font-weight: 600;
    color: var(--color-accent);
}

@media (max-width: 980px) {
    .testimonials-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------- Footer ---------- */

.site-footer {
    background: var(--color-navy);
    color: rgba(255, 255, 255, 0.85);
    padding-top: 50px;
}

/* Cinq blocs placés par zones nommées : la structure HTML reste identique
   d'un palier à l'autre, seul le placement change. « Infos » est plus large
   que les autres car ses libellés sont les plus longs. */
.footer-grid {
    display: grid;
    grid-template-columns: auto 1fr 1.3fr 0.7fr auto;
    grid-template-areas: "logo menu infos social badge";
    gap: 30px;
    align-items: start;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-col--logo { grid-area: logo; }
.footer-col--menu { grid-area: menu; }
.footer-col--infos { grid-area: infos; }
.footer-col--social { grid-area: social; }
.footer-col--badge { grid-area: badge; }

/* Le badge RGPD est un élément de réassurance : il doit se voir. */
.footer-col--badge img {
    display: block;
    width: 160px;
    height: auto;
}

.footer-col h4 {
    color: var(--color-white);
    font-size: 16px;
}

.footer-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-col ul li {
    margin-bottom: 8px;
}

.footer-col a {
    color: rgba(255, 255, 255, 0.85);
}

.footer-col a:hover {
    color: var(--color-accent);
}

.footer-bottom {
    padding: 20px 0;
    text-align: center;
    font-size: 13px;
}

/* Tablette : logo et badge en bandeau haut, puis les listes sur deux colonnes.
   « Infos » et « Réseaux » s'empilent à droite pour équilibrer la hauteur du
   menu, qui compte huit entrées.
   Palier à 1100 px et non 980 : en dessous, les cinq colonnes deviennent trop
   étroites et « Politique de gestion des cookies » se coupe en deux lignes. */
@media (max-width: 1100px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "logo   badge"
            "menu   infos"
            "menu   social";
        gap: 24px 30px;
    }

    .footer-col--logo,
    .footer-col--badge {
        align-self: center;
    }

    .footer-col--badge {
        justify-self: end;
    }
}

/* Smartphone : une seule colonne centrée. Les libellés longs cessent de se
   couper sur deux lignes, et le badge n'est plus orphelin en bas de grille. */
@media (max-width: 600px) {
    .footer-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "logo"
            "menu"
            "infos"
            "social"
            "badge";
        gap: 32px;
        text-align: center;
        justify-items: center;
    }

    .footer-col--badge {
        justify-self: center;
    }

    .footer-col--badge img {
        width: 200px;
    }

    .footer-col h4 {
        margin-bottom: 12px;
    }

    .footer-col ul li {
        margin-bottom: 12px;
    }
}

/* ---------- Services page ---------- */

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

/* ---------- Quote hero (services) ---------- */

.quote-hero {
    position: relative;
    overflow: hidden;
    background-color: var(--color-services-bg);
    padding: 90px 0;
    text-align: center;
}

/* Calque image dédié : permet d'atténuer la photo sans toucher au texte. */
.quote-hero-bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-size: cover;
    background-position: center;
    filter: brightness(0.5) saturate(0.75);
}

/* Fondu vers le fond de page : la photo se prolonge dans le brun sombre. */
.quote-hero::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(
        to bottom,
        rgba(38, 26, 21, 0.25) 0%,
        rgba(38, 26, 21, 0.55) 55%,
        var(--color-services-bg) 100%
    );
}

.quote-hero .container {
    position: relative;
    z-index: 1;
}

.quote-hero h2 {
    color: var(--color-white);
    font-weight: 300;
    font-style: italic;
    font-size: 32px;
    max-width: 780px;
    margin: 0 auto 16px;
}

.quote-hero p {
    color: rgba(255, 255, 255, 0.75);
    margin: 0;
}

@media (max-width: 767px) {
    .quote-hero h2 {
        font-size: 22px;
    }
}

/* ---------- Sélecteur de services (services) ---------- */

/* Trois boîtes alignées sous la citation : chacune reprend le ton de sa
   fiche et l'affiche seule au clic, à la manière des onglets. */
.service-switcher {
    position: relative;
    z-index: 1;
    padding: 0 0 10px;
    scroll-margin-top: 150px;
}

.service-switcher-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.service-switcher-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px 24px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    color: rgba(255, 255, 255, 0.75);
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    opacity: 0.7;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22);
    transition: opacity 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.service-switcher-item img {
    flex-shrink: 0;
    width: 44px;
    height: auto;
}

.service-switcher-item:hover,
.service-switcher-item:focus-visible {
    opacity: 1;
    color: var(--color-white);
    transform: translateY(-2px);
}

.service-switcher-item.is-active {
    opacity: 1;
    color: #E8B583;
    border-color: rgba(235, 188, 141, 0.7);
}

.service-switcher-item--terracotta {
    background: linear-gradient(155deg, #402520 0%, #7B483B 60%, #2A1715 100%);
}

.service-switcher-item--bronze {
    background: linear-gradient(155deg, #4A3421 0%, #856340 60%, #33261A 100%);
}

.service-switcher-item--taupe {
    background: linear-gradient(155deg, #3C2D29 0%, #736059 60%, #2C2423 100%);
}

/* Le masquage n'intervient qu'une fois le script chargé. */
.has-service-switcher .services-page .service-detail {
    display: none;
}

.has-service-switcher .services-page .service-detail.is-active {
    display: block;
}

@media (max-width: 767px) {
    .service-switcher-list {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .service-switcher-item {
        padding: 14px 18px;
        font-size: 16px;
    }

    .service-switcher-item img {
        width: 34px;
    }
}

/* ---------- Service detail (services) ---------- */

.service-detail {
    padding: 40px 0;
}

/* Chaque service est un cadre dont le fond reprend le ton dominant de sa photo,
   afin que l'image se fonde dans le dégradé plutôt que d'y être posée. */
.service-detail .container {
    position: relative;
    overflow: hidden;
    padding: 50px 4vw;
    border-radius: 24px;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

/* Chaque cadre suit la construction de la page Formations : quatre poches
   elliptiques alternées — deux claires, deux sombres — disposées en diagonale
   pour faire onduler la lumière, par-dessus un dégradé dont le haut est
   sombre et la bande claire placée à mi-hauteur. La poche claire principale
   alterne gauche / droite d'un cadre à l'autre, comme les photos. */

/* Ton terracotta — hoplite-organiser.jpg (brun rougeâtre) */
.service-detail--terracotta .container {
    border: 1px solid rgba(159, 120, 91, 0.35);
    background:
        radial-gradient(46% 36% at 20% 46%, rgba(196, 126, 94, 0.34) 0%, rgba(196, 126, 94, 0.09) 55%, transparent 78%),
        radial-gradient(42% 34% at 76% 70%, rgba(196, 126, 94, 0.30) 0%, rgba(196, 126, 94, 0.08) 55%, transparent 78%),
        radial-gradient(72% 42% at 64% 2%, rgba(34, 18, 15, 0.58) 0%, transparent 68%),
        radial-gradient(58% 42% at 6% 98%, rgba(30, 16, 14, 0.55) 0%, transparent 66%),
        linear-gradient(155deg, #402520 0%, #7B483B 46%, #2A1715 100%);
}

/* Ton bronze — hoplite-audit.jpg (ocre doré) */
.service-detail--bronze .container {
    border: 1px solid rgba(148, 117, 75, 0.35);
    background:
        radial-gradient(46% 36% at 80% 44%, rgba(206, 158, 100, 0.32) 0%, rgba(206, 158, 100, 0.09) 55%, transparent 78%),
        radial-gradient(42% 34% at 24% 72%, rgba(206, 158, 100, 0.26) 0%, rgba(206, 158, 100, 0.07) 55%, transparent 78%),
        radial-gradient(72% 42% at 36% 2%, rgba(36, 25, 14, 0.48) 0%, transparent 68%),
        radial-gradient(58% 42% at 94% 98%, rgba(32, 22, 13, 0.44) 0%, transparent 66%),
        linear-gradient(155deg, #4A3421 0%, #856340 46%, #33261A 100%);
}

/* Ton taupe — hoplite-connaitre.jpg (brun grisé) */
.service-detail--taupe .container {
    border: 1px solid rgba(124, 105, 98, 0.35);
    background:
        radial-gradient(46% 36% at 20% 46%, rgba(176, 154, 142, 0.30) 0%, rgba(176, 154, 142, 0.08) 55%, transparent 78%),
        radial-gradient(42% 34% at 76% 70%, rgba(176, 154, 142, 0.28) 0%, rgba(176, 154, 142, 0.08) 55%, transparent 78%),
        radial-gradient(72% 42% at 64% 2%, rgba(30, 23, 22, 0.48) 0%, transparent 68%),
        radial-gradient(58% 42% at 6% 98%, rgba(26, 20, 20, 0.44) 0%, transparent 66%),
        linear-gradient(155deg, #3C2D29 0%, #736059 46%, #2C2423 100%);
}

.service-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    margin-bottom: 40px;
}

.service-detail-icon {
    width: 70px;
    margin-bottom: 16px;
}

/* La photo s'estompe sur son bord intérieur pour se fondre dans le dégradé. */
.service-detail-image img {
    border-radius: 14px;
    -webkit-mask-image: linear-gradient(to right, #000 74%, transparent 100%);
    mask-image: linear-gradient(to right, #000 74%, transparent 100%);
}

.service-detail-grid--reverse .service-detail-image img {
    -webkit-mask-image: linear-gradient(to left, #000 74%, transparent 100%);
    mask-image: linear-gradient(to left, #000 74%, transparent 100%);
}

.service-detail-content h2 {
    color: #E8B583;
}

.service-detail-content p {
    color: rgba(255, 255, 255, 0.85);
}

.service-detail-content strong {
    color: var(--color-white);
}

/* L'ocre de marque est trop sombre sur la bande claire de l'ondulation :
   même ocre éclairci que sur la page Formations. */
.service-detail .btn {
    border-color: #EBBC8D;
    color: #EBBC8D;
}

.service-detail .btn:hover {
    background-color: #EBBC8D;
    color: #2A1715;
}

/* Onglets sur fond sombre. La crête claire de l'ondulation passe à
   mi-hauteur, donc derrière ce bloc : il se pose en panneau légèrement
   assombri pour rester lisible et se détacher du fond. */
.service-detail .tabs {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(22, 12, 10, 0.5);
}

.service-detail .tabs-nav {
    background: rgba(14, 8, 6, 0.45);
}

.service-detail .tabs-nav-item {
    color: rgba(255, 255, 255, 0.65);
    border-right-color: rgba(255, 255, 255, 0.1);
}

.service-detail .tabs-nav-item.is-active {
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-white);
}

.service-detail .tabs-panels {
    background: transparent;
    color: rgba(255, 255, 255, 0.85);
}

.service-detail .tabs-panel strong {
    color: var(--color-white);
}

/* Contenu enrichi des onglets : démarche, livrables, bénéfices.
   Ces blocs n'existent que sur la page Services, sur fond sombre. */
.service-detail .tab-block {
    margin-top: 34px;
}

.service-detail .tab-block h3,
.service-detail .tab-card h3 {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #E8B583;
    margin: 0 0 18px;
}

/* Démarche : étapes numérotées */
.service-detail .tab-steps {
    list-style: none;
    counter-reset: step;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 16px;
}

.service-detail .tab-steps li {
    counter-increment: step;
    position: relative;
    padding-left: 48px;
}

.service-detail .tab-steps li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: 1px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid rgba(232, 181, 131, 0.5);
    background: rgba(232, 181, 131, 0.12);
    color: #E8B583;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.service-detail .tab-steps li strong {
    display: block;
    color: var(--color-white);
}

/* Livrables et bénéfices côte à côte */
.service-detail .tab-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 34px;
}

.service-detail .tab-card {
    padding: 26px 28px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.18);
}

.service-detail .tab-card ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
}

.service-detail .tab-card li {
    position: relative;
    padding-left: 26px;
    line-height: 1.5;
}

.service-detail .tab-card li::before {
    position: absolute;
    left: 0;
    top: 0;
    color: #E8B583;
    font-weight: 700;
}

.service-detail .tab-card--livrables li::before {
    content: '\25B8'; /* ▸ */
}

.service-detail .tab-card--benefices li::before {
    content: '\2713'; /* ✓ */
}

@media (max-width: 767px) {
    .service-detail .tab-columns {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 980px) {
    .service-detail-grid,
    .service-detail-grid--reverse {
        grid-template-columns: 1fr;
    }

    .service-detail-grid--reverse .service-detail-image {
        order: 2;
    }

    /* En une colonne, l'estompe latérale n'a plus de sens */
    .service-detail-image img,
    .service-detail-grid--reverse .service-detail-image img {
        -webkit-mask-image: none;
        mask-image: none;
    }
}

/* ---------- Tabs (services) ---------- */

.tabs {
    border: 1px solid #E2E2E2;
    border-radius: 4px;
    overflow: hidden;
}

.tabs-nav {
    display: flex;
    flex-wrap: wrap;
    background: #F4F4F4;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tabs-nav-item {
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text);
    background: none;
    border: 0;
    border-right: 1px solid #E2E2E2;
    cursor: pointer;
    padding: 14px 24px;
}

.tabs-nav-item.is-active {
    background: var(--color-white);
    color: var(--color-heading);
}

.tabs-panels {
    background: var(--color-white);
    padding: 30px;
}

.tabs-panel {
    display: none;
}

.tabs-panel.is-active {
    display: block;
}

.tabs-panel ul {
    margin: 0 0 1em;
    padding-left: 1.2em;
}

@media (max-width: 767px) {
    .tabs-nav {
        flex-direction: column;
    }

    .tabs-nav-item {
        border-right: 0;
        border-bottom: 1px solid #E2E2E2;
        text-align: left;
    }
}

/* ---------- Formations ---------- */

.formations-page {
    background-image: url('../images/backgrounds/groupe-de-masques-7.png');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.formation {
    padding: 60px 0;
}

/* Fond du cadre, de la couche haute vers la couche basse :
   les deux motifs H, puis quatre poches alternées — deux claires,
   deux sombres — disposées en diagonale pour faire onduler la lumière,
   puis le dégradé de base dont le haut est volontairement sombre et
   la bande claire placée à mi-hauteur.
   Les quatre listes background-* comptent donc 7 valeurs, même ordre. */
.formation .container {
    position: relative;
    overflow: hidden;
    padding: 50px 4vw;
    border: 1px solid rgba(202, 129, 77, 0.3);
    border-radius: 24px;
    background-image:
        url('../images/backgrounds/Motif_H_coin.png'),
        url('../images/backgrounds/Motif_H.png'),
        radial-gradient(46% 36% at 20% 46%, rgba(80, 168, 212, 0.30) 0%, rgba(80, 168, 212, 0.08) 55%, transparent 78%),
        radial-gradient(42% 34% at 76% 70%, rgba(66, 148, 192, 0.24) 0%, rgba(66, 148, 192, 0.06) 55%, transparent 78%),
        radial-gradient(72% 42% at 64% 2%, rgba(7, 32, 50, 0.60) 0%, transparent 68%),
        radial-gradient(58% 42% at 6% 98%, rgba(6, 26, 42, 0.55) 0%, transparent 66%),
        linear-gradient(155deg, #133243 0%, #1E4E6D 46%, #0B2030 100%);
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
    background-position: top left, top right, 0 0, 0 0, 0 0, 0 0, 0 0;
    background-size: 150px auto, 228px auto, cover, cover, cover, cover, cover;
    background-origin: border-box, border-box, padding-box, padding-box, padding-box, padding-box, padding-box;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.45), 0 0 60px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Second cadre : mêmes teintes, ondulation inversée et un cran plus
   profonde, pour que les deux blocs se répondent sans se ressembler. */
.formation--alt .container {
    background-image:
        url('../images/backgrounds/Motif_H_coin.png'),
        url('../images/backgrounds/Motif_H.png'),
        radial-gradient(46% 36% at 80% 44%, rgba(70, 152, 196, 0.27) 0%, rgba(70, 152, 196, 0.07) 55%, transparent 78%),
        radial-gradient(42% 34% at 24% 72%, rgba(58, 134, 176, 0.22) 0%, rgba(58, 134, 176, 0.06) 55%, transparent 78%),
        radial-gradient(72% 42% at 36% 2%, rgba(5, 26, 42, 0.62) 0%, transparent 68%),
        radial-gradient(58% 42% at 94% 98%, rgba(4, 22, 36, 0.58) 0%, transparent 66%),
        linear-gradient(155deg, #0F2B3A 0%, #1A4560 46%, #081926 100%);
}

/* L'ocre de marque passait déjà juste sous le seuil de lisibilité sur
   l'ancien fond ; le dégradé plus clair l'affadit nettement. Ces libellés
   reprennent l'ocre éclairci déjà utilisé sur la page Services. */
.formations-page h6,
.formations-page .formation-meta-item h4,
.formations-page .program-module-title {
    color: #EBBC8D;
}

.formation .btn {
    border-color: #EBBC8D;
    color: #EBBC8D;
}

.formation .btn:hover {
    background-color: #EBBC8D;
    color: #0A1D2C;
}

.formation-intro h2,
.formation-intro h4 {
    color: var(--color-white);
}

.formation-meta-item p,
.program-item p {
    color: rgba(255, 255, 255, 0.75);
}

.program-item h4 {
    color: var(--color-white);
}

/* La crête claire de l'ondulation passe à mi-hauteur, donc derrière le
   bloc programme : celui-ci se pose en panneau légèrement assombri pour
   rester lisible et se détacher du fond. */
.formation .tabs {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(5, 21, 34, 0.55);
}

.formation .tabs-nav {
    background: rgba(3, 14, 24, 0.5);
}

.formation .tabs-nav-item {
    color: rgba(255, 255, 255, 0.65);
    border-right-color: rgba(255, 255, 255, 0.1);
}

.formation .tabs-nav-item.is-active {
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-white);
}

.formation .tabs-panels {
    background: transparent;
}

@media (max-width: 767px) {
    .formation .container {
        background-size: 100px auto, 152px auto, cover, cover, cover, cover, cover;
    }
}

.formation-intro {
    max-width: 780px;
    margin: 0 auto 40px;
    text-align: center;
}

.formation-icon {
    width: 70px;
    margin: 0 auto 16px;
}

.formation-tagline {
    font-size: 18px;
    color: var(--color-white);
    margin-bottom: 30px;
}

.formation-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    text-align: left;
    margin-bottom: 24px;
}

.formation-meta-item h4 {
    color: var(--color-accent);
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.formation-meta-item p {
    margin: 0;
}

.formation-duration {
    font-weight: 600;
    color: var(--color-white);
    margin: 0;
}

.program-module-title {
    color: var(--color-accent);
    font-size: 20px;
    margin-bottom: 20px;
}

.program-item {
    margin-bottom: 20px;
}

.program-item:last-child {
    margin-bottom: 0;
}

.program-item h4 {
    font-size: 16px;
    margin-bottom: 4px;
}

.program-item p {
    margin: 0;
}

.formation-cta {
    text-align: center;
    margin-top: 40px;
}

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

/* ---------- Sélecteur de formations (formations) ---------- */

/* Deux boîtes sous le bandeau, sur le principe de la page Services : un
   clic affiche la formation seule. Registre académique : encadré
   rectangulaire à angles vifs, filet intérieur façon diplôme, liseré ocre
   en tête et ombre portée franche. */
.formation-switcher {
    position: relative;
    z-index: 1;
    padding: 50px 0 0;
    scroll-margin-top: 150px;
}

.formation-switcher-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
}

.formation-switcher-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 28px 30px;
    border: 1px solid rgba(235, 188, 141, 0.28);
    border-top: 3px solid rgba(235, 188, 141, 0.45);
    border-radius: 0;
    background: linear-gradient(155deg, #133243 0%, #1A4560 55%, #0B2030 100%);
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    opacity: 0.72;
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.5), 0 4px 10px rgba(0, 0, 0, 0.3);
    transition: opacity 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

/* Filet intérieur, en retrait du bord. */
.formation-switcher-item::after {
    content: '';
    position: absolute;
    inset: 7px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    pointer-events: none;
}

.formation-switcher-item img {
    flex-shrink: 0;
    width: 52px;
    height: auto;
}

.formation-switcher-text {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.formation-switcher-kicker {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #EBBC8D;
}

.formation-switcher-title {
    font-family: var(--font-heading);
    font-size: 21px;
    font-weight: 600;
    line-height: 1.25;
}

.formation-switcher-item:hover,
.formation-switcher-item:focus-visible {
    opacity: 1;
    color: var(--color-white);
    transform: translateY(-2px);
}

.formation-switcher-item.is-active {
    opacity: 1;
    color: var(--color-white);
    border-color: rgba(235, 188, 141, 0.7);
    border-top-color: #EBBC8D;
}

/* Le masquage n'intervient qu'une fois le script chargé. */
.has-service-switcher .formations-page .formation {
    display: none;
}

.has-service-switcher .formations-page .formation.is-active {
    display: block;
}

/* La fiche affichée reprend le même encadré : angles vifs et ombre. */
.formation .container,
.formation .tabs {
    border-radius: 0;
}

.formation .container {
    border-top: 3px solid #EBBC8D;
}

@media (max-width: 767px) {
    .formation-switcher {
        padding-top: 30px;
    }

    .formation-switcher-list {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .formation-switcher-item {
        padding: 18px 20px;
        gap: 14px;
    }

    .formation-switcher-item img {
        width: 38px;
    }

    .formation-switcher-title {
        font-size: 17px;
    }
}

/* ---------- Contact ---------- */

.contact {
    padding: 60px 0;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-field {
    margin-bottom: 20px;
}

.form-field label {
    display: block;
    font-weight: 600;
    color: var(--color-heading);
    margin-bottom: 6px;
    font-size: 14px;
}

.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid #ddd;
    border-radius: 3px;
    background: #F6F6F6;
    color: var(--color-heading);
    font-family: var(--font-body);
    font-size: 15px;
}

.form-field textarea {
    min-height: 150px;
    resize: vertical;
}

.form-field select {
    appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8"><path fill="%23CA814D" d="M1 1l5 5 5-5"/></svg>');
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    background-color: var(--color-white);
}

.h-captcha {
    margin-bottom: 20px;
}

.form-disclaimer {
    font-size: 13px;
    color: #999;
}

.form-message {
    padding: 14px 18px;
    border-radius: 3px;
    margin: 0 0 20px;
    list-style: none;
}

.form-message--success {
    background: rgba(41, 196, 169, 0.12);
    color: #1c7a68;
}

.form-message--error {
    background: rgba(207, 46, 46, 0.08);
    color: #cf2e2e;
    padding-left: 34px;
}

@media (max-width: 767px) {
    .contact-grid,
    .form-row {
        grid-template-columns: 1fr;
    }
}

/* ---------- Contenu légal (mentions légales, etc.) ---------- */

.legal-content {
    padding: 60px 0 80px;
}

.legal-content .container {
    max-width: 780px;
}

.legal-content h3 {
    margin-top: 40px;
    font-size: 20px;
}

.legal-content h3:first-of-type {
    margin-top: 0;
}

.legal-content ul {
    margin: 0 0 1em;
    padding-left: 1.25em;
}

.legal-content li {
    margin-bottom: 6px;
}

.legal-content .table-scroll {
    overflow-x: auto;
    margin: 0 0 1.5em;
}

.legal-content table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    font-size: 14px;
}

.legal-content th,
.legal-content td {
    border: 1px solid #e2e2e2;
    padding: 10px 14px;
    text-align: left;
    vertical-align: top;
}

.legal-content th {
    background: var(--color-navy);
    color: var(--color-white);
    font-weight: 600;
}

/* ---------- Placeholder pages (404) ---------- */

.et_pb_section--placeholder {
    padding: 80px 0;
}

/* ---------- Section intro (generic, homepage) ---------- */

.eyebrow {
    display: block;
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    margin-bottom: 8px;
}

.section-intro {
    max-width: 720px;
    margin: 0 auto 40px;
    text-align: center;
}

.section-lead {
    color: var(--color-text);
    margin: 0;
}

/* ---------- Enjeux ---------- */

.enjeux {
    padding: 60px 0;
    text-align: center;
}

.enjeux-blocks {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin: 0 0 40px;
    text-align: left;
}

.enjeux-block {
    padding: 24px;
    border: 1px solid #E2E2E2;
    border-top: 3px solid var(--color-accent);
    border-radius: 4px;
    font-weight: 600;
    color: var(--color-heading);
    background: #FAFAFA;
}

.enjeux-challenge {
    max-width: 640px;
    margin: 0 auto 30px;
    text-align: left;
}

.enjeux-challenge-intro {
    font-weight: 600;
    color: var(--color-heading);
    margin-bottom: 16px;
}

.enjeux-questions {
    margin: 0;
    padding-left: 1.2em;
}

.enjeux-questions li {
    margin-bottom: 8px;
    color: var(--color-text);
}

.enjeux-closing {
    max-width: 720px;
    margin: 0 auto;
    font-size: 20px;
    font-weight: 600;
    color: var(--color-navy);
}

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

/* ---------- Pour qui ---------- */

.pour-qui {
    padding: 60px 0;
}

.pour-qui > .container > .eyebrow {
    text-align: center;
    margin-bottom: 24px;
}

/* ---------- Expertises ---------- */

.expertises {
    padding: 60px 0;
    background: #F6F6F6;
}

.expertise-groups {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.expertise-group {
    background: var(--color-white);
    border: 1px solid rgba(202, 129, 77, 0.35);
    border-radius: 12px;
    padding: 30px;
}

.expertise-group-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.expertise-group-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-accent);
    color: var(--color-white);
    font-weight: 700;
    font-family: var(--font-heading);
    flex-shrink: 0;
}

.expertise-group-header h3 {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 18px;
}

.expertise-group-tagline {
    font-size: 14px;
    color: var(--color-text);
    margin-bottom: 20px;
}

.expertise-items {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.expertise-item {
    display: block;
    padding: 16px;
    border-radius: 4px;
    background: #F9F6F3;
    transition: transform 0.2s ease, background 0.2s ease;
}

.expertise-item:hover {
    transform: translateY(-2px);
    background: #F3ECE4;
}

.expertise-item h4 {
    margin-bottom: 6px;
    color: var(--color-heading);
}

.expertise-item p {
    font-size: 14px;
    color: var(--color-text);
    margin-bottom: 8px;
}

.expertise-item .more {
    color: var(--color-accent);
    font-weight: 600;
    font-size: 13px;
}

@media (max-width: 980px) {
    .expertise-groups {
        grid-template-columns: 1fr;
    }
}

/* ---------- Why (pourquoi Hoplite) ---------- */

.why {
    padding: 60px 0;
}

.why-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 24px;
}

.why-card {
    padding: 30px;
    border: 1px solid rgba(202, 129, 77, 0.35);
    border-radius: 12px;
    background: linear-gradient(155deg, #FFFFFF 0%, #F5F1EB 100%);
}

.why-card-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-navy);
    color: var(--color-accent);
    font-family: var(--font-heading);
    font-weight: 700;
    margin-bottom: 16px;
}

.why-card h4 {
    margin-bottom: 8px;
}

.why-card p {
    font-size: 14px;
    color: var(--color-text);
    margin: 0;
}

/* ---------- Méthode ---------- */

.methode {
    padding: 60px 0;
    background: var(--color-navy);
    color: var(--color-white);
}

.methode h2 {
    color: var(--color-white);
}

.method-steps {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
}

.method-step {
    text-align: center;
}

.method-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid var(--color-accent);
    color: var(--color-accent);
    font-family: var(--font-heading);
    font-weight: 700;
    margin-bottom: 16px;
}

.method-step h4 {
    color: var(--color-white);
    margin-bottom: 8px;
}

.method-step p {
    color: rgba(255, 255, 255, 0.75);
    font-size: 14px;
    margin: 0;
}

@media (max-width: 980px) {
    .method-steps {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .method-steps {
        grid-template-columns: 1fr;
    }
}

/* ---------- Transformation ---------- */

.transformation {
    padding: 60px 0;
    text-align: center;
}

.transformation h2 {
    color: var(--color-navy);
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
}

.transformation-text {
    max-width: 720px;
    margin: 0 auto;
    color: var(--color-text);
}

/* ---------- Blog ---------- */

.blog-page {
    position: relative;
    overflow: hidden;
    background-color: #0A1826;
    /* Papier millimétré : trame scientifique discrète */
    background-image:
        linear-gradient(rgba(202, 129, 77, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(202, 129, 77, 0.055) 1px, transparent 1px),
        linear-gradient(rgba(202, 129, 77, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(202, 129, 77, 0.03) 1px, transparent 1px);
    background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
}

/* Décor : atomes et formules, sans interaction */
.blog-decor {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
    overflow: hidden;
}

.blog-atom {
    position: absolute;
    opacity: 0.12;
}

.blog-atom--1 {
    top: 40px;
    right: -60px;
    width: 320px;
    transform: rotate(18deg);
}

.blog-atom--2 {
    top: 46%;
    left: -90px;
    width: 260px;
    transform: rotate(-24deg);
}

.blog-atom--3 {
    bottom: 60px;
    right: 8%;
    width: 200px;
    transform: rotate(40deg);
}

.blog-formula {
    position: absolute;
    color: var(--color-accent);
    font-family: 'Cambria Math', Cambria, Georgia, serif;
    font-style: italic;
    white-space: nowrap;
    opacity: 0.22;
    user-select: none;
}

.blog-formula sup {
    font-size: 0.65em;
}

.blog-formula--1  { top: 120px;  left: 4%;    font-size: 26px; transform: rotate(-6deg); }
.blog-formula--2  { top: 210px;  right: 6%;   font-size: 30px; transform: rotate(5deg); }
.blog-formula--3  { top: 34%;    left: 8%;    font-size: 22px; transform: rotate(3deg); }
.blog-formula--4  { top: 44%;    right: 10%;  font-size: 25px; transform: rotate(-4deg); }
.blog-formula--5  { top: 56%;    left: 5%;    font-size: 28px; transform: rotate(7deg); }
.blog-formula--6  { top: 66%;    right: 5%;   font-size: 23px; transform: rotate(-3deg); }
.blog-formula--7  { top: 78%;    left: 9%;    font-size: 24px; transform: rotate(4deg); }
.blog-formula--8  { bottom: 14%; right: 12%;  font-size: 21px; transform: rotate(-5deg); }
.blog-formula--9  { bottom: 7%;  left: 6%;    font-size: 22px; transform: rotate(2deg); }
.blog-formula--10 { top: 26%;    right: 16%;  font-size: 20px; transform: rotate(-8deg); }

/* Sous 1200px les formules latérales passeraient sous le contenu */
@media (max-width: 1200px) {
    .blog-formula {
        display: none;
    }

    .blog-atom {
        opacity: 0.08;
    }
}

/* Hero */

.blog-hero {
    position: relative;
    z-index: 1;
    padding: 70px 0 40px;
    text-align: center;
}

.blog-hero h1 {
    color: var(--color-white);
    font-size: 40px;
    max-width: 760px;
    margin: 0 auto 12px;
}

.blog-hero-sub {
    color: rgba(255, 255, 255, 0.7);
    font-size: 18px;
    margin-bottom: 20px;
}

.blog-hero-keywords {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 0;
}

.blog-hero-keywords span {
    padding: 6px 16px;
    border: 1px solid rgba(202, 129, 77, 0.5);
    border-radius: 999px;
    color: var(--color-accent);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

@media (max-width: 767px) {
    .blog-hero h1 {
        font-size: 28px;
    }
}

/* Barre d'outils : recherche et modes d'affichage */

.blog-main {
    position: relative;
    z-index: 1;
    padding: 20px 0 70px;
}

.blog-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 40px;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
}

.blog-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    flex: 1 1 420px;
}

.blog-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.blog-field--search {
    flex: 1 1 220px;
}

.blog-field label {
    color: var(--color-accent);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.blog-field input,
.blog-field select {
    padding: 11px 14px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 4px;
    background: rgba(10, 24, 38, 0.7);
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: 15px;
}

.blog-field select {
    appearance: none;
    padding-right: 38px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8"><path fill="none" stroke="%23CA814D" stroke-width="1.6" d="M1 1l5 5 5-5"/></svg>');
    background-repeat: no-repeat;
    background-position: right 14px center;
}

.blog-field input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.blog-field input:focus,
.blog-field select:focus {
    outline: none;
    border-color: var(--color-accent);
}

.blog-views {
    display: flex;
    gap: 8px;
}

.blog-view-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 4px;
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.blog-view-btn:hover {
    border-color: var(--color-accent);
    color: var(--color-white);
}

.blog-view-btn.is-active {
    border-color: var(--color-accent);
    background: rgba(202, 129, 77, 0.15);
    color: var(--color-white);
}

/* Pictogrammes des deux modes, dessinés en CSS */
.blog-view-icon {
    display: grid;
    gap: 2px;
    width: 14px;
}

.blog-view-icon i {
    display: block;
    background: currentColor;
}

.blog-view-icon--mosaic {
    grid-template-columns: 1fr 1fr;
}

.blog-view-icon--mosaic i {
    height: 6px;
}

.blog-view-icon--feed i {
    height: 3px;
}

/* Liste des articles */

.blog-list--mosaic {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 30px;
    align-items: start;
}

.blog-list--feed {
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.blog-card {
    overflow: hidden;
    border: 1px solid rgba(202, 129, 77, 0.25);
    border-radius: 14px;
    background:
        radial-gradient(120% 80% at 12% 0%, rgba(202, 129, 77, 0.12) 0%, transparent 60%),
        linear-gradient(160deg, #14293C 0%, #0E1F2E 60%, #0A1826 100%);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

/* Spécificité renforcée : doit primer sur le « display: grid » du mode lecture */
.blog-list .blog-card[hidden] {
    display: none;
}

.blog-card-media img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    object-position: center top;
}

.blog-card-body {
    padding: 26px;
}

.blog-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 13px;
}

.blog-card-sep {
    color: var(--color-accent);
}

.blog-card-body h2 {
    color: var(--color-white);
    font-size: 24px;
    margin-bottom: 12px;
}

.blog-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.blog-card-tags span {
    padding: 3px 10px;
    border-radius: 3px;
    background: rgba(202, 129, 77, 0.14);
    color: var(--color-accent);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.blog-card-excerpt,
.blog-card-content p {
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 1em;
}

.blog-card-content p:last-child {
    margin-bottom: 0;
}

/* Mosaïque : extrait seul, contenu complet masqué */
.blog-list--mosaic .blog-card-content {
    display: none;
}

/* Lecture : article intégral, plus large, extrait masqué */
.blog-list--feed .blog-card-excerpt,
.blog-list--feed .blog-card-more {
    display: none;
}

.blog-list--feed .blog-card {
    display: grid;
    grid-template-columns: 340px 1fr;
    align-items: stretch;
}

.blog-list--feed .blog-card-media img {
    height: 100%;
    min-height: 300px;
}

.blog-list--feed .blog-card-body {
    padding: 34px;
}

.blog-list--feed .blog-card-body h2 {
    font-size: 28px;
}

@media (max-width: 860px) {
    .blog-list--feed .blog-card {
        grid-template-columns: 1fr;
    }

    .blog-list--feed .blog-card-media img {
        height: 240px;
        min-height: 0;
    }
}

.blog-empty {
    padding: 40px 0;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
}

/* =========================================================
   Page À propos — habillage sombre
   Deux temps : « À propos » (vision, valeurs, parcours) puis
   « La société », séparés par une rupture visuelle marquée.
   ========================================================= */

.about-page {
    --ap-bg: #0B1A24;
    --ap-bg-soft: #0F2231;
    --ap-ink: rgba(255, 255, 255, 0.94);
    --ap-ink-soft: rgba(255, 255, 255, 0.68);
    --ap-line: rgba(255, 255, 255, 0.10);
    --ap-card: rgba(255, 255, 255, 0.035);
    --ap-accent: #E2A66C;

    background: var(--ap-bg);
    color: var(--ap-ink-soft);
}

.about-page h1,
.about-page h2,
.about-page h3,
.about-page h4 {
    color: var(--ap-ink);
}

.about-page p {
    color: var(--ap-ink-soft);
}

.about-page .eyebrow {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 2.5px;
    line-height: 1.3;
    color: var(--ap-accent);
    margin-bottom: 18px;
}

.about-page section {
    padding: 84px 0;
}

.about-page .section-intro {
    max-width: 860px;
    margin-bottom: 56px;
}

.about-page .section-intro h2 {
    font-size: clamp(30px, 3.4vw, 44px);
    letter-spacing: -0.5px;
    line-height: 1.14;
}

.about-page .btn:not(.btn--light) {
    border-color: var(--ap-accent);
    color: var(--ap-accent);
    padding: 0.85em 2em;
    font-size: 17px;
    border-radius: 8px;
}

.about-page .btn:not(.btn--light):hover {
    background: var(--ap-accent);
    color: var(--ap-bg);
}

.about-page .btn--light {
    padding: 0.85em 2em;
    font-size: 17px;
    border-radius: 8px;
}

/* Le CTA garderait sinon le navy générique, étranger à cette palette. */
.about-page .cta {
    background:
        radial-gradient(80% 140% at 50% 0%, rgba(226, 166, 108, 0.14) 0%, transparent 62%),
        var(--ap-bg-soft);
    border-top: 1px solid var(--ap-line);
    padding: 96px 0;
}

.about-page .cta p {
    font-family: var(--font-heading);
    font-size: clamp(26px, 3vw, 40px);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.5px;
    color: var(--ap-ink);
    margin-bottom: 34px;
}

/* ---------- Hero : vision et micro-manifeste ---------- */

.about-hero {
    background:
        radial-gradient(70% 90% at 15% 10%, rgba(226, 166, 108, 0.13) 0%, transparent 62%),
        var(--ap-bg);
    border-bottom: 1px solid var(--ap-line);
    text-align: center;
    scroll-margin-top: 110px;
}

.about-hero h1 {
    font-size: clamp(34px, 4.6vw, 60px);
    line-height: 1.08;
    letter-spacing: -1.2px;
    font-weight: 700;
    max-width: 900px;
    margin: 0 auto 34px;
}

.about-manifeste {
    max-width: 780px;
    margin: 0 auto 40px;
    text-align: left;
}

.about-manifeste p {
    font-size: 18px;
    line-height: 1.75;
    margin-bottom: 1.2em;
}

/* Le dernier paragraphe du manifeste porte la chute : on l'accentue. */
.about-manifeste p:last-child {
    font-size: 20px;
    font-weight: 600;
    color: var(--ap-ink);
    padding-left: 22px;
    border-left: 2px solid var(--ap-accent);
    margin-bottom: 0;
}

/* ---------- Valeurs ---------- */

.about-values {
    background: var(--ap-bg-soft);
}

.about-values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.about-value {
    position: relative;
    overflow: hidden;
    padding: 32px 26px;
    border: 1px solid var(--ap-line);
    border-radius: 18px;
    background: var(--ap-card);
    transition: border-color 0.35s ease, background 0.35s ease;
}

.about-value::after {
    content: '';
    position: absolute;
    right: -25%;
    bottom: -35%;
    width: 72%;
    padding-top: 72%;
    border-radius: 50%;
    background: radial-gradient(circle, var(--card-glow) 0%, transparent 68%);
    pointer-events: none;
}

.about-value:nth-child(1) { --card-glow: rgba(226, 166, 108, 0.16); --card-border: rgba(226, 166, 108, 0.42); }
.about-value:nth-child(2) { --card-glow: rgba(195, 208, 132, 0.15); --card-border: rgba(195, 208, 132, 0.42); }
.about-value:nth-child(3) { --card-glow: rgba(228, 144, 122, 0.15); --card-border: rgba(228, 144, 122, 0.42); }

.about-value:hover {
    border-color: var(--card-border);
    background: rgba(255, 255, 255, 0.055);
}

.about-value img {
    position: relative;
    z-index: 2;
    width: 52px;
    margin-bottom: 18px;
}

.about-value h3 {
    position: relative;
    z-index: 2;
    font-size: 22px;
    margin-bottom: 14px;
}

.about-value-line {
    position: relative;
    z-index: 2;
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
}

/* ---------- Parcours du fondateur ---------- */

/* Placé dans « La société », entre l'implantation (#0A1620) et le logo
   (--ap-bg-soft) : le fond n'est qu'un cran plus clair que la carte, d'où le
   filet supérieur qui matérialise la séparation entre les deux sections. */
.about-founder {
    background: var(--ap-bg);
    border-top: 1px solid var(--ap-line);
}

.about-founder-grid {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 56px;
    align-items: start;
}

/* Médaillon : la photo est recadrée en rond, centrée sur le visage. */
.about-founder-portrait {
    position: relative;
    width: 340px;
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid rgba(226, 166, 108, 0.35);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), 0 0 0 12px rgba(226, 166, 108, 0.06);
}

.about-founder-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 59% 28%;
}

.about-founder-steps {
    display: grid;
    gap: 26px;
}

.about-founder-step {
    padding-left: 24px;
    border-left: 2px solid rgba(226, 166, 108, 0.35);
}

.about-founder-step h3 {
    font-size: 19px;
    margin-bottom: 8px;
    color: var(--ap-accent);
}

.about-founder-step p {
    font-size: 16px;
    line-height: 1.7;
    margin: 0;
}

/* ---------- Témoignages ---------- */

.about-testimonials {
    background: var(--ap-bg-soft);
}

.about-testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.about-testimonial {
    margin: 0;
    padding: 32px 28px;
    border: 1px solid var(--ap-line);
    border-radius: 18px;
    background: var(--ap-card);
}

.about-testimonial p {
    font-size: 18px;
    line-height: 1.65;
}

.about-testimonial cite {
    display: block;
    margin-top: 20px;
    font-style: normal;
    font-weight: 600;
    color: var(--ap-accent);
}

/* ---------- Rupture entre « À propos » et « La société » ---------- */

.about-break {
    position: relative;
    padding: 96px 0 20px;
    text-align: center;
    background:
        radial-gradient(60% 100% at 50% 100%, rgba(226, 166, 108, 0.12) 0%, transparent 68%),
        linear-gradient(to bottom, var(--ap-bg) 0%, #0A1620 100%);
    scroll-margin-top: 110px;
}

/* Filet vertical : marque la bascule d'une partie à l'autre. */
.about-break-line {
    display: block;
    width: 1px;
    height: 70px;
    margin: 0 auto 34px;
    background: linear-gradient(to bottom, transparent, var(--ap-accent));
}

.about-break h2 {
    font-size: clamp(32px, 4vw, 52px);
    letter-spacing: -1px;
    line-height: 1.1;
    margin: 0;
}

/* ---------- La société : blocs texte / image ---------- */

.company-split {
    background: #0A1620;
}

.company-split-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
}

.company-split-image img {
    border-radius: 18px;
    border: 1px solid var(--ap-line);
}

.company-split-content h3 {
    font-size: clamp(24px, 2.6vw, 32px);
    line-height: 1.2;
    margin-bottom: 20px;
}

.company-split-content p {
    font-size: 17px;
    line-height: 1.75;
}

/* ---------- Chiffres clés (mêmes que la page d'accueil) ---------- */

.company-stats {
    background: #0A1620;
    border-top: 1px solid var(--ap-line);
    border-bottom: 1px solid var(--ap-line);
    padding: 64px 0;
}

.company-stats .stats-grid {
    gap: 40px;
}

.company-stats .stat {
    position: relative;
}

.company-stats .stat + .stat::before {
    content: '';
    position: absolute;
    left: -20px;
    top: 12%;
    height: 76%;
    width: 1px;
    background: var(--ap-line);
}

.company-stats .stat-number {
    font-size: clamp(64px, 9vw, 112px);
    line-height: 0.92;
    letter-spacing: -3px;
    margin-bottom: 10px;
}

.company-stats .stat:nth-child(1) .stat-number { color: #E2A66C; }
.company-stats .stat:nth-child(2) .stat-number { color: #C3D084; }
.company-stats .stat:nth-child(3) .stat-number { color: #E4907A; }

.company-stats .stat-label {
    font-size: 15px;
    letter-spacing: 0.4px;
    color: var(--ap-ink-soft);
}

/* ---------- Implantation et carte ---------- */

.company-map {
    background: #0A1620;
}

.company-map-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
}

.company-map-content h3 {
    font-size: clamp(24px, 2.6vw, 34px);
    line-height: 1.2;
    margin-bottom: 20px;
}

.company-map-content p {
    font-size: 17px;
    line-height: 1.75;
}

.company-map-facts {
    list-style: none;
    margin: 28px 0 0;
    padding: 0;
    display: grid;
    gap: 12px;
}

.company-map-facts li {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    padding-top: 12px;
    border-top: 1px solid var(--ap-line);
    font-size: 16px;
    color: var(--ap-ink-soft);
}

.company-map-facts strong {
    min-width: 180px;
    color: var(--ap-accent);
    font-weight: 600;
}

.company-map-figure {
    display: flex;
    justify-content: center;
}

.france-map {
    width: 100%;
    max-width: 420px;
    height: auto;
    overflow: visible;
}

.france-map-land {
    fill: rgba(255, 255, 255, 0.07);
    stroke: rgba(255, 255, 255, 0.24);
    stroke-width: 2;
}

.france-map-halo {
    fill: rgba(226, 166, 108, 0.16);
}

.france-map-pin {
    fill: #E2A66C;
}

.france-map-label {
    fill: #E2A66C;
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

/* ---------- Notre logo ---------- */

.company-logo {
    background: var(--ap-bg-soft);
    border-top: 1px solid var(--ap-line);
    text-align: center;
}

.company-logo h3 {
    font-size: clamp(24px, 2.6vw, 34px);
    margin-bottom: 44px;
}

/* Le fondu est porté par le fichier lui-même : son fond gris ondulé s'éteint
   en alpha sur ses bords. Aucune planche ni halo CSS n'est donc nécessaire.
   La largeur intègre les marges de fondu du fichier (150 px de chaque côté
   sur 1566), d'où un max-width supérieur à la largeur utile du logo. */
.company-logo-plate {
    display: block;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}

.company-logo-plate img {
    display: block;
    width: 100%;
    height: auto;
}

/* ---------- Adaptations ---------- */

@media (max-width: 980px) {
    .about-page section {
        padding: 60px 0;
    }

    .about-values-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .about-founder-grid {
        grid-template-columns: 1fr;
        gap: 36px;
        justify-items: center;
    }

    .about-founder-steps {
        width: 100%;
    }

    .about-testimonials-grid {
        grid-template-columns: 1fr;
    }

    .company-split-inner,
    .company-map-inner {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    /* En une colonne, l'image repasse toujours sous le texte */
    .company-split--reverse .company-split-image {
        order: 2;
    }

    .about-break {
        padding-top: 64px;
    }
}

@media (max-width: 767px) {
    .about-page .eyebrow {
        font-size: 17px;
        letter-spacing: 2px;
    }

    .about-values-grid {
        grid-template-columns: 1fr;
    }

    .about-founder-portrait {
        width: 240px;
    }

    .about-manifeste p:last-child {
        font-size: 18px;
    }

    .company-stats .stats-grid {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    /* En colonne, le séparateur vertical n'a plus de sens */
    .company-stats .stat + .stat::before {
        display: none;
    }

    .company-stats .stat-number {
        font-size: 72px;
    }

    .company-map-facts strong {
        min-width: 0;
        width: 100%;
    }
}

/* =========================================================
   Homepage — habillage sombre
   Contenu et structure inchangés : tout se joue ici, dans un
   thème scopé sous .home. Chaque carte reçoit sa propre teinte
   via --card-accent / --card-glow, dans une gamme volontairement
   désaturée pour rester douce sur fond sombre.
   ========================================================= */

.home {
    --home-bg: #0B1A24;
    --home-bg-soft: #0F2231;
    --home-ink: rgba(255, 255, 255, 0.94);
    --home-ink-soft: rgba(255, 255, 255, 0.68);
    --home-line: rgba(255, 255, 255, 0.10);
    --home-card: rgba(255, 255, 255, 0.035);

    /* Palette d'accents : ocre de marque, puis variations douces */
    --accent-1: #E2A66C;
    --accent-2: #C3D084;
    --accent-3: #E4907A;
    --accent-4: #92B7CD;
    --accent-5: #D6B682;

    background: var(--home-bg);
    color: var(--home-ink-soft);
}

/* Le bandeau blanc qui encadre le header n'existe que sur l'accueil :
   il suit désormais le fond sombre de la page. */
.site-header--boxed {
    background: #0B1A24;
}

/* ---------- Typographie : plus grande, plus affirmée ---------- */

.home h2,
.home h3,
.home h4 {
    color: var(--home-ink);
}

.home p {
    color: var(--home-ink-soft);
}

/* Les intitulés de section (ENJEUX, POUR QUI ?, MISSION…) portent
   le repérage dans la page : ils passent de 13 à 20 px. */
.home .eyebrow {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 2.5px;
    line-height: 1.3;
    color: var(--accent-1);
    margin-bottom: 18px;
}

.home .section-intro {
    max-width: 860px;
    margin-bottom: 56px;
}

.home .section-intro h2,
.home .mission h2,
.home .transformation h2,
.home .testimonials h2 {
    font-size: clamp(30px, 3.4vw, 44px);
    letter-spacing: -0.5px;
    line-height: 1.14;
}

.home .section-lead {
    font-size: 18px;
    color: var(--home-ink-soft);
}

.home section {
    padding-top: 84px;
    padding-bottom: 84px;
}

/* ---------- Hero ---------- */

.home .hero-frame {
    background: var(--home-bg);
    padding: 0 24px 24px;
}

.home .hero-panel {
    border-radius: 20px;
    min-height: 560px;
    box-shadow: inset 0 0 0 1px var(--home-line);
}

.home .hero-panel-inner {
    max-width: 680px;
    z-index: 3;
}

.home .hero-panel h1 {
    font-size: clamp(38px, 5.2vw, 68px);
    line-height: 1.06;
    letter-spacing: -1.5px;
    font-weight: 700;
    margin-bottom: 24px;
}

.home .hero-panel-text {
    font-size: 20px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.78);
    opacity: 1;
}

.home .hero-helmet {
    z-index: 2;
}

/* ---------- Chiffres clés : le point d'accroche de la page ---------- */

.home .stats-bar {
    background: var(--home-bg);
    border-top: 1px solid var(--home-line);
    border-bottom: 1px solid var(--home-line);
    padding: 64px 0;
}

.home .stats-grid {
    gap: 40px;
}

.home .stat {
    position: relative;
}

.home .stat + .stat::before {
    content: '';
    position: absolute;
    left: -20px;
    top: 12%;
    height: 76%;
    width: 1px;
    background: var(--home-line);
}

.home .stat-number {
    font-size: clamp(64px, 9vw, 112px);
    line-height: 0.92;
    letter-spacing: -3px;
    margin-bottom: 10px;
    color: var(--card-accent, var(--accent-1));
}

.home .stat:nth-child(1) { --card-accent: var(--accent-1); }
.home .stat:nth-child(2) { --card-accent: var(--accent-2); }
.home .stat:nth-child(3) { --card-accent: var(--accent-3); }
.home .stat:nth-child(4) { --card-accent: var(--accent-4); }

.home .stat-label {
    font-size: 15px;
    letter-spacing: 0.4px;
    color: var(--home-ink-soft);
}

/* ---------- Cartes : socle commun ---------- */

/* Le halo diagonal reprend l'esprit des cartes de référence :
   une lueur discrète dans la teinte de la carte, en bas à droite. */
.home .enjeux-block,
.home .expertise-group,
.home .why-card,
.home .testimonial-card {
    position: relative;
    overflow: hidden;
    background: var(--home-card);
    border: 1px solid var(--home-line);
    border-radius: 18px;
    transition: border-color 0.35s ease, background 0.35s ease, transform 0.35s ease;
}

.home .enjeux-block::after,
.home .expertise-group::after,
.home .why-card::after,
.home .testimonial-card::after {
    content: '';
    position: absolute;
    right: -25%;
    bottom: -35%;
    width: 72%;
    padding-top: 72%;
    border-radius: 50%;
    background: radial-gradient(circle, var(--card-glow, rgba(226, 166, 108, 0.16)) 0%, transparent 68%);
    pointer-events: none;
}

.home .enjeux-block:hover,
.home .expertise-group:hover,
.home .why-card:hover {
    border-color: var(--card-border, rgba(255, 255, 255, 0.2));
    background: rgba(255, 255, 255, 0.055);
}

/* ---------- Enjeux ---------- */

.home .enjeux {
    background: var(--home-bg);
}

.home .enjeux-blocks {
    gap: 28px;
    margin-bottom: 60px;
}

.home .enjeux-block {
    padding: 34px 30px;
    border-top: 1px solid var(--home-line);
    font-size: 21px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--home-ink);
}

/* Un filet coloré en tête de carte donne le rythme chromatique. */
.home .enjeux-block::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(to right, var(--card-accent), transparent);
}

.home .enjeux-block:nth-child(1) {
    --card-accent: var(--accent-1);
    --card-glow: rgba(226, 166, 108, 0.16);
    --card-border: rgba(226, 166, 108, 0.42);
}

.home .enjeux-block:nth-child(2) {
    --card-accent: var(--accent-2);
    --card-glow: rgba(195, 208, 132, 0.15);
    --card-border: rgba(195, 208, 132, 0.42);
}

.home .enjeux-block:nth-child(3) {
    --card-accent: var(--accent-3);
    --card-glow: rgba(228, 144, 122, 0.15);
    --card-border: rgba(228, 144, 122, 0.42);
}

.home .enjeux-challenge {
    max-width: 720px;
}

.home .enjeux-challenge-intro {
    font-size: 19px;
    color: var(--home-ink);
}

.home .enjeux-questions {
    list-style: none;
    padding: 0;
}

.home .enjeux-questions li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 14px;
    font-size: 17px;
    color: var(--home-ink-soft);
}

.home .enjeux-questions li::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 12px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-4);
}

.home .enjeux-closing {
    font-size: clamp(22px, 2.4vw, 30px);
    line-height: 1.35;
    font-weight: 600;
    color: var(--home-ink);
    max-width: 840px;
}

/* ---------- Pour qui : onglets sur fond sombre ---------- */

.home .pour-qui {
    background: var(--home-bg-soft);
}

.home .pour-qui .tabs {
    border: 1px solid var(--home-line);
    border-radius: 18px;
    background: var(--home-card);
    max-width: 900px;
    margin: 0 auto;
}

.home .pour-qui .tabs-nav {
    background: rgba(255, 255, 255, 0.04);
    justify-content: center;
}

/* Groupe centré : le filet du dernier onglet flotterait dans le vide. */
.home .pour-qui .tabs-nav-item:last-child {
    border-right: 0;
}

.home .pour-qui .tabs-nav-item {
    font-size: 17px;
    padding: 18px 30px;
    color: var(--home-ink-soft);
    border-right-color: var(--home-line);
}

.home .pour-qui .tabs-nav-item.is-active {
    background: rgba(255, 255, 255, 0.07);
    color: var(--home-ink);
    box-shadow: inset 0 -2px 0 var(--accent-1);
}

.home .pour-qui .tabs-panels {
    background: transparent;
    padding: 40px;
}

.home .pour-qui .tabs-panel p {
    font-size: 19px;
    line-height: 1.65;
    margin: 0;
}

/* ---------- Mission ---------- */

.home .mission {
    background: var(--home-bg);
}

.home .mission h2 {
    color: var(--home-ink);
    max-width: 900px;
}

.home .mission-text {
    max-width: 780px;
    font-size: 18px;
    line-height: 1.75;
}

/* ---------- Expertises ---------- */

.home .expertises {
    background: var(--home-bg-soft);
}

.home .expertise-groups {
    gap: 28px;
}

.home .expertise-group {
    padding: 34px 30px;
}

.home .expertise-group:nth-child(1) {
    --card-accent: var(--accent-1);
    --card-glow: rgba(226, 166, 108, 0.18);
    --card-border: rgba(226, 166, 108, 0.42);
}

.home .expertise-group:nth-child(2) {
    --card-accent: var(--accent-2);
    --card-glow: rgba(195, 208, 132, 0.16);
    --card-border: rgba(195, 208, 132, 0.42);
}

.home .expertise-group:nth-child(3) {
    --card-accent: var(--accent-3);
    --card-glow: rgba(228, 144, 122, 0.16);
    --card-border: rgba(228, 144, 122, 0.42);
}

.home .expertise-group-header {
    position: relative;
    z-index: 2;
    gap: 16px;
    margin-bottom: 16px;
}

/* Le numéro devient un jeton discret, dans la teinte de la carte. */
.home .expertise-group-number {
    width: 40px;
    height: 40px;
    font-size: 17px;
    background: transparent;
    color: var(--card-accent);
    border: 1px solid var(--card-accent);
    border-radius: 10px;
    box-shadow: 0 0 22px -8px var(--card-accent);
}

.home .expertise-group-header h3 {
    font-size: 22px;
    letter-spacing: 1px;
    color: var(--home-ink);
}

.home .expertise-group-tagline {
    position: relative;
    z-index: 2;
    font-size: 16px;
    line-height: 1.55;
    margin-bottom: 26px;
}

.home .expertise-items {
    position: relative;
    z-index: 2;
    gap: 14px;
}

.home .expertise-item {
    padding: 22px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid transparent;
    transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.home .expertise-item:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.075);
    border-color: var(--card-border);
}

.home .expertise-item h4 {
    font-size: 19px;
    margin-bottom: 10px;
    color: var(--home-ink);
}

.home .expertise-item p {
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 12px;
}

.home .expertise-item .more {
    font-size: 14px;
    color: var(--card-accent);
}

.home .expertise-item .more::after {
    content: ' \2192';
}

/* Sélecteur des expertises : réservé au mobile et à la tablette, où les
   trois blocs ne tiennent plus côte à côte. Trois boîtes, dans la teinte
   de leur bloc, affichent chacune le sien seul, comme sur la page Services. */
.home .expertise-switcher {
    display: none;
}

.home .expertise-switcher-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 8px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 45%, rgba(255, 255, 255, 0.02) 100%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 14px 30px -18px rgba(2, 10, 20, 0.7);
    color: var(--home-ink-soft);
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    opacity: 0.75;
    transition: opacity 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.home .expertise-switcher-item:nth-child(1) { --card-accent: var(--accent-1); }
.home .expertise-switcher-item:nth-child(2) { --card-accent: var(--accent-2); }
.home .expertise-switcher-item:nth-child(3) { --card-accent: var(--accent-3); }

.home .expertise-switcher-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--card-accent);
    border-radius: 10px;
    color: var(--card-accent);
    font-size: 16px;
}

.home .expertise-switcher-item:hover,
.home .expertise-switcher-item:focus-visible {
    opacity: 1;
}

.home .expertise-switcher-item.is-active {
    opacity: 1;
    color: var(--card-accent);
    border-color: var(--card-accent);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 0 26px -12px var(--card-accent);
}

@media (max-width: 980px) {
    .home .expertise-switcher {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
        margin-bottom: 20px;
    }

    /* Le masquage n'intervient qu'une fois le script chargé. */
    .has-expertise-switcher .home .expertise-group {
        display: none;
    }

    .has-expertise-switcher .home .expertise-group.is-active {
        display: block;
    }
}

@media (max-width: 400px) {
    .home .expertise-switcher {
        gap: 8px;
    }

    .home .expertise-switcher-item {
        font-size: 13px;
        letter-spacing: 0.2px;
    }
}

/* ---------- Pourquoi Hoplite ---------- */

.home .why {
    background: var(--home-bg);
}

/* Cinq piliers sur une grille de 6 colonnes : chaque carte en occupe 2,
   soit 3 par ligne. Les deux dernières sont décalées d'une colonne
   pour rester centrées sous les trois premières. */
.home .why-grid {
    grid-template-columns: repeat(6, 1fr);
    gap: 28px;
}

.home .why-card {
    grid-column: span 2;
}

.home .why-card:nth-child(4) {
    grid-column: 2 / span 2;
}

.home .why-card:nth-child(5) {
    grid-column: 4 / span 2;
}

.home .why-card {
    padding: 34px 30px;
}

.home .why-card:nth-child(1) {
    --card-accent: var(--accent-1);
    --card-glow: rgba(226, 166, 108, 0.16);
    --card-border: rgba(226, 166, 108, 0.42);
}

.home .why-card:nth-child(2) {
    --card-accent: var(--accent-2);
    --card-glow: rgba(195, 208, 132, 0.14);
    --card-border: rgba(195, 208, 132, 0.42);
}

.home .why-card:nth-child(3) {
    --card-accent: var(--accent-3);
    --card-glow: rgba(228, 144, 122, 0.14);
    --card-border: rgba(228, 144, 122, 0.42);
}

.home .why-card:nth-child(4) {
    --card-accent: var(--accent-4);
    --card-glow: rgba(146, 183, 205, 0.14);
    --card-border: rgba(146, 183, 205, 0.42);
}

.home .why-card:nth-child(5) {
    --card-accent: var(--accent-5);
    --card-glow: rgba(214, 182, 130, 0.14);
    --card-border: rgba(214, 182, 130, 0.42);
}

.home .why-card-number {
    position: relative;
    z-index: 2;
    width: auto;
    height: auto;
    border-radius: 0;
    background: none;
    font-size: 46px;
    line-height: 1;
    letter-spacing: -2px;
    color: var(--card-accent);
    opacity: 0.9;
    margin-bottom: 18px;
}

.home .why-card h4 {
    position: relative;
    z-index: 2;
    font-size: 20px;
    line-height: 1.25;
    margin-bottom: 12px;
}

.home .why-card p {
    position: relative;
    z-index: 2;
    font-size: 15px;
    line-height: 1.65;
}

/* ---------- Méthode ---------- */

.home .methode {
    background: var(--home-bg-soft);
}

.home .method-steps {
    gap: 28px;
}

.home .method-step {
    text-align: left;
    padding-top: 22px;
    border-top: 1px solid var(--home-line);
}

.home .method-step:nth-child(1) { --card-accent: var(--accent-1); }
.home .method-step:nth-child(2) { --card-accent: var(--accent-2); }
.home .method-step:nth-child(3) { --card-accent: var(--accent-3); }
.home .method-step:nth-child(4) { --card-accent: var(--accent-4); }
.home .method-step:nth-child(5) { --card-accent: var(--accent-5); }

.home .method-step-number {
    width: auto;
    height: auto;
    border: 0;
    border-radius: 0;
    font-size: 42px;
    line-height: 1;
    letter-spacing: -2px;
    color: var(--card-accent);
    margin-bottom: 14px;
}

.home .method-step h4 {
    font-size: 20px;
    margin-bottom: 10px;
}

.home .method-step p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--home-ink-soft);
}

/* ---------- Témoignages ---------- */

/* Le motif de fond est presque blanc : en multiply il ne laisse
   affleurer que ses traits, sans éclaircir la section. */
.home .testimonials {
    background-color: var(--home-bg);
    background-blend-mode: multiply;
}

.home .testimonials-grid {
    gap: 28px;
    margin-top: 48px;
}

.home .testimonial-card {
    padding: 34px 30px;
}

.home .testimonial-card:nth-child(1) { --card-glow: rgba(226, 166, 108, 0.14); }
.home .testimonial-card:nth-child(2) { --card-glow: rgba(195, 208, 132, 0.13); }
.home .testimonial-card:nth-child(3) { --card-glow: rgba(228, 144, 122, 0.13); }

.home .testimonial-card p {
    position: relative;
    z-index: 2;
    font-size: 18px;
    line-height: 1.65;
}

.home .testimonial-card cite {
    position: relative;
    z-index: 2;
    margin-top: 20px;
    color: var(--accent-1);
}

/* ---------- Transformation ---------- */

.home .transformation {
    background: var(--home-bg);
}

.home .transformation h2 {
    color: var(--home-ink);
    max-width: 900px;
}

.home .transformation-text {
    max-width: 780px;
    font-size: 18px;
    line-height: 1.75;
}

/* ---------- CTA final ---------- */

.home .cta {
    background:
        radial-gradient(80% 140% at 50% 0%, rgba(226, 166, 108, 0.14) 0%, transparent 62%),
        var(--home-bg-soft);
    border-top: 1px solid var(--home-line);
    padding: 96px 0;
}

.home .cta p {
    font-size: clamp(26px, 3vw, 40px);
    line-height: 1.2;
    letter-spacing: -0.5px;
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--home-ink);
    margin-bottom: 34px;
}

.home .btn {
    padding: 0.85em 2em;
    font-size: 17px;
    border-radius: 8px;
}

/* L'ocre de marque manque de présence sur fond sombre :
   les boutons reprennent la version éclaircie de la palette. */
.home .btn:not(.btn--light) {
    border-color: var(--accent-1);
    color: var(--accent-1);
}

.home .btn:not(.btn--light):hover {
    background: var(--accent-1);
    color: var(--home-bg);
}

/* ---------- Relief : fond éclairci et reflets spectraux ---------- */

:root {
    /* Couches de lumière fixées à la fenêtre, partagées par la page
       d'accueil et le cadre de son header pour un raccord invisible. */
    --home-gloss:
        /* Lustre : une bande de lumière en diagonale, fixée à la fenêtre,
           qui glisse sur la page au défilement comme un reflet sur du verre. */
        linear-gradient(118deg,
            transparent 22%,
            rgba(255, 255, 255, 0.035) 36%,
            rgba(200, 228, 255, 0.11) 47%,
            rgba(255, 255, 255, 0.05) 53%,
            transparent 68%) fixed,
        /* Source de lumière en haut à gauche de la fenêtre. */
        radial-gradient(70% 65% at 18% 0%, rgba(170, 210, 240, 0.20) 0%, transparent 62%) fixed,
        /* Bords assombris : creuse le centre et donne le relief. */
        radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(6, 18, 30, 0.38) 100%) fixed;
}

/* Le fond de page s'éclaircit vers un bleu acier lumineux pour se détacher
   du bleu marine des bandeaux (header, footer). Les sections deviennent
   transparentes : une seule nappe de lumière, posée sur .home, court
   sous toute la page au lieu d'être recoupée section par section. */
.home {
    --home-bg: #21425C;
    --home-bg-soft: #254862;
    --home-line: rgba(255, 255, 255, 0.14);
    --home-card: rgba(255, 255, 255, 0.055);

    /* Spectre volontairement pâle : cyan, lavande, ocre de marque. */
    --prism: linear-gradient(90deg,
        rgba(146, 214, 230, 0) 0%,
        rgba(110, 215, 245, 0.95) 22%,
        rgba(175, 145, 255, 0.95) 50%,
        rgba(240, 170, 100, 0.95) 78%,
        rgba(226, 166, 108, 0) 100%);

    position: relative;
    isolation: isolate;
    /* TEST — photo pexels-ryutaro-6249808 en fond de page, fixée à la fenêtre
       et couvrant l'écran. Le fichier image n'est pas retouché.
       Fond précédent conservé ci-dessous (à rétablir en retirant ce bloc) :
    background:
        var(--home-gloss),
        linear-gradient(180deg, #264A66 0%, var(--home-bg) 35%, #1E3D57 70%, #23455F 100%);
    */
    background: #0B0D1A url('../images/backgrounds/pexels-ryutaro-6249808.jpg') center / cover no-repeat fixed;
}

/* Les navigateurs tactiles (iOS notamment) ignorent le fond fixé et
   étireraient la photo sur toute la hauteur : on la répète en largeur pleine. */
@media (hover: none) {
    .home {
        background-attachment: scroll;
        background-size: 100% auto;
        background-repeat: repeat-y;
        background-position: center top;
    }
}

/* Halos spectraux, répartis en quinconce sur toute la hauteur : sous les
   bandeaux de verre sombre ils se diffusent, sur le fond clair ils colorent
   la lumière. Cyan, violet et ocre de marque alternent. */
/* TEST photo de fond : halos désactivés, conservés pour retour arrière.
.home::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(50% 800px at 92% 700px, rgba(80, 200, 240, 0.30) 0%, transparent 70%),
        radial-gradient(45% 800px at 4% 1700px, rgba(160, 125, 250, 0.28) 0%, transparent 70%),
        radial-gradient(50% 800px at 96% 2700px, rgba(240, 160, 90, 0.24) 0%, transparent 70%),
        radial-gradient(45% 800px at 6% 3700px, rgba(80, 200, 240, 0.28) 0%, transparent 70%),
        radial-gradient(50% 800px at 94% 4700px, rgba(160, 125, 250, 0.28) 0%, transparent 70%),
        radial-gradient(45% 800px at 4% 5700px, rgba(240, 160, 90, 0.24) 0%, transparent 70%),
        radial-gradient(50% 800px at 92% 6700px, rgba(80, 200, 240, 0.26) 0%, transparent 70%),
        radial-gradient(45% 700px at 8% 7500px, rgba(160, 125, 250, 0.24) 0%, transparent 70%);
}
*/

/* Sections claires : elles laissent voir le fond brillant. */
.home .hero-frame,
.home .enjeux,
.home .mission,
.home .why {
    background: transparent;
}

.home .cta {
    background: radial-gradient(80% 140% at 50% 0%, rgba(226, 166, 108, 0.18) 0%, transparent 62%);
}

/* Témoignages : section claire entre deux bandeaux sombres. Le motif,
   fusionné en multiply, a besoin d'une couleur opaque : on lui donne
   un bleu plus lumineux que le fond pour qu'il ne passe pas pour sombre. */
.home .testimonials {
    background-color: #2F5876;
}

/* Bandeaux bleu foncé, un sur deux, dans la teinte du header et du footer.
   Ce sont des plaques de verre fumé : le flou d'arrière-plan diffuse les
   halos qui passent dessous, un reflet clair court sur leur tranche haute
   et un fil prismatique en souligne le bord. */
.home .stats-bar,
.home .pour-qui,
.home .expertises,
.home .methode,
.home .transformation {
    position: relative;
    background:
        var(--prism) top / 100% 1px no-repeat,
        linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 35%),
        rgba(12, 32, 50, 0.80);
    -webkit-backdrop-filter: blur(28px) saturate(170%);
    backdrop-filter: blur(28px) saturate(170%);
    border-top: 0;
    border-bottom: 0;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -1px 0 rgba(0, 0, 0, 0.35),
        0 30px 60px -40px rgba(0, 0, 0, 0.6);
}

/* Le fil prismatique des chiffres clés est porté par le fond ci-dessus. */
.home .stats-bar::before,
.home .stats-bar::after {
    content: none;
}

/* Le cadre du header de l'accueil, hors de .home, reçoit la même lumière :
   les couches étant fixées à la fenêtre, le raccord est invisible. */
.site-header--boxed {
    /* TEST photo de fond — fond précédent conservé :
    background: var(--home-gloss), #264A66;
    */
    background: #0B0D1A url('../images/backgrounds/pexels-ryutaro-6249808.jpg') center / cover no-repeat fixed;
}

/* TEST photo de fond : le panneau du H1 reprend lui aussi la photo, fixée
   à la fenêtre et donc raccordée à la barre de menu et à la page ; le
   casque reste posé par-dessus. Ancien fond : header-hero-bg.jpg, conservé
   en commentaire dans app/Views/home/index.php. */
.home .hero-panel--main {
    background: 
        /* Très léger voile clair : sur une photo aussi sombre, un voile foncé
           reste invisible ; celui-ci détache le panneau de la page. */
        linear-gradient(rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.07)) fixed,
        #0B0D1A url('../images/backgrounds/pexels-ryutaro-6249808.jpg') center / cover no-repeat fixed;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.14),
        0 24px 50px -24px rgba(0, 0, 0, 0.65);
}

/* TEST photo de fond : la barre de menu montre la même photo, fixée à la
   fenêtre comme celle de la page, donc parfaitement raccordée. Un liseré
   clair et l'ombre portée la détachent du cadre. */
.site-header--boxed .site-header-bar {
    background: 
        /* Très léger voile clair : sur une photo aussi sombre, un voile foncé
           reste invisible ; celui-ci détache le panneau de la page. */
        linear-gradient(rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.07)) fixed,
        #0B0D1A url('../images/backgrounds/pexels-ryutaro-6249808.jpg') center / cover no-repeat fixed;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.14),
        0 12px 30px -12px rgba(0, 0, 0, 0.6);
}

@media (hover: none) {
    .site-header--boxed,
    .site-header--boxed .site-header-bar,
    .home .hero-panel--main {
        background-attachment: scroll;
        background-size: 100vw auto;
        background-position: center top;
    }
}

/* ---------- Effet vitre sur les cartes ---------- */

/* Verre dépoli : fond translucide dégradé, flou de ce qui passe derrière,
   arête haute éclairée et ombre portée douce. */
.home .enjeux-block,
.home .expertise-group,
.home .why-card,
.home .testimonial-card,
.home .pour-qui .tabs {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 45%, rgba(255, 255, 255, 0.02) 100%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        inset 0 0 0 1px rgba(255, 255, 255, 0.03),
        0 24px 50px -28px rgba(2, 10, 20, 0.7);
}

.home .enjeux-block:hover,
.home .expertise-group:hover,
.home .why-card:hover {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.06) 45%, rgba(255, 255, 255, 0.03) 100%);
}

/* Reflet spectral sur l'arête haute, comme la tranche d'un verre
   qui décompose la lumière. */
.home .expertise-group::before,
.home .why-card::before,
.home .testimonial-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 8%;
    right: 8%;
    height: 1px;
    background: var(--prism);
    opacity: 0.9;
    pointer-events: none;
    transition: opacity 0.35s ease;
}

.home .expertise-group:hover::before,
.home .why-card:hover::before {
    opacity: 1;
}

/* ---------- Adaptations ---------- */

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

    .home .stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Cinq étapes sur deux lignes : trois dessus, deux centrées dessous,
       reliées par des flèches dans l'ordre de lecture. */
    .home .method-steps {
        grid-template-columns: repeat(6, 1fr);
        column-gap: 28px;
        row-gap: 36px;
    }

    .home .method-step {
        position: relative;
        grid-column: span 2;
        text-align: center;
    }

    .home .method-step:nth-child(4) {
        grid-column: 2 / span 2;
    }

    .home .method-step:not(:last-child):not(:nth-child(3))::after {
        content: '\2192';
        position: absolute;
        top: 22px;
        right: -14px;
        transform: translateX(50%);
        font-size: 20px;
        line-height: 42px;
        color: var(--home-ink-soft);
    }

    /* Deux piliers par ligne, le cinquième centré dessous */
    .home .why-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .home .why-card,
    .home .why-card:nth-child(4) {
        grid-column: span 2;
    }

    .home .why-card:nth-child(5) {
        grid-column: 2 / span 2;
    }
}

@media (max-width: 767px) {
    .home .hero-frame {
        padding: 0 12px 12px;
    }

    .home .hero-panel h1 {
        letter-spacing: -0.8px;
    }

    .home .hero-panel-text {
        font-size: 17px;
    }

    /* Casque : au lieu d'être masqué, il passe sous le texte, calé à
       droite, et déborde du bas du panneau comme il déborde en haut et
       en bas sur grand écran. */
    .home .hero-panel {
        flex-direction: column;
        align-items: stretch;
        min-height: 0;
        padding-top: 48px;
        padding-bottom: 0;
    }

    .home .hero-frame {
        padding-bottom: 40px;
    }

    .home .hero-helmet {
        display: block;
        position: relative;
        top: auto;
        right: auto;
        align-self: flex-end;
        height: 250px;
        width: auto;
        margin: -12px -8px -36px 0;
        opacity: 1;
    }

    /* Les trois chiffres restent alignés, plus petits ; leur libellé
       passe sur plusieurs lignes. */
    .home .stats-bar {
        padding: 44px 0;
    }

    .home .stats-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }

    .home .stat + .stat::before {
        left: -10px;
    }

    .home .stat-number {
        font-size: 52px;
        letter-spacing: -1.5px;
        margin-bottom: 8px;
    }

    .home .stat-label {
        font-size: 13px;
        line-height: 1.35;
        letter-spacing: 0.2px;
    }

    .home .enjeux-block {
        font-size: 19px;
    }

    .home .pour-qui .tabs-panels {
        padding: 26px;
    }

    .home .method-steps {
        column-gap: 18px;
        row-gap: 26px;
    }

    .home .method-step {
        padding-top: 14px;
    }

    .home .method-step:not(:last-child):not(:nth-child(3))::after {
        top: 14px;
        right: -9px;
        font-size: 15px;
        line-height: 30px;
    }

    .home .method-step-number {
        font-size: 30px;
        letter-spacing: -1px;
        margin-bottom: 8px;
    }

    .home .method-step h4 {
        font-size: 15px;
        margin-bottom: 6px;
        overflow-wrap: anywhere;
    }

    .home .method-step p {
        font-size: 12.5px;
        line-height: 1.45;
    }

    .home .why-grid {
        grid-template-columns: 1fr;
    }

    .home .why-card,
    .home .why-card:nth-child(4),
    .home .why-card:nth-child(5) {
        grid-column: auto;
    }

    .home .eyebrow {
        font-size: 17px;
        letter-spacing: 2px;
    }
}