/* ============================================================================
   lbogroup.lu — Portal-specific CSS
   v0.1.6 (Session 18 — hotfix logo footer)

   Ce fichier COMPLÈTE le DS v3.2.0. Les tokens (--ds-color-*, --ds-space-*,
   --ds-font-*) viennent de tokens.css. On ne redéfinit RIEN qui existe déjà
   côté DS — uniquement les composants propres au portail mère.
   ============================================================================ */

/* ─── Garde-fou images ─────────────────────────────────────────────────────────
   Le DS partagé applique probablement `img { width: 100% }` (pattern responsive
   par défaut). Sans neutraliser ça pour nos logos (SVG dans le header, footer,
   hero pôle), ils s'étirent à 100% de leur conteneur. On force les <img> du
   portail à respecter leurs attributs `height/width` explicites.
*/
.site-header img,
.site-footer img,
.pole-hero__logo,
.pole-card__logo {
    width: auto !important;
    max-width: 100%;
}

/* ─── Variables locales liées à l'accent dynamique du pôle ──────────────── */
:root {
    --accent: var(--ds-color-brand, #FF5722);
    --accent-hover: color-mix(in srgb, var(--accent) 85%, black);
    --portal-max-w: 1240px;
}

/* ─── Header ──────────────────────────────────────────────────────────────── */
.site-header {
    background: var(--ds-color-bg, #fff);
    border-bottom: 1px solid var(--ds-color-border, #e5e7eb);
    position: sticky;
    top: 0;
    z-index: 50;
    backdrop-filter: blur(8px);
    background: rgba(255, 255, 255, 0.92);
}

.site-header__inner {
    max-width: var(--portal-max-w);
    margin: 0 auto;
    padding: var(--ds-space-3, 0.75rem) var(--ds-space-5, 1.5rem);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-5, 1.5rem);
}

.site-header__brand {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.site-header__brand img {
    display: block;
    height: 40px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
}

/* ─── Navigation principale ───────────────────────────────────────────────── */
.site-nav__toggle {
    display: none;
    background: none;
    border: 0;
    padding: 0.5rem;
    cursor: pointer;
    flex-direction: column;
    gap: 4px;
}
.site-nav__toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--ds-color-text, #111);
}

.site-nav__list {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2, 0.5rem);
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}

.site-nav__link {
    --pole-color: var(--ds-color-text);
    display: inline-block;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--ds-color-text, #111);
    text-decoration: none;
    transition: background-color 0.15s, color 0.15s;
    position: relative;
}

.site-nav__link::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pole-color);
    display: inline-block;
    margin-right: 0.5rem;
    vertical-align: middle;
}

.site-nav__link:hover,
.site-nav__link:focus-visible {
    background: color-mix(in srgb, var(--pole-color) 12%, transparent);
    color: var(--pole-color);
}

.site-nav__link.is-current {
    background: var(--pole-color);
    color: #fff;
}
.site-nav__link.is-current::before {
    background: #fff;
}

/* ─── Hero (landing) ──────────────────────────────────────────────────────── */
.hero {
    max-width: var(--portal-max-w);
    margin: 0 auto;
    padding: clamp(3rem, 8vw, 6rem) var(--ds-space-5, 1.5rem) clamp(2rem, 6vw, 4rem);
    display: grid;
    gap: var(--ds-space-5, 1.5rem);
}

