/* Image position: LEFT variant
   Default layout: [card 55%] [image]  — card overlaps image from left (margin-right:-48px)
   Left variant:   [image] [card 45%]  — card overlaps image from right (margin-left:-48px) */
.capsule-home__about-grid--img-left {
    grid-template-columns: 1fr 45%;
}
.capsule-home__about-grid--img-left .capsule-home__about-card {
    grid-column: 2;
    grid-row: 1;
    margin-right: 0;
    margin-left: -48px;
    box-shadow: -8px 0 32px rgba(0,0,0,.12);
}
.capsule-home__about-grid--img-left .capsule-home__about-media {
    grid-column: 1;
    grid-row: 1;
}
@media (max-width: 1100px) {
    .capsule-home__about-grid--img-left .capsule-home__about-card {
        grid-column: 1; grid-row: 2;
        margin-left: 0;
    }
    .capsule-home__about-grid--img-left .capsule-home__about-media {
        grid-column: 1; grid-row: 1;
    }
}

:root {
    --capsule-color-primary: #17345a;
    --capsule-color-secondary: #ef7a3a;
    --capsule-color-text: #17345a;
    --capsule-color-bg: #f4f4f4;
    --capsule-color-white: #ffffff;
    --capsule-container: 1280px;
    --capsule-radius: 4px;
    --capsule-font-base: Arial, sans-serif;
    }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--capsule-font-base); color: var(--capsule-color-text); background: var(--capsule-color-bg); }
a { color: inherit; }
img { max-width: 100%; display: block; }
.capsule-container { width: min(100% - 48px, var(--capsule-container)); margin-inline: auto; }
.site-topbar { background: var(--capsule-color-primary); color: var(--capsule-color-white); font-size: 14px; padding: 10px 0; }
/* ═══════════════════════════════════════
   SITE HEADER
   ═══════════════════════════════════════ */
