/* =========================================================
   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 12px 0 0;
}

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

.site-logo img {
    max-width: 220px;
}

.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;
}

.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;
}

.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;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr;
    gap: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.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;
}

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

/* ---------- 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;
    }
}

/* ---------- 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;
    }
}

/* ---------- 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);
}

/* Voile chaud qui fond la photo dans le fond de page plutôt que de l'y poser. */
.home .hero-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        radial-gradient(90% 120% at 12% 20%, rgba(11, 26, 36, 0.82) 0%, rgba(11, 26, 36, 0.45) 45%, transparent 78%),
        linear-gradient(to top, rgba(11, 26, 36, 0.85) 0%, transparent 60%);
    z-index: 1;
}

.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';
}

/* ---------- 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);
}

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

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

    .home .method-steps {
        grid-template-columns: repeat(2, 1fr);
    }

    /* 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;
    }

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

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

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

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

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

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

    .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;
    }
}