.hero__eyebrow {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-weight: 600;
    color: var(--ds-color-text-muted, #6b7280);
}

.hero__title {
    font-size: clamp(2.2rem, 5vw, 3.8rem);
    line-height: 1.05;
    font-weight: 700;
    margin: 0;
    max-width: 22ch;
}

.hero__lead {
    font-size: clamp(1.1rem, 1.6vw, 1.35rem);
    color: var(--ds-color-text-muted, #4b5563);
    max-width: 56ch;
    line-height: 1.55;
}

.hero__ctas {
    display: flex;
    gap: var(--ds-space-3, 0.75rem);
    flex-wrap: wrap;
    margin-top: var(--ds-space-3, 0.75rem);
}

/* ─── Hero rotate (landing v0.1.18) ───────────────────────────────────────── */
/* Variante du hero avec slider auto-play en arrière-plan, une slide par pôle.
   Le contenu textuel (hero__content) reste fixe, le slider défile dessous.
   Gradient blanc à gauche pour préserver la lisibilité du texte. */
.hero--rotate {
    position: relative;
    max-width: none;          /* déborde sur toute la largeur, pas de marge */
    padding: 0;                /* le padding est géré par .hero__content */
    min-height: clamp(420px, 60vh, 640px);
    overflow: hidden;
    isolation: isolate;
    background: var(--ds-color-bg, #fff);
    /* Annule le display: grid hérité de .hero (la base) qui sinon
       contraint .hero__content à une cellule de grid auto-fitted au
       contenu, l'empêchant d'occuper toute la portal-max-w et créant
       un décalage à droite. Même fix que .pole-hero--fullbleed.
       Bug observé et corrigé en v0.1.25. */
    display: block;
}
.hero--rotate .hero__slider {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.hero__slide {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    pointer-events: none;
}
.hero__slide.is-active {
    opacity: 1;
}
.hero__slide-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Placeholder coloré quand l'image n'est pas encore disponible.
   Gradient diagonal vers la couleur signature du pôle pour donner une
   identité visuelle même sans visuel généré. */
.hero__slide-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--pole-color, #999) 35%, #1a1a1a) 0%,
        color-mix(in srgb, var(--pole-color, #999) 12%, #0a0a0a) 100%);
    /* Fallback pour les navigateurs sans color-mix (Safari < 16.2) */
    background-color: var(--pole-color, #1a1a1a);
}
/* Gradient blanc à gauche pour préserver la lisibilité du texte.
   Sur mobile, le gradient devient vertical (texte plus haut). */
.hero__slider-gradient {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0.98) 0%,
        rgba(255, 255, 255, 0.94) 35%,
        rgba(255, 255, 255, 0.80) 55%,
        rgba(255, 255, 255, 0.40) 75%,
        rgba(255, 255, 255, 0.10) 92%,
        rgba(255, 255, 255, 0)    100%
    );
    pointer-events: none;
}
@media (max-width: 768px) {
    .hero__slider-gradient {
        background: linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.96) 0%,
            rgba(255, 255, 255, 0.88) 35%,
            rgba(255, 255, 255, 0.45) 65%,
            rgba(255, 255, 255, 0.15) 100%
        );
    }
}
.hero--rotate .hero__content {
    position: relative;
    z-index: 2;
    max-width: var(--portal-max-w);
    margin: 0 auto;
    padding: clamp(3rem, 8vw, 6rem) var(--ds-space-5, 1.5rem) clamp(3rem, 6vw, 5rem);
    display: grid;
    gap: var(--ds-space-5, 1.5rem);
}
/* Dans le hero rotate, on resserre un peu la lead pour qu'elle reste
   dans la zone "protégée" du gradient blanc gauche. */
.hero--rotate .hero__lead {
    max-width: 50ch;
}
.hero__title-accent {
    /* Met en valeur la 2ème ligne du titre avec un léger accent
       (italique fin, sans changer la couleur pour rester sobre). */
    font-weight: 500;
    color: var(--ds-color-text-muted, #4b5563);
}

/* ─── Header de la grille des pôles (landing v0.1.18) ─────────────────────── */
.poles-grid__header {
    text-align: center;
    margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}
.poles-grid__intro {
    max-width: 60ch;
    margin: 0.75rem auto 0;
    color: var(--ds-color-text-muted, #4b5563);
    font-size: 1.05rem;
    line-height: 1.55;
}

/* ─── Grille des pôles (landing) ──────────────────────────────────────────── */
.poles-grid {
    max-width: var(--portal-max-w);
    margin: 0 auto;
    padding: clamp(2rem, 5vw, 4rem) var(--ds-space-5, 1.5rem);
}

.poles-grid__title {
    font-size: clamp(1.4rem, 2.2vw, 1.9rem);
    margin-bottom: var(--ds-space-5, 1.5rem);
}

.poles-grid__items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--ds-space-4, 1rem);
    list-style: none;
    padding: 0;
    margin: 0;
}

.pole-card {
    --pole-color: var(--ds-color-text);
    background: var(--ds-color-bg, #fff);
    border: 1px solid var(--ds-color-border, #e5e7eb);
    border-radius: 12px;
    padding: var(--ds-space-5, 1.5rem);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    text-decoration: none;
    color: inherit;
    transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
    position: relative;
    overflow: hidden;
}

.pole-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: var(--pole-color);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease;
}

.pole-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px -10px color-mix(in srgb, var(--pole-color) 35%, transparent);
    border-color: color-mix(in srgb, var(--pole-color) 30%, var(--ds-color-border, #e5e7eb));
}
.pole-card:hover::before {
    transform: scaleX(1);
}

.pole-card__logo {
    height: 38px;
    width: auto;
    max-width: 140px;
    align-self: flex-start;
    object-fit: contain;
}

.pole-card__name {
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0;
}

.pole-card__baseline {
    color: var(--ds-color-text-muted, #4b5563);
    font-size: 0.92rem;
    line-height: 1.45;
    margin: 0;
    flex-grow: 1;
}

.pole-card__cta {
    margin-top: 0.4rem;
    font-weight: 500;
    color: var(--pole-color);
    font-size: 0.9rem;
}

.pole-card__cta::after {
    content: " →";
    transition: margin-left 0.2s;
    display: inline-block;
}
.pole-card:hover .pole-card__cta::after {
    margin-left: 0.25rem;
}

/* ─── Page pôle (template) ────────────────────────────────────────────────── */
.pole-hero {
    max-width: var(--portal-max-w);
    margin: 0 auto;
    padding: clamp(2.5rem, 6vw, 5rem) var(--ds-space-5, 1.5rem) clamp(1.5rem, 4vw, 3rem);
    display: grid;
    gap: var(--ds-space-4, 1rem);
}

/* ─── Hero pôle pleine largeur (v0.1.22) ──────────────────────────────────── */
/* Variante avec image de fond. Étend le hero sur toute la largeur du viewport
   et applique un gradient blanc gauche pour préserver la lisibilité du texte.
   L'image de fond est le hero-thumb.webp du pôle (cohérence avec la slide
   correspondante du hero rotate de la landing). */
.pole-hero--fullbleed {
    max-width: none;
    padding: 0;
    position: relative;
    min-height: clamp(420px, 55vh, 600px);
    overflow: hidden;
    isolation: isolate;
    background: var(--ds-color-bg, #fff);
    /* Annule le display: grid hérité de .pole-hero (la base) qui sinon
       contraint .pole-hero__inner à une cellule de grid implicite et lui
       empêche d'occuper toute la portal-max-w. Sans ce reset, l'inner se
       réduit à sa largeur naturelle (texte le plus long) et apparaît
       décalé à droite du viewport au lieu d'être aligné sur le logo du
       header. Bug observé et corrigé en v0.1.25. */
    display: block;
}
.pole-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}
.pole-hero__bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.pole-hero__bg-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0.98) 0%,
        rgba(255, 255, 255, 0.94) 35%,
        rgba(255, 255, 255, 0.80) 55%,
        rgba(255, 255, 255, 0.40) 75%,
        rgba(255, 255, 255, 0.10) 92%,
        rgba(255, 255, 255, 0)    100%
    );
}
@media (max-width: 768px) {
    .pole-hero__bg-gradient {
        background: linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.96) 0%,
            rgba(255, 255, 255, 0.88) 35%,
            rgba(255, 255, 255, 0.45) 65%,
            rgba(255, 255, 255, 0.15) 100%
        );
    }
}
.pole-hero--fullbleed .pole-hero__inner {
    position: relative;
    z-index: 1;
    max-width: var(--portal-max-w);
    margin: 0 auto;
    padding: clamp(2.5rem, 6vw, 5rem) var(--ds-space-5, 1.5rem) clamp(2.5rem, 5vw, 4rem);
    display: grid;
    gap: var(--ds-space-4, 1rem);
}
/* Dans le hero fullbleed, on resserre légèrement la baseline pour qu'elle
   reste dans la zone "protégée" du gradient blanc gauche. */