.site-header {
    background: #fff;
    position: relative; /* needed for mobile nav dropdown */
    z-index: 100;
    border-bottom: 1px solid rgba(0,0,0,.07);
    box-shadow: 0 1px 6px rgba(0,0,0,.06);
}
.site-header--white       { background: #fff; }
.site-header--light       { background: #f8fafc; }
.site-header--dark        { background: var(--capsule-color-primary); border-bottom-color: rgba(255,255,255,.08); }
.site-header--transparent { background: transparent; position: absolute; left: 0; right: 0; border-bottom: none; box-shadow: none; }
.site-header--bg          { background: var(--capsule-color-bg); }
.site-header--primary     { background: var(--capsule-color-primary); color: #fff; border-bottom-color: rgba(255,255,255,.08); }
.site-header--secondary   { background: var(--capsule-color-secondary); color: #fff; border-bottom-color: rgba(255,255,255,.12); }
.site-header--text        { background: var(--capsule-color-text); color: #fff; border-bottom-color: rgba(255,255,255,.1); }
.site-header--sticky      { position: sticky; top: 0; }

/* Inner: logo | nav(center) | actions */
.site-header__inner {
    display: block;
}

/* Top strip: hidden — socials moved into right actions column */
.site-header__top-strip { display: none; }

/* Main bar: the actual 3-column grid */
.site-header__main {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: stretch;
    gap: 0 36px;
    min-height: 0;
}

/* ── Logo ── */
.site-header__brand {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding: 14px 0;
}
.site-header__brand a { display: inline-flex; align-items: center; text-decoration: none; }
.site-header__brand img { max-height: 58px; width: auto; display: block; }
.site-header__brand-name {
    font-weight: 800;
    font-size: 22px;
    color: var(--capsule-color-primary);
    line-height: 1.1;
    letter-spacing: -.02em;
}

/* ── Nav ── */
.site-header__nav {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    align-self: stretch;
    padding-bottom: 20px;
}
.main-menu {
    display: flex;
    align-items: center;
    gap: 36px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.main-menu li { position: relative; }
.main-menu a {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    text-decoration: none;
    color: var(--capsule-color-primary);
    white-space: nowrap;
    display: block;
    padding: 4px 0;
    position: relative;
    transition: color .15s;
}
.main-menu a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0; right: 0;
    height: 2px;
    background: var(--capsule-color-secondary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .2s ease;
}
.main-menu a:hover { color: var(--capsule-color-secondary); }
.main-menu a:hover::after { transform: scaleX(1); }
.main-menu .current-menu-item > a { color: var(--capsule-color-secondary); }
.main-menu .current-menu-item > a::after { transform: scaleX(1); }

/* Submenu */
.main-menu .sub-menu {
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    border: 1px solid #e8ecf1;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.1);
    min-width: 200px;
    list-style: none;
    padding: 6px 0;
    margin: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s, transform .2s;
    transform: translateX(-50%) translateY(-4px);
    z-index: 200;
}
.main-menu li:hover > .sub-menu {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
.main-menu .sub-menu a {
    padding: 8px 18px;
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--capsule-color-primary);
    white-space: nowrap;
}
.main-menu .sub-menu a:hover { color: var(--capsule-color-secondary); background: #f8fafc; }
.main-menu .sub-menu a::after { display: none; }

/* ── Actions: socials + CTA ── */
.site-header__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 8px;
    flex-shrink: 0;
    padding: 10px 0;
}
.site-header__socials {
    display: flex;
    align-items: center;
    gap: 4px;
}
.site-header__socials a {
    display: inline-flex;
    width: 26px;
    height: 26px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--capsule-color-primary);
    color: #fff;
    font-size: 12px;
    text-decoration: none;
    transition: background .15s, transform .15s;
    flex-shrink: 0;
}
.site-header__socials a:hover {
    background: var(--capsule-color-secondary);
    transform: scale(1.1);
}
.site-header__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 22px;
    border-radius: 4px;
    background: var(--capsule-color-secondary);
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .08em;
    border: none;
    cursor: pointer;
    transition: filter .15s, transform .15s;
    white-space: nowrap;
    flex-shrink: 0;
}
.site-header__cta:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

/* Dark mode overrides */
.site-header--dark .main-menu a { color: rgba(255,255,255,.85); }
.site-header--dark .main-menu a:hover { color: #fff; }
.site-header--dark .site-header__brand-name { color: #fff; }
.site-header--dark .site-header__socials a { background: rgba(255,255,255,.15); }

/* Shared button style — background uses "Couleur du texte" from admin */
.capsule-button, .capsule-home__btn, .capsule-home__service-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; padding: 0 22px;
    border-radius: 4px;
    background: var(--capsule-color-text);
    color: #fff; text-decoration: none;
    text-transform: uppercase; font-weight: 700; font-size: 13px;
    letter-spacing: .06em;
    /* Reserve space for an optional 1px border. Default is transparent, so visually invisible.
       Per-section "Bouton — bordure" in Capsule Admin → Couleurs des sections activates it
       by overriding border-color. Box-sizing keeps the same total height regardless. */
    border: 1px solid transparent;
    box-sizing: border-box;
}
/* Hero CTA: defaults to secondary (accent color) for stronger call-to-action contrast.
   Other buttons (service cards, news, contact) keep the dark "text" color. */
.capsule-home__section--hero .capsule-home__btn {
    background: var(--capsule-color-secondary);
}
.capsule-main { min-height: 50vh; }
.capsule-page__content { line-height: 1.6; }
.capsule-home__section { position: relative; }
.capsule-home__section--hero { margin: 0; }
.capsule-home__hero, .capsule-home__slide { min-height: 560px; background-size: cover; background-position: center; position: relative; display: flex; align-items: center; }
.capsule-home__hero-slider { position: relative; overflow: hidden; }
.capsule-home__slide { display: none; }
.capsule-home__slide.is-active { display: flex; }
/* ── Overlay (voile sombre par-dessus image de fond) ──
   Couleur définissable via Capsule Admin → Couleurs des sections.
   Direction (« Partout », « Côté gauche », etc.) définissable par section dans le Page Builder.

   Le `--capsule-overlay-color` peut être personnalisé par le panneau couleurs
   (l'override sur .capsule-home__overlay redéfinit la propriété `background`,
    voir output_frontend_css). La direction est gérée par modifier classes. */
.capsule-home__overlay {
    position: absolute;
    inset: 0;
    --capsule-overlay-color: rgba(0, 0, 0, 0.35);
    background: var(--capsule-overlay-color);
}
/* Modifiers: direction du voile (gradient de la couleur vers transparent) */
.capsule-home__overlay--all   { background: var(--capsule-overlay-color); }
.capsule-home__overlay--left  { background: linear-gradient(to right,  var(--capsule-overlay-color) 0%,  var(--capsule-overlay-color) 35%, transparent 75%); }
.capsule-home__overlay--right { background: linear-gradient(to left,   var(--capsule-overlay-color) 0%,  var(--capsule-overlay-color) 35%, transparent 75%); }
.capsule-home__overlay--top   { background: linear-gradient(to bottom, var(--capsule-overlay-color) 0%,  var(--capsule-overlay-color) 35%, transparent 80%); }
.capsule-home__overlay--bottom{ background: linear-gradient(to top,    var(--capsule-overlay-color) 0%,  var(--capsule-overlay-color) 35%, transparent 80%); }
.capsule-home__overlay--none  { display: none; }
.capsule-home__inner {
    position: relative;
    z-index: 2;
    /* Ensure content never overlaps arrows (38px wide + 28px offset + 14px gap = 80px) */
    padding-left: 80px;
    padding-right: 80px;
}
.capsule-home__hero-content {
    max-width: 520px;
    color: #fff;
    padding: 60px 0;
    position: relative;
    z-index: 2;
	display: flex; 
	flex-direction: column; 
	align-items: flex-start;
	font-size:18px;
}
.capsule-home__hero-content h1 {
    margin: 0 0 22px;
    font-size: clamp(32px, 4vw, 54px);
    line-height: 1.12;
    font-weight: 300;
    letter-spacing: -.01em;
}
.capsule-home__hero-content p {
    margin: 0;
    font-size: 15px;
    line-height: 1.65;
    opacity: .9;
    max-width: 460px;
}
.capsule-home__hero-content .capsule-home__btn {
    margin-top: 32px;
    background: var(--capsule-color-secondary);
    border-radius: 3px;
    font-size: 13px;
    letter-spacing: .08em;
    height: 42px;
    padding: 0 24px;
}
.capsule-home__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 0;
    background: var(--capsule-color-secondary);
    color: #fff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, transform .15s;
    opacity: .9;
}
.capsule-home__arrow:hover { opacity: 1; transform: translateY(-50%) scale(1.1); }
.capsule-home__arrow--prev { left: 20px; }
.capsule-home__arrow--next { right: 20px; }
.capsule-home__dots { position: absolute; left: 50%; transform: translateX(-50%); bottom: 22px; z-index: 3; display: flex; gap: 8px; }
.capsule-home__dot { width: 9px; height: 9px; border: 0; border-radius: 50%; background: rgba(255,255,255,.5); cursor: pointer; padding: 0; transition: background .2s, transform .2s; }
.capsule-home__dot.is-active { background: var(--capsule-color-secondary); transform: scale(1.25); }
.capsule-home__section--activities, .capsule-home__section--about { padding: 72px 0; }
/* ═══════════════════════════════════════════════════════════
   TITRES & INTROS DE SECTION — référence canonique
   Toutes les sections utilisent ces deux classes (ou des classes
   équivalentes alignées sur les mêmes valeurs) pour garantir
   l'homogénéité visuelle entre activities, news, contact, logos…
   ═══════════════════════════════════════════════════════════ */
.capsule-home__section-title {
    margin: 0 0 14px;
    text-align: center;
    font-size: var(--capsule-h2-size, clamp(28px, 3.6vw, 42px));
    line-height: 1.1;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--capsule-color-secondary);
}
.capsule-home__section-title--accent {
    color: var(--capsule-color-secondary);
    text-transform: uppercase;
    font-size: var(--capsule-h2-size, clamp(28px, 3.6vw, 42px));
}
.capsule-home__section-intro {
    max-width: 920px;
    margin: 0 auto 34px;
    text-align: center;
    font-size: 18px;
    line-height: 1.5;
    color: var(--capsule-color-text);
}
/* ═══════════════════════════════════════
   CARDS GRID — flex centered so that < 3 cards row is centered
   (grid would left-align last-row items, flex+justify-center centers them)
   ═══════════════════════════════════════ */
.capsule-home__cards-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 22px;
}
.capsule-home__service-card {
    background: var(--capsule-color-secondary);
    border-radius: 4px;
    padding: 34px 15px 28px;
    text-align: center;
    color: var(--capsule-color-text);
    min-height: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Nombre de cartes par ligne piloté par --cards-cols (défaut 3).
       La variable est posée en inline-style sur .capsule-home__cards-grid
       par le module « grille de cartes » (option « Cartes par ligne »).
       Gaps : (cols - 1) × 22px. */
    flex: 0 1 calc((100% - (var(--cards-cols, 3) - 1) * 22px) / var(--cards-cols, 3));
    max-width:  calc((100% - (var(--cards-cols, 3) - 1) * 22px) / var(--cards-cols, 3));
    box-sizing: border-box;
}
.capsule-home__service-icon { font-size: 48px; line-height: 1; margin-bottom: 18px; }
.capsule-home__service-icon--img {
    /* Image principale de la carte. Hauteur fixe (260px) pour garantir un alignement
       parfait entre toutes les cards quelle que soit la largeur de colonne ou la
       proportion de l'image originale. object-fit: cover sur le <img> recadre
       proprement sans déformation. */
    font-size: 0;
    width: 100%;
    height: 260px;
    margin-bottom: 18px;
}
.capsule-home__service-icon--img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}
/* Smaller image on mobile so a single-column card doesn't have a giant
   visual relative to its content (260px would be ~70% of viewport width). */
@media (max-width: 640px) {
    .capsule-home__service-icon--img { height: 200px; }
}
.capsule-home__service-logo {
    /* Cadre logo fixe : 100% × 80px. Tous les logos (carrés, horizontaux, verticaux)
       sont contenus dans la même boîte, garantissant un alignement parfait des éléments
       qui suivent (titre, image, description, bouton). */
    width: 100%;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}
.capsule-home__service-logo img {
    max-width: 200px;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}
.capsule-home__service-card h3 {
    margin: 0;
    font-size: var(--capsule-h3-size, 20px);
    line-height: 1.15;
    font-weight: 800;
    text-transform: uppercase;
    /* Réserve la hauteur de 2 lignes pour aligner les éléments suivants quand
       certains titres tiennent sur 1 ligne et d'autres sur 2. */
    min-height: calc(1.15em * 2);
    display: flex;
    align-items: center;
    justify-content: center;
}
.capsule-home__service-sep { width: 44px; height: 3px; background: var(--capsule-color-text); margin: 18px auto 20px; }
.capsule-home__service-card p {
    font-size: 16px;
    line-height: 1.45;
    margin: 0 0 28px;
    /* Réserve 3 lignes pour que les boutons s'alignent même si les descriptions
       ont des longueurs différentes. */
    min-height: calc(1.45em * 3);
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.capsule-home__service-btn {
    margin-top: auto;
}
.capsule-home__service-card > p {
    margin-bottom: 15px !important;
}

/* Responsive grid */
@media (max-width: 1024px) {
    .capsule-home__service-card {
        flex: 0 1 calc((100% - 22px) / 2);
        max-width: calc((100% - 22px) / 2);
    }
}
@media (max-width: 767px) {
    .capsule-home__service-card {
        flex: 0 1 100%;
        max-width: 100%;
    }
}

/* Deprecated: the --dark modifier no longer applies a custom bg. */
/* ── About section title (above the grid) ── */
.capsule-home__about-section-title {
    text-align: center;
    font-size: var(--capsule-h2-size, clamp(28px, 3.6vw, 42px));
    font-weight: 800;
    text-transform: uppercase;
    color: var(--capsule-color-secondary);
    margin: 0 0 40px;
    line-height: 1.1;
}

/* ── About grid: card overlaps image from the right ── */
.capsule-home__section--about .capsule-container { overflow: visible; }
.capsule-home__about-grid {
    display: grid;
    grid-template-columns: 55% 1fr;
    /* Start both items from the top, image will be pulled up via negative margin */
    align-items: start;
    gap: 0;
    position: relative;
}
.capsule-home__about-card {
    background: var(--capsule-color-secondary);
    color: var(--capsule-color-text);
    padding: 52px 48px;
    border-radius: 8px;
    position: relative;
    z-index: 2;
    margin-right: -48px;
    /* Push card down so image can peek above it */
    margin-top: 48px;
    box-shadow: 8px 0 32px rgba(0,0,0,.12);
}
.capsule-home__about-card h3 {
    margin: 0 0 20px;
    font-size: var(--capsule-h3-size, clamp(22px, 2.8vw, 32px));
    line-height: 1.1;
    font-weight: 800;
}
.capsule-home__about-card p  { margin: 0 0 16px; font-size: 16px; line-height: 1.6; }
.capsule-home__about-text    { font-size: 16px; line-height: 1.6; margin-bottom: 15px; }
.capsule-home__about-text p  { margin: 0 0 16px; }
.capsule-home__about-text p:last-child { margin-bottom: 0; }

.capsule-home__about-media {
    position: relative;
    z-index: 1;
    border-radius: 8px;
    overflow: hidden;
    /* Starts from top (no margin-top), so it sits higher than the card */
    min-height: 520px;
}
.capsule-home__about-media img {
    width: 100%;
    height: 100%;
    min-height: 480px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}
@media (max-width: 1100px) {
    .main-menu { gap: 18px; }
    .main-menu a { font-size: 12px; letter-spacing: .06em; }
    .capsule-home__about-section-title { margin-bottom: 28px; font-size: clamp(24px,5vw,32px); }
    .capsule-home__about-grid { grid-template-columns: 1fr; gap: 0; }
    .capsule-home__about-card { margin-right: 0; margin-bottom: -28px; box-shadow: 0 8px 24px rgba(0,0,0,.12); border-radius: 8px 8px 0 0; }
    .capsule-home__about-media { min-height: 280px; border-radius: 0 0 8px 8px; }
    .capsule-home__about-media img { min-height: 280px; }
}
/* ── Tablet (≤ 1024px): smaller nav gaps ── */
@media (max-width: 1024px) {
    .main-menu { gap: 24px; }
    .main-menu a { font-size: 13px; letter-spacing: .06em; }
    .site-header__main { gap: 0 20px; }
}

/* Hamburger hidden by default on desktop */
.site-header__hamburger { display: none; }

/* ── Tablet/Mobile (≤ 860px): hamburger menu ── */
@media (max-width: 860px) {

    /* Header: logo + hamburger on same row, actions hidden inline */
    .site-header__main {
        grid-template-columns: 1fr auto auto;
        grid-template-rows: auto;
        gap: 0 12px;
        min-height: 64px;
    }
    .site-header__brand { grid-column: 1; grid-row: 1; align-self: center; padding: 10px 0; }
    .site-header__nav    { display: none; } /* hidden until hamburger opens */
    .site-header__actions { grid-column: 2; grid-row: 1; align-self: center; flex-direction: row; gap: 10px; padding: 8px 0; }
    .site-header__socials { gap: 4px; }
    .site-header__socials a { width: 24px; height: 24px; font-size: 11px; }
    .site-header__cta { height: 36px; padding: 0 14px; font-size: 12px; letter-spacing: .06em; }

    /* Hamburger button */
    .site-header__hamburger {
        grid-column: 3;
        grid-row: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 36px;
        height: 36px;
        cursor: pointer;
        background: none;
        border: none;
        padding: 4px;
        align-self: center;
        border-radius: 6px;
        transition: background .15s;
    }
    .site-header__hamburger:hover { background: rgba(0,0,0,.05); }
    .site-header__hamburger span {
        display: block;
        height: 2px;
        background: var(--capsule-color-primary);
        border-radius: 2px;
        transition: transform .25s, opacity .25s, width .25s;
        transform-origin: center;
    }
    .site-header__hamburger span:nth-child(2) { width: 75%; }
    /* Open state */
    .site-header--menu-open .site-header__hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .site-header--menu-open .site-header__hamburger span:nth-child(2) { opacity: 0; width: 100%; }
    .site-header--menu-open .site-header__hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* Mobile nav panel */
    .site-header--menu-open .site-header__nav {
        display: block;
        position: absolute;
        top: 100%;
        left: 0; right: 0;
        background: #fff;
        border-top: 1px solid #f1f5f9;
        box-shadow: 0 8px 24px rgba(0,0,0,.1);
        z-index: 200;
        padding: 12px 0 20px;
    }
    .site-header--menu-open .main-menu {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        padding: 0 24px;
    }
    .site-header--menu-open .main-menu li { width: 100%; }
    .site-header--menu-open .main-menu a {
        font-size: 14px;
        padding: 12px 0;
        border-bottom: 1px solid #f1f5f9;
    }
    .site-header--menu-open .main-menu a::after { display: none; }
    .site-header--menu-open .main-menu .sub-menu {
        position: static;
        transform: none;
        box-shadow: none;
        border: none;
        opacity: 1;
        pointer-events: auto;
        border-radius: 0;
        padding: 0 0 0 16px;
        min-width: 0;
    }
    .site-header--menu-open .main-menu .sub-menu a { font-size: 13px; padding: 8px 0; }

    /* Hero: reduce inner padding so content has more room */
    .capsule-home__inner {
        padding-left: 56px;
        padding-right: 56px;
    }
    .capsule-home__hero, .capsule-home__slide { min-height: 480px; }
    .capsule-home__hero-content { max-width: 100%; padding: 48px 0; }
    /* h1 size from admin var — responsive handled via clamp */
    .capsule-home__hero-content p  { font-size: 14px; }
    .capsule-home__arrow { width: 32px; height: 32px; font-size: 16px; }
    .capsule-home__arrow--prev { left: 10px; }
    .capsule-home__arrow--next { right: 10px; }
}

/* ── Mobile (≤ 480px): very small screens ── */
@media (max-width: 480px) {

    /* Header: hide social icons, keep hamburger + CTA */
    .site-header__socials { display: none; }
    .site-header__cta { font-size: 11px; padding: 0 12px; height: 32px; }

    /* Hero: minimal padding, arrows very small */
    .capsule-home__inner { padding-left: 44px; padding-right: 44px; }
    .capsule-home__hero, .capsule-home__slide { min-height: 360px; }
    .capsule-home__hero-content { padding: 36px 0; }
    .capsule-home__hero-content h1 { margin-bottom: 12px; }
    .capsule-home__hero-content p  { font-size: 13px; }
    .capsule-home__hero-content .capsule-home__btn { margin-top: 20px; height: 38px; padding: 0 18px; font-size: 12px; }
    .capsule-home__arrow { width: 28px; height: 28px; font-size: 14px; }
    .capsule-home__arrow--prev { left: 6px; }
    .capsule-home__arrow--next { right: 6px; }
    .capsule-home__dots { bottom: 12px; gap: 6px; }
}


.capsule-home__section--stats { padding: 0; }
.capsule-home__stats-bar {
    position: relative;
    background: var(--capsule-color-secondary);
    color: #fff;
    padding: 34px 0;
    overflow: hidden;
}
/* With bg image: larger padding so the image has presence + room for parallax */
.capsule-home__stats-bar--has-bg {
    padding: 200px 0;
}
/* Background image wrapper — taller than the bar so we can translateY for parallax
   without ever revealing the bar's solid color behind it. */
.capsule-home__stats-bg {
    position: absolute;
    inset: -10% 0;
    height: 120%;
    z-index: 0;
    pointer-events: none;
    will-change: transform;
}
.capsule-home__stats-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
/* Parallax disabled when the user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
    .capsule-home__stats-bg { transform: none !important; }
}
.capsule-home__stats-overlay {
    position: absolute;
    inset: 0;
    --capsule-overlay-color: rgba(0, 0, 0, 0.55);
    background: var(--capsule-overlay-color);
    z-index: 1;
    pointer-events: none;
}
.capsule-home__stats-overlay--all   { background: var(--capsule-overlay-color); }
.capsule-home__stats-overlay--left  { background: linear-gradient(to right,  var(--capsule-overlay-color) 0%, var(--capsule-overlay-color) 35%, transparent 75%); }
.capsule-home__stats-overlay--right { background: linear-gradient(to left,   var(--capsule-overlay-color) 0%, var(--capsule-overlay-color) 35%, transparent 75%); }
.capsule-home__stats-overlay--top   { background: linear-gradient(to bottom, var(--capsule-overlay-color) 0%, var(--capsule-overlay-color) 35%, transparent 80%); }
.capsule-home__stats-overlay--bottom{ background: linear-gradient(to top,    var(--capsule-overlay-color) 0%, var(--capsule-overlay-color) 35%, transparent 80%); }
.capsule-home__stats-overlay--none  { display: none; }
.capsule-home__stats-inner {
    position: relative;
    z-index: 2;
}
.capsule-home__stats-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 40px;
}
.capsule-home__stats-title {
    margin: 0 0 14px;
    text-align: center;
    font-size: var(--capsule-h2-size, clamp(28px, 3.6vw, 42px));
    line-height: 1.1;
    font-weight: 800;
    text-transform: uppercase;
    color: #fff;
}
.capsule-home__stats-intro {
    max-width: 920px;
    margin: 0 auto;
    text-align: center;
    font-size: 18px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.92);
}
.capsule-home__stats-intro p { margin: 0 0 8px; }
.capsule-home__stats-intro p:last-child { margin-bottom: 0; }

.capsule-home__stats-grid {
    display: grid;
    grid-template-columns: repeat(var(--stats-cols, 3), minmax(0, 1fr));
    gap: 24px;
    text-align: center;
}
.capsule-home__stat-item { padding: 6px 12px; }
.capsule-home__stat-value { font-size: clamp(34px,4vw,54px); font-weight: 800; line-height: 1; margin-bottom: 6px; }
.capsule-home__stat-label { font-size: 18px; line-height: 1.3; }
.capsule-home__section--contact { padding: 72px 0 96px; }
.capsule-home__contact-grid { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(300px,.72fr); gap: 48px; align-items: start; }
.capsule-home__contact-title { margin: 0 0 18px; color: var(--capsule-color-secondary); font-size: var(--capsule-h2-size, clamp(28px, 3.6vw, 42px)); line-height: 1.1; font-weight: 800; text-transform: uppercase; }
.capsule-home__contact-intro { max-width: 920px; font-size: 18px; line-height: 1.5; color: var(--capsule-color-text); margin-bottom: 26px; }
.capsule-home__contact-intro p { margin: 0 0 10px; }
/* The <form> is just a block container. The real grid lives on
   .capsule-form__fields (defined further down). Putting display:grid on
   the <form> itself created phantom grid items for hidden inputs and
   <noscript>, which added a useless empty row + 18px gap at the top of
   every modal/contact form (visible in DevTools as a hatched purple gap). */
.capsule-home__contact-form { display: block; }
.capsule-home__contact-form input[type="hidden"] { display: none; }
.capsule-home__contact-form label { display: block; font-size: 15px; color: var(--capsule-color-primary); }
.capsule-home__contact-form label span { color: var(--capsule-color-secondary); }
.capsule-home__contact-form input:not([type="hidden"]), .capsule-home__contact-form textarea { width: 100%; margin-top: 6px; border: 1px solid #d7dde5; border-radius: 6px; padding: 12px 14px; font: inherit; color: var(--capsule-color-primary); background: #fff; }
.capsule-home__contact-form textarea { resize: vertical; min-height: 130px; }
.capsule-home__contact-aside { background: #f1f2f3; border-radius: 4px; padding: 24px 24px 10px; }
.capsule-home__contact-map { margin-bottom: 22px; }
.capsule-home__contact-map img { width: 100%; max-width: 240px; margin: 0 auto; object-fit: contain; }
.capsule-home__contact-sites { display: grid; gap: 18px; }
.capsule-home__contact-site h3 { margin: 0 0 8px; font-size: var(--capsule-h3-size, 18px); color: var(--capsule-color-primary); font-weight: 800; text-transform: uppercase; }
.capsule-home__contact-site-text { font-size: 15px; line-height: 1.45; color: var(--capsule-color-primary); }
.capsule-home__contact-site-phone { margin-top: 8px; font-size: 18px; font-weight: 800; color: var(--capsule-color-primary); }
@media (max-width: 1100px) {
    .capsule-home__stats-grid { grid-template-columns: 1fr; }
    .capsule-home__contact-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════
   CAPSULE FORM — dynamic form renderer
   ═══════════════════════════════════════ */
.capsule-form__fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 16px;
}
/* Full-width field (no --half modifier) */
.capsule-form__field {
    grid-column: 1 / -1;
    min-width: 0;
}
/* Half-width field */
.capsule-form__field--half {
    grid-column: span 1;
    min-width: 0;
}
.capsule-form__field label {
    display: block;
    font-size: 15px;
    color: var(--capsule-color-primary);
    margin-bottom: 6px;
}
.capsule-form__req { color: var(--capsule-color-secondary); }
.capsule-form__field input,
.capsule-form__field select,
.capsule-form__field textarea {
    width: 100%;
    border: 1px solid #d7dde5;
    border-radius: 6px;
    padding: 12px 14px;
    font: inherit;
    color: var(--capsule-color-primary);
    background: #fff;
}
.capsule-form__field textarea { resize: vertical; min-height: 120px; }
.capsule-form__radio-group { display: flex; flex-direction: column; gap: 8px; }
.capsule-form__radio,
.capsule-form__checkbox {
    display: flex; align-items: center; gap: 8px;
    font-size: 15px; cursor: pointer;
}
.capsule-form__radio input,
.capsule-form__checkbox input { width: 16px; height: 16px; cursor: pointer; }
.capsule-form__actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    margin-top: 6px;
}
.capsule-form__actions button {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; padding: 0 28px;
    border-radius: var(--capsule-radius);
    background: var(--capsule-color-secondary);
    color: #fff; font: 700 14px/1 var(--capsule-font-base);
    text-transform: uppercase; border: 0; cursor: pointer;
    transition: opacity .15s;
}
.capsule-form__actions button:hover { opacity: .85; }
@media (max-width: 620px) {
    .capsule-form__fields { grid-template-columns: 1fr; }
    .capsule-form__field--half { grid-column: 1 / -1; }
}

/* ═══════════════════════════════════════
   SECTION ACTUALITÉS
   ═══════════════════════════════════════ */
/* ═══════════════════════════════════════
   NEWS / ACTUALITÉS
   Ordre: date → titre → extrait → "Lire la suite" → image (en bas)
   Layout: colonnes séparées par lignes verticales fines
   ═══════════════════════════════════════ */
.capsule-home__section--news {
    padding: 72px 0 80px;
    background: var(--capsule-color-white);
}
.capsule-news__header {
    text-align: center;
    margin-bottom: 48px;
}
.capsule-news__title {
    margin: 0 0 14px;
    text-align: center;
    font-size: var(--capsule-h2-size, clamp(28px, 3.6vw, 42px));
    font-weight: 800;
    text-transform: uppercase;
    color: var(--capsule-color-secondary);
    line-height: 1.1;
}
.capsule-news__intro {
    max-width: 920px;
    margin: 0 auto 34px;
    text-align: center;
    font-size: 18px;
    line-height: 1.5;
    color: var(--capsule-color-text);
}
.capsule-news__grid {
    display: grid;
    grid-template-columns: repeat(var(--news-cols, 4), minmax(0, 1fr));
    column-gap: 32px;
    row-gap: 48px;
    align-items: stretch;
}
.capsule-news__card {
    display: flex;
    flex-direction: column;
    padding: 0;
    position: relative;
    min-width: 0; /* allow the card to shrink inside grid cell */
}
/* Séparateur vertical centré dans le gap, via pseudo-élément */
.capsule-news__card:not(:first-child)::before {
    content: '';
    position: absolute;
    left: -16px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #e5e7eb;
    pointer-events: none;
}
/* Hide separator for first-of-row cards when wrapping */
.capsule-news__grid--cols-1 .capsule-news__card::before { display: none; }
.capsule-news__grid--cols-2 .capsule-news__card:nth-child(2n+1)::before { display: none; }
.capsule-news__grid--cols-3 .capsule-news__card:nth-child(3n+1)::before { display: none; }
.capsule-news__grid--cols-4 .capsule-news__card:nth-child(4n+1)::before { display: none; }

/* Body = date + titre + extrait + "Lire la suite" */
.capsule-news__card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
}
/* Date — color secondary, uppercase, bold */
.capsule-news__date {
    font-size: 16px;
    font-weight: 800;
    color: var(--capsule-color-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 10px;
}

/* Titre d'article — H3 qui hérite des réglages backoffice typography */
.capsule-news__title-post {
    margin: 0 0 12px;
    line-height: 1.25;
    color: var(--capsule-color-primary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.capsule-news__title-post a {
    color: inherit;
    text-decoration: none;
    transition: color 0.15s ease;
}
.capsule-news__title-post a:hover {
    color: var(--capsule-color-secondary);
    text-decoration: none;
}

/* Extrait — clamp à 3 lignes avec "..." pour alignement parfait.
   Pas de flex:1 (ça tue le line-clamp). Hauteur fixe pour que toutes
   les cartes aient la même hauteur d'extrait, même si le texte est court. */
.capsule-news__card-excerpt {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--capsule-color-text);
    margin: 0 0 20px;
    /* Réserve exactement 3 lignes: 3 × 1.5em = 4.5em */
    min-height: calc(1.5em * 3);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* "Lire la suite" + flèche alignée à droite, poussée en bas du body */
.capsule-news__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 17px;
    font-weight: 700;
    color: var(--capsule-color-text);
    text-decoration: none;
    padding-bottom: 20px;
    margin-top: auto;
    transition: color 0.15s ease;
}
.capsule-news__link::after {
    content: '>';
    font-weight: 500;
    font-size: 16px;
    color: var(--capsule-color-text);
    transition: transform 0.15s ease, color 0.15s ease;
}
.capsule-news__link:hover {
    color: var(--capsule-color-secondary);
    text-decoration: none;
}
.capsule-news__link:hover::after {
    color: var(--capsule-color-secondary);
    transform: translateX(3px);
}

/* Image — hauteur fixe pour que toutes les cartes aient la même taille d'image
   peu importe la quantité de texte au-dessus. flex-shrink:0 empêche le conteneur
   de rétrécir quand le body est plus grand que celui de la carte voisine. */
.capsule-news__card-image {
    flex-shrink: 0;
}
.capsule-news__img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 2px;
    display: block;
}
.capsule-news__img-placeholder {
    width: 100%;
    height: 220px;
    background: #e9ebee;
    border-radius: 2px;
}

.capsule-news__all-wrap {
    text-align: center;
    margin-top: 44px;
}

@media (max-width: 1100px) {
    .capsule-news__grid { --news-cols: 2; column-gap: 36px; grid-template-columns: repeat(2, 1fr) !important; }
    .capsule-news__card:not(:first-child)::before { left: -18px; }
    .capsule-news__card:nth-child(n+3) { margin-top: 36px; }
    /* Pas de séparateur sur la 3e carte (début de nouvelle rangée) */
    .capsule-news__card:nth-child(3)::before { display: none; }
}
@media (max-width: 640px) {
    .capsule-news__grid { --news-cols: 1; column-gap: 0; grid-template-columns: 1fr !important; row-gap: 0; }
    .capsule-news__card::before { display: none; }
    /* Asymmetric spacing: the gap BEFORE a new article (with its border separator)
       is significantly larger than the gap WITHIN an article — so "Lire la suite"
       reads as belonging to the article above it, not the one below. */
    .capsule-news__card + .capsule-news__card {
        margin-top: 36px;
        padding-top: 36px;
        border-top: 1px solid #e5e7eb;
    }
    /* On mobile, put the image at the top of each card and the "Lire la suite"
       link at the bottom of the body — same article reads top-down, and the
       link is clearly anchored to its own article (tight to the excerpt). */
    .capsule-news__card-image { order: -1; margin-bottom: 14px; }
    .capsule-news__card-body  { order: 1; }
    /* On desktop, the excerpt reserves a min-height of 3 lines + the link uses
       margin-top:auto + padding-bottom — all to keep cards aligned in a grid.
       On mobile (single column) those tricks just create dead space between
       the excerpt and the "Lire la suite" link. Reset them all. */
    .capsule-news__card-excerpt { min-height: 0; margin-bottom: 6px; }
    .capsule-news__link {
        padding-bottom: 0;
        margin-top: 0;       /* override desktop margin-top:auto */
    }
}

/* Bouton "Voir tous" — reprend la couleur secondaire */
.capsule-news__all-wrap .capsule-home__btn {
    background: var(--capsule-color-secondary);
}

/* ── Hero text alignment ─────────────────────────────────── */
/* Par défaut : aligné à gauche */
.capsule-home__hero-content--left   { text-align: left;   align-items: flex-start; max-width: 520px; }
.capsule-home__hero-content--center {
    text-align: center;
    align-items: center;
    max-width: 700px;
    margin: 0 auto;
}
.capsule-home__hero-content--right  {
    text-align: right;
    align-items: flex-end;
    max-width: 520px;
    margin-left: auto;
}
/* Sans classe = comportement original (gauche) */
.capsule-home__hero-content:not([class*="--"]) { max-width: 520px; }

/* (Ancien override des logos service-card supprimé en v9.76 — la définition principale
   ligne ~408 est maintenant la source de vérité avec un cadre fixe 100% × 80px.) */

/* ═══════════════════════════════════════
   ABOUT SPLIT — SLIDER MODE
   ═══════════════════════════════════════ */
.capsule-about-slider {
    position: relative;
    padding-bottom: 48px; /* room for dots */
}
.capsule-about-slide {
    display: none;
}
.capsule-about-slide.is-active {
    display: block;
}
.capsule-about-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 28px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}
.capsule-about-dot {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    border: 0;
    background: var(--capsule-color-primary);
    opacity: .3;
    cursor: pointer;
    padding: 0;
    transition: opacity .2s, transform .2s;
}
.capsule-about-dot.is-active {
    opacity: 1;
    background: var(--capsule-color-secondary);
    transform: scale(1.2);
}

/* ═══════════════════════════════════════
   SLIDER FADE ANIMATION — shared by hero & about
   ═══════════════════════════════════════ */
/* Hero slides */
.capsule-home__slide {
    display: none;
    animation: none;
}
.capsule-home__slide.is-active {
    display: flex;
}
.capsule-home__slide.is-entering {
    animation: capsule-fade-in-slide 0.32s ease forwards;
}
.capsule-home__slide.is-leaving {
    animation: capsule-fade-out-slide 0.32s ease forwards;
    position: absolute;
    inset: 0;
    display: flex;
    pointer-events: none;
}

/* About slides */
.capsule-about-slide {
    display: none;
}
.capsule-about-slide.is-active {
    display: block;
}
.capsule-about-slide.is-entering {
    animation: capsule-fade-in-slide 0.32s ease forwards;
}
.capsule-about-slide.is-leaving {
    animation: capsule-fade-out-slide 0.32s ease forwards;
    position: absolute;
    inset: 0;
    display: block;
    pointer-events: none;
}

@keyframes capsule-fade-in-slide {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes capsule-fade-out-slide {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-8px); }
}

/* ═══════════════════════════════════════
   ABOUT SLIDER — ARROWS
   ═══════════════════════════════════════ */
.capsule-about-slider { position: relative; overflow: visible; }

.capsule-about-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 0;
    background: var(--capsule-color-secondary);
    color: #fff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
    transition: opacity .15s, transform .15s;
}
.capsule-about-arrow:hover { opacity: .85; transform: translateY(-50%) scale(1.07); }
.capsule-about-arrow--prev { left: -22px; }
.capsule-about-arrow--next { right: -22px; }