.pole-hero--fullbleed .pole-hero__baseline {
    max-width: 50ch;
}

.pole-hero__logo {
    height: 60px;
    width: auto;
    max-width: 220px;
    display: block;
    object-fit: contain;
}

.pole-hero__title {
    font-size: clamp(2rem, 4vw, 3rem);
    margin: 0;
    line-height: 1.1;
}

.pole-hero__baseline {
    font-size: clamp(1.05rem, 1.4vw, 1.25rem);
    color: var(--ds-color-text-muted, #4b5563);
    max-width: 58ch;
    line-height: 1.5;
}

.pole-content {
    max-width: var(--portal-max-w);
    margin: 0 auto;
    padding: clamp(1.5rem, 4vw, 3rem) var(--ds-space-5, 1.5rem) clamp(3rem, 6vw, 5rem);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
}

.pole-content__main p {
    margin: 0 0 1rem 0;
    line-height: 1.65;
    color: var(--ds-color-text, #111);
}

.pole-aside {
    background: color-mix(in srgb, var(--accent) 6%, var(--ds-color-bg, #fff));
    border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--ds-color-border, #e5e7eb));
    border-radius: 12px;
    padding: var(--ds-space-5, 1.5rem);
    position: sticky;
    top: 80px;
}

.pole-aside h3 {
    margin: 0 0 0.75rem 0;
    font-size: 1rem;
    color: var(--accent);
}

.pole-aside p {
    margin: 0 0 1rem 0;
    font-size: 0.95rem;
    line-height: 1.5;
}

.pole-aside .btn {
    width: 100%;
    text-align: center;
}

/* ─── Boutons ─────────────────────────────────────────────────────────────── */
.btn {
    display: inline-block;
    padding: 0.75rem 1.4rem;
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none;
    font-size: 0.95rem;
    transition: background-color 0.15s, transform 0.15s;
    border: 1px solid transparent;
    cursor: pointer;
}

.btn--primary {
    background: var(--accent);
    color: #fff;
}
.btn--primary:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
}

.btn--ghost {
    background: transparent;
    color: var(--ds-color-text, #111);
    border-color: var(--ds-color-border, #e5e7eb);
}
.btn--ghost:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* ─── Footer ──────────────────────────────────────────────────────────────── */
.site-footer {
    background: #0f172a;
    color: #e2e8f0;
    margin-top: clamp(3rem, 6vw, 5rem);
}

.site-footer__inner {
    max-width: var(--portal-max-w);
    margin: 0 auto;
    padding: clamp(2.5rem, 5vw, 4rem) var(--ds-space-5, 1.5rem) var(--ds-space-5, 1.5rem);
    display: grid;
    grid-template-columns: 1.5fr repeat(3, 1fr);
    gap: var(--ds-space-5, 1.5rem);
}

.site-footer__logo {
    /* Dimensions forcées — le DS partagé applique probablement `img { width: 100% }`
       qui sinon étire le SVG à toute la largeur de la colonne. */
    height: 56px;
    width: auto;
    max-width: 180px;
    display: block;
    margin-bottom: 1rem;
    object-fit: contain;
}

.site-footer__baseline {
    color: #94a3b8;
    font-size: 0.92rem;
    line-height: 1.5;
    max-width: 32ch;
}

/* Citation favorite (signature de marque — validé Session 11) */
.site-footer__quote {
    margin: 1.5rem 0 0 0;
    padding: 1rem 0 0 1rem;
    border-left: 2px solid var(--ds-color-brand, #FF5722);
    max-width: 32ch;
}
.site-footer__quote-text {
    color: #cbd5e1;
    font-size: 0.88rem;
    font-style: italic;
    line-height: 1.55;
    margin: 0 0 0.5rem 0;
}
.site-footer__quote-author {
    display: block;
    color: #94a3b8;
    font-size: 0.78rem;
    font-style: normal;
    letter-spacing: 0.04em;
}

.site-footer__title {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #cbd5e1;
    margin: 0 0 1rem 0;
    font-weight: 600;
}

.site-footer__links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.site-footer__links a,
.site-footer__links .muted {
    color: #cbd5e1;
    text-decoration: none;
    font-size: 0.92rem;
    transition: color 0.15s;
}

.site-footer__links a::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--pole-color, #475569);
    margin-right: 0.5rem;
    vertical-align: middle;
}

.site-footer__links a:hover {
    color: #fff;
}

.site-footer__links .muted {
    color: #64748b;
}

.site-footer__bottom {
    border-top: 1px solid #1e293b;
    padding: 1rem var(--ds-space-5, 1.5rem);
    max-width: var(--portal-max-w);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #64748b;
}

.site-footer__version {
    font-family: var(--ds-font-mono, ui-monospace, monospace);
    font-size: 0.8rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PAGE PÔLE — MODE ENRICHI (v0.1.9, Session 20)

   Activé par la classe .page-pole--rich sur <body>. Compose avec les styles
   existants (.pole-hero hérité) et ajoute les sections rédactionnelles :
   pitch, différenciateurs, services, scope (pour qui / exclusions),
   CTA final. Tous les accents utilisent --accent injecté par head.php
   depuis la couleur du pôle.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Hero enrichi : eyebrow acronyme + CTAs ────────────────────────────── */
.page-pole--rich .pole-hero {
    position: relative;
    padding-bottom: clamp(2rem, 5vw, 3.5rem);
    overflow: hidden;
}

.page-pole--rich .pole-hero::before {
    content: "";
    position: absolute;
    inset: auto -10% -20% auto;
    width: 60%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle,
                color-mix(in srgb, var(--accent) 18%, transparent) 0%,
                transparent 65%);
    pointer-events: none;
    z-index: 0;
}

/* Si le hero est en mode fullbleed, le halo radial coloré devient redondant
   avec l'image de fond → on le masque pour ne pas surcharger visuellement. */
.page-pole--rich .pole-hero--fullbleed::before {
    display: none;
}

/* ─── (Ancien bloc page-pole--has-bg v0.1.13 retiré en v0.1.22) ──────────
   Remplacé par .pole-hero--fullbleed qui :
   - Détecte automatiquement la présence de hero-thumb.webp pour ce pôle
   - Utilise le MÊME visuel que la slide correspondante du hero rotate landing
     (cohérence d'expérience : on retrouve l'ambiance vue sur la landing)
   - Applique le même gradient blanc gauche que la landing pour uniformité
   Voir la définition .pole-hero--fullbleed plus haut dans le fichier.
*/

/* Mode rich : on garde le container aligné comme les autres pages
   (max-width = portal-max-w, margin: 0 auto, padding hérité de --fullbleed)
   et on resserre uniquement le bloc texte interne pour qu'il reste
   confortable à lire (titre + baseline + CTAs ne s'étalent pas trop). */
.page-pole--rich .pole-hero__inner {
    position: relative;
    z-index: 1;
    gap: 1.1rem;
}
.page-pole--rich .pole-hero__title,
.page-pole--rich .pole-hero__baseline,
.page-pole--rich .pole-hero__eyebrow,
.page-pole--rich .pole-hero__ctas {
    max-width: 62ch;
}

.pole-hero__eyebrow {
    margin: 0;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--ds-color-text-muted, #6b7280);
    font-weight: 600;
}

.pole-hero__eyebrow-acro {
    display: inline-block;
    margin-left: 0.5rem;
    padding-left: 0.75rem;
    border-left: 2px solid var(--accent);
    color: var(--accent);
    font-weight: 500;
    letter-spacing: 0.08em;
}

.pole-hero__eyebrow-acro strong {
    font-weight: 800;
    color: var(--accent);
}

.page-pole--rich .pole-hero__title {
    font-size: clamp(2.4rem, 5.5vw, 3.6rem);
    line-height: 1.02;
    letter-spacing: -0.015em;
    background: linear-gradient(135deg,
                var(--ds-color-text, #111) 0%,
                color-mix(in srgb, var(--accent) 75%, var(--ds-color-text, #111)) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.page-pole--rich .pole-hero__baseline {
    font-size: clamp(1.15rem, 1.6vw, 1.35rem);
    max-width: 52ch;
}

.pole-hero__ctas {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 0.75rem;
}

.btn__icon {
    display: inline-block;
    margin-left: 0.35rem;
    transition: transform 0.2s;
}
.btn:hover .btn__icon {
    transform: translate(2px, -2px);
}

.btn--lg {
    padding: 0.95rem 1.7rem;
    font-size: 1rem;
}

/* ─── Sections : structure commune ──────────────────────────────────────── */
.pole-section {
    padding: clamp(2.5rem, 5vw, 4.5rem) var(--ds-space-5, 1.5rem);
}

.pole-section__inner {
    max-width: var(--portal-max-w);
    margin: 0 auto;
}

.pole-section__title {
    font-size: clamp(1.5rem, 2.5vw, 2.1rem);
    line-height: 1.15;
    margin: 0 0 clamp(1.5rem, 3vw, 2.5rem) 0;
    font-weight: 700;
    letter-spacing: -0.01em;
    position: relative;
    padding-left: 1.1rem;
}

.pole-section__title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.25em;
    bottom: 0.25em;
    width: 4px;
    background: var(--accent);
    border-radius: 2px;
}

/* ─── Pitch ─────────────────────────────────────────────────────────────── */
.pole-pitch {
    background: linear-gradient(180deg,
                transparent 0%,
                color-mix(in srgb, var(--accent) 4%, transparent) 100%);
    padding-top: clamp(1.5rem, 3vw, 2.5rem);
}

.pole-pitch__text {
    font-size: clamp(1.2rem, 1.9vw, 1.55rem);
    line-height: 1.55;
    color: var(--ds-color-text, #111);
    max-width: 68ch;
    margin: 0;
    font-weight: 400;
    letter-spacing: -0.005em;
}

/* Lettrine étendue LBO (v0.1.10) : quand le pitch commence par "LBO ", le
   template wrappe les 3 caractères dans .pole-pitch__lead pour les styler
   en bloc. Fallback ::first-letter conservé en filet de secours si le pitch
   ne commence pas par LBO (pas de span injecté). */
.pole-pitch__lead {
    color: var(--accent);
    font-weight: 800;
    font-size: 1.15em;
    letter-spacing: 0.02em;
    margin-right: 0.15em;
    display: inline-block;
}

.pole-pitch__text:not(:has(.pole-pitch__lead))::first-letter {
    font-size: 1.4em;
    font-weight: 700;
    color: var(--accent);
}

/* ─── Différenciateurs ──────────────────────────────────────────────────── */
.pole-diff__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: clamp(1rem, 2vw, 1.75rem);
}

.pole-diff__item {
    position: relative;
    padding: 1.5rem 1.25rem 1.5rem 1.25rem;
    background: var(--ds-color-bg, #fff);
    border: 1px solid var(--ds-color-border, #e5e7eb);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.pole-diff__item:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--accent) 35%, var(--ds-color-border, #e5e7eb));
    box-shadow: 0 8px 24px -12px color-mix(in srgb, var(--accent) 40%, transparent);
}

.pole-diff__num {
    font-family: var(--ds-font-mono, ui-monospace, monospace);
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    color: var(--accent);
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.pole-diff__title {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.3;
    color: var(--ds-color-text, #111);
}

.pole-diff__body {
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0;
    color: var(--ds-color-text-muted, #4b5563);
}

/* ─── Services ──────────────────────────────────────────────────────────── */
.pole-services {
    background: #fafafa;
    border-top: 1px solid var(--ds-color-border, #e5e7eb);
    border-bottom: 1px solid var(--ds-color-border, #e5e7eb);
}

/* Mode v0.1.10 : wrapper qui peut contenir liste + media côte à côte */
.pole-services__wrap {
    /* Sans media : la liste prend toute la largeur */
}

.pole-services__wrap--with-media {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
    gap: clamp(1.5rem, 3vw, 2.5rem);
    align-items: stretch;
}

.pole-services__wrap--with-media.pole-services__wrap--media-left {
    grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.1fr);
}

.pole-services__wrap--media-left .pole-media {
    order: 0;
}
.pole-services__wrap--media-left .pole-services__list {
    order: 1;
}

.pole-services__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0;
    border-left: 1px solid var(--ds-color-border, #e5e7eb);
    border-top: 1px solid var(--ds-color-border, #e5e7eb);
    border-radius: 12px;
    overflow: hidden;
    background: var(--ds-color-bg, #fff);
}

/* Variante 2 colonnes : utilisée quand un bloc media est présent */
.pole-services__list--2col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pole-services__item {
    padding: 1.75rem 1.5rem;
    border-right: 1px solid var(--ds-color-border, #e5e7eb);
    border-bottom: 1px solid var(--ds-color-border, #e5e7eb);
    position: relative;
    transition: background-color 0.2s;
}

.pole-services__item::before {
    content: "";
    position: absolute;
    left: 1.5rem;
    top: 1.75rem;
    width: 28px;
    height: 2px;
    background: var(--accent);
    transition: width 0.25s ease;
}

.pole-services__item:hover {
    background: color-mix(in srgb, var(--accent) 4%, transparent);
}
.pole-services__item:hover::before {
    width: 48px;
}

.pole-services__title {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 1.25rem 0 0.6rem 0;
    line-height: 1.3;
    color: var(--ds-color-text, #111);
}

.pole-services__body {
    font-size: 0.94rem;
    line-height: 1.6;
    margin: 0;
    color: var(--ds-color-text-muted, #4b5563);
}

/* ─── Bloc media (slider auto-play subtil) ──────────────────────────────── */
.pole-media {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: #1a1410;
    aspect-ratio: 4 / 3;
    box-shadow: 0 12px 40px -16px color-mix(in srgb, var(--accent) 35%, rgba(0, 0, 0, 0.3));
    min-height: 280px;
}

.pole-media__slide {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    transform: scale(1.03);
    transition: opacity 1.2s ease-in-out, transform 6s ease-out;
    pointer-events: none;
}

.pole-media__slide.is-active {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

.pole-media__img {
    width: 100% !important;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pole-media__dots {
    position: absolute;
    left: 50%;
    bottom: 0.85rem;
    transform: translateX(-50%);
    display: flex;
    gap: 0.4rem;
    z-index: 2;
    padding: 0.35rem 0.65rem;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 999px;
    backdrop-filter: blur(6px);
}

.pole-media__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    transition: background-color 0.4s, width 0.4s;
}

.pole-media__dot.is-active {
    background: var(--accent);
    width: 18px;
    border-radius: 3px;
}

/* Vignette d'accent en filigrane (ancrage couleur du pôle) */
.pole-media::after {
    content: "";
    position: absolute;
    inset: auto auto 0 0;
    width: 100%;
    height: 30%;
    background: linear-gradient(to top,
                color-mix(in srgb, var(--accent) 12%, transparent) 0%,
                transparent 100%);
    pointer-events: none;
    z-index: 1;
}

/* ─── Scope : pour qui / exclusions ─────────────────────────────────────── */
.pole-scope__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 4vw, 3.5rem);
}

.pole-scope__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.85rem;
}

.pole-scope__item {
    position: relative;
    padding: 0.65rem 0 0.65rem 2rem;
    font-size: 0.98rem;
    line-height: 1.5;
    color: var(--ds-color-text, #111);
    border-bottom: 1px dashed color-mix(in srgb, var(--ds-color-border, #e5e7eb) 80%, transparent);
}
.pole-scope__list .pole-scope__item:last-child {
    border-bottom: 0;
}

.pole-scope__item::before {
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ds-font-mono, ui-monospace, monospace);
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1;
}

.pole-scope__item--yes::before {
    content: "+";
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.pole-scope__item--no::before {
    content: "−";
    color: #94a3b8;
    background: #f1f5f9;
}

.pole-scope__item--no {
    color: var(--ds-color-text-muted, #4b5563);
}

/* ─── CTA final ─────────────────────────────────────────────────────────── */
.pole-cta-final {
    background: linear-gradient(135deg,
                color-mix(in srgb, var(--accent) 8%, var(--ds-color-bg, #fff)) 0%,
                color-mix(in srgb, var(--accent) 2%, var(--ds-color-bg, #fff)) 100%);
    border-top: 3px solid var(--accent);
}

.pole-cta-final__inner {
    text-align: center;
    max-width: 56ch;
}

.pole-cta-final__title {
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    margin: 0 0 0.75rem 0;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.pole-cta-final__lead {
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    color: var(--ds-color-text-muted, #4b5563);
    line-height: 1.55;
    margin: 0 0 1.75rem 0;
}

.pole-cta-final__ctas {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* ─── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .pole-content {
        grid-template-columns: 1fr;
    }
    .pole-aside {
        position: static;
    }
    .site-footer__inner {
        grid-template-columns: 1fr 1fr;
    }
    .pole-scope__grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    /* Services + media : empilement vertical, texte d'abord */
    .pole-services__wrap--with-media,
    .pole-services__wrap--with-media.pole-services__wrap--media-left {
        grid-template-columns: 1fr;
    }
    .pole-services__wrap--media-left .pole-media,
    .pole-services__wrap--with-media .pole-media {
        order: 1; /* media après texte sur mobile, indépendamment du sens desktop */
    }
    .pole-services__wrap--media-left .pole-services__list,
    .pole-services__wrap--with-media .pole-services__list {
        order: 0;
    }
    /* Liste 2col redevient adaptative en dessous */
    .pole-services__list--2col {
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    }
}

@media (max-width: 720px) {
    .site-nav__toggle {
        display: flex;
    }
    .site-nav__list {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        flex-direction: column;
        align-items: stretch;
        padding: var(--ds-space-3, 0.75rem);
        border-bottom: 1px solid var(--ds-color-border, #e5e7eb);
        display: none;
    }
    .site-nav__list.is-open {
        display: flex;
    }
    .site-header__inner {
        position: relative;
    }
    .site-footer__inner {
        grid-template-columns: 1fr;
    }
    .site-footer__bottom {
        justify-content: center;
        text-align: center;
    }
}