@media (max-width: 1100px) {
    .capsule-about-arrow--prev { left: 6px; }
    .capsule-about-arrow--next { right: 6px; }
}

/* ═══════════════════════════════════════
   FOOTER — 4 columns: logo | contact | socials | links
   ═══════════════════════════════════════ */
.site-footer {
    background: var(--capsule-color-secondary);
    color: #000;
    font-size: 14px;
    line-height: 1.5;
}
.site-footer--light   { background: #f4f4f4; color: var(--capsule-color-text); }
.site-footer--white   { background: #fff;    color: var(--capsule-color-text); }
.site-footer--primary { background: var(--capsule-color-primary); color: rgba(255,255,255,.92); }
.site-footer--secondary { background: var(--capsule-color-secondary); color: rgba(255,255,255,.92); }
.site-footer--text    { background: var(--capsule-color-text); color: rgba(255,255,255,.92); }
.site-footer--bg      { background: var(--capsule-color-bg); color: var(--capsule-color-text); }
.site-footer--dark    { background: var(--capsule-color-primary); color: rgba(255,255,255,.88); }

.site-footer__inner {
    display: grid;
    grid-template-columns: minmax(220px, 340px) minmax(220px, 1fr) minmax(180px, .9fr) minmax(180px, .9fr);
    align-items: stretch;
    gap: 0;
}
.site-footer__brand-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 32px 42px;
    gap: 8px;
}
.site-footer__logo { max-width: 230px; height: auto; display: block; }
.site-footer__brand-name {
    font-size: 28px;
    font-weight: 800;
    color: var(--capsule-color-secondary);
}
.site-footer__tagline { font-size: 13px; color: #666; }

.site-footer__col {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    padding: 30px 34px;
}
.site-footer__col--contact { gap: 18px; }
.site-footer__contact-title { font-size: 15px; font-weight: 700; }
.site-footer__contact-group {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 16px;
    align-items: start;
}
.site-footer__contact-icon {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: inherit;
}
.site-footer__contact-lines { display: flex; flex-direction: column; gap: 8px; }
.site-footer__contact-label { font-size: 12px; font-weight: 700; opacity: .8; text-transform: uppercase; }
.site-footer__contact-value { font-size: 14px; font-weight: 700; }
.site-footer__contact-value a { color: inherit; text-decoration: none; }
.site-footer__contact-value--multiline { font-weight: 500; display: flex; flex-direction: column; }
.site-footer__contact-line { line-height: 1.45; }

.site-footer__social-link {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: inherit;
    text-decoration: none;
    transition: opacity .15s;
}
.site-footer__social-link:hover,
.site-footer__link:hover { opacity: .75; }
.site-footer__social-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 14px;
    color: #fff;
}
.site-footer--dark .site-footer__social-icon,
.site-footer--primary .site-footer__social-icon {
    background: rgba(255,255,255,.2);
}
.site-footer__link {
    font-size: 14px;
    color: inherit;
    text-decoration: none;
    transition: opacity .15s;
}
.site-footer__credits { font-size: 13px; opacity: .85; margin-top: 6px; }
.site-footer__credit-link { color: inherit; font-weight: 700; text-decoration: underline; }

@media (max-width: 1100px) {
    .site-footer__inner {
        grid-template-columns: 1fr 1fr;
    }
    .site-footer__brand-box { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
    .site-footer__inner { grid-template-columns: 1fr; }
    .site-footer__col, .site-footer__brand-box { padding: 22px 24px; }
}

/* ═══════════════════════════════════════
   FORM RESPONSE MESSAGES + SPINNER
   ═══════════════════════════════════════ */
.capsule-form__response {
    display: none;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    padding: 14px 18px;
    border-radius: 8px;
    font-size: 15px;
    line-height: 1.45;
}
.capsule-form__response--success {
    background: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
}
.capsule-form__response--error {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}
@keyframes capsule-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ═══════════════════════════════════════════════════════════════
   WYSIWYG NORMALIZATION — paragraphs behave like line breaks
   ─────────────────────────────────────────────────────────────────
   Quill always produces <p> blocks (no true soft breaks). To make
   pressing Enter feel like just going to the next line (no spacing),
   we strip all margin from <p>. An empty <p> (user pressed Enter
   twice) is still rendered as a blank line thanks to :empty::before.
   ═══════════════════════════════════════════════════════════════ */
.capsule-home__hero-content p,
.capsule-home__about-text p,
.capsule-home__about-card p,
.capsule-home__section-intro p,
.capsule-home__service-card p,
.capsule-home__contact-intro p,
.capsule-news__intro p,
.capsule-news__card-title p {
    margin: 0;
}
.capsule-home__hero-content p:empty::before,
.capsule-home__about-text p:empty::before,
.capsule-home__about-card p:empty::before,
.capsule-home__section-intro p:empty::before,
.capsule-home__service-card p:empty::before,
.capsule-home__contact-intro p:empty::before,
.capsule-news__intro p:empty::before,
.capsule-news__card-title p:empty::before {
    content: "\00a0"; /* non-breaking space preserves the empty line */
}

/* ═══════════════════════════════════════════════════════════════
   FORM FILE UPLOAD — refined dropzone pattern
   ═══════════════════════════════════════════════════════════════ */
.capsule-form__file {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    background: transparent;
    border: 1.5px dashed #cbd5e1;
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease;
    margin-top: 6px;
    position: relative;
}
.capsule-form__file:hover {
    border-color: var(--capsule-color-secondary, #ef7a3a);
    background: rgba(239, 122, 58, .03);
}
.capsule-form__file.is-dragover {
    border-color: var(--capsule-color-secondary, #ef7a3a);
    border-style: solid;
    background: rgba(239, 122, 58, .06);
}
.capsule-form__file.is-filled {
    border-style: solid;
    border-color: var(--capsule-color-primary, #17345a);
    background: #fff;
}

.capsule-form__file-input {
    /* Visually hidden but focusable + keyboard accessible */
    position: absolute;
    opacity: 0;
    width: 0.1px;
    height: 0.1px;
    overflow: hidden;
    pointer-events: none;
}
.capsule-form__file:focus-within {
    outline: 2px solid var(--capsule-color-secondary, #ef7a3a);
    outline-offset: 2px;
}

.capsule-form__file-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(23, 52, 90, .06);
    color: var(--capsule-color-primary, #17345a);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
    transition: background .2s, color .2s, transform .2s;
}
.capsule-form__file:hover .capsule-form__file-icon {
    background: rgba(239, 122, 58, .12);
    color: var(--capsule-color-secondary, #ef7a3a);
    transform: scale(1.05);
}
.capsule-form__file.is-filled .capsule-form__file-icon {
    background: rgba(16, 185, 129, .12);
    color: #10b981;
}
.capsule-form__file.is-filled .capsule-form__file-icon i {
    /* Swap icon visually using pseudo — simpler than rebuilding DOM */
    display: none;
}
.capsule-form__file.is-filled .capsule-form__file-icon::before {
    content: "\f00c"; /* fa-check */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 14px;
}

.capsule-form__file-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.capsule-form__file-title {
    font-size: 13px;
    font-weight: 500;
    color: #64748b;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.capsule-form__file-link {
    color: var(--capsule-color-secondary, #ef7a3a);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}
.capsule-form__file:hover .capsule-form__file-link {
    color: var(--capsule-color-primary, #17345a);
}
.capsule-form__file.is-filled .capsule-form__file-title {
    font-weight: 600;
    color: var(--capsule-color-primary, #17345a);
}
.capsule-form__file-hint {
    font-size: 11px;
    color: #94a3b8;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.capsule-form__file-hint strong {
    color: #64748b;
    font-weight: 600;
}

.capsule-form__file-remove {
    color: #dc2626;
    text-decoration: none;
    font-weight: 600;
    margin-left: 6px;
    border-bottom: 1px solid transparent;
    transition: border-color .15s;
}
.capsule-form__file-remove:hover { border-bottom-color: #dc2626; }

@media (max-width: 560px) {
    .capsule-form__file { padding: 14px 16px; gap: 12px; }
    .capsule-form__file-icon { width: 32px; height: 32px; font-size: 13px; }
    .capsule-form__file-title { font-size: 12.5px; }
    .capsule-form__file-hint { font-size: 10.5px; }
}

/* ═══════════════════════════════════════════════════════════════
   SITE BANNER — bandeau d'annonce au-dessus du header
   ═══════════════════════════════════════════════════════════════ */
.site-banner {
    width: 100%;
    background: var(--capsule-color-primary, #17345a);
    color: #fff;
    font-size: 13px;
    line-height: 1.45;
    text-align: center;
    padding: 10px 0;
    position: relative;
    z-index: 9999;
}
.site-banner__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 0;
    padding-bottom: 0;
}
.site-banner p {
    margin: 0;
    font-size: inherit;
    line-height: inherit;
}
.site-banner a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 600;
    transition: opacity .15s;
}
.site-banner a:hover { opacity: .8; }
.site-banner strong { font-weight: 700; }
@media (max-width: 640px) {
    .site-banner { font-size: 12px; padding: 8px 0; }
    .site-banner__inner { gap: 4px; }
}

/* ═══════════════════════════════════════════════════════════════
   PAGINATION DES ACTUALITÉS
   Style: 1  2  3  ...  67  68
   ═══════════════════════════════════════════════════════════════ */
.capsule-news__pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 48px;
}
.capsule-news__page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 6px;
    border-radius: 8px;
    background: transparent;
    color: var(--capsule-color-text);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    border: 1.5px solid #e5e7eb;
    transition: all .15s ease;
    cursor: pointer;
}
.capsule-news__page-btn:hover {
    background: var(--capsule-color-primary);
    color: #fff;
    border-color: var(--capsule-color-primary);
    text-decoration: none;
}
.capsule-news__page-btn.is-active {
    background: var(--capsule-color-secondary);
    color: #fff;
    border-color: var(--capsule-color-secondary);
    font-weight: 700;
    pointer-events: none;
}
.capsule-news__page-prev,
.capsule-news__page-next {
    font-size: 17px;
    font-weight: 400;
}
.capsule-news__page-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 38px;
    color: #94a3b8;
    font-size: 14px;
    cursor: default;
}
@media (max-width: 640px) {
    .capsule-news__page-btn { min-width: 34px; height: 34px; font-size: 13px; }
}

/* ═══════════════════════════════════════════════════════════════
   LOGOS SLIDER — horizontal slider reusing hero arrow design
   ═══════════════════════════════════════════════════════════════ */
.capsule-home__section--logos { padding: 72px 0 80px; }
.capsule-home__logos-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 40px;
}
.capsule-home__logos-title {
    margin: 0 0 14px;
    text-align: center;
    font-size: var(--capsule-h2-size, clamp(28px, 3.6vw, 42px));
    line-height: 1.1;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--capsule-color-secondary);
}
.capsule-home__logos-intro {
    max-width: 920px;
    margin: 0 auto 34px;
    text-align: center;
    font-size: 18px;
    line-height: 1.5;
    color: var(--capsule-color-text);
}
.capsule-home__logos-intro p { margin: 0 0 8px; }
.capsule-home__logos-intro p:last-child { margin-bottom: 0; }

.capsule-home__logos-slider {
    position: relative;
    padding: 0 60px; /* space for absolute-positioned arrows */
}
/* Arrows use the same .capsule-home__arrow base style as the hero slider.
   We only override position for the logos context (side of slider, vertical-centered). */
.capsule-home__section--logos .capsule-home__arrow--prev { left: 0; }
.capsule-home__section--logos .capsule-home__arrow--next { right: 0; }

.capsule-home__logos-track-wrap {
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
}
.capsule-home__logos-track-wrap::-webkit-scrollbar { display: none; }

.capsule-home__logos-track {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 0;
}
.capsule-home__logos-item {
    /* Width is set in JS as a flex % based on responsive perView.
       CSS only constrains height and centering. */
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    box-sizing: border-box;
}
.capsule-home__logos-item img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    transition: opacity .2s;
}
.capsule-home__logos-item a:hover img { opacity: 0.8; }

@media (max-width: 768px) {
    .capsule-home__section--logos { padding: 48px 0 56px; }
    .capsule-home__logos-slider { padding: 0 44px; }
    .capsule-home__logos-item {
        height: 100px;
        padding: 10px 12px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   ABOUT_SPLIT — LAYOUT SIMPLE (no card overlap, flat image next to text)
   Activated per-section via .capsule-home__section--about-layout-simple
   ═══════════════════════════════════════════════════════════════ */
.capsule-home__section--about-layout-simple .capsule-home__about-grid {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    gap: 60px;
    align-items: center;
    margin-bottom: 0;
}
/* Default (img right): card = col 1, media = col 2 */
.capsule-home__section--about-layout-simple .capsule-home__about-grid .capsule-home__about-card  { grid-column: 1; grid-row: 1; }
.capsule-home__section--about-layout-simple .capsule-home__about-grid .capsule-home__about-media { grid-column: 2; grid-row: 1; }

/* Image left: swap columns explicitly */
.capsule-home__section--about-layout-simple .capsule-home__about-grid--img-left .capsule-home__about-card  { grid-column: 2; grid-row: 1; }
.capsule-home__section--about-layout-simple .capsule-home__about-grid--img-left .capsule-home__about-media { grid-column: 1; grid-row: 1; }
.capsule-home__section--about-layout-simple .capsule-home__about-card {
    background: transparent !important;
    color: var(--capsule-color-text);
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
    position: static;
    z-index: auto;
}
.capsule-home__section--about-layout-simple .capsule-home__about-card h3 {
    color: var(--capsule-color-primary);
    font-size: var(--capsule-h3-size, clamp(26px, 3vw, 34px));
    font-weight: 800;
    line-height: 1.2;
    margin: 0 0 18px;
}
.capsule-home__section--about-layout-simple .capsule-home__about-text {
    font-size: 16px;
    line-height: 1.6;
    color: var(--capsule-color-text);
    margin-bottom: 24px;
}
.capsule-home__section--about-layout-simple .capsule-home__about-text p { margin: 0 0 12px; }
.capsule-home__section--about-layout-simple .capsule-home__about-text p:last-child { margin-bottom: 0; }
.capsule-home__section--about-layout-simple .capsule-home__about-media {
    overflow: hidden;
    border-radius: 0;
    box-shadow: none;
    min-height: auto;
    height: auto;
    margin: 0;
}
.capsule-home__section--about-layout-simple .capsule-home__about-media img {
    width: 100%;
    height: auto;
    max-height: 480px;
    object-fit: cover;
    display: block;
    min-height: auto;
}
.capsule-home__section--about-layout-simple .capsule-home__service-btn {
    background: var(--capsule-color-secondary);
    color: #fff;
    margin-top: 4px;
}

@media (max-width: 900px) {
    .capsule-home__section--about-layout-simple .capsule-home__about-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    /* On mobile, force image first regardless of img-left/right setting */
    .capsule-home__section--about-layout-simple .capsule-home__about-grid .capsule-home__about-media,
    .capsule-home__section--about-layout-simple .capsule-home__about-grid--img-left .capsule-home__about-media {
        grid-column: 1; grid-row: 1;
    }
    .capsule-home__section--about-layout-simple .capsule-home__about-grid .capsule-home__about-card,
    .capsule-home__section--about-layout-simple .capsule-home__about-grid--img-left .capsule-home__about-card {
        grid-column: 1; grid-row: 2;
    }
}

/* ═══════════════════════════════════════════════════════════════
   CERTIFICATIONS / TRUST BAR (under footer)
   ═══════════════════════════════════════════════════════════════ */
.site-certifs {
    background: #fafafa;
    padding: 28px 0 32px;
}
.site-certifs--light     { background: #fafafa; color: var(--capsule-color-text); }
.site-certifs--white     { background: #fff;    color: var(--capsule-color-text); }
.site-certifs--bg        { background: var(--capsule-color-bg);        color: var(--capsule-color-text); }
.site-certifs--primary   { background: var(--capsule-color-primary);   color: rgba(255,255,255,.92); }
.site-certifs--secondary { background: var(--capsule-color-secondary); color: rgba(255,255,255,.92); }
.site-certifs--text      { background: var(--capsule-color-text);      color: rgba(255,255,255,.92); }
.site-certifs--primary .site-certifs__title,
.site-certifs--primary .site-certifs__label,
.site-certifs--secondary .site-certifs__title,
.site-certifs--secondary .site-certifs__label,
.site-certifs--text .site-certifs__title,
.site-certifs--text .site-certifs__label { color: rgba(255,255,255,.7); }
.site-certifs--primary .site-certifs__item img,
.site-certifs--secondary .site-certifs__item img,
.site-certifs--text .site-certifs__item img { filter: brightness(0) invert(1); opacity: .9; }
.site-certifs__title {
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #94a3b8;
    margin-bottom: 18px;
}
.site-certifs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 36px;
}
.site-certifs__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    max-width: 180px;
}
.site-certifs__item img {
    max-width: 100%;
    max-height: 70px;
    height: auto;
    width: auto;
    object-fit: contain;
    display: block;
}
.site-certifs__label {
    font-size: 12px;
    line-height: 1.3;
    color: #94a3b8;
}
@media (max-width: 640px) {
    .site-certifs__list { gap: 20px; }
    .site-certifs__item img { max-height: 54px; }
}

/* ═══════════════════════════════════════════════════════════════
   SINGLE ARTICLE — matches design reference
   ═══════════════════════════════════════════════════════════════ */
.capsule-article {
    padding: 38px 0 80px;
    background: var(--capsule-color-bg, #fff);
}

/* Breadcrumb */
.capsule-article__breadcrumb {
    font-size: 13px;
    color: #94a3b8;
    margin-bottom: 22px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.capsule-article__breadcrumb a {
    color: #94a3b8;
    text-decoration: none;
    transition: color .15s;
}
.capsule-article__breadcrumb a:hover { color: var(--capsule-color-text); }
.capsule-article__breadcrumb-sep { color: #cbd5e1; font-size: 11px; }
.capsule-article__breadcrumb-current { color: #94a3b8; }

/* Header (title + back button) */
.capsule-article__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: 36px;
}
.capsule-article__title {
    flex: 1;
    margin: 0;
    font-size: clamp(22px, 2.6vw, 30px);
    font-weight: 800;
    line-height: 1.25;
    color: var(--capsule-color-text);
    letter-spacing: -0.01em;
}
.capsule-article__back {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    padding: 12px 22px;
    background: var(--capsule-color-secondary);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 8px;
    transition: filter .18s, transform .18s;
    white-space: nowrap;
}
.capsule-article__back:hover {
    color: #fff;
    transform: translateY(-1px);
}

/* Featured image */
.capsule-article__image {
    margin: 0 auto 40px;
    max-width: 720px;
    border-radius: 8px;
    overflow: hidden;
}
.capsule-article__image img {
    display: block;
    width: 100%;
    height: auto;
}

/* Content (Gutenberg/classic) */
.capsule-article__body {
    max-width: 960px;
    margin: 0 auto;
    padding: 0;
}
.capsule-article__content {
    color: var(--capsule-color-text);
    font-size: 17px;
    line-height: 1.75;
}
.capsule-article__content > * + * { margin-top: 1.1em; }
.capsule-article__content p { margin: 0 0 1em; }
.capsule-article__content p:last-child { margin-bottom: 0; }
.capsule-article__content strong { color: var(--capsule-color-text); font-weight: 700; }
.capsule-article__content h2,
.capsule-article__content h3,
.capsule-article__content h4 {
    color: var(--capsule-color-text);
    margin: 1.6em 0 .6em;
    font-weight: 700;
    line-height: 1.3;
}
.capsule-article__content h2 { font-size: 22px; }
.capsule-article__content h3 { font-size: var(--capsule-h3-size, 18px); }
.capsule-article__content h4 { font-size: 16px; }
.capsule-article__content a {
    color: var(--capsule-color-secondary);
    text-decoration: underline;
}
.capsule-article__content a:hover { filter: brightness(.85); }
.capsule-article__content ul,
.capsule-article__content ol { padding-left: 22px; margin: 0 0 1em; }
.capsule-article__content li { margin: 0 0 .35em; }
.capsule-article__content blockquote {
    border-left: 3px solid var(--capsule-color-secondary);
    margin: 1.4em 0;
    padding: 4px 0 4px 18px;
    color: var(--capsule-color-text);
    font-style: italic;
}
.capsule-article__content img { max-width: 100%; height: auto; border-radius: 6px; }
.capsule-article__content figure { margin: 1.4em 0; }
.capsule-article__content figcaption {
    font-size: 12px;
    color: #94a3b8;
    margin-top: 6px;
    text-align: center;
}

/* Responsive */
@media (max-width: 720px) {
    .capsule-article { padding: 24px 0 56px; }
    .capsule-article__header {
        flex-direction: column;
        gap: 18px;
        align-items: stretch;
        margin-bottom: 26px;
    }
    .capsule-article__back {
        justify-content: center;
        width: 100%;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   JOBS — section list (page) and single offer
   ═══════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════
   JOBS — In-place accordion list (no separate detail page)
   Each <details> expands inline to reveal the full offer content.
   ═══════════════════════════════════════════════════════════════════ */
.capsule-home__section--jobs { padding: 72px 0; }
.capsule-jobs__header {
    max-width: 920px;
    margin: 0 auto 40px;
    text-align: center;
}
.capsule-jobs__title {
    margin: 0 0 14px;
    font-size: var(--capsule-h2-size, clamp(28px, 3.6vw, 42px));
    line-height: 1.1;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--capsule-color-secondary);
}
.capsule-jobs__intro {
    font-size: 17px;
    line-height: 1.55;
    color: var(--capsule-color-text);
}
.capsule-jobs__list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.capsule-jobs__item {
    padding: 0;
    border-bottom: 1px solid #e5e7eb;
}
.capsule-jobs__item:first-child { border-top: 1px solid #e5e7eb; }

/* ── Accordion summary (header row, always visible) ── */
.capsule-jobs__details { }
.capsule-jobs__details summary { list-style: none; cursor: pointer; }
.capsule-jobs__details summary::-webkit-details-marker { display: none; }
.capsule-jobs__summary {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 22px 0;
}
.capsule-jobs__summary-main { flex: 1; min-width: 0; }
.capsule-jobs__item-title {
    margin: 0 0 4px;
    font-size: 20px;
    font-weight: 800;
    color: var(--capsule-color-text);
    line-height: 1.3;
}
.capsule-jobs__tag {
    color: var(--capsule-color-secondary);
    font-weight: 700;
    font-size: 16px;
    margin-left: 4px;
}
.capsule-jobs__item-date {
    font-size: 14px;
    color: var(--capsule-color-text);
    opacity: 0.75;
    margin-bottom: 10px;
}
.capsule-jobs__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    font-weight: 700;
    color: var(--capsule-color-text);
    text-decoration: none;
}
.capsule-jobs__link-arrow {
    font-weight: 400;
    transition: transform .15s ease;
}
.capsule-jobs__details[open] .capsule-jobs__link-arrow {
    transform: rotate(90deg);
}

/* Chevron at right of summary indicates the expand state */
.capsule-jobs__chevron {
    flex-shrink: 0;
    width: 12px; height: 12px;
    margin-top: 8px;
    position: relative;
}
.capsule-jobs__chevron::before,
.capsule-jobs__chevron::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 12px; height: 2px;
    background: var(--capsule-color-text);
    transform: translate(-50%, -50%);
    transition: transform .2s ease, opacity .2s ease;
}
.capsule-jobs__chevron::after { transform: translate(-50%, -50%) rotate(90deg); }
.capsule-jobs__details[open] .capsule-jobs__chevron::after { opacity: 0; }

/* ── Accordion body (full offer detail) ── */
.capsule-jobs__body {
    padding: 4px 0 32px;
}
.capsule-jobs__meta {
    margin-bottom: 18px;
    font-size: 15px;
    color: var(--capsule-color-text);
    line-height: 1.65;
}
.capsule-jobs__meta-row strong { font-weight: 700; }
.capsule-jobs__apply-btn {
    margin: 18px 0 28px;
    background: var(--capsule-color-secondary);
    color: #fff;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 12px 24px;
    border: none;
    cursor: pointer;
}
.capsule-jobs__intro-job {
    margin: 0 0 22px;
    font-size: 15px;
    line-height: 1.65;
    color: var(--capsule-color-text);
}
.capsule-jobs__intro-job p { margin: 0 0 12px; }

/* ── Missions (nested accordions inside the offer body) ── */
.capsule-jobs__missions { margin-top: 8px; }
.capsule-jobs__mission {
    border-top: 1px solid #e5e7eb;
}
.capsule-jobs__mission:last-child { border-bottom: 1px solid #e5e7eb; }
.capsule-jobs__mission summary { list-style: none; cursor: pointer; }
.capsule-jobs__mission summary::-webkit-details-marker { display: none; }
.capsule-jobs__mission-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    font-size: 18px;
    font-weight: 800;
    color: var(--capsule-color-text);
}
.capsule-jobs__mission-title::after {
    content: '+';
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
}
.capsule-jobs__mission[open] .capsule-jobs__mission-title::after {
    content: '−';
}
.capsule-jobs__mission-toggle { display: none; }
.capsule-jobs__mission-content {
    padding: 0 0 20px;
    font-size: 15px;
    line-height: 1.65;
    color: var(--capsule-color-text);
}
.capsule-jobs__mission-content p { margin: 0 0 12px; }

/* ── Spontaneous application footer ── */
.capsule-jobs__spontaneous {
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1px solid #e5e7eb;
    text-align: center;
}
.capsule-jobs__spontaneous-text {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 700;
    color: var(--capsule-color-text);
}
.capsule-jobs__spontaneous-email {
    color: var(--capsule-color-text);
    text-decoration: underline;
}
.capsule-jobs__empty {
    text-align: center;
    color: var(--capsule-color-text);
    opacity: 0.7;
    padding: 40px 0;
}

/* ═══════════════════════════════════════════════════════════════════
   APPLY MODAL — opened from any "Postuler" button in the jobs list
   ═══════════════════════════════════════════════════════════════════ */
.capsule-apply-modal {
    position: fixed; inset: 0; z-index: 99999;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.capsule-apply-modal[hidden] { display: none; }
.capsule-apply-modal__backdrop {
    position: absolute; inset: 0;
    background: rgba(15, 23, 42, 0.6);
    cursor: pointer;
}
.capsule-apply-modal__dialog {
    position: relative;
    background: #fff;
    border-radius: 12px;
    max-width: 600px; width: 100%;
    max-height: 90vh; overflow-y: auto;
    padding: 32px;
    box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.capsule-apply-modal__close {
    position: absolute; top: 14px; right: 14px;
    width: 36px; height: 36px;
    background: transparent; border: none;
    font-size: 26px; color: #64748b; cursor: pointer;
    line-height: 1; border-radius: 8px;
    transition: background .12s, color .12s;
}
.capsule-apply-modal__close:hover { background: #f1f5f9; color: #1e293b; }
.capsule-apply-modal__title {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 800;
    color: var(--capsule-color-secondary);
    padding-right: 30px;
}
.capsule-apply-modal__subtitle {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--capsule-color-text);
    opacity: 0.75;
    margin-top: 4px;
    text-transform: none;
}
.capsule-apply-modal__subtitle:empty { display: none; }
.capsule-apply-modal__body {
    margin-top: 18px;
}

@media (max-width: 640px) {
    .capsule-jobs__title { font-size: clamp(24px, 6vw, 32px); }
    .capsule-jobs__item-title { font-size: 18px; }
    .capsule-jobs__summary { gap: 10px; }
    .capsule-apply-modal { padding: 0; align-items: stretch; }
    .capsule-apply-modal__dialog {
        max-height: 100vh; border-radius: 0;
        padding: 24px 18px;
    }
}


/* ═══════════════════════════════════════════════════════════════════
   TEXT BLOCK — 100% text section
   ═══════════════════════════════════════════════════════════════════ */
.capsule-home__section--text-block { padding: 56px 0; }
.capsule-text-block {
    margin: 0 auto;
}
.capsule-text-block--narrow { max-width: 720px; }
.capsule-text-block--medium { max-width: 920px; }
.capsule-text-block--wide   { max-width: 100%; }
.capsule-text-block--align-left   { text-align: left; }
.capsule-text-block--align-center { text-align: center; }
.capsule-text-block__title {
    margin: 0 0 18px;
    font-size: var(--capsule-h2-size, clamp(28px, 3.6vw, 42px));
    line-height: 1.1;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--capsule-color-secondary);
}
.capsule-text-block__content {
    font-size: 17px;
    line-height: 1.65;
    color: var(--capsule-color-text);
}
.capsule-text-block__content p { margin: 0 0 16px; }
.capsule-text-block__content p:last-child { margin-bottom: 0; }
.capsule-text-block__content h1,
.capsule-text-block__content h2,
.capsule-text-block__content h3 { margin: 28px 0 14px; color: var(--capsule-color-secondary); }
.capsule-text-block__content ul,
.capsule-text-block__content ol { margin: 0 0 16px 24px; }
.capsule-text-block__content li { margin-bottom: 6px; }
.capsule-text-block__content a {
    color: var(--capsule-color-secondary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════
   CTA — bandeau d'appel à l'action (titre + texte + bouton)
   Couleurs par défaut : fond = couleur principale du site,
   bouton = couleur secondaire. Personnalisables par section
   via Capsule Admin → Couleurs des sections.
   ═══════════════════════════════════════════════════════════ */
.capsule-home__section--cta {
    padding: 64px 0;
    background: var(--capsule-color-primary);
}
.capsule-cta {
    max-width: 820px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.capsule-home__section--cta-align-center .capsule-cta { align-items: center; text-align: center; }
.capsule-home__section--cta-align-left   .capsule-cta { align-items: flex-start; text-align: left; margin-left: 0; }
.capsule-cta__title {
    margin: 0;
    font-size: var(--capsule-h2-size, clamp(26px, 3.2vw, 38px));
    line-height: 1.15;
    font-weight: 800;
    color: var(--capsule-color-white);
}
.capsule-cta__text {
    margin: 0;
    font-size: 17px;
    line-height: 1.6;
    color: var(--capsule-color-white);
    opacity: .92;
}
.capsule-cta__text p { margin: 0 0 12px; }
.capsule-cta__text p:last-child { margin-bottom: 0; }
.capsule-cta__btn {
    margin-top: 10px;
    background: var(--capsule-color-secondary);
}
@media (max-width: 600px) {
    .capsule-home__section--cta { padding: 48px 0; }
    .capsule-cta__text { font-size: 15px; }
}